チャット
Elftia のチャットシステムはアプリケーションのコアとなるインタラクションインターフェースです。マルチタブによる並行会話、メッセージのブランチと切り替え、リアルタイムストリーミングレスポンス、ファイル添付のアップロード、セッションの整理・管理、豊富なスラッシュコマンドとキーボードショートカットをサポートしています。
ユースケース
- AI との複数ターンの会話を通じて提案や回答を得たり、タスクを共同で進めたりする
- 複数のタブを同時に開いて、異なるトピック間を自由に切り替える
- AI の返答に満足できない場合、再生成して、ブランチナビゲーションで異なる結果を比較する
- 画像やドキュメントなどの添付ファイルをアップロードして、AI にファイルの内容を理解・分析させる
- スラッシュコマンドを使って組み込みの操作をすばやく実行する
@記号を使ってプロジェクトファイルを参照し、AI にコードのコンテキストを提供する//を使ってプリセットのプロンプトテンプレートをすばやく挿入する
マルチタブ
Elftia は複数のチャットタブを同時に開くことをサポートしています。各タブは独立したセッションコンテキストとメッセージ履歴を持ちます。
手順
- タブバーの + ボタンをクリックして新しいタブを作成する
- 新しいタブで独立した会話を開始する
- 別のタブをクリックして会話を切り替える
- タブを右クリックして閉じたり名前を変更したりする
各タブのメッセージ、コンテキスト、状態は完全に独立しており、互いに干渉しません。
タブ Keep-alive（0.1.8）
タブを切り替えても状態は失われません：
- 別のタブに切り替えて戻っても、スクロール位置・未送信の下書き・ストリーミング状態が保持されます
- 複数のタブが同じ LLM に対して同時にリクエストを送っても互いに上書きされません（ストリームバッファは sessionId で分離されています）
- バックグラウンドのタブのポーリングやアニメーションは CPU を節約するために自動的に一時停止されます
設定ページや Agents ページなどの非チャットページにも keep-alive が適用されます。設定の編集途中で別のページに切り替えて戻っても、どのタブにいたか、どこまでスクロールしていたか、どのフィールドを変更していたかがすべて保持されます。
メッセージブランチ
メッセージブランチは Elftia チャットシステムのコア機能の一つです。AI の返答を再生成したり、送信済みのメッセージを編集したりすると、システムはすべての履歴バージョンを保持するブランチを自動的に作成し、いつでも確認・切り替えができます。
ブランチの作成方法
| 操作 | 結果 |
|---|---|
| 返答の再生成 | 現在の AI メッセージの位置に新しいブランチを作成し、元の返答を保持する |
| 送信済みメッセージの編集 | 編集箇所から新しいブランチを作成し、以降の会話は変更後の内容に基づいて続く |
ブランチナビゲーション
メッセージに複数のブランチがある場合、そのメッセージの隣にブランチナビゲーションコンポーネントが表示され、以下の情報を示します：
- ブランチアイコン — 現在のメッセージに複数のバージョンがあることを示す
- 現在のインデックス / 総ブランチ数 — たとえば
2 / 3は 3 つのブランチがあり、2 番目を表示中であることを意味する - 左右の矢印 — クリックしてブランチ間を切り替える
手順
- AI の返答にカーソルを合わせ、ツールバーの再生成ボタンをクリックする
- システムが新しい返答を生成し、新しいブランチを作成する
- メッセージの隣にブランチナビゲーションコンポーネントが表示される（例:
1 / 2） - 左右の矢印をクリックして異なる返答バージョンを確認する
- 何度でも再生成できる。再生成のたびに新しいブランチが追加される
:::tip ブランチは失われない すべてのブランチは永続的に保存されます。アプリを閉じて再度開いた後も、ブランチ履歴は完全に保持されます。 :::
ストリーミングレスポンス
AI の返答はストリーミング送信を使用します。生成が完了するのを待ってから一括表示するのではなく、メッセージの内容がリアルタイムにチャット画面に段階的に表示されます。
動作
- 返答の生成中、メッセージエリアはリアルタイムに更新される
- メッセージの下部にローディングインジケーターが表示され、返答がまだ生成中であることを示す
- 生成中にいつでも停止ボタンをクリックして返答を中断できる
- 部分的に生成された返答は保持される
- Markdown フォーマット（コードブロック、リスト、見出しなど）はコンテンツがストリーミングされる際に即座にレンダリングされる
- 推論プロセス：推論モデルによる思考は、最終的な返答の上の折りたたみ可能な領域に表示される
ストリーミング状態の契約
ストリーミング中の各メッセージのルート DOM 要素には data-streaming と data-stream-phase マーカーが付与されており、外部ドライバー（elftia-cli）がメッセージの完了を確実に待機できるようになっています。reasoning / tool-call / コンテンツ入力のいずれかが進行中の場合、data-streaming は "true" になります。これにより、tool-call の結果が遅れて到着しても、ストリーミング状態が誤って "false" に切り替わることがありません。
リッチコンテンツのレンダリング
チャットシステムは複数のリッチコンテンツタイプのインラインレンダリングをサポートしています：
| コンテンツ | レンダリング動作 |
|---|---|
| Markdown | 見出し、リスト、コードブロック（シンタックスハイライト + ワンクリックコピー）、テーブル、引用ブロック |
| 画像 / 動画 | インラインプレビュー。画像は Lightbox でフルサイズ表示が可能 |
| 音声 | 組み込みプレイヤー |
| 推論プロセス | 折りたたみ可能な領域、デフォルトで折りたたまれている |
| ツール呼び出し | ツール名 + 引数 + 結果、折りたたみ可能 |
| インライン HTML | 完全な HTML ドキュメント（<!DOCTYPE> / <html> を含む）が検出された場合、iframe（サンドボックスは same-origin を許可しない）で安全にレンダリングされる |
| Question Form（design session 専用） | ラジオボタン、チェックボックス、テキストフィールド、direction カードを持つアンケート形式のメッセージ。送信すると会話を継続するための返答に変換される |
| JSON | 自動的に検出されてフォーマット済みで表示される |
添付ファイルのアップロード
チャットは AI がファイルの内容を分析できるよう、複数の方法での添付ファイルアップロードをサポートしています。
アップロード方法
| 方法 | 操作 |
|---|---|
| ドラッグ＆ドロップ | ファイルマネージャーからチャット入力エリアにファイルをドラッグする |
| 貼り付け | Ctrl+V を使ってクリップボードから画像を貼り付ける |
| ファイルピッカー | 入力ボックスの隣の添付ボタンをクリックし、ダイアログからファイルを選択する |
サポートされているファイルタイプ
- 画像 — PNG、JPG、GIF、WebP などの一般的な画像形式
- ドキュメント — PDF、TXT、Markdown などのテキストファイル
- コードファイル — 各種プログラミング言語のソースコードファイル
アップロードされた添付ファイルは入力ボックスの上にプレビューサムネイルとして表示されます。送信前にクリックして削除できます。
セッション管理
Elftia は大量の会話を効率的に管理するための包括的なセッション整理・管理機能を提供しています。
フォルダー
- サイドバーにフォルダーを作成して関連するセッションをグループにまとめる
- 多階層のネストされたフォルダー構造をサポート
- セッションをフォルダーにドラッグして分類する
タグ
- セッションにカスタムタグを追加して分類を容易にする
- タグで関連するセッションをすばやくフィルタリングする
検索
- サイドバー上部の検索ボックスにキーワードを入力する
- 検索範囲はセッションタイトルとメッセージ内容の両方をカバーする
- 検索結果はリアルタイムで一致箇所をハイライト表示する
ピン留めセッション
- セッションを右クリックしてピン留めを選択し、上部に固定する
- ピン留めされたセッションは常にリストの最上部に表示され、新しいセッションによって押し下げられることがない
コマンドメニュー（/ スラッシュコマンド）
入力ボックスで / を入力するとコマンドメニューが開き、さまざまなクイックアクションが提供されます。
手順
- チャット入力ボックスに
/を入力する - コマンドメニューが表示され、使用可能なコマンドのリストが表示される
- 入力を続けてコマンドをフィルタリングする
- 上下矢印でコマンドを選択し、
Enterで実行する - または直接コマンドをクリックして実行する
組み込みコマンド
| コマンド | 説明 |
|---|---|
/clear | 現在のセッションのメッセージ履歴を消去する |
/help | ヘルプ情報を表示する |
/model | 使用中の AI モデルをすばやく切り替える |
/settings | 設定パネルを開く |
:::info カスタムコマンド 組み込みコマンドに加えて、Agent システムとプラグインもカスタムコマンドを登録できます。使用可能なコマンドは現在アクティブな Agent とインストール済みのプラグインによって異なります。コマンドパレット（スラッシュパレット）はファジー検索をサポートしており、Tab キーで引数を自動補完できます。 :::
ファイル参照（@ 記号）
入力ボックスで @ を入力すると、プロジェクト内のファイルを参照して、ファイルの内容をメッセージのコンテキストに追加できます。
手順
- チャット入力ボックスに
@を入力する - ファイル選択ドロップダウンが表示され、現在のプロジェクトのファイルリストが表示される
- ファイル名のキーワードを入力してフィルタリングする
- 上下矢印でファイルを選択し、
Enterで確認する - ファイル参照が入力ボックスにマーカーとして挿入される
- メッセージを送信すると、参照されたファイルの内容も一緒に AI に送信される
:::tip 適用場面 ファイル参照機能は、コード関連の会話で特に役立ちます。ソースコードファイルを参照することで、AI がコードロジックを分析したり、バグを見つけたり、最適化を提案したりできるようになります。 :::
クイックプロンプト挿入（// ダブルスラッシュ）
入力ボックスで // を入力すると、プリセットのプロンプトテンプレートをすばやく挿入できます。
手順
- チャット入力ボックスに
//を入力する - クイックプロンプト挿入メニューが表示される
- メニューにはお気に入りのプロンプト、最近使用したプロンプト、プロンプトチェーンが表示される
- プロンプトテンプレートを選択する
- テンプレートに変数（例:
{{language}}）が含まれている場合、変数入力フォームがポップアップ表示される - 変数を入力すると、最終的なプロンプトの内容が入力ボックスに挿入される
詳細なプロンプト管理についてはプロンプトドキュメントを参照してください。
キーボードショートカット
| ショートカット | 操作 |
|---|---|
Enter | メッセージを送信する（デフォルトモード） |
Ctrl+Enter | メッセージを送信する（Ctrl+Enter モード）または改行を挿入する（デフォルトモード） |
Shift+Enter | 入力ボックスに改行を挿入する |
Esc | コマンドメニューまたはファイル選択メニューを閉じる |
Up / Down | コマンドメニューまたはファイルメニューで選択を移動する |
Ctrl+V | テキストまたは画像を貼り付ける |
送信モードの設定
設定でメッセージ送信のキーボードショートカットを切り替えられます：
| モード | Enter キーの動作 | Ctrl+Enter キーの動作 |
|---|---|---|
| Enter で送信（デフォルト） | メッセージを送信する | 改行を挿入する |
| Ctrl+Enter で送信 | 改行を挿入する | メッセージを送信する |
設定 > 一般 で送信モードを切り替えます。
完全な会話フロー
完全な会話の典型的なフローは次のとおりです：
メッセージを入力 → 送信 → ストリーミングレスポンスがリアルタイムに表示される
↓
返答に満足している？
├── はい → 会話を続ける
└── いいえ → 再生成する（ブランチを作成する）
↓
ブランチナビゲーションでバージョンを比較する
↓
好みのバージョンを選んで続ける
よくある質問
| 問題 | 解決策 |
|---|---|
| メッセージを送信しても返答がない | LLM プロバイダーに API Key が設定されているか、ネットワーク接続が正常かを確認する |
| ストリーミングレスポンスが中断される | ネットワークの不安定さまたは API タイムアウトの可能性がある。返答を再生成してみる |
| 添付ファイルのアップロードが失敗する | ファイルサイズが制限を超えていないか、ファイル形式がサポートされているかを確認する |
| コマンドメニューが表示されない | 入力ボックスの最初またはスペースの後に / が入力されていることを確認する |
| ブランチナビゲーションが表示されない | ナビゲーションコンポーネントはメッセージに複数のブランチがある場合にのみ表示される |
@ ファイル参照が反応しない | プロジェクトを先に開く必要がある。ファイル参照機能はプロジェクトのコンテキストに依存している |
関連リンク
- LLM プロバイダーの設定 — AI モデルと API Key を設定する
- プロンプト — プロンプトテンプレートを管理・使用する
- Agent — Agent システムとカスタムコマンドについて学ぶ
- Web 検索 — 会話にリアルタイムの Web 検索を統合する