 |
概要 | AI Bot - 新規質問モーダル |
 |
リポジトリ | GitHub - VaperinaDEV/aibot-new-question-modal |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
 |
Discourseテーマ初心者の方へ | Discourseテーマ使用の初心者ガイド |
<!- 自動インストールボタンの「repoName」と「repoURL」を入力してください →
このテーマコンポーネントをインストール
こんにちは 
Discourse AI - AI Bot が必要です。
このテーマコンポーネントは、ask.discourse.com のホームページ機能をモーダル化したものです。これにより、受信者の AI Bot と新しい会話を作成できます。
このモーダルはフルスクリーンなので、別のページにいるような印象を与えます。あるいは、そのような印象を与えることが目標でした。
主な部分:
アバター: aibot のアバターには常に回転しているスピナーがあり、書き込み中も示します。
AIメッセージ: ここでも HTML を使用できます。
クイックリンク: 質問はいくつでも追加できます。
クイックリンクの表示は設定で制限されており、モーダルを開くたびにシャッフルされます。
max quick links desktop デフォルト: 5
max quick links mobile デフォルト: 3
最近の会話: このボタンは、in:messages, @aibot-username パラメータを持つ /search ページにリダイレクトします。
モーダルについては以上です。テーマ設定ですべてを変更、カスタマイズできます。 
AI Bot モーダルを開くボタンは、サイドバーの 3 つの場所に配置できます。
-
sidebar-footer-actions
-
before-sidebar-sections
-
after-sidebar-sections
テーマ設定でボタンのスタイルを変更できます。
テーマ設定を見てみましょう
テーマ設定
- quick_links: ここでクイックボタンの質問を設定できます。
- max quick links desktop: デスクトップに表示されるクイックリンクの最大数
- max quick links mobile: モバイルに表示されるクイックリンクの最大数
- show_for_groups: 必須設定。サイドバーボタンを表示するグループ名を追加します。
- aibot_id: 必須設定。これに使用する AI Bot ID を追加します。
- aibot_username: 必須設定。これに使用する AI Bot ユーザー名を追加します。
- aibot_avatar: 必須設定。モーダルに表示される AI Bot の画像をアップロードします。
- sibebar aibot button postition: サイドバーボタンの位置を選択します。
- sidebar-footer-actions (デフォルト)
- before-sidebar-sections (サイドバーの上部)
- after-sidebar-sections (サイドバーの下部)
- sibebar aibot button style: サイドバーボタンのスタイルを選択します。
- btn-primary (デフォルト)
- btn-default
- sidebar aibot button border-radius: サイドバーボタンの角丸を変更します。
- sidebar aibot button before icon: サイドバーボタンのアイコンを変更します。
- aibot recent messages icon: 最近の会話ボタンのアイコンを変更します。
- modal background: モーダルの背景を変更します。
- modal content wrapper background: モーダルのコンテンツラッパーの背景を変更します。
- modal content wrapper border radius: モーダルのコンテンツラッパーの角丸を変更します。
- quick buttons style: クイックボタンのスタイルを選択します。
- btn-primary (デフォルト)
- btn-default
- quick buttons border radius: クイックボタンの角丸を変更します。
- mobile quick buttons wrapper border radius: モバイルクイックボタンラッパーの角丸を変更します。
- aibot avatar spinner primary color: アバター スピナーのプライマリ カラーを変更します。デフォルトは
var(--tertiary)です。 - aibot avatar spinner secondary color: アバター スピナーのセカンダリ カラーを変更します。デフォルトは
#ffffffです。 - aibot message border color: これはメッセージの右側にある境界線です。デフォルトは
var(--tertiary)です。 - textarea border-radius: テキストエリアの角丸を変更します。
- send button border radius: 送信ボタンの角丸を変更します。
- recent messages button border radius: 最近の会話ボタンの角丸を変更します。
- recent messages button color: 最近の会話ボタンの色を変更します。アイコンの色も変更されます。
- recent messages button hover color: 最近の会話ボタンのホバー時の色を変更します。
- recent messages button hover background: 最近の会話ボタンのホバー時の背景を変更します。
- recent messages button border: 最近の会話ボタンの境界線を変更します。
- spinner loader border: モーダルのスピナーローダーの境界線を変更します。メッセージを送信すると表示されます。
- spinner loader border right color: スピナーローダーの右側の色を変更します。
テーマ翻訳もあります…
テーマ翻訳
- aibot_modal_title: モーダルのタイトルです。
- aibot_message: モーダル内の AI Bot のメッセージです。
- input_placeholder: テキストエリアのプレースホルダーです。
- input_submit: 送信ボタンのタイトルです。
- input_length: テキストが短すぎる場合に表示されるメッセージです。
- disclaimer: モーダルのテキストエリアの下に表示されるテキストです。
- new_question: サイドバーボタンのテキストです。
- recent_messages: モーダルの最近の会話ボタンのテキストです。
このテーマコンポーネントは、AI Bot の個人メッセージから共有ボタンを非表示にします。
discourse_ai.ai_bot.default_pm_prefixテキストはデフォルトの AI PM タイトルであり、会話の件名に応じて自動的に変更されます。/admin/customize/site_textsで変更できます。
クレジット: Discourse Ask Theme
そのため、スクロール可能なクイックボタンは削除することにしました。代わりに、デスクトップ/モバイルビューでの最大クイックリンクを制御するための2つの新しい設定を追加し、AIアバターのモーダルやメッセージセクションを小さい画面に収まるように調整しました。