@smartspace/chat-ui 1.13.1-dev.8f17e91 → 1.13.1-dev.90dbac9

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, Download, Copy, Globe, 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 } from '@tanstack/react-query';
+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';
@@ -127,6 +127,7 @@ var filesKeys = {
 var useFileMutations = (scope) => {
   const { workspaceId, threadId } = scope;
   const service = useChatService();
+  const queryClient = useQueryClient();
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [fileProgress, setFileProgress] = useState({});
   const clearUploadState = useCallback(() => {
@@ -185,11 +186,19 @@ var useFileMutations = (scope) => {
     status: uploadedFiles.some((f) => f.name === file.name) ? "done" : "uploading"
   }));
   const getFileBlobUrl = useCallback(
-    async (id) => {
-      const blob = await service.downloadFile(id, { workspaceId, threadId });
-      return URL.createObjectURL(blob);
-    },
-    [service, workspaceId, threadId]
+    (id) => queryClient.fetchQuery({
+      queryKey: filesKeys.downloadBlob(id),
+      queryFn: async () => {
+        const blob = await service.downloadFile(id, {
+          workspaceId,
+          threadId
+        });
+        return URL.createObjectURL(blob);
+      },
+      staleTime: Infinity,
+      gcTime: Infinity
+    }),
+    [queryClient, service, workspaceId, threadId]
   );
   return {
     uploadFilesMutation,
@@ -415,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 {
@@ -439,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 {
@@ -524,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"]);
@@ -747,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}`);
     }
   }
 }));
@@ -871,7 +977,7 @@ var ssImageView = $view(ssImageNode, (ctx) => (node2) => {
   removeBtn.type = "button";
   removeBtn.className = "ss-attach__remove";
   removeBtn.setAttribute("aria-label", "Remove image");
-  removeBtn.textContent = "\xD7";
+  removeBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>';
   removeBtn.addEventListener("mousedown", (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -890,16 +996,19 @@ var ssImageView = $view(ssImageNode, (ctx) => (node2) => {
     }
   });
   img.style.background = "rgba(0,0,0,0.04)";
+  img.style.visibility = "hidden";
   let hasSetRealSrc = false;
   img.addEventListener("load", () => {
     if (!hasSetRealSrc) return;
     spinner.remove();
     img.style.background = "";
+    img.style.visibility = "";
   });
   img.addEventListener("error", () => {
     if (!hasSetRealSrc) return;
     spinner.remove();
     img.style.background = "rgba(255,0,0,0.06)";
+    img.style.visibility = "";
   });
   try {
     const anyWin = window;
@@ -970,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";
@@ -1088,6 +1198,10 @@ function EditorInner({
               serializerRef.current = anyCtx.get(serializerCtx);
             } catch {
             }
+            try {
+              parserRef.current = anyCtx.get(parserCtx);
+            } catch {
+            }
             const handle2 = () => {
               try {
                 if (enableMentions) updateMentionFromView();
@@ -1177,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;
@@ -1449,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 = [];
@@ -1675,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(
@@ -2890,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,
@@ -3059,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 }
@@ -3112,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 || {});
@@ -3152,7 +3413,7 @@ function useChatVariablesFormVm({
     },
     [workspace.variables, setVariables, updateVariableMutation, threadId]
   );
-  const config = React8.useMemo(
+  const config = React9.useMemo(
     () => ({
       restrict: true,
       trim: false,
@@ -3221,7 +3482,20 @@ var threadsKeys = {
 };
 
 // src/domains/threads/cache.ts
+function isStaleSummary(incoming, existing) {
+  if (!existing) return false;
+  if (typeof existing.summaryEmittedAt !== "number") return false;
+  if (typeof incoming.summaryEmittedAt !== "number") return false;
+  if (incoming.summaryEmittedAt >= existing.summaryEmittedAt) return false;
+  return existing.isFlowRunning === false && incoming.isFlowRunning === true;
+}
 function applyThreadToCache(qc, thread) {
+  const existingDetail = qc.getQueryData(
+    threadsKeys.detail(thread.workSpaceId, thread.id)
+  );
+  if (isStaleSummary(thread, existingDetail)) {
+    return false;
+  }
   qc.setQueryData(
     threadsKeys.detail(thread.workSpaceId, thread.id),
     (old) => ({ ...old ?? thread, ...thread })
@@ -3242,6 +3516,7 @@ function applyThreadToCache(qc, thread) {
           if (!page?.data) return page;
           const idx2 = page.data.findIndex((t) => t.id === thread.id);
           if (idx2 === -1) return page;
+          if (isStaleSummary(thread, page.data[idx2])) return page;
           changed = true;
           foundInList = true;
           const nextData2 = page.data.slice();
@@ -3254,6 +3529,7 @@ function applyThreadToCache(qc, thread) {
       if (!list2.data) return old;
       const idx = list2.data.findIndex((t) => t.id === thread.id);
       if (idx === -1) return old;
+      if (isStaleSummary(thread, list2.data[idx])) return old;
       foundInList = true;
       const nextData = list2.data.slice();
       nextData[idx] = { ...nextData[idx], ...thread };
@@ -3323,36 +3599,40 @@ var {
   messageThreadsGetMessageThreadWorkspacesWorkspaceIdMessagethreadsIdResponse: threadResponseSchema
 } = ChatZod;
 function mapThreadDtoToModel(dto) {
+  const lastUpdatedAt = utcDate(dto.lastUpdatedAt);
   return {
     id: dto.id,
     createdAt: utcDate(dto.createdAt),
     createdBy: dto.createdBy ?? "",
     createdByUserId: dto.createdByUserId,
     isFlowRunning: dto.isFlowRunning,
-    lastUpdatedAt: utcDate(dto.lastUpdatedAt),
+    lastUpdatedAt,
     lastUpdatedByUserId: dto.lastUpdatedByUserId,
     name: dto.name ?? "",
     totalMessages: dto.totalMessages,
     pinned: dto.favorited,
-    workSpaceId: dto.workSpaceId
+    workSpaceId: dto.workSpaceId,
+    summaryEmittedAt: lastUpdatedAt.getTime()
   };
 }
 function mapThreadsResponseDtoToModel(dto) {
   return { data: dto.data.map(mapThreadDtoToModel), total: dto.total };
 }
 function mapSignalRThreadSummaryToModel(summary) {
+  const lastUpdatedAt = utcDate(summary.lastUpdatedAt);
   return {
     id: summary.id,
     createdAt: utcDate(summary.createdAt),
     createdBy: summary.createdBy ?? "",
     createdByUserId: summary.createdByUserId,
     isFlowRunning: summary.isFlowRunning,
-    lastUpdatedAt: utcDate(summary.lastUpdatedAt),
+    lastUpdatedAt,
     lastUpdatedByUserId: summary.lastUpdatedByUserId,
     name: summary.name ?? "",
     totalMessages: summary.totalMessages,
     pinned: summary.favorited,
-    workSpaceId: summary.workSpaceId
+    workSpaceId: summary.workSpaceId,
+    summaryEmittedAt: lastUpdatedAt.getTime()
   };
 }
 var threadDetailOptions = ({
@@ -3406,11 +3686,12 @@ var useThread = ({
   });
 };
 var useThreadIsRunning = (workspaceId, threadId) => {
-  const { data: thread } = useThread({
-    workspaceId: workspaceId ?? "",
-    threadId: threadId ?? "",
-    enabled: !!workspaceId && !!threadId
+  const queryClient = useQueryClient();
+  const { data: detailThread } = useQuery({
+    queryKey: threadsKeys.detail(workspaceId ?? "", threadId ?? ""),
+    queryFn: skipToken
   });
+  const listThread = workspaceId && threadId ? getThreadPlaceholderFromListCache(queryClient, workspaceId, threadId) : void 0;
   const { data: optimistic } = useQuery({
     queryKey: threadsKeys.optimisticRunning(threadId ?? ""),
     queryFn: () => false,
@@ -3418,9 +3699,15 @@ var useThreadIsRunning = (workspaceId, threadId) => {
     staleTime: Infinity,
     enabled: !!threadId
   });
-  return !!optimistic || !!thread?.isFlowRunning;
+  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";
@@ -3444,6 +3731,15 @@ var messagesMutationsKeys = {
 };
 
 // src/domains/messages/mutations.ts
+function reconcileWithMessage(old, incoming, onDuplicate = "keep-existing") {
+  const stable = old.filter((m) => !m.optimistic);
+  const idx = stable.findIndex((m) => m.id === incoming.id);
+  if (idx === -1) return [...stable, incoming];
+  if (onDuplicate === "keep-existing") return stable;
+  const copy = stable.slice();
+  copy[idx] = incoming;
+  return copy;
+}
 function useSendMessage() {
   const qc = useQueryClient();
   const { userId, displayName: userName } = useChatIdentity();
@@ -3459,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,
@@ -3473,7 +3769,7 @@ function useSendMessage() {
           },
           ...files?.length ? [
             {
-              id: `temp-${crypto.randomUUID()}-files`,
+              id: `temp-${randomUUID()}-files`,
               type: "Input" /* INPUT */,
               name: "files",
               value: files,
@@ -3485,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,
@@ -3527,7 +3823,10 @@ function useSendMessage() {
         toast.error("There was an error posting your message");
         throw err;
       }
-      qc.setQueryData(messagesKeys.list(threadId), [realMessage]);
+      qc.setQueryData(
+        messagesKeys.list(threadId),
+        (old = []) => reconcileWithMessage(old, realMessage)
+      );
       qc.setQueryData(
         threadsKeys.detail(workspaceId, threadId),
         (old) => old ? { ...old, isFlowRunning: true } : old
@@ -3551,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(
@@ -3561,7 +3861,7 @@ function useAddInputToMessage() {
             values: [
               ...m.values ?? [],
               {
-                id: `temp-${Date.now()}-add`,
+                id: `temp-${randomUUID()}-add`,
                 type: "Input" /* INPUT */,
                 name,
                 value,
@@ -3574,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,
@@ -3583,20 +3886,18 @@ function useAddInputToMessage() {
       });
     },
     onSuccess: (message, { threadId }) => {
-      qc.setQueryData(messagesKeys.list(threadId), (old = []) => {
-        const stable = old.filter((x) => !x.optimistic);
-        const idx = stable.findIndex((x) => x.id === message.id);
-        if (idx === -1) return [...stable, message];
-        const copy = stable.slice();
-        copy[idx] = message;
-        return copy;
-      });
-    },
-    onError: (_e, { threadId }) => {
       qc.setQueryData(
         messagesKeys.list(threadId),
-        (old = []) => old.filter((m) => !m.optimistic)
+        (old = []) => reconcileWithMessage(old, message, "replace")
       );
+    },
+    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
@@ -18545,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();
   }, []);
@@ -18570,6 +18883,7 @@ function HtmlPreview({ source }) {
       pendingHeightRef.current = null;
       if (next2 <= 0) return;
       setIframeHeight(next2);
+      setMeasured(true);
     };
     const scheduleHeight = (height) => {
       pendingHeightRef.current = height;
@@ -18661,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(
@@ -18760,7 +19090,8 @@ function SsImage(props) {
             alt: alt ?? "",
             title,
             width: finalWidth,
-            height: finalHeight
+            height: finalHeight,
+            style: !resolvedSrc && !errored ? { visibility: "hidden" } : void 0
           }
         )
       ]
@@ -19036,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,
@@ -19048,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),
@@ -19059,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;
@@ -19111,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 = () => {
@@ -19279,17 +19702,12 @@ function getSafeUrl(url) {
     return null;
   }
 }
-function getDisplayName(source) {
-  if (source.file?.name) return source.file.name;
-  if (source.url) {
-    try {
-      const parsed = new URL(source.url);
-      return parsed.hostname + (parsed.pathname !== "/" ? parsed.pathname : "");
-    } catch {
-      return source.url;
-    }
+function getHost(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
   }
-  return `Source ${source.index}`;
 }
 function isFileSource(s2) {
   return s2.sourceType === "File" /* File */ && !!s2.file;
@@ -19297,15 +19715,82 @@ function isFileSource(s2) {
 function isLinkSource(s2) {
   return (s2.sourceType === "URL" /* URL */ || s2.sourceType === "WebExternal" /* WebExternal */) && !!s2.url;
 }
+function UnverifiedBadge({
+  attribution,
+  compact = false
+}) {
+  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: cn(
+        "inline-flex items-center gap-0.5 rounded text-[10px] font-medium text-amber-600 dark:text-amber-400 flex-shrink-0",
+        !compact && "px-1 py-px bg-amber-500/10"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ShieldAlert, { className: "h-3 w-3" }),
+        !compact && "Unverified"
+      ]
+    }
+  );
+}
+function IndexChip({ index }) {
+  return /* @__PURE__ */ jsx("span", { className: "flex h-4 min-w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[10px] font-medium tabular-nums text-muted-foreground", children: index });
+}
+function SourceFavicon({ host }) {
+  const [failed, setFailed] = useState(false);
+  if (failed) {
+    return /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: `https://www.google.com/s2/favicons?domain=${encodeURIComponent(
+        host
+      )}&sz=64`,
+      alt: "",
+      width: 16,
+      height: 16,
+      loading: "lazy",
+      onError: () => setFailed(true),
+      className: "h-4 w-4 flex-shrink-0 rounded-sm"
+    }
+  );
+}
+function CitedQuote({ text: text6 }) {
+  if (!text6) return null;
+  return /* @__PURE__ */ jsxs("p", { className: "m-0 text-xs leading-snug text-muted-foreground", children: [
+    "\u201C",
+    text6,
+    "\u201D"
+  ] });
+}
+function SectionLabel({ children: children2 }) {
+  return /* @__PURE__ */ jsx("p", { className: "m-0 px-0.5 pb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: children2 });
+}
+var pillClasses = "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border/60 bg-background px-2 py-1 text-xs font-medium text-foreground transition-colors hover:border-border hover:bg-muted/40";
+var expandedCardClasses = "w-full rounded-lg border border-border/60 bg-background p-2.5 flex flex-col gap-1.5";
 function ChatMessageSources({
   sources
 }) {
   const { workspaceId, threadId } = useChatContext();
   const { downloadFileMutation } = useFileMutations({ workspaceId, threadId });
   const [isExpanded, setIsExpanded] = useState(true);
+  const [openIndexes, setOpenIndexes] = useState(
+    /* @__PURE__ */ new Set()
+  );
+  const toggleOpen = (index) => setOpenIndexes((prev) => {
+    const next2 = new Set(prev);
+    if (next2.has(index)) next2.delete(index);
+    else next2.add(index);
+    return next2;
+  });
   const displaySources = (sources ?? []).filter(
     (s2) => isFileSource(s2) || isLinkSource(s2)
   );
+  const urlSources = displaySources.filter((s2) => !isFileSource(s2));
+  const fileSources = displaySources.filter(isFileSource);
   if (displaySources.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "mt-4 rounded-lg border border-border bg-muted/30 overflow-hidden", children: [
     /* @__PURE__ */ jsxs(
@@ -19331,72 +19816,148 @@ function ChatMessageSources({
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx("div", { className: "bg-background px-3 py-0.5", children: /* @__PURE__ */ jsx(
-      "ul",
-      {
-        className: "list-none space-y-1 m-0 p-0",
-        style: { paddingLeft: 0, marginLeft: 0 },
-        children: displaySources.map((source) => {
-          const displayName = getDisplayName(source);
-          if (isFileSource(source)) {
-            const Icon = getFileIcon3(source.file.name);
+    isExpanded && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 p-2.5", children: [
+      urlSources.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "URLs" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: urlSources.map((source) => {
+          const host = getHost(source.url ?? "");
+          const safeHref = source.url ? getSafeUrl(source.url) : null;
+          if (!openIndexes.has(source.index)) {
             return /* @__PURE__ */ jsxs(
-              "li",
+              "button",
               {
-                className: "list-none text-sm text-foreground m-0 p-0 flex items-center gap-1.5",
-                style: { paddingLeft: 0, marginLeft: 0 },
+                type: "button",
+                "aria-expanded": false,
+                title: source.url ?? host,
+                onClick: () => toggleOpen(source.index),
+                className: pillClasses,
                 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(SourceFavicon, { host }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: host }),
+                  /* @__PURE__ */ jsx(
+                    UnverifiedBadge,
+                    {
+                      attribution: source.attribution,
+                      compact: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(IndexChip, { index: source.index })
+                ]
+              },
+              `url-${source.index}`
+            );
+          }
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: expandedCardClasses,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(SourceFavicon, { host }),
+                  safeHref ? /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: safeHref,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "min-w-0 truncate text-sm font-medium text-foreground no-underline hover:underline underline-offset-2",
+                      children: host
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-medium text-foreground", children: host }),
+                  /* @__PURE__ */ jsx(UnverifiedBadge, { attribution: source.attribution }),
+                  /* @__PURE__ */ jsx(IndexChip, { index: source.index }),
                   /* @__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
+                      "aria-expanded": true,
+                      "aria-label": "Collapse source",
+                      onClick: () => toggleOpen(source.index),
+                      className: "ml-auto rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+                      children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" })
                     }
                   )
+                ] }),
+                source.url && /* @__PURE__ */ jsx("p", { className: "m-0 truncate text-xs text-muted-foreground/80", children: source.url }),
+                /* @__PURE__ */ jsx(CitedQuote, { text: source.citedText })
+              ]
+            },
+            `url-${source.index}`
+          );
+        }) })
+      ] }),
+      fileSources.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Files" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: fileSources.map((source) => {
+          const Icon = getFileIcon3(source.file.name);
+          if (!openIndexes.has(source.index)) {
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": false,
+                title: source.file.name,
+                onClick: () => toggleOpen(source.index),
+                className: pillClasses,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: source.file.name }),
+                  /* @__PURE__ */ jsx(
+                    UnverifiedBadge,
+                    {
+                      attribution: source.attribution,
+                      compact: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(IndexChip, { index: source.index })
                 ]
               },
               `${source.file.id}-${source.index}`
             );
           }
-          const safeHref = source.url ? getSafeUrl(source.url) : null;
           return /* @__PURE__ */ jsxs(
-            "li",
+            "div",
             {
-              className: "list-none text-sm text-foreground m-0 p-0 flex items-center gap-1.5",
-              style: { paddingLeft: 0, marginLeft: 0 },
+              className: expandedCardClasses,
               children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  `(${source.index})`,
-                  " : "
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-medium text-foreground", children: source.file.name }),
+                  /* @__PURE__ */ jsx(UnverifiedBadge, { attribution: source.attribution }),
+                  /* @__PURE__ */ jsx(IndexChip, { index: source.index }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-expanded": true,
+                      "aria-label": "Collapse source",
+                      onClick: () => toggleOpen(source.index),
+                      className: "ml-auto rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+                      children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" })
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }),
-                safeHref ? /* @__PURE__ */ jsx(
-                  "a",
+                /* @__PURE__ */ jsx(CitedQuote, { text: source.citedText }),
+                /* @__PURE__ */ jsxs(
+                  "button",
                   {
-                    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
+                    type: "button",
+                    onClick: () => downloadFileMutation.mutate(source.file),
+                    disabled: downloadFileMutation.isPending,
+                    className: "inline-flex w-fit items-center gap-1 rounded-md border border-border/60 px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted/40 disabled:cursor-not-allowed disabled:opacity-50",
+                    children: [
+                      /* @__PURE__ */ jsx(Download, { className: "h-3 w-3" }),
+                      "Download"
+                    ]
                   }
-                ) : /* @__PURE__ */ jsx("span", { className: "text-foreground rounded px-1 py-0.5", children: displayName })
+                )
               ]
             },
-            `url-${source.index}`
+            `${source.file.id}-${source.index}`
           );
-        })
-      }
-    ) })
+        }) })
+      ] })
+    ] })
   ] });
 }
 var MessageBubble = (props) => {
@@ -19415,6 +19976,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(() => {
@@ -19452,12 +20014,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",
               {
@@ -19466,7 +20028,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) => {
@@ -19542,7 +20104,14 @@ function pushContent(items, value) {
     return;
   }
   if (Array.isArray(value)) {
-    items.push(...value);
+    const looksLikeContent = value.every(
+      (it) => it != null && typeof it === "object" && ("text" in it || "image" in it)
+    );
+    if (looksLikeContent) {
+      items.push(...value);
+    } else {
+      items.push({ text: "```json\n" + JSON.stringify(value, null, 2) + "\n```" });
+    }
     return;
   }
   if (typeof value === "object") {
@@ -19617,25 +20186,28 @@ var MessageItem = ({
   let groupOpen = false;
   let keyCounter = 0;
   let lastStatusNode = null;
+  const groupHasAnything = () => groupContent.length > 0 || groupFiles.length > 0 || groupSources.length > 0;
   const flush = (nextType) => {
-    bubbles.push(
-      /* @__PURE__ */ jsx(
-        MessageBubble,
-        {
-          createdBy: lastCreatedBy,
-          createdByUserId: lastCreatedByUserId,
-          createdAt: lastCreatedAt,
-          type: groupType,
-          content: groupContent,
-          files: groupFiles,
-          sources: groupSources,
-          chatbotName,
-          userOutput: null,
-          userInput: null
-        },
-        `bubble-${message.id ?? "msg"}-${keyCounter++}`
-      )
-    );
+    if (groupHasAnything()) {
+      bubbles.push(
+        /* @__PURE__ */ jsx(
+          MessageBubble,
+          {
+            createdBy: lastCreatedBy,
+            createdByUserId: lastCreatedByUserId,
+            createdAt: lastCreatedAt,
+            type: groupType,
+            content: groupContent,
+            files: groupFiles,
+            sources: groupSources,
+            chatbotName,
+            userOutput: null,
+            userInput: null
+          },
+          `bubble-${message.id ?? "msg"}-${keyCounter++}`
+        )
+      );
+    }
     groupContent = [];
     groupFiles = [];
     groupSources = [];
@@ -19649,7 +20221,8 @@ var MessageItem = ({
     groupType = v.type;
     const name = v.name.toLowerCase();
     switch (name) {
-      case "variables": {
+      case "variables":
+      case "userinfo": {
         continue;
       }
       case "status": {
@@ -19666,6 +20239,9 @@ var MessageItem = ({
       case "prompt":
       case "response":
       case "content": {
+        if (v.value === "") {
+          continue;
+        }
         lastStatusNode = null;
         if (groupContent.length > 0) flush(v.type);
         if (v.value == null) {
@@ -19720,7 +20296,7 @@ var MessageItem = ({
       }
       case "sources": {
         groupSources = coerceSources(v.value);
-        groupOpen = true;
+        if (groupSources.length > 0) groupOpen = true;
         break;
       }
       default: {
@@ -19734,7 +20310,7 @@ var MessageItem = ({
     lastCreatedBy = v.createdBy;
     lastCreatedByUserId = v.createdByUserId;
   }
-  if (groupOpen) {
+  if (groupOpen && groupHasAnything()) {
     bubbles.push(
       /* @__PURE__ */ jsx(
         MessageBubble,
@@ -19790,6 +20366,10 @@ function MessageList({
   const messagesEndRef = useRef(null);
   const prevMessageCountRef = useRef(0);
   const hasInitialScrollRef = useRef(false);
+  const everHadMessagesRef = useRef({
+    threadId: "",
+    had: false
+  });
   const isMobile = useIsMobile();
   const { data: activeWorkspace } = useWorkspace(workspaceId);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -19861,8 +20441,15 @@ function MessageList({
     ro.observe(content);
     return () => ro.disconnect();
   }, [isAtBottom, scrollToBottom]);
+  const safeMessages = messages ?? [];
+  if (everHadMessagesRef.current.threadId !== threadId) {
+    everHadMessagesRef.current = { threadId, had: safeMessages.length > 0 };
+  } else if (safeMessages.length > 0) {
+    everHadMessagesRef.current.had = true;
+  }
+  const hadMessagesBefore = everHadMessagesRef.current.had;
   const isLoading = isChoosingThread || (threadPending || threadFetching) && !thread || (messagesPending || messagesFetching) && messages === void 0;
-  if (isLoading) {
+  if (isLoading && !hadMessagesBefore) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -19878,7 +20465,7 @@ function MessageList({
       }
     );
   }
-  if (threadError || messagesError) {
+  if ((threadError || messagesError) && !hadMessagesBefore) {
     return /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md space-y-3", children: [
       threadError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-destructive", children: [
         /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
@@ -19890,8 +20477,7 @@ function MessageList({
       ] })
     ] }) });
   }
-  const safeMessages = messages ?? [];
-  if (safeMessages.length === 0) {
+  if (safeMessages.length === 0 && !hadMessagesBefore) {
     return /* @__PURE__ */ jsxs("div", { className: "flex overflow-auto flex-shrink-10 flex-col p-8 text-center", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium mb-2", children: activeWorkspace?.name ?? "No messages yet" }),
       activeWorkspace?.firstPrompt && /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto p-4", children: /* @__PURE__ */ jsx(MessageMarkdown, { value: activeWorkspace.firstPrompt }) })
@@ -20109,6 +20695,7 @@ var computeAvatar = (name, fallback) => {
 function mapMentionUserDtoToModel(dto) {
   return {
     id: dto.id,
+    userId: dto.userId,
     displayName: dto.displayName ?? "",
     initials: getInitials(dto.displayName ?? "")
   };
@@ -20132,26 +20719,25 @@ function mapWorkspaceDtoToModel(dto) {
     id: dto.id ?? "",
     name: dto.name ?? "",
     tags: dto.tags ?? [],
-    showSources: dto.showSources ?? void 0,
-    dataSpaces: Array.isArray(dto.dataSpaces) ? dto.dataSpaces : void 0,
+    showSources: truthy(dto.showSources),
+    dataSpaces: Array.isArray(dto.dataSpaces) ? dto.dataSpaces : [],
     createdByUserId: dto.createdByUserId ?? void 0,
     createdAt: dto.createdAt != null ? utcDate(dto.createdAt) : void 0,
     modifiedByUserId: dto.modifiedByUserId ?? void 0,
     modifiedAt: dto.modifiedAt != null ? utcDate(dto.modifiedAt) : void 0,
     favorited: truthy(dto.favorited),
-    summary: dto.summary ?? void 0,
-    firstPrompt: dto.firstPrompt ?? void 0,
+    summary: dto.summary ?? "",
+    firstPrompt: dto.firstPrompt ?? "",
     outputSchema: dto.outputSchema ?? void 0,
-    isPromptAndResponseLoggingEnabled: dto.isPromptAndResponseLoggingEnabled ?? void 0,
     inputs: dto.inputs ?? void 0,
     variables,
     sandBoxThreadId: dto.sandBoxThreadId ?? void 0,
-    supportsFiles: dto.supportsFiles ?? void 0,
+    supportsFiles: truthy(dto.supportsFiles),
     avatarName: computeAvatar(dto.name ?? "")
   };
 }
 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