@bikdotai/bik-component-library 0.0.866 → 0.0.867

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

@@ -0,0 +1,121 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import x from "../../../assets/icons/RedirectToNew.svg.js";
+import { useState as S, useEffect as b } from "react";
+import { BodySecondary as p, TitleSmall as C } from "../../TypographyStyle.js";
+import { COLORS as l } from "../../../constants/Theme.js";
+import { ChannelPickerBody as k, ChannelPickerList as T, ChannelPickerRow as z, CHECKBOX_SLOT as B, ChannelPickerAccount as L, ChannelGlyph as N, ChannelsLink as v } from "../AgentBuilder.styled.js";
+import { channelPresentation as w, isAccountDisconnected as P } from "../constants/channels.js";
+import { StyledModal as O } from "../../modals/styledModal.js";
+import { CheckBox as $ } from "../../checkBox/CheckBox.js";
+import { Tag as A } from "../../tag/Tag.js";
+const D = ({
+  channel: n,
+  selectedIds: r,
+  onClose: c,
+  onApply: g,
+  onManageChannels: d
+}) => {
+  const [h, s] = S(r);
+  if (b(() => {
+    n && s(r);
+  }, [n]), !n)
+    return null;
+  const { Icon: m, tint: y, accountsNoun: i } = w(
+    n.type,
+    n.label
+  ), f = (e) => s(
+    (o) => o.includes(e) ? o.filter((u) => u !== e) : [...o, e]
+  );
+  return /* @__PURE__ */ t(
+    O,
+    {
+      "data-test": "agent-channel-select-modal",
+      open: !0,
+      onClose: c,
+      width: "640px",
+      headingTitle: "Select channels to activate",
+      headingSubtitle: `Select the ${i} on which you need this agent enabled on.`,
+      modalHeaderStyles: { padding: "24px", boxSizing: "border-box" },
+      modalBodyStyles: { boxSizing: "border-box" },
+      footerContainerStyle: { padding: "20px 24px", boxSizing: "border-box" },
+      footerLeftCustomElement: d ? /* @__PURE__ */ a(
+        v,
+        {
+          "data-test": "agent-channel-management-link",
+          type: "button",
+          onClick: d,
+          style: { fontSize: 14, lineHeight: "20px", fontWeight: 600 },
+          children: [
+            "Channel management",
+            /* @__PURE__ */ t(x, { width: 16, height: 16 })
+          ]
+        }
+      ) : void 0,
+      secondaryButton: {
+        "data-test": "agent-channel-cancel",
+        buttonType: "tertiaryGray",
+        size: "small",
+        buttonText: "Cancel",
+        onClick: c
+      },
+      primaryButton: {
+        "data-test": "agent-channel-apply",
+        buttonType: "primary",
+        size: "small",
+        buttonText: "Apply",
+        onClick: () => g(h)
+      },
+      children: /* @__PURE__ */ a(k, { children: [
+        /* @__PURE__ */ t(p, { color: l.content.secondary, children: `Select from available ${i}` }),
+        /* @__PURE__ */ a(T, { children: [
+          n.accounts.map((e) => {
+            const o = P(e);
+            return /* @__PURE__ */ a(
+              z,
+              {
+                "data-test": `agent-channel-account-${e.channelId}`,
+                children: [
+                  /* @__PURE__ */ t(
+                    $,
+                    {
+                      isChecked: h.includes(e.channelId),
+                      ariaLabel: e.channelName,
+                      value: e.channelId,
+                      onValueChange: () => f(e.channelId),
+                      style: B
+                    }
+                  ),
+                  /* @__PURE__ */ a(L, { children: [
+                    /* @__PURE__ */ t(N, { tint: y, children: m && /* @__PURE__ */ t(m, { size: 16 }) }),
+                    /* @__PURE__ */ t(C, { color: l.content.primary, children: e.channelName }),
+                    o && // NOT `size="small"`: that renders through BodyTiny, which
+                    // is 10px AND has no font-family, so it falls back to the
+                    // browser serif. The default reads as 12px Inter — Figma's
+                    // body-caption, same as every other chip.
+                    /* @__PURE__ */ t(
+                      A,
+                      {
+                        tagText: "Disconnected",
+                        type: "negative",
+                        variant: "regular",
+                        height: 20,
+                        padding: "2px 8px"
+                      }
+                    )
+                  ] })
+                ]
+              },
+              e.channelId
+            );
+          }),
+          n.accounts.length === 0 && /* @__PURE__ */ t(p, { color: l.content.placeholder, children: `No ${i} are connected to this store yet.` })
+        ] })
+      ] })
+    }
+  );
+};
+D.displayName = "ChannelSelectModal";
+export {
+  D as ChannelSelectModal
+};
+//# sourceMappingURL=ChannelSelectModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSelectModal.js","sources":["../../../../../src/components/agent-builder/components/ChannelSelectModal.tsx"],"sourcesContent":["import RedirectIcon from '@src/assets/icons/RedirectToNew.svg';\nimport React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { StyledModal } from '@src/components/modals';\nimport { Tag } from '@src/components/tag';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { AgentChannel } from '../AgentBuilder.model';\nimport {\n\tChannelGlyph,\n\tChannelPickerAccount,\n\tChannelPickerBody,\n\tChannelPickerList,\n\tChannelPickerRow,\n\tChannelsLink,\n\tCHECKBOX_SLOT,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n} from '../constants/channels';\n\ninterface ChannelSelectModalProps {\n\t/** The channel being edited. `null` closes the modal. */\n\tchannel: AgentChannel | null;\n\t/** Currently activated backend channel ids for this channel. */\n\tselectedIds: string[];\n\tonClose: () => void;\n\t/** Apply — commits the draft selection as backend channel ids. */\n\tonApply: (channelIds: string[]) => void;\n\t/** Footer \"Channel management\" link. Omit to hide it. */\n\tonManageChannels?: () => void;\n}\n\n/**\n * Per-channel account picker, opened from a channel row's edit button.\n *\n * The selection is a LOCAL draft until Apply — the design gives the merchant a\n * Cancel, so toggling here must not reach the agent value until they commit.\n *\n * A disconnected account stays selectable and stays selected: the merchant may\n * be mid-reconnect, and quietly removing it from their agent would hide the\n * problem rather than surface it. It's labelled instead, and the row it came\n * from carries the alert.\n */\nexport const ChannelSelectModal: React.FC<ChannelSelectModalProps> = ({\n\tchannel,\n\tselectedIds,\n\tonClose,\n\tonApply,\n\tonManageChannels,\n}) => {\n\tconst [draft, setDraft] = useState<string[]>(selectedIds);\n\n\t// Re-seed whenever the modal opens (or reopens for a different channel), so a\n\t// cancelled edit doesn't leak into the next one.\n\tuseEffect(() => {\n\t\tif (channel) {\n\t\t\tsetDraft(selectedIds);\n\t\t}\n\t\t// `selectedIds` is intentionally read only at open time — the draft owns it\n\t\t// from then until Apply.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [channel]);\n\n\tif (!channel) {\n\t\treturn null;\n\t}\n\n\tconst { Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\tconst toggle = (channelId: string) =>\n\t\tsetDraft((prev) =>\n\t\t\tprev.includes(channelId)\n\t\t\t\t? prev.filter((id) => id !== channelId)\n\t\t\t\t: [...prev, channelId],\n\t\t);\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-channel-select-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"640px\"\n\t\t\theadingTitle=\"Select channels to activate\"\n\t\t\theadingSubtitle={`Select the ${accountsNoun} on which you need this agent enabled on.`}\n\t\t\t// This repo has no global `box-sizing: border-box`, so StyledModal's\n\t\t\t// `width: 100%` + 24px side padding resolves to 688px inside its 640px\n\t\t\t// `overflow: hidden` wrapper — clipping the right 48px, and with it the\n\t\t\t// primary button. Border-box on each section is the fix that doesn't\n\t\t\t// touch the shared modal.\n\t\t\tmodalHeaderStyles={{ padding: '24px', boxSizing: 'border-box' }}\n\t\t\tmodalBodyStyles={{ boxSizing: 'border-box' }}\n\t\t\tfooterContainerStyle={{ padding: '20px 24px', boxSizing: 'border-box' }}\n\t\t\tfooterLeftCustomElement={\n\t\t\t\tonManageChannels ? (\n\t\t\t\t\t<ChannelsLink\n\t\t\t\t\t\tdata-test=\"agent-channel-management-link\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={onManageChannels}\n\t\t\t\t\t\tstyle={{ fontSize: 14, lineHeight: '20px', fontWeight: 600 }}\n\t\t\t\t\t>\n\t\t\t\t\t\tChannel management\n\t\t\t\t\t\t<RedirectIcon width={16} height={16} />\n\t\t\t\t\t</ChannelsLink>\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\t'data-test': 'agent-channel-cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t\tprimaryButton={{\n\t\t\t\t'data-test': 'agent-channel-apply',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Apply',\n\t\t\t\tonClick: () => onApply(draft),\n\t\t\t}}\n\t\t>\n\t\t\t<ChannelPickerBody>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{`Select from available ${accountsNoun}`}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ChannelPickerList>\n\t\t\t\t\t{channel.accounts.map((account) => {\n\t\t\t\t\t\tconst disconnected = isAccountDisconnected(account);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChannelPickerRow\n\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\tdata-test={`agent-channel-account-${account.channelId}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckBox\n\t\t\t\t\t\t\t\t\tisChecked={draft.includes(account.channelId)}\n\t\t\t\t\t\t\t\t\tariaLabel={account.channelName}\n\t\t\t\t\t\t\t\t\tvalue={account.channelId}\n\t\t\t\t\t\t\t\t\tonValueChange={() => toggle(account.channelId)}\n\t\t\t\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ChannelPickerAccount>\n\t\t\t\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{account.channelName}\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t{disconnected && (\n\t\t\t\t\t\t\t\t\t\t// NOT `size=\"small\"`: that renders through BodyTiny, which\n\t\t\t\t\t\t\t\t\t\t// is 10px AND has no font-family, so it falls back to the\n\t\t\t\t\t\t\t\t\t\t// browser serif. The default reads as 12px Inter — Figma's\n\t\t\t\t\t\t\t\t\t\t// body-caption, same as every other chip.\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText=\"Disconnected\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\tpadding=\"2px 8px\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ChannelPickerAccount>\n\t\t\t\t\t\t\t</ChannelPickerRow>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{channel.accounts.length === 0 && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t{`No ${accountsNoun} are connected to this store yet.`}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</ChannelPickerList>\n\t\t\t</ChannelPickerBody>\n\t\t</StyledModal>\n\t);\n};\n\nChannelSelectModal.displayName = 'ChannelSelectModal';\n\nexport type { ChannelSelectModalProps };\n"],"names":["ChannelSelectModal","channel","selectedIds","onClose","onApply","onManageChannels","draft","setDraft","useState","useEffect","Icon","tint","accountsNoun","channelPresentation","toggle","channelId","prev","id","jsx","StyledModal","jsxs","ChannelsLink","RedirectIcon","ChannelPickerBody","BodySecondary","COLORS","ChannelPickerList","account","disconnected","isAccountDisconnected","ChannelPickerRow","CheckBox","CHECKBOX_SLOT","ChannelPickerAccount","ChannelGlyph","TitleSmall","Tag"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+/**
+ * Step 1's "Channels to activate it on" — one card per connected channel, each
+ * with a select-all checkbox, the accounts it covers as chips, and an edit
+ * button that opens the per-account picker.
+ *
+ * Renders nothing when the consumer passes no `availableChannels`, so a host
+ * that hasn't wired channels up yet sees the step exactly as it was.
+ */
+export declare const ChannelsSection: React.FC;

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

@@ -0,0 +1,183 @@
+import { jsxs as d, jsx as n, Fragment as E } from "react/jsx-runtime";
+import w from "../../../assets/icons/edit.svg.js";
+import A from "../../../assets/icons/errorInfo.svg.js";
+import { useState as M, useMemo as N } from "react";
+import { TitleSmall as v } from "../../TypographyStyle.js";
+import { COLORS as T } from "../../../constants/Theme.js";
+import { ChannelsSectionRoot as B, ChannelCard as L, ChannelRow as O, ChannelRowMain as R, CHECKBOX_SLOT as k, ChannelIdentity as P, ChannelGlyph as j, ChannelChips as D, ChipTooltipTarget as f } from "../AgentBuilder.styled.js";
+import { channelPresentation as _, selectedAccounts as z, isAccountDisconnected as S } from "../constants/channels.js";
+import { useAgentBuilderContext as F } from "../context/AgentBuilderContext.js";
+import { ChannelSelectModal as H } from "./ChannelSelectModal.js";
+import { CheckBox as V } from "../../checkBox/CheckBox.js";
+import { Tooltip as I } from "../../tooltips/Tooltip.js";
+import { Tag as C } from "../../tag/Tag.js";
+import { IconButton as X } from "../../icon-button/IconButton.js";
+const b = 3, G = (e) => [
+  ...e.filter(S),
+  ...e.filter((i) => !S(i))
+], K = () => {
+  const { value: e, updateField: i, availableChannels: r, onManageChannels: p } = F(), [a, c] = M(null), m = N(() => {
+    const t = /* @__PURE__ */ new Map();
+    return (e.channels ?? []).forEach((l) => t.set(l.type, l.channelIds)), t;
+  }, [e.channels]);
+  if (!r || r.length === 0)
+    return null;
+  const g = (t, l) => {
+    const h = (e.channels ?? []).filter((u) => u.type !== t);
+    i(
+      "channels",
+      l.length > 0 ? [...h, { type: t, channelIds: l }] : h
+    );
+  }, o = r.find((t) => t.type === a) ?? null;
+  return /* @__PURE__ */ d(B, { children: [
+    /* @__PURE__ */ n(v, { color: T.content.primary, children: "Channels to activate it on" }),
+    r.map((t) => /* @__PURE__ */ n(
+      U,
+      {
+        channel: t,
+        selectedIds: m.get(t.type) ?? [],
+        onSelectionChange: (l) => g(t.type, l),
+        onEdit: () => c(t.type)
+      },
+      String(t.type)
+    )),
+    /* @__PURE__ */ n(
+      H,
+      {
+        channel: o,
+        selectedIds: o ? m.get(o.type) ?? [] : [],
+        onClose: () => c(null),
+        onApply: (t) => {
+          o && g(o.type, t), c(null);
+        },
+        onManageChannels: p && o ? () => p(o.type) : void 0
+      }
+    )
+  ] });
+};
+K.displayName = "ChannelsSection";
+const U = ({
+  channel: e,
+  selectedIds: i,
+  onSelectionChange: r,
+  onEdit: p
+}) => {
+  const { label: a, Icon: c, tint: m, accountsNoun: g } = _(
+    e.type,
+    e.label
+  ), o = e.accounts.length === 0, t = z(e, i), l = !o && t.length === e.accounts.length, h = t.length > 0 && !l, u = G(t.length > 0 ? t : e.accounts), x = u.slice(0, b), y = u.slice(b), $ = () => r(
+    l ? [] : e.accounts.map((s) => s.channelId)
+  );
+  return /* @__PURE__ */ n(
+    L,
+    {
+      "data-test": `agent-channel-${e.type}`,
+      role: "group",
+      "aria-label": a,
+      children: /* @__PURE__ */ d(O, { children: [
+        /* @__PURE__ */ d(R, { children: [
+          /* @__PURE__ */ n(
+            V,
+            {
+              isChecked: l || h,
+              isPartiallyChecked: h,
+              isDisabled: o,
+              ariaLabel: a,
+              onValueChange: $,
+              style: k
+            }
+          ),
+          /* @__PURE__ */ d(P, { children: [
+            /* @__PURE__ */ n(j, { tint: m, children: c && /* @__PURE__ */ n(c, { size: 16 }) }),
+            /* @__PURE__ */ n(v, { color: T.content.primary, children: a })
+          ] }),
+          /* @__PURE__ */ n(D, { children: o ? /* @__PURE__ */ n(
+            I,
+            {
+              body: `No ${g} are connected to this store yet. Connect one from channel management to activate this agent on ${a}.`,
+              placement: "top",
+              children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
+                C,
+                {
+                  tagText: "Disabled",
+                  type: "neutral",
+                  variant: "regular",
+                  height: 24,
+                  cursor: "default"
+                }
+              ) })
+            }
+          ) : /* @__PURE__ */ d(E, { children: [
+            x.map((s) => /* @__PURE__ */ n(
+              q,
+              {
+                account: s,
+                channelLabel: a
+              },
+              s.channelId
+            )),
+            y.length > 0 && /* @__PURE__ */ n(
+              I,
+              {
+                body: y.map((s) => s.channelName).join(", "),
+                placement: "top",
+                children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
+                  C,
+                  {
+                    tagText: `+${y.length}`,
+                    type: "purple",
+                    variant: "regular",
+                    height: 24,
+                    cursor: "default"
+                  }
+                ) })
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ n(
+          X,
+          {
+            "data-test": `agent-channel-${e.type}-edit`,
+            "aria-label": `Edit ${a} channels`,
+            Icon: w,
+            size: "xs",
+            iconPadding: 4,
+            disabled: o,
+            onClick: p
+          }
+        )
+      ] })
+    }
+  );
+}, q = ({ account: e, channelLabel: i }) => S(e) ? /* @__PURE__ */ n(
+  I,
+  {
+    body: `${e.channelName} is disconnected. This agent won't run on it until you reconnect it from ${i} channel management.`,
+    placement: "top",
+    children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
+      C,
+      {
+        tagText: e.channelName,
+        type: "negative",
+        variant: "regular",
+        height: 24,
+        LeadingIcon: A,
+        leadingIconId: `channel-error-${e.channelId}`,
+        cursor: "default"
+      }
+    ) })
+  }
+) : /* @__PURE__ */ n(
+  C,
+  {
+    tagText: e.channelName,
+    type: "purple",
+    variant: "regular",
+    height: 24
+  }
+);
+export {
+  K as ChannelsSection
+};
+//# sourceMappingURL=ChannelsSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelsSection.js","sources":["../../../../../src/components/agent-builder/components/ChannelsSection.tsx"],"sourcesContent":["import EditIcon from '@src/assets/icons/edit.svg';\nimport ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport React, { useMemo, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { IconButton } from '@src/components/icon-button';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type {\n\tAgentChannel,\n\tAgentChannelAccount,\n\tAgentChannelType,\n} from '../AgentBuilder.model';\nimport {\n\tChannelCard,\n\tChannelChips,\n\tChannelGlyph,\n\tChannelIdentity,\n\tChannelRow,\n\tChannelRowMain,\n\tChannelsSectionRoot,\n\tCHECKBOX_SLOT,\n\tChipTooltipTarget,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n\tselectedAccounts,\n} from '../constants/channels';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport { ChannelSelectModal } from './ChannelSelectModal';\n\n/**\n * How many account chips a row shows before collapsing the rest into \"+N\". The\n * design draws three; without a cap a store with a dozen numbers pushes the row\n * well past its 48px height.\n */\nconst MAX_VISIBLE_CHIPS = 3;\n\n/**\n * Chips for a row: disconnected accounts first so a cap can never hide the very\n * thing the merchant needs to act on, then the rest in their original order.\n */\nconst chipOrder = (accounts: AgentChannelAccount[]): AgentChannelAccount[] => [\n\t...accounts.filter(isAccountDisconnected),\n\t...accounts.filter((a) => !isAccountDisconnected(a)),\n];\n\n/**\n * Step 1's \"Channels to activate it on\" — one card per connected channel, each\n * with a select-all checkbox, the accounts it covers as chips, and an edit\n * button that opens the per-account picker.\n *\n * Renders nothing when the consumer passes no `availableChannels`, so a host\n * that hasn't wired channels up yet sees the step exactly as it was.\n */\nexport const ChannelsSection: React.FC = () => {\n\tconst { value, updateField, availableChannels, onManageChannels } =\n\t\tuseAgentBuilderContext();\n\n\t// Which channel's picker is open (by type); null = closed.\n\tconst [editingType, setEditingType] = useState<AgentChannelType | null>(null);\n\n\t// Selection is stored as a list; index it once so each row is a lookup.\n\tconst selectionByType = useMemo(() => {\n\t\tconst map = new Map<AgentChannelType, string[]>();\n\t\t(value.channels ?? []).forEach((c) => map.set(c.type, c.channelIds));\n\t\treturn map;\n\t}, [value.channels]);\n\n\tif (!availableChannels || availableChannels.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst setSelection = (type: AgentChannelType, channelIds: string[]) => {\n\t\tconst rest = (value.channels ?? []).filter((c) => c.type !== type);\n\t\t// An empty selection drops the channel entirely rather than persisting a\n\t\t// `{ type, channelIds: [] }` no-op the backend would have to filter out.\n\t\tupdateField(\n\t\t\t'channels',\n\t\t\tchannelIds.length > 0 ? [...rest, { type, channelIds }] : rest,\n\t\t);\n\t};\n\n\tconst editingChannel =\n\t\tavailableChannels.find((c) => c.type === editingType) ?? null;\n\n\treturn (\n\t\t<ChannelsSectionRoot>\n\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\tChannels to activate it on\n\t\t\t</TitleSmall>\n\n\t\t\t{availableChannels.map((channel) => (\n\t\t\t\t<ChannelCardRow\n\t\t\t\t\tkey={String(channel.type)}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tselectedIds={selectionByType.get(channel.type) ?? []}\n\t\t\t\t\tonSelectionChange={(ids) => setSelection(channel.type, ids)}\n\t\t\t\t\tonEdit={() => setEditingType(channel.type)}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t<ChannelSelectModal\n\t\t\t\tchannel={editingChannel}\n\t\t\t\tselectedIds={\n\t\t\t\t\teditingChannel ? selectionByType.get(editingChannel.type) ?? [] : []\n\t\t\t\t}\n\t\t\t\tonClose={() => setEditingType(null)}\n\t\t\t\tonApply={(ids) => {\n\t\t\t\t\tif (editingChannel) {\n\t\t\t\t\t\tsetSelection(editingChannel.type, ids);\n\t\t\t\t\t}\n\t\t\t\t\tsetEditingType(null);\n\t\t\t\t}}\n\t\t\t\tonManageChannels={\n\t\t\t\t\tonManageChannels && editingChannel\n\t\t\t\t\t\t? () => onManageChannels(editingChannel.type)\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t/>\n\t\t</ChannelsSectionRoot>\n\t);\n};\n\nChannelsSection.displayName = 'ChannelsSection';\n\ninterface ChannelCardRowProps {\n\tchannel: AgentChannel;\n\tselectedIds: string[];\n\tonSelectionChange: (channelIds: string[]) => void;\n\tonEdit: () => void;\n}\n\nconst ChannelCardRow: React.FC<ChannelCardRowProps> = ({\n\tchannel,\n\tselectedIds,\n\tonSelectionChange,\n\tonEdit,\n}) => {\n\tconst { label, Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\t/**\n\t * Zero state — the store supports this channel but has nothing connected\n\t * under it. Nothing on the row is actionable, so the checkbox and the edit\n\t * button are both inert and a \"Disabled\" chip stands in for the accounts.\n\t */\n\tconst isUnavailable = channel.accounts.length === 0;\n\n\tconst selected = selectedAccounts(channel, selectedIds);\n\tconst allSelected =\n\t\t!isUnavailable && selected.length === channel.accounts.length;\n\tconst someSelected = selected.length > 0 && !allSelected;\n\n\t// With nothing picked yet the row shows the store's inventory — that's the\n\t// state the design draws, and it tells the merchant what's on offer. Once\n\t// they've picked, the chips narrow to what the agent actually runs on.\n\tconst shown = chipOrder(selected.length > 0 ? selected : channel.accounts);\n\tconst visible = shown.slice(0, MAX_VISIBLE_CHIPS);\n\tconst overflow = shown.slice(MAX_VISIBLE_CHIPS);\n\n\tconst toggleAll = () =>\n\t\tonSelectionChange(\n\t\t\tallSelected ? [] : channel.accounts.map((a) => a.channelId),\n\t\t);\n\n\treturn (\n\t\t<ChannelCard\n\t\t\tdata-test={`agent-channel-${channel.type}`}\n\t\t\t// A card groups a channel's checkbox, chips and edit button; naming the\n\t\t\t// group lets assistive tech (and tests) address one channel at a time.\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t>\n\t\t\t<ChannelRow>\n\t\t\t\t<ChannelRowMain>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={allSelected || someSelected}\n\t\t\t\t\t\tisPartiallyChecked={someSelected}\n\t\t\t\t\t\tisDisabled={isUnavailable}\n\t\t\t\t\t\tariaLabel={label}\n\t\t\t\t\t\tonValueChange={toggleAll}\n\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChannelIdentity>\n\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t\t</ChannelIdentity>\n\n\t\t\t\t\t<ChannelChips>\n\t\t\t\t\t\t{isUnavailable ? (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={`No ${accountsNoun} are connected to this store yet. Connect one from channel management to activate this agent on ${label}.`}\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\ttagText=\"Disabled\"\n\t\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{visible.map((account) => (\n\t\t\t\t\t\t\t\t\t<AccountChip\n\t\t\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\t\t\taccount={account}\n\t\t\t\t\t\t\t\t\t\tchannelLabel={label}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{overflow.length > 0 && (\n\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\tbody={overflow.map((a) => a.channelName).join(', ')}\n\t\t\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\ttagText={`+${overflow.length}`}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"purple\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t</Tooltip>\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</ChannelChips>\n\t\t\t\t</ChannelRowMain>\n\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-test={`agent-channel-${channel.type}-edit`}\n\t\t\t\t\taria-label={`Edit ${label} channels`}\n\t\t\t\t\tIcon={EditIcon}\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\ticonPadding={4}\n\t\t\t\t\tdisabled={isUnavailable}\n\t\t\t\t\tonClick={onEdit}\n\t\t\t\t/>\n\t\t\t</ChannelRow>\n\t\t</ChannelCard>\n\t);\n};\n\n/**\n * One account chip. A healthy account reads as a brand chip; a disconnected one\n * turns negative and gains the error glyph.\n *\n * The tooltip is NOT in the design — but a bare red chip tells the merchant\n * something is broken and nothing about what to do, so it names the account and\n * the fix.\n */\nconst AccountChip: React.FC<{\n\taccount: AgentChannelAccount;\n\tchannelLabel: string;\n}> = ({ account, channelLabel }) => {\n\tif (!isAccountDisconnected(account)) {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\ttagText={account.channelName}\n\t\t\t\ttype=\"purple\"\n\t\t\t\tvariant=\"regular\"\n\t\t\t\theight={24}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\tbody={`${account.channelName} is disconnected. This agent won't run on it until you reconnect it from ${channelLabel} channel management.`}\n\t\t\tplacement=\"top\"\n\t\t>\n\t\t\t<ChipTooltipTarget>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={account.channelName}\n\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\theight={24}\n\t\t\t\t\tLeadingIcon={ErrorInfoIcon}\n\t\t\t\t\t// Tag doesn't spread rest props, so `data-test` would be dropped —\n\t\t\t\t\t// `leadingIconId` is the one hook it does put on the DOM, which gives\n\t\t\t\t\t// the error glyph a stable handle for tests and e2e.\n\t\t\t\t\tleadingIconId={`channel-error-${account.channelId}`}\n\t\t\t\t\tcursor=\"default\"\n\t\t\t\t/>\n\t\t\t</ChipTooltipTarget>\n\t\t</Tooltip>\n\t);\n};\n"],"names":["MAX_VISIBLE_CHIPS","chipOrder","accounts","isAccountDisconnected","a","ChannelsSection","value","updateField","availableChannels","onManageChannels","useAgentBuilderContext","editingType","setEditingType","useState","selectionByType","useMemo","map","c","setSelection","type","channelIds","rest","editingChannel","ChannelsSectionRoot","jsx","TitleSmall","COLORS","channel","ChannelCardRow","ids","ChannelSelectModal","selectedIds","onSelectionChange","onEdit","label","Icon","tint","accountsNoun","channelPresentation","isUnavailable","selected","selectedAccounts","allSelected","someSelected","shown","visible","overflow","toggleAll","ChannelCard","ChannelRow","jsxs","ChannelRowMain","CheckBox","CHECKBOX_SLOT","ChannelIdentity","ChannelGlyph","ChannelChips","Tooltip","ChipTooltipTarget","Tag","Fragment","account","AccountChip","IconButton","EditIcon","channelLabel","ErrorInfoIcon"],"mappings":"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"}