跳至主要内容

在聊天外殼之外重建主題

SDK 的設計 token（--asg-color-*、圓角、間距）是掛在 Chatbot 容器的根節點上的。 任何渲染在那棵子樹之外的 SDK 元件，都拿不到這些 token，會退回各條 CSS 規則裡寫死的預設值—— 而那些預設值是淺色的。

影響程度依元件而異：<TaskList> 之類的面板會失去主題的強調色與邊框色（如下方示範，切換看邊框 與 spinner 的顏色），而 <FileExplorerPanel> 面積大、色塊多，在深色頁面上會直接變成一片白。

在聊天外殼之外重建主題

SDK 的設計 token（--asg-color-*、圓角、間距）是掛在 Chatbot 容器的根節點上的。任何渲染在那棵子樹之外的 SDK 元件——例如你自行擺放的 <TaskList>、<SubagentList>、<FileExplorerPanel>——都拿不到這些 token，會退回各條規則裡寫死的預設值，而那些預設值是淺色的。<AsgardThemeScope> 就是把同一組 token 重新掛在別處。

擺在 Chatbot 之外的 TaskList

import { AsgardThemeScope, FileExplorerPanel } from '@asgard-js/react';

const theme = {
  chatbot: {
    backgroundColor: '#1a1430',
    borderColor: '#6d4aff',
    primaryComponent: { mainColor: '#7c5cff' },
  },
};

<Chatbot theme={theme} {...rest} />

// 在聊天外殼之外的任何位置
<AsgardThemeScope theme={theme}>
  <FileExplorerPanel {...panelProps} />
</AsgardThemeScope>

切換看看：包起來時面板的邊框與 spinner 是主題的紫色，和右邊的 Chatbot 一致；未包時退回內建預設（灰邊框、琥珀色 spinner）。把和 <Chatbot theme> 相同的物件傳給 <AsgardThemeScope theme>，兩邊外觀才會一致。在 <Chatbot> 內部不需要它——外殼已經把 token 掛好了。

聊天機器人載入中…

用法​

把要放在外面的元件包起來，並傳入和 <Chatbot theme> 相同的物件：

import { AsgardThemeScope, FileExplorerPanel } from "@asgard-js/react";

const theme = {
  chatbot: {
    backgroundColor: "#1a1430",
    borderColor: "#6d4aff",
    primaryComponent: { mainColor: "#7c5cff" },
  },
};

<Chatbot theme={theme} {...rest} />

// 在聊天外殼之外的任何位置
<AsgardThemeScope theme={theme}>
  <FileExplorerPanel {...panelProps} />
</AsgardThemeScope>

兩邊傳同一個物件，外觀才會一致。

Props​

<AsgardThemeScope
  theme={theme}       // 與 <Chatbot theme> 同型別，選用
  className="..."     // 選用
  style={{ ... }}     // 選用
>

除了 token，它也順帶建立這些元件預期的字體與 box model 基準線。

什麼時候需要​

情境需要嗎
元件在 <Chatbot> 裡面不需要——外殼已經把 token 掛好了
自行停靠的 <TaskList> / <SubagentList>需要
自行擺放的 <FileExplorerPanel>需要
用 renderFooter / renderHeader 畫的東西不需要——那些仍在外殼內部

判準很單純：元件有沒有渲染在 <Chatbot> 的 DOM 子樹裡。

也看看​