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

package/packages/agent-ui-kit/src/components/ChatHeader/index.less

@@ -0,0 +1,148 @@
+/* 顶部品牌区 + 右对齐控件条带（014 T7：mall 形态——品牌名来自 HELLO_ACK.mallScope.mallName）。 */
+.chat-header {
+  position: absolute;
+  top: calc(10px + env(safe-area-inset-top, 0px));
+  left: 50%;
+  z-index: 100;
+  display: flex;
+  width: 100%;
+  max-width: var(--tbox-content-max-width);
+  padding: 0 32px;
+  flex-direction: column;
+  align-items: flex-end;
+  pointer-events: none;
+  transform: translateX(-50%);
+
+  &__brand {
+    position: absolute;
+    top: 4px;
+    left: 32px;
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    color: var(--tbox-text-primary);
+  }
+
+  &__brand-mark {
+    width: 7px;
+    height: 34px;
+    margin-right: 14px;
+    background: var(--tbox-primary);
+    border-radius: 2px;
+  }
+
+  &__brand-name {
+    font-size: 24px;
+    font-weight: 760;
+    line-height: 1;
+    letter-spacing: 0;
+  }
+
+  &__group {
+    display: flex;
+    align-items: center;
+    max-height: 80px;
+    margin-bottom: 6px;
+    padding: 6px;
+    gap: 4px;
+    overflow: hidden;
+    opacity: 1;
+    pointer-events: auto;
+    background: rgba(255, 255, 255, 0.96);
+    border: 1px solid var(--tbox-border);
+    border-radius: 12px;
+    box-shadow: var(--tbox-shadow-sm);
+    transform: translateY(0);
+    transition: opacity var(--tbox-transition-base), transform var(--tbox-transition-base);
+
+    &--collapsed {
+      max-height: 0;
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(-8px);
+    }
+  }
+
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 52px;
+    padding: 0 15px;
+    gap: 7px;
+    color: var(--tbox-text-secondary);
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 8px;
+
+    &:active {
+      background: var(--tbox-bg-subtle);
+    }
+
+    &:focus-visible {
+      outline: 3px solid rgba(9, 107, 250, 0.24);
+      outline-offset: -2px;
+    }
+  }
+
+  &__btn-icon {
+    width: 22px;
+    height: 22px;
+    color: var(--tbox-primary);
+    flex-shrink: 0;
+  }
+
+  &__btn-text {
+    color: inherit;
+    font-size: 22px;
+    font-weight: 560;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 44px;
+    color: var(--tbox-text-muted);
+    appearance: none;
+    pointer-events: auto;
+    background: rgba(255, 255, 255, 0.92);
+    border: 1px solid var(--tbox-border);
+    border-radius: 8px;
+    box-shadow: var(--tbox-shadow-sm);
+
+    &:active {
+      background: var(--tbox-bg-subtle);
+    }
+
+    &:focus-visible {
+      outline: 3px solid rgba(9, 107, 250, 0.24);
+      outline-offset: 2px;
+    }
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform var(--tbox-transition-base);
+
+    &--up {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-header__group,
+  .chat-header__arrow {
+    transition: none;
+  }
+}

package/packages/agent-ui-kit/src/components/ChatHeader/index.test.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import ChatHeader from './index';
+
+interface MockChatState {
+  helloAck: { mallScope?: Record<string, string> } | null;
+}
+
+let mockHelloAck: MockChatState['helloAck'] = null;
+
+vi.mock('../../store-context', () => ({
+  useChatStore: (selector: (s: MockChatState) => unknown) =>
+    selector({ helloAck: mockHelloAck }),
+}));
+
+vi.mock('../../chat-config', () => ({
+  useChatConfigStore: (selector: (s: { enableTTS: boolean }) => unknown) =>
+    selector({ enableTTS: false }),
+}));
+
+function renderHeader(container: HTMLDivElement) {
+  flushSync(() => {
+    createRoot(container).render(
+      <ChatHeader ttsAutoPlay={false} onToggleTTS={() => {}} onClearChat={() => {}} />,
+    );
+  });
+}
+
+describe('ChatHeader 品牌区（014 T7：mallScope.mallName 驱动，非 mall 部署降级）', () => {
+  beforeEach(() => {
+    mockHelloAck = null;
+  });
+
+  it('有 mallScope.mallName → 渲染品牌区（mark + mallName）', () => {
+    mockHelloAck = { mallScope: { mallId: 'mall-demo', mallName: '示例商场' } };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    try {
+      renderHeader(container);
+      const brand = container.querySelector('.chat-header__brand');
+      expect(brand).not.toBeNull();
+      expect(brand?.textContent).toContain('示例商场');
+      expect(brand?.getAttribute('aria-label')).toBe('示例商场');
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('无 mallScope（非 mall 部署）→ 不渲染品牌区', () => {
+    mockHelloAck = null;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    try {
+      renderHeader(container);
+      expect(container.querySelector('.chat-header__brand')).toBeNull();
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('mallScope 缺 mallName → 不渲染品牌区（回显不完整降级）', () => {
+    mockHelloAck = { mallScope: { mallId: 'mall-demo' } };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    try {
+      renderHeader(container);
+      expect(container.querySelector('.chat-header__brand')).toBeNull();
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+});

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { CaretDown } from '@phosphor-icons/react';
-import { useChatConfigStore } from '@/store/chat-config';
+import { CaretDown, SpeakerHigh, SpeakerSlash, Trash } from '@phosphor-icons/react';
+import { useChatConfigStore } from '../../chat-config';
+import { useChatStore } from '../../store-context';
 import './index.less';
 
 interface ChatHeaderProps {
@@ -9,17 +10,12 @@ interface ChatHeaderProps {
   onClearChat: () => void;
 }
 
-const ICON_CLEAR =
-  'https://mdn.alipayobjects.com/huamei_frp8ut/afts/img/A*0hnoTakSA0YAAAAAMsAAAAgAet-KAQ/original';
-const ICON_AUDIO_ON =
-  'https://mdn.alipayobjects.com/huamei_frp8ut/afts/img/A*as7eQZz3DskAAAAAQBAAAAgAet-KAQ/original';
-const ICON_AUDIO_OFF =
-  'https://mdn.alipayobjects.com/huamei_frp8ut/afts/img/A*ZmoCQK01340AAAAAQCAAAAgAet-KAQ/original';
-
 export default function ChatHeader({ ttsAutoPlay, onToggleTTS, onClearChat }: ChatHeaderProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const headerRef = useRef<HTMLDivElement>(null);
   const enableTTS = useChatConfigStore((s) => s.enableTTS);
+  // 014 T7：mall 品牌名 = 服务端 HELLO_ACK.mallScope.mallName（模板 buildScope 回显）；非 mall 部署无 mallScope → 不渲染品牌区
+  const mallName = useChatStore((s) => s.helloAck?.mallScope?.mallName);
 
   const handleClear = useCallback(() => {
     onClearChat();
@@ -41,21 +37,37 @@ export default function ChatHeader({ ttsAutoPlay, onToggleTTS, onClearChat }: Ch
 
   return (
     <div className="chat-header" ref={headerRef}>
+      {mallName ? (
+        <div className="chat-header__brand" aria-label={mallName}>
+          <span className="chat-header__brand-mark" aria-hidden="true" />
+          <span className="chat-header__brand-name">{mallName}</span>
+        </div>
+      ) : null}
       <div className={`chat-header__group${!isExpanded ? ' chat-header__group--collapsed' : ''}`}>
-        <button className="chat-header__btn" onClick={handleClear}>
-          <img className="chat-header__btn-icon" src={ICON_CLEAR} alt="" />
+        <button type="button" className="chat-header__btn" onClick={handleClear}>
+          <Trash size={22} className="chat-header__btn-icon" />
           <span className="chat-header__btn-text">清空</span>
         </button>
         {enableTTS && (
-          <button className="chat-header__btn" onClick={onToggleTTS}>
-            <img className="chat-header__btn-icon" src={ttsAutoPlay ? ICON_AUDIO_ON : ICON_AUDIO_OFF} alt="" />
+          <button type="button" className="chat-header__btn" onClick={onToggleTTS}>
+            {ttsAutoPlay ? (
+              <SpeakerHigh size={22} className="chat-header__btn-icon" />
+            ) : (
+              <SpeakerSlash size={22} className="chat-header__btn-icon" />
+            )}
             <span className="chat-header__btn-text">{ttsAutoPlay ? '关闭' : '播放'}</span>
           </button>
         )}
       </div>
-      <button className="chat-header__toggle" onClick={() => setIsExpanded((p) => !p)}>
+      <button
+        className="chat-header__toggle"
+        type="button"
+        aria-label={isExpanded ? '收起对话工具' : '展开对话工具'}
+        aria-expanded={isExpanded}
+        onClick={() => setIsExpanded((p) => !p)}
+      >
         <span className={`chat-header__arrow${isExpanded ? ' chat-header__arrow--up' : ''}`}>
-          <CaretDown size={16} color="#4b6282" />
+          <CaretDown size={14} />
         </span>
       </button>
     </div>

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

@@ -13,17 +13,17 @@
   max-width: var(--tbox-content-max-width);
   margin: 0 auto;
   box-sizing: border-box;
-  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
+  padding: 8PX var(--tbox-page-gutter) calc(8PX + env(safe-area-inset-bottom, 0PX));
   background: transparent;
 
   &__row {
     display: flex;
     align-items: flex-end;
-    gap: 16px;
+    gap: 8PX;
     flex-wrap: wrap;
   }
 
-  /* 连接终态阻断提示条（禁用输入 + 重试入口；配色沿用既有错误语义，不硬编码新色值） */
+  /* 连接终态阻断提示条（禁用输入 + 重试入口；配色沿用既有 token，不硬编码） */
   &__blocked {
     flex-basis: 100%;
     display: flex;
@@ -32,7 +32,7 @@
     padding: 12px 20px;
     border-radius: 12px;
     background: rgba(255, 241, 241, 0.9);
-    color: #d5492f;
+    color: var(--tbox-error);
     font-size: 24px;
     line-height: 1.4;
 
@@ -46,7 +46,7 @@
       padding: 6px 20px;
       border: none;
       border-radius: 999px;
-      background: #d5492f;
+      background: var(--tbox-primary);
       color: #fff;
       font-size: 22px;
     }
@@ -58,11 +58,19 @@
     align-items: flex-end;
     flex: 1;
     min-width: 0;
-    gap: 28px;
+    gap: 14PX;
     background: var(--tbox-input-bg);
+    border: 1PX solid var(--tbox-border);
     border-radius: var(--tbox-input-radius);
     padding: var(--tbox-input-padding);
-    box-shadow: 0 2px 20px rgba(110, 139, 180, 0.24);
+    box-shadow: 0 1PX 10PX rgba(110, 139, 180, 0.24);
+    transition: border-color var(--tbox-transition-fast), box-shadow var(--tbox-transition-fast);
+  }
+
+  /* 聚焦蓝环 */
+  &__wrapper:focus-within {
+    border-color: var(--tbox-primary);
+    box-shadow: 0 0 0 1.5PX rgba(9, 107, 250, 0.12);
   }
 
   &__field {
@@ -73,14 +81,14 @@
     outline: none;
     background: transparent;
     font-family: inherit;
-    font-size: 30px;
-    line-height: 48px;
-    max-height: 200px;
+    font-size: 15PX;
+    line-height: 24PX;
+    max-height: 100PX;
     color: var(--tbox-text-primary);
     padding: 0;
 
     &::placeholder {
-      color: rgba(16, 41, 83, 0.6);
+      color: var(--tbox-text-muted);
     }
 
     /* 连接终态阻断（登录失败/scope 拒绝）：禁用态弱化输入框 */
@@ -106,44 +114,44 @@
   }
 
   &__disclaimer {
-    margin-top: 10px;
+    margin-top: 5PX;
     text-align: center;
-    font-size: 20px;
+    font-size: 10PX;
     line-height: 1.5;
-    color: rgba(16, 41, 83, 0.32);
+    color: var(--tbox-text-muted);
   }
 }
 
 /* 新对话按钮（药丸左侧，圆形） */
 .tbox-new-chat-btn {
-  width: 88px;
-  height: 88px;
+  width: 44PX;
+  height: 44PX;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 2px 20px rgba(110, 139, 180, 0.24);
+  box-shadow: 0 1PX 10PX rgba(110, 139, 180, 0.24);
 
   &__icon {
-    width: 44px;
-    height: 44px;
+    width: 22PX;
+    height: 22PX;
   }
 }
 
 /* 语音切换 */
 .tbox-voice-toggle {
-  width: 44px;
-  height: 44px;
+  width: 22PX;
+  height: 22PX;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 
   &__icon {
-    width: 44px;
-    height: 44px;
+    width: 22PX;
+    height: 22PX;
   }
 
   &--active {
@@ -161,7 +169,7 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    transition: transform 0.25s ease;
+    transition: transform var(--tbox-motion-duration-base) ease;
 
     &--open {
       transform: rotate(45deg);
@@ -183,13 +191,13 @@
   overflow: hidden;
   opacity: 0;
   transform: translateY(10px);
-  transition: all 0.2s ease-in;
+  transition: all var(--tbox-motion-duration-fast) ease-in;
   will-change: opacity, transform;
 
   &--visible {
     opacity: 1;
     transform: translateY(0);
-    transition: all 0.25s ease-out;
+    transition: all var(--tbox-motion-duration-base) ease-out;
   }
 
   &__option {
@@ -204,7 +212,7 @@
     background: rgba(0, 0, 0, 0.04);
     opacity: 0;
     transform: translateY(15px);
-    transition: all 0.3s ease-out;
+    transition: all var(--tbox-motion-duration-base) ease-out;
     will-change: opacity, transform;
 
     & + & {
@@ -238,7 +246,7 @@
     margin-left: 8px;
     font-weight: 400;
     font-size: 26px;
-    color: #4b6282;
+    color: var(--tbox-text-secondary);
     line-height: 37px;
   }
 }
@@ -247,7 +255,7 @@
 .tbox-voice-press-field {
   flex: 1;
   min-width: 0;
-  height: 48px;
+  height: 24PX;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -264,13 +272,13 @@
   }
   &--pressing,
   &--recording-active {
-    background: #eef4ff;
+    background: #eef4ff; /* mall-vis 语音按住浅蓝底 */
   }
   &--recording-cancel {
-    background: #fff1f1;
+    background: #fff1f1; /* mall-vis 取消态浅红底 */
   }
   &--processing {
-    background: #f5f7fb;
+    background: #f5f7fb; /* mall-vis 处理中浅灰底 */
   }
 
   &__content {
@@ -283,10 +291,10 @@
   }
 
   &__text {
-    font-size: 30px;
+    font-size: 15PX;
     font-weight: 600;
-    line-height: 48px;
-    color: #1f3b63;
+    line-height: 24PX;
+    color: var(--tbox-text-primary);
   }
 }
 
@@ -312,7 +320,7 @@
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    padding: 0 24px calc(56px + env(safe-area-inset-bottom, 16px));
+  padding: 0 var(--tbox-page-gutter) calc(56px + env(safe-area-inset-bottom, 16px));
     box-sizing: border-box;
     user-select: none;
     -webkit-user-select: none;
@@ -350,13 +358,13 @@
   &__tip {
     font-size: 24px;
     line-height: 48px;
-    color: rgba(31, 59, 99, 0.45);
+    color: var(--tbox-text-muted);
     font-weight: 500;
     margin-bottom: 32px;
     text-align: center;
 
     &--cancel {
-      color: #ff3141;
+      color: var(--tbox-error);
     }
   }
 
@@ -367,7 +375,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-image: linear-gradient(162deg, #30a2fd -22%, #868af4 108%);
+    background-image: linear-gradient(162deg, var(--tbox-primary) -22%, var(--tbox-primary-dark) 108%);
     box-shadow: 0 12px 28px rgba(80, 111, 255, 0.24);
 
     &--cancel {

package/packages/agent-ui-kit/src/components/ChatInput/index.test.tsx

@@ -0,0 +1,156 @@
+// @vitest-environment happy-dom
+import { act } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createRoot } from 'react-dom/client';
+import type { VoiceInteractionState } from './voice/machine';
+
+const mocks = vi.hoisted(() => ({
+  interactionState: 'idle' as VoiceInteractionState,
+}));
+
+vi.mock('@tbox.cn/app-sdk/client', () => ({
+  isInAlipayShell: () => false,
+  useASRAdapter: () => undefined,
+}));
+
+vi.mock('../../hooks/useMediaUpload', () => ({
+  useMediaUpload: () => ({
+    items: [],
+    addFiles: vi.fn(),
+    addFromBridge: vi.fn(),
+    removeItem: vi.fn(),
+    retry: vi.fn(),
+    clear: vi.fn(),
+    uploading: false,
+  }),
+}));
+
+vi.mock('../../components/MediaList', () => ({ MediaList: () => null }));
+
+vi.mock('./voice/useVoicePress', () => ({
+  useVoicePress: () => ({
+    interactionState: mocks.interactionState,
+    overlayVisible: mocks.interactionState !== 'idle',
+    countdown: null,
+    handlers: {
+      onTouchStart: vi.fn(),
+      onTouchMove: vi.fn(),
+      onTouchEnd: vi.fn(),
+      onTouchCancel: vi.fn(),
+    },
+  }),
+}));
+
+import { ChatInput } from './index';
+import { useChatConfigStore } from '../../chat-config';
+
+afterEach(() => {
+  mocks.interactionState = 'idle';
+  // 重置回构建期快照（对齐模板 config/chat.json 出厂值；派生矩阵用例经 setState 驱动水合模拟）
+  useChatConfigStore.setState({
+    enableImageUpload: false,
+    enableVideoUpload: false,
+    enableTTS: false,
+    enableVoiceInput: true,
+    defaultInputMode: 'TEXT',
+  });
+  document.body.innerHTML = '';
+});
+
+describe('ChatInput 语音活动状态', () => {
+  it('idle、识别中和结束时依次向页面投影 false、true、false', async () => {
+    const onVoiceActivityChange = vi.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const render = () => root.render(
+      <ChatInput onSend={vi.fn()} onVoiceActivityChange={onVoiceActivityChange} />,
+    );
+
+    await act(async () => render());
+    expect(onVoiceActivityChange).toHaveBeenLastCalledWith(false);
+
+    mocks.interactionState = 'processing';
+    await act(async () => render());
+    expect(onVoiceActivityChange).toHaveBeenLastCalledWith(true);
+
+    mocks.interactionState = 'idle';
+    await act(async () => render());
+    expect(onVoiceActivityChange).toHaveBeenLastCalledWith(false);
+
+    await act(async () => root.unmount());
+  });
+});
+
+describe('ChatInput 派生模式（服务端 defaultInputMode 水合）', () => {
+  /** voice 态投影：录音模式显示"键盘"切换图标；text 态显示"语音"切换图标 */
+  const inVoiceMode = (container: HTMLElement) =>
+    container.querySelector('img[alt="键盘"]') !== null;
+
+  const renderInput = async (root: ReturnType<typeof createRoot>) => {
+    await act(async () => root.render(<ChatInput onSend={vi.fn()} />));
+  };
+
+  it('① voice 关 + defaultInputMode=VOICE → 强制 text（语音按钮隐藏）', async () => {
+    useChatConfigStore.setState({ enableVoiceInput: false, defaultInputMode: 'VOICE' });
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(false);
+    await act(async () => root.unmount());
+  });
+
+  it('② voice 开 + defaultInputMode=VOICE → 初始即 voice', async () => {
+    useChatConfigStore.setState({ enableVoiceInput: true, defaultInputMode: 'VOICE' });
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(true);
+    await act(async () => root.unmount());
+  });
+
+  it('③ 初值 TEXT 渲染后水合 VOICE → 派生自动转 voice（useState 捕获竞态修复）', async () => {
+    useChatConfigStore.setState({ enableVoiceInput: true, defaultInputMode: 'TEXT' });
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(false);
+    // 模拟 HELLO_ACK 晚到水合（服务端 defaultInputMode='VOICE'）
+    useChatConfigStore.setState({ defaultInputMode: 'VOICE' });
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(true);
+    await act(async () => root.unmount());
+  });
+
+  it('④ 用户手动切 text 后水合 VOICE 到达 → 显式选择优先，保持 text', async () => {
+    useChatConfigStore.setState({ enableVoiceInput: true, defaultInputMode: 'VOICE' });
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(true);
+    // 用户手动切回 text（voice 态的"键盘"切换钮——div 容器 onClick）
+    const keyboardToggle = container.querySelector<HTMLElement>('.tbox-voice-toggle')!;
+    await act(async () => keyboardToggle.click());
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(false);
+    // 水合再次下发 VOICE（如重连回显）——用户显式选择仍优先
+    useChatConfigStore.setState({ defaultInputMode: 'VOICE' });
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(false);
+    await act(async () => root.unmount());
+  });
+
+  it('⑤ voice 开 + defaultInputMode=TEXT → text', async () => {
+    useChatConfigStore.setState({ enableVoiceInput: true, defaultInputMode: 'TEXT' });
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await renderInput(root);
+    expect(inVoiceMode(container)).toBe(false);
+    await act(async () => root.unmount());
+  });
+});