訊息模板

@asgard-js/react 內建 13 種訊息模板類型，加上 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 / Vega-Lite 規格渲染的圖表，可給多種畫法讓使用者切換。見 TABLE / CHART 進階	—
table	結構化的表格資料，可附 SQL 分頁與 CSV／JSON Lines 下載。見 TABLE / CHART 進階	—
attachment	附件卡片，可帶 defaultAction（點卡片）與選用的下載按鈕（downloadAction，eventName 為 download_file 時顯示）	—
question	選擇題卡片，答案摺成下一則使用者訊息送出。見提問卡片	—
canvas	Agent 畫出的 HTML／SVG，渲染在隔離的 iframe 裡。見畫布卡片	—
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 引用，附在訊息下方（見上表）