@inf-monkeys-tech/monkeys-design 1.0.48 → 1.0.49

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

@@ -646,6 +646,8 @@ var DropdownMenuSeparator = React2.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
 var SelectTrigger = React2.forwardRef(
   ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
     children,
@@ -687,7 +689,14 @@ var SelectSeparator = React2.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
-var iconButtonClass = "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
+var iconButtonClass = "size-8 shrink-0 p-0 text-muted-foreground";
+function ComposerSelect({ value, label, placeholder, options, className, onValueChange }) {
+  const selectedOption = options.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxs(Select, { value: value || void 0, disabled: options.length === 0, onValueChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": label, className: cn2("shrink bg-background font-medium", className), children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: selectedOption?.label }) }),
+    /* @__PURE__ */ jsx(SelectContent, { disableTriggerViewportSizing: true, children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
+  ] });
+}
 function modelOptionValue(option) {
   return `${option.mode}:${option.id}`;
 }
@@ -783,13 +792,13 @@ function AgentWorkbenchComposer({
                 }
               ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: draft.text || messages.composer.attachmentOnly }),
               /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-                /* @__PURE__ */ jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.moveUp, disabled: index === 0, onClick: () => onIntent?.({ type: "move-queued-draft", draftId: draft.id, direction: "up" }), children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.moveDown, disabled: index === viewModel.queuedDrafts.length - 1, onClick: () => onIntent?.({ type: "move-queued-draft", draftId: draft.id, direction: "down" }), children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.editQueued, onClick: () => {
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.moveUp, disabled: index === 0, onClick: () => onIntent?.({ type: "move-queued-draft", draftId: draft.id, direction: "up" }), children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) }),
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.moveDown, disabled: index === viewModel.queuedDrafts.length - 1, onClick: () => onIntent?.({ type: "move-queued-draft", draftId: draft.id, direction: "down" }), children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }) }),
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.editQueued, onClick: () => {
                   setEditingDraftId(draft.id);
                   setEditingText(draft.text);
                 }, children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" }) }),
-                /* @__PURE__ */ jsx("button", { type: "button", className: cn2(iconButtonClass, "text-destructive-text"), "aria-label": messages.composer.deleteQueued, onClick: () => onIntent?.({ type: "delete-queued-draft", draftId: draft.id }), children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }) })
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn2(iconButtonClass, "text-destructive-text hover:text-destructive-text"), "aria-label": messages.composer.deleteQueued, onClick: () => onIntent?.({ type: "delete-queued-draft", draftId: draft.id }), children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }) })
               ] })
             ] }, draft.id)) })
           }
@@ -799,9 +808,11 @@ function AgentWorkbenchComposer({
             attachment.previewUrl && attachment.mediaType?.startsWith("image/") ? /* @__PURE__ */ jsx("img", { src: attachment.previewUrl, alt: "", className: "size-full object-cover" }) : attachment.mediaType?.startsWith("image/") ? /* @__PURE__ */ jsx(Image, { className: "size-5 text-muted-foreground" }) : /* @__PURE__ */ jsx(File, { className: "size-5 text-muted-foreground" }),
             attachment.status === "uploading" ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-background/80 text-[10px] font-medium", children: messages.composer.uploading }) : null,
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
                 type: "button",
+                variant: "secondary",
+                size: "icon",
                 className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-full bg-background/90 text-foreground shadow",
                 "aria-label": messages.composer.removeAttachment,
                 onClick: () => onIntent?.({ type: "remove-attachment", attachmentId: attachment.id }),
@@ -830,7 +841,7 @@ function AgentWorkbenchComposer({
           /* @__PURE__ */ jsxs("div", { className: cn2("agent-workbench-composer__toolbar mt-2 flex min-h-8 min-w-0 max-w-full items-center gap-2", isNarrow ? "flex-wrap" : "flex-nowrap", classNames?.toolbar), children: [
             /* @__PURE__ */ jsxs("div", { className: cn2("agent-workbench-composer__controls flex min-w-0 max-w-full flex-1 items-center gap-1.5", isNarrow ? "w-full flex-wrap" : "flex-nowrap"), children: [
               viewModel.capabilities.attachments ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.attach, onClick: () => fileInputRef.current?.click(), children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }) }),
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.attach, onClick: () => fileInputRef.current?.click(), children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }) }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -846,7 +857,7 @@ function AgentWorkbenchComposer({
                   }
                 )
               ] }) : null,
-              viewModel.capabilities.voiceInput ? /* @__PURE__ */ jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.voice, onClick: () => onIntent?.({ type: "request-voice-input" }), children: /* @__PURE__ */ jsx(Mic, { className: "size-4" }) }) : null,
+              viewModel.capabilities.voiceInput ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.voice, onClick: () => onIntent?.({ type: "request-voice-input" }), children: /* @__PURE__ */ jsx(Mic, { className: "size-4" }) }) : null,
               viewModel.capabilities.webSearch ? /* @__PURE__ */ jsxs("label", { className: "flex shrink-0 items-center gap-1.5 whitespace-nowrap px-1 text-xs font-medium text-foreground", children: [
                 messages.composer.webSearch,
                 /* @__PURE__ */ jsx(Switch, { checked: viewModel.webSearchEnabled, onCheckedChange: (enabled) => onIntent?.({ type: "toggle-web-search", enabled }) })
@@ -858,12 +869,14 @@ function AgentWorkbenchComposer({
                   role: "group",
                   "aria-label": messages.composer.chatMode,
                   children: ["chat", "work"].map((mode) => /* @__PURE__ */ jsx(
-                    "button",
+                    Button,
                     {
                       type: "button",
+                      variant: "ghost",
+                      size: "sm",
                       "aria-pressed": viewModel.mode === mode,
                       className: cn2(
-                        "h-7 rounded px-2.5 text-xs font-medium transition-colors",
+                        "h-7 rounded px-2.5 text-xs font-medium shadow-none",
                         viewModel.mode === mode ? "bg-background text-foreground shadow-sm" : "text-foreground/75 hover:text-foreground"
                       ),
                       onClick: () => onIntent?.({ type: "change-mode", mode }),
@@ -873,54 +886,57 @@ function AgentWorkbenchComposer({
                   ))
                 }
               ) : 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",
+              viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsx(
+                ComposerSelect,
                 {
-                  id: "agent-workbench-model",
                   value: selectedModelValue,
-                  "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 = visibleModelOptions.find((item) => modelOptionValue(item) === event.target.value);
+                  label: messages.composer.model,
+                  placeholder: messages.composer.noModels,
+                  className: "w-48 min-w-36",
+                  options: visibleModelOptions.map((option) => ({
+                    value: modelOptionValue(option),
+                    label: `${option.label} \xB7 ${messages.modes[option.mode]}`,
+                    disabled: option.disabled
+                  })),
+                  onValueChange: (value) => {
+                    const option = visibleModelOptions.find((item) => modelOptionValue(item) === value);
                     if (option) onIntent?.({ type: "select-model", modelId: option.id, mode: option.mode });
-                  },
-                  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]
-                    ] }, modelOptionValue(option)))
-                  ]
+                  }
                 }
               ) : null,
               viewModel.capabilities.reasoning && viewModel.reasoning ? /* @__PURE__ */ jsx(
-                "select",
+                ComposerSelect,
                 {
                   value: viewModel.reasoning.value,
-                  "aria-label": messages.composer.reasoning,
-                  className: "h-8 w-32 min-w-24 shrink rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground",
-                  onChange: (event) => onIntent?.({ type: "change-reasoning", value: event.target.value }),
-                  children: viewModel.reasoning.options.map((value) => /* @__PURE__ */ jsx("option", { value, children: messages.composer.reasoningOptions[value] }, value))
+                  label: messages.composer.reasoning,
+                  className: "w-32 min-w-24",
+                  options: viewModel.reasoning.options.map((value) => ({
+                    value,
+                    label: messages.composer.reasoningOptions[value]
+                  })),
+                  onValueChange: (value) => onIntent?.({ type: "change-reasoning", value })
                 }
               ) : null,
               viewModel.capabilities.permissions && viewModel.permissionProfile ? /* @__PURE__ */ jsx(
-                "select",
+                ComposerSelect,
                 {
                   value: viewModel.permissionProfile,
-                  "aria-label": messages.composer.permissions,
-                  className: "h-8 w-40 min-w-32 shrink rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground",
-                  onChange: (event) => onIntent?.({ type: "change-permission", value: event.target.value }),
-                  children: ["approval-required", "auto-approve", "full-access"].map((value) => /* @__PURE__ */ jsx("option", { value, children: messages.composer.permissionOptions[value] }, value))
+                  label: messages.composer.permissions,
+                  className: "w-40 min-w-32",
+                  options: ["approval-required", "auto-approve", "full-access"].map((value) => ({
+                    value,
+                    label: messages.composer.permissionOptions[value]
+                  })),
+                  onValueChange: (value) => onIntent?.({ type: "change-permission", value })
                 }
               ) : null
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
               showSubmitButton ? /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
                   type: "submit",
+                  size: "icon",
                   className: cn2(
                     iconButtonClass,
                     "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground disabled:bg-primary/40 disabled:!opacity-100"
@@ -931,10 +947,12 @@ function AgentWorkbenchComposer({
                 }
               ) : null,
               isBusy && !canSubmit && viewModel.capabilities.stop ? /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
                   type: "button",
-                  className: cn2(iconButtonClass, "border border-border"),
+                  variant: "outline",
+                  size: "icon",
+                  className: iconButtonClass,
                   "aria-label": isStopping ? messages.run.stopping : messages.composer.stop,
                   disabled: isStopping,
                   onClick: () => onIntent?.({ type: "stop" }),