@talknote/create-talknote-h5 0.1.4 → 0.1.5

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

@@ -0,0 +1,209 @@
+.root {
+  width: 100%;
+  color: #414352;
+  font-size: 14Px;
+  font-weight: 400;
+  line-height: 24Px;
+  word-break: break-word;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+
+  :global {
+    p {
+      margin: 0 0 8Px;
+      font-size: 14Px;
+      line-height: 24Px;
+      color: inherit;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 10Px 0 6Px;
+      color: inherit;
+      font-weight: 600;
+      line-height: 1.4;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h1 {
+      font-size: 16Px;
+      font-weight: 700;
+    }
+
+    h2 {
+      font-size: 15Px;
+      font-weight: 700;
+    }
+
+    h3 {
+      font-size: 14Px;
+    }
+
+    h4,
+    h5,
+    h6 {
+      font-size: 13Px;
+    }
+
+    ul,
+    ol {
+      margin: 6Px 0;
+      padding-left: 20Px;
+    }
+
+    li {
+      margin: 2Px 0;
+      line-height: 24Px;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    a {
+      color: #fe780f;
+      text-decoration: none;
+    }
+
+    hr {
+      margin: 8Px 0;
+      border: 0;
+      border-top: 0.5Px solid #ebebf0;
+    }
+
+    blockquote {
+      margin: 8Px 0;
+      padding: 4Px 0 4Px 10Px;
+      border-left: 3Px solid rgba(254, 120, 15, 0.4);
+      color: #9092a3;
+    }
+
+    code {
+      padding: 1Px 4Px;
+      border-radius: 4Px;
+      background: rgba(42, 43, 51, 0.06);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 12Px;
+    }
+
+    pre {
+      margin: 8Px 0;
+      padding: 10Px 12Px;
+      overflow-x: auto;
+      border-radius: 8Px;
+      background: #f6f6f8;
+
+      code {
+        padding: 0;
+        background: transparent;
+        font-size: 12Px;
+        line-height: 20Px;
+      }
+    }
+
+    table {
+      width: 100%;
+      margin: 8Px 0;
+      border-collapse: separate;
+      border-spacing: 0;
+      overflow: hidden;
+      border: 1Px solid rgba(254, 120, 15, 0.22);
+      border-radius: 8Px;
+      background: #ffffff;
+    }
+
+    thead {
+      background: rgba(249, 115, 22, 0.1);
+    }
+
+    th,
+    td {
+      padding: 6Px 8Px;
+      border-right: 1Px solid rgba(254, 120, 15, 0.22);
+      border-bottom: 1Px solid rgba(254, 120, 15, 0.22);
+      font-size: 12Px;
+      line-height: 18Px;
+      text-align: left;
+    }
+
+    th:last-child,
+    td:last-child {
+      border-right: 0;
+    }
+
+    tr:last-child th,
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    th {
+      font-weight: 500;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.thinking {
+  color: #9092a3;
+  font-size: 13Px;
+  line-height: 20Px;
+
+  :global {
+    p,
+    li,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong,
+    em,
+    code,
+    th,
+    td,
+    blockquote {
+      color: #9092a3;
+    }
+
+    p,
+    li {
+      font-size: 13Px;
+      line-height: 20Px;
+    }
+  }
+}
+
+.cursor {
+  display: inline-block;
+  width: 2Px;
+  height: 1em;
+  margin-left: 2Px;
+  vertical-align: text-bottom;
+  background: #fe780f;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import styles from './index.less';
+
+type MarkdownContentProps = {
+  content: string;
+  variant?: 'answer' | 'thinking';
+  showCursor?: boolean;
+};
+
+const MarkdownContent: React.FC<MarkdownContentProps> = ({
+  content,
+  variant = 'answer',
+  showCursor = false,
+}) => {
+  if (!content && !showCursor) return null;
+
+  return (
+    <div className={`${styles.root} ${variant === 'thinking' ? styles.thinking : ''}`}>
+      {content ? (
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          skipHtml
+          components={{
+            a: ({ href, children }) => (
+              <a href={href} target="_blank" rel="noreferrer noopener">
+                {children}
+              </a>
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      ) : null}
+      {showCursor ? <span className={styles.cursor} /> : null}
+    </div>
+  );
+};
+
+export default MarkdownContent;

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

@@ -0,0 +1,74 @@
+.list {
+  padding: 12Px 16Px 8Px;
+}
+
+.bottomAnchor {
+  height: 12Px;
+}
+
+.row {
+  display: flex;
+  margin-bottom: 12Px;
+}
+
+.rowUser {
+  justify-content: flex-end;
+  padding-left: 48Px;
+}
+
+.rowAssistant {
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.bubbleUser {
+  max-width: 100%;
+  padding: 8Px 12Px;
+  border-radius: 12Px 4Px 12Px 12Px;
+  background: #fe780f;
+  color: #ffffff;
+  font-size: 15Px;
+  font-weight: 500;
+  line-height: 22Px;
+  word-break: break-word;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.bubbleAssistant {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12Px;
+  border-radius: 4Px 12Px 12Px 12Px;
+  background: #fefbf9;
+  color: #2a2b33;
+  font-size: 15Px;
+  font-weight: 400;
+  line-height: 22Px;
+  word-break: break-word;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.content {
+  white-space: pre-wrap;
+}
+
+.hint {
+  margin-top: 6Px;
+  font-size: 13Px;
+  line-height: 18Px;
+  color: #9092a3;
+}
+
+.hintError {
+  margin-top: 6Px;
+  font-size: 12Px;
+  line-height: 16Px;
+  color: #ff3b30;
+}
+
+.expertTip {
+  margin-top: 6Px;
+  font-size: 12Px;
+  line-height: 16Px;
+  color: #9092a3;
+}

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

@@ -0,0 +1,195 @@
+/* eslint-disable react/no-multi-comp */
+/* eslint-disable no-nested-ternary */
+import React, { useEffect, useRef } from 'react';
+import type { ChatMessage } from '../../types';
+import { DEFAULT_CHAT_VERSION } from '../../types';
+import { getVibeNoteBridge, vibeNoteCanIUse } from '../../utils/bridge';
+import { resolveMessageContent } from '../../utils/deepThinking';
+import AssistantRichContent from '../AssistantRichContent';
+import DeepThinkingWrapper from '../DeepThinkingWrapper';
+import ThinkingCompleteEntry from '../ThinkingCompleteEntry';
+import TypingIndicator from '../TypingIndicator';
+import styles from './index.less';
+
+type MessageListProps = {
+  messages: ChatMessage[];
+  isStreaming?: boolean;
+};
+
+const AssistantMessage: React.FC<{
+  message: ChatMessage;
+  isStreamingMessage: boolean;
+}> = ({ message, isStreamingMessage }) => {
+  const isReplyError = Boolean(message.isReplyError);
+  const isStopped = Boolean(message.isStopped);
+  const chatVersion = message.chatVersion || DEFAULT_CHAT_VERSION;
+  const {
+    isDeepThinking,
+    isFinishDeepThink,
+    thinkingContent,
+    answerContent,
+  } = resolveMessageContent(
+    message.content || '',
+    isStreamingMessage,
+    isReplyError,
+    chatVersion,
+  );
+
+  const showCursor = isStreamingMessage && !isDeepThinking && !isStopped && Boolean(answerContent);
+
+  return (
+    <div className={styles.bubbleAssistant}>
+      {isDeepThinking && !isStopped && !isReplyError ? (
+        <DeepThinkingWrapper>
+          <AssistantRichContent content={thinkingContent} variant="thinking" />
+        </DeepThinkingWrapper>
+      ) : null}
+
+      {isFinishDeepThink && thinkingContent ? (
+        <ThinkingCompleteEntry thinkingContent={thinkingContent} />
+      ) : null}
+
+      {!isDeepThinking && !answerContent && !isReplyError && !isStopped ? (
+        <TypingIndicator />
+      ) : null}
+
+      {answerContent || showCursor ? (
+        isReplyError ? (
+          <div className={styles.content}>{answerContent}</div>
+        ) : (
+          <AssistantRichContent content={answerContent} showCursor={showCursor} />
+        )
+      ) : null}
+
+      {isStopped ? <div className={styles.hint}>已停止生成</div> : null}
+      {isReplyError ? <div className={styles.hintError}>回答异常</div> : null}
+      {/* {chatVersion === '2' && !isStreamingMessage && !isReplyError ? (
+        <div className={styles.expertTip}>本次使用专家作答</div>
+      ) : null} */}
+    </div>
+  );
+};
+
+const MessageList: React.FC<MessageListProps> = ({ messages, isStreaming }) => {
+  const listRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const snapTimerRef = useRef(0);
+
+  const getScroller = () => listRef.current?.parentElement ?? null;
+
+  const snapToBottom = () => {
+    const scroller = getScroller();
+    if (!scroller) {
+      bottomRef.current?.scrollIntoView({ behavior: 'auto', block: 'end' });
+      return;
+    }
+    scroller.scrollTop = scroller.scrollHeight;
+  };
+
+  const scrollToBottom = (smooth = false) => {
+    window.clearTimeout(snapTimerRef.current);
+    const scroller = getScroller();
+    if (!scroller) {
+      bottomRef.current?.scrollIntoView({ behavior: smooth ? 'smooth' : 'auto', block: 'end' });
+      return;
+    }
+    const top = scroller.scrollHeight;
+    if (smooth) {
+      scroller.scrollTo({ top, behavior: 'smooth' });
+      snapTimerRef.current = window.setTimeout(snapToBottom, 420);
+      return;
+    }
+    scroller.scrollTop = top;
+  };
+
+  useEffect(() => {
+    scrollToBottom(true);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages, isStreaming]);
+
+  useEffect(() => {
+    let settleTimer = 0;
+
+    const scrollAfterKeyboard = (delay: number) => {
+      window.clearTimeout(settleTimer);
+      const run = () => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => scrollToBottom(true));
+        });
+      };
+      if (delay <= 0) {
+        run();
+        return;
+      }
+      settleTimer = window.setTimeout(run, delay);
+    };
+
+    if (vibeNoteCanIUse('event:keyboardShow')) {
+      const offKeyboard = getVibeNoteBridge()?.addListener?.('keyboardShow', (event) => {
+        const { duration = 0 } = (event?.data as { duration?: number } | undefined) || {};
+        scrollAfterKeyboard(Number(duration) || 0);
+      });
+      return () => {
+        window.clearTimeout(settleTimer);
+        window.clearTimeout(snapTimerRef.current);
+        offKeyboard?.();
+      };
+    }
+
+    let lastHeight = window.visualViewport?.height ?? window.innerHeight;
+    const onViewportChange = () => {
+      const next = window.visualViewport?.height ?? window.innerHeight;
+      if (next < lastHeight - 24) {
+        scrollAfterKeyboard(320);
+      }
+      lastHeight = next;
+    };
+    const onFocusIn = ({ target }: FocusEvent) => {
+      if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement) {
+        scrollAfterKeyboard(320);
+      }
+    };
+    window.visualViewport?.addEventListener('resize', onViewportChange);
+    window.addEventListener('resize', onViewportChange);
+    document.addEventListener('focusin', onFocusIn);
+    return () => {
+      window.clearTimeout(settleTimer);
+      window.clearTimeout(snapTimerRef.current);
+      window.visualViewport?.removeEventListener('resize', onViewportChange);
+      window.removeEventListener('resize', onViewportChange);
+      document.removeEventListener('focusin', onFocusIn);
+    };
+  }, []);
+
+  return (
+    <div ref={listRef} className={styles.list}>
+      {messages.map((msg, index) => {
+        const isUser = msg.role === 'user';
+        const isStreamingMessage =
+          !isUser &&
+          Boolean(isStreaming) &&
+          index === messages.length - 1 &&
+          !msg.isStopped &&
+          !msg.isReplyError;
+
+        return (
+          <div
+            key={msg.id}
+            className={`${styles.row} ${isUser ? styles.rowUser : styles.rowAssistant}`}
+          >
+            {isUser ? (
+              <div className={styles.bubbleUser}>
+                <div className={styles.content}>{msg.content}</div>
+              </div>
+            ) : (
+              <AssistantMessage message={msg} isStreamingMessage={isStreamingMessage} />
+            )}
+          </div>
+        );
+      })}
+      <div ref={bottomRef} className={styles.bottomAnchor} />
+    </div>
+  );
+};
+
+export default MessageList;

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

@@ -0,0 +1,56 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8Px;
+  width: 100%;
+  padding: 0 0 12Px;
+  margin-bottom: 4Px;
+  border-bottom: 0.5Px solid #ebebeb;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.icon {
+  width: 20Px;
+  height: 20Px;
+  flex-shrink: 0;
+}
+
+.titleText {
+  margin-left: 8Px;
+  font-size: 14Px;
+  line-height: 20Px;
+  font-weight: 600;
+  background: linear-gradient(90deg, #2a2b33 0%, #fe780f 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.arrow {
+  width: 16Px;
+  height: 16Px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.arrowExpanded {
+  transform: rotate(180deg);
+}
+
+.content {
+  width: 100%;
+}

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

@@ -0,0 +1,65 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react';
+import AssistantRichContent from '../AssistantRichContent';
+import styles from './index.less';
+
+type ThinkingCompleteEntryProps = {
+  thinkingContent: string;
+};
+
+const DeepThinkIcon: React.FC = () => {
+  const gradId = `xiaozhi-think-done-${React.useId().replace(/:/g, '')}`;
+  return (
+    <svg className={styles.icon} 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 ThinkingCompleteEntry: React.FC<ThinkingCompleteEntryProps> = ({ thinkingContent }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className={styles.root}>
+      <button
+        type="button"
+        className={styles.titleRow}
+        onClick={() => setExpanded((prev) => !prev)}
+      >
+        <DeepThinkIcon />
+        <span className={styles.titleText}>已完成深度思考</span>
+        <span className={styles.spacer} />
+        <svg
+          className={`${styles.arrow} ${expanded ? styles.arrowExpanded : ''}`}
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden
+        >
+          <path
+            d="M4 6.5 8 10.5 12 6.5"
+            stroke="#FE780F"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+      {expanded ? (
+        <div className={styles.content}>
+          <AssistantRichContent content={thinkingContent} variant="thinking" />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default ThinkingCompleteEntry;

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

@@ -0,0 +1,41 @@
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8Px;
+  margin: 4Px 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4Px;
+  max-width: 100%;
+  padding: 4Px 8Px;
+  border: 0.5Px solid #ebebeb;
+  border-radius: 8Px;
+  background: #ffffff;
+  color: #5c5e6e;
+}
+
+.chipPending {
+  opacity: 0.5;
+}
+
+.icon {
+  width: 13Px;
+  height: 13Px;
+  flex-shrink: 0;
+  color: #9092a3;
+}
+
+.label {
+  overflow: hidden;
+  font-size: 13Px;
+  line-height: 20Px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.errorCount {
+  color: #ff3b30;
+}