訊息模板

@asgard-js/react 內建 10 種訊息模板類型，加上 Math（LaTeX）和 References（RAG 引用）兩種延伸渲染。選擇下方任一個模板，即可在聊天機器人面板即時看到它的渲染效果。

選擇模板

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

聊天機器人載入中…

程式範例

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()]}
    />
  );
}

支援的模板

每個模板的完整欄位定義請見 Asgard 開發者文件的 Message Template 章節。

模板	說明	文件
text	純文字或富文字訊息，支援快捷回覆	Text
hint	提示型泡泡	Hint
button	行內按鈕（uri、message、emit 三種 action）	Button
carousel	可滑動的卡片輪播	Carousel
image	附說明的圖片	Image
audio	音訊播放器	—
video	影片播放（支援 YouTube 嵌入）	—
location	Google Maps 地圖卡片	—
chart	以 Vega-lite 規格渲染的圖表	—
table	結構化的表格資料	—
math	LaTeX 數學公式（在 text template 中以 $...$ / $$...$$ 表示）	—
references	RAG 引用來源標註（所有模板共用欄位）	—

Button / Carousel 的 Action

button 與 carousel 模板的按鈕動作有三種：

Action	行為	文件
message	送出一則訊息給 bot	Action Object - Message
uri	開啟外部連結	Action Object - URI
emit	觸發 <Chatbot> 的 onTemplateBtnClick callback，見 事件 Demo	Action Object - EMIT

通用欄位

所有模板共享以下欄位：

欄位	文件
quickReplies	通用功能 - quickReplies
富文字（Markdown / 條列 / 表格 / LaTeX）	通用功能 - Text
references	RAG 引用，附在訊息下方（見上表）