@mujian/js-sdk 0.0.6-beta.3 → 0.0.6-beta.31

package/dist/index.js

@@ -113,9 +113,14 @@ class MujianSdk {
     pendingRequests = new Map();
     async init() {
         const handshake = new postmate.Model({
-            reply: ({ id, complete, data })=>{
+            reply: ({ id, complete, data, error })=>{
                 const call = this.pendingRequests.get(id);
                 if (!call) return;
+                if (error) {
+                    call.reject(error);
+                    this.pendingRequests.delete(id);
+                    return;
+                }
                 call.onData?.(data);
                 if (complete) {
                     call.onComplete?.();

package/dist/react/chat/useChat/index.d.ts

@@ -10,7 +10,7 @@ export type { Message };
  */
 export type UseChatProps = {
     body?: object;
-    onError?: (e: Error) => void;
+    onError?: (e: unknown) => void;
     onFinish?: (message: Message) => void;
 };
 /**
@@ -24,7 +24,7 @@ export type UseChatProps = {
 export type UseChatReturn = {
     messages: Message[];
     status: 'uninitialized' | 'ready' | 'streaming' | 'error';
-    error?: Error;
+    error?: unknown;
     /** 提交用户输入，让AI回答 */
     append: (query: string) => Promise<void>;
     /** 重新生成最后一条回答 */

package/dist/react/chat/useChat/inner/chatStreaming.d.ts

@@ -8,6 +8,7 @@ interface ChatStreamingProps {
     setMessages: Dispatch<SetStateAction<Message[]>>;
     mujian: MujianSdk;
 }
+export declare const NOT_SAVED_MSG_ID_PREFIX = "not_saved";
 export declare const useChatStreaming: ({ common, setError, setMessages, mujian, }: ChatStreamingProps) => {
     chatStreaming: ({ query, regenerate, is_continue, signal, }: {
         /** 用户输入 */

package/dist/react/components/MdRenderer/index.d.ts

@@ -1,6 +1,5 @@
-/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: <explanation> */
-import React from 'react';
-import './MdTheme.css';
+import React from "react";
+import "./MdTheme.css";
 export type MdRendererProps = {
     /**
      * The markdown content to render

package/dist/react/components/MdRenderer/utils/height.d.ts

@@ -0,0 +1,5 @@
+export declare function adjustIframeHeight(iframe: HTMLIFrameElement): void;
+export declare function useHeightObserver(): {
+    observe: (iframe: HTMLIFrameElement) => void;
+    unobserve: (iframe: HTMLIFrameElement) => void;
+};

package/dist/react/components/MdRenderer/utils/iframe.d.ts

@@ -0,0 +1,9 @@
+export declare const unescapeHTML: (str: string) => string;
+export declare const replaceVhInContent: (content: string) => string;
+/**
+ * 转义 HTML 属性值中的引号，防止破坏 HTML 属性
+ * @param value 需要转义的属性值
+ * @returns 转义后的值
+ */
+export declare function escapeHtmlAttribute(value: string): string;
+export declare function createSrcContent(content: string): string;

package/dist/react/components/MdRenderer/utils/scripts.d.ts

@@ -0,0 +1,3 @@
+export declare const iframeDOMLoaded = "\n(function () {\n  function emit_loaded_event() {\n    window.parent.postMessage({ type: 'MJ_DOM_CONTENT_LOADED', iframeId: '123' }, '*');\n  }\n\n  if (window.document.readyState === 'loading') {\n    window.document.addEventListener('DOMContentLoaded', emit_loaded_event, { once: true });\n  } else {\n    emit_loaded_event();\n  }\n})();\n";
+export declare const init = "\n(async function () {\n  window.$mj_engine = window.parent.$mj_engine;\n})();\n";
+export declare const thirdParty = "\n<script src=\"https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free/js/all.min.js\"></script>\n<script src=\"https://cdn.jsdmirror.com/npm/@tailwindcss/browser/dist/index.global.min.js\"></script>\n<script src=\"https://cdn.jsdmirror.com/npm/jquery/dist/jquery.min.js\"></script>\n<script src=\"https://cdn.jsdmirror.com/npm/jquery-ui/dist/jquery-ui.min.js\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.jsdmirror.com/npm/jquery-ui/themes/base/theme.min.css\" />\n<script src=\"https://cdn.jsdmirror.com/npm/jquery-ui-touch-punch\"></script>\n";

package/dist/react/components/MujianSpinner/index.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+interface Props {
+    className?: string;
+    style: CSSProperties;
+}
+export declare const MujianSpinner: ({ className, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/components/index.d.ts

@@ -1,4 +1,5 @@
 export type { VListHandle } from 'virtua';
 export { MdRenderer } from './MdRenderer';
 export { MujianProvider, useMujian } from './MujianProvider';
+export { MujianSpinner } from './MujianSpinner';
 export { Thread } from './Thread';

package/dist/react.css

@@ -42,7 +42,7 @@
   --SmartThemeBodyColor: #abc6df;
   --SmartThemeEmColor: #fff;
   --SmartThemeUnderlineColor: #bce7cf;
-  --SmartThemeQuoteColor: #6f85fd;
+  --SmartThemeQuoteColor: #b983ff;
   --SmartThemeBlurTintColor: #171717;
   --SmartThemeChatTintColor: #171717;
   --SmartThemeUserMesBlurTintColor: #0000004d;
@@ -89,76 +89,72 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-html {
-  -webkit-backface-visibility: hidden;
-  -webkit-perspective: 1000px;
-  -webkit-transform: translateZ(0);
+.spin-overlay {
+  background-color: #000;
+  animation: 3s ease-in-out infinite breath;
 }
 
-body {
-  background-color: var(--SmartThemeBlurTintColor);
-  width: 100%;
-  height: 100dvh;
-  font-family: var(--mainFontFamily);
-  font-size: var(--mainFontSize);
-  color: var(--SmartThemeBodyColor);
-  color-scheme: light only;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: fixed;
-  margin: 0;
-  padding: 0;
+@keyframes breath {
+  0% {
+    background-color: #0009;
+  }
+
+  50% {
+    background-color: #00000080;
+  }
+
+  100% {
+    background-color: #0009;
+  }
 }
 
-::-webkit-scrollbar {
-  scrollbar-gutter: stable;
-  width: .7rem;
+.wave-text span {
+  font-family: var(--mainFontFamily);
+  animation: 2s ease-in-out infinite wave;
+  display: inline-block;
 }
 
-::-webkit-scrollbar-track {
-  cursor: default;
+.wave-text span:first-child {
+  animation-delay: 0s;
 }
 
-::-webkit-scrollbar-track:hover {
-  background-color: #7e7e7e33;
+.wave-text span:nth-child(2) {
+  animation-delay: .2s;
 }
 
-::-webkit-scrollbar-thumb {
-  cursor: grab;
+.wave-text span:nth-child(3) {
+  animation-delay: .4s;
 }
 
-::-webkit-scrollbar-thumb:active {
-  cursor: grabbing;
+.wave-text span:nth-child(4) {
+  animation-delay: .6s;
 }
 
-.scrollY {
-  overflow-y: auto !important;
+.wave-text span:nth-child(5) {
+  animation-delay: .8s;
 }
 
-::-webkit-scrollbar-thumb:vertical {
-  background-color: var(--grey7070a);
-  box-shadow: inset 0 0 0 1px var(--black50a);
-  background-clip: content-box;
-  border: 2px solid #0000;
-  border-radius: 10px;
-  min-height: 40px;
+.wave-text span:nth-child(6) {
+  animation-delay: 1s;
 }
 
-body.movingUI ::-webkit-scrollbar-thumb:vertical {
-  border-top: 20px solid #0000;
+.wave-text span:nth-child(7) {
+  animation-delay: 1.2s;
 }
 
-::-webkit-scrollbar-thumb:horizontal {
-  background-color: var(--grey7070a);
-  box-shadow: inset 0 0 0 1px var(--black50a);
-  background-clip: content-box;
-  border: 2px solid #0000;
-  border-radius: 10px;
-  min-width: 40px;
+@keyframes wave {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
 }
 
-::-webkit-scrollbar-corner {
-  background-color: #0000;
+body {
+  font-size: var(--mainFontSize);
+  color: var(--SmartThemeBodyColor);
 }
 
 .mes_text table, .mes_reasoning table {
@@ -218,19 +214,11 @@ body.movingUI ::-webkit-scrollbar-thumb:vertical {
 }
 
 .mes_text, .mes_reasoning {
-  font-weight: 500;
   line-height: calc(var(--mainFontSize)  + .5rem);
   overflow-wrap: anywhere;
   max-width: 100%;
 }
 
-.mes_text {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 0;
-  padding-right: var(--mes-right-spacing);
-}
-
 .mes_text p:only-child, .mes_text p:only-of-type {
   margin-bottom: 0;
 }
@@ -239,7 +227,7 @@ body.movingUI ::-webkit-scrollbar-thumb:vertical {
   unicode-bidi: isolate;
   margin-block: 1em;
   margin-inline: 0;
-  padding-inline-start: 40px;
+  padding-inline-start: 24px;
   list-style-type: decimal;
   display: block;
 }
@@ -336,11 +324,9 @@ body.movingUI ::-webkit-scrollbar-thumb:vertical {
 code {
   font-family: var(--monoFontFamily);
   white-space: pre-wrap;
-  border: 1px solid var(--SmartThemeBorderColor);
-  background-color: var(--black70a);
   line-height: var(--mainFontSize);
   color: var(--white70a);
-  border-radius: 5px;
+  border: 1px solid #fff;
   padding: 0 3px;
 }
 

package/dist/react.js

@@ -1,9 +1,10 @@
 import { useMount, useRequest, useUpdateEffect } from "ahooks";
-import react, { createContext, forwardRef, useCallback, useContext, useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import react, { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import css_tools from "@adobe/css-tools";
 import dompurify from "dompurify";
 import showdown from "showdown";
+import { v4 } from "uuid";
 import postmate from "postmate";
 import { Virtualizer } from "virtua";
 addDOMPurifyHooks();
@@ -95,7 +96,7 @@ function addDOMPurifyHooks() {
  * @returns {string} Encoded message text
  * @copyright https://github.com/kwaroran/risuAI
  */ function encodeStyleTags(text) {
-    const styleRegex = /<style>(.+?)<\/style>/gi;
+    const styleRegex = /<style>([\s\S]+?)<\/style>/gi;
     return text.replaceAll(styleRegex, (_, match)=>`<custom-style>${encodeURIComponent(match)}</custom-style>`);
 }
 /**
@@ -234,18 +235,203 @@ function messageFormatting(mes, sanitizerOverrides = {}) {
     });
     return mes;
 }
+const init = `
+(async function () {
+  window.$mj_engine = window.parent.$mj_engine;
+})();
+`;
+const thirdParty = `
+<script src="https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free/js/all.min.js"></script>
+<script src="https://cdn.jsdmirror.com/npm/@tailwindcss/browser/dist/index.global.min.js"></script>
+<script src="https://cdn.jsdmirror.com/npm/jquery/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdmirror.com/npm/jquery-ui/dist/jquery-ui.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/jquery-ui/themes/base/theme.min.css" />
+<script src="https://cdn.jsdmirror.com/npm/jquery-ui-touch-punch"></script>
+`;
+const unescapeHTML = (str)=>{
+    const named = {
+        amp: "&",
+        lt: "<",
+        gt: ">",
+        quot: '"',
+        apos: "'",
+        nbsp: "\u00A0"
+    };
+    return str.replace(/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/g, (_m, body)=>{
+        if ("#" === body[0]) {
+            const isHex = body[1]?.toLowerCase() === "x";
+            const numStr = isHex ? body.slice(2) : body.slice(1);
+            const codePoint = parseInt(numStr, isHex ? 16 : 10);
+            if (Number.isFinite(codePoint)) try {
+                return String.fromCodePoint(codePoint);
+            } catch  {}
+            return _m;
+        }
+        const lower = body.toLowerCase();
+        return Object.hasOwn(named, lower) ? named[lower] : _m;
+    });
+};
+const replaceVhInContent = (content)=>{
+    const has_css_min_vh = /min-height\s*:\s*[^;{}]*\d+(?:\.\d+)?vh/gi.test(content);
+    const has_inline_style_vh = /style\s*=\s*(["'])[\s\S]*?min-height\s*:\s*[^;]*?\d+(?:\.\d+)?vh[\s\S]*?\1/gi.test(content);
+    const has_js_vh = /(\.style\.minHeight\s*=\s*(["']))([\s\S]*?vh)(\2)/gi.test(content) || /(setProperty\s*\(\s*(["'])min-height\2\s*,\s*(["']))([\s\S]*?vh)(\3\s*\))/gi.test(content);
+    if (!has_css_min_vh && !has_inline_style_vh && !has_js_vh) return content;
+    const convertVhToVariable = (value)=>value.replace(/(\d+(?:\.\d+)?)vh\b/gi, (match, value)=>{
+            const parsed = parseFloat(value);
+            if (!isFinite(parsed)) return match;
+            const VARIABLE_EXPRESSION = "var(--MJ-iframe-height)";
+            if (100 === parsed) return VARIABLE_EXPRESSION;
+            return `calc(${VARIABLE_EXPRESSION} * ${parsed / 100})`;
+        });
+    content = content.replace(/(min-height\s*:\s*)([^;{}]*?\d+(?:\.\d+)?vh)(?=\s*[;}])/gi, (_m, prefix, value)=>`${prefix}${convertVhToVariable(value)}`);
+    content = content.replace(/(style\s*=\s*(["']))([^"'"]*?)(\2)/gi, (match, prefix, _quote, styleContent, suffix)=>{
+        if (!/min-height\s*:\s*[^;]*vh/i.test(styleContent)) return match;
+        const replaced = styleContent.replace(/(min-height\s*:\s*)([^;]*?\d+(?:\.\d+)?vh)/gi, (_m, p1, p2)=>`${p1}${convertVhToVariable(p2)}`);
+        return `${prefix}${replaced}${suffix}`;
+    });
+    content = content.replace(/(\.style\.minHeight\s*=\s*(["']))([\s\S]*?)(\2)/gi, (match, prefix, _q, val, suffix)=>{
+        if (!/\b\d+(?:\.\d+)?vh\b/i.test(val)) return match;
+        const converted = convertVhToVariable(val);
+        return `${prefix}${converted}${suffix}`;
+    });
+    content = content.replace(/(setProperty\s*\(\s*(["'])min-height\2\s*,\s*(["']))([\s\S]*?)(\3\s*\))/gi, (match, prefix, _q1, _q2, val, suffix)=>{
+        if (!/\b\d+(?:\.\d+)?vh\b/i.test(val)) return match;
+        const converted = convertVhToVariable(val);
+        return `${prefix}${converted}${suffix}`;
+    });
+    return content;
+};
+function escapeHtmlAttribute(value) {
+    return value.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function createSrcContent(content) {
+    content = replaceVhInContent(content);
+    const getUserAvatarPath = ()=>"https://www.mujian.com/avatar.png";
+    const getCharAvatarPath = ()=>"https://www.mujian.com/avatar.png";
+    return `
+<html>
+<head>
+<style>
+
+html,body{margin:0;padding:0;overflow:hidden!important;max-width:100%!important;box-sizing:border-box}
+.user_avatar,.user-avatar{background-image:url('${getUserAvatarPath()}')}
+.char_avatar,.char-avatar{background-image:url('${getCharAvatarPath()}')}
+
+</style>
+${thirdParty}
+<script>
+${init}
+</script>
+</head>
+<body>
+${content}
+</body>
+</html>
+  `;
+}
+function adjustIframeHeight(iframe) {
+    if (!iframe.contentWindow) return;
+    const document1 = iframe.contentWindow.document;
+    const height = Math.max(document1.body.offsetHeight, document1.documentElement.offsetHeight);
+    if (!Number.isFinite(height) || height <= 0) return;
+    iframe.style.height = `${height}px`;
+}
+const observed_elements = new Map();
+const observer = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const element = entry.target;
+        const iframe = observed_elements.get(element);
+        if (iframe) adjustIframeHeight(iframe);
+    }
+});
+function useHeightObserver() {
+    return {
+        observe: (iframe)=>{
+            if (!iframe?.contentWindow?.document?.body) return;
+            const body = iframe.contentWindow.document.body;
+            observed_elements.set(body, iframe);
+            observer.observe(body);
+            adjustIframeHeight(iframe);
+        },
+        unobserve: (iframe)=>{
+            if (!iframe.contentWindow?.document?.body) return;
+            const body = iframe.contentWindow.document.body;
+            observed_elements.delete(body);
+            observer.unobserve(body);
+        }
+    };
+}
 const MdRendererBase = ({ content })=>{
-    const mes = messageFormatting(content);
+    const containerRef = useRef(null);
+    const [iframeIdList, setIframeIdList] = useState([]);
+    const { observe, unobserve } = useHeightObserver();
+    useEffect(()=>{
+        let mes = messageFormatting(content);
+        mes = mes.replace(/<pre><code(.*)>[\s\S]*?<\/code><\/pre>/g, (match)=>{
+            if (!match.includes("&lt;body&gt;") && !match.includes("&lt;/body&gt;")) return match;
+            const code = match.replace(/<pre><code(.*?)>/g, "").replace(/<\/code><\/pre>/g, "");
+            const srcdoc = createSrcContent(unescapeHTML(code));
+            const id = v4();
+            setIframeIdList((prev)=>[
+                    ...prev,
+                    id
+                ]);
+            const escapedSrcdoc = escapeHtmlAttribute(srcdoc);
+            return `
+<div class="MJ-iframe-container" id="MJ-iframe-container-${id}" style="display:flex;width:100%;height:100%;position:relative;">
+  <div class="spin-overlay" id="MJ-spin-${id}" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000;background-color:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;">
+    <div class="spin-inner wave-text" style="font-weight:500;font-size:16px;color:white;display:flex;justify-content:center;align-items:center;">
+        <span>加</span>
+        <span>载</span>
+        <span>中</span>
+        <span>.</span>
+        <span>.</span>
+        <span>.</span>
+    </div>
+  </div>
+  <iframe id="MJ-iframe-${id}" sandbox="allow-scripts allow-same-origin" loading="lazy" referrerpolicy="no-referrer" allowTransparency="true" style="color-scheme: none;background-color: transparent;width:100%;height:100%;border:none;" srcdoc="` + escapedSrcdoc + `"></iframe>
+</div>
+      `;
+        });
+        if (containerRef.current) containerRef.current.innerHTML = mes;
+    }, [
+        content
+    ]);
+    useEffect(()=>{
+        iframeIdList.forEach((id)=>{
+            const iframe = document.getElementById("MJ-iframe-" + id);
+            if (!iframe) return;
+            iframe.addEventListener("load", ()=>{
+                observe(iframe);
+                const spinElement = iframe.parentElement?.querySelector("#MJ-spin-" + id);
+                if (spinElement) spinElement.remove();
+            });
+        });
+        return ()=>{
+            iframeIdList.forEach((id)=>{
+                const iframe = document.getElementById("MJ-iframe-" + id);
+                if (!iframe) return;
+                unobserve(iframe);
+                const spinElement = iframe.parentElement?.querySelector("#MJ-spin-" + iframe.id);
+                if (spinElement) spinElement.remove();
+                iframe.removeEventListener("load", ()=>{
+                    console.log("iframe loaded", iframe.id);
+                });
+            });
+        };
+    }, [
+        iframeIdList,
+        observe,
+        unobserve
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: "mes_text",
-        dangerouslySetInnerHTML: {
-            __html: mes
-        }
+        ref: containerRef
     });
 };
 const MdRenderer = /*#__PURE__*/ react.memo(MdRendererBase, (prev, next)=>prev.content === next.content);
-MdRendererBase.displayName = 'MdRenderer';
-MdRenderer.displayName = 'MdRenderer';
+MdRendererBase.displayName = "MdRenderer";
+MdRenderer.displayName = "MdRenderer";
 const chat_complete = async function(message, onData, signal) {
     return await this.call("mujian:ai:chat:complete", {
         content: message
@@ -341,9 +527,14 @@ class MujianSdk {
     pendingRequests = new Map();
     async init() {
         const handshake = new postmate.Model({
-            reply: ({ id, complete, data })=>{
+            reply: ({ id, complete, data, error })=>{
                 const call = this.pendingRequests.get(id);
                 if (!call) return;
+                if (error) {
+                    call.reject(error);
+                    this.pendingRequests.delete(id);
+                    return;
+                }
                 call.onData?.(data);
                 if (complete) {
                     call.onComplete?.();
@@ -445,6 +636,43 @@ class MujianSdk {
         }
     };
 }
+const styleSheet = `
+@keyframes spin {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+`;
+const spinnerStyle = {
+    width: 48,
+    height: 48,
+    animation: 'spin 1s linear infinite'
+};
+const MujianSpinner = ({ className, style })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("style", {
+                children: styleSheet
+            }),
+            /*#__PURE__*/ jsx("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: className,
+                style: {
+                    ...spinnerStyle,
+                    ...style
+                },
+                children: /*#__PURE__*/ jsx("path", {
+                    d: "M21 12a9 9 0 1 1-6.219-8.56"
+                })
+            })
+        ]
+    });
 const MujianContext = /*#__PURE__*/ createContext(null);
 const MujianProvider = ({ children, loadingComponent })=>{
     const [mujian, setMujian] = useState(null);
@@ -457,7 +685,20 @@ const MujianProvider = ({ children, loadingComponent })=>{
     }, []);
     return /*#__PURE__*/ jsx(MujianContext.Provider, {
         value: mujian,
-        children: mujian ? children : loadingComponent ?? 'Mujian is loading'
+        children: mujian ? children : loadingComponent ?? /*#__PURE__*/ jsx("div", {
+            style: {
+                height: '100%',
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            children: /*#__PURE__*/ jsx(MujianSpinner, {
+                style: {
+                    color: '#EC4342'
+                }
+            })
+        })
     });
 };
 const useMujian = ()=>{
@@ -574,6 +815,9 @@ async function* callSdk(mujian, content, type = 'generate', signal) {
         resolveWait = resolve;
     });
 }
+const NOT_SAVED_MSG_ID_PREFIX = 'not_saved';
+const FALLBACK_MESSAGE = `<!-- 此条HTML消息为系统提示，请勿复读 -->
+哎呀，AI线路好像抽风了，重说一下试试吧~`;
 const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
     const { body } = common;
     const [isStreaming, setIsStreaming] = useState(false);
@@ -582,7 +826,7 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
             setError(void 0);
             setIsStreaming(true);
             const userMessage = {
-                id: Date.now().toString(),
+                id: `${NOT_SAVED_MSG_ID_PREFIX}_user_${Date.now()}`,
                 content: query || '',
                 role: 'user',
                 swipes: [],
@@ -591,10 +835,12 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                 sendAt: new Date()
             };
             const aiMessage = {
-                id: Date.now().toString() + '1',
+                id: `${NOT_SAVED_MSG_ID_PREFIX}_assistant_${Date.now()}`,
                 content: '',
                 role: 'assistant',
-                swipes: [],
+                swipes: [
+                    ''
+                ],
                 activeSwipeId: 0,
                 isStreaming: true,
                 sendAt: new Date()
@@ -636,7 +882,7 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                         const data = line.slice(6);
                         try {
                             const parsedData = JSON.parse(data);
-                            if (!regenerate && parsedData.question_id) {
+                            if (!regenerate && parsedData.reply_id) {
                                 const { question_id, reply_id } = parsedData;
                                 setMessages((prev)=>{
                                     const newMessages = [
@@ -683,16 +929,24 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                         }
                     }
                 }
+            } catch (error) {
+                console.log('Stream error', error);
+                setError(error instanceof Error ? error : new SendMessageError(String(error)));
             } finally{
                 console.log('stream end finally');
                 setMessages((prev)=>{
                     const newMessages = [
                         ...prev
                     ];
-                    newMessages[newMessages.length - 1] = {
+                    const lastMessage = {
                         ...newMessages[newMessages.length - 1],
                         isStreaming: false
                     };
+                    if (!lastMessage.swipes[lastMessage.activeSwipeId]) {
+                        lastMessage.swipes[lastMessage.activeSwipeId] = FALLBACK_MESSAGE;
+                        lastMessage.content = FALLBACK_MESSAGE;
+                    }
+                    newMessages[newMessages.length - 1] = lastMessage;
                     return newMessages;
                 });
             }
@@ -742,39 +996,67 @@ const useChat = ({ body, onError, onFinish })=>{
     }, [
         isStreaming
     ]);
-    const append = async (query)=>{
+    const append = useCallback(async (query)=>{
         if (isStreaming) throw new Error('useChat is streaming already.');
         const controller = new AbortController();
         setAbortController(controller);
-        await chatStreaming({
-            query,
-            signal: controller.signal
-        });
-        setAbortController(void 0);
-    };
-    const regenerate = async ()=>{
+        try {
+            await chatStreaming({
+                query,
+                signal: controller.signal
+            });
+        } catch (e) {
+            setError(e);
+            throw e;
+        } finally{
+            setAbortController(void 0);
+        }
+    }, [
+        isStreaming,
+        chatStreaming
+    ]);
+    const regenerate = useCallback(async ()=>{
         if (isStreaming) throw new Error('useChat is streaming already.');
         const controller = new AbortController();
         setAbortController(controller);
         const lastMessage = messages.findLast((message)=>'user' === message.role);
-        await chatStreaming({
-            query: lastMessage?.content || '',
-            regenerate: true,
-            signal: controller.signal
-        });
-        setAbortController(void 0);
-    };
-    const continueGenerate = async ()=>{
+        try {
+            await chatStreaming({
+                query: lastMessage?.content || '',
+                regenerate: true,
+                signal: controller.signal
+            });
+        } catch (e) {
+            setError(e);
+            throw e;
+        } finally{
+            setAbortController(void 0);
+        }
+    }, [
+        isStreaming,
+        messages,
+        chatStreaming
+    ]);
+    const continueGenerate = useCallback(async ()=>{
         if (isStreaming) throw new Error('useChat is streaming already.');
         const controller = new AbortController();
         setAbortController(controller);
-        await chatStreaming({
-            query: '',
-            is_continue: true,
-            signal: controller.signal
-        });
-        setAbortController(void 0);
-    };
+        try {
+            await chatStreaming({
+                query: '',
+                is_continue: true,
+                signal: controller.signal
+            });
+        } catch (e) {
+            setError(e);
+            throw e;
+        } finally{
+            setAbortController(void 0);
+        }
+    }, [
+        isStreaming,
+        chatStreaming
+    ]);
     const stop = ()=>{
         abortController?.abort();
     };
@@ -803,7 +1085,11 @@ const useChat = ({ body, onError, onFinish })=>{
         setMessages((prev)=>prev.map((msg)=>msg.id === messageId ? patchMessage(msg) : msg));
     };
     const deleteMessage = async (messageId)=>{
-        await mujian.ai.chat.message.deleteOne(messageId);
+        if (!messageId.startsWith(NOT_SAVED_MSG_ID_PREFIX)) try {
+            await mujian.ai.chat.message.deleteOne(messageId);
+        } catch (e) {
+            if (e?.code !== 2011030004) throw e;
+        }
         setMessages((prev)=>prev.filter((msg)=>msg.id !== messageId));
     };
     return {
@@ -829,4 +1115,4 @@ const useChat = ({ body, onError, onFinish })=>{
         deleteMessage
     };
 };
-export { MdRenderer, MujianProvider, Thread, useChat, useMujian };
+export { MdRenderer, MujianProvider, MujianSpinner, Thread, useChat, useMujian };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mujian/js-sdk",
-  "version": "0.0.6-beta.3",
+  "version": "0.0.6-beta.31",
   "type": "module",
   "exports": {
     ".": {
@@ -76,6 +76,7 @@
   },
   "dependencies": {
     "dompurify": "^3.2.6",
+    "uuid": "^13.0.0",
     "@adobe/css-tools": "^4.4.4",
     "showdown": "^2.1.0",
     "postmate": "^1.5.2",