chat-bubbleで簡単にチャットボットUIを作ろう

近年、ChatGPTやその他の大規模言語モデル（LLM）を活用したチャットボットが急速に普及しています。これに伴い、チャット形式のユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）にも注目が集まっています。典型的なチャットUIは、左右に交互に表示されるメッセージ（吹き出し）で構成されます。このようなUIを簡単に実装できるライブラリ、「chat-bubble」を紹介します。

chat-bubbleとは？

chat-bubbleは、WebアプリケーションにチャットUIを簡単に追加できるJavaScriptライブラリです。事前に定義したシナリオに基づいて対話を進行させることができ、ユーザーの選択や入力に応じて柔軟に会話を展開できます。

chat-bubbleのインストール方法

chat-bubbleは、様々な開発環境に対応しています。今回は、直接ファイルをダウンロードして使用する方法を説明します。

GitHubからZipファイルをダウンロードします。GithubのURLは、こちらです。(https://github.com/dmitrizzle/chat-bubble)
ダウンロードしたZipファイルを解凍し、componentフォルダをchat-bubbleフォルダとして名前を変更して、プロジェクトの適切な場所にコピーします。

以下のような構成でファイルを配置します：

your-project/
├── chat-bubble/
│   ├── styles/
│   │   ├── setup.css
│   │   ├── says.css
│   │   ├── reply.css
│   │   ├── typing.css
│   │   └── input.css
│   └── Bubbles.js
└── index.html

HTMLファイル（例：index.html）で、これらのファイルを読み込みます：

<!-- chat-bubble CSS files -->
<link rel="stylesheet" media="all" href="chat-bubble/styles/setup.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/says.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/reply.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/typing.css">
<link rel="stylesheet" media="all" href="chat-bubble/styles/input.css">

<!-- chat-bubble JavaScript file -->
<script src="chat-bubble/Bubbles.js"></script>

これで、chat-bubbleを使用する準備が整いました。

chat-bubbleの基本的な使い方

chat-bubbleを使用するには、まずチャットウィンドウを初期化します：

const chatWindow = new Bubbles(
  document.getElementById("chat"),
  "chatWindow",
  options // オプション設定（後述）
);

オプションの設定

options オブジェクトでは、チャットの動作やスタイルをカスタマイズできます。主なオプションには以下があります：

animationTime: チャットバブルのアニメーション時間（デフォルト: 200ms）
typeSpeed: タイピング効果の速度（デフォルト: 5）
widerBy: バブルの余白幅（デフォルト: 2）
sidePadding: 吹き出しの左右パディング（デフォルト: 6）
recallInteractions: 履歴として保持するインタラクション数（デフォルト: 0）
inputCallbackFn: ユーザー入力時のコールバック関数
responseCallbackFn: ユーザーが選択肢をクリックした時のコールバック関数

チャットシナリオの作成と実行

チャットを開始するには、talk メソッドを使用します。このメソッドには、会話のシナリオを定義したオブジェクトを渡します。

基本的な会話の例:

chatWindow.talk({
  ice: {
    says: ["こんにちは", "あなたは人ですか？"],
  }
});

このコードは、chat-bubbleの基本的な機能を示しています。

chatWindow.talk() メソッドは対話を開始し進行させる中心的な役割を果たします。メソッドに渡されるオブジェクトが対話のシナリオを定義します。

ice キーワードは「アイスブレーカー」の略で、会話の開始点を示します。says プロパティ内の配列には、チャットボットが順番に表示するメッセージが含まれています。

このコードを実行すると、チャットウィンドウが開き、"こんにちは" というメッセージが表示され、続いて "あなたは人ですか？" というメッセージが現れます。

この例ではユーザーの応答オプションは提供されていないため、メッセージ表示後にチャットは一時停止します。より対話的な体験を作るには、reply プロパティを使用してユーザーの応答オプションを追加する必要があります。

選択肢を提示する例:

この例では、ユーザーに性別を尋ね、選択に応じて異なる応答を返します。また、会話を最初からやり直すオプションも提供しています。

chatWindow.talk({
  ice: {
    says: ["こんにちは", "あなたは男性ですか、女性ですか？"],
    reply: [
      {
        question: "男性",
        answer: "man",
      },
      {
        question: "女性",
        answer: "woman",
      }
    ]
  },
  man: {
    says: ["あなたは男性ですね"],
    reply: [
      {
        question: "もう一度試しますか？",
        answer: "ice",
      }
    ]
  },
  woman: {
    says: ["あなたは女性ですね"],
    reply: [
      {
        question: "もう一度試しますか？",
        answer: "ice",
      }
    ]
  }
});

まず、chatWindow.talk() メソッドが呼び出され、複数の対話シナリオを含むオブジェクトが渡されています。このオブジェクトは、チャットボットの応答と、ユーザーに提示される選択肢を定義しています。

会話は 'ice' （アイスブレーカー）セクションから始まります。

チャットボットは "こんにちは" と挨拶し、続いて "あなたは男性ですか、女性ですか？" と質問します。この質問に対して、ユーザーには "男性" と "女性" という2つの選択肢が提示されます。

ユーザーが "男性" を選択した場合、対話は 'man' セクションに移ります。ここでチャットボットは "あなたは男性ですね" と応答し、その後 "もう一度試しますか？" という新たな選択肢を提示します。

同様に、ユーザーが "女性" を選択した場合は、'woman' セクションに移り、"あなたは女性ですね" という応答が表示されます。ここでも "もう一度試しますか？" という選択肢が提示されます。

どちらの場合も、"もう一度試しますか？" という質問に対する回答として 'ice' が設定されています。これは、ユーザーが "はい" を選択した場合、対話が最初の 'ice' セクションに戻ることを意味します。

このコードは、chat-bubbleを使用して分岐のある対話フローを作成する方法を示しています。ユーザーの選択に応じて異なる応答を返し、さらに対話を継続するオプションも提供しています。

高度な機能

キーボード入力の処理

ユーザーからのテキスト入力を受け付けるには、inputCallbackFn オプションを使用します：

const chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", {
  inputCallbackFn: (o) => {
    console.log(o.input); // ユーザーの入力内容
    // ここで入力内容に応じた処理を行う
  }
});

特定の関数の実行

選択肢の answer に関数名を指定することで、特定のアクションを実行できます：

const convo = {
  ice: {
    says: ["どの果物が好きですか？"],
    reply: [
      {
        question: "バナナ",
        answer: "bananaFunction",
      },
    ]
  }
};

const bananaFunction = function () {
  alert("バナナが好きなんですね！");
  chatWindow.talk(convo, "ice");
};

まず、convo オブジェクトが定義されています。これは対話のシナリオを表現しています。ice セクションでは、チャットボットが "どの果物が好きですか？" という質問を投げかけます。

この質問に対する回答オプションとして、"バナナ" が提供されています。この選択肢の answer プロパティに "bananaFunction" が指定されていることです。これは、ユーザーが "バナナ" を選択した際に実行される関数の名前を示しています。

次に、bananaFunction が定義されています。この関数は以下の2つの動作を行います：