@inf-monkeys-tech/monkeys-design 1.0.33 → 1.0.34

package/dist/components/agent-workbench/index.d.mts

@@ -62,6 +62,55 @@ interface AgentWorkbenchComposerProps {
     onIntent?: (intent: AgentWorkbenchComposerIntent) => void;
 }
 declare function AgentWorkbenchComposer({ viewModel, modeSelectionEnabled, modeFilteringEnabled, className, classNames, onIntent, }: AgentWorkbenchComposerProps): react_jsx_runtime.JSX.Element;
+type AgentWorkbenchQuickStartIcon = 'code' | 'file-text' | 'palette' | 'search' | 'shopping-bag' | 'sparkles';
+interface AgentWorkbenchQuickStartTemplate {
+    id: string;
+    title: string;
+    description?: string;
+    prompt: string;
+    action?: 'prompt' | 'upload';
+    icon?: AgentWorkbenchQuickStartIcon;
+    coverImageUrl?: string;
+    accept?: string;
+    multiple?: boolean;
+    modes?: Array<'chat' | 'work'>;
+}
+interface AgentWorkbenchQuickStartSection {
+    id: string;
+    label: string;
+    templates: AgentWorkbenchQuickStartTemplate[];
+}
+interface AgentWorkbenchQuickStartCategory {
+    id: string;
+    label: string;
+    icon?: AgentWorkbenchQuickStartIcon;
+    sections: AgentWorkbenchQuickStartSection[];
+}
+interface AgentWorkbenchQuickStartViewModel {
+    contract: 'AgentWorkbenchQuickStartViewModel';
+    mode: 'chat' | 'work';
+    categories: AgentWorkbenchQuickStartCategory[];
+    disabled?: boolean;
+}
+type AgentWorkbenchQuickStartIntent = {
+    type: 'change-category';
+    categoryId?: string;
+} | {
+    type: 'change-section';
+    categoryId: string;
+    sectionId: string;
+} | {
+    type: 'select-template';
+    templateId: string;
+    prompt: string;
+    files?: File[];
+};
+interface AgentWorkbenchQuickStartProps {
+    viewModel: AgentWorkbenchQuickStartViewModel;
+    className?: string;
+    onIntent?: (intent: AgentWorkbenchQuickStartIntent) => void;
+}
+declare function AgentWorkbenchQuickStart({ viewModel, className, onIntent }: AgentWorkbenchQuickStartProps): null | react_jsx_runtime.JSX.Element;
 type MessageEvent = Extract<AgentSessionEvent, {
     eventType: 'message';
 }>;
@@ -186,4 +235,4 @@ interface AgentWorkbenchArtifactWorkspaceProps {
     onIntent?: (intent: AgentWorkbenchArtifactWorkspaceIntent) => void;
 }
 declare function AgentWorkbenchArtifactWorkspace({ artifacts, activeArtifactId, className, renderArtifact, onIntent, }: AgentWorkbenchArtifactWorkspaceProps): null | react_jsx_runtime.JSX.Element;
-export { AgentWorkbenchAction, type AgentWorkbenchActionKind, type AgentWorkbenchActionProps, type AgentWorkbenchActionStatus, AgentWorkbenchApprovalIntent, AgentWorkbenchArtifactIntent, type AgentWorkbenchArtifactItem, type AgentWorkbenchArtifactKind, type AgentWorkbenchArtifactOrigin, type AgentWorkbenchArtifactStatus, AgentWorkbenchArtifactSummary, type AgentWorkbenchArtifactSummaryProps, AgentWorkbenchArtifactWorkspace, type AgentWorkbenchArtifactWorkspaceIntent, type AgentWorkbenchArtifactWorkspaceProps, AgentWorkbenchComposer, type AgentWorkbenchComposerClassNames, type AgentWorkbenchComposerIntent, type AgentWorkbenchComposerProps, AgentWorkbenchProcess, type AgentWorkbenchProcessProps, type AgentWorkbenchProcessStatus, AgentWorkbenchThread, type AgentWorkbenchThreadClassNames, type AgentWorkbenchThreadMessage, type AgentWorkbenchThreadProps };
+export { AgentWorkbenchAction, type AgentWorkbenchActionKind, type AgentWorkbenchActionProps, type AgentWorkbenchActionStatus, AgentWorkbenchApprovalIntent, AgentWorkbenchArtifactIntent, type AgentWorkbenchArtifactItem, type AgentWorkbenchArtifactKind, type AgentWorkbenchArtifactOrigin, type AgentWorkbenchArtifactStatus, AgentWorkbenchArtifactSummary, type AgentWorkbenchArtifactSummaryProps, AgentWorkbenchArtifactWorkspace, type AgentWorkbenchArtifactWorkspaceIntent, type AgentWorkbenchArtifactWorkspaceProps, AgentWorkbenchComposer, type AgentWorkbenchComposerClassNames, type AgentWorkbenchComposerIntent, type AgentWorkbenchComposerProps, AgentWorkbenchProcess, type AgentWorkbenchProcessProps, type AgentWorkbenchProcessStatus, AgentWorkbenchQuickStart, type AgentWorkbenchQuickStartCategory, type AgentWorkbenchQuickStartIcon, type AgentWorkbenchQuickStartIntent, type AgentWorkbenchQuickStartProps, type AgentWorkbenchQuickStartSection, type AgentWorkbenchQuickStartTemplate, type AgentWorkbenchQuickStartViewModel, AgentWorkbenchThread, type AgentWorkbenchThreadClassNames, type AgentWorkbenchThreadMessage, type AgentWorkbenchThreadProps };

package/dist/components/agent-workbench/index.d.ts

@@ -62,6 +62,55 @@ interface AgentWorkbenchComposerProps {
     onIntent?: (intent: AgentWorkbenchComposerIntent) => void;
 }
 declare function AgentWorkbenchComposer({ viewModel, modeSelectionEnabled, modeFilteringEnabled, className, classNames, onIntent, }: AgentWorkbenchComposerProps): react_jsx_runtime.JSX.Element;
+type AgentWorkbenchQuickStartIcon = 'code' | 'file-text' | 'palette' | 'search' | 'shopping-bag' | 'sparkles';
+interface AgentWorkbenchQuickStartTemplate {
+    id: string;
+    title: string;
+    description?: string;
+    prompt: string;
+    action?: 'prompt' | 'upload';
+    icon?: AgentWorkbenchQuickStartIcon;
+    coverImageUrl?: string;
+    accept?: string;
+    multiple?: boolean;
+    modes?: Array<'chat' | 'work'>;
+}
+interface AgentWorkbenchQuickStartSection {
+    id: string;
+    label: string;
+    templates: AgentWorkbenchQuickStartTemplate[];
+}
+interface AgentWorkbenchQuickStartCategory {
+    id: string;
+    label: string;
+    icon?: AgentWorkbenchQuickStartIcon;
+    sections: AgentWorkbenchQuickStartSection[];
+}
+interface AgentWorkbenchQuickStartViewModel {
+    contract: 'AgentWorkbenchQuickStartViewModel';
+    mode: 'chat' | 'work';
+    categories: AgentWorkbenchQuickStartCategory[];
+    disabled?: boolean;
+}
+type AgentWorkbenchQuickStartIntent = {
+    type: 'change-category';
+    categoryId?: string;
+} | {
+    type: 'change-section';
+    categoryId: string;
+    sectionId: string;
+} | {
+    type: 'select-template';
+    templateId: string;
+    prompt: string;
+    files?: File[];
+};
+interface AgentWorkbenchQuickStartProps {
+    viewModel: AgentWorkbenchQuickStartViewModel;
+    className?: string;
+    onIntent?: (intent: AgentWorkbenchQuickStartIntent) => void;
+}
+declare function AgentWorkbenchQuickStart({ viewModel, className, onIntent }: AgentWorkbenchQuickStartProps): null | react_jsx_runtime.JSX.Element;
 type MessageEvent = Extract<AgentSessionEvent, {
     eventType: 'message';
 }>;
@@ -186,4 +235,4 @@ interface AgentWorkbenchArtifactWorkspaceProps {
     onIntent?: (intent: AgentWorkbenchArtifactWorkspaceIntent) => void;
 }
 declare function AgentWorkbenchArtifactWorkspace({ artifacts, activeArtifactId, className, renderArtifact, onIntent, }: AgentWorkbenchArtifactWorkspaceProps): null | react_jsx_runtime.JSX.Element;
-export { AgentWorkbenchAction, type AgentWorkbenchActionKind, type AgentWorkbenchActionProps, type AgentWorkbenchActionStatus, AgentWorkbenchApprovalIntent, AgentWorkbenchArtifactIntent, type AgentWorkbenchArtifactItem, type AgentWorkbenchArtifactKind, type AgentWorkbenchArtifactOrigin, type AgentWorkbenchArtifactStatus, AgentWorkbenchArtifactSummary, type AgentWorkbenchArtifactSummaryProps, AgentWorkbenchArtifactWorkspace, type AgentWorkbenchArtifactWorkspaceIntent, type AgentWorkbenchArtifactWorkspaceProps, AgentWorkbenchComposer, type AgentWorkbenchComposerClassNames, type AgentWorkbenchComposerIntent, type AgentWorkbenchComposerProps, AgentWorkbenchProcess, type AgentWorkbenchProcessProps, type AgentWorkbenchProcessStatus, AgentWorkbenchThread, type AgentWorkbenchThreadClassNames, type AgentWorkbenchThreadMessage, type AgentWorkbenchThreadProps };
+export { AgentWorkbenchAction, type AgentWorkbenchActionKind, type AgentWorkbenchActionProps, type AgentWorkbenchActionStatus, AgentWorkbenchApprovalIntent, AgentWorkbenchArtifactIntent, type AgentWorkbenchArtifactItem, type AgentWorkbenchArtifactKind, type AgentWorkbenchArtifactOrigin, type AgentWorkbenchArtifactStatus, AgentWorkbenchArtifactSummary, type AgentWorkbenchArtifactSummaryProps, AgentWorkbenchArtifactWorkspace, type AgentWorkbenchArtifactWorkspaceIntent, type AgentWorkbenchArtifactWorkspaceProps, AgentWorkbenchComposer, type AgentWorkbenchComposerClassNames, type AgentWorkbenchComposerIntent, type AgentWorkbenchComposerProps, AgentWorkbenchProcess, type AgentWorkbenchProcessProps, type AgentWorkbenchProcessStatus, AgentWorkbenchQuickStart, type AgentWorkbenchQuickStartCategory, type AgentWorkbenchQuickStartIcon, type AgentWorkbenchQuickStartIntent, type AgentWorkbenchQuickStartProps, type AgentWorkbenchQuickStartSection, type AgentWorkbenchQuickStartTemplate, type AgentWorkbenchQuickStartViewModel, AgentWorkbenchThread, type AgentWorkbenchThreadClassNames, type AgentWorkbenchThreadMessage, type AgentWorkbenchThreadProps };

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

@@ -176,6 +176,11 @@ var enUS = {
         reasoningOptions: { low: "Low", medium: "Medium", high: "High", xhigh: "Extra high" },
         permissionOptions: { "approval-required": "Approval required", "auto-approve": "Auto approve", "full-access": "Full access" }
       },
+      quickStart: {
+        label: "Quick start",
+        back: "Back",
+        addFile: "Add file"
+      },
       tool: {
         input: "Input",
         output: "Output",
@@ -961,6 +966,141 @@ function AgentWorkbenchComposer({
     }
   );
 }
+var ICONS = {
+  sparkles: lucideReact.Sparkles,
+  palette: lucideReact.Palette,
+  search: lucideReact.Search,
+  "file-text": lucideReact.FileText,
+  code: lucideReact.Code2,
+  "shopping-bag": lucideReact.ShoppingBag
+};
+function TemplateVisual({ template }) {
+  const Icon2 = ICONS[template.icon || "sparkles"];
+  if (template.coverImageUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: template.coverImageUrl, alt: "", className: "size-full object-cover transition-transform duration-200 group-hover:scale-105" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-full items-center justify-center bg-gradient-to-br from-primary/5 via-muted/50 to-primary/15", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-14 items-center justify-center rounded-2xl border border-primary/10 bg-background/85 text-primary shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-7", "aria-hidden": "true" }) }) });
+}
+function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
+  const messages = useMonkeysLocaleMessages().agentWorkbench.quickStart;
+  const fileInputRef = React2.useRef(null);
+  const [activeCategoryId, setActiveCategoryId] = React2.useState();
+  const [activeSectionId, setActiveSectionId] = React2.useState();
+  const [pendingTemplate, setPendingTemplate] = React2.useState();
+  const categories = React2.useMemo(
+    () => viewModel.categories.map((category) => ({
+      ...category,
+      sections: category.sections.map((section) => ({
+        ...section,
+        templates: section.templates.filter((template) => !template.modes || template.modes.includes(viewModel.mode))
+      })).filter((section) => section.templates.length > 0)
+    })).filter((category) => category.sections.length > 0),
+    [viewModel.categories, viewModel.mode]
+  );
+  const activeCategory = categories.find((category) => category.id === activeCategoryId);
+  const activeSection = activeCategory?.sections.find((section) => section.id === activeSectionId) || activeCategory?.sections[0];
+  React2.useEffect(() => {
+    if (activeCategoryId && !categories.some((category) => category.id === activeCategoryId)) {
+      setActiveCategoryId(void 0);
+      setActiveSectionId(void 0);
+    }
+  }, [activeCategoryId, categories]);
+  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 selectSection = (sectionId) => {
+    if (!activeCategory) return;
+    setActiveSectionId(sectionId);
+    onIntent?.({
+      type: "change-section",
+      categoryId: activeCategory.id,
+      sectionId
+    });
+  };
+  const selectTemplate = (template) => {
+    if (viewModel.disabled) return;
+    if (template.action !== "upload") {
+      onIntent?.({
+        type: "select-template",
+        templateId: template.id,
+        prompt: template.prompt
+      });
+      return;
+    }
+    const input = fileInputRef.current;
+    if (!input) return;
+    input.accept = template.accept || "*/*";
+    input.multiple = template.multiple === true;
+    setPendingTemplate(template);
+    input.click();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn2("agent-workbench-quick-start min-w-0 max-w-full", className), "aria-label": messages.label, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        className: "hidden",
+        onChange: (event) => {
+          const files = Array.from(event.target.files || []);
+          if (pendingTemplate && files.length > 0) {
+            onIntent?.({
+              type: "select-template",
+              templateId: pendingTemplate.id,
+              prompt: pendingTemplate.prompt,
+              files: pendingTemplate.multiple ? files : files.slice(0, 1)
+            });
+          }
+          setPendingTemplate(void 0);
+          event.target.value = "";
+        }
+      }
+    ),
+    !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: [
+      /* @__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",
+          {
+            type: "button",
+            className: "inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            onClick: () => {
+              setActiveCategoryId(void 0);
+              setActiveSectionId(void 0);
+              onIntent?.({ type: "change-category" });
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+              messages.back
+            ]
+          }
+        ),
+        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))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3", children: activeSection?.templates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: viewModel.disabled, "data-quick-start-template-id": template.id, className: "group min-w-0 overflow-hidden rounded-xl border border-border bg-background text-left transition-colors hover:border-primary/30 hover:bg-muted/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", onClick: () => selectTemplate(template), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "block px-4 pb-3 pt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+            template.title,
+            template.action === "upload" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "size-3", "aria-hidden": "true" }),
+              messages.addFile
+            ] }) : null
+          ] }),
+          template.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 line-clamp-2 block min-h-8 text-xs leading-4 text-muted-foreground", children: template.description }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-28 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(TemplateVisual, { template }) })
+      ] }, template.id)) })
+    ] })
+  ] });
+}
 function ItemAvatar({ item }) {
   const [failed, setFailed] = React2.useState(false);
   if (item.iconUrl && !failed) {
@@ -1256,7 +1396,7 @@ function AgentWorkbenchSidebar({
           !sessionsOnly ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(CollectionState, { status: viewModel.sessions.status, empty: messages.emptySessions, noResults: messages.noResults, hasItems: sessions.length > 0, query, error: viewModel.sessions.error, onRetry: () => onIntent?.({ type: "retry-sessions" }) }),
           sessionsOnly && sessions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [
-            { id: "chatbot", label: messages.chats, icon: lucideReact.SquarePen, items: chatbotSessions },
+            { id: "chatbot", label: messages.chats, icon: lucideReact.MessageSquare, items: chatbotSessions },
             { id: "agent", label: messages.agents, icon: lucideReact.Bot, items: agentSessions }
           ].map(({ id, label, icon: Icon2, items }) => /* @__PURE__ */ jsxRuntime.jsxs("details", { open: true, "aria-label": label, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex h-9 cursor-pointer list-none items-center gap-2 rounded-md px-3 text-sm font-semibold hover:bg-muted", children: [
@@ -2926,6 +3066,7 @@ exports.AgentWorkbenchArtifactSummary = AgentWorkbenchArtifactSummary;
 exports.AgentWorkbenchArtifactWorkspace = AgentWorkbenchArtifactWorkspace;
 exports.AgentWorkbenchComposer = AgentWorkbenchComposer;
 exports.AgentWorkbenchProcess = AgentWorkbenchProcess;
+exports.AgentWorkbenchQuickStart = AgentWorkbenchQuickStart;
 exports.AgentWorkbenchSidebar = AgentWorkbenchSidebar;
 exports.AgentWorkbenchTaskDetails = AgentWorkbenchTaskDetails;
 exports.AgentWorkbenchThread = AgentWorkbenchThread;