REFERENCE
SDK 範例
@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。
自訂渲染
使用 renderMessageContent 接管特定訊息的渲染方式。你可以依照
自訂 payload type 分派成不同的 React 元件,並決定是否保留預設
的頭像與泡泡包裝。
模式
模式 使用時機 with-avatar客製內容,但保留預設頭像與泡泡 no-avatar完全客製渲染,不使用 MessageContainerwrapper在預設內容之外加入時間戳 / metadata 等包裝 default回到預設渲染 程式範例
<Chatbot
renderMessageContent={({ message, renderDefaultContent, MessageContainer }) => {
if (message.type === "bot") {
const payload = message.message.payload;
if (payload?.customType === "order_card") {
return (
<MessageContainer>
<OrderCard payload={payload} />
</MessageContainer>
);
}
}
return renderDefaultContent();
}}
/>