local-operator-ui 0.4.2 → 0.4.4

package/out/renderer/assets/{index-DHvoVezG.js → index-ChdP-bmN.js}

@@ -1,4 +1,4 @@
-import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as getDefaultExportFromCjs, k as requireReactDom, R as React, l as generateUtilityClasses, m as useDefaultProps, s as styled$1, n as memoTheme, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, p as React$1, T as TransitionGroupContext, q as duration, t as useTheme$1, v as useTimeout, w as useId, B as ButtonBase, x as alpha, y as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, z as darken, A as lighten, D as useEventCallback, E as setRef, F as useEnhancedEffect, G as useRtl, H as globalCss, I as formatMuiErrorMessage, J as rootShouldForwardProp, K as Typography, L as deepmerge, M as extendSxProp, N as resolveBreakpointValues, O as handleBreakpoints, Q as getPath, S as isFocusVisible, U as typographyClasses, V as slotShouldForwardProp, W as clamp, X as emphasize, Y as Timeout, Z as requireReact, $ as LinearProgress, a0 as Button, a1 as Box, a2 as FontAwesomeIcon, a3 as faRobot, a4 as faSliders, a5 as faExclamationTriangle, a6 as faCheck, a7 as faTimes, a8 as faEraser, a9 as faPen, aa as faInfoCircle, ab as faGear, ac as faServer, ad as faStar, ae as faTrash, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as keyframes, aF as faChevronUp, aG as faQuestion, aH as faFile, aI as faLightbulb, aJ as faCode, aK as faCommentDots, aL as faEdit, aM as faPencilAlt, aN as faChevronRight, aO as faUser, aP as faCopy, aQ as isDevelopmentMode, aR as faEllipsisVertical, aS as faComment, aT as faFileExport, aU as faChevronLeft, aV as faFileImport, aW as faUpload, aX as faPlus, aY as faSearch, aZ as faCommentSlash, a_ as faArrowRight, a$ as faComments, b0 as faTag, b1 as faIdCard, b2 as faCalendarAlt, b3 as faCodeBranch, b4 as faShieldAlt, b5 as faArrowLeft, b6 as faShield, b7 as faSignOut, b8 as darkTheme, b9 as lightTheme, ba as draculaTheme, bb as sageTheme, bc as monokaiTheme, bd as tokyoNightTheme, be as duneTheme, bf as icebergTheme, bg as faMagicWandSparkles, bh as faBrain, bi as faWandMagicSparkles, bj as faExternalLinkAlt, bk as faKey, bl as faGlobe, bm as faLock, bn as faAdjust, bo as faSave, bp as faMoon, bq as faSun, br as faSkull, bs as faLeaf, bt as faMountain, bu as faFire, bv as faIcicles, bw as faEnvelope, bx as faCloudUploadAlt, by as faHistory, bz as faListAlt, bA as library$1, bB as icons$1, bC as CssBaseline, bD as ThemeProvider$1, bE as ReactDOM$1, bF as ErrorBoundary } from "./error-boundary-HK_94N6W.js";
+import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as getDefaultExportFromCjs, k as requireReactDom, R as React, l as generateUtilityClasses, m as useDefaultProps, s as styled$1, n as memoTheme, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose, p as React$1, T as TransitionGroupContext, q as duration, t as useTheme$1, v as useTimeout, w as useId, B as ButtonBase, x as alpha, y as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, z as darken, A as lighten, D as useEventCallback, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as requireReact, Z as LinearProgress, $ as Button, a0 as Box, a1 as FontAwesomeIcon, a2 as faRobot, a3 as faSliders, a4 as faExclamationTriangle, a5 as faCheck, a6 as faTimes, a7 as faEraser, a8 as faPen, a9 as faInfoCircle, aa as faGear, ab as faServer, ac as faStar, ad as faTrash, ae as faHome, af as faDownload, ag as faFileAlt, ah as faDesktop, ai as faImage, aj as faMusic, ak as faVideo, al as faLaptop, am as faUsers, an as faDatabase, ao as faBoxOpen, ap as faBook, aq as faHdd, ar as faBox, as as faArchive, at as faNetworkWired, au as faFolder, av as faFolderOpen, aw as faClock, ax as faChevronDown, ay as faTools, az as faArrowDown, aA as faPaperclip, aB as faStop, aC as faPaperPlane, aD as _extends$2, aE as keyframes, aF as faChevronUp, aG as faQuestion, aH as faFile, aI as faLightbulb, aJ as faCode, aK as faCommentDots, aL as faEdit, aM as faPencilAlt, aN as faChevronRight, aO as faUser, aP as faCopy, aQ as isDevelopmentMode, aR as faEllipsisVertical, aS as faComment, aT as faFileExport, aU as faChevronLeft, aV as faFileImport, aW as faUpload, aX as faPlus, aY as faSearch, aZ as faCommentSlash, a_ as faArrowRight, a$ as faComments, b0 as faTag, b1 as faIdCard, b2 as faCalendarAlt, b3 as faCodeBranch, b4 as faShieldAlt, b5 as faArrowLeft, b6 as faShield, b7 as faSignOut, b8 as darkTheme, b9 as lightTheme, ba as draculaTheme, bb as sageTheme, bc as monokaiTheme, bd as tokyoNightTheme, be as duneTheme, bf as icebergTheme, bg as faMagicWandSparkles, bh as faBrain, bi as faWandMagicSparkles, bj as faExternalLinkAlt, bk as faKey, bl as faGlobe, bm as faLock, bn as faAdjust, bo as faSave, bp as faMoon, bq as faSun, br as faSkull, bs as faLeaf, bt as faMountain, bu as faFire, bv as faIcicles, bw as faEnvelope, bx as faCloudUploadAlt, by as faHistory, bz as faListAlt, bA as library$1, bB as icons$1, bC as CssBaseline, bD as ThemeProvider$1, bE as ReactDOM$1, bF as ErrorBoundary } from "./error-boundary-BSN19Qr4.js";
 const styled = createStyled();
 function getThemeProps(params) {
   const {
@@ -68,6 +68,13 @@ function ownerWindow(node2) {
   const doc = ownerDocument(node2);
   return doc.defaultView || window;
 }
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
 function useControlled({
   controlled,
   default: defaultProp,
@@ -480,7 +487,7 @@ function partialMatchKey(a, b2) {
     return false;
   }
   if (a && b2 && typeof a === "object" && typeof b2 === "object") {
-    return !Object.keys(b2).some((key) => !partialMatchKey(a[key], b2[key]));
+    return Object.keys(b2).every((key) => partialMatchKey(a[key], b2[key]));
   }
   return false;
 }
@@ -844,6 +851,7 @@ function createRetryer(config2) {
     }
   };
 }
+var defaultScheduler = (cb) => setTimeout(cb, 0);
 function createNotifyManager() {
   let queue = [];
   let transactions = 0;
@@ -853,7 +861,7 @@ function createNotifyManager() {
   let batchNotifyFn = (callback) => {
     callback();
   };
-  let scheduleFn = (cb) => setTimeout(cb, 0);
+  let scheduleFn = defaultScheduler;
   const schedule = (callback) => {
     if (transactions) {
       queue.push(callback);
@@ -1839,13 +1847,11 @@ function getPreviousPageParam(options, { pages, pageParams }) {
   return pages.length > 0 ? options.getPreviousPageParam?.(pages[0], pages, pageParams[0], pageParams) : void 0;
 }
 function hasNextPage(options, data) {
-  if (!data)
-    return false;
+  if (!data) return false;
   return getNextPageParam(options, data) != null;
 }
 function hasPreviousPage(options, data) {
-  if (!data || !options.getPreviousPageParam)
-    return false;
+  if (!data || !options.getPreviousPageParam) return false;
   return getPreviousPageParam(options, data) != null;
 }
 var QueryClient = class {
@@ -1867,8 +1873,7 @@ var QueryClient = class {
   }
   mount() {
     this.#mountCount++;
-    if (this.#mountCount !== 1)
-      return;
+    if (this.#mountCount !== 1) return;
     this.#unsubscribeFocus = focusManager.subscribe(async (focused) => {
       if (focused) {
         await this.resumePausedMutations();
@@ -1884,8 +1889,7 @@ var QueryClient = class {
   }
   unmount() {
     this.#mountCount--;
-    if (this.#mountCount !== 0)
-      return;
+    if (this.#mountCount !== 0) return;
     this.#unsubscribeFocus?.();
     this.#unsubscribeFocus = void 0;
     this.#unsubscribeOnline?.();
@@ -1897,6 +1901,13 @@ var QueryClient = class {
   isMutating(filters) {
     return this.#mutationCache.findAll({ ...filters, status: "pending" }).length;
   }
+  /**
+   * Imperative (non-reactive) way to retrieve data for a QueryKey.
+   * Should only be used in callbacks or functions where reading the latest data is necessary, e.g. for optimistic updates.
+   *
+   * Hint: Do not use this function inside a component, because it won't receive updates.
+   * Use `useQuery` to create a `QueryObserver` that subscribes to changes.
+   */
   getQueryData(queryKey) {
     const options = this.defaultQueryOptions({ queryKey });
     return this.#queryCache.get(options.queryHash)?.state.data;
@@ -2199,7 +2210,7 @@ var QueryObserver = class extends Subscribable {
     this.#clearRefetchInterval();
     this.#currentQuery.removeObserver(this);
   }
-  setOptions(options, notifyOptions) {
+  setOptions(options) {
     const prevOptions = this.options;
     const prevQuery = this.#currentQuery;
     this.options = this.#client.defaultQueryOptions(options);
@@ -2226,7 +2237,7 @@ var QueryObserver = class extends Subscribable {
     )) {
       this.#executeFetch();
     }
-    this.updateResult(notifyOptions);
+    this.updateResult();
     if (mounted && (this.#currentQuery !== prevQuery || resolveEnabled(this.options.enabled, this.#currentQuery) !== resolveEnabled(prevOptions.enabled, this.#currentQuery) || resolveStaleTime(this.options.staleTime, this.#currentQuery) !== resolveStaleTime(prevOptions.staleTime, this.#currentQuery))) {
       this.#updateStaleTimeout();
     }
@@ -2491,7 +2502,7 @@ var QueryObserver = class extends Subscribable {
     }
     return nextResult;
   }
-  updateResult(notifyOptions) {
+  updateResult() {
     const prevResult = this.#currentResult;
     const nextResult = this.createResult(this.#currentQuery, this.options);
     this.#currentResultState = this.#currentQuery.state;
@@ -2503,7 +2514,6 @@ var QueryObserver = class extends Subscribable {
       return;
     }
     this.#currentResult = nextResult;
-    const defaultNotifyOptions = {};
     const shouldNotifyListeners = () => {
       if (!prevResult) {
         return true;
@@ -2525,10 +2535,7 @@ var QueryObserver = class extends Subscribable {
         return changed && includedProps.has(typedKey);
       });
     };
-    if (notifyOptions?.listeners !== false && shouldNotifyListeners()) {
-      defaultNotifyOptions.listeners = true;
-    }
-    this.#notify({ ...defaultNotifyOptions, ...notifyOptions });
+    this.#notify({ listeners: shouldNotifyListeners() });
   }
   #updateQuery() {
     const query = this.#client.getQueryCache().build(this.#client, this.options);
@@ -2597,14 +2604,11 @@ var InfiniteQueryObserver = class extends QueryObserver {
     this.fetchNextPage = this.fetchNextPage.bind(this);
     this.fetchPreviousPage = this.fetchPreviousPage.bind(this);
   }
-  setOptions(options, notifyOptions) {
-    super.setOptions(
-      {
-        ...options,
-        behavior: infiniteQueryBehavior()
-      },
-      notifyOptions
-    );
+  setOptions(options) {
+    super.setOptions({
+      ...options,
+      behavior: infiniteQueryBehavior()
+    });
   }
   getOptimisticResult(options) {
     options.behavior = infiniteQueryBehavior();
@@ -2862,7 +2866,7 @@ function useBaseQuery(options, Observer, queryClient2) {
     () => observer.getCurrentResult()
   );
   reactExports.useEffect(() => {
-    observer.setOptions(defaultedOptions, { listeners: false });
+    observer.setOptions(defaultedOptions);
   }, [defaultedOptions, observer]);
   if (shouldSuspend(defaultedOptions, result)) {
     throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);
@@ -2945,8 +2949,8 @@ const ReactDOM = /* @__PURE__ */ getDefaultExportFromCjs(reactDomExports);
  *
  * @license MIT
  */
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2957,7 +2961,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 var Action;
 (function(Action2) {
@@ -3034,7 +3038,7 @@ function createLocation(current, to, state, key) {
   if (state === void 0) {
     state = null;
   }
-  let location = _extends$2({
+  let location = _extends$1({
     pathname: typeof current === "string" ? current : current.pathname,
     search: "",
     hash: ""
@@ -3091,7 +3095,7 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options)
   let index2 = getIndex();
   if (index2 == null) {
     index2 = 0;
-    globalHistory.replaceState(_extends$2({}, globalHistory.state, {
+    globalHistory.replaceState(_extends$1({}, globalHistory.state, {
       idx: index2
     }), "");
   }
@@ -3501,7 +3505,7 @@ function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
   if (typeof toArg === "string") {
     to = parsePath(toArg);
   } else {
-    to = _extends$2({}, toArg);
+    to = _extends$1({}, toArg);
     invariant(!to.pathname || !to.pathname.includes("?"), getInvalidPathError("?", "pathname", "search", to));
     invariant(!to.pathname || !to.pathname.includes("#"), getInvalidPathError("#", "pathname", "hash", to));
     invariant(!to.search || !to.search.includes("#"), getInvalidPathError("#", "search", "hash", to));
@@ -3552,8 +3556,8 @@ new Set(validRequestMethodsArr);
  *
  * @license MIT
  */
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3564,7 +3568,7 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 const DataRouterContext = /* @__PURE__ */ reactExports.createContext(null);
 const DataRouterStateContext = /* @__PURE__ */ reactExports.createContext(null);
@@ -3691,7 +3695,7 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
   if (locationArg && renderedMatches) {
     return /* @__PURE__ */ reactExports.createElement(LocationContext.Provider, {
       value: {
-        location: _extends$1({
+        location: _extends({
           pathname: "/",
           search: "",
           hash: "",
@@ -3958,7 +3962,7 @@ function useNavigateStable() {
     if (typeof to === "number") {
       router.navigate(to);
     } else {
-      router.navigate(to, _extends$1({
+      router.navigate(to, _extends({
         fromRouteId: id
       }, options));
     }
@@ -4022,7 +4026,7 @@ function Router(_ref5) {
     basename: basename2,
     navigator: navigator2,
     static: staticProp,
-    future: _extends$1({
+    future: _extends({
       v7_relativeSplatPath: false
     }, future)
   }), [basename2, future, navigator2, staticProp]);
@@ -4666,7 +4670,7 @@ var Transition = /* @__PURE__ */ function(_React$Component) {
     _this$props.onExiting;
     _this$props.onExited;
     _this$props.nodeRef;
-    var childProps = _objectWithoutPropertiesLoose$1(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+    var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
     return (
       // allows for nested Transitions
       /* @__PURE__ */ React$1.createElement(TransitionGroupContext.Provider, {
@@ -5630,7 +5634,7 @@ function useAutocomplete(props) {
   const [focusedTag, setFocusedTag] = reactExports.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
   const highlightedIndexRef = reactExports.useRef(defaultHighlighted);
-  const initialInputValue = reactExports.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
+  const initialInputValue = reactExports.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -5733,7 +5737,7 @@ function useAutocomplete(props) {
   const setHighlightedIndex = useEventCallback(({
     event,
     index: index2,
-    reason = "auto"
+    reason
   }) => {
     highlightedIndexRef.current = index2;
     if (index2 === -1) {
@@ -5741,7 +5745,7 @@ function useAutocomplete(props) {
     } else {
       inputRef.current.setAttribute("aria-activedescendant", `${id}-option-${index2}`);
     }
-    if (onHighlightChange) {
+    if (onHighlightChange && ["mouse", "keyboard", "touch"].includes(reason)) {
       onHighlightChange(event, index2 === -1 ? null : filteredOptions[index2], reason);
     }
     if (!listboxRef.current) {
@@ -5786,7 +5790,7 @@ function useAutocomplete(props) {
     event,
     diff,
     direction = "next",
-    reason = "auto"
+    reason
   }) => {
     if (!popupOpen) {
       return;
@@ -8678,6 +8682,15 @@ const TextareaAutosize = /* @__PURE__ */ reactExports.forwardRef(function Textar
       overflowing
     };
   }, [maxRows, minRows, props.placeholder]);
+  const didHeightChange = useEventCallback(() => {
+    const textarea = textareaRef.current;
+    const textareaStyles = calculateTextareaStyles();
+    if (!textarea || !textareaStyles || isEmpty$1(textareaStyles)) {
+      return false;
+    }
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
+    return heightRef.current != null && heightRef.current !== outerHeightStyle;
+  });
   const syncHeight = reactExports.useCallback(() => {
     const textarea = textareaRef.current;
     const textareaStyles = calculateTextareaStyles();
@@ -8693,34 +8706,36 @@ const TextareaAutosize = /* @__PURE__ */ reactExports.forwardRef(function Textar
   }, [calculateTextareaStyles]);
   const frameRef = reactExports.useRef(-1);
   useEnhancedEffect(() => {
-    const debounceHandleResize = debounce$1(() => syncHeight());
+    const debouncedHandleResize = debounce$1(syncHeight);
     const textarea = textareaRef?.current;
     if (!textarea) {
       return void 0;
     }
     const containerWindow = ownerWindow(textarea);
-    containerWindow.addEventListener("resize", debounceHandleResize);
+    containerWindow.addEventListener("resize", debouncedHandleResize);
     let resizeObserver;
     if (typeof ResizeObserver !== "undefined") {
       resizeObserver = new ResizeObserver(() => {
-        resizeObserver.unobserve(textarea);
-        cancelAnimationFrame(frameRef.current);
-        syncHeight();
-        frameRef.current = requestAnimationFrame(() => {
-          resizeObserver.observe(textarea);
-        });
+        if (didHeightChange()) {
+          resizeObserver.unobserve(textarea);
+          cancelAnimationFrame(frameRef.current);
+          syncHeight();
+          frameRef.current = requestAnimationFrame(() => {
+            resizeObserver.observe(textarea);
+          });
+        }
       });
       resizeObserver.observe(textarea);
     }
     return () => {
-      debounceHandleResize.clear();
+      debouncedHandleResize.clear();
       cancelAnimationFrame(frameRef.current);
-      containerWindow.removeEventListener("resize", debounceHandleResize);
+      containerWindow.removeEventListener("resize", debouncedHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
     };
-  }, [calculateTextareaStyles, syncHeight]);
+  }, [calculateTextareaStyles, syncHeight, didHeightChange]);
   useEnhancedEffect(() => {
     syncHeight();
   });
@@ -15642,6 +15657,16 @@ const ListItemText = /* @__PURE__ */ reactExports.forwardRef(function ListItemTe
       ...slotProps
     }
   };
+  const [RootSlot, rootSlotProps] = useSlot("root", {
+    className: clsx(classes.root, className),
+    elementType: ListItemTextRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref
+  });
   const [PrimarySlot, primarySlotProps] = useSlot("primary", {
     className: classes.primary,
     elementType: Typography,
@@ -15670,11 +15695,8 @@ const ListItemText = /* @__PURE__ */ reactExports.forwardRef(function ListItemTe
       children: secondary
     });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemTextRoot, {
-    className: clsx(classes.root, className),
-    ownerState,
-    ref,
-    ...other,
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [primary, secondary]
   });
 });
@@ -16092,7 +16114,7 @@ const Popover = /* @__PURE__ */ reactExports.forwardRef(function Popover2(inProp
     const handleResize = debounce$1(() => {
       setPositioningStyles();
     });
-    const containerWindow = ownerWindow(anchorEl);
+    const containerWindow = ownerWindow(resolveAnchorEl(anchorEl));
     containerWindow.addEventListener("resize", handleResize);
     return () => {
       handleResize.clear();
@@ -19532,7 +19554,10 @@ const Snackbar = /* @__PURE__ */ reactExports.forwardRef(function Snackbar2(inPr
     },
     ownerState
   });
-  const [ClickAwaySlot, clickAwayListenerProps] = useSlot("clickAwayListener", {
+  const [ClickAwaySlot, {
+    ownerState: clickAwayOwnerStateProp,
+    ...clickAwayListenerProps
+  }] = useSlot("clickAwayListener", {
     elementType: ClickAwayListener,
     externalForwardedProps,
     getSlotProps: (handlers2) => ({
@@ -19579,6 +19604,9 @@ const Snackbar = /* @__PURE__ */ reactExports.forwardRef(function Snackbar2(inPr
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ClickAwaySlot, {
     ...clickAwayListenerProps,
+    ...slots.clickAwayListener && {
+      ownerState: clickAwayOwnerStateProp
+    },
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root, {
       ...rootProps,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionSlot, {
@@ -20422,6 +20450,8 @@ const Switch = /* @__PURE__ */ reactExports.forwardRef(function Switch2(inProps,
     edge = false,
     size = "medium",
     sx,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -20431,14 +20461,36 @@ const Switch = /* @__PURE__ */ reactExports.forwardRef(function Switch2(inProps,
     size
   };
   const classes = useUtilityClasses$4(ownerState);
-  const icon = /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = useSlot("root", {
+    className: clsx(classes.root, className),
+    elementType: SwitchRoot,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      sx
+    }
+  });
+  const [ThumbSlot, thumbSlotProps] = useSlot("thumb", {
     className: classes.thumb,
+    elementType: SwitchThumb,
+    externalForwardedProps,
     ownerState
   });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SwitchRoot, {
-    className: clsx(classes.root, className),
-    sx,
-    ownerState,
+  const icon = /* @__PURE__ */ jsxRuntimeExports.jsx(ThumbSlot, {
+    ...thumbSlotProps
+  });
+  const [TrackSlot, trackSlotProps] = useSlot("track", {
+    className: classes.track,
+    elementType: SwitchTrack,
+    externalForwardedProps,
+    ownerState
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SwitchSwitchBase, {
       type: "checkbox",
       icon,
@@ -20449,10 +20501,25 @@ const Switch = /* @__PURE__ */ reactExports.forwardRef(function Switch2(inProps,
       classes: {
         ...classes,
         root: classes.switchBase
+      },
+      slots: {
+        ...slots.switchBase && {
+          root: slots.switchBase
+        },
+        ...slots.input && {
+          input: slots.input
+        }
+      },
+      slotProps: {
+        ...slotProps.switchBase && {
+          root: typeof slotProps.switchBase === "function" ? slotProps.switchBase(ownerState) : slotProps.switchBase
+        },
+        ...slotProps.input && {
+          input: typeof slotProps.input === "function" ? slotProps.input(ownerState) : slotProps.input
+        }
       }
-    }), /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchTrack, {
-      className: classes.track,
-      ownerState
+    }), /* @__PURE__ */ jsxRuntimeExports.jsx(TrackSlot, {
+      ...trackSlotProps
     })]
   });
 });
@@ -21524,6 +21591,9 @@ const Tabs = /* @__PURE__ */ reactExports.forwardRef(function Tabs2(inProps, ref
     });
   });
   const handleKeyDown = (event) => {
+    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
     const list2 = tabListRef.current;
     const currentFocus = ownerDocument(list2).activeElement;
     const role = currentFocus.getAttribute("role");
@@ -21716,6 +21786,25 @@ const TextField = /* @__PURE__ */ reactExports.forwardRef(function TextField2(in
     }
     inputAdditionalProps["aria-describedby"] = void 0;
   }
+  const [RootSlot, rootProps] = useSlot("root", {
+    elementType: TextFieldRoot,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    className: clsx(classes.root, className),
+    ref,
+    additionalProps: {
+      disabled,
+      error,
+      fullWidth,
+      required,
+      color: color2,
+      variant
+    }
+  });
   const [InputSlot, inputProps] = useSlot("input", {
     elementType: InputComponent,
     externalForwardedProps,
@@ -21767,17 +21856,8 @@ const TextField = /* @__PURE__ */ reactExports.forwardRef(function TextField2(in
     },
     ...inputProps
   });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TextFieldRoot, {
-    className: clsx(classes.root, className),
-    disabled,
-    error,
-    fullWidth,
-    ref,
-    required,
-    color: color2,
-    variant,
-    ownerState,
-    ...other,
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootProps,
     children: [label != null && label !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelSlot, {
       htmlFor: id,
       id: inputLabelId,
@@ -35074,7 +35154,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
 }));
@@ -35517,7 +35597,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
@@ -47670,9 +47750,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",
@@ -47887,7 +47965,7 @@ const AttachmentsPreview = ({
 };
 const ButtonContainer$1 = styled$1(Box)(() => ({
   position: "absolute",
-  top: -60,
+  bottom: 80,
   // Position above the message input
   right: 20,
   zIndex: 1e3,
@@ -48067,98 +48145,203 @@ 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: "100%",
+  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%"
   },
-  "&:active": {
-    transform: "translateY(0px)",
-    boxShadow: "none"
+  [theme.breakpoints.between("sm", "md")]: {
+    maxWidth: "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"
+  },
+  // 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%"
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    maxWidth: "90%"
+  },
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "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: "normal",
+  // allow wrapping instead of nowrap
+  wordBreak: "break-word",
+  // break long words if needed
+  variant: "outlined",
+  size: "small",
+  maxWidth: "100%",
+  // ensure chip doesn't overflow container
+  ...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 = ({
@@ -48170,10 +48353,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,
@@ -48189,7 +48382,6 @@ const MessageInput = ({
     },
     scrollToBottom,
     forceScrollToBottom: scrollToBottom
-    // Use the scrollToBottom function for both regular and forced scrolling
   });
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -48225,42 +48417,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,
@@ -48271,34 +48448,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
       }
     )
   ] });
@@ -48352,15 +48589,6 @@ const useStreamingMessagesStore = create$1(
     }
   })
 );
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
 function _objectWithoutProperties(e, t) {
   if (null == e) return {};
   var o, r, i = _objectWithoutPropertiesLoose(e, t);
@@ -48424,15 +48652,6 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
 function ownKeys$1(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -48533,7 +48752,7 @@ function createElement(_ref) {
       });
     }
     var children = childrenCreator(node2.children);
-    return /* @__PURE__ */ React$1.createElement(TagName, _extends({
+    return /* @__PURE__ */ React$1.createElement(TagName, _extends$2({
       key
     }, props), children);
   }
@@ -85181,7 +85400,7 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 var define_process_env_default = {};
-var f = "undefined" != typeof process && void 0 !== define_process_env_default && (define_process_env_default.REACT_APP_SC_ATTR || define_process_env_default.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.15", g = "/*!sc*/\n", S$1 = "undefined" != typeof window && "HTMLElement" in window, w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default && void 0 !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY && "" !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY && define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default && void 0 !== define_process_env_default.SC_DISABLE_SPEEDY && "" !== define_process_env_default.SC_DISABLE_SPEEDY ? "false" !== define_process_env_default.SC_DISABLE_SPEEDY && define_process_env_default.SC_DISABLE_SPEEDY : false), b = {}, _ = Object.freeze([]), C = Object.freeze({});
+var f = "undefined" != typeof process && void 0 !== define_process_env_default && (define_process_env_default.REACT_APP_SC_ATTR || define_process_env_default.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.17", g = "/*!sc*/\n", S$1 = "undefined" != typeof window && "HTMLElement" in window, w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default && void 0 !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY && "" !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY && define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default && void 0 !== define_process_env_default.SC_DISABLE_SPEEDY && "" !== define_process_env_default.SC_DISABLE_SPEEDY ? "false" !== define_process_env_default.SC_DISABLE_SPEEDY && define_process_env_default.SC_DISABLE_SPEEDY : false), b = {}, _ = Object.freeze([]), C = Object.freeze({});
 function I(e2, t2, n2) {
   return void 0 === n2 && (n2 = C), e2.theme !== n2.theme && e2.theme || t2 || n2.theme;
 }
@@ -108710,16 +108929,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"
   },
@@ -108727,7 +108948,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"
 }));
@@ -108760,22 +108980,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,
@@ -108790,7 +109002,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..."
@@ -108826,22 +109039,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 })
     ] })
   ] });
@@ -108867,6 +109074,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",
@@ -108937,11 +109167,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,
@@ -109102,10 +109332,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) => {
@@ -109122,6 +109354,13 @@ const AgentOptionsMenu = ({
   const handleCloseDeleteConfirmation = () => {
     setIsDeleteModalOpen(false);
   };
+  const handleOpenClearConfirmation = () => {
+    setIsClearModalOpen(true);
+    handleCloseMenu();
+  };
+  const handleCloseClearConfirmation = () => {
+    setIsClearModalOpen(false);
+  };
   const { clearAgentFromAllPages } = useAgentSelectionStore();
   const handleConfirmDelete = async () => {
     try {
@@ -109202,6 +109441,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" })
@@ -109228,6 +109471,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
+      }
     )
   ] });
 };
@@ -109418,7 +109679,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,
             {
@@ -109614,7 +109875,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,
             {
@@ -109940,6 +110201,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 = [],
@@ -110097,6 +110359,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("");
@@ -115339,7 +115606,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" }),