跳至主要内容

REFERENCE

SDK 範例

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

在聊天外殼之外重建主題

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

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

  1. 用法​

    把要放在外面的元件包起來，並傳入和 <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>

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

  2. Props​

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

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

  3. 什麼時候需要​

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

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

  4. 也看看​

準備好開始了嗎？

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

聯絡我們