@tbox.cn/app-template-agent 0.1.0

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

@@ -0,0 +1,251 @@
+import { useEffect, useRef, useState } from 'react';
+import { useMediaUpload } from '@/hooks/useMediaUpload';
+import { useASRAdapter, isInAlipayShell } from '@tbox.cn/app-sdk/client';
+import { useChatConfigStore } from '@/store/chat-config';
+
+import type { ChatInputMessage, InputMethod } from '@/types/chat';
+import { MediaList } from '@/components/MediaList';
+import { useVoicePress } from './voice/useVoicePress';
+import { VoicePressField } from './voice/VoicePressField';
+import { VoiceRecordingOverlay } from './voice/VoiceRecordingOverlay';
+import newChatIcon from '../../../assets/new-chat.svg';
+import voiceIcon from '../../../assets/voice-circle.svg';
+import keyboardIcon from '../../../assets/keyboard-circle.svg';
+import sendIcon from '../../../assets/send-gradient.svg';
+import stopIcon from '../../../assets/stop@2x.png';
+import moreIcon from '../../../assets/more-circle.svg';
+import './index.less';
+
+type PickKind = 'image' | 'camera' | 'video';
+
+/** 媒体选取菜单图标（远程素材，对齐原模板）。 */
+const OPTION_ICONS: Record<PickKind, { icon: string; label: string }> = {
+  image: { icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*DfDhSYAMzoQAAAAAHiAAAAgAel-hAQ/original', label: '相册' },
+  camera: { icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*xdKLSabxqmQAAAAAOnAAAAgAel-hAQ/original', label: '拍摄' },
+  video: { icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*xdKLSabxqmQAAAAAOnAAAAgAel-hAQ/original', label: '视频' },
+};
+
+const MENU_ANIMATION_MS = 250;
+
+/** 媒体上传默认约束（分类型数量 + 单文件大小）。如需放开/收紧按业务改这里。 */
+const DEFAULT_MEDIA_CONFIG = {
+  image: { maxCount: 9, maxSize: 10 * 1024 * 1024 },
+  video: { maxCount: 1, maxSize: 50 * 1024 * 1024 },
+  file: { maxCount: 5, maxSize: 20 * 1024 * 1024 },
+} as const;
+const MEDIA_MAX_TOTAL = 9;
+
+/** 对话输入框（对齐原模板）：媒体预览 + 新对话 + 药丸[输入框/按住说话 + 语音切换 + 发送/“+”] + 动画选取菜单 + 免责声明。 */
+export function ChatInput({
+  generating,
+  onSend,
+  onCancel,
+  onNewChat,
+  disclaimer = '以上内容由AI生成，请谨慎甄别。',
+}: {
+  generating?: boolean;
+  onSend: (msg: ChatInputMessage) => void;
+  onCancel?: () => void;
+  onNewChat?: () => void;
+  disclaimer?: string;
+}) {
+  const [text, setText] = useState('');
+  const imageRef = useRef<HTMLInputElement>(null);
+  const cameraRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLInputElement>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const { items, addFiles, addFromBridge, removeItem, retry, clear, uploading } = useMediaUpload(
+    MEDIA_MAX_TOTAL,
+    DEFAULT_MEDIA_CONFIG,
+  );
+  const asr = useASRAdapter();
+  const inShell = isInAlipayShell();
+  const enableImage = useChatConfigStore((s) => s.enableImageUpload);
+  const enableVideo = useChatConfigStore((s) => s.enableVideoUpload);
+  const enableVoice = useChatConfigStore((s) => s.enableVoiceInput);
+  const defaultInputMode = useChatConfigStore((s) => s.defaultInputMode);
+  const [inputMode, setInputMode] = useState<'text' | 'voice'>(
+    defaultInputMode === 'VOICE' && enableVoice ? 'voice' : 'text',
+  );
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [menuAnimating, setMenuAnimating] = useState(false);
+
+  const voice = useVoicePress({
+    disabled: generating,
+    asr,
+    onResult: (t) => onSend({ text: t, mediaItems: [], inputMethod: 'voice' }),
+  });
+
+  const isWebPc = !inShell && typeof window !== 'undefined' && window.innerWidth > 450;
+
+  const pick = (kind: PickKind) => {
+    if (inShell) {
+      addFromBridge(kind);
+      return;
+    }
+    (kind === 'image' ? imageRef : kind === 'camera' ? cameraRef : videoRef).current?.click();
+  };
+
+  // 媒体选项：相册 / 拍摄（移动端）/ 视频，按 config 开关
+  const menuOptions = [
+    enableImage && { type: 'image' as const, ...OPTION_ICONS.image },
+    enableImage && !isWebPc && { type: 'camera' as const, ...OPTION_ICONS.camera },
+    enableVideo && { type: 'video' as const, ...OPTION_ICONS.video },
+  ].filter(Boolean) as { type: PickKind; icon: string; label: string }[];
+
+  const openMenu = () => {
+    setMenuVisible(true);
+    requestAnimationFrame(() => requestAnimationFrame(() => setMenuAnimating(true)));
+  };
+  const closeMenu = () => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    setMenuAnimating(false);
+    closeTimerRef.current = setTimeout(() => setMenuVisible(false), MENU_ANIMATION_MS);
+  };
+  const onPlus = () => {
+    if (menuVisible) return closeMenu();
+    if (menuOptions.length <= 1) return menuOptions[0] && pick(menuOptions[0].type);
+    openMenu();
+  };
+  const onMenuSelect = (kind: PickKind) => {
+    closeMenu();
+    pick(kind);
+  };
+
+  useEffect(() => {
+    if (!menuVisible) return;
+    const onDown = (e: MouseEvent | TouchEvent) => {
+      const t = e.target as HTMLElement;
+      if (t && !t.closest('.tbox-media-picker') && !t.closest('.tbox-media-picker-menu')) closeMenu();
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('touchstart', onDown, { passive: true });
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('touchstart', onDown);
+    };
+  }, [menuVisible]);
+
+  useEffect(() => () => closeTimerRef.current && clearTimeout(closeTimerRef.current), []);
+
+  const canSend = !!(text.trim() || items.length > 0) && !uploading && inputMode === 'text';
+
+  const submit = () => {
+    if (!canSend) return;
+    const media = items.filter((it) => it.fileId && !it.illegal);
+    const inputMethod: InputMethod = media.length ? media[0].type : 'text';
+    onSend({ text: text.trim(), mediaItems: media, inputMethod });
+    setText('');
+    clear();
+  };
+
+  const onPickFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
+    addFiles(e.target.files ? Array.from(e.target.files) : []);
+    e.target.value = '';
+  };
+
+  const toggleMode = () => setInputMode((m) => (m === 'text' ? 'voice' : 'text'));
+
+  return (
+    <div className="tbox-chat-input">
+      <MediaList
+        items={items}
+        onRemove={removeItem}
+        onRetry={retry}
+        onPickImage={() => pick('image')}
+        onPickCamera={() => pick('camera')}
+        onPickVideo={() => pick('video')}
+        enableImage={enableImage}
+        enableVideo={enableVideo}
+        isWebPc={isWebPc}
+      />
+
+      <div className="tbox-chat-input__row">
+        {onNewChat && (
+          <div className="tbox-new-chat-btn" onClick={onNewChat}>
+            <img className="tbox-new-chat-btn__icon" src={newChatIcon} alt="新对话" />
+          </div>
+        )}
+
+        <div className="tbox-chat-input__wrapper">
+          <input ref={imageRef} type="file" accept="image/*" multiple hidden onChange={onPickFiles} />
+          <input ref={cameraRef} type="file" accept="image/*" capture="environment" hidden onChange={onPickFiles} />
+          <input ref={videoRef} type="file" accept="video/*" hidden onChange={onPickFiles} />
+
+          {inputMode === 'voice' ? (
+            <VoicePressField
+              disabled={generating}
+              interactionState={voice.interactionState}
+              handlers={voice.handlers}
+            />
+          ) : (
+            <textarea
+              className="tbox-chat-input__field"
+              value={text}
+              placeholder="有什么需要问我的吗"
+              rows={1}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  submit();
+                }
+              }}
+            />
+          )}
+
+          {enableVoice && (
+            <div className="tbox-voice-toggle" onClick={toggleMode}>
+              <img
+                className="tbox-voice-toggle__icon"
+                src={inputMode === 'voice' ? keyboardIcon : voiceIcon}
+                alt={inputMode === 'voice' ? '键盘' : '语音'}
+              />
+            </div>
+          )}
+
+          {generating ? (
+            <div className="tbox-chat-input__send tbox-chat-input__send--active" onClick={onCancel}>
+              <img className="tbox-chat-input__send-img" src={stopIcon} alt="停止" />
+            </div>
+          ) : canSend ? (
+            <div className="tbox-chat-input__send tbox-chat-input__send--active" onClick={submit}>
+              <img className="tbox-chat-input__send-img" src={sendIcon} alt="发送" />
+            </div>
+          ) : menuOptions.length > 0 ? (
+            <div className="tbox-media-picker">
+              <div
+                className={`tbox-media-picker__trigger${menuVisible ? ' tbox-media-picker__trigger--open' : ''}`}
+                onClick={onPlus}
+              >
+                <img className="tbox-media-picker__trigger-icon" src={moreIcon} alt="更多" />
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {menuVisible && (
+        <div className={`tbox-media-picker-menu${menuAnimating ? ' tbox-media-picker-menu--visible' : ''}`}>
+          {menuOptions.map((o) => (
+            <div key={o.type} className="tbox-media-picker-menu__option" onClick={() => onMenuSelect(o.type)}>
+              <div className="tbox-media-picker-menu__option-content">
+                <img className="tbox-media-picker-menu__option-icon" src={o.icon} alt="" />
+                <span className="tbox-media-picker-menu__option-label">{o.label}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {disclaimer && <div className="tbox-chat-input__disclaimer">{disclaimer}</div>}
+
+      <VoiceRecordingOverlay
+        visible={voice.overlayVisible}
+        interactionState={voice.interactionState}
+        countdown={voice.countdown}
+        handlers={voice.handlers}
+      />
+    </div>
+  );
+}

package/apps/client/src/components/ChatInput/voice/VoicePressField.tsx

@@ -0,0 +1,34 @@
+import type { VoiceInteractionState } from './machine';
+import type { VoicePressHandlers } from './useVoicePress';
+
+function fieldText(s: VoiceInteractionState): string {
+  if (s === 'recording-cancel') return '松开取消';
+  if (s === 'processing') return '识别中...';
+  if (s === 'pressing' || s === 'recording-active') return '松开转文字';
+  return '按住说话';
+}
+
+/** “按住说话”输入条（替代文本框，语音模式下显示）。 */
+export function VoicePressField({
+  disabled,
+  interactionState,
+  handlers,
+}: {
+  disabled?: boolean;
+  interactionState: VoiceInteractionState;
+  handlers: VoicePressHandlers;
+}) {
+  return (
+    <div
+      className={`tbox-voice-press-field tbox-voice-press-field--${interactionState}${disabled ? ' tbox-voice-press-field--disabled' : ''}`}
+      onTouchStart={disabled ? undefined : handlers.onTouchStart}
+      onTouchMove={disabled ? undefined : handlers.onTouchMove}
+      onTouchEnd={disabled ? undefined : handlers.onTouchEnd}
+      onTouchCancel={disabled ? undefined : handlers.onTouchCancel}
+    >
+      <div className="tbox-voice-press-field__content">
+        <span className="tbox-voice-press-field__text">{fieldText(interactionState)}</span>
+      </div>
+    </div>
+  );
+}

package/apps/client/src/components/ChatInput/voice/VoiceRecordingOverlay.tsx

@@ -0,0 +1,51 @@
+import type { VoiceInteractionState } from './machine';
+import type { VoicePressHandlers } from './useVoicePress';
+
+function overlayTip(s: VoiceInteractionState): string {
+  if (s === 'recording-cancel') return '松开取消';
+  if (s === 'processing') return '识别中...';
+  return '松手发送，上移取消';
+}
+
+/** 录音全屏浮层（按压期间显示）。 */
+export function VoiceRecordingOverlay({
+  visible,
+  interactionState,
+  countdown,
+  handlers,
+}: {
+  visible: boolean;
+  interactionState: VoiceInteractionState;
+  countdown?: number | null;
+  handlers: VoicePressHandlers;
+}) {
+  if (!visible) return null;
+  const isCancel = interactionState === 'recording-cancel';
+
+  return (
+    <div className="tbox-voice-overlay">
+      <div className="tbox-voice-overlay__mask" />
+      <div
+        className="tbox-voice-overlay__capture"
+        onTouchStart={handlers.onTouchStart}
+        onTouchMove={handlers.onTouchMove}
+        onTouchEnd={handlers.onTouchEnd}
+        onTouchCancel={handlers.onTouchCancel}
+      >
+        <div className="tbox-voice-overlay__panel">
+          {countdown != null && interactionState === 'recording-active' && (
+            <div className="tbox-voice-overlay__bubble">
+              <span className="tbox-voice-overlay__bubble-text">{countdown}秒后自动停止录音</span>
+            </div>
+          )}
+          <span className={`tbox-voice-overlay__tip${isCancel ? ' tbox-voice-overlay__tip--cancel' : ''}`}>
+            {overlayTip(interactionState)}
+          </span>
+          <div className={`tbox-voice-overlay__button${isCancel ? ' tbox-voice-overlay__button--cancel' : ''}`}>
+            <div className="tbox-voice-overlay__wave" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/client/src/components/ChatInput/voice/machine.ts

@@ -0,0 +1,27 @@
+/** 语音按压交互状态机（纯逻辑，移植自原模板 voice-interaction-machine）。 */
+export type VoiceInteractionState =
+  | 'idle'
+  | 'pressing'
+  | 'recording-active'
+  | 'recording-cancel'
+  | 'processing';
+
+export type VoiceReleaseAction = 'stop' | 'cancel' | 'noop';
+
+export const CANCEL_GESTURE_THRESHOLD = 25;
+
+/** 按压中上滑超过阈值 → 取消态，否则录音态 */
+export function getMoveInteractionState(
+  startClientY: number,
+  currentClientY: number,
+  threshold = CANCEL_GESTURE_THRESHOLD,
+): VoiceInteractionState {
+  return startClientY - currentClientY > threshold ? 'recording-cancel' : 'recording-active';
+}
+
+/** 松手动作：取消 / 停止(转文字) / 无操作 */
+export function getReleaseAction(state: VoiceInteractionState): VoiceReleaseAction {
+  if (state === 'recording-cancel') return 'cancel';
+  if (state === 'pressing' || state === 'recording-active') return 'stop';
+  return 'noop';
+}

package/apps/client/src/components/ChatInput/voice/useVoicePress.ts

@@ -0,0 +1,188 @@
+import { useCallback, useRef, useState } from 'react';
+import type { IASRAdapter } from '@tbox.cn/app-sdk/client';
+import { useRefreshSession } from '@tbox.cn/app-sdk/client';
+import { isSessionExpiredError } from '@/utils/session-error';
+import { toast } from '@/utils/toast';
+import {
+  getMoveInteractionState,
+  getReleaseAction,
+  type VoiceInteractionState,
+} from './machine';
+
+export interface VoicePressHandlers {
+  onTouchStart: (e: React.TouchEvent) => void;
+  onTouchMove: (e: React.TouchEvent) => void;
+  onTouchEnd: (e: React.TouchEvent) => void;
+  onTouchCancel: (e: React.TouchEvent) => void;
+}
+
+const MAX_DURATION = 60; // 录音上限（秒）
+const COUNTDOWN_START = 10; // 剩余 10 秒起显示倒计时
+
+// 录音权限被拒/不可用时给用户的提示（补回旧模板丢失的“被拒反馈”——旧版会弹 modal / 触发
+// onPermissionDenied，新版此前是静默回 idle）。两端通用：toast 是 antd-mobile 的纯 H5 实现。
+// 到这里的错误来自实际录音引擎（浏览器；或壳内桥失败降级后的 H5——见 FallbackASRAdapter），
+// 故 NotFoundError 可精确判“无设备”，其余（NotAllowedError/未知）用“检查录音权限 + 重试”兜底。
+const MIC_PERMISSION_MSG = '无法使用麦克风，请检查录音权限后重试';
+function micErrorMessage(err: unknown): string {
+  const name = (err as { name?: string } | null)?.name;
+  if (name === 'NotFoundError' || name === 'DevicesNotFoundError') return '未检测到麦克风设备';
+  return MIC_PERMISSION_MSG;
+}
+
+/** 按住说话交互：按下录音、上滑取消、松手转文字、到 60s 自动停。识别结果通过 onResult 回传。 */
+export function useVoicePress({
+  disabled,
+  asr,
+  onResult,
+}: {
+  disabled?: boolean;
+  asr?: IASRAdapter;
+  onResult: (text: string) => void;
+}) {
+  const refreshSession = useRefreshSession();
+  const [interactionState, setStateRaw] = useState<VoiceInteractionState>('idle');
+  const [duration, setDurationRaw] = useState(0);
+  const stateRef = useRef<VoiceInteractionState>('idle');
+  const durationRef = useRef(0);
+  const startYRef = useRef(0);
+  const recordingRef = useRef(false);
+  // 本次录音实际使用的 adapter：session 过期重试后会切到刷新出来的新 adapter
+  const recordingAsrRef = useRef<IASRAdapter | undefined>(asr);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const finishRef = useRef<() => void>(() => {});
+
+  const setState = useCallback((s: VoiceInteractionState) => {
+    stateRef.current = s;
+    setStateRaw(s);
+  }, []);
+  const setDur = (n: number) => {
+    durationRef.current = n;
+    setDurationRaw(n);
+  };
+  const stopTimer = () => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  const startTimer = () => {
+    stopTimer();
+    setDur(0);
+    timerRef.current = setInterval(() => {
+      setDur(durationRef.current + 1);
+      if (durationRef.current >= MAX_DURATION) {
+        stopTimer();
+        finishRef.current(); // 到上限按"松手"处理（转文字 / 若在取消区则取消）
+      }
+    }, 1000);
+  };
+
+  const onTouchStart = useCallback(
+    async (e: React.TouchEvent) => {
+      if (disabled || !asr || recordingRef.current) return;
+      startYRef.current = e.touches[0]?.clientY ?? 0;
+      setState('pressing');
+
+      // 权限检查（对齐原模板 useVoiceRecorder）：未授权/检查异常 → 提示并回 idle
+      if (asr.checkPermission) {
+        try {
+          if (!(await asr.checkPermission())) {
+            toast(MIC_PERMISSION_MSG, 'error');
+            setState('idle');
+            return;
+          }
+        } catch {
+          toast(MIC_PERMISSION_MSG, 'error');
+          setState('idle');
+          return;
+        }
+      }
+
+      let active = asr;
+      try {
+        try {
+          await asr.startRecording();
+        } catch (err) {
+          // session 过期 → 刷新并用新 adapter 重试一次（对齐原模板）
+          if (isSessionExpiredError(err) && refreshSession) {
+            const next = await refreshSession();
+            if (next.asr) {
+              active = next.asr;
+              await active.startRecording();
+            } else {
+              throw err;
+            }
+          } else {
+            throw err;
+          }
+        }
+        recordingAsrRef.current = active;
+        recordingRef.current = true;
+        startTimer();
+        if (stateRef.current === 'pressing') setState('recording-active');
+      } catch (err) {
+        recordingRef.current = false;
+        toast(isSessionExpiredError(err) ? '登录状态已失效，请稍后重试' : micErrorMessage(err), 'error');
+        setState('idle');
+      }
+    },
+    [disabled, asr, refreshSession, setState],
+  );
+
+  const onTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!recordingRef.current) return;
+      const y = e.touches[0]?.clientY ?? 0;
+      setState(getMoveInteractionState(startYRef.current, y));
+    },
+    [setState],
+  );
+
+  const finish = useCallback(async () => {
+    stopTimer();
+    if (!recordingRef.current) {
+      setState('idle');
+      return;
+    }
+    recordingRef.current = false;
+    // 用本次录音实际使用的 adapter（可能因 session 重试切换过）
+    const active = recordingAsrRef.current ?? asr;
+    const action = getReleaseAction(stateRef.current);
+    if (action === 'cancel') {
+      active?.cancelRecording();
+      setState('idle');
+      return;
+    }
+    setState('processing');
+    try {
+      const text = (await active?.stopRecording()) ?? '';
+      if (text) onResult(text);
+    } catch {
+      /* ignore */
+    }
+    setState('idle');
+  }, [asr, onResult, setState]);
+  finishRef.current = finish;
+
+  const handlers: VoicePressHandlers = {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd: () => finish(),
+    onTouchCancel: () => {
+      stopTimer();
+      if (recordingRef.current) {
+        recordingRef.current = false;
+        (recordingAsrRef.current ?? asr)?.cancelRecording();
+      }
+      setState('idle');
+    },
+  };
+
+  const counting =
+    recordingRef.current &&
+    (interactionState === 'recording-active' || interactionState === 'recording-cancel' || interactionState === 'pressing');
+  const countdown = counting && duration >= MAX_DURATION - COUNTDOWN_START ? MAX_DURATION - duration : null;
+
+  return { interactionState, overlayVisible: interactionState !== 'idle', countdown, handlers };
+}

package/apps/client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,2 @@
+// Re-export from app-sdk
+export { ErrorBoundary } from '@tbox.cn/app-sdk/client';