@inf-monkeys-tech/monkeys-design 1.0.24 → 1.0.27

package/dist/components/agent-workbench/index.mjs

@@ -124,6 +124,7 @@ var enUS = {
         attach: "Add photos or files",
         voice: "Start voice input",
         webSearch: "Web search",
+        chatMode: "Chat mode",
         model: "Model",
         reasoning: "Reasoning effort",
         permissions: "Permissions",
@@ -173,6 +174,7 @@ var enUS = {
       },
       navigation: {
         search: "Search agents and sessions",
+        searchSessions: "Search sessions",
         searchShortcut: "Focus search",
         clearSearch: "Clear search",
         tabsLabel: "Agent workbench navigation",
@@ -648,6 +650,8 @@ function modelOptionValue(option) {
 }
 function AgentWorkbenchComposer({
   viewModel,
+  modeSelectionEnabled = false,
+  modeFilteringEnabled = false,
   className,
   classNames,
   onIntent
@@ -658,19 +662,25 @@ function AgentWorkbenchComposer({
   const [editingDraftId, setEditingDraftId] = useState();
   const [editingText, setEditingText] = useState("");
   const [isNarrow, setIsNarrow] = useState(false);
+  const narrowBreakpoint = modeSelectionEnabled ? 900 : 704;
   const isBusy = viewModel.status === "loading" || viewModel.status === "streaming" || viewModel.status === "stopping";
   const isStopping = viewModel.status === "stopping";
   const isUploading = viewModel.attachments.some((attachment) => attachment.status === "uploading");
   const canSubmit = !isStopping && !isUploading && (viewModel.value.trim().length > 0 || viewModel.attachments.some((item) => item.status === "ready"));
   const showSubmitButton = !isBusy || canSubmit;
+  const filterModelsByMode = modeSelectionEnabled || modeFilteringEnabled;
+  const visibleModelOptions = useMemo(
+    () => filterModelsByMode ? viewModel.model.options.filter((option) => option.mode === viewModel.mode) : viewModel.model.options,
+    [filterModelsByMode, viewModel.mode, viewModel.model.options]
+  );
   const selectedModelValue = useMemo(() => {
-    const selected = viewModel.model.options.find((option) => option.id === viewModel.model.selectedId);
-    return selected ? modelOptionValue(selected) : "";
-  }, [viewModel.model.options, viewModel.model.selectedId]);
+    const selected = visibleModelOptions.find((option) => option.id === viewModel.model.selectedId && option.mode === viewModel.mode);
+    return selected ? modelOptionValue(selected) : visibleModelOptions[0] ? modelOptionValue(visibleModelOptions[0]) : "";
+  }, [viewModel.mode, viewModel.model.selectedId, visibleModelOptions]);
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface) return void 0;
-    const updateLayout = () => setIsNarrow(surface.getBoundingClientRect().width <= 704);
+    const updateLayout = () => setIsNarrow(surface.getBoundingClientRect().width <= narrowBreakpoint);
     updateLayout();
     window.addEventListener("resize", updateLayout);
     if (typeof ResizeObserver === "undefined") {
@@ -686,7 +696,7 @@ function AgentWorkbenchComposer({
       observer.disconnect();
       window.removeEventListener("resize", updateLayout);
     };
-  }, []);
+  }, [narrowBreakpoint]);
   const submit = () => {
     if (canSubmit) onIntent?.({ type: "submit" });
   };
@@ -798,6 +808,28 @@ function AgentWorkbenchComposer({
                 messages.composer.webSearch,
                 /* @__PURE__ */ jsx(Switch, { checked: viewModel.webSearchEnabled, onCheckedChange: (enabled) => onIntent?.({ type: "toggle-web-search", enabled }) })
               ] }) : null,
+              modeSelectionEnabled ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-8 shrink-0 items-center rounded-md border border-border bg-muted p-0.5",
+                  role: "group",
+                  "aria-label": messages.composer.chatMode,
+                  children: ["chatbot", "agent"].map((mode) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": viewModel.mode === mode,
+                      className: cn2(
+                        "h-7 rounded px-2.5 text-xs font-medium transition-colors",
+                        viewModel.mode === mode ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                      ),
+                      onClick: () => onIntent?.({ type: "change-mode", mode }),
+                      children: messages.modes[mode]
+                    },
+                    mode
+                  ))
+                }
+              ) : null,
               viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "agent-workbench-model", children: messages.composer.model }) : null,
               viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsxs(
                 "select",
@@ -807,12 +839,12 @@ function AgentWorkbenchComposer({
                   "aria-label": messages.composer.model,
                   className: "h-8 w-48 min-w-36 shrink rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground",
                   onChange: (event) => {
-                    const option = viewModel.model.options.find((item) => modelOptionValue(item) === event.target.value);
+                    const option = visibleModelOptions.find((item) => modelOptionValue(item) === event.target.value);
                     if (option) onIntent?.({ type: "select-model", modelId: option.id, mode: option.mode });
                   },
                   children: [
-                    viewModel.model.options.length === 0 ? /* @__PURE__ */ jsx("option", { value: "", children: messages.composer.noModels }) : null,
-                    viewModel.model.options.map((option) => /* @__PURE__ */ jsxs("option", { value: modelOptionValue(option), disabled: option.disabled, children: [
+                    visibleModelOptions.length === 0 ? /* @__PURE__ */ jsx("option", { value: "", children: messages.composer.noModels }) : null,
+                    visibleModelOptions.map((option) => /* @__PURE__ */ jsxs("option", { value: modelOptionValue(option), disabled: option.disabled, children: [
                       option.label,
                       " \xB7 ",
                       messages.modes[option.mode]
@@ -959,9 +991,17 @@ function SessionActions({
     ] })
   ] });
 }
-function AgentWorkbenchSidebar({ viewModel, headerActions, className, classNames, onIntent }) {
+function AgentWorkbenchSidebar({
+  viewModel,
+  navigationMode = "agents-and-sessions",
+  headerActions,
+  className,
+  classNames,
+  onIntent
+}) {
   const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
+  const sessionsOnly = navigationMode === "sessions-only";
   const searchRef = useRef(null);
   const renameInputRef = useRef(null);
   const [editingSessionId, setEditingSessionId] = useState();
@@ -1008,9 +1048,9 @@ function AgentWorkbenchSidebar({ viewModel, headerActions, className, classNames
   return /* @__PURE__ */ jsx("nav", { "aria-label": messages.tabsLabel, className: cn2("h-full min-h-0", classNames?.root, className), children: /* @__PURE__ */ jsxs(
     Tabs,
     {
-      value: viewModel.activeTab,
+      value: sessionsOnly ? "sessions" : viewModel.activeTab,
       onValueChange: (value) => {
-        if (value === "agents" || value === "sessions") onIntent?.({ type: "change-tab", tab: value });
+        if (!sessionsOnly && (value === "agents" || value === "sessions")) onIntent?.({ type: "change-tab", tab: value });
       },
       className: "flex h-full min-h-0 flex-col bg-background text-foreground",
       children: [
@@ -1023,8 +1063,8 @@ function AgentWorkbenchSidebar({ viewModel, headerActions, className, classNames
                 ref: searchRef,
                 type: "search",
                 value: viewModel.searchQuery,
-                "aria-label": messages.search,
-                placeholder: messages.search,
+                "aria-label": sessionsOnly ? messages.searchSessions : messages.search,
+                placeholder: sessionsOnly ? messages.searchSessions : messages.search,
                 className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
                 onChange: (event) => onIntent?.({ type: "change-search", query: event.target.value }),
                 onKeyDown: (event) => {
@@ -1036,15 +1076,15 @@ function AgentWorkbenchSidebar({ viewModel, headerActions, className, classNames
             ),
             viewModel.searchQuery ? /* @__PURE__ */ jsx("button", { type: "button", className: "flex size-6 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
+          !sessionsOnly || headerActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            !sessionsOnly ? /* @__PURE__ */ jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
               /* @__PURE__ */ jsx(TabsTrigger, { value: "agents", children: messages.agents }),
               /* @__PURE__ */ jsx(TabsTrigger, { value: "sessions", children: messages.sessions })
-            ] }),
+            ] }) : null,
             headerActions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: headerActions }) : null
-          ] })
+          ] }) : null
         ] }),
-        /* @__PURE__ */ jsxs(TabsContent, { value: "agents", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
+        !sessionsOnly ? /* @__PURE__ */ jsxs(TabsContent, { value: "agents", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
           viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "create-agent" }), children: [
             /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
             messages.newAgent
@@ -1089,13 +1129,13 @@ function AgentWorkbenchSidebar({ viewModel, headerActions, className, classNames
             },
             item.id
           )) })
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ jsxs(TabsContent, { value: "sessions", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
           viewModel.capabilities.createSession ? /* @__PURE__ */ jsxs("button", { type: "button", className: "flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "create-session" }), children: [
             /* @__PURE__ */ jsx(SquarePen, { className: "size-4", "aria-hidden": "true" }),
             messages.newSession
           ] }) : null,
-          viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
+          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
             /* @__PURE__ */ jsx(Blocks, { className: "size-4", "aria-hidden": "true" }),
             messages.capabilities
           ] }) : null,
@@ -1152,7 +1192,7 @@ function AgentWorkbenchSidebar({ viewModel, headerActions, className, classNames
             ] }, item.id);
           }) })
         ] }),
-        viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ jsxs("button", { type: "button", className: "flex h-10 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
+        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ jsxs("button", { type: "button", className: "flex h-10 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
           /* @__PURE__ */ jsx(Settings, { className: "size-4", "aria-hidden": "true" }),
           messages.settings
         ] }) }) : null