@inf-monkeys-tech/monkeys-design 2.0.30 → 2.0.32

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

@@ -3,7 +3,7 @@ import { createContext, forwardRef, useImperativeHandle, useContext, useMemo, us
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-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, Blocks, Settings, Clock3, TerminalSquare, FileOutput, Download, PanelLeft, PanelRight, Loader2, ListFilter, Link2, TriangleAlert, RefreshCw, ExternalLink, PanelRightClose, Wrench, BookOpen, Bot, SquarePen, MessageSquare, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, 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, Sparkles, ShoppingBag, Code2, Search, Palette, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, Blocks, Settings, Clock3, TerminalSquare, FileOutput, Download, PanelLeft, PanelRight, Loader2, ListFilter, Link2, TriangleAlert, RefreshCw, ExternalLink, PanelRightClose, Wrench, BookOpen, Bot, SquarePen, MessageSquare, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -1786,6 +1786,7 @@ var ICONS = {
   code: Code2,
   "shopping-bag": ShoppingBag
 };
+var QUICK_START_CATEGORY_ID = "__quick-start__";
 function TemplateVisual({ template }) {
   const Icon2 = ICONS[template.icon || "sparkles"];
   if (template.coverImageUrl) {
@@ -1809,21 +1810,47 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
     })).filter((category) => category.sections.length > 0),
     [viewModel.categories, viewModel.mode]
   );
-  const activeCategory = categories.find((category) => category.id === activeCategoryId);
+  const quickStartCategory = useMemo(() => {
+    const templates = categories.flatMap((category) => category.sections.filter((section) => section.id === "quick-start")).map((section) => section.templates).flat().filter((template, index, allTemplates) => allTemplates.findIndex((item) => item.id === template.id) === index);
+    if (templates.length === 0) return void 0;
+    return {
+      id: QUICK_START_CATEGORY_ID,
+      label: messages.label,
+      icon: "sparkles",
+      sections: [
+        {
+          id: "quick-start",
+          label: messages.label,
+          templates
+        }
+      ]
+    };
+  }, [categories, messages.label]);
+  const activeCategory = activeCategoryId === QUICK_START_CATEGORY_ID ? quickStartCategory : categories.find((category) => category.id === activeCategoryId);
   const activeSection = activeCategory?.sections.find((section) => section.id === activeSectionId) || activeCategory?.sections[0];
   const usesCompactList = activeSection?.templates.length ? activeSection.templates.every((template) => !template.coverImageUrl) : false;
   useEffect(() => {
-    if (activeCategoryId && !categories.some((category) => category.id === activeCategoryId)) {
+    if (activeCategoryId && activeCategoryId !== QUICK_START_CATEGORY_ID && !categories.some((category) => category.id === activeCategoryId)) {
       setActiveCategoryId(void 0);
       setActiveSectionId(void 0);
     }
-  }, [activeCategoryId, categories]);
+    if (activeCategoryId === QUICK_START_CATEGORY_ID && !quickStartCategory) {
+      setActiveCategoryId(void 0);
+      setActiveSectionId(void 0);
+    }
+  }, [activeCategoryId, categories, quickStartCategory]);
   if (categories.length === 0) return null;
   const selectCategory = (category) => {
     setActiveCategoryId(category.id);
     setActiveSectionId(category.sections[0]?.id);
     onIntent?.({ type: "change-category", categoryId: category.id });
   };
+  const selectQuickStart = () => {
+    if (!quickStartCategory) return;
+    setActiveCategoryId(QUICK_START_CATEGORY_ID);
+    setActiveSectionId(quickStartCategory.sections[0]?.id);
+    onIntent?.({ type: "change-category" });
+  };
   const selectSection = (sectionId) => {
     if (!activeCategory) return;
     setActiveSectionId(sectionId);
@@ -1872,13 +1899,28 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
         }
       }
     ),
-    !activeCategory ? /* @__PURE__ */ jsx("div", { className: "flex max-w-full items-center justify-center gap-2 overflow-x-auto px-1 pb-1", children: categories.map((category) => {
-      const Icon2 = ICONS[category.icon || "sparkles"];
-      return /* @__PURE__ */ jsxs("button", { type: "button", className: "inline-flex h-10 shrink-0 items-center gap-2 rounded-full border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => selectCategory(category), children: [
-        /* @__PURE__ */ jsx(Icon2, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
-        category.label
-      ] }, category.id);
-    }) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    !activeCategory ? /* @__PURE__ */ jsxs("div", { className: "flex max-w-full items-center justify-center gap-2 overflow-x-auto px-1 pb-1", children: [
+      quickStartCategory ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-10 shrink-0 items-center gap-2 rounded-full border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "aria-pressed": activeCategoryId === QUICK_START_CATEGORY_ID,
+          onClick: selectQuickStart,
+          children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+            messages.label
+          ]
+        }
+      ) : null,
+      categories.map((category) => {
+        const Icon2 = ICONS[category.icon || "sparkles"];
+        return /* @__PURE__ */ jsxs("button", { type: "button", className: "inline-flex h-10 shrink-0 items-center gap-2 rounded-full border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => selectCategory(category), children: [
+          /* @__PURE__ */ jsx(Icon2, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+          category.label
+        ] }, category.id);
+      })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full items-center gap-1 overflow-x-auto pb-1", children: [
         /* @__PURE__ */ jsxs(
           "button",
@@ -1896,7 +1938,7 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
             ]
           }
         ),
-        activeCategory.sections.map((section) => /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": activeSection?.id === section.id, className: cn2("h-9 shrink-0 rounded-full px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", activeSection?.id === section.id ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground"), onClick: () => selectSection(section.id), children: section.label }, section.id))
+        activeCategory.sections.map((section, index) => /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": activeSection?.id === section.id, className: cn2("h-9 shrink-0 rounded-full px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", activeSection?.id === section.id ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground"), onClick: () => selectSection(section.id), children: activeCategory.id !== QUICK_START_CATEGORY_ID && index === 0 ? activeCategory.label : section.label }, section.id))
       ] }),
       /* @__PURE__ */ jsx(
         "div",