カスタムチャットボット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アクションがトリガーされます。

チャットボットのカスタムユーザーインターフェイスを作成する手順の例を以下に示します。

1. Service Studioで［Manage Dependencies］ウィンドウを開き（Ctrl+Q）、チャットボットを検索して、ChatbotAdvancedブロックとSendMessageアクションを依存関係として追加します。

   

2. ［Interface］のUI Flows > Chatbot > Componentsに移動して、ChatbotAdvancedブロックを画面にドラッグします。次に、ブロックのプロパティに移動してDirectLineSecretに秘密鍵を入力します。ブロックを見つけにくい場合は、ウィジェットツリーでComponents\ChatbotAdvancedに移動します。

   

   Direct Lineシークレットの値は、Azure Bot Serviceから取得します。詳細については、AzureからDirect Lineシークレットを取得する方法をご覧ください。

3. 新しい画面アクションを2つ作成します。1つはInitializeイベントを処理し、もう1つはMessageReceiveイベントを処理します。これを行うには、ChatBotAdvancedブロックのプロパティに移動して、InitializeとMessageReceivedともにEvents > Handlerで［New Client Action］を選択します。これで、ChatbotAdvancedInitializeアクションとChatbotAdvancedMessageReceivedアクションが作成されました。

4. 以下のローカル変数を画面に追加します。

   • DLConversationデータ型のDLConversation
   • ChannelAccountデータ型のChannelAccount
   • Message Listデータ型のMessageList
   • Textデータ型のMessageSent
   • Textデータ型のMessageReceived

5. Initializeを処理する画面アクションに、Assignツールを追加します。DLConversation = ConversationとChannelAccount = Userを割り当てます。

   

6. ChatbotAdvancedMessageReceivedアクションで、ListAppendを使用して、受信メッセージ（入力パラメータMessage）をメッセージのリストに追加します。また、Assignツールをフローに追加してMessageReceived = Message.Textを割り当てます。Message.Textはユーザーインターフェイスに表示するチャットボットからの最後の応答です。

7. Azure Bot Serviceにメッセージを送信するためのロジックを作成します。まず、画面に新しいクライアントアクションを追加します。この例では、SendMessageToAzureというクライアントアクションです。次に、［Logic］のClient Actions > Chatbotに移動し、SendMessageクライアントアクションをフローにドラッグします。SendMessageアクションのプロパティで以下の値を設定します。

   • ConversationId: 前に作成したローカル変数DLConversationのConversationIdを使用し、ConversationId = DLConversation.ConversationIdを割り当てます。
   • DirectLineSecret: ChatbotAdvancedブロックのプロパティDirectLineSecretと同じ値を使用します。
   • From: 前に作成したローカル変数ChannelAccountを使用します。
   • TextMessage: 前に作成したローカル変数MessageSentを使用します。

   

8. ユーザーインターフェイスを追加します。この例では、以下の要素があります。

   • MessageSentに設定された変数を使用して、ボットサービスに送信するメッセージを入力するためのテキスト領域フィールド。
   • MessageReceivedに設定された変数を使用して、応答を表示するためのテキスト領域フィールド。
   • SendMessageToAzureアクションをトリガーしてボットサービスにメッセージを送信するためのボタン。

   このガイドのチャットロジックを含むアプリを実行すると、以下のような結果になります。