跳至主要内容

REFERENCE

SDK 範例

@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。

Footer End Actions

footerEndActions 是純加法 slot：傳入一個 ReactNode[]，每個節點會 渲染在 footer input row 的最右邊（送出 / 麥克風按鈕之後）。textarea、 附件按鈕、送出、麥克風 等其他內建邏輯完全保留。

適合需要在輸入區尾端加一顆按鈕的情境，例如：開啟更大的 SQL / Markdown 編輯器 modal、切換輸入模式、開啟設定 popover 等。透過 ref 拿到 sendMessage 就能把外部 modal 內編輯好的內容送進 chatbot。

  1. 程式範例​

    import { useRef, useState } from "react";
    import { Chatbot, ChatbotRef } from "@asgard-js/react";
     
    function App() {
      const chatbotRef = useRef<ChatbotRef>(null);
      const [editorOpen, setEditorOpen] = useState(false);
     
      return (
        <>
          <Chatbot
            ref={chatbotRef}
            config={{ botProviderEndpoint: "..." }}
            customChannelId="..."
            footerEndActions={[
              <button
                key="sql"
                onClick={() => setEditorOpen(true)}
                title="開啟 SQL 編輯器"
              >
                SQL
              </button>,
            ]}
          />
          {editorOpen && (
            // SqlEditorModal 是你自己實作的 modal 元件
            <SqlEditorModal
              onSubmit={(text) => {
                chatbotRef.current?.serviceContext?.sendMessage?.({ text });
                setEditorOpen(false);
              }}
              onCancel={() => setEditorOpen(false)}
            />
          )}
        </>
      );
    }

  2. 邊界條件​

    • 位置固定在最右邊：footerEndActions 渲染在 send / mic 按鈕之後。
    • 不參與折疊邏輯：footer 內建有「左側附件按鈕 ≥ 3 個就折疊成 + 選單」的邏輯，跟 footerEndActions 無關。
    • 樣式自負：每個節點都是 ReactNode，consumer 自己控制樣式。建議 高度 ~36px，跟 send / mic 按鈕對齊；避免搶 send button 的視覺權重。
    • 加太多會擠 textarea：row 寬度有限，consumer 自己控制數量。
    • 送訊息的兩種寫法：透過 chatbotRef.current.serviceContext.sendMessage 從外部送（範例這樣）；或在自製按鈕 / wrapper 內用 useAsgardContext() 直接拿 sendMessage。

  3. 相關 API​

    API說明
    footerEndActionsReactNode[]，渲染在 footer input row 最右邊（送出 / 麥克風之後）
    customActionsReactNode[]，對稱於 footerEndActions 的 header 版（渲染在標題右側）
    ChatbotRef.serviceContext.sendMessage透過 ref 從外部送出訊息（modal Submit 觸發）
    useAsgardContext()在自製元件內直接讀 SDK 內部狀態

準備好開始了嗎？

想知道 Asgard 怎麼用在你的團隊？跟我們聊聊。

聯絡我們