@box/box-ai-agent-selector 0.12.3 → 0.13.1

package/esm/index.js

@@ -1,12 +1,16 @@
-import { BoxAiAgentSelectorWithApiContainer as t } from "./lib/box-ai-agent-selector-with-api-container.js";
-import { ACTIONS as A } from "./lib/contexts/actions.js";
-import { AgentsProvider as i, useAgents as n, useAgentsDispatch as p } from "./lib/contexts/context.js";
-import { R as g } from "../chunks/types.js";
+import { BoxAiAgentSelector as t } from "./lib/box-ai-agent-selector.js";
+import { BoxAiAgentSelectorWithApi as A } from "./lib/box-ai-agent-selector-with-api.js";
+import { BoxAiAgentSelectorWithApiContainer as p } from "./lib/box-ai-agent-selector-with-api-container.js";
+import { ACTIONS as n } from "./lib/contexts/actions.js";
+import { AgentsProvider as f, useAgents as g, useAgentsDispatch as m } from "./lib/contexts/context.js";
+import { R as c } from "../chunks/types.js";
 export {
-  A as ACTIONS,
-  i as AgentsProvider,
+  n as ACTIONS,
+  f as AgentsProvider,
   t as BoxAiAgentSelector,
-  g as REQUEST_STATE,
-  n as useAgents,
-  p as useAgentsDispatch
+  A as BoxAiAgentSelectorWithApi,
+  p as BoxAiAgentSelectorWithApiContainer,
+  c as REQUEST_STATE,
+  g as useAgents,
+  m as useAgentsDispatch
 };

package/esm/lib/box-ai-agent-selector-with-api-container.js

@@ -1,22 +1,30 @@
-import { BoxAiAgentSelectorWithApi as n } from "./box-ai-agent-selector-with-api.js";
-import { AgentsProvider as A } from "./contexts/context.js";
+import { BoxAiAgentSelectorWithApi as f } from "./box-ai-agent-selector-with-api.js";
+import { AgentsProvider as c } from "./contexts/context.js";
 import { jsx as r } from "react/jsx-runtime";
-function c({
+function a({
   fetcher: t,
-  shouldHideAgentSelectorOnLoad: e = !0,
-  hostAppName: o,
-  recordAction: i
+  hostAppName: e,
+  onSelectAgent: o,
+  recordAction: i,
+  requestState: n,
+  shouldHideAgentSelectorOnLoad: A = !0,
+  triggerChipClassName: m,
+  contentClassName: p
 }) {
-  return /* @__PURE__ */ r(A, {
-    children: /* @__PURE__ */ r(n, {
+  return /* @__PURE__ */ r(c, {
+    children: /* @__PURE__ */ r(f, {
+      contentClassName: p,
       fetcher: t,
-      hostAppName: o,
+      hostAppName: e,
+      onSelectAgent: o,
       recordAction: i,
-      shouldHideAgentSelectorOnLoad: e
+      requestState: n,
+      shouldHideAgentSelectorOnLoad: A,
+      triggerChipClassName: m
     })
   });
 }
 export {
-  c as BoxAiAgentSelectorWithApiContainer,
-  c as default
+  a as BoxAiAgentSelectorWithApiContainer,
+  a as default
 };

package/esm/lib/box-ai-agent-selector-with-api.js

@@ -1,59 +1,75 @@
-import { useState as _, useCallback as T, useEffect as l } from "react";
-import { BoxAiAgentSelector as p } from "./box-ai-agent-selector.js";
-import { LOGGER_BASE_CONFIG as u, LOGGER_TARGET as R } from "./constants.js";
-import { ACTIONS as n } from "./contexts/actions.js";
-import { useAgentsDispatch as G, useAgents as O } from "./contexts/context.js";
-import { R as S } from "../../chunks/types.js";
-import { jsx as h } from "react/jsx-runtime";
-function U({
-  fetcher: E,
-  shouldHideAgentSelectorOnLoad: a,
-  hostAppName: i,
-  recordAction: r
+import { useState as O, useCallback as m, useEffect as f } from "react";
+import { BoxAiAgentSelector as N } from "./box-ai-agent-selector.js";
+import { LOGGER_BASE_CONFIG as u, LOGGER_TARGET as a } from "./constants.js";
+import { ACTIONS as E } from "./contexts/actions.js";
+import { useAgentsDispatch as h, useAgents as I } from "./contexts/context.js";
+import { R as i } from "../../chunks/types.js";
+import { jsx as L } from "react/jsx-runtime";
+function F({
+  fetcher: R,
+  hostAppName: _,
+  onSelectAgent: T,
+  recordAction: n,
+  requestState: s,
+  shouldHideAgentSelectorOnLoad: g,
+  triggerChipClassName: G,
+  contentClassName: l
 }) {
-  const e = G(), {
-    agents: A,
-    requestState: c,
-    selectedAgent: g
-  } = O(), [m, f] = _(!1), s = T((t) => {
-    r && (t.data ?? (t.data = {}), t.data.hostAppName = i, r(t));
-  }, [i, r]), o = T(async () => {
+  const e = h(), {
+    agents: c,
+    requestState: S,
+    selectedAgent: o
+  } = I(), [p, C] = O(!1), r = m((t) => {
+    n && (t.data ?? (t.data = {}), t.data.hostAppName = _, n(t));
+  }, [_, n]), A = m(async () => {
     e({
-      type: n.SET_REQUEST_STATE,
-      requestState: S.IN_PROGRESS
+      type: E.SET_REQUEST_STATE,
+      requestState: i.IN_PROGRESS
     });
     try {
-      const t = await E();
+      const t = await R();
       e({
-        type: n.SET_AGENT_LIST,
+        type: E.SET_AGENT_LIST,
         agents: t.agents
-      }), s({
+      }), r({
         ...u,
-        target: R.LOADED_AGENTS
+        target: a.LOADED_AGENTS
       });
     } catch {
       e({
-        type: n.SET_REQUEST_STATE,
-        requestState: S.ERROR
-      }), s({
+        type: E.SET_REQUEST_STATE,
+        requestState: i.ERROR
+      }), r({
         ...u,
-        target: R.ERROR_LOADING_AGENTS
+        target: a.ERROR_LOADING_AGENTS
       });
     }
-  }, [e, s, E]);
-  return l(() => {
-    o().finally(() => {
-      f(!0);
+  }, [e, r, R]);
+  return f(() => {
+    A().finally(() => {
+      C(!0);
     });
-  }, [o]), a && !m || c === S.SUCCESS && A.length <= 1 ? null : /* @__PURE__ */ h(p, {
-    agents: A,
-    onErrorAction: o,
-    recordAction: s,
-    requestState: c,
-    selectedAgent: g
+  }, [A]), f(() => {
+    s && s !== S && (s !== i.SUCCESS && e({
+      type: E.SET_AGENT_LIST,
+      agents: []
+    }), e({
+      type: E.SET_REQUEST_STATE,
+      requestState: s
+    }));
+  }, [e, S, s]), f(() => {
+    T && T(o);
+  }, [T, o]), g && !p || S === i.SUCCESS && c.length <= 1 ? null : /* @__PURE__ */ L(N, {
+    agents: c,
+    contentClassName: l,
+    onErrorAction: A,
+    recordAction: r,
+    requestState: S,
+    selectedAgent: o,
+    triggerChipClassName: G
   });
 }
 export {
-  U as BoxAiAgentSelectorWithApi,
-  U as default
+  F as BoxAiAgentSelectorWithApi,
+  F as default
 };

package/esm/lib/box-ai-agent-selector.js

@@ -1,107 +1,131 @@
 import "../../styles/box-ai-agent-selector.css";
-import { FilterChip as l, Popover as g, Tooltip as y, Status as j, LoadingIndicator as w, SmallList as B, Button as b } from "@box/blueprint-web";
-import { AlertBadge as x } from "@box/blueprint-web-assets/icons/Fill";
-import { useState as P, useEffect as A, useCallback as I } from "react";
-import { useIntl as D } from "react-intl";
-import { BoxAiAgent as M } from "./box-ai-agent.js";
-import { LOGGER_BASE_CONFIG as E, LOGGER_ACTION_CLICK as f, LOGGER_TARGET as d } from "./constants.js";
-import { ACTIONS as k } from "./contexts/actions.js";
-import { useAgentsDispatch as F } from "./contexts/context.js";
+import { useFullTextTooltip as P, FilterChip as c, Popover as m, Tooltip as A, Status as D, LoadingIndicator as M, SmallList as F, Button as j } from "@box/blueprint-web";
+import { AlertBadge as K } from "@box/blueprint-web-assets/icons/Fill";
+import x from "clsx";
+import { useState as U, useRef as Q, useEffect as V, useCallback as N } from "react";
+import { useIntl as W } from "react-intl";
+import { BoxAiAgent as Y } from "./box-ai-agent.js";
+import { LOGGER_BASE_CONFIG as L, LOGGER_ACTION_CLICK as f, LOGGER_TARGET as E } from "./constants.js";
+import { ACTIONS as z } from "./contexts/actions.js";
+import { useAgentsDispatch as H } from "./contexts/context.js";
 import r from "./messages.js";
-import { R as S } from "../../chunks/types.js";
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-const K = "_agentSelector_1vtwj_1", U = "_agentStatus_1vtwj_4", Q = "_agentLoader_1vtwj_18", Y = "_agentError_1vtwj_21", z = "_agentListItemIcon_1vtwj_25", H = "_agentListContainer_1vtwj_30", J = "_agentListRetryButton_1vtwj_35", a = {
-  agentSelector: K,
-  agentStatus: U,
-  agentLoader: Q,
-  agentError: Y,
-  agentListItemIcon: z,
-  agentListContainer: H,
-  agentListRetryButton: J
+import { R as h } from "../../chunks/types.js";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+const J = "_agentSelector_1k90x_1", X = "_agentStatus_1k90x_4", Z = "_agentLoader_1k90x_18", $ = "_agentError_1k90x_21", q = "_triggerChip_1k90x_24", tt = "_agentLabel_1k90x_29", et = "_dropdownIndicator_1k90x_35", at = "_agentListItemIcon_1k90x_44", nt = "_agentListContainer_1k90x_49", ot = "_agentListRetryButton_1k90x_59", e = {
+  agentSelector: J,
+  agentStatus: X,
+  agentLoader: Z,
+  agentError: $,
+  triggerChip: q,
+  agentLabel: tt,
+  dropdownIndicator: et,
+  agentListItemIcon: at,
+  agentListContainer: nt,
+  agentListRetryButton: ot
 };
-function it({
-  agents: N,
-  onErrorAction: u,
-  requestState: m,
+function ht({
+  agents: G,
+  contentClassName: O,
+  onErrorAction: C,
+  recordAction: a,
+  requestState: p,
   selectedAgent: n,
-  recordAction: e
+  triggerChipClassName: b
 }) {
   const {
     formatMessage: o
-  } = D(), [c, p] = P(!1), C = o(r.selectAgent), v = o(r.defaultAgent), R = F(), T = m === S.SUCCESS, _ = m === S.IN_PROGRESS, s = m === S.ERROR;
-  let L = "";
-  T ? L = (n == null ? void 0 : n.name) || C : s && (L = v), A(() => {
-    c && e && e({
-      ...E,
+  } = W(), [l, _] = U(!1), S = o(r.selectAgent), k = o(r.defaultAgent), I = H(), R = p === h.SUCCESS, d = p === h.IN_PROGRESS, g = p === h.ERROR;
+  let i = "";
+  R ? i = (n == null ? void 0 : n.name) || S : g && (i = k);
+  const T = Q(null), {
+    Wrapper: y,
+    wrapperProps: B
+  } = P({
+    ref: T,
+    textValue: i
+  });
+  V(() => {
+    l && a && a({
+      ...L,
       action: f,
-      target: d.OPEN_SELECTOR
+      target: E.OPEN_SELECTOR
     });
-  }, [c, e]);
-  const G = I((i) => {
-    p(!1), R({
-      type: k.SET_SELECTED_AGENT,
-      id: i.id
-    }), e && e({
-      ...E,
+  }, [l, a]);
+  const v = N((s) => {
+    _(!1), I({
+      type: z.SET_SELECTED_AGENT,
+      id: s.id
+    }), a && a({
+      ...L,
       action: f,
-      target: d.SELECT_AGENT
+      target: E.SELECT_AGENT
     });
-  }, [R, e]), O = I(() => {
-    p(!1), u(), e && e({
-      ...E,
+  }, [I, a]), w = N(() => {
+    _(!1), C(), a && a({
+      ...L,
       action: f,
-      target: d.RETRY_LOADING_AGENTS
+      target: E.RETRY_LOADING_AGENTS
     });
-  }, [u, e]);
-  return /* @__PURE__ */ t(l.Group, {
-    className: a.agentSelector,
-    name: C,
+  }, [C, a]);
+  return /* @__PURE__ */ t(c.Group, {
+    className: x([e.agentSelector, b]),
+    name: S,
     type: "multiple",
-    children: /* @__PURE__ */ h(g.Root, {
+    children: /* @__PURE__ */ u(m.Root, {
       modal: !1,
-      onOpenChange: p,
-      open: c,
-      children: [/* @__PURE__ */ t(y, {
+      onOpenChange: _,
+      open: l,
+      children: [/* @__PURE__ */ t(A, {
         content: o(r.errorTooltip),
-        hidden: !s,
+        hidden: !g || l,
         side: "bottom",
         variant: "error",
-        children: /* @__PURE__ */ t(g.Trigger, {
-          disabled: _,
-          children: /* @__PURE__ */ h(l.TriggerChip, {
+        children: /* @__PURE__ */ t(m.Trigger, {
+          disabled: d,
+          children: /* @__PURE__ */ u(c.TriggerChip, {
+            className: e.triggerChip,
             value: "trigger-chip",
-            children: [/* @__PURE__ */ t(j, {
-              className: a.agentStatus,
+            children: [/* @__PURE__ */ t(D, {
+              className: e.agentStatus,
               colorIndex: 0,
               text: o(r.agent)
-            }), _ && /* @__PURE__ */ t(w, {
+            }), d && /* @__PURE__ */ t(M, {
               "aria-label": o(r.loadingMessage),
-              className: a.agentLoader,
+              className: e.agentLoader,
               variant: "default"
-            }), s && /* @__PURE__ */ t(x, {
-              className: a.agentError,
+            }), g && /* @__PURE__ */ t(K, {
+              className: e.agentError,
               height: "1rem",
               role: "presentation",
               width: "1rem"
-            }), /* @__PURE__ */ t(l.Label, {
-              children: L
-            }), !_ && /* @__PURE__ */ t(l.DropdownIndicator, {})]
+            }), /* @__PURE__ */ t(y, {
+              ...B,
+              content: i,
+              children: /* @__PURE__ */ t(c.Label, {
+                ref: T,
+                className: e.agentLabel,
+                children: i
+              })
+            }), !d && /* @__PURE__ */ t("div", {
+              className: e.dropdownIndicator,
+              children: /* @__PURE__ */ t(c.DropdownIndicator, {})
+            })]
           })
         })
-      }), /* @__PURE__ */ t(g.ContentContainer, {
+      }), /* @__PURE__ */ t(m.ContentContainer, {
         align: "start",
-        className: a.agentListContainer,
-        children: /* @__PURE__ */ h(g.MainContent, {
-          children: [T && /* @__PURE__ */ t(B, {
-            className: a.agentList,
+        className: e.agentListContainer,
+        children: /* @__PURE__ */ u(m.MainContent, {
+          children: [R && /* @__PURE__ */ t(F, {
+            className: x([e.agentList, O]),
             selectedKeys: [(n == null ? void 0 : n.id) || ""],
-            children: N.map((i) => /* @__PURE__ */ t(M, {
-              agent: i,
-              onAction: () => G(i)
-            }, i.id))
-          }), s && /* @__PURE__ */ t(b, {
-            className: a.agentListRetryButton,
-            onClick: O,
+            children: G.map((s) => /* @__PURE__ */ t(Y, {
+              agent: s,
+              onAction: () => v(s)
+            }, s.id))
+          }), g && /* @__PURE__ */ t(j, {
+            className: e.agentListRetryButton,
+            onClick: w,
             variant: "tertiary",
             children: o(r.errorMessage)
           })]
@@ -111,6 +135,6 @@ function it({
   });
 }
 export {
-  it as BoxAiAgentSelector,
-  it as default
+  ht as BoxAiAgentSelector,
+  ht as default
 };

package/esm/lib/box-ai-agent.js

@@ -1,52 +1,62 @@
 import "../../styles/box-ai-agent.css";
-import { SmallList as s, Tooltip as o, Text as r, Status as c } from "@box/blueprint-web";
-import { BoxAiLogo as d } from "@box/blueprint-web-assets/icons/Logo";
-import { SurfaceStatusSurfaceGray as u } from "@box/blueprint-web-assets/tokens/tokens";
-import { useIntl as f } from "react-intl";
-import g from "./messages.js";
-import { jsxs as i, jsx as t, Fragment as A } from "react/jsx-runtime";
-const _ = "_agentListItem_1s7vn_1", p = "_agentListItemIcon_1s7vn_1", I = "_defaultAgentHeader_1s7vn_5", L = "_defaultAgentName_1s7vn_9", S = "_defaultAgentStatus_1s7vn_15", a = {
-  agentListItem: _,
-  agentListItemIcon: p,
-  defaultAgentHeader: I,
-  defaultAgentName: L,
-  defaultAgentStatus: S
+import { useFullTextTooltip as u, SmallList as s, Text as d, Status as f } from "@box/blueprint-web";
+import { BoxAiLogo as p } from "@box/blueprint-web-assets/icons/Logo";
+import { SurfaceStatusSurfaceGray as g } from "@box/blueprint-web-assets/tokens/tokens";
+import { useRef as A } from "react";
+import { useIntl as _ } from "react-intl";
+import I from "./messages.js";
+import { jsxs as i, jsx as t, Fragment as L } from "react/jsx-runtime";
+const S = "_agentListItem_1s7vn_1", x = "_agentListItemIcon_1s7vn_1", N = "_defaultAgentHeader_1s7vn_5", h = "_defaultAgentName_1s7vn_9", v = "_defaultAgentStatus_1s7vn_15", a = {
+  agentListItem: S,
+  agentListItemIcon: x,
+  defaultAgentHeader: N,
+  defaultAgentName: h,
+  defaultAgentStatus: v
 };
-function y({
+function w({
   agent: e,
-  onAction: m
+  onAction: l
 }) {
   const {
-    formatMessage: l
-  } = f(), n = e.isEnterpriseDefault;
+    formatMessage: m
+  } = _(), n = e.isEnterpriseDefault, r = A(null), {
+    Wrapper: o,
+    wrapperProps: c
+  } = u({
+    ref: r,
+    textValue: e.name,
+    skipOverflowCheck: !n
+  });
   return /* @__PURE__ */ i(s.Item, {
     className: a.agentListItem,
     id: e.id,
-    onAction: m,
+    onAction: l,
     children: [/* @__PURE__ */ t(s.Thumbnail, {
       className: a.agentListItemIcon,
       children: e.imageURL ? /* @__PURE__ */ t("img", {
         "aria-label": e.name,
         src: e.imageURL
-      }) : /* @__PURE__ */ t(d, {
+      }) : /* @__PURE__ */ t(p, {
         "aria-label": e.name
       })
     }), /* @__PURE__ */ t(s.Header, {
       className: n ? a.defaultAgentHeader : void 0,
       textValue: e.name,
-      children: n ? /* @__PURE__ */ i(A, {
+      children: n ? /* @__PURE__ */ i(L, {
         children: [/* @__PURE__ */ t(o, {
+          ...c,
           content: e.name,
-          children: /* @__PURE__ */ t(r, {
+          children: /* @__PURE__ */ t(d, {
+            ref: r,
             as: "span",
             className: a.defaultAgentName,
             variant: "bodyDefaultSemibold",
             children: e.name
           })
-        }), /* @__PURE__ */ t(c, {
+        }), /* @__PURE__ */ t(f, {
           className: a.defaultAgentStatus,
-          color: u,
-          text: l(g.defaultStatus)
+          color: g,
+          text: m(I.defaultStatus)
         })]
       }) : e.name
     }), e.description && /* @__PURE__ */ t(s.Subtitle, {
@@ -56,6 +66,6 @@ function y({
   });
 }
 export {
-  y as BoxAiAgent,
-  y as default
+  w as BoxAiAgent,
+  w as default
 };

package/esm/lib/constants.js

@@ -1,4 +1,4 @@
-const G = "click", E = "programmatic", e = "selector", t = "agentSelector", o = {
+const t = "click", o = "keypress", E = "programmatic", e = "selector", G = "agentSelector", O = {
   LOADED_AGENTS: "loadedAgents",
   ERROR_LOADING_AGENTS: "errorLoadingAgents",
   RETRY_LOADING_AGENTS: "retryLoadingAgents",
@@ -7,13 +7,14 @@ const G = "click", E = "programmatic", e = "selector", t = "agentSelector", o =
 }, A = {
   action: E,
   component: e,
-  feature: t
+  feature: G
 };
 export {
-  G as LOGGER_ACTION_CLICK,
+  t as LOGGER_ACTION_CLICK,
+  o as LOGGER_ACTION_KEYPRESS,
   E as LOGGER_ACTION_PROGRAMMATIC,
   A as LOGGER_BASE_CONFIG,
   e as LOGGER_COMPONENT,
-  t as LOGGER_FEATURE,
-  o as LOGGER_TARGET
+  G as LOGGER_FEATURE,
+  O as LOGGER_TARGET
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/box-ai-agent-selector",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {
     "@box/blueprint-web": "^7.31.1",
@@ -10,7 +10,7 @@
     "react-intl": "^6.4.2"
   },
   "devDependencies": {
-    "@box/blueprint-web": "^8.3.0",
+    "@box/blueprint-web": "^8.3.1",
     "@box/blueprint-web-assets": "^4.28.0",
     "@box/eslint-plugin-blueprint": "*",
     "@box/storybook-utils": "^0.7.0",
@@ -46,5 +46,5 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "gitHead": "30a4168eff5a8500b505e86beb4dff3b527aac44"
+  "gitHead": "5a9d17c1a6963a9dbcde5a0a86d4f2cbcf35db53"
 }

package/styles/box-ai-agent-selector.css

@@ -1 +1 @@
-._agentSelector_1vtwj_1{margin-inline-start:.75rem}._agentSelector_1vtwj_1 ._agentStatus_1vtwj_4{margin-inline-start:.5rem}._agentSelector_1vtwj_1 ._agentStatus_1vtwj_4>span{background:linear-gradient(#f4f4f4 0,#f4f4f4 0) padding-box,linear-gradient(135deg,#fe01da,#2486fc) border-box;border:.0625rem solid rgba(0,0,0,0)}._agentSelector_1vtwj_1 ._agentStatus_1vtwj_4>span span{background:linear-gradient(135deg,#fe01da,#2486fc);color:transparent;-webkit-background-clip:text;background-clip:text;text-transform:uppercase}._agentSelector_1vtwj_1 ._agentLoader_1vtwj_18{position:inherit}._agentSelector_1vtwj_1 ._agentError_1vtwj_21 path{fill:#d5324e}._agentListItemIcon_1vtwj_25{height:2rem;width:2rem}._agentListContainer_1vtwj_30{min-width:320px;max-width:500px}._agentListRetryButton_1vtwj_35{margin:.25rem;max-width:320px;text-wrap:wrap}
+._agentSelector_1k90x_1{margin-inline-start:.75rem}._agentSelector_1k90x_1 ._agentStatus_1k90x_4{margin-inline-start:.5rem}._agentSelector_1k90x_1 ._agentStatus_1k90x_4>span{background:linear-gradient(#f4f4f4 0,#f4f4f4 0) padding-box,linear-gradient(135deg,#fe01da,#2486fc) border-box;border:.0625rem solid rgba(0,0,0,0)}._agentSelector_1k90x_1 ._agentStatus_1k90x_4>span span{background:linear-gradient(135deg,#fe01da,#2486fc);color:transparent;-webkit-background-clip:text;background-clip:text;text-transform:uppercase}._agentSelector_1k90x_1 ._agentLoader_1k90x_18{position:inherit}._agentSelector_1k90x_1 ._agentError_1k90x_21 path{fill:#d5324e}._agentSelector_1k90x_1 ._triggerChip_1k90x_24{max-width:376px;display:flex;text-align:start}._agentSelector_1k90x_1 ._triggerChip_1k90x_24 ._agentLabel_1k90x_29{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._agentSelector_1k90x_1 ._triggerChip_1k90x_24 ._dropdownIndicator_1k90x_35{flex-shrink:0}@media (max-width: 374px){._agentSelector_1k90x_1 ._triggerChip_1k90x_24{width:100%}}._agentListItemIcon_1k90x_44{height:2rem;width:2rem}._agentListContainer_1k90x_49{min-width:320px;max-width:376px}@media (max-width: 376px){._agentListContainer_1k90x_49{max-width:320px}}._agentListRetryButton_1k90x_59{margin:.25rem;max-width:320px;text-wrap:wrap}

package/types/index.d.ts

@@ -1,3 +1,5 @@
-export { BoxAiAgentSelectorWithApiContainer as BoxAiAgentSelector } from './lib/box-ai-agent-selector-with-api-container';
+export * from './lib/box-ai-agent-selector';
+export * from './lib/box-ai-agent-selector-with-api';
+export * from './lib/box-ai-agent-selector-with-api-container';
 export * from './lib/contexts';
 export * from './lib/types';

package/types/lib/box-ai-agent-selector-with-api-container.d.ts

@@ -1,25 +1,3 @@
-import { type AgentListResponse, type RecordActionType } from './types';
-export interface BoxAiAgentSelectorWithApiContainerProps {
-    /**
-     * Function responsible for fetching the list of agents,
-     * typically passed from the parent component.
-     * The function returns a promise that resolves to the agent list response.
-     */
-    fetcher: () => Promise<AgentListResponse>;
-    /**
-     * Name of the host application for resin event tracking
-     * */
-    hostAppName?: string;
-    /**
-     * Callback function to handle logging resin events
-     * */
-    recordAction?: (payload: RecordActionType) => void;
-    /**
-     * Determines whether the agent selector component should remain hidden
-     * until the initial data fetch is complete.
-     * @default true
-     */
-    shouldHideAgentSelectorOnLoad?: boolean;
-}
-export declare function BoxAiAgentSelectorWithApiContainer({ fetcher, shouldHideAgentSelectorOnLoad, hostAppName, recordAction, }: BoxAiAgentSelectorWithApiContainerProps): import("react/jsx-runtime").JSX.Element;
+import { type BoxAiAgentSelectorWithApiProps } from './types';
+export declare function BoxAiAgentSelectorWithApiContainer({ fetcher, hostAppName, onSelectAgent, recordAction, requestState, shouldHideAgentSelectorOnLoad, triggerChipClassName, contentClassName, }: BoxAiAgentSelectorWithApiProps): import("react/jsx-runtime").JSX.Element;
 export default BoxAiAgentSelectorWithApiContainer;

package/types/lib/box-ai-agent-selector-with-api.d.ts

@@ -1,25 +1,3 @@
-import { type AgentListResponse, type RecordActionType } from './types';
-export interface BoxAiAgentSelectorWithApiProps {
-    /**
-     * Function responsible for fetching the list of agents,
-     * typically passed from the parent component.
-     * The function returns a promise that resolves to the agent list response.
-     */
-    fetcher: () => Promise<AgentListResponse>;
-    /**
-     * Name of the host application for resin event tracking
-     * */
-    hostAppName?: string;
-    /**
-     * Callback function to handle logging resin events
-     * */
-    recordAction?: (payload: RecordActionType) => void;
-    /**
-     * Determines whether the agent selector component should remain hidden
-     * until the initial data fetch is complete.
-     * @default true
-     */
-    shouldHideAgentSelectorOnLoad?: boolean;
-}
-export declare function BoxAiAgentSelectorWithApi({ fetcher, shouldHideAgentSelectorOnLoad, hostAppName, recordAction, }: BoxAiAgentSelectorWithApiProps): import("react/jsx-runtime").JSX.Element | null;
+import { type BoxAiAgentSelectorWithApiProps } from './types';
+export declare function BoxAiAgentSelectorWithApi({ fetcher, hostAppName, onSelectAgent, recordAction, requestState: requestStateProp, shouldHideAgentSelectorOnLoad, triggerChipClassName, contentClassName, }: BoxAiAgentSelectorWithApiProps): import("react/jsx-runtime").JSX.Element | null;
 export default BoxAiAgentSelectorWithApi;

package/types/lib/box-ai-agent-selector.d.ts

@@ -1,25 +1,3 @@
-import { REQUEST_STATE, type AgentType, type RecordActionType } from './types';
-export interface BoxAiAgentSelectorProps {
-    /**
-     * Array of available agents to select from.
-     */
-    agents: AgentType[];
-    /**
-     * Callback function triggered when an error occurs, used to retry fetching the agent list.
-     */
-    onErrorAction: () => void;
-    /**
-     * Callback function to handle logging resin events
-     * */
-    recordAction?: (payload: RecordActionType) => void;
-    /**
-     * Current state of the request to fetch agents, representing one of: Success, Error, In Progress, or Not Started.
-     */
-    requestState: REQUEST_STATE;
-    /**
-     * The currently selected agent, or null if no agent is selected.
-     */
-    selectedAgent: AgentType | null;
-}
-export declare function BoxAiAgentSelector({ agents, onErrorAction, requestState, selectedAgent, recordAction, }: BoxAiAgentSelectorProps): import("react/jsx-runtime").JSX.Element;
+import { type BoxAiAgentSelectorProps } from './types';
+export declare function BoxAiAgentSelector({ agents, contentClassName, onErrorAction, recordAction, requestState, selectedAgent, triggerChipClassName, }: BoxAiAgentSelectorProps): import("react/jsx-runtime").JSX.Element;
 export default BoxAiAgentSelector;

package/types/lib/constants.d.ts

@@ -1,5 +1,6 @@
 import { type RecordActionType } from './types';
 export declare const LOGGER_ACTION_CLICK = "click";
+export declare const LOGGER_ACTION_KEYPRESS = "keypress";
 export declare const LOGGER_ACTION_PROGRAMMATIC = "programmatic";
 export declare const LOGGER_COMPONENT = "selector";
 export declare const LOGGER_FEATURE = "agentSelector";

package/types/lib/stories/shared.d.ts

@@ -0,0 +1,7 @@
+import { type BoxAiAgentSelectorWithApiProps } from '../../index';
+export declare const defaultBoxAiAgentSelectorProps: {
+    fetcher: () => Promise<{
+        agents: import("../types").AgentType[];
+    }>;
+};
+export declare const DefaultBoxAiAgentSelectorWithApiContainer: (props: BoxAiAgentSelectorWithApiProps) => import("react/jsx-runtime").JSX.Element;

package/types/lib/types.d.ts

@@ -1,4 +1,4 @@
-import { type LOGGER_ACTION_CLICK, type LOGGER_ACTION_PROGRAMMATIC } from './constants';
+import { type LOGGER_ACTION_CLICK, type LOGGER_ACTION_KEYPRESS, type LOGGER_ACTION_PROGRAMMATIC } from './constants';
 import { type ACTIONS } from './contexts';
 export type AgentType = {
     id: string;
@@ -31,11 +31,69 @@ export type AgentListResponse = {
     agents: AgentType[];
 };
 export type RecordActionType = {
-    action: typeof LOGGER_ACTION_CLICK | typeof LOGGER_ACTION_PROGRAMMATIC;
+    action: typeof LOGGER_ACTION_CLICK | typeof LOGGER_ACTION_PROGRAMMATIC | typeof LOGGER_ACTION_KEYPRESS;
     data?: {
         hostAppName?: string;
+        agentSelected?: string;
+        index?: number;
+        count?: number;
+        errorType?: string;
+        selectedQuestion?: string;
     };
     component: string;
     feature: string;
     target?: string;
 };
+export interface BoxAiAgentSelectorWithApiProps {
+    contentClassName?: string;
+    /**
+     * Function responsible for fetching the list of agents,
+     * typically passed from the parent component.
+     * The function returns a promise that resolves to the agent list response.
+     */
+    fetcher: () => Promise<AgentListResponse>;
+    /**
+     * Name of the host application for resin event tracking
+     * */
+    hostAppName?: string;
+    /** Callback function when an agent is selected */
+    onSelectAgent?: (agent: AgentType | null) => void;
+    /**
+     * Callback function to handle logging resin events
+     * */
+    recordAction?: (payload: RecordActionType) => void;
+    /** Request state of the list fetching
+     */
+    requestState?: REQUEST_STATE | null;
+    /**
+     * Determines whether the agent selector component should remain hidden
+     * until the initial data fetch is complete.
+     * @default true
+     */
+    shouldHideAgentSelectorOnLoad?: boolean;
+    triggerChipClassName?: string;
+}
+export interface BoxAiAgentSelectorProps {
+    contentClassName?: string;
+    /**
+     * Array of available agents to select from.
+     */
+    agents: AgentType[];
+    /**
+     * Callback function triggered when an error occurs, used to retry fetching the agent list.
+     */
+    onErrorAction: () => void;
+    /**
+     * Callback function to handle logging resin events
+     * */
+    recordAction?: (payload: RecordActionType) => void;
+    /**
+     * Current state of the request to fetch agents, representing one of: Success, Error, In Progress, or Not Started.
+     */
+    requestState: REQUEST_STATE;
+    /**
+     * The currently selected agent, or null if no agent is selected.
+     */
+    selectedAgent: AgentType | null;
+    triggerChipClassName?: string;
+}

package/types/lib/contexts/stories/shared.d.ts

@@ -1,4 +0,0 @@
-import { type AgentState } from '../../types';
-import { type AgentsProviderProps } from '../context';
-export declare const initialState: AgentState;
-export declare const DefaultContextProvider: ({ value }: AgentsProviderProps) => import("react/jsx-runtime").JSX.Element;