REFERENCE
SDK 範例
@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。
訊息模板
@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 嵌入） — locationGoogle Maps 地圖卡片 — chart以 Vega / Vega-Lite 規格渲染的圖表，可給多種畫法讓使用者切換。見 TABLE / CHART 進階 — table結構化的表格資料，可附 SQL 分頁與 CSV／JSON Lines 下載。見 TABLE / CHART 進階 — attachment附件卡片，可帶 defaultAction（點卡片）與選用的下載按鈕（downloadAction，eventName為download_file時顯示）— question選擇題卡片，答案摺成下一則使用者訊息送出。見提問卡片 — canvasAgent 畫出的 HTML／SVG，渲染在隔離的 iframe 裡。見畫布卡片 — mathLaTeX 數學公式（在 texttemplate 中以$...$/$$...$$表示）— referencesRAG 引用來源標註（所有模板共用欄位） — Button / Carousel 的 Action
button與carousel模板的按鈕動作有三種：Action 行為 文件 message送出一則訊息給 bot Action Object - Message uri開啟外部連結 Action Object - URI emit觸發 <Chatbot>的onTemplateBtnClickcallback，見 事件 DemoAction Object - EMIT 通用欄位
所有模板共享以下欄位：
欄位 文件 quickReplies通用功能 - quickReplies 富文字（Markdown / 條列 / 表格 / LaTeX） 通用功能 - Text referencesRAG 引用，附在訊息下方（見上表）