Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

カスタムチャットボットUIを作成する

Chatbotブロックのビルド済みUIやカードがユースケースに合わない場合は、OutSystems.AI Chatbotコンポーネントに含まれているChatbotAdvancedブロックを使用してカスタムユーザーインターフェイスを作成することができます。

ChatbotAdvancedにはOutSystems.AI Chatbotコンポーネントのデータストラクチャとアクションが統合されていますが、UIのインタラクションやAzureへのリクエストを処理するためのローカル変数、アクション、ロジックを作成する必要があります。以下に例を示します。

高度なUIの概要

各変数DLConversationChannelAccountMessageList(1)のデータストラクチャはデータ型名が同じであり、コンポーネントから得られます。Azureとの通信を構成して会話を追跡するには、これらの変数(1)が必要です。ローカル変数MessageReceivedMessageSent(2)はユーザーインターフェイス(5、6)にバインドされたテキスト変数です。これらが更新されるとインターフェイスも更新されます。ChatbotAdvancedInitializeChatbotAdvancedMessageReceived(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アクションを依存関係として追加します。

    チャットボットの高度なUI参照の追加

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

    Chatbotブロックのプロパティ

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

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

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

    • DLConversationデータ型のDLConversation
    • ChannelAccountデータ型のChannelAccount
    • Message Listデータ型のMessageList
    • Textデータ型のMessageSent
    • Textデータ型のMessageReceived
  5. Initializeを処理する画面アクションに、Assignツールを追加します。DLConversation = ConversationChannelAccount = Userを割り当てます。

    初期化の設定

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

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

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

    Azureのアクションの構成

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

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

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

    ブラウザで実行されているカスタムチャットボットUI

  • Was this article helpful?