@mujian/js-sdk 0.0.6-beta.17 → 0.0.6-beta.19

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

@@ -6,4 +6,4 @@ export declare const replaceVhInContent: (content: string) => string;
  * @returns 转义后的值
  */
 export declare function escapeHtmlAttribute(value: string): string;
-export declare function createSrcContent(content: string, use_blob_url?: boolean): string;
+export declare function createSrcContent(content: string): string;

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

@@ -0,0 +1,4 @@
+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 iframeAdjustViewport: string;
+export declare const init = "\n(async function () {\n\nwindow.$mujian2 = window.parent.$mujian;\nconst result = await $mujian2?.ai.chat.project.getInfo();\nconsole.log('result', result);\n\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.css

@@ -89,6 +89,69 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.spin-overlay {
+  background-color: #000;
+  animation: 3s ease-in-out infinite breath;
+}
+
+@keyframes breath {
+  0% {
+    background-color: #0009;
+  }
+
+  50% {
+    background-color: #00000080;
+  }
+
+  100% {
+    background-color: #0009;
+  }
+}
+
+.wave-text span {
+  font-family: var(--mainFontFamily);
+  animation: 2s ease-in-out infinite wave;
+  display: inline-block;
+}
+
+.wave-text span:first-child {
+  animation-delay: 0s;
+}
+
+.wave-text span:nth-child(2) {
+  animation-delay: .2s;
+}
+
+.wave-text span:nth-child(3) {
+  animation-delay: .4s;
+}
+
+.wave-text span:nth-child(4) {
+  animation-delay: .6s;
+}
+
+.wave-text span:nth-child(5) {
+  animation-delay: .8s;
+}
+
+.wave-text span:nth-child(6) {
+  animation-delay: 1s;
+}
+
+.wave-text span:nth-child(7) {
+  animation-delay: 1.2s;
+}
+
+@keyframes wave {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
 body {
   font-size: var(--mainFontSize);
   color: var(--SmartThemeBodyColor);

package/dist/react.js

@@ -235,6 +235,24 @@ function messageFormatting(mes, sanitizerOverrides = {}) {
     });
     return mes;
 }
+window.parent.innerHeight, window.parent.innerHeight;
+const init = `
+(async function () {
+
+window.$mujian2 = window.parent.$mujian;
+const result = await $mujian2?.ai.chat.project.getInfo();
+console.log('result', result);
+
+})();
+`;
+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: "&",
@@ -291,27 +309,24 @@ const replaceVhInContent = (content)=>{
 function escapeHtmlAttribute(value) {
     return value.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function createSrcContent(content, use_blob_url = false) {
+function createSrcContent(content) {
     content = replaceVhInContent(content);
     const getUserAvatarPath = ()=>"https://www.mujian.com/avatar.png";
     const getCharAvatarPath = ()=>"https://www.mujian.com/avatar.png";
-    const third_party = "";
-    const predefine_url = "";
-    const emit_loaded_event_url = "";
-    const adjust_viewport_url = "";
     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>
-${third_party}
-${use_blob_url ? `<base href="${window.location.origin}"/>` : ""}
-<script src="${predefine_url}"></script>
-<script src="${emit_loaded_event_url}"></script>
-<script src="${adjust_viewport_url}"></script>
+${thirdParty}
+<script>
+${init}
+</script>
 </head>
 <body>
 ${content}
@@ -325,9 +340,6 @@ function adjustIframeHeight(iframe) {
     const height = Math.max(document1.body.offsetHeight, document1.documentElement.offsetHeight);
     if (!Number.isFinite(height) || height <= 0) return;
     iframe.style.height = `${height}px`;
-    iframe.contentWindow.postMessage({
-        type: "MJ_UPDATE_VIEWPORT_HEIGHT"
-    }, "*");
 }
 const observed_elements = new Map();
 const observer = new ResizeObserver((entries)=>{
@@ -356,27 +368,34 @@ function useHeightObserver() {
 }
 const MdRendererBase = ({ content })=>{
     const containerRef = useRef(null);
-    useRef([]);
     const [iframeIdList, setIframeIdList] = useState([]);
     const { observe, unobserve } = useHeightObserver();
     useEffect(()=>{
         let mes = messageFormatting(content);
-        mes = mes.replace(/<code(.*)>[\s\S]*?<\/code>/g, (match)=>{
-            const code = match.replace("<code>", "").replace("</code>", "");
+        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>", "").replace("</code></pre>", "");
             const srcdoc = createSrcContent(unescapeHTML(code));
             const id = v4();
-            setIframeIdList([
-                ...iframeIdList,
-                id
-            ]);
+            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.3);display:flex;justify-content:center;align-items:center;">
-          <div class="spin-inner" style="font-weight:500;font-size:16px;color:white;display:flex;justify-content:center;align-items:center;">加载中...</div>
-        </div>
-        <iframe id="MJ-iframe-${id}" sandbox="allow-scripts allow-same-origin" loading="lazy" referrerpolicy="no-referrer" style="width:100%;height:100%;border:none;" srcdoc="` + escapedSrcdoc + `"></iframe>
-      </div>
+<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" style="width:100%;height:100%;border:none;" srcdoc="` + escapedSrcdoc + `"></iframe>
+</div>
       `;
         });
         if (containerRef.current) containerRef.current.innerHTML = mes;
@@ -384,7 +403,6 @@ const MdRendererBase = ({ content })=>{
         content
     ]);
     useEffect(()=>{
-        console.log("iframeIdList", iframeIdList);
         iframeIdList.forEach((id)=>{
             const iframe = document.getElementById("MJ-iframe-" + id);
             if (!iframe) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mujian/js-sdk",
-  "version": "0.0.6-beta.17",
+  "version": "0.0.6-beta.19",
   "type": "module",
   "exports": {
     ".": {