@bikdotai/bik-component-library 0.0.821-beta.12 → 0.0.821-beta.13

package/dist/esm/components/agent-builder/components/SelectableListSection.js

@@ -1,29 +1,91 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import A from "../../../assets/icons/delete.svg.js";
-import v from "../../../assets/icons/edit.svg.js";
-import _ from "../../../assets/icons/plus.svg.js";
-import { useState as R } from "react";
-import { TitleSmall as C, BodyCaption as b, BodySecondary as B } from "../../TypographyStyle.js";
+import { jsx as o, jsxs as c, Fragment as g } from "react/jsx-runtime";
+import U from "../../../assets/icons/delete.svg.js";
+import W from "../../../assets/icons/edit.svg.js";
+import A from "../../../assets/icons/plus.svg.js";
+import v, { useState as C } from "react";
+import { TitleSmall as K, BodyCaption as R, BodySecondary as _ } from "../../TypographyStyle.js";
 import { COLORS as l } from "../../../constants/Theme.js";
-import { SideSection as E, SideSectionHeader as L, AddIconButton as k, SelectableRow as D, RowText as I, RowActions as j, RowMenuButton as g, RowActionDivider as z } from "../AgentBuilder.styled.js";
-import { Dropdown as H } from "../../dropdown/Dropdown.js";
-const y = "__bik_create_new__", J = ({
-  title: d,
-  helper: s,
-  items: h,
-  addableOptions: c,
-  onAdd: p,
-  onRemove: u,
+import { SideSection as M, SideSectionHeader as V, AddIconButton as q, SourceButtonRow as J, SourceButton as Q, SelectableRow as X, RowText as Y, RowActions as Z, RowMenuButton as B, RowActionDivider as G } from "../AgentBuilder.styled.js";
+import { SOURCE_ICONS as x } from "../utils/sourceIcons.js";
+import { Dropdown as E } from "../../dropdown/Dropdown.js";
+import { Button as T } from "../../button/Button.js";
+const k = "__bik_create_new__", ae = ({
+  title: S,
+  helper: y,
+  items: r,
+  addableOptions: a,
+  onAdd: $,
+  onRemove: I,
   dataTestPrefix: t,
-  emptyText: $,
+  emptyText: L,
   createOption: n,
-  onConfigure: i
+  onConfigure: w,
+  sourceGroups: h
 }) => {
-  const [S, m] = R(!1), f = c.length > 0 || !!n, w = n ? [
-    ...c,
+  const [f, s] = C(!1), [z, m] = C(null), u = !!h && h.length > 0, b = h?.find((e) => e.source === z), D = u ? r.length > 0 : a.length > 0 || !!n && r.length > 0, H = r.length === 0 && !!n && !u, j = u && r.length === 0, F = () => {
+    if (u) {
+      m(null), s((e) => !e);
+      return;
+    }
+    if (a.length === 0 && n) {
+      n.onSelect();
+      return;
+    }
+    s((e) => !e);
+  }, N = () => r.map((e) => /* @__PURE__ */ c(
+    X,
+    {
+      "data-test": `${t}-row-${e.id}`,
+      children: [
+        e.icon && v.createElement(e.icon.Icon, {
+          width: e.icon.w,
+          height: e.icon.h
+        }),
+        /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(_, { numberOfLines: 1, color: l.content.primary, children: e.label }) }),
+        /* @__PURE__ */ c(Z, { children: [
+          w && // Configurable rows (sub-agents) get an always-visible edit icon.
+          /* @__PURE__ */ o(
+            B,
+            {
+              "data-test": `${t}-edit-${e.id}`,
+              "aria-label": `Edit ${e.label}`,
+              onClick: () => w(e.id),
+              children: /* @__PURE__ */ o(
+                W,
+                {
+                  width: 16,
+                  height: 16,
+                  color: l.content.secondary
+                }
+              )
+            }
+          ),
+          w && /* @__PURE__ */ o(G, { "aria-hidden": !0 }),
+          /* @__PURE__ */ o(
+            B,
+            {
+              "data-test": `${t}-delete-${e.id}`,
+              "aria-label": `Delete ${e.label}`,
+              onClick: () => I(e.id),
+              children: /* @__PURE__ */ o(
+                U,
+                {
+                  width: 16,
+                  height: 16,
+                  color: l.content.secondary
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    },
+    e.id
+  )), p = n ? [
+    ...a,
     {
       label: n.label,
-      value: y,
+      value: k,
       searchKey: n.label,
       customComponent: /* @__PURE__ */ o(
         "div",
@@ -40,85 +102,91 @@ const y = "__bik_create_new__", J = ({
         }
       )
     }
-  ] : c;
-  return /* @__PURE__ */ r(E, { children: [
-    /* @__PURE__ */ r(L, { children: [
-      /* @__PURE__ */ o(C, { color: l.content.primary, children: d }),
-      f && /* @__PURE__ */ o(
-        k,
+  ] : a;
+  return /* @__PURE__ */ c(M, { children: [
+    /* @__PURE__ */ c(V, { children: [
+      /* @__PURE__ */ o(K, { color: l.content.primary, children: S }),
+      D && /* @__PURE__ */ o(
+        q,
         {
           "data-test": `${t}-add`,
-          onClick: () => m((e) => !e),
-          "aria-label": `Add ${d}`,
-          children: /* @__PURE__ */ o(_, { width: 20, height: 20, color: l.content.brand })
+          onClick: F,
+          "aria-label": `Add ${S}`,
+          children: /* @__PURE__ */ o(A, { width: 20, height: 20, color: l.content.brand })
         }
       )
     ] }),
-    s && /* @__PURE__ */ o(b, { color: l.content.secondary, children: s }),
-    S && w.length > 0 && /* @__PURE__ */ o(
-      H,
-      {
-        "data-test": `${t}-dropdown`,
-        size: "small",
-        width: "100%",
-        isSearchable: !0,
-        placeHolder: `Select ${d.toLowerCase()}`,
-        options: w,
-        onSelect: (e) => {
-          const a = (Array.isArray(e) ? e[0] : e)?.value;
-          m(!1), a && (a === y ? n?.onSelect() : p(a));
+    y && /* @__PURE__ */ o(R, { color: l.content.secondary, children: y }),
+    j ? /* @__PURE__ */ c(g, { children: [
+      /* @__PURE__ */ o(J, { "data-test": `${t}-sources`, children: h?.map((e) => {
+        const d = x[e.source];
+        return /* @__PURE__ */ c(
+          Q,
+          {
+            type: "button",
+            "data-test": `${t}-source-${e.source}`,
+            onClick: () => m(e.source),
+            children: [
+              d && v.createElement(d.Icon, {
+                width: d.w - 4,
+                height: d.h - 4
+              }),
+              /* @__PURE__ */ o(_, { color: l.content.primary, children: e.label })
+            ]
+          },
+          e.source
+        );
+      }) }),
+      b && /* @__PURE__ */ o(
+        E,
+        {
+          "data-test": `${t}-dropdown`,
+          size: "small",
+          width: "100%",
+          isSearchable: !0,
+          placeHolder: `Search ${b.label} tools`,
+          options: b.options,
+          onSelect: (e) => {
+            const i = (Array.isArray(e) ? e[0] : e)?.value;
+            m(null), s(!1), i && $(i);
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ c(g, { children: [
+      f && p.length > 0 && /* @__PURE__ */ o(
+        E,
+        {
+          "data-test": `${t}-dropdown`,
+          size: "small",
+          width: "100%",
+          isSearchable: !0,
+          placeHolder: `Select ${S.toLowerCase()}`,
+          options: p,
+          onSelect: (e) => {
+            const i = (Array.isArray(e) ? e[0] : e)?.value;
+            s(!1), i && (i === k ? n?.onSelect() : $(i));
+          }
         }
-      }
-    ),
-    h.length === 0 && !S ? /* @__PURE__ */ o(b, { color: l.content.placeholder, children: $ }) : h.map((e) => /* @__PURE__ */ r(
-      D,
-      {
-        "data-test": `${t}-row-${e.id}`,
-        children: [
-          /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(B, { numberOfLines: 1, color: l.content.primary, children: e.label }) }),
-          /* @__PURE__ */ r(j, { children: [
-            i && // Configurable rows (sub-agents) get an always-visible edit icon.
-            /* @__PURE__ */ o(
-              g,
-              {
-                "data-test": `${t}-edit-${e.id}`,
-                "aria-label": `Edit ${e.label}`,
-                onClick: () => i(e.id),
-                children: /* @__PURE__ */ o(
-                  v,
-                  {
-                    width: 16,
-                    height: 16,
-                    color: l.content.secondary
-                  }
-                )
-              }
-            ),
-            i && /* @__PURE__ */ o(z, { "aria-hidden": !0 }),
-            /* @__PURE__ */ o(
-              g,
-              {
-                "data-test": `${t}-delete-${e.id}`,
-                "aria-label": `Delete ${e.label}`,
-                onClick: () => u(e.id),
-                children: /* @__PURE__ */ o(
-                  A,
-                  {
-                    width: 16,
-                    height: 16,
-                    color: l.content.secondary
-                  }
-                )
-              }
-            )
-          ] })
-        ]
-      },
-      e.id
-    ))
+      ),
+      r.length === 0 && !f ? /* @__PURE__ */ c(g, { children: [
+        /* @__PURE__ */ o(R, { color: l.content.placeholder, children: L }),
+        H && n && /* @__PURE__ */ o(
+          T,
+          {
+            "data-test": `${t}-create`,
+            buttonType: "secondary",
+            size: "small",
+            matchParentWidth: !0,
+            LeadingIcon: A,
+            buttonText: n.label,
+            onClick: n.onSelect
+          }
+        )
+      ] }) : N()
+    ] })
   ] });
 };
 export {
-  J as SelectableListSection
+  ae as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map

package/dist/esm/components/agent-builder/components/SelectableListSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React, { useState } from 'react';\nimport { Dropdown } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n} from '../AgentBuilder.styled';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row's kebab menu gains a \"Configure\" action (above\n\t * \"Delete\"). Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\tconst showAddButton = addableOptions.length > 0 || !!createOption;\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\tonClick={() => setAdding((v) => !v)}\n\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t</AddIconButton>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{adding && dropdownOptions.length > 0 && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tisSearchable\n\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t{emptyText}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\titems.map((item) => (\n\t\t\t\t\t<SelectableRow\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RowText>\n\t\t\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</RowText>\n\t\t\t\t\t\t<RowActions>\n\t\t\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t</RowActions>\n\t\t\t\t\t</SelectableRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","adding","setAdding","useState","showAddButton","dropdownOptions","jsx","COLORS","SideSection","jsxs","SideSectionHeader","TitleSmall","AddIconButton","v","PlusIcon","BodyCaption","Dropdown","opt","item","SelectableRow","RowText","BodySecondary","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon"],"mappings":"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"}
+{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React, { useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { Dropdown } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport { SOURCE_ICONS, SourceIcon } from '../utils/sourceIcons';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// With sourceGroups the empty state IS the source buttons, so \"+\" only adds more.\n\tconst showAddButton = hasSourceGroups\n\t\t? items.length > 0\n\t\t: addableOptions.length > 0 || (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups;\n\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => (\n\t\t\t<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{item.icon &&\n\t\t\t\t\tReact.createElement(item.icon.Icon, {\n\t\t\t\t\t\twidth: item.icon.w,\n\t\t\t\t\t\theight: item.icon.h,\n\t\t\t\t\t})}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\n\t\t));\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t</AddIconButton>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => {\n\t\t\t\t\t\t\tconst icon = SOURCE_ICONS[g.source];\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\t\tonClick={() => setActiveSource(g.source)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{icon &&\n\t\t\t\t\t\t\t\t\t\tReact.createElement(icon.Icon, {\n\t\t\t\t\t\t\t\t\t\t\twidth: icon.w - 4,\n\t\t\t\t\t\t\t\t\t\t\theight: icon.h - 4,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Chosen source → its searchable tool list. */}\n\t\t\t\t\t{activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","React","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","SideSection","SideSectionHeader","TitleSmall","AddIconButton","PlusIcon","BodyCaption","Fragment","SourceButtonRow","icon","SOURCE_ICONS","SourceButton","Dropdown","opt","Button"],"mappings":"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"}

package/dist/esm/components/agent-builder/context/AgentBuilderContext.d.ts

@@ -61,6 +61,13 @@ export interface AgentBuilderContextShape {
     disableStepNavigation: boolean;
     /** Persist a new sub-agent and resolve with its ref. Omit to hide the create flow. */
     onCreateSubAgent?: (draft: SubAgentDraft) => Promise<SubAgentRef>;
+    /**
+     * Step 3 registers its "open create-sub-agent drawer" action here so the `@`
+     * picker's "Create new" row can trigger it. Pass `null` to unregister.
+     */
+    registerSubAgentCreator: (fn: (() => void) | null) => void;
+    /** Open the create-sub-agent drawer (no-op until Step 3 registers it). */
+    requestCreateSubAgent: () => void;
     /** Fetch a sub-agent's editable data (Configure). Omit to hide Configure. */
     onFetchSubAgent?: (id: string) => Promise<SubAgentDraft>;
     /** Persist edits to an existing sub-agent. */

package/dist/esm/components/agent-builder/context/AgentBuilderContext.js

@@ -1,113 +1,117 @@
-import { jsx as rt } from "react/jsx-runtime";
-import et, { useState as B, useRef as p, useCallback as o, useMemo as X, useContext as ot } from "react";
-import { AGENT_CHAR_LIMITS as Z } from "../constants/charLimits.js";
-import { getStepIndex as st, STEP_KEYS as x } from "../constants/steps.js";
-const a = et.createContext(null), gt = () => {
-  const t = ot(a);
-  if (!t)
+import { jsx as st } from "react/jsx-runtime";
+import it, { useState as S, useRef as g, useCallback as o, useMemo as Z, useContext as ct } from "react";
+import { AGENT_CHAR_LIMITS as O } from "../constants/charLimits.js";
+import { getStepIndex as ut, STEP_KEYS as x } from "../constants/steps.js";
+const b = it.createContext(null), pt = () => {
+  const n = ct(b);
+  if (!n)
     throw new Error(
       "useAgentBuilderContext must be used within an AgentBuilderProvider"
     );
-  return t;
-}, it = (t) => {
-  const s = t.trigger.mode === "custom_intent" ? (t.trigger.custom_intent ?? "").trim().length > 0 : t.trigger.intents.length > 0;
+  return n;
+}, dt = (n) => {
+  const s = n.trigger.mode === "custom_intent" ? (n.trigger.custom_intent ?? "").trim().length > 0 : n.trigger.intents.length > 0;
   return {
-    about: t.name.trim().length > 0 && t.name.length <= Z.name && t.description.length <= Z.description,
+    about: n.name.trim().length > 0 && n.name.length <= O.name && n.description.length <= O.description,
     trigger: s,
     // At least one of Instructions / Guardrails must be filled.
-    response: t.instructions.trim().length > 0 || (t.guardrail ?? "").trim().length > 0,
+    response: n.instructions.trim().length > 0 || (n.guardrail ?? "").trim().length > 0,
     // Optional until specced further — never blocks go-live.
     handover: !0
   };
-}, lt = ({
-  value: t,
+}, xt = ({
+  value: n,
   onChange: s,
   activeStep: R,
-  onStepChange: F,
+  onStepChange: B,
   availableTools: u,
   availableSubAgents: m,
-  availableIntents: I,
-  availableModels: P,
-  validation: S,
-  applicationType: E,
-  disableStepNavigation: $ = !0,
-  onCreateSubAgent: w,
-  onFetchSubAgent: y,
-  onUpdateSubAgent: T,
-  onImproveSubAgent: V,
-  children: O
+  availableIntents: F,
+  availableModels: I,
+  validation: P,
+  applicationType: A,
+  disableStepNavigation: E = !0,
+  onCreateSubAgent: $,
+  onFetchSubAgent: w,
+  onUpdateSubAgent: y,
+  onImproveSubAgent: T,
+  children: v
 }) => {
-  const [C, b] = B("about"), g = R ?? C, i = st(g), [j, K] = B(0), _ = p({}), L = p("instructions"), A = o(
-    (n, e) => {
-      e ? _.current[n] = e : delete _.current[n];
+  const [tt, nt] = S("about"), l = R ?? tt, i = ut(l), [V, a] = S(0), _ = g({}), j = g("instructions"), K = o(
+    (t, e) => {
+      e ? _.current[t] = e : delete _.current[t];
     },
     []
-  ), G = o((n) => {
-    L.current = n;
-  }, []), H = o((n, e, f) => {
+  ), L = o((t) => {
+    j.current = t;
+  }, []), q = g(null), C = o((t) => {
+    q.current = t;
+  }, []), G = o(() => {
+    q.current?.();
+  }, []), H = o((t, e, p) => {
     const d = _.current;
-    (d[L.current] ?? d.instructions)?.(n, e, f);
-  }, []), [N, h] = B(null), l = p(null), U = p(0), c = o(
-    (n) => {
-      R === void 0 && b(n), F?.(n);
+    (d[j.current] ?? d.instructions)?.(t, e, p);
+  }, []), [N, h] = S(null), f = g(null), U = g(0), c = o(
+    (t) => {
+      R === void 0 && nt(t), B?.(t);
     },
-    [R, F]
+    [R, B]
   ), Y = o(() => {
-    const n = x[Math.min(i + 1, x.length - 1)];
-    c(n);
+    const t = x[Math.min(i + 1, x.length - 1)];
+    c(t);
   }, [i, c]), k = o(() => {
-    const n = x[Math.max(i - 1, 0)];
-    c(n);
-  }, [i, c]), q = o(
-    (n) => s(n),
-    [s]
-  ), z = o(
-    (n, e) => s({ [n]: e }),
+    const t = x[Math.max(i - 1, 0)];
+    c(t);
+  }, [i, c]), z = o(
+    (t) => s(t),
     [s]
   ), D = o(
-    (n, e) => {
-      const f = n === "tool" ? (() => {
-        const r = u.find((nt) => nt.tool_id === e);
+    (t, e) => s({ [t]: e }),
+    [s]
+  ), J = o(
+    (t, e) => {
+      const p = t === "tool" ? (() => {
+        const r = u.find((ot) => ot.tool_id === e);
         return r ? `{{tool:${r.function_key}}}` : null;
-      })() : `{{subagent:${e}}}`, d = (r) => f ? r.split(f).join("") : r;
-      l.current = {
-        tools: t.tools,
-        subagents: t.subagents,
-        instructions: t.instructions,
-        guardrail: t.guardrail
+      })() : `{{subagent:${e}}}`, d = (r) => p ? r.split(p).join("") : r;
+      f.current = {
+        tools: n.tools,
+        subagents: n.subagents,
+        instructions: n.instructions,
+        guardrail: n.guardrail
       };
-      const W = {
-        instructions: d(t.instructions),
-        guardrail: d(t.guardrail ?? ""),
-        ...n === "tool" ? { tools: t.tools.filter((r) => r !== e) } : { subagents: t.subagents.filter((r) => r !== e) }
+      const X = {
+        instructions: d(n.instructions),
+        guardrail: d(n.guardrail ?? ""),
+        ...t === "tool" ? { tools: n.tools.filter((r) => r !== e) } : { subagents: n.subagents.filter((r) => r !== e) }
       };
-      s(W), K((r) => r + 1);
-      const tt = n === "tool" ? u.find((r) => r.tool_id === e)?.display_name ?? "Tool" : m.find((r) => r.id === e)?.name ?? "Sub-agent";
+      s(X), a((r) => r + 1);
+      const et = t === "tool" ? u.find((r) => r.tool_id === e)?.display_name ?? "Tool" : m.find((r) => r.id === e)?.name ?? "Sub-agent";
       U.current += 1, h({
         id: U.current,
-        message: `${n === "tool" ? "Tool" : "Sub-agent"} "${tt}" removed`
+        message: `${t === "tool" ? "Tool" : "Sub-agent"} "${et}" removed`
       });
     },
-    [u, m, t, s]
-  ), J = o(() => {
-    l.current && (s(l.current), l.current = null, K((n) => n + 1)), h(null);
-  }, [s]), Q = o(() => h(null), []), M = X(
-    () => ({ ...it(t), ...S }),
-    [t, S]
-  ), v = X(
+    [u, m, n, s]
+  ), Q = o(() => {
+    f.current && (s(f.current), f.current = null, a((t) => t + 1)), h(null);
+  }, [s]), W = o(() => h(null), []), M = Z(
+    () => ({ ...dt(n), ...P }),
+    [n, P]
+  ), rt = Z(
     () => ({
-      value: t,
-      patch: q,
-      updateField: z,
-      removeReference: D,
-      mentionResetKey: j,
+      value: n,
+      patch: z,
+      updateField: D,
+      removeReference: J,
+      mentionResetKey: V,
       insertMention: H,
-      registerMentionField: A,
-      notifyMentionFocus: G,
+      registerMentionField: K,
+      notifyMentionFocus: L,
       undoToast: N,
-      undoRemoval: J,
-      dismissUndo: Q,
-      activeStep: g,
+      undoRemoval: Q,
+      dismissUndo: W,
+      activeStep: l,
       activeIndex: i,
       goToStep: c,
       goNext: Y,
@@ -115,31 +119,33 @@ const a = et.createContext(null), gt = () => {
       isFirstStep: i === 0,
       isLastStep: i === x.length - 1,
       validation: M,
-      isActiveStepValid: M[g],
+      isActiveStepValid: M[l],
       availableTools: u,
       availableSubAgents: m,
-      availableIntents: I,
-      availableModels: P,
-      applicationType: E,
-      disableStepNavigation: $,
-      onCreateSubAgent: w,
-      onFetchSubAgent: y,
-      onUpdateSubAgent: T,
-      onImproveSubAgent: V
+      availableIntents: F,
+      availableModels: I,
+      applicationType: A,
+      disableStepNavigation: E,
+      onCreateSubAgent: $,
+      registerSubAgentCreator: C,
+      requestCreateSubAgent: G,
+      onFetchSubAgent: w,
+      onUpdateSubAgent: y,
+      onImproveSubAgent: T
     }),
     [
-      t,
-      q,
+      n,
       z,
       D,
-      j,
+      J,
+      V,
       H,
-      A,
-      G,
+      K,
+      L,
       N,
-      J,
       Q,
-      g,
+      W,
+      l,
       i,
       c,
       Y,
@@ -147,20 +153,22 @@ const a = et.createContext(null), gt = () => {
       M,
       u,
       m,
+      F,
       I,
-      P,
+      A,
       E,
       $,
+      C,
+      G,
       w,
       y,
-      T,
-      V
+      T
     ]
   );
-  return /* @__PURE__ */ rt(a.Provider, { value: v, children: O });
+  return /* @__PURE__ */ st(b.Provider, { value: rt, children: v });
 };
 export {
-  lt as AgentBuilderProvider,
-  gt as useAgentBuilderContext
+  xt as AgentBuilderProvider,
+  pt as useAgentBuilderContext
 };
 //# sourceMappingURL=AgentBuilderContext.js.map