訊息模板

@asgard-js/react 內建 8 種訊息模板類型。選擇下方任一個模板， 即可在聊天機器人面板即時看到它的渲染效果。

選擇模板

點選任一模板類型，即時查看它的渲染效果。

聊天機器人載入中…

程式範例

import { Chatbot } from "@asgard-js/react";
import { createTextTemplateExample } from "./mocks/messages";

export function Demo() {
  return (
    <Chatbot
      title="文字模板 Demo"
      config={{ botProviderEndpoint: "skip" }}
      customChannelId="templates-demo"
      initMessages={[createTextTemplateExample()]}
    />
  );
}

支援的模板

模板	說明
text	純文字或富文字訊息，支援快捷回覆
hint	提示型泡泡
button	行內按鈕（uri、message、emit 三種 action）
carousel	可滑動的卡片輪播
image	附說明的圖片
chart	以 Vega-lite 規格渲染的圖表
table	結構化的表格資料
math	LaTeX 數學公式