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

package/dist/esm/components/agent-builder/utils/mentionSerialization.js

@@ -0,0 +1,95 @@
+const p = {
+  manifest: "Manifest",
+  shopify: "Shopify",
+  integration: "Integration"
+}, d = (t, i = "Manifest") => t ? p[t] ?? t : i, k = (t) => {
+  const i = t ? String(t) : "";
+  return i === "BIK" ? "BIK" : i === "BSP" ? "BSP" : "Manifest";
+}, y = (t, i, e = "Manifest") => [
+  ...t.map(
+    (n) => ({
+      id: n.tool_id,
+      label: `${d(n.source, e)} : ${n.displayName}`,
+      meta: {
+        kind: "tool",
+        functionKey: n.function_key,
+        plainLabel: n.displayName,
+        source: n.source
+      }
+    })
+  ),
+  ...i.map(
+    (n) => ({
+      id: n.id,
+      label: `sub-agent: ${n.name}`,
+      meta: { kind: "subagent", plainLabel: n.name }
+    })
+  )
+], o = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), s = (t) => o(t).replace(/"/g, "&quot;"), m = (t, i, e) => `<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${s(t)}" data-label="${s(i)}" data-kind="${s(e)}">${o(i)}</span>`, f = (t) => {
+  const i = /* @__PURE__ */ new Map();
+  for (const e of t) {
+    const n = e.meta;
+    n?.kind === "tool" && n.functionKey ? i.set(`tool:${n.functionKey}`, e) : n?.kind === "subagent" && i.set(`subagent:${String(e.id)}`, e);
+  }
+  return i;
+}, l = /\{\{(tool:[^}]+|subagent:[^}]+)\}\}/g, g = (t, i) => {
+  let e = "", n = 0;
+  l.lastIndex = 0;
+  let a;
+  for (; (a = l.exec(t)) !== null; ) {
+    e += o(t.slice(n, a.index));
+    const r = i.get(a[1]);
+    if (r) {
+      const u = r.meta.kind;
+      e += m(String(r.id), r.label, u);
+    } else
+      e += o(a[0]);
+    n = l.lastIndex;
+  }
+  return e += o(t.slice(n)), e.replace(/\n/g, "<br>");
+}, $ = (t, i = []) => {
+  if (!t)
+    return "";
+  const e = f(i);
+  return t.split(/\n{2,}/).map((n) => `<p>${g(n, e)}</p>`).join("");
+}, b = (t, i) => {
+  const e = i[t];
+  return e ? `{{tool:${e}}}` : `{{subagent:${t}}}`;
+}, c = (t, i) => {
+  switch (t.type) {
+    case "text":
+      return t.text ?? "";
+    case "mentionAgent":
+    case "mentionTeam": {
+      const e = t.attrs?.id;
+      return e == null ? "" : b(String(e), i);
+    }
+    case "variable":
+      return `{{${String(t.attrs?.variableName ?? "")}}}`;
+    case "hardBreak":
+      return `
+`;
+    default: {
+      const e = (t.content ?? []).map((a) => c(a, i)).join("");
+      return ["paragraph", "heading", "listItem", "blockquote"].includes(t.type) ? `${e}
+` : e;
+    }
+  }
+}, S = (t, i) => {
+  if (!t)
+    return "";
+  const e = i.reduce((n, a) => (n[a.tool_id] = a.function_key, n), {});
+  return c(t, e).replace(
+    /\n+$/,
+    ""
+  );
+};
+export {
+  p as TOOL_SOURCE_LABELS,
+  k as appTypeLabel,
+  y as buildAgentMentionItems,
+  S as editorDocToInstructions,
+  $ as instructionsToEditorHtml,
+  d as toolSourceLabel
+};
+//# sourceMappingURL=mentionSerialization.js.map

package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport { AgentTool, SubAgentRef } from '../AgentBuilder.model';\n\n/**\n * Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n *\n * Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n *   - `{{subagent:<agentId>}}`  — hand-off to another agent\n *   - `{{tool:<function_key>}}` — an action the agent can call\n *   - `{{<variableName>}}`      — a template variable\n *\n * In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n */\n\nexport interface MentionKindMeta {\n\t/** Distinguishes a tool reference from a sub-agent reference. */\n\tkind: 'tool' | 'subagent';\n\t/** For tools: the function_key used in the `{{tool:KEY}}` token. */\n\tfunctionKey?: string;\n\t/** Plain item name (no prefix) shown in the picker dropdown rows. */\n\tplainLabel?: string;\n\t/** For tools: the source bucket (manifest / shopify / …) the picker groups by. */\n\tsource?: string;\n}\n\n/** Display labels for the known tool sources (drives picker headers + chip prefix). */\nexport const TOOL_SOURCE_LABELS: Record<string, string> = {\n\tmanifest: 'Manifest',\n\tshopify: 'Shopify',\n\tintegration: 'Integration',\n};\n\n/** Human label for a tool source; falls back to the host-app label, then the raw key. */\nexport const toolSourceLabel = (\n\tsource: string | undefined,\n\tfallback = 'Manifest',\n): string => {\n\tif (!source) {\n\t\treturn fallback;\n\t}\n\treturn TOOL_SOURCE_LABELS[source] ?? source;\n};\n\n/** Human label for the host application, used as the tool-chip prefix. */\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/**\n * Build the combined `@` mention list from the available tools + sub-agents.\n *\n * The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n */\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.displayName}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tfunctionKey: t.function_key,\n\t\t\t\tplainLabel: t.displayName,\n\t\t\t\tsource: t.source,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '&quot;');\n\n/**\n * The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n */\nconst mentionSpanHtml = (id: string, label: string, kind: string): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\">${escapeHtml(label)}</span>`;\n\n/** `{{tool:KEY}}` / `{{subagent:ID}}` → the mention item that produced them. */\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta | undefined;\n\t\tif (meta?.kind === 'tool' && meta.functionKey) {\n\t\t\tbyToken.set(`tool:${meta.functionKey}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the reference tokens we render as chips. Other `{{var}}` tokens fall\n// through untouched (left as literal text for the variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{(tool:[^}]+|subagent:[^}]+)\\}\\}/g;\n\n/** Escape plain text, swapping recognised reference tokens for mention spans. */\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray | null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst kind = (item.meta as unknown as MentionKindMeta).kind;\n\t\t\tout += mentionSpanHtml(String(item.id), item.label, kind);\n\t\t} else {\n\t\t\t// Tool/sub-agent no longer in the available list → keep the raw token.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/**\n * Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n */\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/** Map of mention node id → token, derived from the available tools. */\nconst resolveMentionToken = (\n\tid: string,\n\ttoolKeyById: Record<string, string>,\n): string => {\n\tconst functionKey = toolKeyById[id];\n\tif (functionKey) {\n\t\treturn `{{tool:${functionKey}}}`;\n\t}\n\treturn `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (\n\tnode: ProseMirrorNode,\n\ttoolKeyById: Record<string, string>,\n): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\treturn id == null ? '' : resolveMentionToken(String(id), toolKeyById);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolKeyById))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/**\n * Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:ID}}` /\n * `{{tool:KEY}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> | null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolKeyById = tools.reduce<Record<string, string>>((acc, t) => {\n\t\tacc[t.tool_id] = t.function_key;\n\t\treturn acc;\n\t}, {});\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolKeyById).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["TOOL_SOURCE_LABELS","toolSourceLabel","source","fallback","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","appLabel","t","s","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolKeyById","functionKey","nodeToText","node","inner","child","editorDocToInstructions","doc","acc"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { AgentListingProps } from './AgentListing.model';
+/**
+ * Full body of the "AI Agents" listing screen (header + filters + table).
+ * Presentational and fully controlled — the consumer owns data, search, sort,
+ * pagination and routing. Render it inside your app shell (next to the sidebar).
+ *
+ * @example
+ * <AgentListing
+ *   agents={rows}
+ *   searchValue={search}
+ *   onSearchChange={setSearch}
+ *   onNewAgent={() => router.push('/agents/new')}
+ *   onRunAgent={runAgent}
+ *   onEditAgent={(a) => router.push(`/agents/${a.id}`)}
+ * />
+ */
+export declare const AgentListing: React.FC<AgentListingProps>;

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

@@ -0,0 +1,141 @@
+import { jsxs as N, jsx as i, Fragment as H } from "react/jsx-runtime";
+import { useCallback as n } from "react";
+import { TablePagination as V } from "../TablePagination/TablePagination.js";
+import { ZeroState as Z } from "../zeroState/ZeroState.js";
+import { Page as $, Body as q, EmptyHolder as D } from "./AgentListing.styled.js";
+import { AgentListingFilters as G } from "./AgentListingFilters.js";
+import { AgentListingHeader as J } from "./AgentListingHeader.js";
+import { AgentTable as K } from "./AgentTable.js";
+const M = ({
+  config: y,
+  onSearchChange: m,
+  onFilterChange: a,
+  onSortChange: r,
+  onNewAgent: h,
+  onBrowseTemplates: s,
+  onRunAgent: p,
+  onEditAgent: u,
+  onRowClick: g,
+  ...C
+}) => {
+  const {
+    agents: A,
+    isLoading: l,
+    searchValue: P,
+    searchPlaceholder: w = "Search",
+    filterOptions: z,
+    filterPlaceholder: L = "Filters",
+    sortOptions: T,
+    selectedSort: R,
+    title: v = "AI Agents",
+    pagination: o,
+    emptyState: d,
+    debugLog: b
+  } = y, x = !l && A.length === 0, t = n(
+    (e, ...c) => {
+      b && console.log(`[AgentListing] ${e}`, ...c);
+    },
+    [b]
+  ), B = n(
+    (e) => {
+      t("onSearchChange", e), m(e);
+    },
+    [t, m]
+  ), E = n(
+    (e) => {
+      t("onFilterChange", e), a?.(e);
+    },
+    [t, a]
+  ), F = n(
+    (e) => {
+      t("onSortChange", e), r?.(e);
+    },
+    [t, r]
+  ), f = n(() => {
+    t("onNewAgent"), h();
+  }, [t, h]), O = n(() => {
+    t("onBrowseTemplates"), s?.();
+  }, [t, s]), k = n(
+    (e) => {
+      t("onRunAgent", e.id), p(e);
+    },
+    [t, p]
+  ), I = n(
+    (e) => {
+      t("onEditAgent", e.id), u(e);
+    },
+    [t, u]
+  ), j = n(
+    (e) => {
+      t("onRowClick", e.id), g?.(e);
+    },
+    [t, g]
+  );
+  return /* @__PURE__ */ N($, { "data-test": C["data-test"] ?? "agent-listing", children: [
+    /* @__PURE__ */ i(
+      J,
+      {
+        title: v,
+        onNewAgent: f,
+        onBrowseTemplates: s ? O : void 0
+      }
+    ),
+    /* @__PURE__ */ i(
+      G,
+      {
+        searchValue: P,
+        onSearchChange: B,
+        searchPlaceholder: w,
+        filterOptions: z,
+        onFilterChange: a ? E : void 0,
+        filterPlaceholder: L,
+        sortOptions: T,
+        selectedSort: R,
+        onSortChange: r ? F : void 0
+      }
+    ),
+    /* @__PURE__ */ i(q, { children: l || x ? /* @__PURE__ */ i(D, { children: /* @__PURE__ */ i(
+      Z,
+      {
+        isLoading: l,
+        title: d?.title ?? "No agents yet",
+        subTitle: d?.subTitle ?? "Create your first AI agent to start automating conversations.",
+        actionButton: d?.actionButton ?? {
+          buttonText: "New AI agent",
+          buttonType: "primary",
+          size: "small",
+          onClick: f
+        }
+      }
+    ) }) : /* @__PURE__ */ N(H, { children: [
+      /* @__PURE__ */ i(
+        K,
+        {
+          agents: A,
+          onRunAgent: k,
+          onEditAgent: I,
+          onRowClick: g ? j : void 0
+        }
+      ),
+      o && o.totalRows > 0 && /* @__PURE__ */ i(
+        V,
+        {
+          pageNumber: o.pageNumber,
+          pageSize: o.pageSize,
+          totalRows: o.totalRows,
+          hidePageSizeOptions: o.hidePageSizeOptions,
+          updatePageNumber: o.onPageChange,
+          updatePageSize: (e) => {
+            const c = Array.isArray(e) ? e[0] : e, S = Number(c?.value);
+            Number.isNaN(S) || o.onPageSizeChange(S);
+          }
+        }
+      )
+    ] }) })
+  ] });
+};
+M.displayName = "AgentListing";
+export {
+  M 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 } 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';\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\tonFilterChange,\n\tonSortChange,\n\tonNewAgent,\n\tonBrowseTemplates,\n\tonRunAgent,\n\tonEditAgent,\n\tonRowClick,\n\t...rest\n}) => {\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 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\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\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\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\t\t</Page>\n\t);\n};\n\nAgentListing.displayName = 'AgentListing';\n"],"names":["AgentListing","config","onSearchChange","onFilterChange","onSortChange","onNewAgent","onBrowseTemplates","onRunAgent","onEditAgent","onRowClick","rest","agents","isLoading","searchValue","searchPlaceholder","filterOptions","filterPlaceholder","sortOptions","selectedSort","title","pagination","emptyState","debugLog","showEmpty","logAction","useCallback","action","args","handleSearchChange","v","handleFilterChange","selected","handleSortChange","handleNewAgent","handleBrowseTemplates","handleRunAgent","agent","handleEditAgent","handleRowClick","Page","jsx","AgentListingHeader","AgentListingFilters","Body","EmptyHolder","ZeroState","jsxs","Fragment","AgentTable","TablePagination","opt","single","value"],"mappings":"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"}

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

@@ -0,0 +1,69 @@
+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;
+    onSearchChange: (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;
+    /** 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,16 @@
+import { default as React } from 'react';
+import { DropdownOption } from '../dropdown/type';
+import { AgentListSortOption } from './AgentListing.model';
+interface AgentListingFiltersProps {
+    searchValue: string;
+    onSearchChange: (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 {};