@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

package/dist/esm/components/agent-listing/AgentListing.js

@@ -0,0 +1,176 @@
+import { jsxs as z, jsx as i, Fragment as Q } from "react/jsx-runtime";
+import { useState as L, useCallback as n } from "react";
+import { TablePagination as U } from "../TablePagination/TablePagination.js";
+import { ZeroState as W } from "../zeroState/ZeroState.js";
+import { Page as X, Body as Y, EmptyHolder as _ } from "./AgentListing.styled.js";
+import { AgentListingFilters as ee } from "./AgentListingFilters.js";
+import { AgentListingHeader as te } from "./AgentListingHeader.js";
+import { AgentTable as ne } from "./AgentTable.js";
+import { DeleteAgentModal as oe } from "./DeleteAgentModal.js";
+const ie = ({
+  config: R,
+  onSearchChange: f,
+  onSearchSubmit: l,
+  onFilterChange: r,
+  onSortChange: g,
+  onNewAgent: A,
+  onBrowseTemplates: d,
+  onRunAgent: S,
+  onEditAgent: b,
+  onDeleteAgent: s,
+  onRowClick: c,
+  ...T
+}) => {
+  const [a, m] = L(
+    null
+  ), [y, C] = L(!1), {
+    agents: N,
+    isLoading: h,
+    searchValue: D,
+    searchPlaceholder: x = "Search",
+    filterOptions: B,
+    filterPlaceholder: E = "Filters",
+    sortOptions: F,
+    selectedSort: I,
+    title: O = "AI Agents",
+    pagination: o,
+    emptyState: u,
+    debugLog: P
+  } = R, k = !h && N.length === 0, t = n(
+    (e, ...p) => {
+      P && console.log(`[AgentListing] ${e}`, ...p);
+    },
+    [P]
+  ), j = n(
+    (e) => {
+      t("onSearchChange", e), f(e);
+    },
+    [t, f]
+  ), H = n(
+    (e) => {
+      t("onSearchSubmit", e), l?.(e);
+    },
+    [t, l]
+  ), q = n(
+    (e) => {
+      t("onFilterChange", e), r?.(e);
+    },
+    [t, r]
+  ), M = n(
+    (e) => {
+      t("onSortChange", e), g?.(e);
+    },
+    [t, g]
+  ), w = n(() => {
+    t("onNewAgent"), A();
+  }, [t, A]), V = n(() => {
+    t("onBrowseTemplates"), d?.();
+  }, [t, d]), Z = n(
+    (e) => {
+      t("onRunAgent", e.id), S(e);
+    },
+    [t, S]
+  ), $ = n(
+    (e) => {
+      t("onEditAgent", e.id), b(e);
+    },
+    [t, b]
+  ), G = n(
+    (e) => {
+      t("onRowClick", e.id), c?.(e);
+    },
+    [t, c]
+  ), J = n(
+    (e) => {
+      t("onDeleteAgent", e.id), m(e);
+    },
+    [t]
+  ), K = n(async () => {
+    if (!(!a || !s)) {
+      C(!0);
+      try {
+        await s(a), m(null);
+      } finally {
+        C(!1);
+      }
+    }
+  }, [a, s]);
+  return /* @__PURE__ */ z(X, { "data-test": T["data-test"] ?? "agent-listing", children: [
+    /* @__PURE__ */ i(
+      te,
+      {
+        title: O,
+        onNewAgent: w,
+        onBrowseTemplates: d ? V : void 0
+      }
+    ),
+    /* @__PURE__ */ i(
+      ee,
+      {
+        searchValue: D,
+        onSearchChange: j,
+        onSearchSubmit: l ? H : void 0,
+        searchPlaceholder: x,
+        filterOptions: B,
+        onFilterChange: r ? q : void 0,
+        filterPlaceholder: E,
+        sortOptions: F,
+        selectedSort: I,
+        onSortChange: g ? M : void 0
+      }
+    ),
+    /* @__PURE__ */ i(Y, { children: h || k ? /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      W,
+      {
+        isLoading: h,
+        title: u?.title ?? "No agents yet",
+        subTitle: u?.subTitle ?? "Create your first AI agent to start automating conversations.",
+        actionButton: u?.actionButton ?? {
+          buttonText: "New AI agent",
+          buttonType: "primary",
+          size: "small",
+          onClick: w
+        }
+      }
+    ) }) : /* @__PURE__ */ z(Q, { children: [
+      /* @__PURE__ */ i(
+        ne,
+        {
+          agents: N,
+          onRunAgent: Z,
+          onEditAgent: $,
+          onDeleteAgent: s ? J : void 0,
+          onRowClick: c ? G : void 0
+        }
+      ),
+      o && o.totalRows > 0 && /* @__PURE__ */ i(
+        U,
+        {
+          pageNumber: o.pageNumber,
+          pageSize: o.pageSize,
+          totalRows: o.totalRows,
+          hidePageSizeOptions: o.hidePageSizeOptions,
+          updatePageNumber: o.onPageChange,
+          updatePageSize: (e) => {
+            const p = Array.isArray(e) ? e[0] : e, v = Number(p?.value);
+            Number.isNaN(v) || o.onPageSizeChange(v);
+          }
+        }
+      )
+    ] }) }),
+    a && /* @__PURE__ */ i(
+      oe,
+      {
+        agentName: a.name,
+        isDeleting: y,
+        onClose: () => y ? void 0 : m(null),
+        onConfirm: K
+      }
+    )
+  ] });
+};
+ie.displayName = "AgentListing";
+export {
+  ie as AgentListing
+};
+//# sourceMappingURL=AgentListing.js.map

package/dist/esm/components/agent-listing/AgentListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentListing.js","sources":["../../../../src/components/agent-listing/AgentListing.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { DropdownOption } from '@src/components/dropdown/type';\nimport { TablePagination } from '@src/components/TablePagination/TablePagination';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { AgentListingProps, AgentListItem } from './AgentListing.model';\nimport { Body, EmptyHolder, Page } from './AgentListing.styled';\nimport { AgentListingFilters } from './AgentListingFilters';\nimport { AgentListingHeader } from './AgentListingHeader';\nimport { AgentTable } from './AgentTable';\nimport { DeleteAgentModal } from './DeleteAgentModal';\n\n/**\n * Full body of the \"AI Agents\" listing screen (header + filters + table).\n * Presentational and fully controlled — the consumer owns data, search, sort,\n * pagination and routing. Render it inside your app shell (next to the sidebar).\n *\n * @example\n * <AgentListing\n *   agents={rows}\n *   searchValue={search}\n *   onSearchChange={setSearch}\n *   onNewAgent={() => router.push('/agents/new')}\n *   onRunAgent={runAgent}\n *   onEditAgent={(a) => router.push(`/agents/${a.id}`)}\n * />\n */\nexport const AgentListing: React.FC<AgentListingProps> = ({\n\tconfig,\n\tonSearchChange,\n\tonSearchSubmit,\n\tonFilterChange,\n\tonSortChange,\n\tonNewAgent,\n\tonBrowseTemplates,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n\t...rest\n}) => {\n\t// Agent pending delete-confirmation (null = dialog closed).\n\tconst [pendingDelete, setPendingDelete] = useState<AgentListItem | null>(\n\t\tnull,\n\t);\n\tconst [isDeleting, setIsDeleting] = useState(false);\n\tconst {\n\t\tagents,\n\t\tisLoading,\n\t\tsearchValue,\n\t\tsearchPlaceholder = 'Search',\n\t\tfilterOptions,\n\t\tfilterPlaceholder = 'Filters',\n\t\tsortOptions,\n\t\tselectedSort,\n\t\ttitle = 'AI Agents',\n\t\tpagination,\n\t\temptyState,\n\t\tdebugLog,\n\t} = config;\n\n\tconst showEmpty = !isLoading && agents.length === 0;\n\n\t// Gated debug logging: each handler logs at its start only when `debugLog`.\n\tconst logAction = useCallback(\n\t\t(action: string, ...args: unknown[]) => {\n\t\t\tif (debugLog) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.log(`[AgentListing] ${action}`, ...args);\n\t\t\t}\n\t\t},\n\t\t[debugLog],\n\t);\n\n\tconst handleSearchChange = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSearchChange', v);\n\t\t\tonSearchChange(v);\n\t\t},\n\t\t[logAction, onSearchChange],\n\t);\n\tconst handleSearchSubmit = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSearchSubmit', v);\n\t\t\tonSearchSubmit?.(v);\n\t\t},\n\t\t[logAction, onSearchSubmit],\n\t);\n\tconst handleFilterChange = useCallback(\n\t\t(selected: DropdownOption | DropdownOption[]) => {\n\t\t\tlogAction('onFilterChange', selected);\n\t\t\tonFilterChange?.(selected);\n\t\t},\n\t\t[logAction, onFilterChange],\n\t);\n\tconst handleSortChange = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSortChange', v);\n\t\t\tonSortChange?.(v);\n\t\t},\n\t\t[logAction, onSortChange],\n\t);\n\tconst handleNewAgent = useCallback(() => {\n\t\tlogAction('onNewAgent');\n\t\tonNewAgent();\n\t}, [logAction, onNewAgent]);\n\tconst handleBrowseTemplates = useCallback(() => {\n\t\tlogAction('onBrowseTemplates');\n\t\tonBrowseTemplates?.();\n\t}, [logAction, onBrowseTemplates]);\n\tconst handleRunAgent = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onRunAgent', agent.id);\n\t\t\tonRunAgent(agent);\n\t\t},\n\t\t[logAction, onRunAgent],\n\t);\n\tconst handleEditAgent = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onEditAgent', agent.id);\n\t\t\tonEditAgent(agent);\n\t\t},\n\t\t[logAction, onEditAgent],\n\t);\n\tconst handleRowClick = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onRowClick', agent.id);\n\t\t\tonRowClick?.(agent);\n\t\t},\n\t\t[logAction, onRowClick],\n\t);\n\t// Row delete just opens the confirm dialog; the actual delete runs on confirm.\n\tconst handleDeleteRequest = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onDeleteAgent', agent.id);\n\t\t\tsetPendingDelete(agent);\n\t\t},\n\t\t[logAction],\n\t);\n\tconst handleConfirmDelete = useCallback(async () => {\n\t\tif (!pendingDelete || !onDeleteAgent) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsDeleting(true);\n\t\ttry {\n\t\t\tawait onDeleteAgent(pendingDelete);\n\t\t\tsetPendingDelete(null);\n\t\t} finally {\n\t\t\tsetIsDeleting(false);\n\t\t}\n\t}, [pendingDelete, onDeleteAgent]);\n\n\treturn (\n\t\t<Page data-test={rest['data-test'] ?? 'agent-listing'}>\n\t\t\t<AgentListingHeader\n\t\t\t\ttitle={title}\n\t\t\t\tonNewAgent={handleNewAgent}\n\t\t\t\tonBrowseTemplates={\n\t\t\t\t\tonBrowseTemplates ? handleBrowseTemplates : undefined\n\t\t\t\t}\n\t\t\t/>\n\n\t\t\t<AgentListingFilters\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tonSearchChange={handleSearchChange}\n\t\t\t\tonSearchSubmit={onSearchSubmit ? handleSearchSubmit : undefined}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tfilterOptions={filterOptions}\n\t\t\t\tonFilterChange={onFilterChange ? handleFilterChange : undefined}\n\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\tsortOptions={sortOptions}\n\t\t\t\tselectedSort={selectedSort}\n\t\t\t\tonSortChange={onSortChange ? handleSortChange : undefined}\n\t\t\t/>\n\n\t\t\t<Body>\n\t\t\t\t{isLoading || showEmpty ? (\n\t\t\t\t\t<EmptyHolder>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\ttitle={emptyState?.title ?? 'No agents yet'}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\temptyState?.subTitle ??\n\t\t\t\t\t\t\t\t'Create your first AI agent to start automating conversations.'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tactionButton={\n\t\t\t\t\t\t\t\temptyState?.actionButton ?? {\n\t\t\t\t\t\t\t\t\tbuttonText: 'New AI agent',\n\t\t\t\t\t\t\t\t\tbuttonType: 'primary',\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t\tonClick: handleNewAgent,\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</EmptyHolder>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AgentTable\n\t\t\t\t\t\t\tagents={agents}\n\t\t\t\t\t\t\tonRunAgent={handleRunAgent}\n\t\t\t\t\t\t\tonEditAgent={handleEditAgent}\n\t\t\t\t\t\t\tonDeleteAgent={onDeleteAgent ? handleDeleteRequest : undefined}\n\t\t\t\t\t\t\tonRowClick={onRowClick ? handleRowClick : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{pagination && pagination.totalRows > 0 && (\n\t\t\t\t\t\t\t<TablePagination\n\t\t\t\t\t\t\t\tpageNumber={pagination.pageNumber}\n\t\t\t\t\t\t\t\tpageSize={pagination.pageSize}\n\t\t\t\t\t\t\t\ttotalRows={pagination.totalRows}\n\t\t\t\t\t\t\t\thidePageSizeOptions={pagination.hidePageSizeOptions}\n\t\t\t\t\t\t\t\tupdatePageNumber={pagination.onPageChange}\n\t\t\t\t\t\t\t\tupdatePageSize={(opt) => {\n\t\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\t\tconst value = Number((single as { value?: string })?.value);\n\t\t\t\t\t\t\t\t\tif (!Number.isNaN(value)) {\n\t\t\t\t\t\t\t\t\t\tpagination.onPageSizeChange(value);\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/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Body>\n\n\t\t\t{pendingDelete && (\n\t\t\t\t<DeleteAgentModal\n\t\t\t\t\tagentName={pendingDelete.name}\n\t\t\t\t\tisDeleting={isDeleting}\n\t\t\t\t\tonClose={() => (isDeleting ? undefined : setPendingDelete(null))}\n\t\t\t\t\tonConfirm={handleConfirmDelete}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Page>\n\t);\n};\n\nAgentListing.displayName = 'AgentListing';\n"],"names":["AgentListing","config","onSearchChange","onSearchSubmit","onFilterChange","onSortChange","onNewAgent","onBrowseTemplates","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","rest","pendingDelete","setPendingDelete","useState","isDeleting","setIsDeleting","agents","isLoading","searchValue","searchPlaceholder","filterOptions","filterPlaceholder","sortOptions","selectedSort","title","pagination","emptyState","debugLog","showEmpty","logAction","useCallback","action","args","handleSearchChange","v","handleSearchSubmit","handleFilterChange","selected","handleSortChange","handleNewAgent","handleBrowseTemplates","handleRunAgent","agent","handleEditAgent","handleRowClick","handleDeleteRequest","handleConfirmDelete","Page","jsx","AgentListingHeader","AgentListingFilters","Body","EmptyHolder","ZeroState","jsxs","Fragment","AgentTable","TablePagination","opt","single","value","DeleteAgentModal"],"mappings":";;;;;;;;;AA0BO,MAAMA,KAA4C,CAAC;AAAA,EACzD,QAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AAEL,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACzC;AAAA,EAAA,GAEK,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C;AAAA,IACL,QAAAG;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,eAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACG5B,GAEE6B,IAAY,CAACX,KAAaD,EAAO,WAAW,GAG5Ca,IAAYC;AAAA,IACjB,CAACC,MAAmBC,MAAoB;AACvC,MAAIL,KAEH,QAAQ,IAAI,kBAAkBI,CAAM,IAAI,GAAGC,CAAI;AAAA,IAEjD;AAAA,IACA,CAACL,CAAQ;AAAA,EAAA,GAGJM,IAAqBH;AAAA,IAC1B,CAACI,MAAc;AACd,MAAAL,EAAU,kBAAkBK,CAAC,GAC7BlC,EAAekC,CAAC;AAAA,IACjB;AAAA,IACA,CAACL,GAAW7B,CAAc;AAAA,EAAA,GAErBmC,IAAqBL;AAAA,IAC1B,CAACI,MAAc;AACd,MAAAL,EAAU,kBAAkBK,CAAC,GAC7BjC,IAAiBiC,CAAC;AAAA,IACnB;AAAA,IACA,CAACL,GAAW5B,CAAc;AAAA,EAAA,GAErBmC,IAAqBN;AAAA,IAC1B,CAACO,MAAgD;AAChD,MAAAR,EAAU,kBAAkBQ,CAAQ,GACpCnC,IAAiBmC,CAAQ;AAAA,IAC1B;AAAA,IACA,CAACR,GAAW3B,CAAc;AAAA,EAAA,GAErBoC,IAAmBR;AAAA,IACxB,CAACI,MAAc;AACd,MAAAL,EAAU,gBAAgBK,CAAC,GAC3B/B,IAAe+B,CAAC;AAAA,IACjB;AAAA,IACA,CAACL,GAAW1B,CAAY;AAAA,EAAA,GAEnBoC,IAAiBT,EAAY,MAAM;AACxC,IAAAD,EAAU,YAAY,GACtBzB,EAAA;AAAA,EACD,GAAG,CAACyB,GAAWzB,CAAU,CAAC,GACpBoC,IAAwBV,EAAY,MAAM;AAC/C,IAAAD,EAAU,mBAAmB,GAC7BxB,IAAA;AAAA,EACD,GAAG,CAACwB,GAAWxB,CAAiB,CAAC,GAC3BoC,IAAiBX;AAAA,IACtB,CAACY,MAAyB;AACzB,MAAAb,EAAU,cAAca,EAAM,EAAE,GAChCpC,EAAWoC,CAAK;AAAA,IACjB;AAAA,IACA,CAACb,GAAWvB,CAAU;AAAA,EAAA,GAEjBqC,IAAkBb;AAAA,IACvB,CAACY,MAAyB;AACzB,MAAAb,EAAU,eAAea,EAAM,EAAE,GACjCnC,EAAYmC,CAAK;AAAA,IAClB;AAAA,IACA,CAACb,GAAWtB,CAAW;AAAA,EAAA,GAElBqC,IAAiBd;AAAA,IACtB,CAACY,MAAyB;AACzB,MAAAb,EAAU,cAAca,EAAM,EAAE,GAChCjC,IAAaiC,CAAK;AAAA,IACnB;AAAA,IACA,CAACb,GAAWpB,CAAU;AAAA,EAAA,GAGjBoC,IAAsBf;AAAA,IAC3B,CAACY,MAAyB;AACzB,MAAAb,EAAU,iBAAiBa,EAAM,EAAE,GACnC9B,EAAiB8B,CAAK;AAAA,IACvB;AAAA,IACA,CAACb,CAAS;AAAA,EAAA,GAELiB,IAAsBhB,EAAY,YAAY;AACnD,QAAI,GAACnB,KAAiB,CAACH,IAGvB;AAAA,MAAAO,EAAc,EAAI;AAClB,UAAI;AACH,cAAMP,EAAcG,CAAa,GACjCC,EAAiB,IAAI;AAAA,MACtB,UAAA;AACC,QAAAG,EAAc,EAAK;AAAA,MACpB;AAAA;AAAA,EACD,GAAG,CAACJ,GAAeH,CAAa,CAAC;AAEjC,2BACEuC,GAAA,EAAK,aAAWrC,EAAK,WAAW,KAAK,iBACrC,UAAA;AAAA,IAAA,gBAAAsC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAAzB;AAAA,QACA,YAAYe;AAAA,QACZ,mBACClC,IAAoBmC,IAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,IAI9C,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAAhC;AAAA,QACA,gBAAgBe;AAAA,QAChB,gBAAgBhC,IAAiBkC,IAAqB;AAAA,QACtD,mBAAAhB;AAAA,QACA,eAAAC;AAAA,QACA,gBAAgBlB,IAAiBkC,IAAqB;AAAA,QACtD,mBAAAf;AAAA,QACA,aAAAC;AAAA,QACA,cAAAC;AAAA,QACA,cAAcpB,IAAemC,IAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjD,gBAAAU,EAACG,GAAA,EACC,UAAAlC,KAAaW,sBACZwB,GAAA,EACA,UAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,WAAApC;AAAA,QACA,OAAOS,GAAY,SAAS;AAAA,QAC5B,UACCA,GAAY,YACZ;AAAA,QAED,cACCA,GAAY,gBAAgB;AAAA,UAC3B,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,MAAM;AAAA,UACN,SAASa;AAAA,QAAA;AAAA,MACV;AAAA,IAAA,EAEF,CACD,IAEA,gBAAAe,EAAAC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACA,QAAAxC;AAAA,UACA,YAAYyB;AAAA,UACZ,aAAaE;AAAA,UACb,eAAenC,IAAgBqC,IAAsB;AAAA,UACrD,YAAYpC,IAAamC,IAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,MAE1CnB,KAAcA,EAAW,YAAY,KACrC,gBAAAuB;AAAA,QAACS;AAAA,QAAA;AAAA,UACA,YAAYhC,EAAW;AAAA,UACvB,UAAUA,EAAW;AAAA,UACrB,WAAWA,EAAW;AAAA,UACtB,qBAAqBA,EAAW;AAAA,UAChC,kBAAkBA,EAAW;AAAA,UAC7B,gBAAgB,CAACiC,MAAQ;AACxB,kBAAMC,IAAS,MAAM,QAAQD,CAAG,IAAIA,EAAI,CAAC,IAAIA,GACvCE,IAAQ,OAAQD,GAA+B,KAAK;AAC1D,YAAK,OAAO,MAAMC,CAAK,KACtBnC,EAAW,iBAAiBmC,CAAK;AAAA,UAEnC;AAAA,QAAA;AAAA,MAAA;AAAA,IACD,EAAA,CAEF,EAAA,CAEF;AAAA,IAECjD,KACA,gBAAAqC;AAAA,MAACa;AAAA,MAAA;AAAA,QACA,WAAWlD,EAAc;AAAA,QACzB,YAAAG;AAAA,QACA,SAAS,MAAOA,IAAa,SAAYF,EAAiB,IAAI;AAAA,QAC9D,WAAWkC;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEF;AAEF;AAEAhD,GAAa,cAAc;"}

package/dist/esm/components/agent-listing/AgentListing.model.d.ts

@@ -0,0 +1,78 @@
+import { AgentListItem, AgentListSortOption } from '@bikdotai/bik-models/ai-agents';
+import { ApplicationType } from '@bikdotai/bik-models/growth';
+import { ButtonProps } from '../button/model';
+import { DropdownOption } from '../dropdown/type';
+/**
+ * The agent listing DATA models now live in `@bikdotai/bik-models/ai-agents`
+ * (shared with the merchant). Re-exported here so existing imports keep working.
+ */
+export type { AgentStatus, AgentTriggerSummary, AgentListItem, AgentListSortOption, } from '@bikdotai/bik-models/ai-agents';
+/** Controlled pagination, forwarded to `TablePagination`. */
+export interface AgentListingPagination {
+    pageNumber: number;
+    pageSize: number;
+    totalRows: number;
+    onPageChange: (pageNumber: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    hidePageSizeOptions?: boolean;
+}
+/**
+ * All non-function (data / option / flag) props, grouped into one object.
+ * Callbacks are kept OUT of here and passed as flat props so the consumer can
+ * pass stable function references without rebuilding this object.
+ */
+export interface AgentListingConfig {
+    /** Rows to render. Controlled by the consumer (filtered/sorted upstream). */
+    agents: AgentListItem[];
+    /** Initial-fetch loading — shows the loading ZeroState in place of the table. */
+    isLoading?: boolean;
+    /** Host application context the merchant runs in (e.g. ApplicationType.MANIFEST). */
+    applicationType?: ApplicationType;
+    /** Controlled search text. */
+    searchValue: string;
+    /** @default "Search" */
+    searchPlaceholder?: string;
+    /** Pass to render the "Filters" dropdown. Omit to hide it. */
+    filterOptions?: DropdownOption[];
+    /** @default "Filters" */
+    filterPlaceholder?: string;
+    sortOptions?: AgentListSortOption[];
+    selectedSort?: string;
+    /** @default "AI Agents" */
+    title?: string;
+    pagination?: AgentListingPagination;
+    emptyState?: {
+        title?: string;
+        subTitle?: string;
+        actionButton?: ButtonProps;
+    };
+    /**
+     * When true, every action handler logs `[AgentListing] <handler>` (plus its
+     * args) to the console as it fires. Off by default — nothing is logged.
+     */
+    debugLog?: boolean;
+}
+export interface AgentListingProps {
+    /** Grouped data / options / flags. */
+    config: AgentListingConfig;
+    /** Fires on every keystroke. Treat as input-text only when `onSearchSubmit`
+     * is set (then run the actual search on submit, not here). */
+    onSearchChange: (value: string) => void;
+    /**
+     * When provided, the search runs on Enter (not while typing): the user types
+     * freely (updating via `onSearchChange`) and this fires with the final text on
+     * Enter. Omit to keep search live/as-you-type.
+     */
+    onSearchSubmit?: (value: string) => void;
+    onFilterChange?: (selected: DropdownOption | DropdownOption[]) => void;
+    onSortChange?: (value: string) => void;
+    onNewAgent: () => void;
+    /** Pass to render the secondary "Browse templates" button. Omit to hide it. */
+    onBrowseTemplates?: () => void;
+    onRunAgent: (agent: AgentListItem) => void;
+    onEditAgent: (agent: AgentListItem) => void;
+    onDeleteAgent?: (agent: AgentListItem) => void | Promise<void>;
+    /** Optional: whole-row click (e.g. open the builder). */
+    onRowClick?: (agent: AgentListItem) => void;
+    'data-test'?: string;
+}

package/dist/esm/components/agent-listing/AgentListing.styled.d.ts

@@ -0,0 +1,56 @@
+/** Shared column template for header + body rows so they always align. */
+export declare const TABLE_GRID_COLUMNS = "minmax(240px, 1.4fr) minmax(200px, 1.2fr) 140px 160px 120px";
+export declare const Page: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-agent-listing-page";
+}, "className">;
+export declare const HeaderBar: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-header-bar";
+}, "className">;
+export declare const HeaderActions: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-header-actions";
+}, "className">;
+export declare const FilterRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-filter-row";
+}, "className">;
+export declare const FilterRowLeft: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-filter-row-left";
+}, "className">;
+export declare const Body: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-body";
+}, "className">;
+export declare const TableCard: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-table-card";
+}, "className">;
+export declare const TableScroll: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-table-scroll";
+}, "className">;
+export declare const HeaderGridRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-header-grid-row";
+}, "className">;
+export declare const HeaderCell: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-header-cell";
+} & {
+    align?: "center" | "left" | "right" | undefined;
+}, "className">;
+export declare const BodyGridRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-body-grid-row";
+} & {
+    clickable?: boolean | undefined;
+}, "className">;
+export declare const Cell: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-cell";
+} & {
+    align?: "center" | "left" | "right" | undefined;
+}, "className">;
+/** Bordered icon-button group used in the Actions cell. */
+export declare const ActionGroup: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-action-group";
+}, "className">;
+export declare const ActionButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-action-button";
+} & {
+    disabled?: boolean | undefined;
+}, "className">;
+export declare const EmptyHolder: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-empty-holder";
+}, "className">;

package/dist/esm/components/agent-listing/AgentListing.styled.js

@@ -0,0 +1,145 @@
+import t from "styled-components";
+import { COLORS as i } from "../../constants/Theme.js";
+const a = "minmax(240px, 1.4fr) minmax(200px, 1.2fr) 140px 160px 120px", l = t.div.attrs({ className: "bik-agent-listing-page" })`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	background: ${i.surface.standard};
+	min-height: 0;
+`, d = t.div.attrs({ className: "bik-header-bar" })`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 56px;
+	padding: 12px 16px;
+	border-bottom: 1px solid ${i.stroke.primary};
+	flex-shrink: 0;
+`, o = t.div.attrs({
+  className: "bik-header-actions"
+})`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`, n = t.div.attrs({ className: "bik-filter-row" })`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 16px;
+	border-bottom: 1px solid ${i.stroke.primary};
+	flex-shrink: 0;
+`, c = t.div.attrs({
+  className: "bik-filter-row-left"
+})`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+`, p = t.div.attrs({ className: "bik-body" })`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	padding: 16px;
+	gap: 8px;
+`, x = t.div.attrs({ className: "bik-table-card" })`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	border: 1px solid ${i.stroke.primary};
+	border-radius: 8px;
+	overflow: hidden;
+`, m = t.div.attrs({ className: "bik-table-scroll" })`
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+`, g = t.div.attrs({
+  className: "bik-header-grid-row"
+})`
+	display: grid;
+	grid-template-columns: ${a};
+	align-items: center;
+	height: 40px;
+	background: ${i.surface.subdued};
+	border-bottom: 1px solid ${i.stroke.primary};
+	position: sticky;
+	top: 0;
+	z-index: 1;
+`, b = t.div.attrs({ className: "bik-header-cell" })`
+	padding: 8px 12px;
+	text-align: ${(e) => e.align ?? "left"};
+	display: flex;
+	justify-content: ${(e) => e.align === "right" ? "flex-end" : e.align === "center" ? "center" : "flex-start"};
+`, f = t.div.attrs({
+  className: "bik-body-grid-row"
+})`
+	display: grid;
+	grid-template-columns: ${a};
+	align-items: center;
+	min-height: 72px;
+	border-bottom: 1px solid ${i.stroke.primary};
+	cursor: ${(e) => e.clickable ? "pointer" : "default"};
+
+	&:hover {
+		background: ${(e) => e.clickable ? i.surface.subdued : "transparent"};
+	}
+`, u = t.div.attrs({ className: "bik-cell" })`
+	padding: 8px 12px;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	justify-content: center;
+	align-items: ${(e) => e.align === "right" ? "flex-end" : e.align === "center" ? "center" : "flex-start"};
+`, h = t.div.attrs({ className: "bik-action-group" })`
+	display: inline-flex;
+	align-items: center;
+	border: 1px solid ${i.stroke.primary};
+	border-radius: 4px;
+	overflow: hidden;
+`, y = t.button.attrs({
+  className: "bik-action-button"
+})`
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: ${i.surface.standard};
+	border: none;
+	padding: 0;
+	cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
+	opacity: ${(e) => e.disabled ? 0.4 : 1};
+
+	&:not(:last-child) {
+		border-right: 1px solid ${i.stroke.primary};
+	}
+
+	&:hover {
+		background: ${(e) => e.disabled ? i.surface.standard : i.surface.subdued};
+	}
+`, k = t.div.attrs({ className: "bik-empty-holder" })`
+	flex: 1;
+	display: flex;
+	min-height: 0;
+`;
+export {
+  y as ActionButton,
+  h as ActionGroup,
+  p as Body,
+  f as BodyGridRow,
+  u as Cell,
+  k as EmptyHolder,
+  n as FilterRow,
+  c as FilterRowLeft,
+  o as HeaderActions,
+  d as HeaderBar,
+  b as HeaderCell,
+  g as HeaderGridRow,
+  l as Page,
+  a as TABLE_GRID_COLUMNS,
+  x as TableCard,
+  m as TableScroll
+};
+//# sourceMappingURL=AgentListing.styled.js.map

package/dist/esm/components/agent-listing/AgentListing.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentListing.styled.js","sources":["../../../../src/components/agent-listing/AgentListing.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\n/** Shared column template for header + body rows so they always align. */\nexport const TABLE_GRID_COLUMNS =\n\t'minmax(240px, 1.4fr) minmax(200px, 1.2fr) 140px 160px 120px';\n\nexport const Page = styled.div.attrs({ className: 'bik-agent-listing-page' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tbackground: ${COLORS.surface.standard};\n\tmin-height: 0;\n`;\n\nexport const HeaderBar = styled.div.attrs({ className: 'bik-header-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const HeaderActions = styled.div.attrs({\n\tclassName: 'bik-header-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const FilterRow = styled.div.attrs({ className: 'bik-filter-row' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const FilterRowLeft = styled.div.attrs({\n\tclassName: 'bik-filter-row-left',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n`;\n\nexport const Body = styled.div.attrs({ className: 'bik-body' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0;\n\tpadding: 16px;\n\tgap: 8px;\n`;\n\nexport const TableCard = styled.div.attrs({ className: 'bik-table-card' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\toverflow: hidden;\n`;\n\nexport const TableScroll = styled.div.attrs({ className: 'bik-table-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow: auto;\n`;\n\nexport const HeaderGridRow = styled.div.attrs({\n\tclassName: 'bik-header-grid-row',\n})`\n\tdisplay: grid;\n\tgrid-template-columns: ${TABLE_GRID_COLUMNS};\n\talign-items: center;\n\theight: 40px;\n\tbackground: ${COLORS.surface.subdued};\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 1;\n`;\n\nexport const HeaderCell = styled.div.attrs({ className: 'bik-header-cell' })<{\n\talign?: 'left' | 'right' | 'center';\n}>`\n\tpadding: 8px 12px;\n\ttext-align: ${(p) => p.align ?? 'left'};\n\tdisplay: flex;\n\tjustify-content: ${(p) =>\n\t\tp.align === 'right'\n\t\t\t? 'flex-end'\n\t\t\t: p.align === 'center'\n\t\t\t? 'center'\n\t\t\t: 'flex-start'};\n`;\n\nexport const BodyGridRow = styled.div.attrs({\n\tclassName: 'bik-body-grid-row',\n})<{ clickable?: boolean }>`\n\tdisplay: grid;\n\tgrid-template-columns: ${TABLE_GRID_COLUMNS};\n\talign-items: center;\n\tmin-height: 72px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tcursor: ${(p) => (p.clickable ? 'pointer' : 'default')};\n\n\t&:hover {\n\t\tbackground: ${(p) =>\n\t\t\tp.clickable ? COLORS.surface.subdued : 'transparent'};\n\t}\n`;\n\nexport const Cell = styled.div.attrs({ className: 'bik-cell' })<{\n\talign?: 'left' | 'right' | 'center';\n}>`\n\tpadding: 8px 12px;\n\tmin-width: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tjustify-content: center;\n\talign-items: ${(p) =>\n\t\tp.align === 'right'\n\t\t\t? 'flex-end'\n\t\t\t: p.align === 'center'\n\t\t\t? 'center'\n\t\t\t: 'flex-start'};\n`;\n\n/** Bordered icon-button group used in the Actions cell. */\nexport const ActionGroup = styled.div.attrs({ className: 'bik-action-group' })`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nexport const ActionButton = styled.button.attrs({\n\tclassName: 'bik-action-button',\n})<{ disabled?: boolean }>`\n\twidth: 32px;\n\theight: 32px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: ${COLORS.surface.standard};\n\tborder: none;\n\tpadding: 0;\n\tcursor: ${(p) => (p.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(p) => (p.disabled ? 0.4 : 1)};\n\n\t&:not(:last-child) {\n\t\tborder-right: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t&:hover {\n\t\tbackground: ${(p) =>\n\t\t\tp.disabled ? COLORS.surface.standard : COLORS.surface.subdued};\n\t}\n`;\n\nexport const EmptyHolder = styled.div.attrs({ className: 'bik-empty-holder' })`\n\tflex: 1;\n\tdisplay: flex;\n\tmin-height: 0;\n`;\n"],"names":["TABLE_GRID_COLUMNS","Page","styled","COLORS","HeaderBar","HeaderActions","FilterRow","FilterRowLeft","Body","TableCard","TableScroll","HeaderGridRow","HeaderCell","p","BodyGridRow","Cell","ActionGroup","ActionButton","EmptyHolder"],"mappings":";;AAIO,MAAMA,IACZ,+DAEYC,IAAOC,EAAO,IAAI,MAAM,EAAE,WAAW,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,eAK7DC,EAAO,QAAQ,QAAQ;AAAA;AAAA,GAIzBC,IAAYF,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAM7CC,EAAO,OAAO,OAAO;AAAA;AAAA,GAIpCE,IAAgBH,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAMYI,IAAYJ,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAM7CC,EAAO,OAAO,OAAO;AAAA;AAAA,GAIpCI,IAAgBL,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA,GAMYM,IAAON,EAAO,IAAI,MAAM,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjDO,IAAYP,EAAO,IAAI,MAAM,EAAE,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKpDC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,GAK7BO,IAAcR,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA;AAAA;AAAA;AAAA,GAMhES,IAAgBT,EAAO,IAAI,MAAM;AAAA,EAC7C,WAAW;AACZ,CAAC;AAAA;AAAA,0BAEyBF,CAAkB;AAAA;AAAA;AAAA,eAG7BG,EAAO,QAAQ,OAAO;AAAA,4BACTA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAMpCS,IAAaV,EAAO,IAAI,MAAM,EAAE,WAAW,mBAAmB;AAAA;AAAA,eAI5D,CAACW,MAAMA,EAAE,SAAS,MAAM;AAAA;AAAA,oBAEnB,CAACA,MACnBA,EAAE,UAAU,UACT,aACAA,EAAE,UAAU,WACZ,WACA,YAAY;AAAA,GAGJC,IAAcZ,EAAO,IAAI,MAAM;AAAA,EAC3C,WAAW;AACZ,CAAC;AAAA;AAAA,0BAEyBF,CAAkB;AAAA;AAAA;AAAA,4BAGhBG,EAAO,OAAO,OAAO;AAAA,WACtC,CAACU,MAAOA,EAAE,YAAY,YAAY,SAAU;AAAA;AAAA;AAAA,gBAGvC,CAACA,MACdA,EAAE,YAAYV,EAAO,QAAQ,UAAU,aAAa;AAAA;AAAA,GAI1CY,IAAOb,EAAO,IAAI,MAAM,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS9C,CAACW,MACfA,EAAE,UAAU,UACT,aACAA,EAAE,UAAU,WACZ,WACA,YAAY;AAAA,GAIJG,IAAcd,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA;AAAA;AAAA,qBAGxDC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,GAK7Bc,IAAef,EAAO,OAAO,MAAM;AAAA,EAC/C,WAAW;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMcC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,WAG3B,CAACU,MAAOA,EAAE,WAAW,gBAAgB,SAAU;AAAA,YAC9C,CAACA,MAAOA,EAAE,WAAW,MAAM,CAAE;AAAA;AAAA;AAAA,4BAGbV,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIjC,CAACU,MACdA,EAAE,WAAWV,EAAO,QAAQ,WAAWA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInDe,IAAchB,EAAO,IAAI,MAAM,EAAE,WAAW,oBAAoB;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/agent-listing/AgentListingFilters.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { DropdownOption } from '../dropdown/type';
+import { AgentListSortOption } from './AgentListing.model';
+interface AgentListingFiltersProps {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    /** When set, Enter in the search box runs the search (typing only edits text). */
+    onSearchSubmit?: (value: string) => void;
+    searchPlaceholder: string;
+    filterOptions?: DropdownOption[];
+    onFilterChange?: (selected: DropdownOption | DropdownOption[]) => void;
+    filterPlaceholder: string;
+    sortOptions?: AgentListSortOption[];
+    selectedSort?: string;
+    onSortChange?: (value: string) => void;
+}
+export declare const AgentListingFilters: React.FC<AgentListingFiltersProps>;
+export {};

package/dist/esm/components/agent-listing/AgentListingFilters.js

@@ -0,0 +1,85 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import f from "../../assets/icons/search.svg.js";
+import { COLORS as w } from "../../constants/Theme.js";
+import { FilterRow as g, FilterRowLeft as x } from "./AgentListing.styled.js";
+import { Input as y } from "../input/Input.js";
+import { Dropdown as c } from "../dropdown/Dropdown.js";
+const R = ({
+  searchValue: d,
+  onSearchChange: p,
+  onSearchSubmit: r,
+  searchPlaceholder: m,
+  filterOptions: l,
+  onFilterChange: o,
+  filterPlaceholder: h,
+  sortOptions: a,
+  selectedSort: u,
+  onSortChange: i
+}) => {
+  const v = (a ?? []).map((e) => ({
+    label: e.label,
+    value: e.value,
+    selected: e.value === u
+  }));
+  return /* @__PURE__ */ s(g, { children: [
+    /* @__PURE__ */ s(x, { children: [
+      /* @__PURE__ */ t(
+        y,
+        {
+          "data-test": "agent-search",
+          variant: "small",
+          width: "320px",
+          type: "text",
+          value: d,
+          placeholder: m,
+          hideInputHeader: !0,
+          noErrorHint: !0,
+          leftIcon: {
+            icon: () => /* @__PURE__ */ t(
+              f,
+              {
+                width: 18,
+                height: 18,
+                color: w.content.placeholder
+              }
+            )
+          },
+          onChangeText: (e) => p(e),
+          onKeyDownEvent: r ? (e) => {
+            e.key === "Enter" && r(e.target.value);
+          } : void 0
+        }
+      ),
+      l && o && /* @__PURE__ */ t(
+        c,
+        {
+          "data-test": "agent-filters",
+          size: "small",
+          width: "140px",
+          placeHolder: h,
+          showPlaceholderWhenSelected: !0,
+          options: l,
+          isMultiSelect: !0,
+          onSelect: o
+        }
+      )
+    ] }),
+    a && i && /* @__PURE__ */ t(
+      c,
+      {
+        "data-test": "agent-sort",
+        size: "small",
+        width: "200px",
+        options: v,
+        onSelect: (e) => {
+          const n = (Array.isArray(e) ? e[0] : e)?.value;
+          n && i(n);
+        }
+      }
+    )
+  ] });
+};
+export {
+  R as AgentListingFilters
+};
+//# sourceMappingURL=AgentListingFilters.js.map

package/dist/esm/components/agent-listing/AgentListingFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentListingFilters.js","sources":["../../../../src/components/agent-listing/AgentListingFilters.tsx"],"sourcesContent":["import SearchIcon from '@src/assets/icons/search.svg';\nimport React from 'react';\nimport { Dropdown } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListSortOption } from './AgentListing.model';\nimport { FilterRow, FilterRowLeft } from './AgentListing.styled';\n\ninterface AgentListingFiltersProps {\n\tsearchValue: string;\n\tonSearchChange: (value: string) => void;\n\t/** When set, Enter in the search box runs the search (typing only edits text). */\n\tonSearchSubmit?: (value: string) => void;\n\tsearchPlaceholder: string;\n\n\tfilterOptions?: DropdownOption[];\n\tonFilterChange?: (selected: DropdownOption | DropdownOption[]) => void;\n\tfilterPlaceholder: string;\n\n\tsortOptions?: AgentListSortOption[];\n\tselectedSort?: string;\n\tonSortChange?: (value: string) => void;\n}\n\nexport const AgentListingFilters: React.FC<AgentListingFiltersProps> = ({\n\tsearchValue,\n\tonSearchChange,\n\tonSearchSubmit,\n\tsearchPlaceholder,\n\tfilterOptions,\n\tonFilterChange,\n\tfilterPlaceholder,\n\tsortOptions,\n\tselectedSort,\n\tonSortChange,\n}) => {\n\tconst sortDropdownOptions: SingleOption[] = (sortOptions ?? []).map((o) => ({\n\t\tlabel: o.label,\n\t\tvalue: o.value,\n\t\tselected: o.value === selectedSort,\n\t}));\n\n\treturn (\n\t\t<FilterRow>\n\t\t\t<FilterRowLeft>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"agent-search\"\n\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\twidth=\"320px\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={searchValue}\n\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\thideInputHeader\n\t\t\t\t\tnoErrorHint\n\t\t\t\t\tleftIcon={{\n\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\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\tonChangeText={(text) => onSearchChange(text)}\n\t\t\t\t\tonKeyDownEvent={\n\t\t\t\t\t\tonSearchSubmit\n\t\t\t\t\t\t\t? (e) => {\n\t\t\t\t\t\t\t\t\tif ((e as unknown as KeyboardEvent).key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\tonSearchSubmit((e.target as HTMLInputElement).value);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t{filterOptions && onFilterChange && (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tdata-test=\"agent-filters\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\twidth=\"140px\"\n\t\t\t\t\t\tplaceHolder={filterPlaceholder}\n\t\t\t\t\t\tshowPlaceholderWhenSelected\n\t\t\t\t\t\toptions={filterOptions}\n\t\t\t\t\t\tisMultiSelect\n\t\t\t\t\t\tonSelect={onFilterChange}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</FilterRowLeft>\n\n\t\t\t{sortOptions && onSortChange && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"agent-sort\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"200px\"\n\t\t\t\t\toptions={sortDropdownOptions}\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 value = (single as SingleOption)?.value;\n\t\t\t\t\t\tif (value) {\n\t\t\t\t\t\t\tonSortChange(value);\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</FilterRow>\n\t);\n};\n"],"names":["AgentListingFilters","searchValue","onSearchChange","onSearchSubmit","searchPlaceholder","filterOptions","onFilterChange","filterPlaceholder","sortOptions","selectedSort","onSortChange","sortDropdownOptions","o","FilterRow","jsxs","FilterRowLeft","jsx","Input","SearchIcon","COLORS","text","Dropdown","opt","value"],"mappings":";;;;;;AAyBO,MAAMA,IAA0D,CAAC;AAAA,EACvE,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACD,MAAM;AACL,QAAMC,KAAuCH,KAAe,CAAA,GAAI,IAAI,CAACI,OAAO;AAAA,IAC3E,OAAOA,EAAE;AAAA,IACT,OAAOA,EAAE;AAAA,IACT,UAAUA,EAAE,UAAUH;AAAA,EAAA,EACrB;AAEF,2BACEI,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAOhB;AAAA,UACP,aAAaG;AAAA,UACb,iBAAe;AAAA,UACf,aAAW;AAAA,UACX,UAAU;AAAA,YACT,MAAM,MACL,gBAAAY;AAAA,cAACE;AAAAA,cAAA;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,OAAOC,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACvB;AAAA,UAGF,cAAc,CAACC,MAASlB,EAAekB,CAAI;AAAA,UAC3C,gBACCjB,IACG,CAAC,MAAM;AACP,YAAK,EAA+B,QAAQ,WAC3CA,EAAgB,EAAE,OAA4B,KAAK;AAAA,UAEpD,IACA;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJE,KAAiBC,KACjB,gBAAAU;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,MAAK;AAAA,UACL,OAAM;AAAA,UACN,aAAad;AAAA,UACb,6BAA2B;AAAA,UAC3B,SAASF;AAAA,UACT,eAAa;AAAA,UACb,UAAUC;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GAEF;AAAA,IAECE,KAAeE,KACf,gBAAAM;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASV;AAAA,QACT,UAAU,CAACW,MAAQ;AAElB,gBAAMC,KADS,MAAM,QAAQD,CAAG,IAAIA,EAAI,CAAC,IAAIA,IACL;AACxC,UAAIC,KACHb,EAAaa,CAAK;AAAA,QAEpB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GAEF;AAEF;"}

package/dist/esm/components/agent-listing/AgentListingHeader.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface AgentListingHeaderProps {
+    title: string;
+    onNewAgent: () => void;
+    onBrowseTemplates?: () => void;
+}
+export declare const AgentListingHeader: React.FC<AgentListingHeaderProps>;
+export {};

package/dist/esm/components/agent-listing/AgentListingHeader.js

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import a from "../../assets/icons/plus.svg.js";
+import { TitleMedium as m } from "../TypographyStyle.js";
+import { COLORS as s } from "../../constants/Theme.js";
+import { HeaderBar as l, HeaderActions as p } from "./AgentListing.styled.js";
+import { Button as r } from "../button/Button.js";
+const x = ({
+  title: n,
+  onNewAgent: i,
+  onBrowseTemplates: e
+}) => /* @__PURE__ */ o(l, { children: [
+  /* @__PURE__ */ t(m, { color: s.content.primary, children: n }),
+  /* @__PURE__ */ o(p, { children: [
+    e && /* @__PURE__ */ t(
+      r,
+      {
+        "data-test": "agent-browse-templates",
+        buttonType: "secondary",
+        size: "small",
+        buttonText: "Browse templates",
+        onClick: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      r,
+      {
+        "data-test": "agent-new",
+        buttonType: "primary",
+        size: "small",
+        buttonText: "New AI agent",
+        LeadingIcon: a,
+        onClick: i
+      }
+    )
+  ] })
+] });
+export {
+  x as AgentListingHeader
+};
+//# sourceMappingURL=AgentListingHeader.js.map