@inf-monkeys-tech/monkeys-design 1.0.78 → 1.0.80

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

@@ -1491,6 +1491,7 @@ function AgentWorkbenchSidebarSearch({
   label,
   placeholder = label,
   className,
+  variant = "default",
   onChange
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
@@ -1506,47 +1507,60 @@ function AgentWorkbenchSidebarSearch({
     window.addEventListener("keydown", handleShortcut);
     return () => window.removeEventListener("keydown", handleShortcut);
   }, []);
-  return /* @__PURE__ */ jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", className), children: [
-    /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { className: "size-4", "aria-hidden": "true" }) }),
-    /* @__PURE__ */ jsx(
-      InputGroupInput,
-      {
-        ref: searchRef,
-        type: "search",
-        value,
-        "aria-label": label,
-        placeholder,
-        className: "min-w-0 [&::-webkit-search-cancel-button]:hidden",
-        onChange: (event) => onChange(event.target.value),
-        onKeyDown: (event) => {
-          if (event.key !== "Escape") return;
-          onChange("");
-          event.currentTarget.blur();
-        }
-      }
-    ),
-    value ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
-      InputGroupButton,
-      {
-        size: "icon-xs",
-        "aria-label": messages.clearSearch,
-        onClick: () => onChange(""),
-        children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
-      }
-    ) }) : /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      className: cn2(
+        variant === "trend" ? "h-12 rounded-[var(--radius)] border-border bg-card text-foreground" : "h-10 rounded-lg bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { className: "size-4", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(
+          InputGroupInput,
+          {
+            ref: searchRef,
+            type: "search",
+            value,
+            "aria-label": label,
+            placeholder,
+            className: "min-w-0 [&::-webkit-search-cancel-button]:hidden",
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key !== "Escape") return;
+              onChange("");
+              event.currentTarget.blur();
+            }
+          }
+        ),
+        value ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+          InputGroupButton,
+          {
+            size: "icon-xs",
+            "aria-label": messages.clearSearch,
+            onClick: () => onChange(""),
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
+          }
+        ) }) : /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
+      ]
+    }
+  );
 }
 function AgentWorkbenchSidebarNewSessionButton({
   label,
   className,
+  variant = "default",
   onClick
 }) {
   return /* @__PURE__ */ jsxs(
     Button,
     {
       type: "button",
-      variant: "ghost",
-      className: cn2("h-9 w-full justify-start gap-2 px-3 text-sm", className),
+      variant: variant === "trend" ? "default" : "ghost",
+      className: cn2(
+        variant === "trend" ? "h-11 w-full justify-center gap-2 rounded-[var(--radius)] border border-primary/60 bg-primary px-3 font-semibold text-primary-foreground hover:bg-primary/90" : "h-9 w-full justify-start gap-2 px-3 text-sm",
+        className
+      ),
       onClick,
       children: [
         /* @__PURE__ */ jsx(SquarePen, { className: "size-4", "aria-hidden": "true" }),
@@ -1635,6 +1649,7 @@ function AgentWorkbenchSessionList({
   retryLabel,
   groupByMode = false,
   showHeading = false,
+  variant = "default",
   className,
   itemClassName,
   capabilities,
@@ -1694,6 +1709,59 @@ function AgentWorkbenchSessionList({
   if (sessions.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: query ? noResultsLabel : emptyLabel });
   }
+  const renderTrendItems = (items) => /* @__PURE__ */ jsx("div", { className: "space-y-3", children: items.map((item) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-current": item.id === selectedSessionId ? "page" : void 0,
+      className: "group flex h-10 w-full min-w-0 items-center rounded-[var(--radius)] border border-transparent bg-muted/60 text-foreground transition hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-primary/10",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: item.title,
+            className: "h-full min-w-0 flex-1 truncate px-3 text-left text-sm font-semibold",
+            onClick: () => onSelect(item.id),
+            children: item.title
+          }
+        ),
+        capabilities?.delete ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-agent-workbench-item-actions": true,
+            className: "mr-1 shrink-0 opacity-0 transition-opacity group-aria-[current=page]:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100",
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsxs(DropdownMenu2, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": messages.actions,
+                  className: "size-8 text-muted-foreground",
+                  children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4", "aria-hidden": "true" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  className: "text-destructive-text",
+                  onSelect: () => onDelete?.(item.id),
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                    messages.delete
+                  ]
+                }
+              ) })
+            ] })
+          }
+        ) : null
+      ]
+    },
+    item.id
+  )) });
   const renderItems = (items) => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: items.map((item) => {
     const percent = item.contextUsage && item.contextUsage.maxTokens > 0 ? Math.min(
       100,
@@ -1850,7 +1918,7 @@ function AgentWorkbenchSessionList({
   }) });
   return /* @__PURE__ */ jsxs("div", { className: cn2("space-y-2", className), children: [
     showHeading && !groupByMode ? /* @__PURE__ */ jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }) : null,
-    groupByMode ? [
+    variant === "trend" ? renderTrendItems(sessions) : groupByMode ? [
       {
         id: "chatbot",
         label: messages.chats,
@@ -2279,6 +2347,7 @@ function AgentWorkbenchExploreSidebar({
   error,
   showDraftSession = !selectedSessionId,
   deleteSessions = false,
+  variant = "default",
   defaultGroupId,
   header,
   footer,
@@ -2364,6 +2433,7 @@ function AgentWorkbenchExploreSidebar({
         {
           value: searchQuery,
           label: labels.search,
+          variant,
           onChange: (query) => onIntent?.({ type: "change-search", query })
         }
       ) : void 0,
@@ -2371,6 +2441,7 @@ function AgentWorkbenchExploreSidebar({
         AgentWorkbenchSidebarNewSessionButton,
         {
           label: labels.newSession,
+          variant,
           onClick: () => onIntent?.({ type: "create-session" })
         }
       ) : void 0,
@@ -2402,6 +2473,7 @@ function AgentWorkbenchExploreSidebar({
             noResultsLabel: labels.noResults,
             retryLabel: labels.retry,
             groupByMode: resolvedConfig.navigationMode !== "default",
+            variant,
             capabilities: { delete: deleteSessions },
             onSelect: (sessionId) => onIntent?.({ type: "select-session", sessionId }),
             onDelete: (sessionId) => onIntent?.({ type: "delete-session", sessionId }),