@smartspace/chat-ui 1.14.0-main.f7a280f → 1.14.2-main.10a17d6

package/dist/index.js

@@ -7,7 +7,7 @@ import { createPortal } from 'react-dom';
 import { useQuery, queryOptions, useQueryClient, useMutation, skipToken } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx, editorViewCtx, serializerCtx, SchemaReady, nodeViewCtx, markViewCtx, schemaCtx, prosePluginsCtx, nodesCtx } from '@milkdown/core';
+import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx, editorViewCtx, serializerCtx, parserCtx, SchemaReady, nodeViewCtx, markViewCtx, schemaCtx, prosePluginsCtx, nodesCtx } from '@milkdown/core';
 import { history } from '@milkdown/kit/plugin/history';
 import { clipboard } from '@milkdown/plugin-clipboard';
 import { listenerCtx, listener } from '@milkdown/plugin-listener';
@@ -424,6 +424,29 @@ var fileTag = $node("fileTag", () => ({
 var MAX_IFRAME_HEIGHT = 5e3;
 var HEIGHT_MESSAGE = "ss-html-preview-height";
 var ERROR_MESSAGE = "ss-html-preview-error";
+var SNAPSHOT_REQUEST = "ss-html-preview-snapshot";
+var SNAPSHOT_RESULT = "ss-html-preview-snapshot-result";
+var SS_MARKDOWN_CLIPBOARD_TYPE = "web text/markdown";
+var MARKDOWN_MARKER_PREFIX = "<!--ss-md:";
+var MARKDOWN_MARKER_SUFFIX = "-->";
+var MARKDOWN_MARKER_RE = /<!--ss-md:([A-Za-z0-9+/=]+)-->/;
+function encodeMarkdownMarker(markdown) {
+  try {
+    const b64 = btoa(unescape(encodeURIComponent(markdown)));
+    return `${MARKDOWN_MARKER_PREFIX}${b64}${MARKDOWN_MARKER_SUFFIX}`;
+  } catch {
+    return "";
+  }
+}
+function extractMarkdownMarker(html4) {
+  const match = html4.match(MARKDOWN_MARKER_RE);
+  if (!match) return null;
+  try {
+    return decodeURIComponent(escape(atob(match[1])));
+  } catch {
+    return null;
+  }
+}
 var HEIGHT_REPORTER_SCRIPT = `
 <script>(function(){
   try {
@@ -448,6 +471,48 @@ var HEIGHT_REPORTER_SCRIPT = `
   window.addEventListener('unhandledrejection', function(ev){
     reportError(ev && ev.reason && ev.reason.message);
   });
+  // Snapshot responder. The parent can't read this sandboxed (no
+  // allow-same-origin) document, so when it asks for a snapshot we rasterize
+  // our own <canvas> elements via toDataURL and post just the PNG strings
+  // back out \u2014 strings cross the sandbox boundary fine. Used by the message
+  // "smart copy" so client-side charts (Chart.js etc.) paste into Word as
+  // images instead of dead <canvas>/<script> source.
+  window.addEventListener('message', function(ev){
+    var d = ev && ev.data;
+    if (!d || d.type !== ${JSON.stringify(SNAPSHOT_REQUEST)}) return;
+    var images = [];
+    try {
+      var canvases = document.querySelectorAll('canvas');
+      for (var i = 0; i < canvases.length; i++) {
+        var c = canvases[i];
+        // Skip zero-area canvases (off-screen / not yet drawn).
+        if (!c.width || !c.height) continue;
+        try {
+          var rect = c.getBoundingClientRect();
+          images.push({
+            dataUrl: c.toDataURL('image/png'),
+            width: c.width,
+            height: c.height,
+            // On-screen CSS size, independent of devicePixelRatio scaling, so
+            // the pasted <img> renders at the chart's intended size rather than
+            // 2x on a retina display. Falls back to the pixel size.
+            cssWidth: Math.round(rect.width) || c.width,
+            cssHeight: Math.round(rect.height) || c.height
+          });
+        } catch (e) {
+          // Tainted canvas (cross-origin image drawn without CORS) \u2014 skip it;
+          // the host falls back to inlining the static HTML source.
+        }
+      }
+    } catch (e) {}
+    try {
+      parent.postMessage({
+        type: ${JSON.stringify(SNAPSHOT_RESULT)},
+        id: d.id,
+        images: images
+      }, '*');
+    } catch (e) {}
+  });
   var lastSent = -1;
   function send(){
     try {
@@ -533,6 +598,38 @@ async function copyText(text6) {
     return false;
   }
 }
+var snapshotSeq = 0;
+function snapshotIframe(iframe, timeoutMs = 1500) {
+  return new Promise((resolve) => {
+    const win = iframe.contentWindow;
+    if (!win || typeof window === "undefined") {
+      resolve([]);
+      return;
+    }
+    const id = `snap-${++snapshotSeq}`;
+    let settled = false;
+    const finish = (images) => {
+      if (settled) return;
+      settled = true;
+      window.removeEventListener("message", onMessage);
+      clearTimeout(timer);
+      resolve(images);
+    };
+    const onMessage = (event) => {
+      if (event.source !== win) return;
+      const data = event.data;
+      if (!data || data.type !== SNAPSHOT_RESULT || data.id !== id) return;
+      finish(Array.isArray(data.images) ? data.images : []);
+    };
+    const timer = setTimeout(() => finish([]), timeoutMs);
+    window.addEventListener("message", onMessage);
+    try {
+      win.postMessage({ type: SNAPSHOT_REQUEST, id }, "*");
+    } catch {
+      finish([]);
+    }
+  });
+}
 
 // src/shared/markdown/extensions/htmlPreview.ts
 var PREVIEW_LANGUAGES = /* @__PURE__ */ new Set(["html"]);
@@ -982,6 +1079,7 @@ function EditorInner({
   const [_isDragging, setIsDragging] = useState(false);
   const viewRef = useRef(null);
   const serializerRef = useRef(null);
+  const parserRef = useRef(null);
   function guessImageExt(mime) {
     const t = (mime || "").toLowerCase();
     if (t === "image/jpeg") return "jpg";
@@ -1100,6 +1198,10 @@ function EditorInner({
               serializerRef.current = anyCtx.get(serializerCtx);
             } catch {
             }
+            try {
+              parserRef.current = anyCtx.get(parserCtx);
+            } catch {
+            }
             const handle2 = () => {
               try {
                 if (enableMentions) updateMentionFromView();
@@ -1189,6 +1291,19 @@ function EditorInner({
     const tr = view.state.tr.replaceWith(from, to, node2);
     view.dispatch(tr.scrollIntoView());
   }
+  function insertMarkdownAtSelection(view, markdown) {
+    const parser = parserRef.current;
+    if (!parser) return false;
+    try {
+      const doc = parser(markdown);
+      if (!doc) return false;
+      const slice = new Slice(doc.content, 0, 0);
+      view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+      return true;
+    } catch {
+      return false;
+    }
+  }
   async function insertUploadedFilesIntoEditor(files) {
     const view = viewRef.current;
     if (!isEditable || !view) return false;
@@ -1461,6 +1576,17 @@ function EditorInner({
       },
       onPasteCapture: (e) => {
         try {
+          const view = viewRef.current;
+          if (isEditable && view) {
+            const ssMarkdown = extractMarkdownMarker(
+              e.clipboardData?.getData("text/html") ?? ""
+            ) ?? e.clipboardData?.getData(SS_MARKDOWN_CLIPBOARD_TYPE);
+            if (ssMarkdown && insertMarkdownAtSelection(view, ssMarkdown)) {
+              e.preventDefault();
+              e.stopPropagation();
+              return;
+            }
+          }
           const items = e.clipboardData?.items;
           if (!items) return;
           const imageFiles = [];
@@ -18720,17 +18846,29 @@ function CodeBlock({ language, source }) {
     /* @__PURE__ */ jsx("pre", { ...language ? { "data-language": language } : {}, children: /* @__PURE__ */ jsx("code", { className: codeClass, children: source }) })
   ] });
 }
+var STREAM_SETTLE_MS = 250;
 function HtmlPreview({ source }) {
   const [showingPreview, setShowingPreview] = useState(true);
   const [copyLabel, setCopyLabel] = useState(
     "Copy"
   );
   const [iframeHeight, setIframeHeight] = useState(null);
+  const [settledSource, setSettledSource] = useState(source);
+  const [measured, setMeasured] = useState(false);
+  const loading = showingPreview && (source !== settledSource || !measured);
   const iframeRef = useRef(null);
   const rafIdRef = useRef(null);
   const pendingHeightRef = useRef(null);
   const copyResetTimerRef = useRef(null);
-  const srcdoc = injectHeightReporter(source);
+  const srcdoc = injectHeightReporter(settledSource);
+  useEffect(() => {
+    if (source === settledSource) return;
+    const id = setTimeout(() => setSettledSource(source), STREAM_SETTLE_MS);
+    return () => clearTimeout(id);
+  }, [source, settledSource]);
+  useEffect(() => {
+    setMeasured(false);
+  }, [settledSource]);
   useEffect(() => {
     ensureGlobalListener();
   }, []);
@@ -18745,6 +18883,7 @@ function HtmlPreview({ source }) {
       pendingHeightRef.current = null;
       if (next2 <= 0) return;
       setIframeHeight(next2);
+      setMeasured(true);
     };
     const scheduleHeight = (height) => {
       pendingHeightRef.current = height;
@@ -18836,19 +18975,35 @@ function HtmlPreview({ source }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
-      "iframe",
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        ref: iframeRef,
-        className: "ss-code-block__iframe",
-        sandbox: "allow-scripts",
-        loading: "lazy",
-        title: "HTML preview",
-        srcDoc: srcdoc,
+        className: "ss-code-block__preview",
         style: {
           display: showingPreview ? "block" : "none",
-          ...iframeHeight != null ? { height: `${iframeHeight}px` } : {}
-        }
+          ...loading ? { minHeight: 180 } : {}
+        },
+        children: [
+          loading && /* @__PURE__ */ jsxs("div", { className: "ss-code-block__loading", children: [
+            /* @__PURE__ */ jsx("div", { className: "ss-code-block__spinner" }),
+            /* @__PURE__ */ jsx("span", { children: "Rendering preview\u2026" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              ref: iframeRef,
+              className: "ss-code-block__iframe",
+              sandbox: "allow-scripts",
+              loading: "lazy",
+              title: "HTML preview",
+              srcDoc: srcdoc,
+              style: {
+                opacity: loading ? 0 : 1,
+                ...loading ? { position: "absolute", inset: 0, height: "100%" } : iframeHeight != null ? { height: `${iframeHeight}px` } : {}
+              }
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ jsx(
@@ -19287,23 +19442,115 @@ function getUserPhotoUrl(userId) {
   if (!base2) return void 0;
   return `${base2}/users/${userId}/photo`;
 }
+
+// src/messages/smartCopy.ts
+async function copyMessageRich(container, markdown) {
+  try {
+    const canRichWrite = typeof ClipboardItem !== "undefined" && !!navigator.clipboard?.write;
+    if (!canRichWrite) return copyText(markdown);
+    const { html: html4, images } = await buildHtmlPayload(container);
+    const htmlWithMarker = `${html4}${encodeMarkdownMarker(markdown)}`;
+    const parts = {
+      "text/html": new Blob([htmlWithMarker], { type: "text/html" }),
+      "text/plain": new Blob([markdown], { type: "text/plain" })
+    };
+    if (images.length === 1) {
+      const pngBlob = await dataUrlToBlob(images[0].dataUrl);
+      if (pngBlob) parts["image/png"] = pngBlob;
+    }
+    const withCustom = {
+      ...parts,
+      [SS_MARKDOWN_CLIPBOARD_TYPE]: new Blob([markdown], {
+        type: SS_MARKDOWN_CLIPBOARD_TYPE
+      })
+    };
+    if (await tryWrite(withCustom)) return true;
+    if (await tryWrite(parts)) return true;
+    return copyText(markdown);
+  } catch {
+    return copyText(markdown);
+  }
+}
+async function tryWrite(parts) {
+  try {
+    await navigator.clipboard.write([new ClipboardItem(parts)]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function buildHtmlPayload(container) {
+  const liveBlocks = Array.from(
+    container.querySelectorAll(".ss-code-block--previewable")
+  );
+  const snapshots = await Promise.all(
+    liveBlocks.map((block) => {
+      const iframe = block.querySelector("iframe");
+      return iframe ? snapshotIframe(iframe) : Promise.resolve([]);
+    })
+  );
+  const clone = container.cloneNode(true);
+  const cloneBlocks = Array.from(
+    clone.querySelectorAll(".ss-code-block--previewable")
+  );
+  const allImages = [];
+  cloneBlocks.forEach((block, i) => {
+    const images = snapshots[i] ?? [];
+    if (images.length > 0) {
+      allImages.push(...images);
+      const frag = block.ownerDocument.createElement("div");
+      for (const img of images) {
+        const el = block.ownerDocument.createElement("img");
+        el.src = img.dataUrl;
+        el.setAttribute("width", String(img.cssWidth));
+        el.setAttribute("height", String(img.cssHeight));
+        el.style.maxWidth = "100%";
+        frag.appendChild(el);
+      }
+      block.replaceWith(frag);
+    } else {
+      const source = block.querySelector("code")?.textContent ?? "";
+      const div = block.ownerDocument.createElement("div");
+      div.innerHTML = stripScripts(source);
+      block.replaceWith(div);
+    }
+  });
+  clone.querySelectorAll(
+    "iframe, button, .ss-code-block__header, .ss-code-block__copy, .ss-code-block__toggle"
+  ).forEach((el) => el.remove());
+  const html4 = `<meta charset="utf-8">${clone.innerHTML}`;
+  return { html: html4, images: allImages };
+}
+function stripScripts(html4) {
+  return html4.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
+}
+async function dataUrlToBlob(dataUrl) {
+  try {
+    const res = await fetch(dataUrl);
+    return await res.blob();
+  } catch {
+    return null;
+  }
+}
 var RESET_DELAY = 1e3;
 function ChatMessageCopyButton({
-  content
+  content,
+  contentRef
 }) {
   const [state, setState] = useState("idle" /* IDLE */);
   const handleCopy = async () => {
     if (!content) return;
     const textToCopy = content.filter((item) => !!item.text).map((item) => item.text).join("\n");
     if (!textToCopy) return;
-    try {
-      await navigator.clipboard.writeText(textToCopy);
+    const container = contentRef?.current;
+    const ok3 = container ? await copyMessageRich(container, textToCopy) : await copyText(textToCopy);
+    if (ok3) {
       setState("success" /* SUCCESS */);
       setTimeout(() => {
         setState("idle" /* IDLE */);
       }, RESET_DELAY);
-    } catch (err) {
-      console.error("Failed to copy text:", err);
+    } else {
+      console.error("Failed to copy message content");
     }
   };
   const getIcon = () => {
@@ -19591,6 +19838,7 @@ var MessageBubble = (props) => {
   } = props;
   const [responseFormData, setResponseFormData] = useState(userInput);
   const [responseFormValid, setResponseFormValid] = useState(false);
+  const contentRef = useRef(null);
   const isBotResponse = type === "Output" /* OUTPUT */;
   const showForm = userOutput;
   useEffect(() => {
@@ -19628,12 +19876,12 @@ var MessageBubble = (props) => {
                   /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: createdAt ? parseDateTime(createdAt, "Do MMMM YYYY, h:mm a") : "" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx(ChatMessageCopyButton, { content })
+              /* @__PURE__ */ jsx(ChatMessageCopyButton, { content, contentRef })
             ]
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: cn(isBotResponse ? "p-4" : "px-4 py-2"), children: [
-          contentIsList && content?.map(
+          /* @__PURE__ */ jsx("div", { ref: contentRef, children: contentIsList && content?.map(
             (item, i) => item.text ? /* @__PURE__ */ jsx(
               "div",
               {
@@ -19642,7 +19890,7 @@ var MessageBubble = (props) => {
               },
               `content-${i}`
             ) : item.image ? /* @__PURE__ */ jsx("div", { className: "mb-3 last:mb-0", children: /* @__PURE__ */ jsx(ChatMessageImage, { image: item.image }) }, `image-${i}`) : null
-          ),
+          ) }),
           files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ss-chat-message__attachments mt-4 space-y-2", children: [
             /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold text-muted-foreground mb-1", children: "Attachments" }),
             files.map((file, idx) => {