@athenaintel/react 0.19.0 → 0.20.0

package/dist/chat/super-grouping/CollapsibleGroup.cjs

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react$1 = require("@assistant-ui/react");
+const lucideReact = require("lucide-react");
+const react = require("react");
+const groupingFunction = require("./grouping-function.cjs");
+const toolkitMap = require("./toolkit-map.cjs");
+const cnfast = require("cnfast");
+const TOOLKIT_THEMES = {
+  Web: { color: "#7BCCFA" },
+  Document: { color: "#4586F9" },
+  "Document (Word)": { color: "#4586F9" },
+  Notebook: { color: "#FFAB00" },
+  Python: { color: "#00A76F" },
+  Spreadsheet: { color: "#00A76F" },
+  Email: { color: "#B584FF" },
+  AOP: { color: "#336DFF" },
+  App: { color: "#7336F5" },
+  Presentation: { color: "#F56B36" },
+  "User Interface": { color: "#7336F5" },
+  Canvas: { color: "#002542" },
+  Computer: { color: "#3E0042" },
+  Database: { color: "#7336F5" },
+  "Chrome Browser": { color: "#4285F4" }
+};
+const DEFAULT_TOOLKIT_THEME = { color: "#919EAB" };
+const DEFAULT_GROUPING = groupingFunction.createToolBasedGroupingFunction(toolkitMap.defaultGetToolGroupKey);
+const SuperGroupingContext = react.createContext(null);
+const SuperGroupingProvider = SuperGroupingContext.Provider;
+const CollapsibleGroup = ({
+  groupKey,
+  indices,
+  children,
+  themes,
+  forceOpen = false,
+  compactWhileRunning = false,
+  headerActions,
+  groupingFunction: groupingFunction2,
+  className
+}) => {
+  var _a;
+  const panelId = react.useId();
+  const isMessageRunning = react$1.useAuiState((s) => {
+    var _a2;
+    return ((_a2 = s.message.status) == null ? void 0 : _a2.type) === "running";
+  });
+  const messageContent = react$1.useAuiState(
+    (s) => s.message.role === "assistant" ? s.message.content : void 0
+  );
+  const contextGrouping = (_a = react.useContext(SuperGroupingContext)) == null ? void 0 : _a.groupingFunction;
+  const grouping = groupingFunction2 ?? contextGrouping ?? DEFAULT_GROUPING;
+  const lastIndex = indices.at(-1);
+  const isLastGroup = react.useMemo(() => {
+    if (!messageContent) return false;
+    const lastGroup = grouping(messageContent).filter((group) => group.indices.length > 1).at(-1);
+    return (lastGroup == null ? void 0 : lastGroup.indices.at(-1)) === lastIndex;
+  }, [messageContent, grouping, lastIndex]);
+  const toolCallCount = react.useMemo(
+    () => messageContent ? indices.reduce(
+      (count, index) => {
+        var _a2;
+        return ((_a2 = messageContent[index]) == null ? void 0 : _a2.type) === "tool-call" ? count + 1 : count;
+      },
+      0
+    ) : 0,
+    [messageContent, indices]
+  );
+  const theme = react.useMemo(
+    () => groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME,
+    [groupKey, themes]
+  );
+  const [userOpened, setOpen] = react.useState();
+  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;
+  const open = userOpened ?? (autoOpen || forceOpen);
+  if (!groupKey || indices.length <= 1) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const toggle = () => setOpen(!open);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "collapsible-group",
+      "data-group-key": groupKey,
+      className: cnfast.cn("my-4 rounded-2xl border shadow-sm", className),
+      style: {
+        borderColor: `${theme.color}33`,
+        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center rounded-2xl", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: toggle,
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              className: "flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-3 text-foreground/90", children: [
+                  theme.icon ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: theme.icon, alt: "", "aria-hidden": "true", className: "size-5 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "inline-block size-2 shrink-0 rounded-full",
+                      style: { backgroundColor: theme.color },
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate text-sm font-semibold", children: [
+                    isMessageRunning ? "Using " : "Used ",
+                    groupKey,
+                    " Toolkit"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-xs font-medium text-muted-foreground", children: [
+                  toolCallCount,
+                  " tool ",
+                  toolCallCount === 1 ? "call" : "calls"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1 pr-3 pl-1", children: [
+            headerActions,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggle,
+                "aria-label": open ? "Collapse toolkit group" : "Expand toolkit group",
+                "aria-expanded": open,
+                "aria-controls": panelId,
+                className: "flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5",
+                children: open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: panelId,
+            className: cnfast.cn(
+              "grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none",
+              open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            style: { borderColor: `${theme.color}33` },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 px-5 py-4", children }) })
+          }
+        )
+      ]
+    }
+  );
+};
+exports.CollapsibleGroup = CollapsibleGroup;
+exports.DEFAULT_TOOLKIT_THEME = DEFAULT_TOOLKIT_THEME;
+exports.SuperGroupingProvider = SuperGroupingProvider;
+exports.TOOLKIT_THEMES = TOOLKIT_THEMES;
+//# sourceMappingURL=CollapsibleGroup.cjs.map

package/dist/chat/super-grouping/CollapsibleGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleGroup.cjs","sources":["../../../src/chat/super-grouping/CollapsibleGroup.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { defaultGetToolGroupKey } from './toolkit-map';\n\n/**\n * Per-toolkit theme: the brand color that tints the group header, and an\n * optional icon URL a host serves (Olympus ships toolkit SVGs; the SDK does\n * not bundle images, so it tints only).\n */\nexport type ToolkitTheme = {\n  /** Hex brand color for this toolkit. */\n  color: string;\n  /** Absolute or root-relative URL of the toolkit icon, when the host has one. */\n  icon?: string;\n};\n\n/** Brand colors keyed by toolkit display name — the group keys the grouping function emits. */\nexport const TOOLKIT_THEMES: Record<string, ToolkitTheme> = {\n  Web: { color: '#7BCCFA' },\n  Document: { color: '#4586F9' },\n  'Document (Word)': { color: '#4586F9' },\n  Notebook: { color: '#FFAB00' },\n  Python: { color: '#00A76F' },\n  Spreadsheet: { color: '#00A76F' },\n  Email: { color: '#B584FF' },\n  AOP: { color: '#336DFF' },\n  App: { color: '#7336F5' },\n  Presentation: { color: '#F56B36' },\n  'User Interface': { color: '#7336F5' },\n  Canvas: { color: '#002542' },\n  Computer: { color: '#3E0042' },\n  Database: { color: '#7336F5' },\n  'Chrome Browser': { color: '#4285F4' },\n};\n\nexport const DEFAULT_TOOLKIT_THEME: ToolkitTheme = { color: '#919EAB' };\n\nconst DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);\n\n/**\n * The grouping in force for the message being rendered. `SuperGroupingCard`\n * provides it so each `CollapsibleGroup` can tell whether it is the last\n * grouped block (the one that opens by default while the run is live) without\n * being handed the function as a prop through `Unstable_PartsGrouped`.\n */\nconst SuperGroupingContext = createContext<{ groupingFunction: GroupingFunction } | null>(null);\n\nexport const SuperGroupingProvider = SuperGroupingContext.Provider;\n\nexport interface CollapsibleGroupProps {\n  /** Group key from the grouping function (toolkit display name); `undefined` for ungrouped parts. */\n  groupKey: string | undefined;\n  /** Indices of the parts belonging to this group. */\n  indices: number[];\n  children?: ReactNode;\n  /** Host toolkit themes (colors, icons), merged over the built-in colors. */\n  themes?: Record<string, ToolkitTheme>;\n  /**\n   * Keep the group open regardless of the run state — a host rule such as\n   * \"an unsubmitted email draft stays visible\". The user's own toggle still\n   * wins once used.\n   */\n  forceOpen?: boolean;\n  /**\n   * Do not open the live group by default (screenshot-heavy browser-control\n   * runs hold hundreds of actions); the user can still expand it.\n   */\n  compactWhileRunning?: boolean;\n  /** Extra header controls, rendered as siblings of the toggle (never nested buttons). */\n  headerActions?: ReactNode;\n  /** The grouping used to find the last grouped block; defaults to the card's, then the SDK's. */\n  groupingFunction?: GroupingFunction;\n  className?: string;\n}\n\n/**\n * Per-toolkit collapsible block inside the grouped details panel — \"Using\n * Spreadsheet Toolkit · 4 tool calls\" — used by the SDK, Olympus, and the\n * Chrome extension. The last grouped block opens by default while the message\n * is running and settles closed; the user's toggle is remembered for the\n * mounted block.\n *\n * Selector discipline: one raw `s.message.content` read; every per-group\n * derivation (grouping, counts) runs in `useMemo` off it, so the grouping\n * pass happens once per content change instead of once per selector pass.\n */\nexport const CollapsibleGroup = ({\n  groupKey,\n  indices,\n  children,\n  themes,\n  forceOpen = false,\n  compactWhileRunning = false,\n  headerActions,\n  groupingFunction,\n  className,\n}: CollapsibleGroupProps) => {\n  const panelId = useId();\n  const isMessageRunning = useAuiState((s) => s.message.status?.type === 'running');\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : undefined,\n  );\n  const contextGrouping = useContext(SuperGroupingContext)?.groupingFunction;\n  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;\n\n  const lastIndex = indices.at(-1);\n  const isLastGroup = useMemo(() => {\n    if (!messageContent) return false;\n    const lastGroup = grouping(messageContent)\n      .filter((group) => group.indices.length > 1)\n      .at(-1);\n    return lastGroup?.indices.at(-1) === lastIndex;\n  }, [messageContent, grouping, lastIndex]);\n\n  const toolCallCount = useMemo(\n    () =>\n      messageContent\n        ? indices.reduce(\n            (count, index) => (messageContent[index]?.type === 'tool-call' ? count + 1 : count),\n            0,\n          )\n        : 0,\n    [messageContent, indices],\n  );\n\n  const theme = useMemo<ToolkitTheme>(\n    () => (groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME),\n    [groupKey, themes],\n  );\n\n  const [userOpened, setOpen] = useState<boolean>();\n  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;\n  const open = userOpened ?? (autoOpen || forceOpen);\n\n  if (!groupKey || indices.length <= 1) return <>{children}</>;\n\n  const toggle = () => setOpen(!open);\n\n  return (\n    <div\n      data-slot=\"collapsible-group\"\n      data-group-key={groupKey}\n      className={cn('my-4 rounded-2xl border shadow-sm', className)}\n      style={{\n        borderColor: `${theme.color}33`,\n        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`,\n      }}\n    >\n      <div className=\"flex w-full items-center rounded-2xl\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={open}\n          aria-controls={panelId}\n          className=\"flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n        >\n          <span className=\"flex min-w-0 items-center gap-3 text-foreground/90\">\n            {theme.icon ? (\n              <img src={theme.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />\n            ) : (\n              <span\n                className=\"inline-block size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: theme.color }}\n                aria-hidden=\"true\"\n              />\n            )}\n            <span className=\"truncate text-sm font-semibold\">\n              {isMessageRunning ? 'Using ' : 'Used '}\n              {groupKey} Toolkit\n            </span>\n          </span>\n          <span className=\"shrink-0 text-xs font-medium text-muted-foreground\">\n            {toolCallCount} tool {toolCallCount === 1 ? 'call' : 'calls'}\n          </span>\n        </button>\n        <div className=\"flex shrink-0 items-center gap-1 pr-3 pl-1\">\n          {headerActions}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={open ? 'Collapse toolkit group' : 'Expand toolkit group'}\n            aria-expanded={open}\n            aria-controls={panelId}\n            className=\"flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n          </button>\n        </div>\n      </div>\n\n      <div\n        id={panelId}\n        className={cn(\n          'grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none',\n          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n        )}\n        style={{ borderColor: `${theme.color}33` }}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"space-y-2 px-5 py-4\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["createToolBasedGroupingFunction","defaultGetToolGroupKey","createContext","groupingFunction","useId","useAuiState","_a","useContext","useMemo","useState","jsxs","cn","jsx","ChevronUp","ChevronDown"],"mappings":"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"}

package/dist/chat/super-grouping/CollapsibleGroup.js

@@ -0,0 +1,158 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useAuiState } from "@assistant-ui/react";
+import { ChevronUp, ChevronDown } from "lucide-react";
+import { useId, useContext, useMemo, useState, createContext } from "react";
+import { createToolBasedGroupingFunction } from "./grouping-function.js";
+import { defaultGetToolGroupKey } from "./toolkit-map.js";
+import { cn } from "cnfast";
+const TOOLKIT_THEMES = {
+  Web: { color: "#7BCCFA" },
+  Document: { color: "#4586F9" },
+  "Document (Word)": { color: "#4586F9" },
+  Notebook: { color: "#FFAB00" },
+  Python: { color: "#00A76F" },
+  Spreadsheet: { color: "#00A76F" },
+  Email: { color: "#B584FF" },
+  AOP: { color: "#336DFF" },
+  App: { color: "#7336F5" },
+  Presentation: { color: "#F56B36" },
+  "User Interface": { color: "#7336F5" },
+  Canvas: { color: "#002542" },
+  Computer: { color: "#3E0042" },
+  Database: { color: "#7336F5" },
+  "Chrome Browser": { color: "#4285F4" }
+};
+const DEFAULT_TOOLKIT_THEME = { color: "#919EAB" };
+const DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);
+const SuperGroupingContext = createContext(null);
+const SuperGroupingProvider = SuperGroupingContext.Provider;
+const CollapsibleGroup = ({
+  groupKey,
+  indices,
+  children,
+  themes,
+  forceOpen = false,
+  compactWhileRunning = false,
+  headerActions,
+  groupingFunction,
+  className
+}) => {
+  var _a;
+  const panelId = useId();
+  const isMessageRunning = useAuiState((s) => {
+    var _a2;
+    return ((_a2 = s.message.status) == null ? void 0 : _a2.type) === "running";
+  });
+  const messageContent = useAuiState(
+    (s) => s.message.role === "assistant" ? s.message.content : void 0
+  );
+  const contextGrouping = (_a = useContext(SuperGroupingContext)) == null ? void 0 : _a.groupingFunction;
+  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;
+  const lastIndex = indices.at(-1);
+  const isLastGroup = useMemo(() => {
+    if (!messageContent) return false;
+    const lastGroup = grouping(messageContent).filter((group) => group.indices.length > 1).at(-1);
+    return (lastGroup == null ? void 0 : lastGroup.indices.at(-1)) === lastIndex;
+  }, [messageContent, grouping, lastIndex]);
+  const toolCallCount = useMemo(
+    () => messageContent ? indices.reduce(
+      (count, index) => {
+        var _a2;
+        return ((_a2 = messageContent[index]) == null ? void 0 : _a2.type) === "tool-call" ? count + 1 : count;
+      },
+      0
+    ) : 0,
+    [messageContent, indices]
+  );
+  const theme = useMemo(
+    () => groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME,
+    [groupKey, themes]
+  );
+  const [userOpened, setOpen] = useState();
+  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;
+  const open = userOpened ?? (autoOpen || forceOpen);
+  if (!groupKey || indices.length <= 1) return /* @__PURE__ */ jsx(Fragment, { children });
+  const toggle = () => setOpen(!open);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "collapsible-group",
+      "data-group-key": groupKey,
+      className: cn("my-4 rounded-2xl border shadow-sm", className),
+      style: {
+        borderColor: `${theme.color}33`,
+        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center rounded-2xl", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: toggle,
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              className: "flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-3 text-foreground/90", children: [
+                  theme.icon ? /* @__PURE__ */ jsx("img", { src: theme.icon, alt: "", "aria-hidden": "true", className: "size-5 shrink-0" }) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "inline-block size-2 shrink-0 rounded-full",
+                      style: { backgroundColor: theme.color },
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "truncate text-sm font-semibold", children: [
+                    isMessageRunning ? "Using " : "Used ",
+                    groupKey,
+                    " Toolkit"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs font-medium text-muted-foreground", children: [
+                  toolCallCount,
+                  " tool ",
+                  toolCallCount === 1 ? "call" : "calls"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 pr-3 pl-1", children: [
+            headerActions,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggle,
+                "aria-label": open ? "Collapse toolkit group" : "Expand toolkit group",
+                "aria-expanded": open,
+                "aria-controls": panelId,
+                className: "flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5",
+                children: open ? /* @__PURE__ */ jsx(ChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            className: cn(
+              "grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none",
+              open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            style: { borderColor: `${theme.color}33` },
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "space-y-2 px-5 py-4", children }) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CollapsibleGroup,
+  DEFAULT_TOOLKIT_THEME,
+  SuperGroupingProvider,
+  TOOLKIT_THEMES
+};
+//# sourceMappingURL=CollapsibleGroup.js.map

package/dist/chat/super-grouping/CollapsibleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleGroup.js","sources":["../../../src/chat/super-grouping/CollapsibleGroup.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { defaultGetToolGroupKey } from './toolkit-map';\n\n/**\n * Per-toolkit theme: the brand color that tints the group header, and an\n * optional icon URL a host serves (Olympus ships toolkit SVGs; the SDK does\n * not bundle images, so it tints only).\n */\nexport type ToolkitTheme = {\n  /** Hex brand color for this toolkit. */\n  color: string;\n  /** Absolute or root-relative URL of the toolkit icon, when the host has one. */\n  icon?: string;\n};\n\n/** Brand colors keyed by toolkit display name — the group keys the grouping function emits. */\nexport const TOOLKIT_THEMES: Record<string, ToolkitTheme> = {\n  Web: { color: '#7BCCFA' },\n  Document: { color: '#4586F9' },\n  'Document (Word)': { color: '#4586F9' },\n  Notebook: { color: '#FFAB00' },\n  Python: { color: '#00A76F' },\n  Spreadsheet: { color: '#00A76F' },\n  Email: { color: '#B584FF' },\n  AOP: { color: '#336DFF' },\n  App: { color: '#7336F5' },\n  Presentation: { color: '#F56B36' },\n  'User Interface': { color: '#7336F5' },\n  Canvas: { color: '#002542' },\n  Computer: { color: '#3E0042' },\n  Database: { color: '#7336F5' },\n  'Chrome Browser': { color: '#4285F4' },\n};\n\nexport const DEFAULT_TOOLKIT_THEME: ToolkitTheme = { color: '#919EAB' };\n\nconst DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);\n\n/**\n * The grouping in force for the message being rendered. `SuperGroupingCard`\n * provides it so each `CollapsibleGroup` can tell whether it is the last\n * grouped block (the one that opens by default while the run is live) without\n * being handed the function as a prop through `Unstable_PartsGrouped`.\n */\nconst SuperGroupingContext = createContext<{ groupingFunction: GroupingFunction } | null>(null);\n\nexport const SuperGroupingProvider = SuperGroupingContext.Provider;\n\nexport interface CollapsibleGroupProps {\n  /** Group key from the grouping function (toolkit display name); `undefined` for ungrouped parts. */\n  groupKey: string | undefined;\n  /** Indices of the parts belonging to this group. */\n  indices: number[];\n  children?: ReactNode;\n  /** Host toolkit themes (colors, icons), merged over the built-in colors. */\n  themes?: Record<string, ToolkitTheme>;\n  /**\n   * Keep the group open regardless of the run state — a host rule such as\n   * \"an unsubmitted email draft stays visible\". The user's own toggle still\n   * wins once used.\n   */\n  forceOpen?: boolean;\n  /**\n   * Do not open the live group by default (screenshot-heavy browser-control\n   * runs hold hundreds of actions); the user can still expand it.\n   */\n  compactWhileRunning?: boolean;\n  /** Extra header controls, rendered as siblings of the toggle (never nested buttons). */\n  headerActions?: ReactNode;\n  /** The grouping used to find the last grouped block; defaults to the card's, then the SDK's. */\n  groupingFunction?: GroupingFunction;\n  className?: string;\n}\n\n/**\n * Per-toolkit collapsible block inside the grouped details panel — \"Using\n * Spreadsheet Toolkit · 4 tool calls\" — used by the SDK, Olympus, and the\n * Chrome extension. The last grouped block opens by default while the message\n * is running and settles closed; the user's toggle is remembered for the\n * mounted block.\n *\n * Selector discipline: one raw `s.message.content` read; every per-group\n * derivation (grouping, counts) runs in `useMemo` off it, so the grouping\n * pass happens once per content change instead of once per selector pass.\n */\nexport const CollapsibleGroup = ({\n  groupKey,\n  indices,\n  children,\n  themes,\n  forceOpen = false,\n  compactWhileRunning = false,\n  headerActions,\n  groupingFunction,\n  className,\n}: CollapsibleGroupProps) => {\n  const panelId = useId();\n  const isMessageRunning = useAuiState((s) => s.message.status?.type === 'running');\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : undefined,\n  );\n  const contextGrouping = useContext(SuperGroupingContext)?.groupingFunction;\n  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;\n\n  const lastIndex = indices.at(-1);\n  const isLastGroup = useMemo(() => {\n    if (!messageContent) return false;\n    const lastGroup = grouping(messageContent)\n      .filter((group) => group.indices.length > 1)\n      .at(-1);\n    return lastGroup?.indices.at(-1) === lastIndex;\n  }, [messageContent, grouping, lastIndex]);\n\n  const toolCallCount = useMemo(\n    () =>\n      messageContent\n        ? indices.reduce(\n            (count, index) => (messageContent[index]?.type === 'tool-call' ? count + 1 : count),\n            0,\n          )\n        : 0,\n    [messageContent, indices],\n  );\n\n  const theme = useMemo<ToolkitTheme>(\n    () => (groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME),\n    [groupKey, themes],\n  );\n\n  const [userOpened, setOpen] = useState<boolean>();\n  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;\n  const open = userOpened ?? (autoOpen || forceOpen);\n\n  if (!groupKey || indices.length <= 1) return <>{children}</>;\n\n  const toggle = () => setOpen(!open);\n\n  return (\n    <div\n      data-slot=\"collapsible-group\"\n      data-group-key={groupKey}\n      className={cn('my-4 rounded-2xl border shadow-sm', className)}\n      style={{\n        borderColor: `${theme.color}33`,\n        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`,\n      }}\n    >\n      <div className=\"flex w-full items-center rounded-2xl\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={open}\n          aria-controls={panelId}\n          className=\"flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n        >\n          <span className=\"flex min-w-0 items-center gap-3 text-foreground/90\">\n            {theme.icon ? (\n              <img src={theme.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />\n            ) : (\n              <span\n                className=\"inline-block size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: theme.color }}\n                aria-hidden=\"true\"\n              />\n            )}\n            <span className=\"truncate text-sm font-semibold\">\n              {isMessageRunning ? 'Using ' : 'Used '}\n              {groupKey} Toolkit\n            </span>\n          </span>\n          <span className=\"shrink-0 text-xs font-medium text-muted-foreground\">\n            {toolCallCount} tool {toolCallCount === 1 ? 'call' : 'calls'}\n          </span>\n        </button>\n        <div className=\"flex shrink-0 items-center gap-1 pr-3 pl-1\">\n          {headerActions}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={open ? 'Collapse toolkit group' : 'Expand toolkit group'}\n            aria-expanded={open}\n            aria-controls={panelId}\n            className=\"flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n          </button>\n        </div>\n      </div>\n\n      <div\n        id={panelId}\n        className={cn(\n          'grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none',\n          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n        )}\n        style={{ borderColor: `${theme.color}33` }}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"space-y-2 px-5 py-4\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_a"],"mappings":"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"}