@smartspace/chat-ui 1.13.1-dev.c162627 → 1.13.1-dev.dc3bd10

package/dist/index.js

@@ -1,10 +1,10 @@
 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 * 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';
@@ -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,
@@ -871,7 +880,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 +899,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;
@@ -1675,7 +1687,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 +2902,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 +3193,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 +3247,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 +3287,7 @@ function useChatVariablesFormVm({
     },
     [workspace.variables, setVariables, updateVariableMutation, threadId]
   );
-  const config = React8.useMemo(
+  const config = React9.useMemo(
     () => ({
       restrict: true,
       trim: false,
@@ -3221,7 +3356,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 +3390,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 +3403,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 +3473,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 +3560,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,7 +3573,7 @@ var useThreadIsRunning = (workspaceId, threadId) => {
     staleTime: Infinity,
     enabled: !!threadId
   });
-  return !!optimistic || !!thread?.isFlowRunning;
+  return !!optimistic || !!(detailThread ?? listThread)?.isFlowRunning;
 };
 
 // src/domains/messages/enums.ts
@@ -3444,6 +3599,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();
@@ -3527,7 +3691,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
@@ -3583,14 +3750,10 @@ 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;
-      });
+      qc.setQueryData(
+        messagesKeys.list(threadId),
+        (old = []) => reconcileWithMessage(old, message, "replace")
+      );
     },
     onError: (_e, { threadId }) => {
       qc.setQueryData(
@@ -18760,7 +18923,8 @@ function SsImage(props) {
             alt: alt ?? "",
             title,
             width: finalWidth,
-            height: finalHeight
+            height: finalHeight,
+            style: !resolvedSrc && !errored ? { visibility: "hidden" } : void 0
           }
         )
       ]
@@ -19036,7 +19200,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 +19212,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 +19223,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;
@@ -19649,7 +19813,8 @@ var MessageItem = ({
     groupType = v.type;
     const name = v.name.toLowerCase();
     switch (name) {
-      case "variables": {
+      case "variables":
+      case "userinfo": {
         continue;
       }
       case "status": {
@@ -19790,6 +19955,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 +20030,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 +20054,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 +20066,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 }) })