跳至主要内容

Footer End Actions

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

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

在 footer 尾巴加按鈕

footerEndActions 是純加法 slot：傳入的節點會渲染在 footer input row 的最右邊（送出 / 麥克風按鈕之後）。其他內建邏輯（textarea、IME、上傳、麥克風、drag-drop）完全保留。

  • 純加法，不取代任何內建邏輯
  • 點 SQL 按鈕開啟自製 modal SQL 編輯器
  • Submit 透過 chatbotRef 呼叫 sendMessage 送出 SQL
聊天機器人載入中…

程式範例​

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)}
        />
      )}
    </>
  );
}

邊界條件​

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

相關 API​

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