@talknote/create-talknote-h5 0.1.4 → 0.1.5

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { ToolCallGroup } from '../../utils/parseAssistantContent';
+import styles from './index.less';
+
+type ToolCallListProps = {
+  groups: ToolCallGroup[];
+};
+
+const ToolCallList: React.FC<ToolCallListProps> = ({ groups }) => {
+  if (!groups.length) return null;
+
+  return (
+    <div className={styles.list}>
+      {groups.map((group) => {
+        const { toolNameAlias, total, executed, hasError } = group;
+        const showProgress = total > 0 && executed > 1;
+        const isFinish = executed === total && total > 0;
+
+        return (
+          <span
+            key={toolNameAlias}
+            className={`${styles.chip} ${isFinish ? '' : styles.chipPending}`}
+          >
+            <svg className={styles.icon} viewBox="0 0 16 16" fill="none" aria-hidden>
+              <path
+                d="M3.2 8.4 6.1 11.2 12.8 4.4"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <span className={styles.label}>
+              {showProgress ? (
+                <>
+                  {`${toolNameAlias}(`}
+                  <span className={hasError ? styles.errorCount : undefined}>{executed}</span>
+                  )
+                </>
+              ) : (
+                toolNameAlias
+              )}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ToolCallList;

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

@@ -0,0 +1,35 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: 2Px;
+  padding: 8Px 0;
+}
+
+.dot {
+  width: 4Px;
+  height: 4Px;
+  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 bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-3Px);
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './index.less';
+
+const TypingIndicator: React.FC = () => (
+  <div className={styles.root} aria-hidden>
+    <span className={styles.dot} />
+    <span className={styles.dot} />
+    <span className={styles.dot} />
+  </div>
+);
+
+export default TypingIndicator;

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

@@ -0,0 +1,105 @@
+.welcome {
+  padding: 24Px 16Px 8Px;
+}
+
+.greeting {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 20Px;
+}
+
+.title {
+  margin: 0 0 8Px;
+  font-size: 20Px;
+  font-weight: 500;
+  line-height: 24Px;
+  color: #2a2b33;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 15Px;
+  line-height: 22Px;
+  color: #2a2b33;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.questions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.questionsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 12Px;
+  display: none;
+}
+
+.questionsTitle {
+  margin: 0;
+  font-size: 13Px;
+  font-weight: 500;
+  line-height: 20Px;
+  color: #9092a3;
+}
+
+.refresh {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #9092a3;
+  font-size: 13Px;
+  line-height: 20Px;
+  cursor: pointer;
+}
+
+.questionList {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8Px;
+  max-width: 100%;
+}
+
+.capsule {
+  display: inline-flex;
+  max-width: 100%;
+  padding: 8Px 14Px;
+  border: 0.5Px solid rgba(254, 120, 15, 0.18);
+  border-radius: 999Px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 1Px 4Px rgba(100, 103, 122, 0.06);
+  color: #414352;
+  font-size: 14Px;
+  line-height: 22Px;
+  text-align: left;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-12Px);
+  animation: capsuleIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes capsuleIn {
+  from {
+    opacity: 0;
+    transform: translateX(-12Px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .capsule {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}

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

@@ -0,0 +1,84 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import styles from './index.less';
+
+const OPPORTUNITY_QUESTIONS = [
+  '本周有哪些高意向商机？',
+  '哪些商机本周需要重点跟进？',
+  '最近丢单的主要原因是什么？',
+  '帮我总结本月商机进展',
+  '哪些客户出现了新的采购意向？',
+  '当前管道里金额最大的商机有哪些？',
+  '有哪些商机卡在报价或决策阶段？',
+  '本周新发现的商机有哪些？',
+  '哪些商机预计本月能够成交？',
+  '帮我看看重点客户的商机风险',
+];
+
+const PICK_COUNT = 5;
+
+const pickRandomQuestions = (source: string[], count: number, exclude: string[] = []) => {
+  const pool = source.filter((item) => !exclude.includes(item));
+  const from = pool.length >= count ? pool : source;
+  const shuffled = [...from].sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, Math.min(count, shuffled.length));
+};
+
+type WelcomeProps = {
+  title?: string;
+  subtitle?: string;
+  onQuestionPress?: (question: string) => void;
+};
+
+const Welcome: React.FC<WelcomeProps> = ({
+  title = 'Hi😄，快来聊聊～',
+  subtitle = '发现更多内容',
+  onQuestionPress,
+}) => {
+  const [round, setRound] = useState(0);
+  const [questions, setQuestions] = useState(() =>
+    pickRandomQuestions(OPPORTUNITY_QUESTIONS, PICK_COUNT),
+  );
+
+  const handleRefresh = useCallback(() => {
+    setQuestions((prev) => pickRandomQuestions(OPPORTUNITY_QUESTIONS, PICK_COUNT, prev));
+    setRound((prev) => prev + 1);
+  }, []);
+
+  const items = useMemo(
+    () => questions.map((question, index) => ({ question, index })),
+    [questions],
+  );
+
+  return (
+    <div className={styles.welcome}>
+      <div className={styles.greeting}>
+        <h1 className={styles.title}>{title}</h1>
+        <p className={styles.subtitle}>{subtitle}</p>
+      </div>
+
+      <section className={styles.questions} aria-label="大家都在问">
+        <div className={styles.questionsHeader}>
+          <h2 className={styles.questionsTitle}>大家都在问</h2>
+          <button type="button" className={styles.refresh} onClick={handleRefresh}>
+            换一换
+          </button>
+        </div>
+        <div key={round} className={styles.questionList}>
+          {items.map(({ question, index }) => (
+            <button
+              key={`${round}-${question}`}
+              type="button"
+              className={styles.capsule}
+              style={{ animationDelay: `${60 + index * 60}ms` }}
+              onClick={() => onQuestionPress?.(question)}
+            >
+              {question}
+            </button>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Welcome;

package/template/packages/xiaozhi-chat/hooks/useChatSession.ts

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createSession, streamChat } from '../services/chatApi';
+import type { ChatMessage, ChatSession } from '../types';
+import { DEFAULT_CHAT_VERSION } from '../types';
+import {
+  KNOWLEDGE_CHAT_TYPEWRITER_ATOMIC_CLOSED_TAGS,
+  KNOWLEDGE_CHAT_TYPEWRITER_ATOMIC_TOKENS,
+} from '../utils/deepThinking';
+import { useTypewriter } from './useTypewriter';
+
+const createId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+const EMPTY_REPLY_FALLBACK = '抱歉，我没有找到相关信息。';
+
+export const useChatSession = () => {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isSSEComplete, setIsSSEComplete] = useState(false);
+  const sessionRef = useRef<ChatSession | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const streamingContentRef = useRef('');
+  const streamingAssistantIdRef = useRef('');
+  const finalizeStartedRef = useRef(false);
+
+  const {
+    displayedContent,
+    isOutputComplete,
+    append,
+    markStreamComplete,
+    reset: resetTypewriter,
+    skip: skipTypewriter,
+  } = useTypewriter({
+    atomicTokens: [...KNOWLEDGE_CHAT_TYPEWRITER_ATOMIC_TOKENS],
+    atomicClosedTags: [...KNOWLEDGE_CHAT_TYPEWRITER_ATOMIC_CLOSED_TAGS],
+  });
+
+  const clearChat = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    sessionRef.current = null;
+    streamingContentRef.current = '';
+    streamingAssistantIdRef.current = '';
+    finalizeStartedRef.current = true;
+    setIsStreaming(false);
+    setIsSSEComplete(false);
+    resetTypewriter();
+    setMessages([]);
+  }, [resetTypewriter]);
+
+  const stop = useCallback(() => {
+    if (!abortRef.current) return;
+
+    abortRef.current.abort();
+    abortRef.current = null;
+    finalizeStartedRef.current = true;
+    setIsStreaming(false);
+    setIsSSEComplete(false);
+
+    const assistantId = streamingAssistantIdRef.current;
+    const content = streamingContentRef.current || displayedContent;
+    if (assistantId) {
+      setMessages((prev) =>
+        prev.map((msg) =>
+          msg.id === assistantId
+            ? { ...msg, content, isStopped: true }
+            : msg,
+        ),
+      );
+    }
+
+    streamingContentRef.current = '';
+    streamingAssistantIdRef.current = '';
+    skipTypewriter();
+    resetTypewriter();
+  }, [displayedContent, resetTypewriter, skipTypewriter]);
+
+  useEffect(() => {
+    const assistantId = streamingAssistantIdRef.current;
+    if (!assistantId || !isStreaming) return;
+    setMessages((prev) =>
+      prev.map((msg) =>
+        msg.id === assistantId ? { ...msg, content: displayedContent } : msg,
+      ),
+    );
+  }, [displayedContent, isStreaming]);
+
+  useEffect(() => {
+    if (!isStreaming || !isSSEComplete || !isOutputComplete || finalizeStartedRef.current) {
+      return;
+    }
+
+    finalizeStartedRef.current = true;
+    const assistantId = streamingAssistantIdRef.current;
+    const content = displayedContent || streamingContentRef.current || EMPTY_REPLY_FALLBACK;
+
+    if (assistantId) {
+      setMessages((prev) =>
+        prev.map((msg) =>
+          msg.id === assistantId ? { ...msg, content } : msg,
+        ),
+      );
+    }
+
+    streamingContentRef.current = '';
+    streamingAssistantIdRef.current = '';
+    abortRef.current = null;
+    setIsStreaming(false);
+    setIsSSEComplete(false);
+    requestAnimationFrame(() => {
+      resetTypewriter();
+    });
+  }, [displayedContent, isOutputComplete, isSSEComplete, isStreaming, resetTypewriter]);
+
+  const send = useCallback(async (rawQuery: string) => {
+    const query = rawQuery.trim();
+    if (!query || isStreaming) return;
+
+    const userMessage: ChatMessage = {
+      id: createId(),
+      role: 'user',
+      content: query,
+      timestamp: Date.now(),
+    };
+    const assistantId = createId();
+    const assistantMessage: ChatMessage = {
+      id: assistantId,
+      role: 'assistant',
+      content: '',
+      timestamp: Date.now(),
+      chatVersion: DEFAULT_CHAT_VERSION,
+    };
+
+    streamingAssistantIdRef.current = assistantId;
+    streamingContentRef.current = '';
+    finalizeStartedRef.current = false;
+    resetTypewriter();
+    setIsSSEComplete(false);
+    setMessages((prev) => [...prev, userMessage, assistantMessage]);
+    setIsStreaming(true);
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    try {
+      if (!sessionRef.current) {
+        sessionRef.current = await createSession({
+          query,
+          chatVersion: DEFAULT_CHAT_VERSION,
+          signal: controller.signal,
+        });
+      }
+
+      if (controller.signal.aborted) return;
+
+      const { chatId, contextId } = sessionRef.current;
+
+      await streamChat(
+        {
+          query,
+          chatId,
+          contextId,
+          chatVersion: DEFAULT_CHAT_VERSION,
+          signal: controller.signal,
+        },
+        {
+          onChunk: (chunk) => {
+            if (controller.signal.aborted) return;
+            streamingContentRef.current += chunk;
+            append(chunk);
+          },
+          onDone: () => {
+            if (controller.signal.aborted) return;
+            setIsSSEComplete(true);
+            markStreamComplete();
+          },
+          onSession: (session) => {
+            sessionRef.current = {
+              chatId: session.chatId || sessionRef.current?.chatId || '',
+              contextId: session.contextId || sessionRef.current?.contextId || '',
+            };
+          },
+          onError: (message) => {
+            if (controller.signal.aborted) return;
+            finalizeStartedRef.current = true;
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === assistantId
+                  ? {
+                    ...msg,
+                    content: message || '抱歉，回答时出现了错误，请稍后重试。',
+                    isReplyError: true,
+                  }
+                  : msg,
+              ),
+            );
+            setIsStreaming(false);
+            setIsSSEComplete(false);
+            streamingContentRef.current = '';
+            streamingAssistantIdRef.current = '';
+            abortRef.current = null;
+            resetTypewriter();
+          },
+        },
+      );
+    } catch (error) {
+      if (controller.signal.aborted) {
+        return;
+      }
+      const message =
+        error instanceof Error ? error.message : '抱歉，发送消息失败，请检查网络连接后重试。';
+      finalizeStartedRef.current = true;
+      setMessages((prev) =>
+        prev.map((msg) =>
+          msg.id === assistantId
+            ? { ...msg, content: message, isReplyError: true }
+            : msg,
+        ),
+      );
+      setIsStreaming(false);
+      setIsSSEComplete(false);
+      streamingContentRef.current = '';
+      streamingAssistantIdRef.current = '';
+      abortRef.current = null;
+      resetTypewriter();
+    }
+  }, [append, isStreaming, markStreamComplete, resetTypewriter]);
+
+  return {
+    messages,
+    isStreaming,
+    showWelcome: messages.length === 0,
+    send,
+    stop,
+    clearChat,
+  };
+};