@tbox.cn/app-template-agent 0.7.5 → 0.8.0

package/packages/agent-ui-kit/src/ChatPage.tsx

@@ -0,0 +1,305 @@
+/**
+ * ChatPage（单一模板统一化 W2-1：自 mall 模板 pages/index/index.tsx 抽取通用页）。
+ *
+ * - 自组 KitChatProvider（store/cards/rawCards/slots 注入位；应用单点装配）；
+ * - 应用形态由 home 槽存在性派生（D7）：注册 home → 空态渲染槽（home-first，会话态与
+ *   空态恒挂载——域自持其显隐）；缺席 → chat 流（空态为空体，landing 槽已退役）；
+ * - 域自持段（首屏数据/门禁/详情弹层/活动预热）经槽渲染函数自带——本页零域语义。
+ */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { consumeAutoSendQuery, runAutoSend } from '@tbox.cn/app-sdk/client';
+import { usePullDownHistory } from './hooks/use-pull-down-history';
+import type { TboxCardPayload } from '@tbox.cn/app-contracts';
+import { CardRenderer } from './components/CardRenderer';
+import { ChatInput } from './components/ChatInput';
+import HistoryEntry from './components/HistoryEntry';
+import { MessageBubble } from './components/MessageBubble';
+import { QuickCommands } from './components/QuickCommands';
+import ScrollToBottomButton from './components/ScrollToBottomButton';
+import { useChatConfigStore } from './chat-config';
+import {
+  KitChatProvider,
+  useChatStore,
+  useClientSlots,
+  useInlineCardFilter,
+  type KitChatContextValue,
+} from './store-context';
+import type { ChatInputMessage } from './types';
+import './ChatPage.less';
+import './theme/tokens.less';
+
+export interface ChatPageProps {
+  /** 应用 chat store（zustand 绑定 hook + API；如 `useChatStore`） */
+  store: KitChatContextValue['store'];
+  /** 聊天入口卡片注册表（模块注册 + 组合层覆盖） */
+  cards: KitChatContextValue['cards'];
+  /** 原始形态卡片注册表（缺省 = cards——无覆盖应用零配置） */
+  rawCards?: KitChatContextValue['rawCards'];
+  /** 客户端槽注册表（home 首期唯一槽；缺席 = chat 流形态） */
+  slots?: KitChatContextValue['slots'];
+  /**
+   * 旁路卡内联流过滤（域注入；缺省恒等）：域可声明哪些 orphan 卡不进内联流
+   * （由域浮层自持，如 mall 会员门禁卡系）——过滤结果同时参与 home-first 形态判定。
+   */
+  filterInlineCards?: (cards: readonly TboxCardPayload[]) => TboxCardPayload[];
+}
+
+export function ChatPage({ store, cards, rawCards, slots, filterInlineCards }: ChatPageProps) {
+  return (
+    <KitChatProvider
+      store={store}
+      cards={cards}
+      rawCards={rawCards ?? cards}
+      {...(slots ? { slots } : {})}
+      {...(filterInlineCards ? { filterInlineCards } : {})}
+    >
+      <ChatPageInner />
+    </KitChatProvider>
+  );
+}
+
+function ChatPageInner() {
+  const messages = useChatStore((s) => s.messages);
+  const historyMessages = useChatStore((s) => s.historyMessages);
+  const historyHasMore = useChatStore((s) => s.historyHasMore);
+  const isLoadingHistory = useChatStore((s) => s.isLoadingHistory);
+  const loadMoreHistory = useChatStore((s) => s.loadMoreHistory);
+  const isGenerating = useChatStore((s) => s.isGenerating);
+  const runtimeStatus = useChatStore((s) => s.runtimeStatus);
+  const authBlocked = useChatStore((s) => s.authBlocked);
+  const orphanCards = useChatStore((s) => s.orphanCards);
+  const cardsByMessageId = useChatStore((s) => s.cardsByMessageId);
+  const initConversation = useChatStore((s) => s.initConversation);
+  const destroy = useChatStore((s) => s.destroy);
+  const sendMessage = useChatStore((s) => s.sendMessage);
+  const cancelGeneration = useChatStore((s) => s.cancelGeneration);
+  const newConversation = useChatStore((s) => s.newConversation);
+  const retryBootstrap = useChatStore((s) => s.retryBootstrap);
+  // 品牌名 = HELLO_ACK.mallScope.mallName（服务端 buildScope 回显；存在即可渲染的 kit 同源约定）
+  const mallName = useChatStore((s) => s.helloAck?.mallScope?.mallName);
+  // chat settings 水合：HELLO_ACK 服务端真源 → 静态 store（ack 未达/键缺席保留构建期快照；
+  // 重连/新会话产生新 helloAck 再水合——applyServerSettings 幂等）
+  const serverSettings = useChatStore((s) => s.helloAck?.chatConfig?.settings);
+  const applyServerSettings = useChatConfigStore((s) => s.applyServerSettings);
+  useEffect(() => {
+    applyServerSettings(serverSettings);
+  }, [serverSettings, applyServerSettings]);
+
+  const slots = useClientSlots();
+  const homeSlot = slots?.resolve('home');
+
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  const [voiceActive, setVoiceActive] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  // 底部输入区（QuickCommands + ChatInput）高度测量：底部避让消费（如半屏 sheet）
+  const chatBottomRef = useRef<HTMLDivElement>(null);
+  // 历史前插视口锚：home 槽位占位（历史插入发生在其上，保持用户看到的位置）
+  const historyAnchorRef = useRef<HTMLDivElement>(null);
+  const historyLoadInFlightRef = useRef<Promise<void> | null>(null);
+  const pendingHistoryViewportRef = useRef<{ anchorTop: number } | null>(null);
+  const isAtTopRef = useRef(true);
+  const isNearBottomRef = useRef(true);
+
+  const startNewConversation = useCallback(() => {
+    void newConversation();
+    const el = bodyRef.current;
+    if (el) el.scrollTop = 0;
+    isAtTopRef.current = true;
+    isNearBottomRef.current = false;
+    setShowScrollToBottom(false);
+  }, [newConversation]);
+
+  const send = useCallback((input: string | ChatInputMessage) => {
+    // 主动发送代表用户要回到最新对话；待消息 DOM 提交后由下方 effect 落底。
+    // 生成中 store 会拒绝新消息，此时不改变用户正在查看的滚动位置。
+    if (isGenerating) return;
+    isNearBottomRef.current = true;
+    setShowScrollToBottom(false);
+    sendMessage(input);
+  }, [isGenerating, sendMessage]);
+
+  // 连接终态阻断（登录失败/scope 拒绝）：禁用输入 + 提示条 + 重试。
+  // 门控仅 runtimeStatus=failed 或 authBlocked——bootstrapping 等过渡态不闪现横幅
+  const blocked =
+    runtimeStatus === 'failed' || authBlocked
+      ? {
+          message: authBlocked ?? '登录失败，暂时无法对话',
+          onRetry: () => void retryBootstrap(true),
+        }
+      : undefined;
+
+  const scrollToBottom = useCallback(() => {
+    const el = bodyRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+    isNearBottomRef.current = true;
+    setShowScrollToBottom(false);
+  }, []);
+
+  const NEAR_BOTTOM = 150;
+  const onScroll = useCallback(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    isAtTopRef.current = el.scrollTop <= 5;
+    const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    isNearBottomRef.current = distanceToBottom < NEAR_BOTTOM;
+    setShowScrollToBottom(!isNearBottomRef.current);
+  }, []);
+
+  // 顶部入口与轻量下拉共用同一加载任务；同一周期复用 Promise，避免点击/手势重复请求。
+  const onLoadHistory = useCallback(() => {
+    if (historyLoadInFlightRef.current) return historyLoadInFlightRef.current;
+    const anchor = historyAnchorRef.current;
+    if (anchor) {
+      pendingHistoryViewportRef.current = {
+        anchorTop: anchor.getBoundingClientRect().top,
+      };
+    }
+    const task = loadMoreHistory().finally(() => {
+      if (historyLoadInFlightRef.current === task) historyLoadInFlightRef.current = null;
+    });
+    historyLoadInFlightRef.current = task;
+    return task;
+  }, [loadMoreHistory]);
+
+  // 历史插入发生在当前内容上方：绘制前只补一次新增高度，保持用户原本看到的位置。
+  // 不设置定时器、不钉住 scrollTop；补偿后下一次滚动立即由用户接管。
+  useLayoutEffect(() => {
+    const pending = pendingHistoryViewportRef.current;
+    const anchor = historyAnchorRef.current;
+    if (!pending || !anchor) return;
+    pendingHistoryViewportRef.current = null;
+    const anchorDelta = anchor.getBoundingClientRect().top - pending.anchorTop;
+    if (Math.abs(anchorDelta) > 0.5) {
+      const el = bodyRef.current;
+      if (el) el.scrollTop += anchorDelta;
+    }
+  }, [historyMessages]);
+
+  const filterInlineCards = useInlineCardFilter();
+  const inlineOrphanCards = useMemo(
+    () => filterInlineCards(orphanCards),
+    [orphanCards, filterInlineCards],
+  );
+
+  // 是否仍为空会话（home-first 形态判定）；home 槽缺席时始终为对话形态
+  const showHome = !!homeSlot
+    && historyMessages.length === 0
+    && messages.length === 0
+    && inlineOrphanCards.length === 0;
+
+  const liveCardSignature = useMemo(
+    () => messages
+      .map((message) => `${message.id}:${(cardsByMessageId[message.id] ?? []).map((card) => card.id).join(',')}`)
+      .join('|'),
+    [messages, cardsByMessageId],
+  );
+
+  const showHistoryEntry = historyHasMore && historyMessages.length === 0;
+
+  const pull = usePullDownHistory({
+    isAtTopRef,
+    isLoadingHistory,
+    hasMore: historyHasMore,
+    onLoad: onLoadHistory,
+    disabled: runtimeStatus !== 'ready',
+  });
+
+  useEffect(() => {
+    // 深链自动发送：同步消费（StrictMode 双挂载/刷新安全），引导完成后等连接就绪发送
+    const autoQuery = consumeAutoSendQuery();
+    void initConversation().then(async () => {
+      if (autoQuery) await runAutoSend(autoQuery, sendMessage);
+    });
+    return () => {
+      destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 底部输入区高度 → CSS 变量 --tbox-chat-bottom-height，供半屏 sheet（portal 到 body）避让消费。
+  useEffect(() => {
+    const el = chatBottomRef.current;
+    if (!el) return;
+    const update = () =>
+      document.documentElement.style.setProperty('--tbox-chat-bottom-height', `${el.offsetHeight}px`);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // 仅在已有对话内容且贴近底部时自动滚动，避免打断用户上翻查看历史。
+  // 依赖含 cardsByMessageId：主卡在文字完成后挂载、消息行增高，需补滚避免卡片截出视口
+  useEffect(() => {
+    const hasLiveContent = messages.length > 0 || orphanCards.length > 0;
+    if (hasLiveContent && isNearBottomRef.current) {
+      const el = bodyRef.current;
+      if (el) el.scrollTop = el.scrollHeight;
+    }
+  }, [messages, orphanCards, liveCardSignature]);
+
+  return (
+    <div className={`chat-page${showHome ? '' : ' chat-page--conversation'}`}>
+      <div className="chat-page__bg" />
+
+      <div className="chat-page__body-wrapper">
+        <div
+          className="chat-page__body"
+          ref={bodyRef}
+          onScroll={onScroll}
+          onWheel={pull.handleWheel}
+          onTouchStart={pull.handleTouchStart}
+          onTouchMove={pull.handleTouchMove}
+          onTouchEnd={pull.handleTouchEnd}
+          onTouchCancel={pull.handleTouchCancel}
+        >
+          <HistoryEntry
+            visible={showHistoryEntry}
+            loading={isLoadingHistory}
+            disabled={runtimeStatus !== 'ready' || isLoadingHistory}
+            pullStatus={pull.pullStatus}
+            onLoad={() => void onLoadHistory()}
+          />
+
+          <div className="chat-page__history">
+            {historyMessages.map((msg) => (
+              <MessageBubble key={msg.id} message={msg} />
+            ))}
+          </div>
+
+          {/* 历史前插视口锚 + home 槽渲染位（域自持显隐；缺席则不渲染） */}
+          <div className="chat-page__home-slot" ref={historyAnchorRef}>
+            {homeSlot?.({ onSend: send, ...(mallName ? { mallName } : {}) })}
+          </div>
+
+          {/* 业务旁路 emit 的卡片（如欢迎卡） */}
+          {inlineOrphanCards.map((card) => (
+            <div key={card.id} className="chat-page__orphan-card">
+              <CardRenderer card={card} />
+            </div>
+          ))}
+
+          {/* 消息（每条消息下的卡片由 MessageBubble 内部渲染） */}
+          {messages.map((msg) => (
+            <MessageBubble key={msg.id} message={msg} />
+          ))}
+        </div>
+
+        <ScrollToBottomButton visible={showScrollToBottom} onClick={scrollToBottom} />
+      </div>
+
+      {/* 首页与对话态都保留快捷指令；语音活跃时只隐去胶囊并保留灰底占位，阻断时才卸载。 */}
+      <div ref={chatBottomRef}>
+        {!blocked && <QuickCommands hidden={voiceActive} onCommand={send} />}
+        <ChatInput
+          generating={isGenerating}
+          blocked={blocked}
+          onSend={send}
+          onCancel={cancelGeneration}
+          onNewChat={startNewConversation}
+          onVoiceActivityChange={setVoiceActive}
+        />
+      </div>
+    </div>
+  );
+}

package/packages/agent-ui-kit/src/chat-config.test.ts

@@ -0,0 +1,82 @@
+/**
+ * chat-config store 水合 action（chat settings 服务端下发真源）：
+ * applyServerSettings 五键整组语义——undefined 键保留构建期快照，禁部分水合。
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { configureChatConfigDefaults, useChatConfigStore } from './chat-config';
+
+const snapshot = () => useChatConfigStore.getState();
+
+describe('applyServerSettings：HELLO_ACK settings 水合', () => {
+  beforeEach(() => {
+    // 重置回构建期快照（快照值来自模板 config/chat.json 静态 import）
+    useChatConfigStore.setState({
+      enableImageUpload: true,
+      enableVideoUpload: true,
+      enableTTS: true,
+      enableVoiceInput: true,
+      defaultInputMode: 'TEXT',
+    });
+  });
+
+  it('五键全覆盖 → 全部覆盖快照值', () => {
+    snapshot().applyServerSettings({
+      enableImageUpload: false,
+      enableVideoUpload: false,
+      enableTTS: false,
+      enableVoiceInput: false,
+      defaultInputMode: 'VOICE',
+    });
+    expect(snapshot().enableImageUpload).toBe(false);
+    expect(snapshot().enableVideoUpload).toBe(false);
+    expect(snapshot().enableTTS).toBe(false);
+    expect(snapshot().enableVoiceInput).toBe(false);
+    expect(snapshot().defaultInputMode).toBe('VOICE');
+  });
+
+  it('部分键（undefined 保留快照值——禁部分水合导致快照丢失）', () => {
+    snapshot().applyServerSettings({ enableTTS: false });
+    expect(snapshot().enableTTS).toBe(false);
+    expect(snapshot().enableImageUpload).toBe(true);
+    expect(snapshot().enableVideoUpload).toBe(true);
+    expect(snapshot().enableVoiceInput).toBe(true);
+    expect(snapshot().defaultInputMode).toBe('TEXT');
+  });
+
+  it('整包 undefined（旧 server / ack 未达）→ no-op 快照保留', () => {
+    snapshot().applyServerSettings(undefined);
+    expect(snapshot().enableImageUpload).toBe(true);
+    expect(snapshot().enableTTS).toBe(true);
+    expect(snapshot().defaultInputMode).toBe('TEXT');
+  });
+
+  it('同值幂等：两次 apply 后五键深等价（防第二次 apply 丢键/翻转）', () => {
+    const settings = { enableTTS: false, defaultInputMode: 'VOICE' as const };
+    snapshot().applyServerSettings(settings);
+    const after1 = snapshot();
+    snapshot().applyServerSettings(settings);
+    // toEqual 全状态深比较——单键 toBe 对原始值恒真，钉不住实现回归
+    expect(snapshot()).toEqual(after1);
+    expect(snapshot().enableTTS).toBe(false);
+    expect(snapshot().defaultInputMode).toBe('VOICE');
+  });
+});
+
+describe('configureChatConfigDefaults：构建期快照注入（W2-1 kit 化）', () => {
+  it('快照键覆盖内建缺省；缺席键保留；undefined no-op', () => {
+    configureChatConfigDefaults({
+      enableTTS: false,
+      quickCommands: [{ label: 'L', query: 'Q' }],
+    });
+    expect(snapshot().enableTTS).toBe(false);
+    expect(snapshot().quickCommands).toEqual([{ label: 'L', query: 'Q' }]);
+    // 缺席键保留
+    expect(snapshot().enableImageUpload).toBe(true);
+
+    configureChatConfigDefaults(undefined);
+    expect(snapshot().enableTTS).toBe(false); // no-op：不因 undefined 回翻
+
+    // 复位（防污染后续用例）
+    useChatConfigStore.setState({ enableTTS: true, quickCommands: [] });
+  });
+});

package/packages/agent-ui-kit/src/chat-config.ts

@@ -0,0 +1,62 @@
+/**
+ * chat 设置静态 store（自 mall 模板 store/chat-config.ts 迁入，单一模板统一化 W2-1）。
+ *
+ * - 构建期快照：应用 boot 时经 `configureChatConfigDefaults(chat.json 内容)` 注入
+ *   （createRoot 前调用保证首帧即快照值；kit 不 import 应用 config 路径）；
+ * - HELLO_ACK settings 水合：服务端单一真源（applyServerSettings；五键整组语义，禁部分水合）。
+ */
+import { create } from 'zustand';
+import type { ChatUiSettings } from '@tbox.cn/app-sdk/client';
+
+export interface QuickCommand {
+  /** 纯文案；前导星标/图标由 QuickCommands 组件渲染，不要写进 label */
+  label: string;
+  query: string;
+  icon?: string;
+}
+
+interface ChatConfigStore {
+  enableImageUpload: boolean;
+  enableVideoUpload: boolean;
+  enableTTS: boolean;
+  enableVoiceInput: boolean;
+  defaultInputMode: 'TEXT' | 'VOICE';
+  quickCommands: QuickCommand[];
+  /** HELLO_ACK settings 水合：服务端单一真源；undefined 键保留构建期快照（五键整组语义，禁部分水合） */
+  applyServerSettings: (settings: ChatUiSettings | undefined) => void;
+}
+
+export const useChatConfigStore = create<ChatConfigStore>()((set) => ({
+  // kit 内建缺省（应用快照经 configureChatConfigDefaults 覆盖）
+  enableImageUpload: true,
+  enableVideoUpload: true,
+  enableTTS: true,
+  enableVoiceInput: true,
+  defaultInputMode: 'TEXT',
+  quickCommands: [],
+  applyServerSettings: (settings) =>
+    set((cur) => ({
+      enableImageUpload: settings?.enableImageUpload ?? cur.enableImageUpload,
+      enableVideoUpload: settings?.enableVideoUpload ?? cur.enableVideoUpload,
+      enableTTS: settings?.enableTTS ?? cur.enableTTS,
+      enableVoiceInput: settings?.enableVoiceInput ?? cur.enableVoiceInput,
+      defaultInputMode: settings?.defaultInputMode ?? cur.defaultInputMode,
+    })),
+}));
+
+/**
+ * 构建期快照注入（应用 boot 时调用一次；createRoot 前调用保证首帧即快照值）。
+ * 键缺席保留内建缺省；键在场以快照为准。
+ */
+export function configureChatConfigDefaults(snapshot: Record<string, unknown> | undefined): void {
+  if (!snapshot) return;
+  useChatConfigStore.setState((cur) => ({
+    enableImageUpload: (snapshot['enableImageUpload'] as boolean | undefined) ?? cur.enableImageUpload,
+    enableVideoUpload: (snapshot['enableVideoUpload'] as boolean | undefined) ?? cur.enableVideoUpload,
+    enableTTS: (snapshot['enableTTS'] as boolean | undefined) ?? cur.enableTTS,
+    enableVoiceInput: (snapshot['enableVoiceInput'] as boolean | undefined) ?? cur.enableVoiceInput,
+    defaultInputMode:
+      (snapshot['defaultInputMode'] as 'TEXT' | 'VOICE' | undefined) ?? cur.defaultInputMode,
+    quickCommands: (snapshot['quickCommands'] as QuickCommand[] | undefined) ?? cur.quickCommands,
+  }));
+}

package/{apps/client → packages/agent-ui-kit}/src/components/ActionBar/DebugButton.tsx

@@ -2,7 +2,7 @@ import { createLogger } from '@tbox.cn/app-sdk/client';
 
 const debugLogger = createLogger('DebugButton');
 
-import debugIcon from '../../../assets/debug.png';
+import { Bug } from '@phosphor-icons/react';
 
 /**
  * 调试按钮：点击把本轮 requestId / conversationId / messageId / messageCreatedAt
@@ -46,7 +46,7 @@ export function DebugButton({
 
   return (
     <div className="tbox-debug-btn" onClick={onClick}>
-      <img className="tbox-debug-btn__icon" src={debugIcon} alt="" />
+      <Bug className="tbox-debug-btn__icon" size={22} />
       <span className="tbox-debug-btn__text">调试</span>
     </div>
   );

package/{apps/client → packages/agent-ui-kit}/src/components/ActionBar/index.less

@@ -1,3 +1,10 @@
+/**
+ * 助手消息操作栏（mall-vis 蓝系 token 化）。
+ * - 图标 phosphor 矢量（currentColor）：默认灰（--tbox-text-muted）、active 态蓝（--tbox-primary）
+ * - active 底 / TTS 播放底：--tbox-primary-light（蓝系浅底）
+ * - 调试文字 / 波形条：--tbox-text-secondary
+ * - 按压底：--tbox-bg-subtle
+ */
 .tbox-action-bar {
   display: flex;
   align-items: center;
@@ -7,7 +14,7 @@
 .tbox-action-btn {
   padding: 0;
   border: 0;
-  color: inherit;
+  color: var(--tbox-text-muted);
   font: inherit;
   cursor: pointer;
   width: 52px;
@@ -18,15 +25,16 @@
   flex-shrink: 0;
   border-radius: 26px;
   background: #fff;
-  transition: background-color 0.12s ease, transform 0.12s ease;
+  transition: background-color var(--tbox-motion-duration-fast) ease, transform var(--tbox-motion-duration-fast) ease;
 
   &:active {
-    background: #f5f7fa;
+    background: var(--tbox-bg-subtle);
     transform: scale(0.97);
   }
 
   &--active {
-    background: #eef4ff;
+    color: var(--tbox-primary);
+    background: var(--tbox-primary-light);
   }
 
   &__icon-wrap {
@@ -37,12 +45,6 @@
     justify-content: center;
     flex-shrink: 0;
   }
-
-  &__icon {
-    width: 28px;
-    height: 28px;
-    object-fit: contain;
-  }
 }
 
 /* 调试按钮：独立 pill（icon + “调试” 文字） */
@@ -55,10 +57,11 @@
   padding: 0 22px;
   border-radius: 26px;
   background: #fff;
-  transition: background-color 0.12s ease, transform 0.12s ease;
+  color: var(--tbox-text-secondary);
+  transition: background-color var(--tbox-motion-duration-fast) ease, transform var(--tbox-motion-duration-fast) ease;
 
   &:active {
-    background: #f5f7fa;
+    background: var(--tbox-bg-subtle);
     transform: scale(0.97);
   }
 
@@ -71,11 +74,10 @@
   &__text {
     font-size: 21px;
     line-height: 1;
-    color: #405475;
   }
 }
 
-/* TTS 播放波形 */
+/* TTS 播放波形（红系主色，随 token 走） */
 .tbox-tts-wave {
   display: flex;
   align-items: center;
@@ -87,7 +89,7 @@
   &__bar {
     width: 3px;
     border-radius: 999px;
-    background: #405475;
+    background: var(--tbox-primary);
     transform-origin: center bottom;
     animation: tbox-tts-wave 0.8s ease-in-out infinite;
   }
@@ -106,7 +108,8 @@
 }
 
 .tbox-tts-btn--playing {
-  background: #eef4ff;
+  color: var(--tbox-primary);
+  background: var(--tbox-primary-light);
 }
 
 @keyframes tbox-tts-wave {

package/{apps/client → packages/agent-ui-kit}/src/components/ActionBar/index.tsx

@@ -2,17 +2,14 @@ import { useEffect, useState, useSyncExternalStore } from 'react';
 import { createLogger } from '@tbox.cn/app-sdk/client';
 
 const ttsActionLogger = createLogger('tts');
-import { useChatStore } from '@/store/chat';
-import { useChatConfigStore } from '@/store/chat-config';
+import { Copy, SpeakerHigh, ThumbsDown, ThumbsUp } from '@phosphor-icons/react';
+import { useChatStore } from '../../store-context';
+import { useChatConfigStore } from '../../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 type { ChatMessage } from '../../types';
+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';
 
 /**
@@ -50,7 +47,7 @@ export function CopyButton({ text }: { text: string }) {
   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="" />
+        <Copy size={22} />
       </span>
     </button>
   );
@@ -123,7 +120,7 @@ export function ActionBar({ message }: { message: ChatMessage }) {
             </div>
           ) : (
             <div className="tbox-action-btn__icon-wrap">
-              <img className="tbox-action-btn__icon" src={speakerIcon} alt="朗读" />
+              <SpeakerHigh size={22} />
             </div>
           )}
         </div>
@@ -138,7 +135,7 @@ export function ActionBar({ message }: { message: ChatMessage }) {
             onClick={() => onFeedback('like')}
           >
             <div className="tbox-action-btn__icon-wrap">
-              <img className="tbox-action-btn__icon" src={likeIcon} alt="赞" />
+              <ThumbsUp size={22} />
             </div>
           </div>
           <div
@@ -146,7 +143,7 @@ export function ActionBar({ message }: { message: ChatMessage }) {
             onClick={() => onFeedback('dislike')}
           >
             <div className="tbox-action-btn__icon-wrap">
-              <img className="tbox-action-btn__icon" src={dislikeIcon} alt="踩" />
+              <ThumbsDown size={22} />
             </div>
           </div>
         </>

package/packages/agent-ui-kit/src/components/CardRenderer.tsx

@@ -0,0 +1,36 @@
+/**
+ * 卡片渲染入口（kit 版，自 mall 模板 cards/CardRenderer.tsx 迁入）：
+ * 注入 context 提供的注册表后委托 SDK 的 CardRenderer；
+ * 动作按钮 → 注入 store 的 sendUiAction（token 来自 payload.actionTokens）。
+ *
+ * - CardRenderer：聊天入口（组合层覆盖注册表 cards）；
+ * - RawCardRenderer：原始形态（rawCards，无覆盖）——首页详情弹层 body 等防嵌套入口。
+ */
+import { CardRenderer as SdkCardRenderer } from '@tbox.cn/app-sdk/client';
+import type { TboxCardPayload, UiAction } from '@tbox.cn/app-contracts';
+import { useChatCards, useChatRawCards, useChatStore } from '../store-context';
+
+export function CardRenderer({ card }: { card: TboxCardPayload }) {
+  const sendUiAction = useChatStore((s) => s.sendUiAction);
+  const cards = useChatCards();
+  return (
+    <SdkCardRenderer
+      card={card}
+      registry={cards}
+      onAction={(action: UiAction) => sendUiAction(card.id, action)}
+    />
+  );
+}
+
+/** 原始形态渲染（无组合层覆盖）：详情弹层 body 专用——弹层自身已提供 hero+主题容器 */
+export function RawCardRenderer({ card }: { card: TboxCardPayload }) {
+  const sendUiAction = useChatStore((s) => s.sendUiAction);
+  const rawCards = useChatRawCards();
+  return (
+    <SdkCardRenderer
+      card={card}
+      registry={rawCards}
+      onAction={(action: UiAction) => sendUiAction(card.id, action)}
+    />
+  );
+}