@talknote/create-talknote-h5 0.1.4 → 0.1.5

package/template/docker/nginx/nginx.conf

@@ -0,0 +1,54 @@
+user  nginx;
+worker_processes 1;
+
+error_log  /var/log/nginx/error.log notice;
+pid /tmp/nginx.pid;
+
+# load_module modules/ngx_http_headers_more_filter_module.so;
+
+worker_rlimit_nofile 65535;
+events {
+    worker_connections 2048;
+}
+
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format main '$remote_addr [$time_local] "$request" '
+                    '$status $body_bytes_sent $request_time "$http_referer" '
+                    '"$http_user_agent" $http_x_forwarded_for';
+
+    access_log /var/log/nginx/access.log  main;
+    error_log  /var/log/nginx/error.log notice;
+
+    server_tokens off;
+    # 完全隐藏 Server 响应头(server_tokens 只能隐藏版本号，不能隐藏响应头)
+    # more_clear_headers Server;
+
+    client_max_body_size 1G;
+
+    client_header_timeout 60s;
+    client_body_timeout 60s;
+    send_timeout 60s;
+    keepalive_timeout 65s;
+
+    sendfile    on;
+    tcp_nopush  on;
+    tcp_nodelay on;
+
+    limit_conn_zone $binary_remote_addr zone=perip:10m;
+    limit_conn perip 1000;
+    limit_rate 0;
+
+    gzip              on;
+    gzip_min_length   1k;
+    gzip_comp_level   2;
+    gzip_http_version 1.0;
+    gzip_types        text/plain text/css text/xml application/javascript application/json application/xml image/svg+xml;
+    gzip_proxied      any;
+    gzip_vary         on;
+
+    include /etc/nginx/conf.d/*.conf;
+}

package/template/docker/nginx/webApp.conf

@@ -0,0 +1,13 @@
+server {
+    listen       8080;
+    server_name  _;
+    root         /srv/http;
+
+    # Require cache revalidation by default
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache";
+    }
+
+    include /etc/nginx/includes/error_page.conf;
+}

package/template/docker/webApp.Dockerfile

@@ -0,0 +1,12 @@
+FROM hub-nj.iwhalecloud.com/lingxi/nginx:1
+
+# 与 Tomcat 镜像保持一致
+EXPOSE 8080
+
+COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY docker/nginx/error_page.conf /etc/nginx/includes/error_page.conf
+COPY docker/nginx/webApp.conf /etc/nginx/conf.d/default.conf
+
+COPY --chown=nginx:nginx dist /srv/http
+
+USER 101

package/template/package.json

@@ -15,12 +15,16 @@
     "test": "jest"
   },
   "dependencies": {
-    "@talknote/h5-bridge":"^0.0.5",
+    "@talknote/h5-bridge": "^0.0.5",
+    "@talknote/xiaozhi-chat": "file:packages/xiaozhi-chat",
     "@alita/flow": "^3.1.1",
     "alita": "^3.2.27",
     "antd-mobile": "^5.15.1",
+    "lucide-react": "^1.38.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.7",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "patch-package": "^8.0.0",

package/template/packages/xiaozhi-chat/README.md

@@ -0,0 +1,53 @@
+# @talknote/xiaozhi-chat
+
+Ask AI H5 简易问答子包，位于模板工程 `packages/xiaozhi-chat`，供主工程引入使用。
+
+## 能力
+
+- 自绘顶栏（`vibe-element="header"`）
+- 三段布局：头固定 / 中滚动 / 底固定；键盘弹出通过 `visualViewport` 只压缩中间区
+- 欢迎文案、消息列表、键盘 + 按住说话（`window.vibeNoteBridge`）
+- 快捷菜单插槽 `shortcutSlot`
+- 欢迎页首次提问先创建会话 `/nes/bote/chat/createBoteSession`，再按 chatVersion 2（专家）SSE 流式回复（可停止）`/nes/bote/chat/execute`
+- 专家模式：按分割线/标题拆分思考过程，解析 `<toolCall>` / `<toolCallResult>`，Markdown 打字机输出
+
+## 主工程引入
+
+`package.json`：
+
+```json
+{
+  "dependencies": {
+    "@talknote/xiaozhi-chat": "file:packages/xiaozhi-chat"
+  }
+}
+```
+
+`config/config.ts` alias（保证 less / 图片可编译）：
+
+```ts
+alias: {
+  '@talknote/xiaozhi-chat': path.join(__dirname, '../packages/xiaozhi-chat'),
+}
+```
+
+页面薄壳 `src/pages/xiaozhi-chat/index.tsx`：
+
+```tsx
+import { XiaozhiChatPage } from '@talknote/xiaozhi-chat';
+
+export default () => (
+  <div style={{ height: '100%', overflow: 'hidden' }}>
+    <XiaozhiChatPage />
+  </div>
+);
+```
+
+然后执行 `yarn` 链接本地子包。
+
+## Peer 依赖
+
+- `react` / `react-dom`
+- `antd-mobile`（Toast）
+
+录音与返回走 `window.vibeNoteBridge`，不依赖 `@talknote/h5-bridge`。

package/template/packages/xiaozhi-chat/XiaozhiChatPage.less

@@ -0,0 +1,50 @@
+.page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.pageViewportFallback {
+  height: var(--xiaozhi-vh, 100%);
+  max-height: var(--xiaozhi-vh, 100%);
+}
+
+.bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.headerWrap {
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+}
+
+.body {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.footer {
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  background: transparent;
+}

package/template/packages/xiaozhi-chat/XiaozhiChatPage.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import bgImage from './assets/images/bg.jpg';
+import ChatHeader from './components/ChatHeader';
+import ChatInput from './components/ChatInput';
+import MessageList from './components/MessageList';
+import Welcome from './components/Welcome';
+import { useChatSession } from './hooks/useChatSession';
+import { useViewportHeight } from './hooks/useViewportHeight';
+import type { XiaozhiChatPageProps } from './types';
+import { hideVibeNoteKeyboard, setKeyboardAvoidMode, vibeNoteCanIUse } from './utils/bridge';
+import styles from './XiaozhiChatPage.less';
+
+const lockPageToWebViewFrame = () => {
+  const nodes = [document.documentElement, document.body, document.getElementById('root')].filter(
+    (el): el is HTMLElement => Boolean(el),
+  );
+  const prev = nodes.map(el => ({
+    el,
+    height: el.style.height,
+    minHeight: el.style.minHeight,
+    maxHeight: el.style.maxHeight,
+    overflow: el.style.overflow,
+  }));
+  nodes.forEach(el => {
+    el.style.setProperty('height', '100%', 'important');
+    el.style.setProperty('min-height', '0', 'important');
+    el.style.setProperty('max-height', '100%', 'important');
+    el.style.setProperty('overflow', 'hidden', 'important');
+  });
+  const vk = (navigator as Navigator & { virtualKeyboard?: { overlaysContent: boolean } }).virtualKeyboard;
+  if (vk) {
+    vk.overlaysContent = true;
+  }
+  return () => {
+    document.documentElement.style.transform = '';
+    if (vk) {
+      vk.overlaysContent = false;
+    }
+    prev.forEach(({ el, height, minHeight, maxHeight, overflow }) => {
+      if (height) {
+        el.style.height = height;
+      } else {
+        el.style.removeProperty('height');
+      }
+      if (minHeight) {
+        el.style.minHeight = minHeight;
+      } else {
+        el.style.removeProperty('min-height');
+      }
+      if (maxHeight) {
+        el.style.maxHeight = maxHeight;
+      } else {
+        el.style.removeProperty('max-height');
+      }
+      if (overflow) {
+        el.style.overflow = overflow;
+      } else {
+        el.style.removeProperty('overflow');
+      }
+    });
+  };
+};
+
+const XiaozhiChatPage: React.FC<XiaozhiChatPageProps> = ({
+  shortcutSlot,
+  welcomeTitle,
+  welcomeSubtitle,
+  placeholder,
+  title = '问小智',
+  onBack,
+}) => {
+  const [useViewportFallback, setUseViewportFallback] = useState(false);
+  useViewportHeight('--xiaozhi-vh', { enabled: useViewportFallback });
+  const { messages, isStreaming, showWelcome, send, stop, clearChat } = useChatSession();
+  const [inputText, setInputText] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+    const unlock = lockPageToWebViewFrame();
+    const apply = async () => {
+      try {
+        const ok = await setKeyboardAvoidMode('resize');
+        if (!cancelled && !ok) {
+          setUseViewportFallback(true);
+        }
+      } catch {
+        if (!cancelled) {
+          setUseViewportFallback(true);
+        }
+      }
+    };
+    void apply();
+    const timer = window.setTimeout(() => {
+      if (!cancelled && !vibeNoteCanIUse('setKeyboardAvoidMode')) {
+        setUseViewportFallback(true);
+      }
+    }, 800);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+      void setKeyboardAvoidMode('adjust');
+      unlock();
+    };
+  }, []);
+
+  const handleSend = useCallback(
+    (text: string) => {
+      setInputText('');
+      void send(text);
+    },
+    [send],
+  );
+
+  const handleVoiceResult = useCallback(
+    (text: string) => {
+      setInputText('');
+      void send(text);
+    },
+    [send],
+  );
+
+  const handleNewChat = useCallback(() => {
+    setInputText('');
+    clearChat();
+  }, [clearChat]);
+
+  return (
+    <div
+      className={`${styles.page} ${useViewportFallback ? styles.pageViewportFallback : ''}`}
+      vibe-element="safe-area-view"
+      vibe-edges="top"
+    >
+      <img src={bgImage} alt="" className={styles.bg} />
+
+      <div className={styles.headerWrap}>
+        <ChatHeader
+          title={title}
+          showNewChat={!showWelcome}
+          onNewChat={handleNewChat}
+          onBack={onBack}
+        />
+      </div>
+
+      <div className={styles.body} onPointerDown={hideVibeNoteKeyboard}>
+        {showWelcome ? (
+          <Welcome
+            title={welcomeTitle}
+            subtitle={welcomeSubtitle}
+            onQuestionPress={handleSend}
+          />
+        ) : (
+          <MessageList messages={messages} isStreaming={isStreaming} />
+        )}
+      </div>
+
+      <div className={styles.footer}>
+        <ChatInput
+          value={inputText}
+          onChange={setInputText}
+          onSend={handleSend}
+          onStop={stop}
+          isStreaming={isStreaming}
+          placeholder={placeholder}
+          shortcutSlot={shortcutSlot}
+          onVoiceResult={handleVoiceResult}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default XiaozhiChatPage;

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

@@ -0,0 +1,3 @@
+.root {
+  width: 100%;
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { parseAssistantContentSegments } from '../../utils/parseAssistantContent';
+import MarkdownContent from '../MarkdownContent';
+import ToolCallList from '../ToolCallList';
+import styles from './index.less';
+
+type AssistantRichContentProps = {
+  content: string;
+  variant?: 'answer' | 'thinking';
+  showCursor?: boolean;
+};
+
+const AssistantRichContent: React.FC<AssistantRichContentProps> = ({
+  content,
+  variant = 'answer',
+  showCursor = false,
+}) => {
+  const segments = parseAssistantContentSegments(content || '');
+  if (!segments.length && !showCursor) return null;
+
+  return (
+    <div className={styles.root}>
+      {segments.map((segment, index) => {
+        const isLast = index === segments.length - 1;
+        if (segment.type === 'toolCalls') {
+          return <ToolCallList key={`tool-${index}`} groups={segment.groups} />;
+        }
+        return (
+          <MarkdownContent
+            key={`md-${index}`}
+            content={segment.content}
+            variant={variant}
+            showCursor={showCursor && isLast}
+          />
+        );
+      })}
+      {showCursor && (segments.length === 0 || segments[segments.length - 1]?.type === 'toolCalls') ? (
+        <MarkdownContent content="" showCursor />
+      ) : null}
+    </div>
+  );
+};
+
+export default AssistantRichContent;

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

@@ -0,0 +1,84 @@
+/* 使用 Px 避免 alita px→rem 把 RN 字号压小；数值对齐原生 dp */
+/* App 内 vibe-element=header 注入 fixed + 安全区；标题绝对居中，右侧按钮距右边 100 避让胶囊 */
+.header {
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 44Px;
+  padding-left: 12Px;
+  padding-right: 12Px;
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.backBtn {
+  position: relative;
+  z-index: 2;
+  width: 36Px;
+  height: 36Px;
+  border: none;
+  border-radius: 18Px;
+  background: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.backIcon {
+  width: 20Px;
+  height: 20Px;
+  object-fit: contain;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  height: 44Px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 40%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  font-size: 17Px;
+  font-weight: 600;
+  line-height: 22Px;
+  color: #2a2b33;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.right {
+  position: absolute;
+  right: 100Px;
+  bottom: 0;
+  height: 44Px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.newChatBtn {
+  height: 36Px;
+  padding: 0 16Px;
+  border: none;
+  border-radius: 99Px;
+  background: rgba(255, 255, 255, 0.5);
+  font-size: 14Px;
+  font-weight: 500;
+  line-height: 20Px;
+  color: #414352;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { getVibeNoteBridge } from '../../utils/bridge';
+import iconClose from '../../assets/images/icon-close.png';
+import styles from './index.less';
+
+type ChatHeaderProps = {
+  title?: string;
+
+  /** 无消息时可不显示「新对话」 */
+  showNewChat?: boolean;
+  onNewChat?: () => void;
+  onBack?: () => void;
+};
+
+const defaultBack = () => {
+  if (window.history.length > 1) {
+    window.history.back();
+    return;
+  }
+  void getVibeNoteBridge()?.goBack?.();
+};
+
+const ChatHeader: React.FC<ChatHeaderProps> = ({
+  title = '问小智',
+  showNewChat = false,
+  onNewChat,
+  onBack = defaultBack,
+}) => (
+  <header vibe-element="header" className={styles.header}>
+    <button type="button" className={styles.backBtn} onClick={onBack} aria-label="返回">
+      <img src={iconClose} alt="" className={styles.backIcon} />
+    </button>
+    <div className={styles.title}>{title}</div>
+    {/* <div className={styles.right}>
+      {showNewChat && onNewChat ? (
+        <button type="button" className={styles.newChatBtn} onClick={onNewChat}>
+          新对话
+        </button>
+      ) : null}
+    </div> */}
+  </header>
+);
+
+export default ChatHeader;

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

@@ -0,0 +1,59 @@
+.wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 48Px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 10Px);
+  transform: translateX(-50%);
+  white-space: nowrap;
+  padding: 6Px 10Px;
+  border-radius: 8Px;
+  font-size: 12Px;
+  line-height: 16Px;
+  color: #ffffff;
+  background: rgba(42, 43, 51, 0.85);
+  pointer-events: none;
+  z-index: 2;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.tipCancel {
+  background: #ff615c;
+}
+
+.button {
+  width: 100%;
+  min-height: 48Px;
+  border: none;
+  border-radius: 8Px;
+  background: #ffffff;
+  color: #2a2b33;
+  font-size: 15Px;
+  font-weight: 700;
+  line-height: 22Px;
+  text-align: center;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  font-family: 'PingFang SC', 'Noto Sans CJK SC', system-ui, -apple-system, sans-serif;
+}
+
+.button:disabled {
+  opacity: 0.5;
+}
+
+.buttonActive {
+  color: #fe780f;
+}
+
+.buttonCancel {
+  color: #ff615c;
+}