@tbox.cn/app-template-agent 0.1.0

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

@@ -0,0 +1,104 @@
+/* 顶部居中浮动控件：毛玻璃按钮组 + 下方小手柄；折叠时只剩手柄。对齐原模板。 */
+.chat-header {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 16px 0;
+  pointer-events: none;
+
+  &__group {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.4);
+    backdrop-filter: blur(10px);
+    border-radius: 31px;
+    max-height: 100px;
+    overflow: hidden;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &--collapsed {
+      opacity: 0;
+      transform: translateY(-20px) scale(0.95);
+      max-height: 0;
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    appearance: none;
+    border: none;
+    padding: 12px 24px;
+    background: #fff;
+    border-radius: 92px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+
+    &:active {
+      transform: scale(0.98);
+      background: #f5f5f5;
+    }
+  }
+
+  &__btn-icon {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+  }
+
+  &__btn-text {
+    font-size: 24px;
+    color: #4b6282;
+    font-weight: 500;
+    white-space: nowrap;
+    line-height: 1;
+  }
+
+  &__toggle {
+    pointer-events: auto;
+    appearance: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 110px;
+    height: 30px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 14px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+
+    &:active {
+      transform: scale(0.98);
+      background: #f5f5f5;
+    }
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &--up {
+      transform: rotate(180deg);
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CaretDown } from '@phosphor-icons/react';
+import { useChatConfigStore } from '@/store/chat-config';
+import './index.less';
+
+interface ChatHeaderProps {
+  ttsAutoPlay: boolean;
+  onToggleTTS: () => void;
+  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);
+
+  const handleClear = useCallback(() => {
+    onClearChat();
+    setIsExpanded(false);
+  }, [onClearChat]);
+
+  useEffect(() => {
+    if (!isExpanded || typeof document === 'undefined') return;
+    const onOutside = (e: Event) => {
+      if (headerRef.current && !headerRef.current.contains(e.target as Node)) setIsExpanded(false);
+    };
+    document.addEventListener('touchstart', onOutside, true);
+    document.addEventListener('mousedown', onOutside, true);
+    return () => {
+      document.removeEventListener('touchstart', onOutside, true);
+      document.removeEventListener('mousedown', onOutside, true);
+    };
+  }, [isExpanded]);
+
+  return (
+    <div className="chat-header" ref={headerRef}>
+      <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="" />
+          <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="" />
+            <span className="chat-header__btn-text">{ttsAutoPlay ? '关闭' : '播放'}</span>
+          </button>
+        )}
+      </div>
+      <button className="chat-header__toggle" onClick={() => setIsExpanded((p) => !p)}>
+        <span className={`chat-header__arrow${isExpanded ? ' chat-header__arrow--up' : ''}`}>
+          <CaretDown size={16} color="#4b6282" />
+        </span>
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,332 @@
+.tbox-chat-input {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  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));
+  background: transparent;
+
+  &__row {
+    display: flex;
+    align-items: flex-end;
+    gap: 16px;
+  }
+
+  /* 半透明白色药丸 */
+  &__wrapper {
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+    min-width: 0;
+    gap: 28px;
+    background: var(--tbox-input-bg);
+    border-radius: var(--tbox-input-radius);
+    padding: var(--tbox-input-padding);
+    box-shadow: 0 2px 20px rgba(110, 139, 180, 0.24);
+  }
+
+  &__field {
+    flex: 1;
+    min-width: 0;
+    resize: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 30px;
+    line-height: 48px;
+    max-height: 200px;
+    color: var(--tbox-text-primary);
+    padding: 0;
+
+    &::placeholder {
+      color: rgba(16, 41, 83, 0.6);
+    }
+  }
+
+  /* 发送 / 停止（图片图标） */
+  &__send {
+    width: var(--tbox-send-btn-size);
+    height: var(--tbox-send-btn-size);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__send-img {
+    width: var(--tbox-send-btn-size);
+    height: var(--tbox-send-btn-size);
+    display: block;
+  }
+
+  &__disclaimer {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 20px;
+    line-height: 1.5;
+    color: rgba(16, 41, 83, 0.32);
+  }
+}
+
+/* 新对话按钮（药丸左侧，圆形） */
+.tbox-new-chat-btn {
+  width: 88px;
+  height: 88px;
+  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);
+
+  &__icon {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+/* 语音切换 */
+.tbox-voice-toggle {
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__icon {
+    width: 44px;
+    height: 44px;
+  }
+
+  &--active {
+    opacity: 0.7;
+  }
+}
+
+/* “+” 媒体选取触发 + 弹出菜单 */
+.tbox-media-picker {
+  position: relative;
+  flex-shrink: 0;
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: transform 0.25s ease;
+
+    &--open {
+      transform: rotate(45deg);
+    }
+  }
+
+  &__trigger-icon {
+    width: var(--tbox-send-btn-size);
+    height: var(--tbox-send-btn-size);
+  }
+}
+
+/* 媒体选取菜单（输入行下方，动画展开，对齐原模板） */
+.tbox-media-picker-menu {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: row;
+  height: 132px;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.2s ease-in;
+  will-change: opacity, transform;
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+    transition: all 0.25s ease-out;
+  }
+
+  &__option {
+    display: flex;
+    overflow: hidden;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: 224px;
+    height: 132px;
+    border-radius: 20px;
+    background: rgba(0, 0, 0, 0.04);
+    opacity: 0;
+    transform: translateY(15px);
+    transition: all 0.3s ease-out;
+    will-change: opacity, transform;
+
+    & + & {
+      margin-left: 15px;
+    }
+  }
+
+  &--visible &__option {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &--visible &__option:nth-child(1) { transition-delay: 0.05s; }
+  &--visible &__option:nth-child(2) { transition-delay: 0.1s; }
+  &--visible &__option:nth-child(3) { transition-delay: 0.15s; }
+
+  &__option-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 48px;
+  }
+
+  &__option-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+  }
+
+  &__option-label {
+    margin-left: 8px;
+    font-weight: 400;
+    font-size: 26px;
+    color: #4b6282;
+    line-height: 37px;
+  }
+}
+
+/* 按住说话输入条 */
+.tbox-voice-press-field {
+  flex: 1;
+  min-width: 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+
+  &--disabled {
+    opacity: 0.35;
+  }
+  &--pressing,
+  &--recording-active {
+    background: #eef4ff;
+  }
+  &--recording-cancel {
+    background: #fff1f1;
+  }
+  &--processing {
+    background: #f5f7fb;
+  }
+
+  &__content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+  }
+
+  &__text {
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 48px;
+    color: #1f3b63;
+  }
+}
+
+/* 录音全屏浮层 */
+.tbox-voice-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+
+  &__mask {
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.01);
+  }
+
+  &__capture {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0 24px calc(56px + env(safe-area-inset-bottom, 16px));
+    box-sizing: border-box;
+  }
+
+  &__panel {
+    width: 100%;
+    max-width: var(--tbox-content-max-width);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__bubble {
+    width: 268px;
+    height: 82px;
+    background-image: url('https://mdn.alipayobjects.com/huamei_frp8ut/afts/img/A*O6TCSrNeWvwAAAAAQHAAAAgAet-KAQ/original');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 40px;
+  }
+
+  &__bubble-text {
+    font-size: 24px;
+    line-height: 62px;
+    color: #fff;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  &__tip {
+    font-size: 24px;
+    line-height: 48px;
+    color: rgba(31, 59, 99, 0.45);
+    font-weight: 500;
+    margin-bottom: 32px;
+    text-align: center;
+
+    &--cancel {
+      color: #ff3141;
+    }
+  }
+
+  &__button {
+    width: 100%;
+    height: 100px;
+    border-radius: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image: linear-gradient(162deg, #30a2fd -22%, #868af4 108%);
+    box-shadow: 0 12px 28px rgba(80, 111, 255, 0.24);
+
+    &--cancel {
+      background-image: linear-gradient(162deg, #fd3030 -22%, #f48686 108%);
+    }
+  }
+
+  &__wave {
+    width: 484px;
+    height: 48px;
+    background-image: url('https://mdn.alipayobjects.com/huamei_frp8ut/afts/img/A*5PDvR4j7fBgAAAAAVBAAAAgAet-KAQ/original');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+}