@inf-monkeys-tech/monkeys-design 1.0.52 → 1.0.53-canary.172.1.fa92e64

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AgentWorkbenchComposerViewModel, AgentSessionPermissionProfile, AgentSessionViewModel, AgentSessionEvent } from '@inf-monkeys-tech/monkeys';
-import { d as AgentWorkbenchApprovalIntent, e as AgentWorkbenchArtifactIntent } from '../../details-model-bc28e9593e3f.mjs';
-export { A as AgentWorkbenchActivity, a as AgentWorkbenchActivityClassNames, b as AgentWorkbenchActivityModel, c as AgentWorkbenchActivityProps, f as AgentWorkbenchDetailsIntent, g as AgentWorkbenchDetailsModel, h as AgentWorkbenchDetailsState, i as AgentWorkbenchDetailsTab, j as AgentWorkbenchEventOf, k as AgentWorkbenchSidebar, l as AgentWorkbenchSidebarClassNames, m as AgentWorkbenchSidebarIntent, n as AgentWorkbenchSidebarProps, o as AgentWorkbenchTaskDetails, p as AgentWorkbenchTaskDetailsClassNames, q as AgentWorkbenchTaskDetailsProps, r as AgentWorkbenchTerminalModel, s as AgentWorkbenchTool, t as AgentWorkbenchToolClassNames, u as AgentWorkbenchToolProps, v as createAgentWorkbenchActivityModel, w as createAgentWorkbenchDetailsModel } from '../../details-model-bc28e9593e3f.mjs';
+import { d as AgentWorkbenchApprovalIntent, e as AgentWorkbenchArtifactIntent } from '../../details-model-2eb132663bb1.mjs';
+export { A as AgentWorkbenchActivity, a as AgentWorkbenchActivityClassNames, b as AgentWorkbenchActivityModel, c as AgentWorkbenchActivityProps, f as AgentWorkbenchDetailsIntent, g as AgentWorkbenchDetailsModel, h as AgentWorkbenchDetailsState, i as AgentWorkbenchDetailsTab, j as AgentWorkbenchEventOf, k as AgentWorkbenchExploreGroup, l as AgentWorkbenchExploreItem, m as AgentWorkbenchExploreSidebar, n as AgentWorkbenchExploreSidebarIntent, o as AgentWorkbenchExploreSidebarLabels, p as AgentWorkbenchExploreSidebarProps, q as AgentWorkbenchSidebar, r as AgentWorkbenchSidebarClassNames, s as AgentWorkbenchSidebarIntent, t as AgentWorkbenchSidebarProps, u as AgentWorkbenchTaskDetails, v as AgentWorkbenchTaskDetailsClassNames, w as AgentWorkbenchTaskDetailsProps, x as AgentWorkbenchTerminalModel, y as AgentWorkbenchTool, z as AgentWorkbenchToolClassNames, B as AgentWorkbenchToolProps, C as createAgentWorkbenchActivityModel, D as createAgentWorkbenchDetailsModel } from '../../details-model-2eb132663bb1.mjs';
 import { ReactNode, ComponentType } from 'react';
 type AgentWorkbenchComposerIntent = {
     type: 'change-mode';

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AgentWorkbenchComposerViewModel, AgentSessionPermissionProfile, AgentSessionViewModel, AgentSessionEvent } from '@inf-monkeys-tech/monkeys';
-import { d as AgentWorkbenchApprovalIntent, e as AgentWorkbenchArtifactIntent } from '../../details-model-bc28e9593e3f.js';
-export { A as AgentWorkbenchActivity, a as AgentWorkbenchActivityClassNames, b as AgentWorkbenchActivityModel, c as AgentWorkbenchActivityProps, f as AgentWorkbenchDetailsIntent, g as AgentWorkbenchDetailsModel, h as AgentWorkbenchDetailsState, i as AgentWorkbenchDetailsTab, j as AgentWorkbenchEventOf, k as AgentWorkbenchSidebar, l as AgentWorkbenchSidebarClassNames, m as AgentWorkbenchSidebarIntent, n as AgentWorkbenchSidebarProps, o as AgentWorkbenchTaskDetails, p as AgentWorkbenchTaskDetailsClassNames, q as AgentWorkbenchTaskDetailsProps, r as AgentWorkbenchTerminalModel, s as AgentWorkbenchTool, t as AgentWorkbenchToolClassNames, u as AgentWorkbenchToolProps, v as createAgentWorkbenchActivityModel, w as createAgentWorkbenchDetailsModel } from '../../details-model-bc28e9593e3f.js';
+import { d as AgentWorkbenchApprovalIntent, e as AgentWorkbenchArtifactIntent } from '../../details-model-2eb132663bb1.js';
+export { A as AgentWorkbenchActivity, a as AgentWorkbenchActivityClassNames, b as AgentWorkbenchActivityModel, c as AgentWorkbenchActivityProps, f as AgentWorkbenchDetailsIntent, g as AgentWorkbenchDetailsModel, h as AgentWorkbenchDetailsState, i as AgentWorkbenchDetailsTab, j as AgentWorkbenchEventOf, k as AgentWorkbenchExploreGroup, l as AgentWorkbenchExploreItem, m as AgentWorkbenchExploreSidebar, n as AgentWorkbenchExploreSidebarIntent, o as AgentWorkbenchExploreSidebarLabels, p as AgentWorkbenchExploreSidebarProps, q as AgentWorkbenchSidebar, r as AgentWorkbenchSidebarClassNames, s as AgentWorkbenchSidebarIntent, t as AgentWorkbenchSidebarProps, u as AgentWorkbenchTaskDetails, v as AgentWorkbenchTaskDetailsClassNames, w as AgentWorkbenchTaskDetailsProps, x as AgentWorkbenchTerminalModel, y as AgentWorkbenchTool, z as AgentWorkbenchToolClassNames, B as AgentWorkbenchToolProps, C as createAgentWorkbenchActivityModel, D as createAgentWorkbenchDetailsModel } from '../../details-model-2eb132663bb1.js';
 import { ReactNode, ComponentType } from 'react';
 type AgentWorkbenchComposerIntent = {
     type: 'change-mode';

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

@@ -1746,6 +1746,160 @@ function AgentWorkbenchSidebar({
     }
   ) });
 }
+function AgentWorkbenchExploreSidebar({
+  sessions,
+  groups,
+  labels,
+  selectedSessionId,
+  searchQuery = "",
+  loading = false,
+  showDraftSession = !selectedSessionId,
+  defaultGroupId,
+  className,
+  renderItemMedia,
+  onIntent
+}) {
+  const searchRef = React5.useRef(null);
+  const [activeGroupId, setActiveGroupId] = React5.useState(
+    defaultGroupId ?? groups[0]?.id ?? ""
+  );
+  const activeGroup = groups.find((group) => group.id === activeGroupId) ?? groups[0];
+  const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+  const draftVisible = showDraftSession && (!normalizedQuery || labels.draftSession.toLocaleLowerCase().includes(normalizedQuery));
+  const filteredSessions = React5.useMemo(
+    () => sessions.filter(
+      (session) => !normalizedQuery || session.title.toLocaleLowerCase().includes(normalizedQuery)
+    ),
+    [normalizedQuery, sessions]
+  );
+  React5.useEffect(() => {
+    if (groups.some((group) => group.id === activeGroupId)) return;
+    setActiveGroupId(defaultGroupId ?? groups[0]?.id ?? "");
+  }, [activeGroupId, defaultGroupId, groups]);
+  React5.useEffect(() => {
+    const handleShortcut = (event) => {
+      if (!(event.ctrlKey || event.metaKey) || event.key.toLocaleLowerCase() !== "k")
+        return;
+      event.preventDefault();
+      searchRef.current?.focus();
+      searchRef.current?.select();
+    };
+    window.addEventListener("keydown", handleShortcut);
+    return () => window.removeEventListener("keydown", handleShortcut);
+  }, []);
+  const changeGroup = (groupId) => {
+    setActiveGroupId(groupId);
+    onIntent?.({ type: "change-group", groupId });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      "data-sidebar-style": "explore",
+      "aria-label": labels.navigation,
+      className: cn2(
+        "flex h-full min-h-0 flex-col bg-background text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 space-y-3 px-4 pb-2 pt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "h-12 rounded-2xl border-white/15 bg-white/[0.04] text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4 text-white/70", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputGroupInput,
+              {
+                ref: searchRef,
+                type: "search",
+                value: searchQuery,
+                "aria-label": labels.search,
+                placeholder: labels.search,
+                className: "min-w-0 text-white placeholder:text-white/55 [&::-webkit-search-cancel-button]:hidden",
+                onChange: (event) => onIntent?.({ type: "change-search", query: event.target.value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-white/20 px-1.5 py-0.5 text-[10px] text-white/70", children: "Ctrl K" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              type: "button",
+              className: "h-11 w-full justify-start gap-2 rounded-xl border border-primary/60 bg-primary px-3 font-semibold text-primary-foreground hover:bg-primary/90",
+              onClick: () => onIntent?.({ type: "create-session" }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
+                labels.newSession
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[160px] flex-[0_1_280px] overflow-y-auto px-4 pb-3", children: loading && sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-24 items-center justify-center text-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-5 animate-spin" }) }) : filteredSessions.length === 0 && !draftVisible ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-8 text-center text-sm text-white/55", children: normalizedQuery ? labels.noResults : labels.emptySessions }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          draftVisible ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-current": "page",
+              className: "block h-10 w-full truncate rounded-xl border border-primary bg-white/10 px-3 text-left text-sm font-semibold text-white",
+              onClick: () => onIntent?.({ type: "create-session" }),
+              children: labels.draftSession
+            }
+          ) : null,
+          filteredSessions.map((session) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-current": session.id === selectedSessionId ? "page" : void 0,
+              className: "block h-10 w-full truncate rounded-xl border border-transparent bg-white/10 px-3 text-left text-sm font-semibold text-white transition hover:bg-white/15 aria-[current=page]:border-primary",
+              onClick: () => onIntent?.({ type: "select-session", sessionId: session.id }),
+              children: session.title
+            },
+            session.id
+          ))
+        ] }) }),
+        activeGroup ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 border-t border-white/10 px-4 pb-4 pt-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: activeGroup.id, onValueChange: changeGroup, children: /* @__PURE__ */ jsxRuntime.jsx(
+            TabsList,
+            {
+              className: "grid h-10 w-full rounded-xl bg-white/10 p-0.5 text-white/55",
+              style: {
+                gridTemplateColumns: `repeat(${groups.length}, minmax(0, 1fr))`
+              },
+              children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+                TabsTrigger,
+                {
+                  value: group.id,
+                  className: "rounded-[10px] text-sm font-semibold text-white/55 data-[state=active]:border data-[state=active]:border-white/15 data-[state=active]:bg-background data-[state=active]:text-white",
+                  children: group.label
+                },
+                group.id
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 grid grid-cols-2 gap-2", children: activeGroup.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": item.title,
+              className: "group relative aspect-[1.27] overflow-hidden rounded-xl border border-white/15 bg-card text-left transition hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+              onClick: () => onIntent?.({
+                type: "select-item",
+                groupId: activeGroup.id,
+                item
+              }),
+              children: renderItemMedia?.(item, activeGroup) ?? (item.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: "",
+                  className: "size-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                }
+              ) : null)
+            },
+            item.id
+          )) })
+        ] }) : null
+      ]
+    }
+  );
+}
 
 // src/components/agent-workbench/activity-model.ts
 var EVENT_CAPABILITIES = {
@@ -3431,6 +3585,7 @@ exports.AgentWorkbenchActivity = AgentWorkbenchActivity;
 exports.AgentWorkbenchArtifactSummary = AgentWorkbenchArtifactSummary;
 exports.AgentWorkbenchArtifactWorkspace = AgentWorkbenchArtifactWorkspace;
 exports.AgentWorkbenchComposer = AgentWorkbenchComposer;
+exports.AgentWorkbenchExploreSidebar = AgentWorkbenchExploreSidebar;
 exports.AgentWorkbenchProcess = AgentWorkbenchProcess;
 exports.AgentWorkbenchQuickStart = AgentWorkbenchQuickStart;
 exports.AgentWorkbenchSidebar = AgentWorkbenchSidebar;