@mujian/js-sdk 0.0.6-beta.9 → 0.0.6-beta.mjv.67

package/dist/react.js

@@ -1,11 +1,181 @@
-import { useMount, useRequest, useUpdateEffect } from "ahooks";
-import react, { createContext, forwardRef, useCallback, useContext, useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useInfiniteScroll, useLatest, useRequest, useUpdateEffect } from "ahooks";
+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";
+const adjustIframeHeight = (iframeId)=>`
+(function () {
+  let scheduled = false;
+  function measureAndPost() {
+    scheduled = false;
+    try {
+      const doc = window.document;
+      const body = doc.body;
+      const html = doc.documentElement;
+      if (!body || !html) {
+        return;
+      }
+      let height = 0;
+      // srcdoc 模式: 只用 body.scrollHeight
+      height = body.scrollHeight;
+      if (!Number.isFinite(height) || height <= 0) {
+        return;
+      }
+      window.parent.postMessage({ type: 'MJ_ADJUST_IFRAME_HEIGHT', iframe_id: \`${iframeId}\`, height: height }, '*');
+    } catch {
+      console.error('Error measuring iframe height');
+    }
+  }
+
+  function postIframeHeight() {
+    if (scheduled) {
+      return;
+    }
+    scheduled = true;
+    if (typeof window.requestAnimationFrame === 'function') {
+      window.requestAnimationFrame(measureAndPost);
+    } else {
+      setTimeout(measureAndPost, 500);
+    }
+  }
+
+  function observeHeightChange() {
+    const body = document.body;
+    if (!body) {
+      return;
+    }
+    const observer = new ResizeObserver(entries => {
+      postIframeHeight();
+    });
+    observer.observe(body);
+  }
+
+  function init() {
+    postIframeHeight();
+    observeHeightChange();
+  }
+
+  if (window.document.readyState === 'loading') {
+    window.document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();
+`;
+const iframeAdjustViewport = (parentHeight)=>`
+$('html').css('--MJ-viewport-height', \`${parentHeight}px\`);
+window.addEventListener('message', function (event) {
+  if (event.data?.type === 'MJ_UPDATE_VIEWPORT_HEIGHT') {
+    $('html').css('--MJ-viewport-height', \`${parentHeight}px\`);
+  }
+});
+`;
+const init = (_iframeId, unsafe, extra)=>unsafe ? '' : `
+(async function () {
+  const extra = JSON.parse(${JSON.stringify(JSON.stringify(extra))})
+  window.$mujian = window.parent.$mj_engine.bind(extra);
+})();
+`;
+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-viewport-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, iframeId, unsafe, extra) {
+    content = replaceVhInContent(content);
+    return `
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+*, *::before, *::after { box-sizing: border-box; }
+html,body{margin:0!important;padding:0;overflow:hidden!important;max-width:100%!important;}
+</style>
+${thirdParty}
+<script>
+${init(iframeId, unsafe, extra)}
+${adjustIframeHeight(iframeId)}
+${iframeAdjustViewport(window.innerHeight)}
+</script>
+</head>
+<body>
+${content}
+</body>
+</html>
+`;
+}
+const Log = {
+    i (...msg) {
+        console.log('[MujianSDK] ', ...msg);
+    },
+    e (...msg) {
+        console.error('[MujianSDK] ', ...msg);
+    }
+};
 addDOMPurifyHooks();
 function canUseNegativeLookbehind() {
     try {
@@ -95,7 +265,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>`);
 }
 /**
@@ -159,7 +329,7 @@ function addDOMPurifyHooks() {
 const markdownUnderscoreExt = ()=>{
     try {
         if (!canUseNegativeLookbehind()) {
-            console.log('Showdown-underscore extension: Negative lookbehind not supported. Skipping.');
+            Log.i('Showdown-underscore extension: Negative lookbehind not supported. Skipping.');
             return [];
         }
         return [
@@ -234,31 +404,184 @@ function messageFormatting(mes, sanitizerOverrides = {}) {
     });
     return mes;
 }
-const MdRendererBase = ({ content })=>{
-    const mes = messageFormatting(content);
+const MdRendererBase = ({ content, unsafe = false, extra = {} })=>{
+    const containerRef = useRef(null);
+    const [iframeIdList, setIframeIdList] = useState([]);
+    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 id = v4();
+            const containerId = `MJ-iframe-container-${id}`;
+            const iframeId = `MJ-iframe-${id}`;
+            const srcdoc = createSrcContent(unescapeHTML(code), iframeId, unsafe, extra);
+            setIframeIdList((prev)=>[
+                    ...prev,
+                    id
+                ]);
+            const escapedSrcdoc = escapeHtmlAttribute(srcdoc);
+            return `
+<div class="MJ-iframe-container" id="${containerId}" 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="${iframeId}" class="w-full" sandbox="${unsafe ? "allow-scripts" : "allow-scripts allow-same-origin"}" loading="lazy" 
+  referrerpolicy="no-referrer" allowTransparency="true" 
+  style="color-scheme: none;background-color: transparent;width:100%;;border:none;" srcdoc="` + escapedSrcdoc + `"></iframe>
+</div>`;
+        });
+        if (containerRef.current) containerRef.current.innerHTML = mes;
+    }, [
+        content
+    ]);
+    useEffect(()=>{
+        window.addEventListener('message', function(event) {
+            if (event.data?.type === 'MJ_ADJUST_IFRAME_HEIGHT' && event.data?.iframe_id) {
+                const targetIframe = containerRef.current?.querySelector('#' + event.data.iframe_id);
+                if (!targetIframe) return;
+                targetIframe.style.height = `${event.data.height}px`;
+            }
+        });
+        window.addEventListener('resize', ()=>{
+            iframeIdList.forEach((id)=>{
+                const iframe = containerRef.current?.querySelector('#MJ-iframe-' + id);
+                if (!iframe) return;
+                iframe.contentWindow?.postMessage({
+                    type: 'MJ_UPDATE_VIEWPORT_HEIGHT'
+                }, '*');
+            });
+        });
+    }, []);
+    useEffect(()=>{
+        iframeIdList.forEach((id)=>{
+            const iframe = containerRef.current?.querySelector('#MJ-iframe-' + id);
+            if (!iframe) return;
+            const removeSpin = ()=>{
+                const spinElement = iframe.parentElement?.querySelector('#MJ-spin-' + id);
+                if (spinElement) spinElement.remove();
+            };
+            const timeout = setTimeout(removeSpin, 5000);
+            iframe.addEventListener('load', ()=>{
+                clearTimeout(timeout);
+                removeSpin();
+            });
+        });
+        return ()=>{
+            iframeIdList.forEach((id)=>{
+                const iframe = containerRef.current?.querySelector('#MJ-iframe-' + id);
+                if (!iframe) return;
+                const spinElement = iframe.parentElement?.querySelector('#MJ-spin-' + iframe.id);
+                if (spinElement) spinElement.remove();
+                iframe.removeEventListener('load', ()=>{
+                    Log.i('iframe loaded', iframe.id);
+                });
+            });
+        };
+    }, [
+        iframeIdList
+    ]);
     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';
-const chat_complete = async function(message, onData, signal) {
-    return await this.call("mujian:ai:chat:complete", {
+var events_EVENT = /*#__PURE__*/ function(EVENT) {
+    EVENT["MUJIAN_INIT"] = "mujian:init";
+    EVENT["MUJIAN_AI_CHAT_STOP"] = "mujian:ai:chat:stop";
+    EVENT["MUJIAN_AI_CHAT_COMPLETE"] = "mujian:ai:chat:complete";
+    EVENT["MUJIAN_AI_CHAT_APPLY_REGEX"] = "mujian:ai:chat:applyRegex";
+    EVENT["MUJIAN_AI_CHAT_RENDER_MESSAGE"] = "mujian:ai:chat:renderMessage";
+    EVENT["MUJIAN_AI_TEXT_GENERATE"] = "mujian:ai:text:generate";
+    EVENT["MUJIAN_AI_OPENAI_COMPLETIONS_CREATE"] = "mujian:ai:openai:completions:create";
+    EVENT["MUJIAN_AI_OPENAI_CHAT_COMPLETIONS_CREATE"] = "mujian:ai:openai:chat:completions:create";
+    EVENT["MUJIAN_AI_OPENAI_RESPONSES_CREATE"] = "mujian:ai:openai:responses:create";
+    EVENT["MUJIAN_AI_CHAT_MESSAGE_GET_ALL"] = "mujian:ai:chat:message:getAll";
+    EVENT["MUJIAN_AI_CHAT_MESSAGE_GET_PAGE"] = "mujian:ai:chat:message:getPage";
+    EVENT["MUJIAN_AI_CHAT_PROJECT_GET_INFO"] = "mujian:ai:chat:project:getInfo";
+    EVENT["MUJIAN_AI_SETTINGS_PERSONA_GET_ACTIVE"] = "mujian:ai:settings:persona:getActive";
+    EVENT["MUJIAN_AI_SETTINGS_PERSONA_SET_ACTIVE"] = "mujian:ai:settings:persona:setActive";
+    EVENT["MUJIAN_AI_SETTINGS_MODEL_GET_ALL"] = "mujian:ai:settings:model:getAll";
+    EVENT["MUJIAN_AI_SETTINGS_MODEL_SET_ACTIVE"] = "mujian:ai:settings:model:setActive";
+    EVENT["MUJIAN_AI_SETTINGS_MODEL_GET_ACTIVE"] = "mujian:ai:settings:model:getActive";
+    EVENT["MUJIAN_AI_CHAT_MESSAGE_DELETE_ONE"] = "mujian:ai:chat:message:deleteOne";
+    EVENT["MUJIAN_AI_CHAT_MESSAGE_EDIT_ONE"] = "mujian:ai:chat:message:editOne";
+    EVENT["MUJIAN_AI_CHAT_MESSAGE_SWIPE"] = "mujian:ai:chat:message:swipe";
+    EVENT["MUJIAN_AI_CHAT_MESSAGE_GET_PROMPT"] = "mujian:ai:chat:message:getPrompt";
+    EVENT["MUJIAN_AI_OPENAI_IMAGES_GENERATE"] = "mujian:ai:openai:images:generate";
+    EVENT["MUJIAN_UTILS_CLIPBOARD_WRITE_TEXT"] = "mujian:utils:clipboard:writeText";
+    return EVENT;
+}({});
+function wrapOnData(onData) {
+    let fullContent = '';
+    let buffer = '';
+    let questionId;
+    let replyId;
+    return function(data) {
+        buffer += data;
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+        for (const line of lines)if (line.startsWith('data: ')) try {
+            const parsedData = JSON.parse(line.slice(6));
+            if (parsedData.question_id) questionId = parsedData.question_id;
+            if (parsedData.reply_id) replyId = parsedData.reply_id;
+            if (parsedData.isFinished) return void onData({
+                isFinished: true,
+                deltaContent: '',
+                fullContent,
+                questionId,
+                replyId
+            });
+            const deltaContent = parsedData?.choices?.[0]?.delta?.content;
+            if (deltaContent?.length > 0) {
+                fullContent += deltaContent;
+                onData({
+                    isFinished: false,
+                    deltaContent: deltaContent,
+                    fullContent,
+                    questionId,
+                    replyId
+                });
+            }
+        } catch (e) {
+            onData({
+                isFinished: true,
+                error: e,
+                deltaContent: '',
+                fullContent,
+                questionId,
+                replyId
+            });
+            return;
+        }
+    };
+}
+const chat_complete = async function(message, onData, signal, option = {}) {
+    await this.call(events_EVENT.MUJIAN_AI_CHAT_COMPLETE, {
         content: message
     }, {
-        onData,
+        onData: option.parseContent ? wrapOnData(onData) : onData,
         signal
     });
 };
 const applyRegex = async function(props) {
-    return await this.call("mujian:ai:chat:applyRegex", props);
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_APPLY_REGEX, props);
+};
+const renderMessage = async function(props) {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_RENDER_MESSAGE, props);
 };
 const continueComplete = async function(onData, signal) {
-    return await this.call("mujian:ai:chat:complete", {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_COMPLETE, {
         isContinue: true
     }, {
         onData,
@@ -266,7 +589,7 @@ const continueComplete = async function(onData, signal) {
     });
 };
 const chat_regenerate = async function(onData, signal) {
-    return await this.call("mujian:ai:chat:complete", {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_COMPLETE, {
         isRegenerate: true
     }, {
         onData,
@@ -274,61 +597,117 @@ const chat_regenerate = async function(onData, signal) {
     });
 };
 const getAll = async function() {
-    return await this.call("mujian:ai:chat:message:getAll");
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_MESSAGE_GET_ALL);
 };
 const messageDeleteOne = async function(messageId) {
-    return await this.call("mujian:ai:chat:message:deleteOne", {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_MESSAGE_DELETE_ONE, {
         messageId
     });
 };
 const messageEditOne = async function(messageId, content) {
-    return await this.call("mujian:ai:chat:message:editOne", {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_MESSAGE_EDIT_ONE, {
         messageId,
         content
     });
 };
 const messageSwipe = async function(messageId, swipeId) {
-    return await this.call("mujian:ai:chat:message:swipe", {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_MESSAGE_SWIPE, {
         messageId,
         swipeId
     });
 };
 const getPrompt = async function(messageId) {
-    return await this.call("mujian:ai:chat:message:getPrompt", {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_MESSAGE_GET_PROMPT, {
         messageId
     });
 };
+async function getPage(fromCursor, pageSize) {
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_MESSAGE_GET_PAGE, {
+        fromCursor,
+        pageSize
+    });
+}
 const getInfo = async function() {
-    return await this.call("mujian:ai:chat:project:getInfo");
+    return await this.call(events_EVENT.MUJIAN_AI_CHAT_PROJECT_GET_INFO);
 };
 const getActive = async function() {
-    return await this.call("mujian:ai:settings:persona:getActive");
+    return await this.call(events_EVENT.MUJIAN_AI_SETTINGS_PERSONA_GET_ACTIVE);
 };
 const setActive = async function(personaId) {
-    return await this.call("mujian:ai:settings:persona:setActive", {
+    return await this.call(events_EVENT.MUJIAN_AI_SETTINGS_PERSONA_SET_ACTIVE, {
         personaId
     });
 };
 const model_getActive = async function() {
-    return await this.call("mujian:ai:settings:model:getActive");
+    return await this.call(events_EVENT.MUJIAN_AI_SETTINGS_MODEL_GET_ACTIVE);
 };
 const model_setActive = async function(modelId) {
-    return await this.call("mujian:ai:settings:model:setActive", {
+    return await this.call(events_EVENT.MUJIAN_AI_SETTINGS_MODEL_SET_ACTIVE, {
         modelId
     });
 };
 const model_getAll = async function() {
-    return await this.call("mujian:ai:settings:model:getAll");
+    return await this.call(events_EVENT.MUJIAN_AI_SETTINGS_MODEL_GET_ALL);
 };
-const generate = async function() {
-    return await this.call("mujian:ai:text:generate", {
-        content: 'q'
+const generate = async function(content) {
+    return await this.call(MujianSdk.EVENT.MUJIAN_AI_TEXT_GENERATE, {
+        content
     });
 };
+const chat = {
+    completions: {
+        create: async function(params, options, onData, signal) {
+            return await this.call(MujianSdk.EVENT.MUJIAN_AI_OPENAI_CHAT_COMPLETIONS_CREATE, {
+                params,
+                options
+            }, {
+                onData,
+                signal
+            });
+        }
+    }
+};
+const completions = {
+    create: async function(params, options, onData, signal) {
+        return await this.call(MujianSdk.EVENT.MUJIAN_AI_OPENAI_COMPLETIONS_CREATE, {
+            params,
+            options
+        }, {
+            onData,
+            signal
+        });
+    }
+};
+const responses = {
+    create: async function(params, options, onData, signal) {
+        return await this.call(MujianSdk.EVENT.MUJIAN_AI_OPENAI_RESPONSES_CREATE, {
+            params,
+            options
+        }, {
+            onData,
+            signal
+        });
+    }
+};
+const images_images = {
+    generate: async function(params, options, onData, signal) {
+        return await this.call(MujianSdk.EVENT.MUJIAN_AI_OPENAI_IMAGES_GENERATE, {
+            params,
+            options
+        }, {
+            onData,
+            signal
+        });
+    }
+};
 const saveGame = async function() {};
 const loadGame = async function() {};
+async function writeText(text) {
+    return await this.call(events_EVENT.MUJIAN_UTILS_CLIPBOARD_WRITE_TEXT, text);
+}
 class MujianSdk {
     constructor(){}
+    static EVENT = events_EVENT;
     static getInstance() {
         if (!window.$mujian) window.$mujian = new MujianSdk();
         return window.$mujian;
@@ -361,10 +740,25 @@ class MujianSdk {
             const parent = await handshake;
             this.ready = true;
             this.parent = parent;
-            console.log('mujian sdk client init');
-            await this.call("mujian:init");
+            Log.i('mujian sdk client init');
+            await this.call(events_EVENT.MUJIAN_INIT);
+            const projectInfo = await this.ai.chat.project.getInfo();
+            if (projectInfo.config?.customCss) {
+                const style = document.createElement('style');
+                style.setAttribute('type', 'text/css');
+                style.setAttribute('id', 'mujian-custom-css');
+                style.textContent = projectInfo.config.customCss;
+                document.head.appendChild(style);
+            }
+            if (projectInfo.config?.customJs) {
+                const script = document.createElement("script");
+                script.setAttribute('type', "text/javascript");
+                script.setAttribute('id', 'mujian-custom-js');
+                script.textContent = projectInfo.config.customJs;
+                document.head.appendChild(script);
+            }
         } catch (error) {
-            console.log('init error', error);
+            Log.e('init error', error);
         }
     }
     emit(event, data) {
@@ -391,7 +785,7 @@ class MujianSdk {
                 data
             });
             controller?.signal?.addEventListener('abort', ()=>{
-                this.emit("mujian:ai:chat:stop", {
+                this.emit(events_EVENT.MUJIAN_AI_CHAT_STOP, {
                     id: callId
                 });
             });
@@ -415,6 +809,7 @@ class MujianSdk {
             },
             complete: chat_complete.bind(this),
             applyRegex: applyRegex.bind(this),
+            renderMessage: renderMessage.bind(this),
             continue: continueComplete.bind(this),
             regenerate: chat_regenerate.bind(this),
             message: {
@@ -422,17 +817,34 @@ class MujianSdk {
                 deleteOne: messageDeleteOne.bind(this),
                 editOne: messageEditOne.bind(this),
                 swipe: messageSwipe.bind(this),
-                getPrompt: getPrompt.bind(this)
+                getPrompt: getPrompt.bind(this),
+                getPage: getPage.bind(this)
             }
         },
         text: {
             complete: generate.bind(this)
+        },
+        openai: {
+            completions: {
+                create: completions.create.bind(this)
+            },
+            chat: {
+                completions: {
+                    create: chat.completions.create.bind(this)
+                }
+            },
+            responses: {
+                create: responses.create.bind(this)
+            },
+            images: {
+                generate: images_images.generate.bind(this)
+            }
         }
     };
     ui = {};
-    util = {
-        cn: ()=>{
-            console.log('cn');
+    utils = {
+        clipboard: {
+            writeText: writeText.bind(this)
         }
     };
     hybrid = {};
@@ -450,6 +862,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);
@@ -462,7 +911,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 = ()=>{
@@ -480,7 +942,7 @@ const MessageItem = (props)=>{
     const { data: renderedMessage } = useRequest(async ()=>{
         const { isStreaming } = message;
         if (isStreaming) return message;
-        return await mujian.ai.chat.applyRegex({
+        return await mujian.ai.chat.renderMessage({
             message,
             depth,
             index
@@ -530,13 +992,6 @@ class UnexpectedSseEndingError extends Error {
         this.cause = cause;
     }
 }
-class InsufficientBalanceError extends Error {
-    constructor(message, cause){
-        super(message);
-        this.name = this.constructor.name;
-        this.cause = cause;
-    }
-}
 async function* callSdk(mujian, content, type = 'generate', signal) {
     const queue = [];
     let resolveWait = null;
@@ -545,6 +1000,7 @@ async function* callSdk(mujian, content, type = 'generate', signal) {
     try {
         const onData = (data)=>{
             if (error) return;
+            if ('string' != typeof data) return;
             queue.push(data);
             if (resolveWait) {
                 resolveWait();
@@ -580,6 +1036,8 @@ async function* callSdk(mujian, content, type = 'generate', signal) {
     });
 }
 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);
@@ -594,16 +1052,22 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                 swipes: [],
                 activeSwipeId: 0,
                 isStreaming: false,
-                sendAt: new Date()
+                sendAt: new Date(),
+                swipeInfo: []
             };
             const aiMessage = {
                 id: `${NOT_SAVED_MSG_ID_PREFIX}_assistant_${Date.now()}`,
                 content: '',
                 role: 'assistant',
-                swipes: [],
+                swipes: [
+                    ''
+                ],
                 activeSwipeId: 0,
                 isStreaming: true,
-                sendAt: new Date()
+                sendAt: new Date(),
+                swipeInfo: [
+                    {}
+                ]
             };
             if (regenerate) setMessages((prev)=>{
                 const newMessages = [
@@ -642,7 +1106,56 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                         const data = line.slice(6);
                         try {
                             const parsedData = JSON.parse(data);
-                            if (!regenerate && parsedData.question_id) {
+                            if (regenerate || 'meta' !== parsedData.type) {
+                                if ('stream' === parsedData.type) {
+                                    const partialContent = parsedData.choices[0].delta.content;
+                                    parsedData.choices[0].delta.reasoning;
+                                    content += partialContent;
+                                    if (content || '' === content) {
+                                        setMessages((prev)=>{
+                                            const newMessages = [
+                                                ...prev
+                                            ];
+                                            const lastMessage = newMessages[newMessages.length - 1];
+                                            lastMessage.swipes[lastMessage.activeSwipeId] = content;
+                                            newMessages[newMessages.length - 1] = {
+                                                ...lastMessage,
+                                                content: content,
+                                                isStreaming: true
+                                            };
+                                            return newMessages;
+                                        });
+                                        await new Promise((resolve)=>setTimeout(resolve, 10));
+                                    } else {
+                                        console.error('data', data);
+                                        setError(new InvalidDeltaContentError(data));
+                                    }
+                                } else if ('mjv' === parsedData.type) {
+                                    const { value, delta, schema } = parsedData;
+                                    setMessages((prev)=>{
+                                        const newMessages = [
+                                            ...prev
+                                        ];
+                                        const lastMessage = newMessages[newMessages.length - 1];
+                                        const mjv = {
+                                            value,
+                                            delta,
+                                            schema
+                                        };
+                                        const newSwipeInfo = lastMessage.swipeInfo;
+                                        if (newSwipeInfo[lastMessage.activeSwipeId]) newSwipeInfo[lastMessage.activeSwipeId].mjv = mjv;
+                                        else newSwipeInfo[lastMessage.activeSwipeId] = {
+                                            mjv
+                                        };
+                                        newMessages[newMessages.length - 1] = {
+                                            ...lastMessage,
+                                            swipeInfo: newSwipeInfo,
+                                            mjv
+                                        };
+                                        return newMessages;
+                                    });
+                                }
+                            } else {
                                 const { question_id, reply_id } = parsedData;
                                 setMessages((prev)=>{
                                     const newMessages = [
@@ -658,29 +1171,6 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                                 });
                                 continue;
                             }
-                            if (!parsedData.choices?.[0]) continue;
-                            const partialContent = parsedData.choices[0].delta.content;
-                            parsedData.choices[0].delta.reasoning;
-                            content += partialContent;
-                            if (content || '' === content) {
-                                setMessages((prev)=>{
-                                    const newMessages = [
-                                        ...prev
-                                    ];
-                                    const lastMessage = newMessages[newMessages.length - 1];
-                                    lastMessage.swipes[lastMessage.activeSwipeId] = content;
-                                    newMessages[newMessages.length - 1] = {
-                                        ...lastMessage,
-                                        content: content,
-                                        isStreaming: true
-                                    };
-                                    return newMessages;
-                                });
-                                await new Promise((resolve)=>setTimeout(resolve, 10));
-                            } else {
-                                console.error('data', data);
-                                setError(new InvalidDeltaContentError(data));
-                            }
                         } catch  {
                             if ('[DONE]' !== data) {
                                 console.error('Received plain SSE message:', data);
@@ -689,22 +1179,30 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
                         }
                     }
                 }
+            } catch (error) {
+                Log.e('Stream error', error);
+                'object' == typeof error && error && 'message' in error && 'string' == typeof error.message ? setError(new SendMessageError(error.message)) : setError(error);
             } finally{
-                console.log('stream end finally');
+                Log.i('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;
                 });
             }
         } catch (error) {
             console.error('Error:', error);
-            error instanceof Error && JSON.parse(error.message || '{}')?.code === 111 ? setError(new InsufficientBalanceError()) : setError(new SendMessageError('Send message failed', error));
+            setError(new SendMessageError('Send message failed', error));
             setMessages((prev)=>prev.slice(0, -1));
         } finally{
             setIsStreaming(false);
@@ -718,9 +1216,8 @@ const useChatStreaming = ({ common, setError, setMessages, mujian })=>{
         isStreaming
     };
 };
-const useChat = ({ body, onError, onFinish })=>{
+const useChat = ({ body, onError, onFinish, pageSize })=>{
     const [error, _setError] = useState();
-    const [messages, setMessages] = useState([]);
     const [input, setInput] = useState('');
     const [abortController, setAbortController] = useState();
     const mujian = useMujian();
@@ -728,6 +1225,51 @@ const useChat = ({ body, onError, onFinish })=>{
         _setError(error);
         if (error) onError?.(error);
     };
+    const isLoadingMore = useRef(false);
+    const { data, loadMoreAsync, loadingMore, loading, mutate, error: messageLoadError } = useInfiniteScroll(async (current)=>{
+        isLoadingMore.current = true;
+        if (current?.noMore) return {
+            noMore: true,
+            list: []
+        };
+        try {
+            const resp = await mujian.ai.chat.message.getPage(current?.cursor, pageSize);
+            return {
+                cursor: resp.nextCursor,
+                list: resp.messages.map((m)=>({
+                        ...m,
+                        mjv: m.swipeInfo[m.activeSwipeId]?.mjv
+                    })),
+                noMore: !resp.nextCursor
+            };
+        } finally{
+            isLoadingMore.current = false;
+        }
+    }, {
+        direction: 'top'
+    });
+    const loadMoreMessage = async ()=>{
+        if (isLoadingMore.current) return;
+        try {
+            isLoadingMore.current = true;
+            await loadMoreAsync();
+        } finally{
+            isLoadingMore.current = false;
+        }
+    };
+    const messages = data?.list ?? [];
+    const latestData = useLatest(data);
+    const latestListRef = useRef(messages);
+    latestListRef.current = messages;
+    const setMessages = (messages)=>{
+        let newList;
+        newList = 'function' == typeof messages ? messages(latestListRef.current) : messages;
+        latestListRef.current = newList;
+        mutate({
+            ...latestData.current,
+            list: newList
+        });
+    };
     const { chatStreaming, isStreaming } = useChatStreaming({
         common: {
             body
@@ -736,10 +1278,6 @@ const useChat = ({ body, onError, onFinish })=>{
         setMessages,
         mujian
     });
-    useMount(async ()=>{
-        const resp = await mujian.ai.chat.message.getAll();
-        setMessages(resp);
-    });
     useUpdateEffect(()=>{
         if (!isStreaming) {
             const lastMessage = messages[messages.length - 1];
@@ -748,48 +1286,79 @@ 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();
     };
     const setSwipe = async (messageId, swipeId)=>{
-        await mujian.ai.chat.message.swipe(messageId, swipeId);
-        setMessages((prev)=>prev.map((msg)=>msg.id === messageId ? {
+        if (swipeId < 0) return;
+        setMessages((prev)=>prev.map((msg)=>msg.id === messageId && swipeId < msg.swipes.length ? {
                     ...msg,
-                    activeSwipeId: swipeId
+                    activeSwipeId: swipeId,
+                    content: msg.swipes[swipeId],
+                    mjv: msg.swipeInfo[swipeId].mjv
                 } : msg));
+        await mujian.ai.chat.message.swipe(messageId, swipeId);
     };
     const editMessage = async (messageId, content)=>{
         await mujian.ai.chat.message.editOne(messageId, content);
@@ -809,7 +1378,11 @@ const useChat = ({ body, onError, onFinish })=>{
         setMessages((prev)=>prev.map((msg)=>msg.id === messageId ? patchMessage(msg) : msg));
     };
     const deleteMessage = async (messageId)=>{
-        if (!messageId.startsWith(NOT_SAVED_MSG_ID_PREFIX)) 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 {
@@ -832,7 +1405,9 @@ const useChat = ({ body, onError, onFinish })=>{
         },
         setSwipe,
         editMessage,
-        deleteMessage
+        deleteMessage,
+        loadMoreMessage,
+        messagesStatus: messageLoadError ? 'error' : loadingMore || loading ? 'loading' : data?.noMore ? 'all-loaded' : 'has-more'
     };
 };
-export { MdRenderer, MujianProvider, Thread, useChat, useMujian };
+export { MdRenderer, MujianProvider, MujianSpinner, Thread, useChat, useMujian };