@tbox.cn/app-template-agent 0.1.0

package/apps/client/babel-plugins/code-inspect.cjs

@@ -0,0 +1,110 @@
+/**
+ * ============================================================================
+ * 平台配套 babel plugin - 给每个 JSXElement 注入 data-code-inspect-* 属性。
+ * 配合 tbox 平台 inspector runtime（/__vs_inspector__.js）使用，让 host 端微调浮层
+ * 能拿到源码位置，直接走「直改源码」快路径，而不是把意图发回 LLM 重新生成代码。
+ *
+ * 注入的属性（与 inspector runtime 期望严格对齐，名字别改）：
+ *   data-code-inspect-loc-filepath = 绝对路径
+ *   data-code-inspect-loc-line     = "{line}:{column}" (1-based, 来自 JSX opening tag)
+ *   data-code-inspect-jsx-tag      = JSX 标签名 (如 "div" / "Form.Item")
+ *   data-code-inspect-component    = 所在组件名 (爬 AST 找最近的函数/类组件)
+ *
+ * Vite 接入：在 vite.config.ts 里 `react({ babel: { plugins: [...] } })`，仅 dev（command==='serve'）启用。
+ * ============================================================================
+ */
+
+const LOC_FILEPATH_ATTRIBUTE_NAME = 'data-code-inspect-loc-filepath';
+const LOC_LINE_ATTRIBUTE_NAME = 'data-code-inspect-loc-line';
+const TAG_ATTRIBUTE_NAME = 'data-code-inspect-jsx-tag';
+const COMPONENT_ATTRIBUTE_NAME = 'data-code-inspect-component';
+
+const PLUGIN_NAME = 'code-inspect-plugin';
+
+function getJsxName(nameNode) {
+  if (nameNode.type === 'JSXIdentifier') return nameNode.name;
+  if (nameNode.type === 'JSXMemberExpression') {
+    return getJsxName(nameNode.object) + '.' + nameNode.property.name;
+  }
+  return '';
+}
+
+function getCurrentComponentName(path) {
+  let current = path;
+  while (current) {
+    if (current.isFunctionDeclaration() && current.node.id) {
+      return current.node.id.name;
+    }
+    if (
+      current.isVariableDeclarator() &&
+      current.node.id &&
+      current.node.init
+    ) {
+      const init = current.node.init;
+      if (
+        init.type === 'ArrowFunctionExpression' ||
+        init.type === 'FunctionExpression'
+      ) {
+        return current.node.id.name;
+      }
+    }
+    if (current.isClassDeclaration() && current.node.id) {
+      return current.node.id.name;
+    }
+    if (
+      (current.isFunctionExpression() ||
+        current.isArrowFunctionExpression() ||
+        current.isCallExpression()) &&
+      current.parent &&
+      current.parent.type === 'VariableDeclarator' &&
+      current.parent.id
+    ) {
+      return current.parent.id.name;
+    }
+    current = current.parentPath;
+  }
+  return 'Unknown';
+}
+
+function CodeInspectPlugin(babel) {
+  const t = babel.types;
+
+  return {
+    name: PLUGIN_NAME,
+    visitor: {
+      JSXElement(path) {
+        const node = path.node;
+        const nodeName = getJsxName(node.openingElement.name);
+        if (!nodeName) return;
+        if (!node.loc) return;
+
+        const filename = path.hub.file.opts.filename || 'unknown';
+        const { line, column } = node.loc.start;
+        const componentName = getCurrentComponentName(path);
+
+        node.openingElement.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier(LOC_FILEPATH_ATTRIBUTE_NAME),
+            t.stringLiteral(filename),
+          ),
+          t.jsxAttribute(
+            t.jsxIdentifier(LOC_LINE_ATTRIBUTE_NAME),
+            t.stringLiteral(`${line}:${column}`),
+          ),
+          t.jsxAttribute(
+            t.jsxIdentifier(TAG_ATTRIBUTE_NAME),
+            t.stringLiteral(nodeName),
+          ),
+          t.jsxAttribute(
+            t.jsxIdentifier(COMPONENT_ATTRIBUTE_NAME),
+            t.stringLiteral(componentName),
+          ),
+        );
+      },
+    },
+  };
+}
+
+module.exports = CodeInspectPlugin;
+module.exports.CodeInspectPlugin = CodeInspectPlugin;
+module.exports.PLUGIN_NAME = PLUGIN_NAME;

package/apps/client/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- 移动端视口；缩放锁定，配合 postcss-pxtorem 的 750→rem 换算 -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <!-- rem 弹性根字号（对齐原模板 hd.ts：threshold 450 / designWidth 750）。
+         在 CSS 前同步执行，避免首屏字号闪动。
+         - 移动端(clientWidth<=450)：动态 (100/750)*clientWidth；
+         - PC(clientWidth>450)：固定 50px（页面不随窗口缩放，内容 800px 居中、渐变底铺满）。 -->
+    <script>
+      (function () {
+        var THRESHOLD = 450,
+          DESIGN = 750;
+        function setRootFontSize() {
+          var w = document.documentElement.clientWidth;
+          document.documentElement.style.fontSize =
+            (w > THRESHOLD ? 50 : (100 / DESIGN) * w) + 'px';
+        }
+        setRootFontSize();
+        window.addEventListener('resize', setRootFontSize);
+        window.addEventListener('orientationchange', setRootFontSize);
+      })();
+    </script>
+    <title>AI Agent</title>
+    <!-- 平台微调(inspector) runtime：由 server 提供 GET /__vs_inspector__.js；dev 下经 Vite 代理到 server。-->
+    <script src="/__vs_inspector__.js" defer></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/apps/client/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@app/client",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "AI Agent 对话 H5 客户端（React/Vite），同时跑在浏览器与支付宝小程序 web-view 壳里。",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@app/module-weather": "workspace:*",
+    "@phosphor-icons/react": "catalog:",
+    "@tbox.cn/app-sdk": "catalog:",
+    "@tbox.cn/app-contracts": "catalog:",
+    "antd-mobile": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-markdown": "catalog:",
+    "remark-gfm": "catalog:",
+    "zustand": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "less": "catalog:",
+    "postcss-pxtorem": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  }
+}

package/apps/client/src/app.tsx

@@ -0,0 +1,5 @@
+import BusinessApp from '@/business/App';
+
+export default function App() {
+  return <BusinessApp />;
+}

package/apps/client/src/business/App.tsx

@@ -0,0 +1,11 @@
+import AgentChatApp from '@/platform/AgentChatApp';
+import TourismLanding from '@/examples/tourism/TourismLanding';
+
+/**
+ * 业务应用唯一入口。
+ * 新应用替换本组件；需要对话能力时组合 AgentChatApp 和自己的业务 landing。
+ * @tbox-template-example-active tourism
+ */
+export default function BusinessApp() {
+  return <AgentChatApp landing={TourismLanding} />;
+}

package/apps/client/src/business/README.md

@@ -0,0 +1,82 @@
+# Business application entry
+
+`App.tsx` 是业务应用的唯一入口。模板基线默认挂载文旅 landing，用于展示完整的对话首页能力。
+
+无论生成普通页面还是对话智能体，都必须替换默认 `TourismLanding`，最终应用只能呈现用户要求的业务。`@/examples/**` 仅供模板维护者参考，除模板基线的 `App.tsx` 外禁止导入。生成完成后运行 `pnpm verify:generated`；示例引用或标记仍存在时验收会失败。
+
+## 本地交互应用
+
+当需求当前只涉及客户端本地行为时：
+
+1. 直接替换 `App.tsx`。
+2. 页面、feature、业务 store 和本地规则引擎都放在当前目录。
+3. 持久化状态使用 `@/platform/state/createPersistedStore`。
+4. 起始阶段无需展开 `server/`、`adapters/`、`bridge/`、chat store。
+5. 保留根 `client/src/app.tsx`、inspector 和 Vite 配置。
+
+首次编辑前不需要读取根目录结构、`client/src` 目录结构、`vite.config.ts`、`index.html` 或默认对话实现。除上面的入口和 tokens 外，只按实际功能读取持久化 store、Toast 等直接依赖。
+
+以上是起始范围，不是永久限制。首次编辑后，直接依赖、远端契约、测试或构建结果证明需求跨层时，应进入对应所有者模块，不要在 `business/` 内重复实现平台能力。
+
+推荐结构：
+
+```text
+business/
+  App.tsx
+  features/
+  store/
+  data/
+```
+
+## 图标视觉基线
+
+图标用于辅助识别，不应压过标题、数据和主要内容。生成或修改业务页面时遵守以下约束：
+
+- 优先使用 `@phosphor-icons/react`，同一区域统一图标系列、`weight`、底板形状和用色方式。浅色底板上的普通入口默认使用 `weight="regular"`；不要为了缩小图标而统一改成 `bold`，否则线条会显得拥挤、厚重。`bold` 只用于确实需要强调的单个操作，`fill` 只用于选中态或少量主操作，不要整页铺满粗线或实心图标。
+- **Phosphor 的 `size` 属性是最终屏幕 CSS 像素，不会经过 PostCSS 的 750 稿换算。** 不要按设计稿尺寸写 `size={36}`、`size={48}`。普通导航/按钮使用 `18~24`，网格入口使用 `20~24`，列表或卡片前导图标使用 `24~28`；只有真正的空状态或主视觉才能更大。
+- 图标底板写 Less 的 750 稿尺寸：四宫格/八宫格入口建议 `72~80px`，列表前导图标建议 `80~96px`。内部图形的视觉宽高不超过底板的 `55%~60%`。
+- 点击热区和图标视觉尺寸分开处理。按钮可以保持足够大的可点击区域，但不要靠放大图标填满热区。
+- 同屏多个入口默认使用浅色底板配单色图标；强渐变和高饱和底板只留给一个主操作或少量重点入口。图标容器不要同时使用大圆角、强渐变和重阴影。
+- 列表和卡片以文字、真实图片或业务数据为主体。纯图标占位不得超过列表项高度的约 `60%`，也不得挤压标题和摘要宽度。
+- 尺寸和颜色通过局部 class 或变量统一管理，不要在每个 JSX 图标上散落互不一致的 `size`、渐变和圆角。
+
+示例：
+
+```tsx
+<button className="feature-entry">
+  <span className="feature-entry__icon">
+    <Ticket size={22} weight="regular" />
+  </span>
+  <span>优惠券</span>
+</button>
+```
+
+```less
+.feature-entry {
+  min-height: 112px; // 点击热区可以大于视觉图标
+}
+
+.feature-entry__icon {
+  width: 76px;       // 750 稿尺寸，实际约 38 CSS px
+  height: 76px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--tbox-primary);
+  background: var(--tbox-primary-light);
+}
+```
+
+## 对话智能体应用
+
+需要保留平台对话能力时继续使用 `AgentChatApp`。业务首屏通过 `landing` 从 `business/App.tsx` 注入，并始终位于当前会话的卡片和消息之前；发送消息后 landing 不会消失。生成欢迎卡的智能体可以不注入 landing，直接让服务端卡片成为首屏内容。
+
+```tsx
+export default function BusinessApp() {
+  return <AgentChatApp landing={YourLanding} />;
+}
+```
+
+修改对话组件、卡片或服务端工具时再读取对应目录的 `AGENTS.md`。不要修改通用 `pages/index` 来写死具体行业内容，也不要把 `src/examples/` 中的参考案例复制回运行时。

package/apps/client/src/cards/CardRenderer.tsx

@@ -0,0 +1,10 @@
+/**
+ * 卡片渲染入口 — 注入本地 registry 后委托 SDK 的 CardRenderer。
+ */
+import { CardRenderer as SdkCardRenderer } from '@tbox.cn/app-sdk/client';
+import type { TboxCardPayload } from '@tbox.cn/app-contracts';
+import { CARD_REGISTRY } from './registry';
+
+export function CardRenderer({ card }: { card: TboxCardPayload }) {
+  return <SdkCardRenderer card={card} registry={CARD_REGISTRY} />;
+}

package/apps/client/src/cards/registry.ts

@@ -0,0 +1,22 @@
+/**
+ * 卡片注册表：模块加载期快照（registerAll → ctx.cards.getAll()）。
+ *
+ * 卡片注册发生在各模块 clientModule.register(ctx) 内（模块内自注册闭环），
+ * 本文件仅消费组装端上下文；CardType 由 apps/client/src/modules.ts 从装配数组自动推导。
+ * 组合层覆盖（CardOverrides）类型安全：模块删除 → CardType 收缩 → 编译报错。
+ */
+import type { CardComponent } from '@tbox.cn/app-contracts';
+import { createClientContext } from '@tbox.cn/app-sdk/client';
+import { registerAll, type CardType } from '../modules';
+
+/** 组装端单例：注册全部模块客户端能力（模块加载期执行一次；registerMap 幂等） */
+const ctx = createClientContext();
+registerAll(ctx);
+
+/** 运行时卡片注册表（由各模块 clientModule.register 填充） */
+export const CARD_REGISTRY = ctx.cards.getAll() as Record<CardType, CardComponent>;
+
+export type { CardType } from '../modules';
+
+/** 组合层覆盖：类型安全的部分覆盖（002 §7.2），模块删除时键收缩 → 编译报错 */
+export type CardOverrides = Partial<Record<CardType, CardComponent>>;

package/apps/client/src/components/ActionBar/DebugButton.tsx

@@ -0,0 +1,49 @@
+import debugIcon from '../../../assets/debug.png';
+
+/**
+ * 调试按钮：点击把本轮 requestId / conversationId / messageId / messageCreatedAt
+ * 通过 postMessage 发给父窗口，平台据此构造日志时间窗、拉取 trace 日志。
+ * 显示条件：dev / URL 带 ?debug=1 / 被 iframe 嵌入。
+ */
+function shouldShow(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (import.meta.env.DEV) return true;
+  if (new URLSearchParams(window.location.search).get('debug') === '1') return true;
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+
+export function DebugButton({
+  requestId,
+  conversationId,
+  messageId,
+  messageCreatedAt,
+}: {
+  requestId?: string;
+  conversationId?: string;
+  messageId?: string;
+  messageCreatedAt?: number;
+}) {
+  if (!shouldShow() || !requestId) return null;
+
+  const onClick = () => {
+    try {
+      window.parent.postMessage(
+        { type: 'tbox:debug-trace', requestId, conversationId, messageId, messageCreatedAt },
+        '*',
+      );
+    } catch (err) {
+      console.warn('[DebugButton] postMessage failed:', err);
+    }
+  };
+
+  return (
+    <div className="tbox-debug-btn" onClick={onClick}>
+      <img className="tbox-debug-btn__icon" src={debugIcon} alt="" />
+      <span className="tbox-debug-btn__text">调试</span>
+    </div>
+  );
+}

package/apps/client/src/components/ActionBar/index.less

@@ -0,0 +1,120 @@
+.tbox-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.tbox-action-btn {
+  padding: 0;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 26px;
+  background: #fff;
+  transition: background-color 0.12s ease, transform 0.12s ease;
+
+  &:active {
+    background: #f5f7fa;
+    transform: scale(0.97);
+  }
+
+  &--active {
+    background: #eef4ff;
+  }
+
+  &__icon-wrap {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+  }
+}
+
+/* 调试按钮：独立 pill（icon + “调试” 文字） */
+.tbox-debug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 52px;
+  padding: 0 22px;
+  border-radius: 26px;
+  background: #fff;
+  transition: background-color 0.12s ease, transform 0.12s ease;
+
+  &:active {
+    background: #f5f7fa;
+    transform: scale(0.97);
+  }
+
+  &__icon {
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    font-size: 21px;
+    line-height: 1;
+    color: #405475;
+  }
+}
+
+/* TTS 播放波形 */
+.tbox-tts-wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 28px;
+  height: 28px;
+
+  &__bar {
+    width: 3px;
+    border-radius: 999px;
+    background: #405475;
+    transform-origin: center bottom;
+    animation: tbox-tts-wave 0.8s ease-in-out infinite;
+  }
+  &__bar--1 {
+    height: 14px;
+    animation-delay: 0s;
+  }
+  &__bar--2 {
+    height: 18px;
+    animation-delay: 0.15s;
+  }
+  &__bar--3 {
+    height: 12px;
+    animation-delay: 0.3s;
+  }
+}
+
+.tbox-tts-btn--playing {
+  background: #eef4ff;
+}
+
+@keyframes tbox-tts-wave {
+  0%,
+  100% {
+    transform: scaleY(0.6);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}

package/apps/client/src/components/ActionBar/index.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { useChatStore } from '@/store/chat';
+import { useChatConfigStore } from '@/store/chat-config';
+import { useFeedbackAdapter, useRefreshSession, useTTSAdapter } from '@tbox.cn/app-sdk/client';
+import type { ChatMessage } from '@/types/chat';
+import { copyText } from '@/utils/copyText';
+import { toast } from '@/utils/toast';
+import { DebugButton } from './DebugButton';
+import copyIcon from '../../../assets/copy@2x.png';
+import likeIcon from '../../../assets/like@2x.png';
+import dislikeIcon from '../../../assets/dislike@2x.png';
+import speakerIcon from '../../../assets/speaker@2x.png';
+import './index.less';
+
+/**
+ * 跨所有 ActionBar 实例共享的"正在朗读的消息 id"（对齐原模板 useTTS 的 _playingId）。
+ * 保证同一时刻只有发起朗读的那条消息按钮显示波纹/暂停态，切到另一条会自动复位前一条。
+ */
+let _playingId: string | null = null;
+const _playingIdListeners = new Set<() => void>();
+const getPlayingId = () => _playingId;
+function subscribePlayingId(cb: () => void) {
+  _playingIdListeners.add(cb);
+  return () => {
+    _playingIdListeners.delete(cb);
+  };
+}
+function setPlayingId(id: string | null) {
+  if (_playingId === id) return;
+  _playingId = id;
+  _playingIdListeners.forEach((cb) => cb());
+}
+/** play() 同步执行期间为 true，防止切歌瞬间 adapter 的 idle 事件误清 playingId */
+let _isPlaying = false;
+
+/** 助手消息操作栏（对齐原模板）：朗读(TTS) + 复制 + 赞 + 踩。 */
+export function getMessageCopyText(message: ChatMessage): string {
+  return [message.content, message.error].filter(Boolean).join('\n\n');
+}
+
+export function CopyButton({ text }: { text: string }) {
+  const copy = async () => {
+    const copied = await copyText(text);
+    void toast(copied ? '复制成功' : '复制失败，请重试', copied ? 'success' : 'error');
+  };
+
+  return (
+    <button type="button" className="tbox-action-btn" onClick={copy} aria-label="复制">
+      <span className="tbox-action-btn__icon-wrap">
+        <img className="tbox-action-btn__icon" src={copyIcon} alt="" />
+      </span>
+    </button>
+  );
+}
+
+export function ActionBar({ message }: { message: ChatMessage }) {
+  const feedback = useFeedbackAdapter();
+  const refreshSession = useRefreshSession();
+  const tts = useTTSAdapter();
+  const enableTTS = useChatConfigStore((s) => s.enableTTS);
+  const conversationId = useChatStore((s) => s.conversationId);
+  const submitFeedback = useChatStore((s) => s.submitFeedback);
+
+  const [ttsState, setTtsState] = useState<'idle' | 'loading' | 'playing' | 'paused'>('idle');
+  // 是否轮到本条消息：由共享 playingId 决定（而非各自的本地 state），实现跨实例互斥高亮
+  const playingId = useSyncExternalStore(subscribePlayingId, getPlayingId);
+  const isMine = playingId === message.id;
+  useEffect(() => {
+    if (!tts) return;
+    return (
+      tts.onStateChange((s) => {
+        setTtsState(s);
+        // 播放自然结束 → 清空全局播放态；_isPlaying 守卫避免切歌瞬间的 idle 误清
+        if (s === 'idle' && !_isPlaying) setPlayingId(null);
+      }) || undefined
+    );
+  }, [tts]);
+
+  const onFeedback = (type: 'like' | 'dislike') => {
+    if (!feedback) return;
+    const next = message.feedbackState === type ? 'cancel' : type;
+    submitFeedback(message.id, next, feedback, refreshSession);
+  };
+
+  const wave = isMine && (ttsState === 'loading' || ttsState === 'playing');
+  // 对齐原模板 TTSButton：播放/加载中点击→暂停；暂停中点击→恢复；其余→从头播放
+  const onTts = () => {
+    if (!tts) return;
+    if (isMine) {
+      if (ttsState === 'playing' || ttsState === 'loading') {
+        tts.pause();
+        return;
+      }
+      if (ttsState === 'paused') {
+        tts.resume();
+        return;
+      }
+    }
+    _isPlaying = true;
+    setPlayingId(message.id);
+    tts.speak(message.content, message.id).catch(() => setPlayingId(null));
+    _isPlaying = false;
+  };
+
+  // 显示依据 requestId（server 下发、不依赖 session）；提交时若无 feedback 适配器则 onFeedback 内部 no-op
+  const canFeedback = !!message.requestId;
+
+  return (
+    <div className="tbox-action-bar">
+      {enableTTS && tts && (
+        <div className={`tbox-action-btn${wave ? ' tbox-tts-btn--playing' : ''}`} onClick={onTts}>
+          {wave ? (
+            <div className="tbox-tts-wave">
+              <div className="tbox-tts-wave__bar tbox-tts-wave__bar--1" />
+              <div className="tbox-tts-wave__bar tbox-tts-wave__bar--2" />
+              <div className="tbox-tts-wave__bar tbox-tts-wave__bar--3" />
+            </div>
+          ) : (
+            <div className="tbox-action-btn__icon-wrap">
+              <img className="tbox-action-btn__icon" src={speakerIcon} alt="朗读" />
+            </div>
+          )}
+        </div>
+      )}
+
+      <CopyButton text={getMessageCopyText(message)} />
+
+      {canFeedback && (
+        <>
+          <div
+            className={`tbox-action-btn${message.feedbackState === 'like' ? ' tbox-action-btn--active' : ''}`}
+            onClick={() => onFeedback('like')}
+          >
+            <div className="tbox-action-btn__icon-wrap">
+              <img className="tbox-action-btn__icon" src={likeIcon} alt="赞" />
+            </div>
+          </div>
+          <div
+            className={`tbox-action-btn${message.feedbackState === 'dislike' ? ' tbox-action-btn--active' : ''}`}
+            onClick={() => onFeedback('dislike')}
+          >
+            <div className="tbox-action-btn__icon-wrap">
+              <img className="tbox-action-btn__icon" src={dislikeIcon} alt="踩" />
+            </div>
+          </div>
+        </>
+      )}
+
+      <DebugButton
+        requestId={message.requestId}
+        conversationId={conversationId ?? undefined}
+        messageId={message.id}
+        messageCreatedAt={new Date(message.createdAt).getTime()}
+      />
+    </div>
+  );
+}