@smartspace/chat-ui 1.13.1-dev.b2f9256 → 1.13.1-dev.b555ebd

package/dist/index.js

@@ -1,13 +1,13 @@
 import MuiButton from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { Loader2, Check, X, Paperclip, ArrowBigUp, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Copy, Download } from 'lucide-react';
-import * as React8 from 'react';
+import { Loader2, Check, X, Paperclip, ArrowBigUp, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Copy, Download, ShieldAlert } from 'lucide-react';
+import * as React9 from 'react';
 import { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback, createElement, useContext } from 'react';
 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"]);
@@ -756,7 +853,7 @@ var mention = $node("mention", () => ({
     match: (node2) => node2.type.name === "mention",
     runner: (state, node2) => {
       const { id, label } = node2.attrs;
-      state.addNode("mention", void 0, `${id}|${label}`);
+      state.addNode("text", void 0, label || `@${id}`);
     }
   }
 }));
@@ -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 = [];
@@ -1687,7 +1813,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React8.forwardRef(
+var Button = React9.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -2902,6 +3028,128 @@ var modelIdRendererTester = rankWith(
   }
 );
 var ModelIdRendererControl = withJsonFormsControlProps(ModelIdRenderer);
+var NumberRenderer = ({
+  data,
+  handleChange,
+  path: path2,
+  label,
+  description,
+  errors,
+  schema,
+  uischema,
+  visible,
+  enabled,
+  required
+}) => {
+  const isInteger = schema?.type === "integer";
+  const handleInputChange = useCallback(
+    (event) => {
+      const raw2 = event.target.value;
+      if (raw2 === "") {
+        handleChange(path2, void 0);
+        return;
+      }
+      const parsed = isInteger ? parseInt(raw2, 10) : parseFloat(raw2);
+      if (Number.isNaN(parsed)) {
+        handleChange(path2, void 0);
+        return;
+      }
+      handleChange(path2, parsed);
+    },
+    [handleChange, path2, isInteger]
+  );
+  if (!visible) return null;
+  const readOnly = uischema?.access === "Read";
+  const isDisabled = !enabled || readOnly;
+  const hasError = !!errors && errors.length > 0;
+  const fieldSchema = schema;
+  const min = fieldSchema?.minimum;
+  const max = fieldSchema?.maximum;
+  const step = isInteger ? 1 : fieldSchema?.multipleOf ?? "any";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ss-jsonforms-field ss-jsonforms-number",
+      style: {
+        display: "inline-flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        minHeight: "40px"
+      },
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: `number-${path2}`,
+            style: {
+              color: hasError ? "#ef4444" : "#475569",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              whiteSpace: "nowrap",
+              lineHeight: "24px"
+            },
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `number-${path2}`,
+            type: "number",
+            value: data ?? "",
+            onChange: handleInputChange,
+            disabled: isDisabled,
+            min,
+            max,
+            step,
+            style: {
+              width: "80px",
+              height: "24px",
+              padding: "0 0.5rem",
+              border: hasError ? "2px solid #ef4444" : "1px solid #d1d5db",
+              borderRadius: "6px",
+              fontSize: "0.875rem",
+              lineHeight: "24px",
+              fontFamily: "inherit",
+              backgroundColor: isDisabled ? "#f9fafb" : "#ffffff",
+              color: isDisabled ? "#9ca3af" : "#111827",
+              outline: "none",
+              boxSizing: "border-box"
+            }
+          }
+        ),
+        hasError && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: "#ef4444",
+              fontSize: "0.75rem"
+            },
+            children: errors
+          }
+        )
+      ]
+    }
+  );
+};
+var numberRendererTester = rankWith(
+  40,
+  (uischema, schema) => {
+    if (uischema.type !== "Control") return false;
+    const propertyPath = uischema.scope.replace(
+      "#/properties/",
+      ""
+    );
+    const fieldSchema = schema?.properties?.[propertyPath];
+    if (!fieldSchema) return false;
+    return fieldSchema.type === "integer" || fieldSchema.type === "number";
+  }
+);
+var NumberRendererControl = withJsonFormsControlProps(NumberRenderer);
 var TextareaRenderer = ({
   data,
   handleChange,
@@ -3071,6 +3319,7 @@ var renderers = [
   { tester: modelIdRendererTester, renderer: ModelIdRendererControl },
   { tester: booleanRendererTester, renderer: BooleanRendererControl },
   { tester: dropdownRendererTester, renderer: DropdownRendererControl },
+  { tester: numberRendererTester, renderer: NumberRendererControl },
   { tester: textareaRendererTester, renderer: TextareaRendererControl },
   ...vanillaRenderers,
   { tester: jsonEditorTester, renderer: JsonEditorRendererControl }
@@ -3124,26 +3373,26 @@ function useChatVariablesFormVm({
   const { mutate: updateVariableMutation } = useUpdateFlowRunVariable();
   const querySettled = !isLoading && (threadVars !== void 0 || isError);
   const shouldUseDefaults = isError || threadVars && Object.keys(threadVars).length === 0;
-  const built = React8.useMemo(() => {
+  const built = React9.useMemo(() => {
     return buildSimpleSchemaAndUi(
       workspace.variables,
       threadVars,
       shouldUseDefaults ?? false
     );
   }, [workspace.variables, threadVars, shouldUseDefaults]);
-  const [data, setData] = React8.useState(null);
-  React8.useEffect(() => {
+  const [data, setData] = React9.useState(null);
+  React9.useEffect(() => {
     if (querySettled) {
       setData(built.initialData);
       setVariables(built.initialData);
     }
   }, [querySettled, built.initialData, setVariables]);
-  const ajv = React8.useMemo(() => createAjv({ useDefaults: false }), []);
-  const prevRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const ajv = React9.useMemo(() => createAjv({ useDefaults: false }), []);
+  const prevRef = React9.useRef(null);
+  React9.useEffect(() => {
     prevRef.current = data;
   }, [data]);
-  const onChange = React8.useCallback(
+  const onChange = React9.useCallback(
     ({ data: next2 }) => {
       if (prevRef.current && !isDraftThreadId(threadId)) {
         const keys2 = Object.keys(workspace.variables || {});
@@ -3164,7 +3413,7 @@ function useChatVariablesFormVm({
     },
     [workspace.variables, setVariables, updateVariableMutation, threadId]
   );
-  const config = React8.useMemo(
+  const config = React9.useMemo(
     () => ({
       restrict: true,
       trim: false,
@@ -3453,6 +3702,12 @@ var useThreadIsRunning = (workspaceId, threadId) => {
   return !!optimistic || !!(detailThread ?? listThread)?.isFlowRunning;
 };
 
+// src/shared/utils/randomUUID.ts
+function randomUUID() {
+  const cryptoObj = globalThis?.crypto;
+  return typeof cryptoObj?.randomUUID === "function" ? cryptoObj.randomUUID() : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
 // src/domains/messages/enums.ts
 var MessageValueType = /* @__PURE__ */ ((MessageValueType2) => {
   MessageValueType2["OUTPUT"] = "Output";
@@ -3500,10 +3755,10 @@ function useSendMessage() {
       if (!threadId) throw new Error("Thread ID is required");
       if (!workspaceId) throw new Error("Workspace ID is required");
       const optimistic = {
-        id: `temp-${crypto.randomUUID()}`,
+        id: `temp-${randomUUID()}`,
         values: [
           {
-            id: `temp-${crypto.randomUUID()}-prompt`,
+            id: `temp-${randomUUID()}-prompt`,
             type: "Input" /* INPUT */,
             name: "prompt",
             value: contentList,
@@ -3514,7 +3769,7 @@ function useSendMessage() {
           },
           ...files?.length ? [
             {
-              id: `temp-${crypto.randomUUID()}-files`,
+              id: `temp-${randomUUID()}-files`,
               type: "Input" /* INPUT */,
               name: "files",
               value: files,
@@ -3526,7 +3781,7 @@ function useSendMessage() {
           ] : [],
           ...variables && Object.keys(variables).length ? [
             {
-              id: `temp-${crypto.randomUUID()}-vars`,
+              id: `temp-${randomUUID()}-vars`,
               type: "Input" /* INPUT */,
               name: "variables",
               value: variables,
@@ -3595,8 +3850,9 @@ function useAddInputToMessage() {
   const { userId, displayName: userName } = useChatIdentity();
   const service = useChatService();
   const addInputToMessageMutation = useMutation({
-    mutationFn: async ({ threadId, messageId, name, value, channels }) => {
-      if (!threadId) throw new Error("Thread ID is required");
+    onMutate: async ({ threadId, messageId, name, value, channels }) => {
+      await qc.cancelQueries({ queryKey: messagesKeys.list(threadId) });
+      const previousMessages = qc.getQueryData(messagesKeys.list(threadId)) ?? [];
       qc.setQueryData(
         messagesKeys.list(threadId),
         (old = []) => old.map(
@@ -3605,7 +3861,7 @@ function useAddInputToMessage() {
             values: [
               ...m.values ?? [],
               {
-                id: `temp-${Date.now()}-add`,
+                id: `temp-${randomUUID()}-add`,
                 type: "Input" /* INPUT */,
                 name,
                 value,
@@ -3618,7 +3874,10 @@ function useAddInputToMessage() {
           } : m
         )
       );
-      await qc.cancelQueries({ queryKey: messagesKeys.list(threadId) });
+      return { previousMessages };
+    },
+    mutationFn: async ({ threadId, messageId, name, value, channels }) => {
+      if (!threadId) throw new Error("Thread ID is required");
       return await service.addInputToMessage({
         messageId,
         name,
@@ -3632,11 +3891,13 @@ function useAddInputToMessage() {
         (old = []) => reconcileWithMessage(old, message, "replace")
       );
     },
-    onError: (_e, { threadId }) => {
-      qc.setQueryData(
-        messagesKeys.list(threadId),
-        (old = []) => old.filter((m) => !m.optimistic)
-      );
+    onError: (_e, { threadId }, context) => {
+      if (context) {
+        qc.setQueryData(
+          messagesKeys.list(threadId),
+          context.previousMessages
+        );
+      }
       toast.error("There was an error posting your form input");
     },
     retry: false
@@ -18585,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();
   }, []);
@@ -18610,6 +18883,7 @@ function HtmlPreview({ source }) {
       pendingHeightRef.current = null;
       if (next2 <= 0) return;
       setIframeHeight(next2);
+      setMeasured(true);
     };
     const scheduleHeight = (height) => {
       pendingHeightRef.current = height;
@@ -18701,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(
@@ -19077,7 +19367,7 @@ function getAvatarColour(name) {
   const textColor = brightness > 128 ? "#000000" : "#FFFFFF";
   return { backgroundColor, textColor };
 }
-var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -19089,7 +19379,7 @@ var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = "Avatar";
-var AvatarImage = React8.forwardRef(({ className, alt, src, children: children2, ...props }, _ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React9.forwardRef(({ className, alt, src, children: children2, ...props }, _ref) => /* @__PURE__ */ jsx(
   MuiAvatar,
   {
     className: cn("aspect-square h-full w-full", className),
@@ -19100,7 +19390,7 @@ var AvatarImage = React8.forwardRef(({ className, alt, src, children: children2,
   }
 ));
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React8.forwardRef(
+var AvatarFallback = React9.forwardRef(
   ({ className, colored = true, ...props }, ref) => {
     const childText = String(props.children ?? "");
     const colours = colored ? getAvatarColour(childText) : void 0;
@@ -19152,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 = () => {
@@ -19338,6 +19720,37 @@ function isFileSource(s2) {
 function isLinkSource(s2) {
   return (s2.sourceType === "URL" /* URL */ || s2.sourceType === "WebExternal" /* WebExternal */) && !!s2.url;
 }
+function UnverifiedBadge({
+  attribution
+}) {
+  if (attribution !== "unsupported" /* Unsupported */) return null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      title: "This citation couldn't be verified against the source text \u2014 double-check it.",
+      className: "inline-flex items-center gap-0.5 rounded px-1 py-px text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-500/10 flex-shrink-0",
+      children: [
+        /* @__PURE__ */ jsx(ShieldAlert, { className: "h-3 w-3" }),
+        "Unverified"
+      ]
+    }
+  );
+}
+function CitedQuote({ source }) {
+  if (!source.citedText) return null;
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      title: source.citedText,
+      className: "m-0 pl-6 pr-2 pb-0.5 text-xs italic text-muted-foreground line-clamp-2 border-l-2 border-border ml-1",
+      children: [
+        "\u201C",
+        source.citedText,
+        "\u201D"
+      ]
+    }
+  );
+}
 function ChatMessageSources({
   sources
 }) {
@@ -19384,25 +19797,29 @@ function ChatMessageSources({
             return /* @__PURE__ */ jsxs(
               "li",
               {
-                className: "list-none text-sm text-foreground m-0 p-0 flex items-center gap-1.5",
+                className: "list-none text-sm text-foreground m-0 p-0",
                 style: { paddingLeft: 0, marginLeft: 0 },
                 children: [
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    `(${source.index})`,
-                    " : "
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      `(${source.index})`,
+                      " : "
+                    ] }),
+                    Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        title: displayName,
+                        onClick: () => downloadFileMutation.mutate(source.file),
+                        className: "text-foreground hover:bg-muted/50 rounded px-1 py-0.5 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed truncate",
+                        disabled: downloadFileMutation.isPending,
+                        children: displayName
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(UnverifiedBadge, { attribution: source.attribution })
                   ] }),
-                  Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      title: displayName,
-                      onClick: () => downloadFileMutation.mutate(source.file),
-                      className: "text-foreground hover:bg-muted/50 rounded px-1 py-0.5 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
-                      disabled: downloadFileMutation.isPending,
-                      children: displayName
-                    }
-                  )
+                  /* @__PURE__ */ jsx(CitedQuote, { source })
                 ]
               },
               `${source.file.id}-${source.index}`
@@ -19412,25 +19829,29 @@ function ChatMessageSources({
           return /* @__PURE__ */ jsxs(
             "li",
             {
-              className: "list-none text-sm text-foreground m-0 p-0 flex items-center gap-1.5",
+              className: "list-none text-sm text-foreground m-0 p-0",
               style: { paddingLeft: 0, marginLeft: 0 },
               children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  `(${source.index})`,
-                  " : "
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    `(${source.index})`,
+                    " : "
+                  ] }),
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }),
+                  safeHref ? /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      title: source.url ?? displayName,
+                      href: safeHref,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "text-foreground hover:bg-muted/50 rounded px-1 py-0.5 underline underline-offset-2 truncate",
+                      children: displayName
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "text-foreground rounded px-1 py-0.5 truncate", children: displayName }),
+                  /* @__PURE__ */ jsx(UnverifiedBadge, { attribution: source.attribution })
                 ] }),
-                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }),
-                safeHref ? /* @__PURE__ */ jsx(
-                  "a",
-                  {
-                    title: source.url ?? displayName,
-                    href: safeHref,
-                    target: "_blank",
-                    rel: "noreferrer",
-                    className: "text-foreground hover:bg-muted/50 rounded px-1 py-0.5 underline underline-offset-2",
-                    children: displayName
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "text-foreground rounded px-1 py-0.5", children: displayName })
+                /* @__PURE__ */ jsx(CitedQuote, { source })
               ]
             },
             `url-${source.index}`
@@ -19456,6 +19877,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(() => {
@@ -19493,12 +19915,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",
               {
@@ -19507,7 +19929,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) => {
@@ -19690,7 +20112,8 @@ var MessageItem = ({
     groupType = v.type;
     const name = v.name.toLowerCase();
     switch (name) {
-      case "variables": {
+      case "variables":
+      case "userinfo": {
         continue;
       }
       case "status": {
@@ -20160,6 +20583,7 @@ var computeAvatar = (name, fallback) => {
 function mapMentionUserDtoToModel(dto) {
   return {
     id: dto.id,
+    userId: dto.userId,
     displayName: dto.displayName ?? "",
     initials: getInitials(dto.displayName ?? "")
   };
@@ -20194,9 +20618,6 @@ function mapWorkspaceDtoToModel(dto) {
     firstPrompt: dto.firstPrompt ?? "",
     outputSchema: dto.outputSchema ?? void 0,
     inputs: dto.inputs ?? void 0,
-    isPromptAndResponseLoggingEnabled: truthy(
-      dto.isPromptAndResponseLoggingEnabled
-    ),
     variables,
     sandBoxThreadId: dto.sandBoxThreadId ?? void 0,
     supportsFiles: truthy(dto.supportsFiles),
@@ -20205,6 +20626,6 @@ function mapWorkspaceDtoToModel(dto) {
 }
 var mapWorkspacesDtoToModels = (arr) => arr.map(mapWorkspaceDtoToModel);
 
-export { ChatProvider, ChatVariablesForm, DRAFT_THREAD_PREFIX, DateFromApi, MarkdownEditor, MessageComposer, MessageList, MessageListSkeleton, MessageMarkdown, MessageValueType, NEW_THREAD_ID, THREAD_LIST_PAGE_SIZE, applyDeltaToMessage, applyThreadToCache, createDraftThreadId, createThreadId, downloadFileBlobOptions, filesKeys, flowRunsKeys, getModelIcon, getThreadPlaceholderFromListCache, getUserPhotoUrl, invalidateWorkspaceThreadLists, isDraftThreadId, mapFileInfoDtoToModel, mapMentionUserDtoToModel, mapMessageDtoToModel, mapMessageErrorDtoToModel, mapMessageValueDtoToModel, mapMessagesDtoToModels, mapSignalRThreadSummaryToModel, mapThreadDtoToModel, mapThreadsResponseDtoToModel, mapWorkspaceDtoToModel, mapWorkspacesDtoToModels, markDraftThreadId, messagesKeys, messagesListOptions, messagesMutationsKeys, modelsKeys, parseDateTime, parseDateTimeHuman, setThreadOptimisticRunning, setThreadRunningInLists, taggableUsersOptions, threadDetailOptions, threadsKeys, unmarkDraftThreadId, useAddInputToMessage, useChatContext, useChatIdentity, useChatService, useDownloadFileBlobQuery, useFileMutations, useFlowRunVariables, useMessages, useModels, useSendMessage, useTaggableWorkspaceUsers, useThread, useThreadIsRunning, useUpdateFlowRunVariable, useWorkspace, utcDate, workspaceDetailOptions, workspaceKeys };
+export { ChatProvider, ChatVariablesForm, DRAFT_THREAD_PREFIX, DateFromApi, MarkdownEditor, MessageComposer, MessageList, MessageListSkeleton, MessageMarkdown, MessageValueType, NEW_THREAD_ID, THREAD_LIST_PAGE_SIZE, applyDeltaToMessage, applyThreadToCache, createDraftThreadId, createThreadId, downloadFileBlobOptions, filesKeys, flowRunsKeys, getModelIcon, getThreadPlaceholderFromListCache, getUserPhotoUrl, invalidateWorkspaceThreadLists, isDraftThreadId, mapFileInfoDtoToModel, mapMentionUserDtoToModel, mapMessageDtoToModel, mapMessageErrorDtoToModel, mapMessageValueDtoToModel, mapMessagesDtoToModels, mapSignalRThreadSummaryToModel, mapThreadDtoToModel, mapThreadsResponseDtoToModel, mapWorkspaceDtoToModel, mapWorkspacesDtoToModels, markDraftThreadId, messagesKeys, messagesListOptions, messagesMutationsKeys, modelsKeys, parseDateTime, parseDateTimeHuman, randomUUID, setThreadOptimisticRunning, setThreadRunningInLists, taggableUsersOptions, threadDetailOptions, threadsKeys, unmarkDraftThreadId, useAddInputToMessage, useChatContext, useChatIdentity, useChatService, useDownloadFileBlobQuery, useFileMutations, useFlowRunVariables, useMessages, useModels, useSendMessage, useTaggableWorkspaceUsers, useThread, useThreadIsRunning, useUpdateFlowRunVariable, useWorkspace, utcDate, workspaceDetailOptions, workspaceKeys };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map