カスタムチャットボットUIを作成する
Chatbotブロックのビルド済みUIやカードがユースケースに合わない場合は、OutSystems.AI Chatbotコンポーネントに含まれているChatbotAdvancedブロックを使用してカスタムユーザーインターフェイスを作成することができます。
ChatbotAdvancedにはOutSystems.AI Chatbotコンポーネントのデータストラクチャとアクションが統合されていますが、UIのインタラクションやAzureへのリクエストを処理するためのローカル変数、アクション、ロジックを作成する必要があります。以下に例を示します。
各変数DLConversation、ChannelAccount、MessageList（1）のデータストラクチャはデータ型名が同じであり、コンポーネントから得られます。Azureとの通信を構成して会話を追跡するには、これらの変数（1）が必要です。ローカル変数MessageReceivedとMessageSent（2）はユーザーインターフェイス（5、6）にバインドされたテキスト変数です。これらが更新されるとインターフェイスも更新されます。ChatbotAdvancedInitializeとChatbotAdvancedMessageReceived（3）は、Azure接続の構成とAzure Bot Serviceからの応答を処理するアクションです。ChatbotAdvancedMessageReceivedアクションにはMessage入力パラメータがあります。Azure Bot Serviceがメッセージを返した場合、そのメッセージを表示したりMessageListに保存したりすることができます。最後に、メッセージをAzure Bot Serviceに送信するためのアクションが必要です。この例では、SendMessageToAzureアクション（4）で、コンポーネントのSendMessageアクションを使用してMessageSentの値をAzure Bot Serviceに送信します。ユーザーインターフェイスのボタン（7）をクリックすると、SendMessageToAzureアクションがトリガーされます。
チャットボットのカスタムユーザーインターフェイスを作成する手順の例を以下に示します。
-
Service Studioで［Manage Dependencies］ウィンドウを開き（Ctrl+Q）、チャットボットを検索して、ChatbotAdvancedブロックとSendMessageアクションを依存関係として追加します。
-
［Interface］のUI Flows > Chatbot > Componentsに移動して、ChatbotAdvancedブロックを画面にドラッグします。次に、ブロックのプロパティに移動してDirectLineSecretに秘密鍵を入力します。ブロックを見つけにくい場合は、ウィジェットツリーでComponents\ChatbotAdvancedに移動します。
Direct Lineシークレットの値は、Azure Bot Serviceから取得します。詳細については、AzureからDirect Lineシークレットを取得する方法をご覧ください。
-
新しい画面アクションを2つ作成します。1つはInitializeイベントを処理し、もう1つはMessageReceiveイベントを処理します。これを行うには、ChatBotAdvancedブロックのプロパティに移動して、InitializeとMessageReceivedともにEvents > Handlerで［New Client Action］を選択します。これで、ChatbotAdvancedInitializeアクションとChatbotAdvancedMessageReceivedアクションが作成されました。
-
以下のローカル変数を画面に追加します。
- DLConversationデータ型のDLConversation
- ChannelAccountデータ型のChannelAccount
- Message Listデータ型のMessageList
- Textデータ型のMessageSent
- Textデータ型のMessageReceived
-
Initializeを処理する画面アクションに、Assignツールを追加します。DLConversation = ConversationとChannelAccount = Userを割り当てます。
-
ChatbotAdvancedMessageReceivedアクションで、ListAppendを使用して、受信メッセージ（入力パラメータMessage）をメッセージのリストに追加します。また、Assignツールをフローに追加してMessageReceived = Message.Textを割り当てます。Message.Textはユーザーインターフェイスに表示するチャットボットからの最後の応答です。
-
Azure Bot Serviceにメッセージを送信するためのロジックを作成します。まず、画面に新しいクライアントアクションを追加します。この例では、SendMessageToAzureというクライアントアクションです。次に、［Logic］のClient Actions > Chatbotに移動し、SendMessageクライアントアクションをフローにドラッグします。SendMessageアクションのプロパティで以下の値を設定します。
- ConversationId: 前に作成したローカル変数DLConversationのConversationIdを使用し、ConversationId = DLConversation.ConversationIdを割り当てます。
- DirectLineSecret: ChatbotAdvancedブロックのプロパティDirectLineSecretと同じ値を使用します。
- From: 前に作成したローカル変数ChannelAccountを使用します。
- TextMessage: 前に作成したローカル変数MessageSentを使用します。
-
ユーザーインターフェイスを追加します。この例では、以下の要素があります。
- MessageSentに設定された変数を使用して、ボットサービスに送信するメッセージを入力するためのテキスト領域フィールド。
- MessageReceivedに設定された変数を使用して、応答を表示するためのテキスト領域フィールド。
- SendMessageToAzureアクションをトリガーしてボットサービスにメッセージを送信するためのボタン。
このガイドのチャットロジックを含むアプリを実行すると、以下のような結果になります。
