@talknote/create-talknote-h5 0.1.4 → 0.1.5

package/template/packages/xiaozhi-chat/components/ChatInput/HoldToTalk.tsx

@@ -0,0 +1,167 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Toast } from 'antd-mobile';
+import { useVoiceRecording } from '../../hooks/useVoiceRecording';
+import styles from './HoldToTalk.less';
+
+type HoldToTalkProps = {
+  disabled?: boolean;
+  onResult: (text: string) => void;
+};
+
+const CANCEL_THRESHOLD_PX = 56;
+
+const HoldToTalk: React.FC<HoldToTalkProps> = ({ disabled, onResult }) => {
+  const { phase, start, cancel, stop, ensureSupported } = useVoiceRecording();
+  const [willCancel, setWillCancel] = useState(false);
+  const startYRef = useRef(0);
+  const activePointerRef = useRef<number | null>(null);
+  const willCancelRef = useRef(false);
+  const recordingReadyRef = useRef(false);
+
+  /** 手指已抬起，但 start() 异步尚未返回 */
+  const releasedBeforeStartRef = useRef(false);
+  const releaseActionRef = useRef<'stop' | 'cancel' | null>(null);
+
+  const resetGesture = useCallback(() => {
+    activePointerRef.current = null;
+    willCancelRef.current = false;
+    setWillCancel(false);
+  }, []);
+
+  const finishByAction = useCallback(
+    async (action: 'stop' | 'cancel') => {
+      if (action === 'cancel') {
+        await cancel();
+        Toast.show({ content: '已取消' });
+        return;
+      }
+      const text = await stop();
+      if (text) {
+        onResult(text);
+      } else {
+        Toast.show({ content: '未识别到内容，请重试' });
+      }
+    },
+    [cancel, onResult, stop],
+  );
+
+  const handlePointerDown = useCallback(
+    async (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (disabled || activePointerRef.current != null) return;
+      if (!ensureSupported()) return;
+
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      activePointerRef.current = event.pointerId;
+      startYRef.current = event.clientY;
+      willCancelRef.current = false;
+      recordingReadyRef.current = false;
+      releasedBeforeStartRef.current = false;
+      releaseActionRef.current = null;
+      setWillCancel(false);
+
+      const ok = await start();
+      if (!ok) {
+        resetGesture();
+        releasedBeforeStartRef.current = false;
+        releaseActionRef.current = null;
+        recordingReadyRef.current = false;
+        return;
+      }
+
+      recordingReadyRef.current = true;
+
+      // start 完成时手指已抬起：按抬起意图收尾
+      if (releasedBeforeStartRef.current) {
+        const action = releaseActionRef.current || 'stop';
+        releasedBeforeStartRef.current = false;
+        releaseActionRef.current = null;
+        recordingReadyRef.current = false;
+        resetGesture();
+        await finishByAction(action);
+      }
+    },
+    [disabled, ensureSupported, finishByAction, resetGesture, start],
+  );
+
+  const handlePointerMove = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
+    if (activePointerRef.current !== event.pointerId) return;
+    const deltaY = startYRef.current - event.clientY;
+    const next = deltaY > CANCEL_THRESHOLD_PX;
+    if (next !== willCancelRef.current) {
+      willCancelRef.current = next;
+      setWillCancel(next);
+    }
+  }, []);
+
+  const handlePointerUp = useCallback(
+    async (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (activePointerRef.current !== event.pointerId) return;
+
+      const shouldCancel = willCancelRef.current;
+      const action: 'stop' | 'cancel' = shouldCancel ? 'cancel' : 'stop';
+
+      // start() 尚未完成
+      if (!recordingReadyRef.current) {
+        releasedBeforeStartRef.current = true;
+        releaseActionRef.current = action;
+        resetGesture();
+        return;
+      }
+
+      recordingReadyRef.current = false;
+      resetGesture();
+      await finishByAction(action);
+    },
+    [finishByAction, resetGesture],
+  );
+
+  const handlePointerCancel = useCallback(
+    async (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (activePointerRef.current !== event.pointerId) return;
+
+      if (!recordingReadyRef.current) {
+        releasedBeforeStartRef.current = true;
+        releaseActionRef.current = 'cancel';
+        resetGesture();
+        return;
+      }
+
+      recordingReadyRef.current = false;
+      resetGesture();
+      await cancel();
+    },
+    [cancel, resetGesture],
+  );
+
+  const isRecording = phase === 'recording';
+  let buttonLabel = '按住说话';
+  if (isRecording) {
+    buttonLabel = willCancel ? '松开取消' : '松开发送';
+  }
+
+  return (
+    <div className={styles.wrap}>
+      {isRecording ? (
+        <div className={`${styles.tip} ${willCancel ? styles.tipCancel : ''}`}>
+          {willCancel ? '松手取消' : '松手发送，上滑取消'}
+        </div>
+      ) : null}
+      <button
+        type="button"
+        className={`${styles.button} ${isRecording ? styles.buttonActive : ''} ${
+          willCancel ? styles.buttonCancel : ''
+        }`}
+        disabled={disabled}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+      >
+        {buttonLabel}
+      </button>
+    </div>
+  );
+};
+
+export default HoldToTalk;

package/template/packages/xiaozhi-chat/components/ChatInput/index.less

@@ -0,0 +1,189 @@
+.root {
+  width: 100%;
+  padding: 0 16Px 8Px;
+  box-sizing: border-box;
+}
+
+.shortcutSlot {
+  display: flex;
+  gap: 8Px;
+  overflow-x: auto;
+  margin-bottom: 8Px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.shortcutSlot::-webkit-scrollbar {
+  display: none;
+}
+
+.mainRow {
+  display: flex;
+  align-items: flex-end;
+  gap: 8Px;
+  margin-bottom: 12Px;
+}
+
+.inputContainer {
+  flex: 1;
+  min-width: 0;
+  background: #ffffff;
+  border-radius: 24Px;
+  overflow: hidden;
+  box-shadow: 0 4Px 24Px 0 rgba(135, 52, 0, 0.08);
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.inputArea {
+  display: flex;
+  align-items: center;
+  gap: 8Px;
+  min-height: 48Px;
+  padding: 0 12Px;
+}
+
+.iconBtn {
+  flex-shrink: 0;
+  width: 24Px;
+  height: 24Px;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconBtn:disabled {
+  opacity: 0.5;
+}
+
+.iconImg {
+  width: 24Px;
+  height: 24Px;
+  object-fit: contain;
+}
+
+.iconSpacer {
+  flex-shrink: 0;
+  width: 24Px;
+  height: 24Px;
+}
+
+.textarea {
+  flex: 1;
+  min-width: 0;
+  min-height: 48Px;
+  max-height: 76Px;
+  padding: 13Px 0 11Px;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  font-size: 15Px;
+  line-height: 22Px;
+  color: #2a2b33;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.textarea::placeholder {
+  color: #b0b2bf;
+}
+
+.textarea:disabled {
+  opacity: 0.6;
+}
+
+.micBtn {
+  flex-shrink: 0;
+  width: 32Px;
+  height: 32Px;
+  border: none;
+  padding: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: #8e90a0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.micBtn:disabled {
+  opacity: 0.45;
+}
+
+.micBtnActive {
+  color: #fe780f;
+  background: rgba(254, 120, 15, 0.12);
+  animation: micPulse 1.2s ease-in-out infinite;
+}
+
+.micSvg {
+  width: 22Px;
+  height: 22Px;
+  display: block;
+}
+
+@keyframes micPulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+.actionWrap {
+  flex-shrink: 0;
+  width: 50Px;
+  height: 50Px;
+  border-radius: 25Px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 4Px 24Px 0 rgba(135, 52, 0, 0.08);
+}
+
+.actionWrapEnabled {
+  background: #ffffff;
+}
+
+.actionBtn {
+  width: 24Px;
+  height: 24Px;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.actionBtn:disabled {
+  opacity: 1;
+}
+
+.actionIcon {
+  width: 24Px;
+  height: 24Px;
+  object-fit: contain;
+}
+
+.actionIconDisabled {
+  opacity: 0.35;
+}
+
+.disclaimer {
+  text-align: center;
+  color: #b0b2bf;
+  font-size: 10Px;
+  font-weight: 400;
+  line-height: 14Px;
+  margin-bottom: 8Px;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}

package/template/packages/xiaozhi-chat/components/ChatInput/index.tsx

@@ -0,0 +1,203 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import iconKeyboard from '../../assets/images/keyboard.png';
+import iconVoice from '../../assets/images/icon-voice.png';
+import iconSend from '../../assets/images/send-icon.png';
+import iconStop from '../../assets/images/stop-icon.png';
+import HoldToTalk from './HoldToTalk';
+import { hideVibeNoteKeyboard } from '../../utils/bridge';
+import { useRealtimeTranscription } from '../../hooks/useRealtimeTranscription';
+import styles from './index.less';
+
+type InputMode = 'keyboard' | 'voice';
+
+type ChatInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: (text: string) => void;
+  onStop: () => void;
+  isStreaming?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  shortcutSlot?: React.ReactNode;
+  onVoiceResult?: (question: string) => void;
+};
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  isStreaming = false,
+  disabled = false,
+  placeholder = '请输入您想问的问题...',
+  shortcutSlot,
+  onVoiceResult,
+}) => {
+  const [mode, setMode] = useState<InputMode>('keyboard');
+  const { transcribing, toggle, stop: stopTranscription } = useRealtimeTranscription({
+    value,
+    onChange,
+  });
+  const canSend = value.trim().length > 0 && !isStreaming && !disabled;
+  const inputLocked = disabled || isStreaming;
+  const showSend = mode === 'keyboard' && !isStreaming;
+  const showStop = isStreaming;
+
+  useEffect(() => {
+    if (isStreaming) {
+      setMode('keyboard');
+      stopTranscription({ silent: true });
+    }
+  }, [isStreaming, stopTranscription]);
+
+  const handleSend = useCallback(async () => {
+    if (isStreaming || disabled) return;
+    const latest = await stopTranscription({ silent: true });
+    const text = (latest || value).trim();
+    if (!text) return;
+    onSend(text);
+  }, [disabled, isStreaming, onSend, stopTranscription, value]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  const handleVoiceResult = useCallback(
+    (text: string) => {
+      if (onVoiceResult) {
+        onVoiceResult(text);
+        return;
+      }
+      onChange(text);
+      onSend(text);
+    },
+    [onChange, onSend, onVoiceResult],
+  );
+
+  const toggleMode = useCallback(() => {
+    if (inputLocked) return;
+    setMode((prev) => {
+      const next = prev === 'keyboard' ? 'voice' : 'keyboard';
+      if (next === 'voice') {
+        hideVibeNoteKeyboard();
+        stopTranscription({ silent: true });
+      }
+      return next;
+    });
+  }, [inputLocked, stopTranscription]);
+
+  const handleMicClick = useCallback(() => {
+    if (inputLocked) return;
+    hideVibeNoteKeyboard();
+    toggle();
+  }, [inputLocked, toggle]);
+
+  return (
+    <div className={styles.root}>
+      {shortcutSlot ? <div className={styles.shortcutSlot}>{shortcutSlot}</div> : null}
+
+      <div className={styles.mainRow}>
+        <div className={`${styles.inputContainer} ${inputLocked ? styles.disabled : ''}`}>
+          <div className={styles.inputArea}>
+            <button
+              type="button"
+              className={styles.iconBtn}
+              disabled={inputLocked}
+              onClick={toggleMode}
+              aria-label={mode === 'keyboard' ? '切换到按住说话' : '切换到键盘输入'}
+            >
+              <img
+                src={mode === 'voice' ? iconKeyboard : iconVoice}
+                alt=""
+                className={styles.iconImg}
+              />
+            </button>
+
+            {mode === 'keyboard' ? (
+              <>
+                <textarea
+                  className={styles.textarea}
+                  value={value}
+                  onChange={(e) => onChange(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={transcribing ? '正在聆听...' : placeholder}
+                  disabled={inputLocked}
+                  readOnly={transcribing}
+                  rows={1}
+                  maxLength={500}
+                />
+                <button
+                  type="button"
+                  className={`${styles.micBtn} ${transcribing ? styles.micBtnActive : ''}`}
+                  disabled={inputLocked}
+                  onClick={handleMicClick}
+                  aria-label={transcribing ? '停止转写' : '开始语音转写'}
+                  aria-pressed={transcribing}
+                >
+                  <svg viewBox="0 0 24 24" className={styles.micSvg} aria-hidden>
+                    <path
+                      d="M12 3.4a3.4 3.4 0 0 0-3.4 3.4v4.4a3.4 3.4 0 1 0 6.8 0V6.8A3.4 3.4 0 0 0 12 3.4Z"
+                      fill={transcribing ? 'currentColor' : 'none'}
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                    />
+                    <path
+                      d="M6.5 11.2a5.5 5.5 0 0 0 11 0M12 16.6v3.4"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </>
+            ) : (
+              <>
+                <HoldToTalk disabled={inputLocked} onResult={handleVoiceResult} />
+                <span className={styles.iconSpacer} aria-hidden />
+              </>
+            )}
+          </div>
+        </div>
+
+        {(showSend || showStop) && (
+          <div
+            className={`${styles.actionWrap} ${
+              (showSend && canSend) || showStop ? styles.actionWrapEnabled : ''
+            }`}
+          >
+            {showStop ? (
+              <button type="button" className={styles.actionBtn} onClick={onStop} aria-label="停止生成">
+                <img src={iconStop} alt="" className={styles.actionIcon} />
+              </button>
+            ) : (
+              <button
+                type="button"
+                className={styles.actionBtn}
+                disabled={!canSend}
+                onClick={handleSend}
+                aria-label="发送"
+              >
+                <img
+                  src={iconSend}
+                  alt=""
+                  className={`${styles.actionIcon} ${canSend ? '' : styles.actionIconDisabled}`}
+                />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className={styles.disclaimer}>本回答由AI生成，仅供参考</div>
+    </div>
+  );
+};
+
+export default ChatInput;

package/template/packages/xiaozhi-chat/components/DeepThinkingWrapper/index.less

@@ -0,0 +1,80 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8Px;
+  padding: 0 0 16Px;
+  width: 100%;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 8Px;
+  padding: 4Px 0;
+}
+
+.spinIcon {
+  width: 20Px;
+  height: 20Px;
+  flex-shrink: 0;
+  animation: spin 1.5s linear infinite;
+}
+
+.titleText {
+  font-size: 14Px;
+  line-height: 20Px;
+  font-weight: 500;
+  background: linear-gradient(90deg, #2a2b33 0%, #fe780f 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.content {
+  width: 100%;
+  max-height: 200Px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.dots {
+  display: flex;
+  align-items: center;
+  gap: 4Px;
+}
+
+.dot {
+  width: 6Px;
+  height: 6Px;
+  border-radius: 50%;
+  background: #fe780f;
+  animation: bounce 1s ease-in-out infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-3Px);
+  }
+}

package/template/packages/xiaozhi-chat/components/DeepThinkingWrapper/index.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useEffect, useRef } from 'react';
+import styles from './index.less';
+
+type DeepThinkingWrapperProps = {
+  children: React.ReactNode;
+};
+
+const ThinkingSpinIcon: React.FC = () => {
+  const gradId = `xiaozhi-think-${React.useId().replace(/:/g, '')}`;
+  return (
+    <svg className={styles.spinIcon} viewBox="0 0 1024 1024" fill="none" aria-hidden>
+      <path
+        d="M433.472 548.672c19.648 41.408 68.736 60.16 110.528 41.856a85.12 85.12 0 0 0 44.8-115.2 85.056 85.056 0 0 0-117.312-38.848 85.12 85.12 0 0 0-38.016 112.192z m398.08-37.504c75.968-136.576 83.648-274.816 18.816-339.648-64.896-64.448-203.968-56.768-340.48 19.2C373.76 116.032 235.968 108.8 171.52 173.248c-64.448 64.384-57.152 201.792 17.92 337.92-75.072 135.68-82.368 273.472-17.92 337.472 20.032 20.032 47.36 34.112 78.912 40.96 70.848 14.912 162.56-5.568 259.008-58.432 97.28 53.76 190.272 75.072 261.568 60.16 31.104-6.848 58.88-20.928 78.912-40.96 20.032-20.096 34.56-47.36 40.96-78.528 15.36-71.232-5.952-163.84-59.712-260.672h0.384z m-599.04-277.376c26.048-25.984 73.856-28.544 142.528-8.064 17.088 5.12 34.112 11.52 51.2 18.752a858.24 858.24 0 0 0-97.28 84.032C297.408 359.68 268.8 392.96 243.2 427.52a468.16 468.16 0 0 1-18.752-51.648c-20.928-68.672-18.368-116.48 8.064-142.464v0.384zM375.04 796.16c-69.12 20.928-116.48 17.92-142.528-8.128-25.984-25.984-28.544-73.344-8.064-142.464 5.12-17.088 11.52-34.176 18.752-51.2a886.592 886.592 0 0 0 182.592 183.04 495.232 495.232 0 0 1-51.2 18.752h0.448z m14.528-163.392A758.4 758.4 0 0 1 288.832 510.72c26.88-41.408 60.608-81.92 100.736-122.048a780.8 780.8 0 0 1 120.32-99.392c41.344 26.88 82.304 60.608 122.432 100.672 39.68 39.68 72.96 79.808 99.84 120.32-26.88 40.576-60.16 80.64-99.84 120.32a779.712 779.712 0 0 1-122.432 100.736 780.8 780.8 0 0 1-120.32-99.456v0.896z m399.744 156.992c-25.984 26.048-73.792 28.608-142.464 8.128a545.28 545.28 0 0 1-53.76-19.648c34.944-25.6 68.224-54.208 99.84-85.76 31.104-30.72 59.264-63.552 84.48-97.728 7.68 17.536 14.08 35.456 19.584 53.376 20.928 68.672 18.368 116.48-8.064 142.464l0.384-0.832z m8.128-415.168c-5.568 17.92-11.968 35.84-19.648 53.376a868.48 868.48 0 0 0-84.864-98.176 856.128 856.128 0 0 0-99.84-85.76c17.92-7.68 35.84-14.464 53.76-20.032 69.12-20.928 116.48-17.92 142.464 8.128 26.048 25.984 28.608 73.344 8.128 142.464z"
+        fill={`url(#${gradId})`}
+      />
+      <defs>
+        <linearGradient id={gradId} x1="176" y1="128" x2="848" y2="896">
+          <stop stopColor="#2A2B33" />
+          <stop offset="1" stopColor="#FE780F" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const DeepThinkingWrapper: React.FC<DeepThinkingWrapperProps> = ({ children }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [children]);
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.titleRow}>
+        <ThinkingSpinIcon />
+        <span className={styles.titleText}>正在深度思考</span>
+      </div>
+      <div ref={scrollRef} className={styles.content}>
+        {children}
+      </div>
+      <div className={styles.dots} aria-hidden>
+        <span className={styles.dot} />
+        <span className={styles.dot} />
+        <span className={styles.dot} />
+      </div>
+    </div>
+  );
+};
+
+export default DeepThinkingWrapper;