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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -677,6 +677,8 @@ var DropdownMenuSeparator = React2__namespace.forwardRef(
677
677
  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
678
678
  );
679
679
  DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
680
+ var Select = SelectPrimitive__namespace.Root;
681
+ var SelectValue = SelectPrimitive__namespace.Value;
680
682
  var SelectTrigger = React2__namespace.forwardRef(
681
683
  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.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: [
682
684
  children,
@@ -718,7 +720,14 @@ var SelectSeparator = React2__namespace.forwardRef(
718
720
  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
719
721
  );
720
722
  SelectSeparator.displayName = "SelectSeparator";
721
- 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";
723
+ var iconButtonClass = "size-8 shrink-0 p-0 text-muted-foreground";
724
+ function ComposerSelect({ value, label, placeholder, options, className, onValueChange }) {
725
+ const selectedOption = options.find((option) => option.value === value);
726
+ return /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: value || void 0, disabled: options.length === 0, onValueChange, children: [
727
+ /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { size: "sm", "aria-label": label, className: cn2("shrink bg-background font-medium", className), children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder, children: selectedOption?.label }) }),
728
+ /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { disableTriggerViewportSizing: true, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
729
+ ] });
730
+ }
722
731
  function modelOptionValue(option) {
723
732
  return `${option.mode}:${option.id}`;
724
733
  }
@@ -814,13 +823,13 @@ function AgentWorkbenchComposer({
814
823
  }
815
824
  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: draft.text || messages.composer.attachmentOnly }),
816
825
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
817
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-3.5" }) }),
818
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "size-3.5" }) }),
819
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.editQueued, onClick: () => {
826
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-3.5" }) }),
827
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "size-3.5" }) }),
828
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.editQueued, onClick: () => {
820
829
  setEditingDraftId(draft.id);
821
830
  setEditingText(draft.text);
822
831
  }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "size-3.5" }) }),
823
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3.5" }) })
832
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3.5" }) })
824
833
  ] })
825
834
  ] }, draft.id)) })
826
835
  }
@@ -830,9 +839,11 @@ function AgentWorkbenchComposer({
830
839
  attachment.previewUrl && attachment.mediaType?.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: attachment.previewUrl, alt: "", className: "size-full object-cover" }) : attachment.mediaType?.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "size-5 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "size-5 text-muted-foreground" }),
831
840
  attachment.status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-background/80 text-[10px] font-medium", children: messages.composer.uploading }) : null,
832
841
  /* @__PURE__ */ jsxRuntime.jsx(
833
- "button",
842
+ Button,
834
843
  {
835
844
  type: "button",
845
+ variant: "secondary",
846
+ size: "icon",
836
847
  className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-full bg-background/90 text-foreground shadow",
837
848
  "aria-label": messages.composer.removeAttachment,
838
849
  onClick: () => onIntent?.({ type: "remove-attachment", attachmentId: attachment.id }),
@@ -861,7 +872,7 @@ function AgentWorkbenchComposer({
861
872
  /* @__PURE__ */ jsxRuntime.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: [
862
873
  /* @__PURE__ */ jsxRuntime.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: [
863
874
  viewModel.capabilities.attachments ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
864
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.attach, onClick: () => fileInputRef.current?.click(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "size-4" }) }),
875
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.attach, onClick: () => fileInputRef.current?.click(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "size-4" }) }),
865
876
  /* @__PURE__ */ jsxRuntime.jsx(
866
877
  "input",
867
878
  {
@@ -877,7 +888,7 @@ function AgentWorkbenchComposer({
877
888
  }
878
889
  )
879
890
  ] }) : null,
880
- viewModel.capabilities.voiceInput ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: iconButtonClass, "aria-label": messages.composer.voice, onClick: () => onIntent?.({ type: "request-voice-input" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "size-4" }) }) : null,
891
+ viewModel.capabilities.voiceInput ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.voice, onClick: () => onIntent?.({ type: "request-voice-input" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "size-4" }) }) : null,
881
892
  viewModel.capabilities.webSearch ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex shrink-0 items-center gap-1.5 whitespace-nowrap px-1 text-xs font-medium text-foreground", children: [
882
893
  messages.composer.webSearch,
883
894
  /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: viewModel.webSearchEnabled, onCheckedChange: (enabled) => onIntent?.({ type: "toggle-web-search", enabled }) })
@@ -889,12 +900,14 @@ function AgentWorkbenchComposer({
889
900
  role: "group",
890
901
  "aria-label": messages.composer.chatMode,
891
902
  children: ["chat", "work"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
892
- "button",
903
+ Button,
893
904
  {
894
905
  type: "button",
906
+ variant: "ghost",
907
+ size: "sm",
895
908
  "aria-pressed": viewModel.mode === mode,
896
909
  className: cn2(
897
- "h-7 rounded px-2.5 text-xs font-medium transition-colors",
910
+ "h-7 rounded px-2.5 text-xs font-medium shadow-none",
898
911
  viewModel.mode === mode ? "bg-background text-foreground shadow-sm" : "text-foreground/75 hover:text-foreground"
899
912
  ),
900
913
  onClick: () => onIntent?.({ type: "change-mode", mode }),
@@ -904,54 +917,57 @@ function AgentWorkbenchComposer({
904
917
  ))
905
918
  }
906
919
  ) : null,
907
- viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "sr-only", htmlFor: "agent-workbench-model", children: messages.composer.model }) : null,
908
- viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsxRuntime.jsxs(
909
- "select",
920
+ viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsxRuntime.jsx(
921
+ ComposerSelect,
910
922
  {
911
- id: "agent-workbench-model",
912
923
  value: selectedModelValue,
913
- "aria-label": messages.composer.model,
914
- className: "h-8 w-48 min-w-36 shrink rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground",
915
- onChange: (event) => {
916
- const option = visibleModelOptions.find((item) => modelOptionValue(item) === event.target.value);
924
+ label: messages.composer.model,
925
+ placeholder: messages.composer.noModels,
926
+ className: "w-48 min-w-36",
927
+ options: visibleModelOptions.map((option) => ({
928
+ value: modelOptionValue(option),
929
+ label: `${option.label} \xB7 ${messages.modes[option.mode]}`,
930
+ disabled: option.disabled
931
+ })),
932
+ onValueChange: (value) => {
933
+ const option = visibleModelOptions.find((item) => modelOptionValue(item) === value);
917
934
  if (option) onIntent?.({ type: "select-model", modelId: option.id, mode: option.mode });
918
- },
919
- children: [
920
- visibleModelOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: messages.composer.noModels }) : null,
921
- visibleModelOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: modelOptionValue(option), disabled: option.disabled, children: [
922
- option.label,
923
- " \xB7 ",
924
- messages.modes[option.mode]
925
- ] }, modelOptionValue(option)))
926
- ]
935
+ }
927
936
  }
928
937
  ) : null,
929
938
  viewModel.capabilities.reasoning && viewModel.reasoning ? /* @__PURE__ */ jsxRuntime.jsx(
930
- "select",
939
+ ComposerSelect,
931
940
  {
932
941
  value: viewModel.reasoning.value,
933
- "aria-label": messages.composer.reasoning,
934
- className: "h-8 w-32 min-w-24 shrink rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground",
935
- onChange: (event) => onIntent?.({ type: "change-reasoning", value: event.target.value }),
936
- children: viewModel.reasoning.options.map((value) => /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: messages.composer.reasoningOptions[value] }, value))
942
+ label: messages.composer.reasoning,
943
+ className: "w-32 min-w-24",
944
+ options: viewModel.reasoning.options.map((value) => ({
945
+ value,
946
+ label: messages.composer.reasoningOptions[value]
947
+ })),
948
+ onValueChange: (value) => onIntent?.({ type: "change-reasoning", value })
937
949
  }
938
950
  ) : null,
939
951
  viewModel.capabilities.permissions && viewModel.permissionProfile ? /* @__PURE__ */ jsxRuntime.jsx(
940
- "select",
952
+ ComposerSelect,
941
953
  {
942
954
  value: viewModel.permissionProfile,
943
- "aria-label": messages.composer.permissions,
944
- className: "h-8 w-40 min-w-32 shrink rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground",
945
- onChange: (event) => onIntent?.({ type: "change-permission", value: event.target.value }),
946
- children: ["approval-required", "auto-approve", "full-access"].map((value) => /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: messages.composer.permissionOptions[value] }, value))
955
+ label: messages.composer.permissions,
956
+ className: "w-40 min-w-32",
957
+ options: ["approval-required", "auto-approve", "full-access"].map((value) => ({
958
+ value,
959
+ label: messages.composer.permissionOptions[value]
960
+ })),
961
+ onValueChange: (value) => onIntent?.({ type: "change-permission", value })
947
962
  }
948
963
  ) : null
949
964
  ] }),
950
965
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
951
966
  showSubmitButton ? /* @__PURE__ */ jsxRuntime.jsx(
952
- "button",
967
+ Button,
953
968
  {
954
969
  type: "submit",
970
+ size: "icon",
955
971
  className: cn2(
956
972
  iconButtonClass,
957
973
  "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground disabled:bg-primary/40 disabled:!opacity-100"
@@ -962,10 +978,12 @@ function AgentWorkbenchComposer({
962
978
  }
963
979
  ) : null,
964
980
  isBusy && !canSubmit && viewModel.capabilities.stop ? /* @__PURE__ */ jsxRuntime.jsx(
965
- "button",
981
+ Button,
966
982
  {
967
983
  type: "button",
968
- className: cn2(iconButtonClass, "border border-border"),
984
+ variant: "outline",
985
+ size: "icon",
986
+ className: iconButtonClass,
969
987
  "aria-label": isStopping ? messages.run.stopping : messages.composer.stop,
970
988
  disabled: isStopping,
971
989
  onClick: () => onIntent?.({ type: "stop" }),