🕎
ツリー構造で履歴を管理するシンプルなチャットUIを作ってみた
はじめに
先日このような記事を書きました。
ChatGPTのようなベーシックなチャットUIにも自然に取り込みやすいツリー構造で履歴を管理するブランチ機能付きのUIについて自分なりに考えて実装してみたので紹介します。
※ 実際はチャット履歴のデータ構造を変更する必要があるためUI側の変更だけでは対応できないわけですが
動作イメージ
返信
AIのメッセージに対して"返信"アイコンをから過去のメッセージに対して返信を行いスレッドを分岐させることができます。
分岐選択
分岐が発生した親メッセージには"分岐"アイコンと分岐の数が表示されクリックすることで分岐するメッセージを選択し別スレッドに移動することができます。
編集・再送信
またユーザーの送信済みのメッセージに対して"編集"アイコンか編集、再送信を行うこともできます。この操作によってもスレッドは分岐します。
デモ
実際に触れるデモは以下のurlで公開しています。よければ実際に触ってみてください。
Discussion