Headless 用法

如果內建的 <Chatbot> 不符合你的設計，你可以完全跳過它，直接用 useChannel hook 自己組 UI。下方範例的對話介面 100% 自製， 連 SDK 的 CSS 都沒有引入。

完全自訂 UI

不使用 <Chatbot> 元件，改用 useChannel hook 直接讀取 conversation、呼叫 sendMessage，自己組出符合品牌風格的對話介面。

下方介面 100% 自製，沒有引用 SDK 內建的聊天室外觀。

載入中…

範例程式

import { useMemo, useState } from "react";
import { AsgardServiceClient } from "@asgard-js/core";
import { useChannel } from "@asgard-js/react";

export function HeadlessChat() {
  const client = useMemo(
    () =>
      new AsgardServiceClient({
        botProviderEndpoint: "https://...",
      }),
    [],
  );

  const { conversation, sendMessage, isConnecting } = useChannel({
    client,
    customChannelId: "my-channel",
    defaultIsOpen: true,
  });

  const messages = conversation
    ? Array.from(conversation.messages.values())
    : [];

  return (
    <div>
      {messages.map((msg) => {
        if (msg.type === "user") return <div key={msg.messageId}>{msg.text}</div>;
        if (msg.type === "bot") return <div key={msg.messageId}>{msg.message?.text}</div>;
        if (msg.type === "tool-call")
          return <div key={msg.messageId}>🔧 {msg.toolName}</div>;
        return null;
      })}
      {/* 自製輸入框 → sendMessage({ text }) */}
    </div>
  );
}

useChannel 回傳值

欄位	說明
conversation	目前的 Conversation，包含一個 messages Map
sendMessage	送出訊息（支援 text / payload / blobIds）
resetChannel	重置 channel 並建立新對話
closeChannel	關閉 SSE 連線
isConnecting	是否正在連線
isResetting	是否正在重置 channel

訊息類型

所有訊息都統一為 ConversationMessage，在 render 時用 type 區分：

• user — 使用者送出的訊息
• bot — 機器人回覆，透過 message.template 取得 SDK 內建模板資料
• tool-call — Agent 工具呼叫
• error — 連線或執行錯誤