local-operator-ui 0.4.0 → 0.4.3

package/README.md

@@ -13,7 +13,9 @@
 
 <br />
 
-<video src="https://github.com/user-attachments/assets/a7a97781-40a0-46ce-8f53-09ff6fb9ae86" alt="Local Operator Dashboard Example" autoplay loop muted playsinline></video>
+<div style="display: flex; justify-content: center; border-radius: 8px; overflow: hidden;">
+  <img src="./resources/preview-example.gif" alt="Local Operator UI Dashboard Example" style="width: 100%; max-width: 800px;">
+</div>
 
 <br />
 

package/out/renderer/assets/{index-Cu-Ty0jC.js → index-BQg1gNa7.js}

@@ -29848,12 +29848,10 @@ class WebSocketClient extends EventEmitter {
       const error = new Error(
         `WebSocket connection failed after ${this.options.maxReconnectAttempts} attempts. In cooldown period.`
       );
-      console.error(error.message);
       return Promise.reject(error);
     }
     if (this.isReconnecting) {
       const error = new Error("WebSocket reconnection already in progress");
-      console.error(error.message);
       return Promise.reject(error);
     }
     const now = Date.now();
@@ -30202,11 +30200,7 @@ class WebSocketClient extends EventEmitter {
       if (this.status === "disconnected" || this.status === "reconnecting") {
         this.reconnectAttempts++;
         this.reconnectTimeoutId = null;
-        this.connect().catch((error) => {
-          console.error(
-            `Reconnection attempt ${this.reconnectAttempts} failed for ${this.messageId}:`,
-            error
-          );
+        this.connect().catch(() => {
           if (this.reconnectAttempts >= (this.options.maxReconnectAttempts || 0)) {
             this.enterCooldown();
           } else if (this.status !== "failed") {
@@ -35040,13 +35034,21 @@ const useScrollToBottom = (dependencies = [], threshold = 100, buttonThreshold =
     while (parent) {
       const { overflow, overflowY } = window.getComputedStyle(parent);
       if (overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll") {
-        containerRef.current = parent;
-        checkScrollPosition();
+        if (containerRef.current !== parent) {
+          containerRef.current = parent;
+          checkScrollPosition();
+          parent.addEventListener("scroll", handleScroll, { passive: true });
+        }
         break;
       }
       parent = parent.parentElement;
     }
-  }, [checkScrollPosition]);
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [checkScrollPosition, handleScroll]);
   return {
     ref,
     containerRef,
@@ -35072,7 +35074,7 @@ const ContentContainer$4 = styled$1(Box)({
   height: "100%",
   overflow: "hidden"
 });
-const StyledDivider = styled$1(Divider)(({ theme }) => ({
+styled$1(Divider)(({ theme }) => ({
   opacity: theme.palette.mode === "dark" ? 0.1 : 0.2,
   backgroundColor: theme.palette.divider
 }));
@@ -35515,7 +35517,7 @@ const DangerButton = styled$1(DialogButton)(({ theme }) => ({
   },
   transition: "all 0.2s ease-in-out"
 }));
-const FormContainer$2 = styled$1(Box)({
+const FormContainer$1 = styled$1(Box)({
   display: "flex",
   flexDirection: "column",
   gap: 20
@@ -46908,29 +46910,33 @@ const ModelSelect = ({
         getOptionLabel: (option) => option.name,
         isOptionEqualToValue: (option, value2) => option.id === value2.id,
         groupBy: (option) => getProviderFromId(option.id),
-        renderOption: (props, option) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionContainer, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionLabelContainer, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(OptionLabel, { children: option.name }),
-            option.recommended && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Recommended based on community usage and feedback", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RecommendedStar, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faStar, size: "xs" }) }) })
-          ] }),
-          option.description && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionDescription, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Markdown,
-            {
-              components: {
-                a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "a",
-                  {
-                    href,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    children
-                  }
-                )
-              },
-              children: option.description
-            }
-          ) })
-        ] }) }),
+        renderOption: (props, option) => {
+          const { key, ...rest } = props;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionContainer, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionLabelContainer, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(OptionLabel, { children: option.name }),
+              option.recommended && // @ts-ignore
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Recommended based on community usage and feedback", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RecommendedStar, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faStar, size: "xs" }) }) })
+            ] }),
+            option.description && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionDescription, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Markdown,
+              {
+                components: {
+                  a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "a",
+                    {
+                      href,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      children
+                    }
+                  )
+                },
+                children: option.description
+              }
+            ) })
+          ] }) }, key);
+        },
         freeSolo: allowCustom,
         renderInput: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           TextField,
@@ -47664,9 +47670,7 @@ const AttachmentsContainer = styled$1(Box)(({ theme }) => ({
   display: "flex",
   flexWrap: "wrap",
   gap: theme.spacing(1.5),
-  padding: theme.spacing(2),
-  borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-  backgroundColor: alpha(theme.palette.background.paper, 0.4)
+  padding: theme.spacing(1)
 }));
 const AttachmentItem = styled$1(Paper)(({ theme }) => ({
   position: "relative",
@@ -48061,98 +48065,204 @@ const useMessageInput = ({
     textareaRef
   };
 };
-const FormContainer$1 = styled$1("form")(({ theme }) => ({
-  padding: theme.spacing(3),
+const InputOuterContainer = styled$1(Box)(({ theme }) => ({
+  width: "100%",
+  flexGrow: 1,
+  flexShrink: 0,
+  minHeight: 0,
   display: "flex",
+  flexDirection: "column",
   alignItems: "center",
-  gap: theme.spacing(2),
-  borderTop: `1px solid ${alpha(theme.palette.divider, theme.palette.mode === "light" ? 0.2 : 0.1)}`,
-  backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.background.paper, 0.7) : alpha(theme.palette.background.paper, 0.4),
-  minHeight: 100,
-  position: "relative"
-  // Add position relative for the scroll button
+  justifyContent: "center",
+  padding: theme.spacing(1),
+  paddingBottom: theme.spacing(2),
+  backgroundColor: theme.palette.messagesView.background
 }));
-const AttachmentButton = styled$1(IconButton)(({ theme }) => ({
-  backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.primary.main, 0.8) : alpha(theme.palette.primary.main, 0.15),
-  color: theme.palette.mode === "light" ? theme.palette.common.white : theme.palette.primary.light,
-  width: 52,
-  height: 52,
-  borderRadius: theme.shape.borderRadius * 1.5,
-  marginRight: theme.spacing(1),
-  transition: "all 0.2s ease-in-out",
+const InputInnerContainer = styled$1(Box)(({ theme }) => ({
+  width: "900px",
+  maxWidth: "900px",
+  margin: "0 auto",
   display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    backgroundColor: theme.palette.mode === "light" ? theme.palette.primary.main : alpha(theme.palette.primary.main, 0.25),
-    transform: "translateY(-2px)",
-    boxShadow: theme.palette.mode === "light" ? `0 4px 8px ${alpha(theme.palette.primary.main, 0.4)}` : `0 4px 8px ${alpha(theme.palette.primary.main, 0.2)}`
+  flexDirection: "column",
+  gap: theme.spacing(1.5),
+  outline: "none",
+  borderRadius: theme.shape.borderRadius * 4,
+  border: `1px solid ${alpha(theme.palette.divider, theme.palette.mode === "light" ? 0.3 : 0.1)}`,
+  backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.background.paper, 0.9) : alpha(theme.palette.background.paper, 0.6),
+  padding: theme.spacing(2),
+  transition: "box-shadow 0.2s ease-in-out, outline 0.2s ease-in-out",
+  boxSizing: "border-box",
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100%",
+    width: "100%"
   },
-  "&:active": {
-    transform: "translateY(0px)",
-    boxShadow: "none"
+  [theme.breakpoints.between("sm", "md")]: {
+    maxWidth: "90%",
+    width: "90%"
   },
-  "&.Mui-disabled": {
-    backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.action.disabled, 0.3) : alpha(theme.palette.action.disabled, 0.1),
-    color: theme.palette.action.disabled
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "900px",
+    width: "900px"
+  },
+  // When the input inside is focused, add an outline instead of increasing border thickness
+  "&:has(.MuiOutlinedInput-root.Mui-focused)": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: "0px",
+    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`
+  }
+}));
+const SuggestionsContainer = styled$1(Box)(({ theme }) => ({
+  width: "100%",
+  maxWidth: "900px",
+  margin: "0 auto",
+  marginTop: theme.spacing(4),
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100%",
+    width: "100%"
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    maxWidth: "90%",
+    width: "90%"
+  },
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "900px",
+    width: "900px"
+  }
+}));
+const SuggestionChip = styled$1(Button)(({ theme }) => ({
+  borderRadius: 999,
+  textTransform: "none",
+  fontSize: "0.85rem",
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
+  whiteSpace: "nowrap",
+  variant: "outlined",
+  size: "small",
+  ...theme.palette.mode === "light" && {
+    backgroundColor: alpha(theme.palette.primary.main, 0.15),
+    color: darken(theme.palette.primary.main, 0.4),
+    borderColor: alpha(theme.palette.primary.main, 0.5),
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+      borderColor: alpha(theme.palette.primary.main, 0.7)
+    }
   }
 }));
 const StyledTextField$2 = styled$1(TextField)(({ theme }) => ({
   flex: 1,
   "& .MuiOutlinedInput-root": {
-    borderRadius: theme.shape.borderRadius * 1.5,
-    backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.common.white, 0.9) : alpha(theme.palette.background.paper, 0.6),
-    border: `1px solid ${alpha(
-      theme.palette.mode === "light" ? theme.palette.grey[300] : theme.palette.divider,
-      theme.palette.mode === "light" ? 0.5 : 0.1
-    )}`,
-    transition: "all 0.2s ease-in-out",
+    backgroundColor: "transparent",
+    padding: "6px 8px",
+    fontSize: "1rem",
+    display: "flex",
+    alignItems: "center",
+    "& fieldset": {
+      border: "none"
+    },
+    "&:hover fieldset": {
+      border: "none"
+    },
+    "&.Mui-focused fieldset": {
+      border: "none"
+    },
     "&.Mui-focused": {
-      backgroundColor: theme.palette.mode === "light" ? theme.palette.common.white : alpha(theme.palette.background.paper, 0.8),
-      boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, theme.palette.mode === "light" ? 0.2 : 0.15)}`,
-      borderColor: alpha(theme.palette.primary.main, 0.5)
+      backgroundColor: "transparent",
+      boxShadow: "none"
     },
     "&:hover": {
-      backgroundColor: theme.palette.mode === "light" ? theme.palette.common.white : alpha(theme.palette.background.paper, 0.7),
-      borderColor: theme.palette.mode === "light" ? alpha(theme.palette.primary.main, 0.3) : alpha(theme.palette.primary.main, 0.2)
-    },
-    padding: "14px 18px",
-    fontSize: "1rem",
-    minHeight: 48,
-    display: "flex",
-    alignItems: "center"
+      backgroundColor: "transparent"
+    }
   },
   "& .MuiInputBase-input": {
-    color: theme.palette.text.primary
+    color: theme.palette.text.primary,
+    overflowY: "auto",
+    scrollbarWidth: "thin",
+    scrollbarColor: `${alpha(theme.palette.text.primary, 0.5)} transparent`,
+    /* Firefox */
+    "&::-webkit-scrollbar": {
+      width: "8px",
+      height: "8px"
+    },
+    "&::-webkit-scrollbar-track": {
+      background: "transparent"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: alpha(theme.palette.text.primary, 0.5),
+      borderRadius: "4px"
+    },
+    "&::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: alpha(theme.palette.text.primary, 0.7)
+    }
   },
   "& .MuiInputBase-input::placeholder": {
     color: theme.palette.mode === "light" ? alpha(theme.palette.text.secondary, 0.7) : alpha(theme.palette.text.secondary, 0.5),
     opacity: 1
   }
 }));
+const ButtonsRow = styled$1(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1)
+}));
+const AttachmentButton = styled$1(IconButton)(({ theme }) => ({
+  backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.primary.main, 0.1) : alpha(theme.palette.primary.main, 0.15),
+  color: theme.palette.primary.main,
+  width: 40,
+  height: 40,
+  borderRadius: "100%",
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.primary.main, 0.2) : alpha(theme.palette.primary.main, 0.25),
+    transform: "scale(1.1)"
+  },
+  "&:active": {
+    transform: "scale(1)"
+  },
+  "&.Mui-disabled": {
+    backgroundColor: alpha(theme.palette.action.disabled, 0.1),
+    color: theme.palette.action.disabled
+  }
+}));
 const SendButton = styled$1(Button)(({ theme }) => ({
-  borderRadius: theme.shape.borderRadius * 1.5,
-  minWidth: "auto",
-  width: 48,
-  height: 48,
+  minWidth: 40,
+  height: 40,
+  borderRadius: "100%",
   padding: 0,
-  marginLeft: theme.spacing(1),
-  boxShadow: theme.palette.mode === "light" ? theme.shadows[3] : theme.shadows[2],
-  transition: "all 0.2s ease-in-out",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  "&:not(:disabled):hover": {
-    transform: "translateY(-2px)",
-    boxShadow: theme.palette.mode === "light" ? theme.shadows[5] : theme.shadows[4]
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    transform: "scale(1.1)"
   },
-  "&:not(:disabled):active": {
-    transform: "translateY(0px)",
-    boxShadow: theme.shadows[1]
+  "&:active": {
+    transform: "scale(1)"
   },
   "&.Mui-disabled": {
-    backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.action.disabled, 0.3) : alpha(theme.palette.action.disabled, 0.2),
-    color: theme.palette.mode === "light" ? alpha(theme.palette.common.white, 0.7) : alpha(theme.palette.common.white, 0.5)
+    backgroundColor: alpha(theme.palette.action.disabled, 0.1),
+    color: alpha(theme.palette.common.white, 0.5)
+  }
+}));
+const EmptyStateContainer$4 = styled$1(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: theme.spacing(4),
+  gap: theme.spacing(2)
+}));
+const EmptyStateTitle = styled$1(Typography)(({ theme }) => ({
+  fontSize: "1.25rem",
+  fontWeight: 500,
+  color: theme.palette.text.secondary,
+  textAlign: "center",
+  marginBottom: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
+    fontSize: "1.5rem",
+    marginBottom: theme.spacing(2)
   }
 }));
 const MessageInput = ({
@@ -48164,10 +48274,20 @@ const MessageInput = ({
   onCancelJob,
   isFarFromBottom = false,
   scrollToBottom = () => {
-  }
+  },
+  initialSuggestions
 }) => {
   const [attachments, setAttachments] = reactExports.useState([]);
   const fileInputRef = reactExports.useRef(null);
+  const MAX_SUGGESTIONS = 7;
+  const suggestions = reactExports.useMemo(() => {
+    if (!initialSuggestions || initialSuggestions.length === 0) return [];
+    if (initialSuggestions.length <= MAX_SUGGESTIONS) {
+      return initialSuggestions;
+    }
+    const shuffled = [...initialSuggestions].sort(() => Math.random() - 0.5);
+    return shuffled.slice(0, MAX_SUGGESTIONS);
+  }, [initialSuggestions]);
   const {
     inputValue: newMessage,
     setInputValue: setNewMessage,
@@ -48183,7 +48303,6 @@ const MessageInput = ({
     },
     scrollToBottom,
     forceScrollToBottom: scrollToBottom
-    // Use the scrollToBottom function for both regular and forced scrolling
   });
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -48219,42 +48338,27 @@ const MessageInput = ({
     fileInputRef.current?.click();
   };
   const isInputDisabled = Boolean(isLoading && currentJobId);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ScrollToBottomButton,
-        {
-          visible: isFarFromBottom,
-          onClick: scrollToBottom
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "file",
-          ref: fileInputRef,
-          onChange: handleFileSelect,
-          style: { display: "none" },
-          disabled: isInputDisabled,
-          multiple: true
+  const handleSuggestionClick = (suggestion) => {
+    if (isInputDisabled) return;
+    onSendMessage(suggestion, attachments);
+    setAttachments([]);
+    setNewMessage("");
+  };
+  const inputContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(InputInnerContainer, { children: [
+      attachments.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AttachmentsPreview,
+        {
+          attachments,
+          onRemoveAttachment: handleRemoveAttachment,
+          disabled: isInputDisabled
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Attach file", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        AttachmentButton,
-        {
-          onClick: triggerFileInput,
-          color: "primary",
-          size: "medium",
-          "aria-label": "Attach file",
-          disabled: isInputDisabled,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperclip })
-        }
-      ) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         StyledTextField$2,
         {
           fullWidth: true,
-          placeholder: isInputDisabled ? "⌛ Agent is busy..." : "✨ Type to Chat! Press ↵ to send, Shift+↵ for new line 📝",
+          placeholder: isInputDisabled ? "⌛ Agent is busy" : "Ask me for help",
           value: newMessage,
           onChange: (e) => setNewMessage(e.target.value),
           onKeyDown: handleKeyDown,
@@ -48265,34 +48369,94 @@ const MessageInput = ({
           disabled: isInputDisabled
         }
       ),
-      isLoading && currentJobId ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Stop agent", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SendButton,
-        {
-          type: "button",
-          variant: "contained",
-          color: "error",
-          onClick: () => onCancelJob?.(currentJobId),
-          "aria-label": "Stop agent",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faStop })
-        }
-      ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Send message", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SendButton,
-        {
-          type: "submit",
-          variant: "contained",
-          color: "primary",
-          disabled: isLoading || !newMessage.trim() && attachments.length === 0,
-          "aria-label": "Send message",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperPlane })
-        }
-      ) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonsRow, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "file",
+              ref: fileInputRef,
+              onChange: handleFileSelect,
+              style: { display: "none" },
+              disabled: isInputDisabled,
+              multiple: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Attach file", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            AttachmentButton,
+            {
+              onClick: triggerFileInput,
+              color: "primary",
+              size: "small",
+              "aria-label": "Attach file",
+              disabled: isInputDisabled,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperclip })
+            }
+          ) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", alignItems: "center", gap: 1, children: isLoading && currentJobId ? (
+          // @ts-ignore Tooltip type issue
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Stop agent", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SendButton,
+            {
+              type: "button",
+              variant: "contained",
+              color: "error",
+              onClick: () => onCancelJob?.(currentJobId),
+              "aria-label": "Stop agent",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faStop })
+            }
+          ) }) })
+        ) : (
+          // @ts-ignore Tooltip type issue
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Send message", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SendButton,
+            {
+              type: "submit",
+              variant: "contained",
+              color: "primary",
+              disabled: isLoading || !newMessage.trim() && attachments.length === 0,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperPlane })
+            }
+          ) }) })
+        ) })
+      ] })
     ] }),
-    attachments.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AttachmentsPreview,
+    messages.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SuggestionsContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box,
       {
-        attachments,
-        onRemoveAttachment: handleRemoveAttachment,
-        disabled: isInputDisabled
+        sx: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 1,
+          marginTop: 1.5,
+          justifyContent: "center"
+        },
+        children: suggestions.map((suggestion) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SuggestionChip,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: () => handleSuggestionClick(suggestion),
+            disabled: isInputDisabled,
+            children: suggestion
+          },
+          suggestion
+        ))
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(InputOuterContainer, { children: messages.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(EmptyStateContainer$4, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateTitle, { variant: "h6", children: "What can I help you with today?" }),
+      inputContent
+    ] }) : inputContent }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ScrollToBottomButton,
+      {
+        visible: isFarFromBottom,
+        onClick: scrollToBottom
       }
     )
   ] });
@@ -107462,12 +107626,11 @@ const useWebSocketMessage = (options) => {
   reactExports.useEffect(() => {
     if (autoConnect && messageId && baseUrl && connectRef.current && !clientRef.current && !globalClientsRef.current[messageId]) {
       const timestamp = (/* @__PURE__ */ new Date()).toISOString().substring(11, 23);
-      console.log(`[${timestamp}] Auto-connecting WebSocket for ${messageId}`);
       globalClientsRef.current[messageId] = true;
       setTimeout(() => {
         if (connectRef.current) {
           connectRef.current().catch((err) => {
-            console.error(
+            console.warn(
               `[${timestamp}] Error auto-connecting WebSocket for ${messageId}:`,
               err
             );
@@ -108705,16 +108868,18 @@ const MessageItem = reactExports.memo(
     return prevProps.message.id === nextProps.message.id && prevProps.message.message === nextProps.message.message && prevProps.message.status === nextProps.message.status && prevProps.message.is_complete === nextProps.message.is_complete && prevProps.message.is_streamable === nextProps.message.is_streamable;
   }
 );
-const MessagesContainer = styled$1(Box)(({ theme }) => ({
-  flexGrow: 1,
-  overflow: "auto",
-  padding: 16,
+const MessagesContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "collapsed"
+})(({ theme, collapsed }) => ({
+  flexGrow: collapsed ? 0 : 1,
+  height: collapsed ? 0 : "100%",
+  overflow: collapsed ? "hidden" : "auto",
+  padding: collapsed ? 0 : 16,
   display: "flex",
   flexDirection: "column",
   gap: 16,
   backgroundColor: theme.palette.messagesView.background,
   position: "relative",
-  // Add position relative for absolute positioning of children
   "&::-webkit-scrollbar": {
     width: "8px"
   },
@@ -108722,7 +108887,6 @@ const MessagesContainer = styled$1(Box)(({ theme }) => ({
     backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)",
     borderRadius: "4px"
   },
-  // Improve GPU acceleration for smoother scrolling
   transform: "translateZ(0)",
   willChange: "scroll-position"
 }));
@@ -108755,22 +108919,14 @@ const LoadingBox = styled$1(Box)({
   justifyContent: "center",
   padding: 32
 });
-const EmptyMessagesBox = styled$1(Box)(({ theme }) => ({
-  textAlign: "center",
-  color: theme.palette.text.secondary,
-  padding: 32,
-  fontSize: "0.9rem",
+const FullScreenCenteredContainer = styled$1(Box)({
   display: "flex",
-  flexDirection: "column",
+  justifyContent: "center",
   alignItems: "center",
-  justifyContent: "center"
-}));
-const EmptyMessagesIcon = styled$1(FontAwesomeIcon)(({ theme }) => ({
-  fontSize: "2rem",
-  opacity: 0.5,
-  marginBottom: "1rem",
-  color: theme.palette.text.secondary
-}));
+  flexGrow: 1,
+  height: "100%",
+  width: "100%"
+});
 const MessagesView = ({
   messages,
   isLoading,
@@ -108785,7 +108941,8 @@ const MessagesView = ({
   refetch,
   conversationId
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
+  const collapsed = messages.length === 0 && !isLoadingMessages && !isFetchingMore;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagesContainer, { ref: messagesContainerRef, collapsed, children: [
     isFetchingMore && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingMoreIndicator, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 20, sx: { mr: 1 } }),
       "Loading more messages..."
@@ -108821,22 +108978,16 @@ const MessagesView = ({
             }
           )
         ] })
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(EmptyMessagesBox, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyMessagesIcon, { icon: faCommentDots }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "No messages yet. Start a conversation!" })
-        ] }),
-        isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(CenteredMessagesContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LoadingIndicator,
-          {
-            status: jobStatus,
-            agentName,
-            currentExecution,
-            scrollToBottom,
-            conversationId
-          }
-        ) })
-      ] }),
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingMessages && /* @__PURE__ */ jsxRuntimeExports.jsx(FullScreenCenteredContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        LoadingIndicator,
+        {
+          status: jobStatus,
+          agentName,
+          currentExecution,
+          scrollToBottom,
+          conversationId
+        }
+      ) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
     ] })
   ] });
@@ -108862,6 +109013,29 @@ styled$1(Box)({
   whiteSpace: "pre-wrap",
   overflow: "auto"
 });
+const DEFAULT_MESSAGE_SUGGESTIONS = [
+  "Go to my documents folder",
+  "What's the latest news?",
+  "Make me a research report on the latest trends in AI",
+  "Make me a space invaders game",
+  "Organize my desktop",
+  "Create a presentation outline on climate change",
+  "Train a classifier on the MPG dataset",
+  "Search for quantum computing papers and download interesting ones to read later",
+  "Download some recent papers on fusion energy",
+  "Download some recent papers on cancer research",
+  "Make me a brick breaker game",
+  "Remove downloads that are more than a year old",
+  "Put together a competitive analysis report on the agentic AI space",
+  "Find me a royalty free gif of a cute cat",
+  "Go to my downloads folder",
+  "Organize my documents folder",
+  "Make me a GDPR compliant privacy policy",
+  "Look up trending stocks and put together an investment report",
+  "Fetch the MNIST dataset and train a good classifier",
+  "Look up interest rate trends and make a projection for the next 5 years",
+  "Make a presentation with a dependency graph of genetic factors for Alzheimer's disease"
+];
 const ChatContainer = styled$1(Paper)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -108932,11 +109106,11 @@ const ChatContent = ({
         conversationId: agentId
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDivider, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    !(isLoadingMessages && messages.length === 0) && /* @__PURE__ */ jsxRuntimeExports.jsx(
       MessageInput,
       {
         onSendMessage,
+        initialSuggestions: DEFAULT_MESSAGE_SUGGESTIONS,
         isLoading,
         conversationId: agentId,
         messages,
@@ -109097,10 +109271,12 @@ const AgentOptionsMenu = ({
   isAgentsPage = false,
   onViewAgentSettings,
   onChatWithAgent,
-  onExportAgent
+  onExportAgent,
+  onClearConversation
 }) => {
   const [menuAnchorEl, setMenuAnchorEl] = reactExports.useState(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = reactExports.useState(false);
+  const [isClearModalOpen, setIsClearModalOpen] = reactExports.useState(false);
   const isMenuOpen = Boolean(menuAnchorEl);
   const deleteAgentMutation = useDeleteAgent();
   const handleOpenMenu = (e) => {
@@ -109117,6 +109293,13 @@ const AgentOptionsMenu = ({
   const handleCloseDeleteConfirmation = () => {
     setIsDeleteModalOpen(false);
   };
+  const handleOpenClearConfirmation = () => {
+    setIsClearModalOpen(true);
+    handleCloseMenu();
+  };
+  const handleCloseClearConfirmation = () => {
+    setIsClearModalOpen(false);
+  };
   const { clearAgentFromAllPages } = useAgentSelectionStore();
   const handleConfirmDelete = async () => {
     try {
@@ -109197,6 +109380,10 @@ const AgentOptionsMenu = ({
               ]
             }
           ),
+          onClearConversation && /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledMenuItem, { onClick: handleOpenClearConfirmation, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faTrash, size: "sm" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: "Clear Conversation" })
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(DeleteMenuItem, { onClick: handleOpenDeleteConfirmation, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon, { color: "error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faTrash, size: "sm" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: "Delete Agent" })
@@ -109223,6 +109410,24 @@ const AgentOptionsMenu = ({
         onConfirm: handleConfirmDelete,
         onCancel: handleCloseDeleteConfirmation
       }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfirmationModal,
+      {
+        open: isClearModalOpen,
+        title: "Clear Conversation",
+        message: "Are you sure you want to clear this conversation? This action cannot be undone and all messages will be permanently deleted.",
+        confirmText: "Clear",
+        cancelText: "Cancel",
+        isDangerous: true,
+        onConfirm: () => {
+          if (onClearConversation) {
+            onClearConversation();
+          }
+          handleCloseClearConfirmation();
+        },
+        onCancel: handleCloseClearConfirmation
+      }
     )
   ] });
 };
@@ -109413,7 +109618,7 @@ const CreateAgentDialog = ({
       maxWidth: "sm",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Subtitle$1, { children: "Configure your new AI assistant with a name and optional description" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("form", { id: "create-agent-form", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("form", { id: "create-agent-form", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             NameField,
             {
@@ -109609,7 +109814,7 @@ const ImportAgentDialog = ({
       maxWidth: "sm",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Subtitle, { children: "Import an agent from a ZIP file exported from Local Operator. The file should contain an agent.yml file." }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             FileInput,
             {
@@ -109935,6 +110140,7 @@ const ChatSidebar = ({
   const [isImportDialogOpen, setIsImportDialogOpen] = reactExports.useState(false);
   const perPage = 50;
   const exportAgentMutation = useExportAgent();
+  const clearConversationMutation = useClearAgentConversation();
   const { page, setPage } = usePaginationParams();
   const {
     data: agents = [],
@@ -110092,6 +110298,11 @@ const ChatSidebar = ({
                       isAgentsPage: false,
                       onViewAgentSettings: onNavigateToAgentSettings ? () => onNavigateToAgentSettings(agent.id) : void 0,
                       onExportAgent: () => handleExportAgent(agent.id),
+                      onClearConversation: () => {
+                        clearConversationMutation.mutate({
+                          agentId: agent.id
+                        });
+                      },
                       onAgentDeleted: (deletedAgentId) => {
                         if (selectedConversation === deletedAgentId) {
                           onSelectConversation("");
@@ -110376,6 +110587,7 @@ const ChatPage = () => {
     },
     [addMessage, conversationId, setCurrentJobId, setIsLoading]
   );
+  const { data: configData } = useConfig();
   const handleSendMessage = reactExports.useCallback(
     async (content2, attachments) => {
       if (!conversationId) return;
@@ -110404,16 +110616,15 @@ const ChatPage = () => {
             ([_2, value]) => value !== void 0 && value !== null
           )
         );
+        const resolvedHosting = !agentData?.hosting || agentData.hosting === "default" || agentData.hosting.trim() === "" ? configData?.values.hosting || "" : agentData.hosting;
+        const resolvedModel = !agentData?.model || agentData.model === "default" || agentData.model.trim() === "" ? configData?.values.model_name || "" : agentData.model;
         const jobDetails = await apiClient.chat.processAgentChatAsync(
           conversationId,
           {
-            hosting: agentData?.hosting || "openrouter",
-            // Use agent's hosting or default
-            model: agentData?.model || "google/gemini-2.0-flash-001",
-            // Use agent's model or default
+            hosting: resolvedHosting,
+            model: resolvedModel,
             prompt: content2,
             persist_conversation: true,
-            // Persist conversation history
             user_message_id: userMessage.id,
             options: Object.keys(filteredOptions).length > 0 ? filteredOptions : void 0,
             attachments: attachments.length > 0 ? attachments : void 0
@@ -110452,7 +110663,8 @@ ${error2.stack || ""}`;
       setIsLoading,
       agentData,
       apiClient,
-      setCurrentJobId
+      setCurrentJobId,
+      configData
     ]
   );
   const rawInfoContent = reactExports.useMemo(() => {
@@ -115333,7 +115545,7 @@ const CredentialDialog = ({
       actions: dialogActions,
       maxWidth: "sm",
       fullWidth: true,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { children: [
         !initialKey && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(FormControl, { fullWidth: true, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "credential-key-label", children: "Credential Type" }),

package/out/renderer/index.html

@@ -8,7 +8,7 @@
   <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
   <meta http-equiv="Content-Security-Policy"
     content="default-src 'self'; connect-src 'self' http://localhost:1111 http://127.0.0.1:1111 ws://localhost:1111 ws://127.0.0.1:1111; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: http://localhost:1111 http://127.0.0.1:1111; media-src 'self' http://localhost:1111 http://127.0.0.1:1111; font-src 'self'" />
-  <script type="module" crossorigin src="./assets/index-Cu-Ty0jC.js"></script>
+  <script type="module" crossorigin src="./assets/index-BQg1gNa7.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/error-boundary-HK_94N6W.js">
   <link rel="stylesheet" crossorigin href="./assets/error-boundary-B9KBGB-g.css">
   <link rel="stylesheet" crossorigin href="./assets/index-94BTFuhu.css">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "local-operator-ui",
-	"version": "0.4.0",
+	"version": "0.4.3",
 	"productName": "Local Operator",
 	"description": "User interface for AI agent assistants that run Python code safely on your device through an intuitive chat interface. Supports local and cloud LLM models with built-in security features.",
 	"main": "./out/main/index.js",
@@ -167,8 +167,18 @@
 			"gatekeeperAssess": false,
 			"entitlements": "build/entitlements.mac.plist",
 			"entitlementsInherit": "build/entitlements.mac.plist",
-			"target": ["dmg", "zip"],
-			"artifactName": "${name}-${version}-${arch}.${ext}"
+			"target": [
+				{
+					"target": "dmg",
+					"arch": ["universal"]
+				},
+				{
+					"target": "zip",
+					"arch": ["universal"]
+				}
+			],
+			"artifactName": "${name}-${version}-${arch}.${ext}",
+			"x64ArchFiles": "Contents/Resources/python/**/*"
 		},
 		"dmg": {
 			"sign": false,