@inf-monkeys-tech/monkeys-design 1.0.66 → 1.0.68

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

@@ -1,4 +1,4 @@
-import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, X, Paperclip, FileText, Mic, Send, Square, ShoppingBag, Code2, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, AlertCircle, RefreshCw, Loader2, TerminalSquare, Clock3, FileOutput, Download, CircleAlert, ListFilter, Link2, ExternalLink, PanelRightClose, Wrench, BookOpen, CheckCircle2, XCircle, CircleStop, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
+import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, LoaderCircle, CircleAlert, RotateCcw, X, Paperclip, FileText, Mic, Send, Square, ShoppingBag, Code2, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, AlertCircle, RefreshCw, Loader2, TerminalSquare, Clock3, FileOutput, Download, ListFilter, Link2, ExternalLink, PanelRightClose, Wrench, BookOpen, CheckCircle2, XCircle, CircleStop, GitFork, PencilLine, Copy, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
 import * as React5 from 'react';
 import { useImperativeHandle, createContext, useRef, useState, useMemo, useEffect, useContext } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -153,6 +153,8 @@ var enUS = {
         moveDown: "Move message down",
         queued: "Queued messages",
         uploading: "Uploading",
+        uploadFailed: "Upload failed",
+        retryAttachment: "Retry attachment upload",
         noModels: "No models available",
         message: "Message",
         attachmentOnly: "Attachment",
@@ -1066,23 +1068,25 @@ function AgentWorkbenchComposer({
           }
         ) : null,
         /* @__PURE__ */ jsxs("div", { ref: surfaceRef, className: "agent-workbench-composer__surface min-w-0 max-w-full rounded-lg border border-input bg-background p-3 shadow-sm focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30", children: [
-          viewModel.attachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn2("mb-2 flex max-w-full gap-2 overflow-x-auto", classNames?.attachments), children: viewModel.attachments.map((attachment) => /* @__PURE__ */ jsxs("div", { className: "relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-muted", children: [
-            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,
-              {
-                type: "button",
-                variant: "secondary",
-                size: "icon",
-                className: "absolute right-1 top-1 !size-5 min-w-5 rounded-full bg-background/90 p-0 text-foreground shadow [&_svg]:!size-3",
-                "aria-label": messages.composer.removeAttachment,
-                onClick: () => onIntent?.({ type: "remove-attachment", attachmentId: attachment.id }),
-                children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 truncate bg-background/85 px-1 py-0.5 text-[9px]", children: attachment.name })
-          ] }, attachment.id)) }) : null,
+          viewModel.attachments.length > 0 ? /* @__PURE__ */ jsx("div", { "data-agent-workbench-composer-attachments": true, className: cn2("mb-2 flex max-w-full gap-2 overflow-x-auto overscroll-x-contain pb-1", classNames?.attachments), children: viewModel.attachments.map((attachment) => {
+            const isAttachmentError = attachment.status === "error";
+            const isAttachmentUploading = attachment.status === "uploading";
+            return /* @__PURE__ */ jsxs("div", { role: isAttachmentError ? "alert" : void 0, className: cn2("flex h-14 min-w-48 max-w-64 shrink-0 items-center gap-2 rounded-md border bg-muted/45 p-1.5", isAttachmentError ? "border-destructive/50 bg-destructive/5" : "border-border"), children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded bg-muted", children: 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" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-xs font-medium text-foreground", title: attachment.name, children: attachment.name }),
+                /* @__PURE__ */ jsxs("span", { className: cn2("mt-0.5 flex items-center gap-1 text-[11px]", isAttachmentError ? "text-destructive-text" : "text-muted-foreground"), children: [
+                  isAttachmentUploading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3 animate-spin", "aria-hidden": "true" }) : null,
+                  isAttachmentError ? /* @__PURE__ */ jsx(CircleAlert, { className: "size-3", "aria-hidden": "true" }) : null,
+                  isAttachmentUploading ? messages.composer.uploading : isAttachmentError ? messages.composer.uploadFailed : attachment.mediaType || messages.composer.attachmentOnly
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-0.5", children: [
+                isAttachmentError ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "!size-7 min-w-7 shrink-0 p-0 text-destructive-text hover:text-destructive-text", "aria-label": `${messages.composer.retryAttachment}: ${attachment.name}`, onClick: () => onIntent?.({ type: "retry-attachment", attachmentId: attachment.id }), children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5" }) }) : null,
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "!size-7 min-w-7 shrink-0 p-0 text-muted-foreground hover:text-foreground", "aria-label": `${messages.composer.removeAttachment}: ${attachment.name}`, onClick: () => onIntent?.({ type: "remove-attachment", attachmentId: attachment.id }), children: /* @__PURE__ */ jsx(X, { className: "size-3.5" }) })
+              ] })
+            ] }, attachment.id);
+          }) }) : null,
           /* @__PURE__ */ jsx(
             AutosizeTextarea,
             {
@@ -1091,7 +1095,7 @@ function AgentWorkbenchComposer({
               maxHeight: 256,
               "aria-label": messages.composer.message,
               placeholder: viewModel.placeholder,
-              className: cn2("min-w-0 w-full resize-none rounded-none border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none focus-visible:ring-0 focus-visible:ring-offset-0", classNames?.textarea),
+              className: cn2("min-w-0 w-full resize-none overflow-y-auto rounded-none border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none focus-visible:ring-0 focus-visible:ring-offset-0", classNames?.textarea),
               onChange: (event) => onIntent?.({ type: "change-value", value: event.target.value }),
               onKeyDown: (event) => {
                 if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
@@ -1102,7 +1106,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: [
+            /* @__PURE__ */ jsxs("div", { "data-agent-workbench-composer-controls": true, 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 overflow-x-auto overscroll-x-contain pb-1"), children: [
               viewModel.capabilities.attachments ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__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(
@@ -1135,7 +1139,7 @@ function AgentWorkbenchComposer({
                           className: "h-7 min-w-0 gap-1.5 px-2.5 text-xs text-foreground/75 shadow-none hover:text-foreground data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none",
                           children: [
                             action.icon ? /* @__PURE__ */ jsx(ActionIcon, { className: "size-3.5" }) : null,
-                            action.label
+                            /* @__PURE__ */ jsx("span", { className: "max-w-32 truncate", children: action.label })
                           ]
                         },
                         action.id