@bikdotai/bik-component-library 0.0.821-beta.0 → 0.0.821-beta.10

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

@@ -1,118 +1,131 @@
-import { jsxs as f, jsx as b } from "react/jsx-runtime";
-import L from "../../../assets/icons/chevronLeft.svg.js";
-import P from "../../../assets/icons/chevronRight.svg.js";
-import { useState as w, useMemo as h, useEffect as C, useRef as O } from "react";
-import g from "styled-components";
-import { TitleSmall as T, BodySecondary as j } from "../../TypographyStyle.js";
-import { COLORS as n } from "../../../constants/Theme.js";
-import { toolSourceLabel as B } from "../utils/mentionSerialization.js";
-const M = [
+import { jsxs as h, jsx as x } from "react/jsx-runtime";
+import T from "../../../assets/icons/chevronLeft.svg.js";
+import j from "../../../assets/icons/chevronRight.svg.js";
+import { useState as C, useMemo as c, useEffect as E, useRef as M } from "react";
+import k from "styled-components";
+import { TitleSmall as N, BodySecondary as z } from "../../TypographyStyle.js";
+import { COLORS as r } from "../../../constants/Theme.js";
+import { toolSourceLabel as R } from "../utils/mentionSerialization.js";
+const D = [
   { key: "tool", label: "Tools" },
   { key: "subagent", label: "Sub-agent" }
-], s = (t) => t.meta, E = (t) => s(t)?.plainLabel ?? t.label, Y = ({
+], u = (t) => t.meta, L = (t) => u(t)?.plainLabel ?? t.label, H = ({
   items: t,
-  onSelect: x,
-  registerKeyHandler: c
+  onSelect: m,
+  registerKeyHandler: d
 }) => {
-  const [o, m] = w(null), [a, k] = w(null), [v, u] = w(0), d = h(
-    () => t.filter((e) => s(e)?.kind === "tool"),
+  const [P, y] = C(null), [l, v] = C(null), [w, p] = C(0), a = c(
+    () => t.filter((e) => u(e)?.kind === "tool"),
     [t]
-  ), A = h(
-    () => t.filter((e) => s(e)?.kind === "subagent"),
+  ), f = c(
+    () => t.filter((e) => u(e)?.kind === "subagent"),
     [t]
-  ), I = h(() => {
+  ), S = c(() => {
     const e = [];
-    return d.forEach((r) => {
-      const p = s(r)?.source ?? "other";
-      e.includes(p) || e.push(p);
+    return a.forEach((n) => {
+      const b = u(n)?.source ?? "other";
+      e.includes(b) || e.push(b);
     }), e;
-  }, [d]), l = o ? o === "subagent" ? { title: "Sub-agent", onBack: () => m(null) } : a ? { title: B(a), onBack: () => k(null) } : { title: "Tools", onBack: () => m(null) } : null, i = h(() => o ? o === "subagent" ? A.map((e) => ({
+  }, [a]), g = c(
+    () => D.filter(
+      (e) => e.key === "tool" ? a.length > 0 : f.length > 0
+    ),
+    [a.length, f.length]
+  ), A = g.length === 1 ? g[0].key : null, o = P ?? A, s = o ? o === "subagent" ? A ? null : { title: "Sub-agent", onBack: () => y(null) } : l ? { title: R(l), onBack: () => v(null) } : A ? null : { title: "Tools", onBack: () => y(null) } : null, i = c(() => o ? o === "subagent" ? f.map((e) => ({
     id: String(e.id),
-    label: E(e),
+    label: L(e),
     drillsIn: !1,
-    onActivate: () => x(e)
-  })) : a ? d.filter((e) => (s(e)?.source ?? "other") === a).map((e) => ({
+    onActivate: () => m(e)
+  })) : l ? a.filter((e) => (u(e)?.source ?? "other") === l).map((e) => ({
     id: String(e.id),
-    label: E(e),
+    label: L(e),
     drillsIn: !1,
-    onActivate: () => x(e)
-  })) : I.map((e) => ({
+    onActivate: () => m(e)
+  })) : S.map((e) => ({
     id: e,
-    label: B(e),
+    label: R(e),
     drillsIn: !0,
-    onActivate: () => k(e)
-  })) : M.map((e) => ({
+    onActivate: () => v(e)
+  })) : g.map((e) => ({
     id: e.key,
     label: e.label,
     drillsIn: !0,
     onActivate: () => {
-      m(e.key), k(null);
+      y(e.key), v(null);
     }
-  })), [o, a, d, A, I, x]);
-  C(() => u(0), [o, a, t]);
-  const S = O({ rows: i, activeIndex: v, header: l });
-  S.current = { rows: i, activeIndex: v, header: l }, C(() => {
-    if (c)
-      return c((e) => {
-        const { rows: r, activeIndex: p, header: $ } = S.current;
+  })), [
+    o,
+    g,
+    l,
+    a,
+    f,
+    S,
+    m
+  ]);
+  E(() => p(0), [o, l, t]);
+  const $ = M({ rows: i, activeIndex: w, header: s });
+  $.current = { rows: i, activeIndex: w, header: s }, E(() => {
+    if (d)
+      return d((e) => {
+        const { rows: n, activeIndex: b, header: B } = $.current;
         switch (e.key) {
           case "ArrowDown":
-            return r.length && u((y) => (y + 1) % r.length), !0;
+            return n.length && p((I) => (I + 1) % n.length), !0;
           case "ArrowUp":
-            return r.length && u((y) => (y + r.length - 1) % r.length), !0;
+            return n.length && p((I) => (I + n.length - 1) % n.length), !0;
           case "ArrowRight":
           case "Enter":
-            return r[p]?.onActivate(), !0;
+            return n[b]?.onActivate(), !0;
           case "ArrowLeft":
-            return $ ? ($.onBack(), !0) : !1;
+            return B ? (B.onBack(), !0) : !1;
           default:
             return !1;
         }
-      }), () => c(null);
-  }, [c]);
-  const R = o ? i.length && !i[0].drillsIn ? "items" : "sources" : "categories";
-  return /* @__PURE__ */ f(N, { className: `bik-mention-picker bik-mention-picker--${R}`, children: [
-    l && /* @__PURE__ */ f(
-      D,
+      }), () => d(null);
+  }, [d]);
+  const O = o ? i.length && !i[0].drillsIn ? "items" : "sources" : "categories";
+  return /* @__PURE__ */ h(G, { className: `bik-mention-picker bik-mention-picker--${O}`, children: [
+    s && /* @__PURE__ */ h(
+      q,
       {
         type: "button",
-        onClick: l.onBack,
-        style: { background: n.surface.subdued },
+        onClick: s.onBack,
+        style: { background: r.surface.subdued },
         children: [
-          /* @__PURE__ */ b(L, { width: 12, height: 12 }),
-          /* @__PURE__ */ f(T, { children: [
+          /* @__PURE__ */ x(T, { width: 12, height: 12 }),
+          /* @__PURE__ */ h(N, { children: [
             " ",
-            l.title
+            s.title
           ] })
         ]
       }
     ),
-    i.length === 0 ? /* @__PURE__ */ b(G, { children: o === "subagent" ? "No sub-agents available" : "No tools available" }) : i.map((e, r) => /* @__PURE__ */ f(
-      z,
+    i.length === 0 ? /* @__PURE__ */ x(F, { children: o === "subagent" ? "No sub-agents available" : "No tools available" }) : i.map((e, n) => /* @__PURE__ */ h(
+      U,
       {
         type: "button",
-        $active: r === v,
-        onMouseEnter: () => u(r),
+        $active: n === w,
+        onMouseEnter: () => p(n),
         onClick: e.onActivate,
         children: [
-          /* @__PURE__ */ b(j, { color: n.content.primary, children: e.label }),
-          e.drillsIn && /* @__PURE__ */ b(P, { width: 12, height: 12 })
+          /* @__PURE__ */ x(z, { color: r.content.primary, children: e.label }),
+          e.drillsIn && /* @__PURE__ */ x(j, { width: 12, height: 12 })
         ]
       },
       e.id
     ))
   ] });
-}, N = g.div`
+}, G = k.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
 	max-height: 280px;
 	overflow-y: auto;
-	background: ${n.surface.standard};
-	border: 1px solid ${n.stroke.primary};
+	background: ${r.surface.standard};
+	border: 1px solid ${r.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, z = g.button`
+`, U = k.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -121,20 +134,20 @@ const M = [
 	padding: 8px 10px;
 	height: 48px;
 	border: none;
-	border-bottom: 1px solid ${n.stroke.primary};
-	background: ${(t) => t.$active ? n.surface.subdued : "transparent"};
+	border-bottom: 1px solid ${r.stroke.primary};
+	background: ${(t) => t.$active ? r.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${n.surface.subdued};
+		background: ${r.surface.subdued};
 	}
-`, D = g.button`
+`, q = k.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${n.stroke.primary};
+	border-bottom: 1px solid ${r.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -142,13 +155,13 @@ const M = [
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`, G = g.div`
+`, F = k.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${n.content.secondary};
+	color: ${r.content.secondary};
 `;
 export {
-  Y as MentionPicker
+  H as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\tonActivate: () => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionDropdownRenderProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Title shown above the current view, and whether we can go back a level.\n\tconst header: { title: string; onBack: () => void } | null = !category\n\t\t? null\n\t\t: category === 'subagent'\n\t\t? { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? { title: toolSourceLabel(source), onBack: () => setSource(null) }\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!category) {\n\t\t\treturn CATEGORIES.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (category === 'subagent') {\n\t\t\treturn subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [category, source, tools, subAgents, sources, onSelect]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [category, source, items]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !category\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t<ChevronLeft width={12} height={12} />\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{category === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","MentionPicker","items","onSelect","registerKeyHandler","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","tools","useMemo","i","subAgents","sources","acc","t","s","header","toolSourceLabel","rows","c","useEffect","navRef","useRef","event","h","p","variant","jsxs","PickerCard","PickerBack","COLORS","jsx","ChevronLeft","TitleSmall","PickerEmpty","row","PickerRow","BodySecondary","ChevronRight","styled"],"mappings":"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"}
+{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\tonActivate: () => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionDropdownRenderProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Only show categories that actually have items. When just one is available\n\t// (e.g. the sub-agent drawer offers tools only), skip the category selector.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool' ? tools.length > 0 : subAgents.length > 0,\n\t\t\t),\n\t\t[tools.length, subAgents.length],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view, and whether we can go back a level.\n\t// With a sole category there is no root to go back to (no category header).\n\tconst header: { title: string; onBack: () => void } | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? soleCategory\n\t\t\t? null\n\t\t\t: { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? { title: toolSourceLabel(source), onBack: () => setSource(null) }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\treturn subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, items]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t<ChevronLeft width={12} height={12} />\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","MentionPicker","items","onSelect","registerKeyHandler","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","rows","useEffect","navRef","useRef","event","r","h","p","variant","jsxs","PickerCard","PickerBack","COLORS","jsx","ChevronLeft","TitleSmall","PickerEmpty","row","PickerRow","BodySecondary","ChevronRight","styled"],"mappings":"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"}

package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts

@@ -8,12 +8,29 @@ interface SelectableListSectionProps {
     title: string;
     helper?: string;
     items: SelectableItem[];
-    /** Options not yet selected, available to add. */
+    /**
+     * Options shown in the add dropdown. Pass ALL items (not just unselected
+     * ones) when re-picking an already-added item is allowed (e.g. to insert its
+     * mention again) — the chip list still shows each item only once.
+     */
     addableOptions: SingleOption[];
     onAdd: (id: string) => void;
     onRemove: (id: string) => void;
     dataTestPrefix: string;
     emptyText: string;
+    /**
+     * Adds a "create new" entry at the top of the add dropdown (e.g. "Create
+     * sub-agent"). Selecting it calls `onSelect` instead of `onAdd`.
+     */
+    createOption?: {
+        label: string;
+        onSelect: () => void;
+    };
+    /**
+     * When provided, each row's kebab menu gains a "Configure" action (above
+     * "Delete"). Omit for tools (Delete only).
+     */
+    onConfigure?: (id: string) => void;
 }
 export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
 export {};

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

@@ -1,79 +1,124 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import f from "../../../assets/icons/cross.svg.js";
-import w from "../../../assets/icons/plus.svg.js";
-import { useState as y } from "react";
-import { TitleSmall as u, BodyCaption as m, BodySecondary as b } from "../../TypographyStyle.js";
-import { COLORS as r } from "../../../constants/Theme.js";
-import { SideSection as $, SideSectionHeader as v, AddIconButton as C, SelectableRow as R, RowText as A, RowRemoveButton as B } from "../AgentBuilder.styled.js";
-import { Dropdown as L } from "../../dropdown/Dropdown.js";
-const E = ({
-  title: n,
-  helper: i,
-  items: d,
-  addableOptions: t,
-  onAdd: S,
-  onRemove: p,
-  dataTestPrefix: l,
-  emptyText: g
+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 { 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,
+  dataTestPrefix: t,
+  emptyText: $,
+  createOption: n,
+  onConfigure: i
 }) => {
-  const [a, s] = y(!1);
-  return /* @__PURE__ */ c($, { children: [
-    /* @__PURE__ */ c(v, { children: [
-      /* @__PURE__ */ e(u, { color: r.content.primary, children: n }),
-      t.length > 0 && /* @__PURE__ */ e(
-        C,
+  const [S, m] = R(!1), f = c.length > 0 || !!n, w = n ? [
+    ...c,
+    {
+      label: n.label,
+      value: y,
+      searchKey: n.label,
+      customComponent: /* @__PURE__ */ o(
+        "div",
         {
-          "data-test": `${l}-add`,
-          onClick: () => s((o) => !o),
-          "aria-label": `Add ${n}`,
-          children: /* @__PURE__ */ e(w, { width: 20, height: 20, color: r.content.brand })
+          style: {
+            width: "100%",
+            textAlign: "center",
+            color: l.content.brand,
+            fontFamily: "Inter",
+            fontSize: 14,
+            fontWeight: 600
+          },
+          children: n.label
+        }
+      )
+    }
+  ] : c;
+  return /* @__PURE__ */ r(E, { children: [
+    /* @__PURE__ */ r(L, { children: [
+      /* @__PURE__ */ o(C, { color: l.content.primary, children: d }),
+      f && /* @__PURE__ */ o(
+        k,
+        {
+          "data-test": `${t}-add`,
+          onClick: () => m((e) => !e),
+          "aria-label": `Add ${d}`,
+          children: /* @__PURE__ */ o(_, { width: 20, height: 20, color: l.content.brand })
         }
       )
     ] }),
-    i && /* @__PURE__ */ e(m, { color: r.content.secondary, children: i }),
-    a && t.length > 0 && /* @__PURE__ */ e(
-      L,
+    s && /* @__PURE__ */ o(b, { color: l.content.secondary, children: s }),
+    S && w.length > 0 && /* @__PURE__ */ o(
+      H,
       {
-        "data-test": `${l}-dropdown`,
+        "data-test": `${t}-dropdown`,
         size: "small",
         width: "100%",
         isSearchable: !0,
-        placeHolder: `Select ${n.toLowerCase()}`,
-        options: t,
-        onSelect: (o) => {
-          const h = (Array.isArray(o) ? o[0] : o)?.value;
-          h && S(h), s(!1);
+        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));
         }
       }
     ),
-    d.length === 0 && !a ? /* @__PURE__ */ e(m, { color: r.content.placeholder, children: g }) : d.map((o) => /* @__PURE__ */ c(
-      R,
+    h.length === 0 && !S ? /* @__PURE__ */ o(b, { color: l.content.placeholder, children: $ }) : h.map((e) => /* @__PURE__ */ r(
+      D,
       {
-        "data-test": `${l}-row-${o.id}`,
+        "data-test": `${t}-row-${e.id}`,
         children: [
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(b, { numberOfLines: 1, color: r.content.primary, children: o.label }) }),
-          /* @__PURE__ */ e(
-            B,
-            {
-              onClick: () => p(o.id),
-              "aria-label": `Remove ${o.label}`,
-              children: /* @__PURE__ */ e(
-                f,
-                {
-                  width: 16,
-                  height: 16,
-                  color: r.content.secondary
-                }
-              )
-            }
-          )
+          /* @__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
+                  }
+                )
+              }
+            )
+          ] })
         ]
       },
-      o.id
+      e.id
     ))
   ] });
 };
 export {
-  E as SelectableListSection
+  J 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 CrossIcon from '@src/assets/icons/cross.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\tRowRemoveButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n} from '../AgentBuilder.styled';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n}\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/** Options not yet selected, available to add. */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\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}) => {\n\tconst [adding, setAdding] = useState(false);\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{addableOptions.length > 0 && (\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 && addableOptions.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={addableOptions}\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\tif (v) {\n\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetAdding(false);\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<RowRemoveButton\n\t\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t\t\taria-label={`Remove ${item.label}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\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</RowRemoveButton>\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":["SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","adding","setAdding","useState","SideSection","jsxs","SideSectionHeader","jsx","TitleSmall","COLORS","AddIconButton","v","PlusIcon","BodyCaption","Dropdown","opt","item","SelectableRow","RowText","BodySecondary","RowRemoveButton","CrossIcon"],"mappings":";;;;;;;;AAqCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAhB,GAAM;AAAA,MACjDG,EAAe,SAAS,KACxB,gBAAAW;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,aAAW,GAAGX,CAAc;AAAA,UAC5B,SAAS,MAAMG,EAAU,CAACS,MAAM,CAACA,CAAC;AAAA,UAClC,cAAY,OAAOlB,CAAK;AAAA,UAExB,UAAA,gBAAAc,EAACK,KAAS,OAAO,IAAI,QAAQ,IAAI,OAAOH,EAAO,QAAQ,MAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D,GAEF;AAAA,IAECf,KACA,gBAAAa,EAACM,GAAA,EAAY,OAAOJ,EAAO,QAAQ,WAAY,UAAAf,GAAO;AAAA,IAGtDO,KAAUL,EAAe,SAAS,KAClC,gBAAAW;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,aAAW,GAAGf,CAAc;AAAA,QAC5B,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAY;AAAA,QACZ,aAAa,UAAUN,EAAM,YAAA,CAAa;AAAA,QAC1C,SAASG;AAAA,QACT,UAAU,CAACmB,MAAQ;AAElB,gBAAMJ,KADS,MAAM,QAAQI,CAAG,IAAIA,EAAI,CAAC,IAAIA,IACT;AACpC,UAAIJ,KACHd,EAAMc,CAAC,GAERT,EAAU,EAAK;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,IAIDP,EAAM,WAAW,KAAK,CAACM,sBACtBY,GAAA,EAAY,OAAOJ,EAAO,QAAQ,aACjC,UAAAT,EAAA,CACF,IAEAL,EAAM,IAAI,CAACqB,MACV,gBAAAX;AAAA,MAACY;AAAA,MAAA;AAAA,QAEA,aAAW,GAAGlB,CAAc,QAAQiB,EAAK,EAAE;AAAA,QAE3C,UAAA;AAAA,UAAA,gBAAAT,EAACW,GAAA,EACA,UAAA,gBAAAX,EAACY,GAAA,EAAc,eAAe,GAAG,OAAOV,EAAO,QAAQ,SACrD,UAAAO,EAAK,MAAA,CACP,GACD;AAAA,UACA,gBAAAT;AAAA,YAACa;AAAA,YAAA;AAAA,cACA,SAAS,MAAMtB,EAASkB,EAAK,EAAE;AAAA,cAC/B,cAAY,UAAUA,EAAK,KAAK;AAAA,cAEhC,UAAA,gBAAAT;AAAA,gBAACc;AAAAA,gBAAA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,OAAOZ,EAAO,QAAQ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvB;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,MAjBKO,EAAK;AAAA,IAAA,CAmBX;AAAA,EAAA,GAEH;AAEF;"}
+{"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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"}

package/dist/esm/components/agent-builder/components/UndoToast.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+/**
+ * Top-right toast shown after a tool / sub-agent is removed, offering an Undo.
+ * Re-keyed per removal so each one restarts the auto-close timer. Uses the
+ * shared `Toaster` (which mounts its own ToastContainer).
+ */
+export declare const UndoToast: React.FC;

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

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useAgentBuilderContext as r } from "../context/AgentBuilderContext.js";
+import { Toaster as s } from "../../toaster/Toaster.js";
+const m = () => {
+  const { undoToast: o, undoRemoval: t, dismissUndo: e } = r();
+  return o ? /* @__PURE__ */ n(
+    s,
+    {
+      text: o.message,
+      type: "info",
+      position: "top-right",
+      autoClose: 5e3,
+      hideCloseButton: !0,
+      buttonProps: {
+        buttonText: "Undo",
+        showButton: !0,
+        onButtonClick: () => (t(), {})
+      },
+      onCloseToast: () => e()
+    },
+    o.id
+  ) : null;
+};
+export {
+  m as UndoToast
+};
+//# sourceMappingURL=UndoToast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UndoToast.js","sources":["../../../../../src/components/agent-builder/components/UndoToast.tsx"],"sourcesContent":["import React from 'react';\nimport { Toaster } from '@src/components/toaster';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\n/**\n * Top-right toast shown after a tool / sub-agent is removed, offering an Undo.\n * Re-keyed per removal so each one restarts the auto-close timer. Uses the\n * shared `Toaster` (which mounts its own ToastContainer).\n */\nexport const UndoToast: React.FC = () => {\n\tconst { undoToast, undoRemoval, dismissUndo } = useAgentBuilderContext();\n\n\tif (!undoToast) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Toaster\n\t\t\tkey={undoToast.id}\n\t\t\ttext={undoToast.message}\n\t\t\ttype=\"info\"\n\t\t\tposition=\"top-right\"\n\t\t\tautoClose={5000}\n\t\t\thideCloseButton\n\t\t\tbuttonProps={{\n\t\t\t\tbuttonText: 'Undo',\n\t\t\t\tshowButton: true,\n\t\t\t\tonButtonClick: () => {\n\t\t\t\t\tundoRemoval();\n\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t},\n\t\t\t}}\n\t\t\tonCloseToast={() => dismissUndo()}\n\t\t/>\n\t);\n};\n"],"names":["UndoToast","undoToast","undoRemoval","dismissUndo","useAgentBuilderContext","jsx","Toaster"],"mappings":";;;AASO,MAAMA,IAAsB,MAAM;AACxC,QAAM,EAAE,WAAAC,GAAW,aAAAC,GAAa,aAAAC,EAAA,IAAgBC,EAAA;AAEhD,SAAKH,IAKJ,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MAEA,MAAML,EAAU;AAAA,MAChB,MAAK;AAAA,MACL,UAAS;AAAA,MACT,WAAW;AAAA,MACX,iBAAe;AAAA,MACf,aAAa;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,eAAe,OACdC,EAAA,GACO,CAAA;AAAA,MACR;AAAA,MAED,cAAc,MAAMC,EAAA;AAAA,IAAY;AAAA,IAd3BF,EAAU;AAAA,EAAA,IALT;AAsBT;"}