@box/box-ai-agent-selector 0.17.10 → 0.17.12

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/box-ai-agent-selector",
-  "version": "0.17.10",
+  "version": "0.17.12",
   "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": "^9.3.0",
+    "@box/blueprint-web": "^9.3.1",
     "@box/blueprint-web-assets": "^4.30.1",
     "@box/eslint-plugin-blueprint": "^1.0.3",
     "@box/storybook-utils": "^0.8.0",
@@ -46,5 +46,5 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "gitHead": "d9e9463682eab8c3cf54e738849001a2095220e8"
+  "gitHead": "3ca9db9ebc750eda29f3a1c71326fedd318dde5c"
 }

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

@@ -1 +1 @@
-._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}
+._agentSelector_zvgbf_1{margin-inline-start:.75rem}._agentSelector_zvgbf_1 ._agentStatus_zvgbf_4{margin-inline-start:.5rem}._agentSelector_zvgbf_1 ._agentStatus_zvgbf_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_zvgbf_1 ._agentStatus_zvgbf_4>span span{background:linear-gradient(135deg,#fe01da,#2486fc);color:transparent;-webkit-background-clip:text;background-clip:text;text-transform:uppercase}._agentSelector_zvgbf_1 ._agentLoader_zvgbf_18{position:inherit}._agentSelector_zvgbf_1 ._agentError_zvgbf_21 path{fill:#d5324e}._agentSelector_zvgbf_1 ._triggerChip_zvgbf_24{max-width:376px;display:flex;text-align:start}._agentSelector_zvgbf_1 ._triggerChip_zvgbf_24 ._agentLabel_zvgbf_29{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._agentSelector_zvgbf_1 ._triggerChip_zvgbf_24 ._dropdownIndicator_zvgbf_35{flex-shrink:0;margin-inline-start:0}._agentSelector_zvgbf_1 ._triggerChip_zvgbf_24 ._dropdownIndicator_zvgbf_35 svg{margin-inline-start:0}@media (max-width: 374px){._agentSelector_zvgbf_1 ._triggerChip_zvgbf_24{width:100%}}._agentSelector_zvgbf_1._sidebar_zvgbf_47{margin:0;margin-inline-start:0;min-width:72px;max-width:246px}._agentSelector_zvgbf_1._sidebar_zvgbf_47 ._triggerChip_zvgbf_24{min-width:72px;max-width:246px}._agentListItemIcon_zvgbf_58{height:2rem;width:2rem}._agentListContainer_zvgbf_63{min-width:320px;max-width:376px}@media (max-width: 376px){._agentListContainer_zvgbf_63{max-width:320px}}._agentListContainer_zvgbf_63._sidebar_zvgbf_47{min-width:184px;max-width:252px}@media (max-width: 252px){._agentListContainer_zvgbf_63._sidebar_zvgbf_47{max-width:184px}}._agentListRetryButton_zvgbf_82{margin:.25rem;max-width:320px;text-wrap:wrap}._agentListRetryButton_zvgbf_82._sidebar_zvgbf_47{max-width:184px}

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

@@ -1,3 +1,3 @@
 import { type BoxAiAgentSelectorProps } from './types';
-export declare function BoxAiAgentSelector({ agents, contentClassName, onErrorAction, recordAction, requestState, selectedAgent, triggerChipClassName, }: BoxAiAgentSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoxAiAgentSelector({ agents, contentClassName, onErrorAction, recordAction, requestState, selectedAgent, triggerChipClassName, variant, }: BoxAiAgentSelectorProps): import("react/jsx-runtime").JSX.Element;
 export default BoxAiAgentSelector;

package/types/lib/types.d.ts

@@ -44,6 +44,7 @@ export type RecordActionType = {
     feature: string;
     target?: string;
 };
+export type StyleVariant = 'modal' | 'sidebar';
 export interface BoxAiAgentSelectorWithApiProps {
     contentClassName?: string;
     /**
@@ -96,4 +97,8 @@ export interface BoxAiAgentSelectorProps {
      */
     selectedAgent: AgentType | null;
     triggerChipClassName?: string;
+    /**
+     * Styling variant of agent selector
+     * */
+    variant?: StyleVariant;
 }