自訂 Header

用 renderHeader 取代預設的聊天機器人 header。透過 useAsgardContext 讀取 SDK 內部狀態，並用 onMessageSent / onReset 生命週期 callback 做資料同步。

訊息計數器

在聊天機器人中發送任何訊息，就能看到自訂 header 上的計數器增加。點 header 上的 Reset 即可歸零。

目前數量

0

聊天機器人載入中…

程式範例

import { Chatbot, useAsgardContext } from "@asgard-js/react";

function MyHeader({ count }: { count: number }) {
  const { avatar, resetChannel } = useAsgardContext();
  return (
    <header>
      {avatar && <img src={avatar} alt="" />}
      <span>已發送訊息數：{count}</span>
      <button onClick={() => resetChannel?.()}>重置</button>
    </header>
  );
}

function Demo() {
  const [count, setCount] = useState(0);
  return (
    <Chatbot
      onMessageSent={() => setCount((c) => c + 1)}
      onReset={() => setCount(0)}
      renderHeader={() => <MyHeader count={count} />}
      {...rest}
    />
  );
}