@inf-monkeys-tech/monkeys-design 2.0.30 → 2.0.32-canary.418.1.dc4ca69

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

@@ -1818,6 +1818,7 @@ var ICONS = {
   code: lucideReact.Code2,
   "shopping-bag": lucideReact.ShoppingBag
 };
+var QUICK_START_CATEGORY_ID = "__quick-start__";
 function TemplateVisual({ template }) {
   const Icon2 = ICONS[template.icon || "sparkles"];
   if (template.coverImageUrl) {
@@ -1841,21 +1842,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 = React5.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;
   React5.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);
@@ -1904,13 +1931,28 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
         }
       }
     ),
-    !activeCategory ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon2, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
-        category.label
-      ] }, category.id);
-    }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    !activeCategory ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-full items-center justify-center gap-2 overflow-x-auto px-1 pb-1", children: [
+      quickStartCategory ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+            messages.label
+          ]
+        }
+      ) : null,
+      categories.map((category) => {
+        const Icon2 = ICONS[category.icon || "sparkles"];
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon2, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+          category.label
+        ] }, category.id);
+      })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-full items-center gap-1 overflow-x-auto pb-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -1928,7 +1970,7 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
             ]
           }
         ),
-        activeCategory.sections.map((section) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         "div",