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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentListingHeader.js","sources":["../../../../src/components/agent-listing/AgentListingHeader.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/plus.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { HeaderActions, HeaderBar } from './AgentListing.styled';\n\ninterface AgentListingHeaderProps {\n\ttitle: string;\n\tonNewAgent: () => void;\n\tonBrowseTemplates?: () => void;\n}\n\nexport const AgentListingHeader: React.FC<AgentListingHeaderProps> = ({\n\ttitle,\n\tonNewAgent,\n\tonBrowseTemplates,\n}) => (\n\t<HeaderBar>\n\t\t<TitleMedium color={COLORS.content.primary}>{title}</TitleMedium>\n\t\t<HeaderActions>\n\t\t\t{onBrowseTemplates && (\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-browse-templates\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Browse templates\"\n\t\t\t\t\tonClick={onBrowseTemplates}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<Button\n\t\t\t\tdata-test=\"agent-new\"\n\t\t\t\tbuttonType=\"primary\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tbuttonText=\"New AI agent\"\n\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\tonClick={onNewAgent}\n\t\t\t/>\n\t\t</HeaderActions>\n\t</HeaderBar>\n);\n"],"names":["AgentListingHeader","title","onNewAgent","onBrowseTemplates","HeaderBar","jsx","TitleMedium","COLORS","HeaderActions","Button","PlusIcon"],"mappings":";;;;;;AAaO,MAAMA,IAAwD,CAAC;AAAA,EACrE,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AACD,wBACEC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAY,OAAOC,EAAO,QAAQ,SAAU,UAAAN,GAAM;AAAA,oBAClDO,GAAA,EACC,UAAA;AAAA,IAAAL,KACA,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,YAAW;AAAA,QACX,MAAK;AAAA,QACL,YAAW;AAAA,QACX,SAASN;AAAA,MAAA;AAAA,IAAA;AAAA,IAGX,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,YAAW;AAAA,QACX,MAAK;AAAA,QACL,YAAW;AAAA,QACX,aAAaC;AAAAA,QACb,SAASR;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,EAAA,CACD;AAAA,EAAA,CACD;"}

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { AgentListItem } from './AgentListing.model';
+interface AgentTableProps {
+    agents: AgentListItem[];
+    onRunAgent: (agent: AgentListItem) => void;
+    onEditAgent: (agent: AgentListItem) => void;
+    onDeleteAgent?: (agent: AgentListItem) => void;
+    onRowClick?: (agent: AgentListItem) => void;
+}
+export declare const AgentTable: React.FC<AgentTableProps>;
+export {};

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

@@ -0,0 +1,35 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { TitleSmall as h } from "../TypographyStyle.js";
+import { COLORS as m } from "../../constants/Theme.js";
+import { TableCard as g, TableScroll as p, HeaderGridRow as s, HeaderCell as e } from "./AgentListing.styled.js";
+import { AgentTableRow as T } from "./AgentTableRow.js";
+const i = ({ children: l }) => /* @__PURE__ */ r(h, { color: m.content.primary, children: l }), C = ({
+  agents: l,
+  onRunAgent: o,
+  onEditAgent: d,
+  onDeleteAgent: t,
+  onRowClick: a
+}) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ c(p, { children: [
+  /* @__PURE__ */ c(s, { children: [
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(i, { children: "Agent name" }) }),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(i, { children: "Trigger" }) }),
+    /* @__PURE__ */ r(e, { align: "right", children: /* @__PURE__ */ r(i, { children: "Trigger count" }) }),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(i, { children: "Status" }) }),
+    /* @__PURE__ */ r(e, { align: "center", children: /* @__PURE__ */ r(i, { children: "Actions" }) })
+  ] }),
+  l.map((n) => /* @__PURE__ */ r(
+    T,
+    {
+      agent: n,
+      onRunAgent: o,
+      onEditAgent: d,
+      onDeleteAgent: t,
+      onRowClick: a
+    },
+    n.id
+  ))
+] }) });
+export {
+  C as AgentTable
+};
+//# sourceMappingURL=AgentTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTable.js","sources":["../../../../src/components/agent-listing/AgentTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem } from './AgentListing.model';\nimport {\n\tHeaderCell,\n\tHeaderGridRow,\n\tTableCard,\n\tTableScroll,\n} from './AgentListing.styled';\nimport { AgentTableRow } from './AgentTableRow';\n\ninterface AgentTableProps {\n\tagents: AgentListItem[];\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nconst HeaderLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n\t<TitleSmall color={COLORS.content.primary}>{children}</TitleSmall>\n);\n\nexport const AgentTable: React.FC<AgentTableProps> = ({\n\tagents,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n}) => (\n\t<TableCard>\n\t\t<TableScroll>\n\t\t\t<HeaderGridRow>\n\t\t\t\t<HeaderCell>\n\t\t\t\t\t<HeaderLabel>Agent name</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell>\n\t\t\t\t\t<HeaderLabel>Trigger</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell align=\"right\">\n\t\t\t\t\t<HeaderLabel>Trigger count</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell>\n\t\t\t\t\t<HeaderLabel>Status</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell align=\"center\">\n\t\t\t\t\t<HeaderLabel>Actions</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t</HeaderGridRow>\n\n\t\t\t{agents.map((agent) => (\n\t\t\t\t<AgentTableRow\n\t\t\t\t\tkey={agent.id}\n\t\t\t\t\tagent={agent}\n\t\t\t\t\tonRunAgent={onRunAgent}\n\t\t\t\t\tonEditAgent={onEditAgent}\n\t\t\t\t\tonDeleteAgent={onDeleteAgent}\n\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</TableScroll>\n\t</TableCard>\n);\n"],"names":["HeaderLabel","children","jsx","TitleSmall","COLORS","AgentTable","agents","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","TableCard","jsxs","TableScroll","HeaderGridRow","HeaderCell","agent","AgentTableRow"],"mappings":";;;;;AAoBA,MAAMA,IAAuD,CAAC,EAAE,UAAAC,EAAA,MAC/D,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAH,EAAA,CAAS,GAGzCI,IAAwC,CAAC;AAAA,EACrD,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AACD,MACC,gBAAAR,EAACS,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAD,EAACE,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAZ,EAACa,GAAA,EACA,UAAA,gBAAAb,EAACF,GAAA,EAAY,UAAA,aAAA,CAAU,GACxB;AAAA,IACA,gBAAAE,EAACa,GAAA,EACA,UAAA,gBAAAb,EAACF,GAAA,EAAY,qBAAO,GACrB;AAAA,sBACCe,GAAA,EAAW,OAAM,SACjB,UAAA,gBAAAb,EAACF,GAAA,EAAY,2BAAa,EAAA,CAC3B;AAAA,IACA,gBAAAE,EAACa,GAAA,EACA,UAAA,gBAAAb,EAACF,GAAA,EAAY,oBAAM,GACpB;AAAA,sBACCe,GAAA,EAAW,OAAM,UACjB,UAAA,gBAAAb,EAACF,GAAA,EAAY,qBAAO,EAAA,CACrB;AAAA,EAAA,GACD;AAAA,EAECM,EAAO,IAAI,CAACU,MACZ,gBAAAd;AAAA,IAACe;AAAA,IAAA;AAAA,MAEA,OAAAD;AAAA,MACA,YAAAT;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,IALKM,EAAM;AAAA,EAAA,CAOZ;AAAA,EAAA,CACF,EAAA,CACD;"}

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { AgentListItem } from './AgentListing.model';
+interface AgentTableRowProps {
+    agent: AgentListItem;
+    onRunAgent: (agent: AgentListItem) => void;
+    onEditAgent: (agent: AgentListItem) => void;
+    /** When set, render a delete action (the listing handles confirmation). */
+    onDeleteAgent?: (agent: AgentListItem) => void;
+    onRowClick?: (agent: AgentListItem) => void;
+}
+export declare const AgentTableRow: React.FC<AgentTableRowProps>;
+export {};

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

@@ -0,0 +1,108 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import f from "../../assets/icons/delete.svg.js";
+import T from "../../assets/icons/edit.svg.js";
+import v from "../../assets/icons/playOutline.svg.js";
+import { TitleSmall as w, BodyCaption as D, BodyPrimary as p } from "../TypographyStyle.js";
+import { COLORS as t } from "../../constants/Theme.js";
+import { ActionButton as a, BodyGridRow as C, Cell as o, ActionGroup as L } from "./AgentListing.styled.js";
+import { Tag as x } from "../tag/Tag.js";
+import { Tooltip as O } from "../tooltips/Tooltip.js";
+const P = (e) => {
+  switch (e.kind) {
+    case "topic":
+      return `Topic: ${e.label ?? ""}`;
+    case "phrases":
+      return `Phrases: ${(e.items ?? []).join(", ")}`;
+    default:
+      return e.label ?? "";
+  }
+}, G = ({
+  agent: e,
+  onRunAgent: h,
+  onEditAgent: m,
+  onDeleteAgent: c,
+  onRowClick: l
+}) => {
+  const d = e.status === "live", u = (i) => {
+    i.stopPropagation(), !e.isRunDisabled && h(e);
+  }, b = (i) => {
+    i.stopPropagation(), m(e);
+  }, y = (i) => {
+    i.stopPropagation(), c?.(e);
+  }, s = /* @__PURE__ */ r(
+    a,
+    {
+      "data-test": `agent-row-run-${e.id}`,
+      disabled: e.isRunDisabled,
+      onClick: u,
+      "aria-label": "Run agent",
+      children: /* @__PURE__ */ r(
+        v,
+        {
+          width: 20,
+          height: 20,
+          color: t.content.secondary
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ n(
+    C,
+    {
+      "data-test": `agent-row-${e.id}`,
+      clickable: !!l,
+      onClick: l ? () => l(e) : void 0,
+      children: [
+        /* @__PURE__ */ n(o, { children: [
+          /* @__PURE__ */ r(w, { numberOfLines: 1, color: t.content.primary, children: e.name }),
+          /* @__PURE__ */ n(D, { numberOfLines: 1, color: t.content.secondary, children: [
+            "Created: ",
+            e.createdAtLabel
+          ] })
+        ] }),
+        /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(p, { numberOfLines: 2, color: t.content.primary, children: P(e.trigger) }) }),
+        /* @__PURE__ */ r(o, { align: "right", children: /* @__PURE__ */ r(p, { color: t.content.primary, children: e.triggerCount }) }),
+        /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(
+          x,
+          {
+            tagText: d ? "Live" : "Draft",
+            type: d ? "positive" : "neutral",
+            variant: "regular"
+          }
+        ) }),
+        /* @__PURE__ */ r(o, { align: "center", children: /* @__PURE__ */ n(L, { children: [
+          e.isRunDisabled && e.runDisabledTooltip ? /* @__PURE__ */ r(O, { body: e.runDisabledTooltip, placement: "top", children: /* @__PURE__ */ r("span", { style: { display: "flex" }, children: s }) }) : s,
+          /* @__PURE__ */ r(
+            a,
+            {
+              "data-test": `agent-row-edit-${e.id}`,
+              onClick: b,
+              "aria-label": "Edit agent",
+              children: /* @__PURE__ */ r(T, { width: 20, height: 20, color: t.content.secondary })
+            }
+          ),
+          c && /* @__PURE__ */ r(
+            a,
+            {
+              "data-test": `agent-row-delete-${e.id}`,
+              onClick: y,
+              "aria-label": "Delete agent",
+              children: /* @__PURE__ */ r(
+                f,
+                {
+                  width: 20,
+                  height: 20,
+                  color: t.content.secondary
+                }
+              )
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  G as AgentTableRow
+};
+//# sourceMappingURL=AgentTableRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTableRow.js","sources":["../../../../src/components/agent-listing/AgentTableRow.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlayOutlineIcon from '@src/assets/icons/playOutline.svg';\nimport React from 'react';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem, AgentTriggerSummary } from './AgentListing.model';\nimport {\n\tActionButton,\n\tActionGroup,\n\tBodyGridRow,\n\tCell,\n} from './AgentListing.styled';\n\nconst triggerToText = (trigger: AgentTriggerSummary): string => {\n\tswitch (trigger.kind) {\n\t\tcase 'topic':\n\t\t\treturn `Topic: ${trigger.label ?? ''}`;\n\t\tcase 'phrases':\n\t\t\treturn `Phrases: ${(trigger.items ?? []).join(', ')}`;\n\t\tcase 'custom':\n\t\tdefault:\n\t\t\treturn trigger.label ?? '';\n\t}\n};\n\ninterface AgentTableRowProps {\n\tagent: AgentListItem;\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\t/** When set, render a delete action (the listing handles confirmation). */\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nexport const AgentTableRow: React.FC<AgentTableRowProps> = ({\n\tagent,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n}) => {\n\tconst isLive = agent.status === 'live';\n\n\tconst handleRun = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (agent.isRunDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tonRunAgent(agent);\n\t};\n\n\tconst handleEdit = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tonEditAgent(agent);\n\t};\n\n\tconst handleDelete = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tonDeleteAgent?.(agent);\n\t};\n\n\tconst playButton = (\n\t\t<ActionButton\n\t\t\tdata-test={`agent-row-run-${agent.id}`}\n\t\t\tdisabled={agent.isRunDisabled}\n\t\t\tonClick={handleRun}\n\t\t\taria-label=\"Run agent\"\n\t\t>\n\t\t\t<PlayOutlineIcon\n\t\t\t\twidth={20}\n\t\t\t\theight={20}\n\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t/>\n\t\t</ActionButton>\n\t);\n\n\treturn (\n\t\t<BodyGridRow\n\t\t\tdata-test={`agent-row-${agent.id}`}\n\t\t\tclickable={!!onRowClick}\n\t\t\tonClick={onRowClick ? () => onRowClick(agent) : undefined}\n\t\t>\n\t\t\t<Cell>\n\t\t\t\t<TitleSmall numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t{agent.name}\n\t\t\t\t</TitleSmall>\n\t\t\t\t<BodyCaption numberOfLines={1} color={COLORS.content.secondary}>\n\t\t\t\t\tCreated: {agent.createdAtLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<BodyPrimary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t{triggerToText(agent.trigger)}\n\t\t\t\t</BodyPrimary>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"right\">\n\t\t\t\t<BodyPrimary color={COLORS.content.primary}>\n\t\t\t\t\t{agent.triggerCount}\n\t\t\t\t</BodyPrimary>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"center\">\n\t\t\t\t<ActionGroup>\n\t\t\t\t\t{agent.isRunDisabled && agent.runDisabledTooltip ? (\n\t\t\t\t\t\t<Tooltip body={agent.runDisabledTooltip} placement=\"top\">\n\t\t\t\t\t\t\t<span style={{ display: 'flex' }}>{playButton}</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplayButton\n\t\t\t\t\t)}\n\t\t\t\t\t<ActionButton\n\t\t\t\t\t\tdata-test={`agent-row-edit-${agent.id}`}\n\t\t\t\t\t\tonClick={handleEdit}\n\t\t\t\t\t\taria-label=\"Edit agent\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<EditIcon width={20} height={20} color={COLORS.content.secondary} />\n\t\t\t\t\t</ActionButton>\n\t\t\t\t\t{onDeleteAgent && (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tdata-test={`agent-row-delete-${agent.id}`}\n\t\t\t\t\t\t\tonClick={handleDelete}\n\t\t\t\t\t\t\taria-label=\"Delete agent\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ActionButton>\n\t\t\t\t\t)}\n\t\t\t\t</ActionGroup>\n\t\t\t</Cell>\n\t\t</BodyGridRow>\n\t);\n};\n"],"names":["triggerToText","trigger","AgentTableRow","agent","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","isLive","handleRun","e","handleEdit","handleDelete","playButton","jsx","ActionButton","PlayOutlineIcon","COLORS","jsxs","BodyGridRow","Cell","TitleSmall","BodyCaption","BodyPrimary","Tag","ActionGroup","Tooltip","EditIcon","DeleteIcon"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface DeleteAgentModalProps {
+    /** Name of the agent being deleted (for the body copy). */
+    agentName: string;
+    /** Dismiss without deleting (X / outside click / Cancel). */
+    onClose: () => void;
+    /** Confirm deletion. */
+    onConfirm: () => void;
+    isDeleting?: boolean;
+}
+/**
+ * "Delete agent?" confirmation for the listing. Deleting an entry agent also
+ * removes its sub-agents (the backend cascades), so the copy warns about it.
+ */
+export declare const DeleteAgentModal: React.FC<DeleteAgentModalProps>;
+export {};

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

@@ -0,0 +1,69 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { TitleRegular as r, BodySecondary as c } from "../TypographyStyle.js";
+import { COLORS as i } from "../../constants/Theme.js";
+import { StyledModal as s } from "../modals/styledModal.js";
+import { Button as a } from "../button/Button.js";
+const y = ({
+  agentName: o,
+  onClose: n,
+  onConfirm: d,
+  isDeleting: l
+}) => /* @__PURE__ */ e(
+  s,
+  {
+    "data-test": "agent-delete-modal",
+    open: !0,
+    onClose: n,
+    width: "530px",
+    children: /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 12,
+          padding: 24,
+          alignItems: "flex-start",
+          textAlign: "left"
+        },
+        children: [
+          /* @__PURE__ */ t(r, { color: i.content.primary, children: [
+            "Delete “",
+            o,
+            "”?"
+          ] }),
+          /* @__PURE__ */ e(c, { color: i.content.secondary, children: "This permanently deletes the agent and its sub-agents. This can’t be undone." }),
+          /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, width: "100%", marginTop: 4 }, children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                "data-test": "agent-delete-cancel",
+                buttonType: "secondary",
+                size: "medium",
+                matchParentWidth: !0,
+                buttonText: "Cancel",
+                onClick: n
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                "data-test": "agent-delete-confirm",
+                buttonType: "destructive",
+                size: "medium",
+                matchParentWidth: !0,
+                buttonText: "Delete",
+                isLoading: l,
+                onClick: d
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  }
+);
+export {
+  y as DeleteAgentModal
+};
+//# sourceMappingURL=DeleteAgentModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteAgentModal.js","sources":["../../../../src/components/agent-listing/DeleteAgentModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ninterface DeleteAgentModalProps {\n\t/** Name of the agent being deleted (for the body copy). */\n\tagentName: string;\n\t/** Dismiss without deleting (X / outside click / Cancel). */\n\tonClose: () => void;\n\t/** Confirm deletion. */\n\tonConfirm: () => void;\n\tisDeleting?: boolean;\n}\n\n/**\n * \"Delete agent?\" confirmation for the listing. Deleting an entry agent also\n * removes its sub-agents (the backend cascades), so the copy warns about it.\n */\nexport const DeleteAgentModal: React.FC<DeleteAgentModalProps> = ({\n\tagentName,\n\tonClose,\n\tonConfirm,\n\tisDeleting,\n}) => (\n\t<StyledModal\n\t\tdata-test=\"agent-delete-modal\"\n\t\topen\n\t\tonClose={onClose}\n\t\twidth=\"530px\"\n\t>\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\tgap: 12,\n\t\t\t\tpadding: 24,\n\t\t\t\talignItems: 'flex-start',\n\t\t\t\ttextAlign: 'left',\n\t\t\t}}\n\t\t>\n\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\tDelete “{agentName}”?\n\t\t\t</TitleRegular>\n\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\tThis permanently deletes the agent and its sub-agents. This can’t be\n\t\t\t\tundone.\n\t\t\t</BodySecondary>\n\n\t\t\t<div style={{ display: 'flex', gap: 12, width: '100%', marginTop: 4 }}>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-delete-cancel\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tmatchParentWidth\n\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\tonClick={onClose}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-delete-confirm\"\n\t\t\t\t\tbuttonType=\"destructive\"\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tmatchParentWidth\n\t\t\t\t\tbuttonText=\"Delete\"\n\t\t\t\t\tisLoading={isDeleting}\n\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</StyledModal>\n);\n"],"names":["DeleteAgentModal","agentName","onClose","onConfirm","isDeleting","jsx","StyledModal","jsxs","TitleRegular","COLORS","BodySecondary","Button"],"mappings":";;;;;AAoBO,MAAMA,IAAoD,CAAC;AAAA,EACjE,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MACC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,aAAU;AAAA,IACV,MAAI;AAAA,IACJ,SAAAJ;AAAA,IACA,OAAM;AAAA,IAEN,UAAA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,QAGZ,UAAA;AAAA,UAAA,gBAAAA,EAACC,GAAA,EAAa,OAAOC,EAAO,QAAQ,SAAS,UAAA;AAAA,YAAA;AAAA,YACnCR;AAAA,YAAU;AAAA,UAAA,GACpB;AAAA,4BACCS,GAAA,EAAc,OAAOD,EAAO,QAAQ,WAAW,UAAA,gFAGhD;AAAA,UAEA,gBAAAF,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,IAAI,OAAO,QAAQ,WAAW,EAAA,GACjE,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAACM;AAAA,cAAA;AAAA,gBACA,aAAU;AAAA,gBACV,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,kBAAgB;AAAA,gBAChB,YAAW;AAAA,gBACX,SAAST;AAAA,cAAA;AAAA,YAAA;AAAA,YAEV,gBAAAG;AAAA,cAACM;AAAA,cAAA;AAAA,gBACA,aAAU;AAAA,gBACV,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,kBAAgB;AAAA,gBAChB,YAAW;AAAA,gBACX,WAAWP;AAAA,gBACX,SAASD;AAAA,cAAA;AAAA,YAAA;AAAA,UACV,EAAA,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACD;AACD;"}

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

@@ -0,0 +1,2 @@
+export { AgentListing } from './AgentListing';
+export type { AgentListingProps, AgentListingConfig, AgentListItem, AgentTriggerSummary, AgentListSortOption, AgentListingPagination, AgentStatus as AgentListingStatus, } from './AgentListing.model';

package/dist/esm/components/avatar/Avatar.d.ts

@@ -1,16 +1,15 @@
 import { default as React } from 'react';
 import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from './AvatarHelper';
 export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
-    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
+    INBOX: number;
     LARGE: number;
 };
 export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
     LIGHT: string;
     WHITE: string;
     DARK: string;
-    BRAND: string;
 };
 export type AvatarProps = {
     type: AVATAR_TYPES;

package/dist/esm/components/avatar/Avatar.js

@@ -1,60 +1,82 @@
 import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import { useState as R } from "react";
-import { TitleMedium as k, TitleSmall as A, SubHeading as w, BodyTiny as O } from "../TypographyStyle.js";
+import { useState as k } from "react";
+import { AvatarStyle as v } from "./Avatar.styled.js";
+import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as h, AVATAR_SIZE_MAP as o } from "./AvatarHelper.js";
+import { BodyTiny as R, TitleSmall as w, TitleMedium as O } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
-import x from "../../assets/icons/bik_livechat.svg.js";
+import A from "../../assets/icons/bik_livechat.svg.js";
 import u from "../../assets/icons/email-channel.svg.js";
 import d from "../../assets/icons/facebook_channel.svg.js";
 import z from "../../assets/icons/gmail.svg.js";
-import C from "../../assets/icons/instagram-channel.svg.js";
-import L from "../../assets/icons/task.svg.js";
-import U from "../../assets/icons/whatsapp_color.svg.js";
-import { AvatarStyle as B } from "./Avatar.styled.js";
-import { SIZE as n, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as l } from "./AvatarHelper.js";
-const a = {
-  [n.EXTRA_SMALL]: 10,
-  [n.SMALL]: 16,
-  [n.MEDIUM]: 20,
-  [n.LARGE]: 32
-}, b = {
-  [s.LIGHT]: i.content.secondary,
-  [s.WHITE]: i.content.secondary,
-  [s.DARK]: i.surface.standard,
-  [s.BRAND]: i.background.inverseLight
+import x from "../../assets/icons/instagram-channel.svg.js";
+import C from "../../assets/icons/task.svg.js";
+import B from "../../assets/icons/whatsapp_color.svg.js";
+const n = {
+  [a.SMALL]: 16,
+  [a.MEDIUM]: 20,
+  [a.INBOX]: 24,
+  [a.LARGE]: 32
+}, c = {
+  [h.LIGHT]: i.content.secondary,
+  [h.WHITE]: i.content.secondary,
+  [h.DARK]: i.surface.standard
 };
-var P = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(P || {});
-const J = (t) => {
-  const [h, I] = R(!1), m = () => {
-    const o = (t.name || "").split(".").join(" ").split(" ").map((v) => v.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
-    return t.size === n.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === n.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : t.size === n.SMALL ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : /* @__PURE__ */ e(O, { style: { color: c }, children: o });
-  }, f = () => t.useNameFallback && (!t.photoUrl || h) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !h ? /* @__PURE__ */ e(
+var U = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(U || {});
+const Y = (t) => {
+  const [l, b] = k(!1), m = () => {
+    const s = (t.name || "").split(".").join(" ").split(" ").map((T) => T.charAt(0).toUpperCase()).slice(0, 2).join("");
+    if (t.size === a.SMALL)
+      return /* @__PURE__ */ e(
+        R,
+        {
+          style: { color: c[t.background] },
+          children: s
+        }
+      );
+    if (t.size === a.MEDIUM || t.size === a.INBOX)
+      return /* @__PURE__ */ e(
+        w,
+        {
+          style: { color: c[t.background] },
+          children: s
+        }
+      );
+    if (t.size === a.LARGE)
+      return /* @__PURE__ */ e(
+        O,
+        {
+          style: { color: c[t.background] },
+          children: s
+        }
+      );
+  }, I = () => t.useNameFallback && (!t.photoUrl || l) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !l ? /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: l[t.size],
-      height: l[t.size],
+      width: o[t.size],
+      height: o[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl,
       onError: () => {
-        I(!0);
+        b(!0);
       }
     }
   ) : /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: l[t.size],
-      height: l[t.size],
+      width: o[t.size],
+      height: o[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl
     }
-  ), y = () => {
+  ), f = () => {
     switch (t.channelName) {
       case "email":
         return /* @__PURE__ */ e(u, { width: 11, height: 11 });
@@ -67,17 +89,17 @@ const J = (t) => {
       case "messenger":
         return /* @__PURE__ */ e(d, { width: 11, height: 11 });
       case "instagram":
-        return /* @__PURE__ */ e(C, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
       case "whatsapp":
-        return /* @__PURE__ */ e(U, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(B, { width: 11, height: 11 });
       case "gmail":
         return /* @__PURE__ */ e(z, { width: 11, height: 11 });
       case "tasks":
-        return /* @__PURE__ */ e(L, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(C, { width: 11, height: 11 });
       case "livechat":
-        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(A, { width: 11, height: 11 });
     }
-  }, T = () => t.status ? /* @__PURE__ */ e(
+  }, y = () => t.status ? /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -96,20 +118,20 @@ const J = (t) => {
       },
       children: [
         /* @__PURE__ */ g(
-          B,
+          v,
           {
-            type: t.type === r.IMAGE && (h || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
+            type: t.type === r.IMAGE && (l || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
             size: t.size,
             background: t.background,
             children: [
-              t.type === r.IMAGE && f(),
+              t.type === r.IMAGE && I(),
               t.type === r.INITIALS && /* @__PURE__ */ e("div", { children: m() }),
               t.type === r.ICON && t.icon && /* @__PURE__ */ e(
                 t.icon,
                 {
-                  width: a[t.size],
-                  height: a[t.size],
-                  color: b[t.background]
+                  width: n[t.size],
+                  height: n[t.size],
+                  color: c[t.background]
                 }
               )
             ]
@@ -120,8 +142,8 @@ const J = (t) => {
           {
             style: {
               position: "absolute",
-              left: a[t.size] + "px",
-              top: a[t.size] + "px",
+              left: n[t.size] + "px",
+              top: n[t.size] + "px",
               width: 14,
               height: 14,
               borderRadius: t?.borderRadius || "50%",
@@ -130,7 +152,7 @@ const J = (t) => {
               backgroundColor: t.inboxSettings.isSelected ? t.inboxSettings.isComments ? i.content.primary : i.background.brandLight : t.inboxSettings.isComments ? i.content.primary : i.surface.standard,
               alignItems: "center"
             },
-            children: y()
+            children: f()
           }
         ),
         t.status && /* @__PURE__ */ e(
@@ -138,8 +160,8 @@ const J = (t) => {
           {
             style: {
               position: "absolute",
-              left: a[t.size] + "px",
-              top: a[t.size] + "px",
+              left: n[t.size] + "px",
+              top: n[t.size] + "px",
               width: 11,
               height: 11,
               borderRadius: "50%",
@@ -148,7 +170,7 @@ const J = (t) => {
               backgroundColor: i.surface.standard,
               alignItems: "center"
             },
-            children: T()
+            children: y()
           }
         )
       ]
@@ -156,9 +178,9 @@ const J = (t) => {
   );
 };
 export {
-  a as AVATAR_SIZE_VS_ICON_SIZE_MAP,
-  J as Avatar,
-  b as BACKGROUND_VS_TEXT_COLOR_MAP,
-  P as MESSAGE_CHANNELS
+  n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
+  Y as Avatar,
+  c as BACKGROUND_VS_TEXT_COLOR_MAP,
+  U as MESSAGE_CHANNELS
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/esm/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM || props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}

package/dist/esm/components/avatar/Avatar.styled.js

@@ -1,14 +1,14 @@
-import o from "styled-components";
-import { AVATAR_SIZE_MAP as d, AVATAR_TYPES as t, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
-import { COLORS as a } from "../../constants/Theme.js";
-const A = o.div`
-	width: ${(r) => d[r.size] + "px"};
-	height: ${(r) => d[r.size] + "px"};
+import a from "styled-components";
+import { AVATAR_SIZE_MAP as t, AVATAR_TYPES as d, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
+import { COLORS as o } from "../../constants/Theme.js";
+const A = a.div`
+	width: ${(r) => t[r.size] + "px"};
+	height: ${(r) => t[r.size] + "px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${(r) => r.type === t.IMAGE ? "null" : r.background === e.LIGHT ? a.background.base : r.background === e.WHITE ? a.surface.standard : r.background === e.BRAND ? a.background.brandLight : a.background.inverse};
-	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + a.stroke.primary : 0};
+	background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background === e.LIGHT ? o.background.base : r.background === e.WHITE ? o.surface.standard : o.background.inverse};
+	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + o.stroke.primary : 0};
 	border-radius: 50%;
 `;
 export {