尺寸調整

聊天機器人的外框寬高、以及訊息內容的最大寬度都可以透過 theme.chatbot 覆寫。預設值為 width: 375px、height: 640px、contentMaxWidth: 800px。

尺寸設定

寬度 width375px

高度 height640px

訊息最大寬度 contentMaxWidth800px

contentMaxWidth 控制聊天氣泡內容的最大寬度，超出時會自動換行。

目前主題設定

{
  "chatbot": {
    "width": "375px",
    "height": "640px",
    "contentMaxWidth": "800px"
  }
}

聊天機器人載入中…

提示

除了 width / height 之外，還可以使用 maxWidth、minWidth、 maxHeight、minHeight 做響應式控制。

程式範例

import { Chatbot } from "@asgard-js/react";
import type { AsgardThemeContextValue } from "@asgard-js/react";

const sizingTheme: Partial<AsgardThemeContextValue> = {
  chatbot: {
    width: "375px",
    height: "640px",
    maxWidth: "100%",
    maxHeight: "80vh",
    contentMaxWidth: "800px",
  },
};

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

尺寸欄位

欄位	預設值	說明
width	375px	聊天機器人外框寬度
height	640px	聊天機器人外框高度
maxWidth	—	外框寬度上限
minWidth	—	外框寬度下限
maxHeight	—	外框高度上限
minHeight	—	外框高度下限
contentMaxWidth	800px	訊息內容區域最大寬度