@box/box-ai-content-answers 0.64.2 → 0.65.0

package/esm/lib/box-ai-content-answers.js

@@ -1,43 +1,44 @@
 import "../../styles/box-ai-content-answers.css";
-import k from "clsx";
+import C from "clsx";
 import * as s from "react";
-import { AgentEditor as C } from "./components/agents/agent-editor.js";
-import { Content as F } from "./components/content/content.js";
-import { Footer as N } from "./components/footer/footer.js";
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-const B = "_container_hi5vt_1", R = "_contentAnswers_hi5vt_5", w = {
-  container: B,
-  contentAnswers: R
-}, U = ({
+import { AgentEditor as F } from "./components/agents/agent-editor.js";
+import { Content as N } from "./components/content/content.js";
+import { Footer as y } from "./components/footer/footer.js";
+import { jsx as n, jsxs as B } from "react/jsx-runtime";
+const R = "_container_hi5vt_1", z = "_contentAnswers_hi5vt_5", w = {
+  container: R,
+  contentAnswers: z
+}, V = ({
   className: S,
   contentType: u,
   error: t,
   hasRequestInProgress: c,
   isAgentSelectorEnabled: h,
-  isDebugModeEnabled: A,
-  isStopResponseEnabled: M,
+  isAIStudioAgentSelectorEnabled: A,
+  isDebugModeEnabled: M,
+  isStopResponseEnabled: Q,
   isStreamingEnabled: o,
   userInfo: l,
   questions: i,
   recordAction: r,
-  retryQuestion: Q,
+  retryQuestion: _,
   showLoadingIndicator: a,
-  stopQuestion: _,
-  submitQuestion: x,
-  suggestedQuestions: b,
-  useAnimation: v,
-  onAgentEditorToggle: D,
-  ...E
+  stopQuestion: x,
+  submitQuestion: b,
+  suggestedQuestions: v,
+  useAnimation: D,
+  onAgentEditorToggle: E,
+  ...j
 }) => {
-  const [m, g] = s.useState(null), [f, d] = s.useState(t != null), [e, p] = s.useState(!1), j = !f && !a;
+  const [m, g] = s.useState(null), [f, d] = s.useState(t != null), [e, p] = s.useState(!1), k = !f && !a;
   return s.useEffect(() => {
     d(t != null);
   }, [t]), /* @__PURE__ */ n("div", {
-    className: k(S, w.container),
-    children: /* @__PURE__ */ y("div", {
+    className: C(S, w.container),
+    children: /* @__PURE__ */ B("div", {
       className: w.contentAnswers,
-      children: [!e && /* @__PURE__ */ n(F, {
-        ...E,
+      children: [!e && /* @__PURE__ */ n(N, {
+        ...j,
         askSuggestedQuestion: m,
         contentType: u,
         error: t,
@@ -49,27 +50,28 @@ const B = "_container_hi5vt_1", R = "_contentAnswers_hi5vt_5", w = {
         setAskSuggestedQuestion: g,
         setIsErrorMessageShown: d,
         showLoadingIndicator: a,
-        suggestedQuestions: b,
-        useAnimation: o && v,
+        suggestedQuestions: v,
+        useAnimation: o && D,
         userInfo: l
-      }), e && /* @__PURE__ */ n(C, {
-        onAgentEditorToggle: D,
+      }), e && /* @__PURE__ */ n(F, {
+        onAgentEditorToggle: E,
         recordAction: r,
         setIsDebugModeShown: p
-      }), j && /* @__PURE__ */ n(N, {
+      }), k && /* @__PURE__ */ n(y, {
         askSuggestedQuestion: m,
         contentType: u,
-        enableDebugMode: A,
+        enableDebugMode: M,
         hasRequestInProgress: c,
         isAgentSelectorEnabled: h,
+        isAIStudioAgentSelectorEnabled: A,
         isDebugModeShown: e,
-        isStopResponseEnabled: M,
+        isStopResponseEnabled: Q,
         isStreamingEnabled: o,
         lastQuestion: i[i.length - 1],
-        onRetryQuestion: Q,
-        onStopQuestion: _,
+        onRetryQuestion: _,
+        onStopQuestion: x,
         recordAction: r,
-        sendQuestion: x,
+        sendQuestion: b,
         setAskSuggestedQuestion: g,
         toggleDebugMode: () => {
           p(!e);
@@ -80,6 +82,6 @@ const B = "_container_hi5vt_1", R = "_contentAnswers_hi5vt_5", w = {
   });
 };
 export {
-  U as BoxAiContentAnswers,
-  U as default
+  V as BoxAiContentAnswers,
+  V as default
 };

package/esm/lib/components/api-wrapper/constants.js

@@ -1,4 +1,4 @@
-const o = (e) => ({
+const i = (e) => ({
   ask: {
     type: "ai_agent_ask",
     longText: {
@@ -15,15 +15,17 @@ const o = (e) => ({
     }
   }
 }), t = (e, _ = null, n = !1) => ({
+  id: _,
   name: e,
-  config: _ ? o(_) : null,
+  config: _ ? i(_) : null,
   isDefault: n,
+  isEnterpriseDefault: n,
   isSelected: n
-}), a = [t("Box (default)", null, !0), t("Box (gpt-3.5-turbo)", "azure__openai__gpt_3_5_turbo_16k"), t("Box (gpt-4o)", "openai__gpt_4o_2024_05_13"), t("Box (gemini 1.5 flash", "google__gemini_1_5_flash_001"), t("Box (gemini 1.5 pro)", "google__gemini_1_5_pro_001"), t("Box (claude 3 sonnet)", "aws__claude_3_sonnet"), t("Box (claude 3.5 sonnet)", "aws__claude_3_5_sonnet"), t("Box (claude 3 haiku)", "aws__claude_3_haiku"), t("Box (titan text lite)", "aws__titan_text_lite"), t("Box (titan text express)", "aws__titan_text_express")], i = {
+}), a = [t("Box (default)", null, !0), t("Box (gpt-3.5-turbo)", "azure__openai__gpt_3_5_turbo_16k"), t("Box (gpt-4o)", "openai__gpt_4o_2024_05_13"), t("Box (gemini 1.5 flash", "google__gemini_1_5_flash_001"), t("Box (gemini 1.5 pro)", "google__gemini_1_5_pro_001"), t("Box (claude 3 sonnet)", "aws__claude_3_sonnet"), t("Box (claude 3.5 sonnet)", "aws__claude_3_5_sonnet"), t("Box (claude 3 haiku)", "aws__claude_3_haiku"), t("Box (titan text lite)", "aws__titan_text_lite"), t("Box (titan text express)", "aws__titan_text_express")], o = {
   agents: a,
   selectedAgent: a.find((e) => e.isSelected)
 };
 export {
   a as agentList,
-  i as agentState
+  o as agentState
 };

package/esm/lib/components/api-wrapper/content-answers-component.js

@@ -1,104 +1,109 @@
-import { useReducer as F, useEffect as G } from "react";
-import { R as d } from "../../../../chunks/types.js";
-import { useContentAnswers as H } from "./hooks/useContentAnswers.js";
-import { ContentAnswersRecord as I, ContentAnswersItemRecord as J } from "./records.js";
-import K from "./reducer.js";
-import { jsx as M } from "react/jsx-runtime";
-const te = ({
-  WrappedComponent: a,
+import { useReducer as I, useEffect as J } from "react";
+import { R as a } from "../../../../chunks/types.js";
+import { useContentAnswers as K } from "./hooks/useContentAnswers.js";
+import { ContentAnswersRecord as M, ContentAnswersItemRecord as V } from "./records.js";
+import W from "./reducer.js";
+import { jsx as X } from "react/jsx-runtime";
+const ne = ({
+  WrappedComponent: d,
   createSessionRequest: f,
   getAgentConfig: m,
-  fetchTimeout: g,
-  formatCitations: S,
-  getAnswer: A,
-  getAnswerStreaming: p,
+  getAIStudioAgents: g,
+  fetchTimeout: S,
+  formatCitations: A,
+  getAnswer: p,
+  getAnswerStreaming: C,
   getSuggestedQuestions: t,
   hostAppName: R,
-  isAgentSelectorEnabled: C,
+  isAgentSelectorEnabled: w,
+  isAIStudioAgentSelectorEnabled: l,
   isCitationsEnabled: n,
-  isDebugModeEnabled: l,
-  isMarkdownEnabled: w,
+  isDebugModeEnabled: Q,
+  isMarkdownEnabled: T,
   isOpen: s,
-  isResetChatEnabled: Q,
-  isStopResponseEnabled: T,
+  isResetChatEnabled: q,
+  isStopResponseEnabled: E,
   isStreamingEnabled: r,
   itemID: o,
   onCloseModal: h,
-  suggestedQuestions: q,
-  warningNotice: E,
-  warningNoticeAriaLabel: j
+  shouldRenderProviders: j = !1,
+  suggestedQuestions: U,
+  warningNotice: _,
+  warningNoticeAriaLabel: v
 }) => {
-  const [c, v] = F(K, new I({
-    item: new J({
+  const [c, x] = I(W, new M({
+    item: new V({
       id: o
     })
   })), {
-    clearConversation: U,
-    createSession: _,
+    clearConversation: y,
+    createSession: L,
     fetchAgentConfig: u,
     fetchSuggestedQuestions: i,
-    retryQuestion: x,
-    sendQuestion: P,
-    stopQuestion: y
-  } = H({
+    retryQuestion: N,
+    sendQuestion: O,
+    stopQuestion: P
+  } = K({
     contentAnswers: c,
     createSessionRequest: f,
-    dispatchStateUpdate: v,
-    fetchTimeout: g,
-    formatCitations: S,
+    dispatchStateUpdate: x,
+    fetchTimeout: S,
+    formatCitations: A,
     getAgentConfig: m,
-    getAnswerStreaming: p,
-    getAnswer: A,
+    getAnswerStreaming: C,
+    getAnswer: p,
     getSuggestedQuestions: t,
     isCitationsEnabled: n,
-    isStopResponseEnabled: T,
+    isStopResponseEnabled: E,
     isStreamingEnabled: r,
     itemID: o
   }), {
-    encodedSession: L,
-    error: N,
-    isLoading: O,
-    hasRequestInProgress: b = !1,
-    questions: k,
+    encodedSession: b,
+    error: k,
+    isLoading: z,
+    hasRequestInProgress: B = !1,
+    questions: D,
     suggestedQuestions: e
   } = c;
-  G(() => {
-    s && e.requestState === d.NOT_STARTED && i();
+  J(() => {
+    s && e.requestState === a.NOT_STARTED && i();
   }, [s, i, e.requestState]);
-  const z = {
-    createSession: _,
-    encodedSession: L,
-    error: N,
+  const F = {
+    createSession: L,
+    encodedSession: b,
+    error: k,
+    getAIStudioAgents: g,
     hostAppName: R,
-    hasRequestInProgress: b,
-    isAgentSelectorEnabled: C,
+    hasRequestInProgress: B,
+    isAgentSelectorEnabled: w,
+    isAIStudioAgentSelectorEnabled: l,
     isCitationsEnabled: n,
-    isDebugModeEnabled: l,
-    isMarkdownEnabled: w,
-    isLoading: O,
+    isDebugModeEnabled: Q,
+    isMarkdownEnabled: T,
+    isLoading: z,
     isOpen: s,
-    isResetChatEnabled: Q,
+    isResetChatEnabled: q,
     isStreamingEnabled: r,
     itemID: o,
-    onClearAction: U,
+    onClearAction: y,
     onCloseModal: h,
     onSelectAgent: u,
     onAgentEditorToggle: u,
-    questions: k,
-    retryQuestion: x,
-    sendQuestion: P,
-    shouldRenderProviders: !1,
-    stopQuestion: y,
-    suggestedQuestionsRequestState: t ? e.requestState : d.SUCCESS,
-    suggestedQuestions: t ? e.suggestions : q,
-    warningNotice: E,
-    warningNoticeAriaLabel: j
-  }, B = Object.fromEntries(Object.entries(z).filter(([V, D]) => D !== void 0));
-  return /* @__PURE__ */ M(a, {
-    ...B
+    questions: D,
+    retryQuestion: N,
+    sendQuestion: O,
+    shouldRenderProviders: j,
+    stopQuestion: P,
+    suggestedQuestionsRequestState: t ? e.requestState : a.SUCCESS,
+    suggestedQuestions: t ? e.suggestions : U,
+    warningNotice: _,
+    warningNoticeAriaLabel: v
+  }, G = Object.fromEntries(Object.entries(F).filter(([Y, H]) => H !== void 0));
+  return /* @__PURE__ */ X(d, {
+    ...G
   });
 };
 export {
-  te as ContentAnswersComponent,
-  te as default
+  ne as ContentAnswersComponent,
+  ne as default
 };

package/esm/lib/components/common/agentUtils.js

@@ -0,0 +1,9 @@
+const t = (f, g, o, n) => {
+  let i;
+  return f && (i = g.config), o && (i = n ? {
+    id: n.id
+  } : void 0), i;
+};
+export {
+  t as getAIAgentConfig
+};

package/esm/lib/components/footer/footer.js

@@ -1,126 +1,136 @@
 import "../../../../styles/footer.css";
 import * as r from "react";
-import { useIntl as j } from "react-intl";
-import { useBreakpoint as U, Breakpoint as W, Avatar as z, TextArea as D, Button as Y } from "@box/blueprint-web";
-import { ArrowUp as $ } from "@box/blueprint-web-assets/icons/Line";
-import { useAgents as J } from "../../contexts/AgentsContext.js";
-import { FooterActions as Q } from "./footer-actions.js";
-import V from "../../messages.js";
-import { isDebugModeTrigger as Z, isEnterTrigger as q } from "../common/keyInputUtils.js";
-import { TEXT_AREA as n } from "./constants.js";
-import m from "./messages.js";
-import { LOGGER_BASE_CONFIG as N, LOGGER_ACTION_CLICK as g, LOGGER_ACTION_KEYPRESS as P } from "../common/constants.js";
-import { jsxs as O, jsx as u } from "react/jsx-runtime";
-const tt = "_questionInput_1pdo1_1", at = "_avatar_1pdo1_11", rt = "_submitButton_1pdo1_14", et = "_textArea_1pdo1_17", ot = "_submitButtonTooltip_1pdo1_26", d = {
-  questionInput: tt,
-  avatar: at,
-  submitButton: rt,
-  textArea: et,
-  submitButtonTooltip: ot
-}, bt = ({
-  askSuggestedQuestion: v,
-  contentType: C,
-  enableDebugMode: E = !1,
+import { useIntl as z } from "react-intl";
+import { useBreakpoint as D, Breakpoint as Y, Avatar as J, TextArea as Q, Button as S } from "@box/blueprint-web";
+import { ArrowUp as V } from "@box/blueprint-web-assets/icons/Line";
+import { useAgents as Z } from "@box/box-ai-agent-selector";
+import { useAgents as g } from "../../contexts/AgentsContext.js";
+import { FooterActions as q } from "./footer-actions.js";
+import P from "../../messages.js";
+import { getAIAgentConfig as X } from "../common/agentUtils.js";
+import { isDebugModeTrigger as tt, isEnterTrigger as at } from "../common/keyInputUtils.js";
+import { TEXT_AREA as i } from "./constants.js";
+import u from "./messages.js";
+import { LOGGER_BASE_CONFIG as w, LOGGER_ACTION_CLICK as rt, LOGGER_ACTION_KEYPRESS as et } from "../common/constants.js";
+import { jsxs as H, jsx as p } from "react/jsx-runtime";
+const ot = "_questionInput_1pdo1_1", st = "_avatar_1pdo1_11", it = "_submitButton_1pdo1_14", nt = "_textArea_1pdo1_17", mt = "_submitButtonTooltip_1pdo1_26", A = {
+  questionInput: ot,
+  avatar: st,
+  submitButton: it,
+  textArea: nt,
+  submitButtonTooltip: mt
+}, kt = ({
+  askSuggestedQuestion: h,
+  contentType: T,
+  enableDebugMode: b = !1,
   hasRequestInProgress: e,
   isAgentSelectorEnabled: f,
-  isDebugModeShown: h,
-  isStopResponseEnabled: X,
-  isStreamingEnabled: w,
-  lastQuestion: x,
-  onRetryQuestion: T,
-  onStopQuestion: H,
+  isAIStudioAgentSelectorEnabled: _,
+  isDebugModeShown: k,
+  isStopResponseEnabled: R,
+  isStreamingEnabled: y,
+  lastQuestion: L,
+  onRetryQuestion: E,
+  onStopQuestion: I,
   recordAction: o,
-  sendQuestion: k,
-  setAskSuggestedQuestion: A,
-  toggleDebugMode: s,
-  user: L
+  sendQuestion: M,
+  setAskSuggestedQuestion: B,
+  toggleDebugMode: n,
+  user: G
 }) => {
-  const i = j(), I = U(), a = /* @__PURE__ */ r.createRef(), p = I <= W.Medium, [c, M] = r.useState(!0), [R, B] = r.useState(!1), {
-    selectedAgent: _
-  } = J(), b = r.useCallback(() => {
+  const s = z(), K = D(), a = /* @__PURE__ */ r.createRef(), v = K <= Y.Medium, [c, N] = r.useState(!0), [F, O] = r.useState(!1), {
+    selectedAgent: d
+  } = g(), {
+    selectedAgent: C
+  } = Z(), x = r.useCallback(() => {
     a.current && a.current.focus();
-  }, [a]), y = r.useCallback(() => {
-    var G;
-    let t = ((G = a.current) == null ? void 0 : G.value) ?? "";
-    a.current && t.length > n.MAX_LENGTH && (a.current.value = t.slice(0, n.MAX_LENGTH), t = a.current.value), B(t.length >= n.MAX_LENGTH), M(t.trim().length === 0);
+  }, [a]), j = r.useCallback(() => {
+    var m;
+    let t = ((m = a.current) == null ? void 0 : m.value) ?? "";
+    a.current && t.length > i.MAX_LENGTH && (a.current.value = t.slice(0, i.MAX_LENGTH), t = a.current.value), O(t.length >= i.MAX_LENGTH), N(t.trim().length === 0);
   }, [a]), l = r.useCallback(() => {
-    if (b(), !e && a.current) {
+    if (x(), !e && a.current) {
       const t = {
         prompt: a.current.value
       };
-      t.prompt && t.prompt.trim() && (k(t, f ? _.config : void 0), a.current.value = "", M(!0), B(!1)), h && s && s();
+      if (t.prompt && t.prompt.trim()) {
+        const m = X(f, d, _, C);
+        M(t, m), a.current.value = "", N(!0), O(!1);
+      }
+      k && n && n();
     }
-  }, [b, e, a, f, h, _.config, k, s]), K = r.useCallback((t) => {
+  }, [C, x, e, a, _, f, k, d, M, n]), U = r.useCallback((t) => {
     t.preventDefault(), !e && !c && o && o({
-      ...N,
-      action: g,
+      ...w,
+      action: rt,
       target: "ask"
     }), l();
-  }, [e, c, o, l]), S = r.useCallback((t) => {
-    E && s && Z(t) && s(), q(t) && (t.preventDefault(), !e && !c && o && o({
-      ...N,
-      action: P,
+  }, [e, c, o, l]), W = r.useCallback((t) => {
+    b && n && tt(t) && n(), at(t) && (t.preventDefault(), !e && !c && o && o({
+      ...w,
+      action: et,
       target: "ask"
     }), l());
-  }, [E, e, c, o, l, s]), F = r.useCallback((t) => {
-    T(t, f ? _.config : void 0);
-  }, [f, T, _.config]);
+  }, [b, e, c, o, l, n]), $ = r.useCallback((t) => {
+    const m = X(f, d, _, C);
+    E(t, m);
+  }, [C, _, f, E, d]);
   return r.useEffect(() => {
-    setTimeout(b, 0);
+    setTimeout(x, 0);
   }, []), r.useEffect(() => {
-    v && a.current && !e && A && (a.current.value = v, l(), A(null));
-  }, [v]), /* @__PURE__ */ O("div", {
-    children: [x && /* @__PURE__ */ u(Q, {
-      isStopResponseEnabled: X,
-      isStreamingEnabled: w,
-      lastQuestion: x,
-      onRetryQuestion: F,
-      onStopQuestion: H,
+    h && a.current && !e && B && (a.current.value = h, l(), B(null));
+  }, [h]), /* @__PURE__ */ H("div", {
+    children: [L && /* @__PURE__ */ p(q, {
+      isStopResponseEnabled: R,
+      isStreamingEnabled: y,
+      lastQuestion: L,
+      onRetryQuestion: $,
+      onStopQuestion: I,
       recordAction: o
-    }), /* @__PURE__ */ O("div", {
-      className: d.questionInput,
-      children: [!p && /* @__PURE__ */ u("div", {
-        className: d.avatar,
+    }), /* @__PURE__ */ H("div", {
+      className: A.questionInput,
+      children: [!v && /* @__PURE__ */ p("div", {
+        className: A.avatar,
         "data-testid": "content-answers-question-input-avatar",
-        children: /* @__PURE__ */ u(z, {
-          alt: i.formatMessage(V.userAvatar),
+        children: /* @__PURE__ */ p(J, {
+          alt: s.formatMessage(P.userAvatar),
           colorIndex: 0,
-          src: L.avatarURL,
-          text: L.name.charAt(0)
+          src: G.avatarURL,
+          text: G.name.charAt(0)
         })
-      }), /* @__PURE__ */ u(D, {
+      }), /* @__PURE__ */ p(Q, {
         ref: a,
-        className: d.textArea,
+        className: A.textArea,
         "data-testid": "content-answers-question-input",
-        error: R && i.formatMessage(m.maxCharactersReachedError, {
-          characterLimit: n.MAX_LENGTH
+        error: F && s.formatMessage(u.maxCharactersReachedError, {
+          characterLimit: i.MAX_LENGTH
         }),
         hideLabel: !0,
-        label: i.formatMessage(m.askQuestionPlaceholder, {
-          type: C
+        label: s.formatMessage(u.askQuestionPlaceholder, {
+          type: T
         }),
-        maxLength: n.MAX_LENGTH,
-        maxRows: p ? n.MAX_ROWS_MOBILE : n.MAX_ROWS,
-        onChange: y,
-        onKeyDown: S,
-        placeholder: i.formatMessage(m.askQuestionPlaceholder, {
-          type: C
+        maxLength: i.MAX_LENGTH,
+        maxRows: v ? i.MAX_ROWS_MOBILE : i.MAX_ROWS,
+        onChange: j,
+        onKeyDown: W,
+        placeholder: s.formatMessage(u.askQuestionPlaceholder, {
+          type: T
         })
-      }), /* @__PURE__ */ u(Y, {
-        "aria-label": i.formatMessage(m.ask),
-        className: d.submitButton,
+      }), /* @__PURE__ */ p(S, {
+        "aria-label": s.formatMessage(u.ask),
+        className: A.submitButton,
         "data-testid": "content-answers-submit-button",
         disabled: c || e,
-        icon: p ? $ : void 0,
+        icon: v ? V : void 0,
         loading: e,
-        loadingAriaLabel: i.formatMessage(m.askDisabledTooltip),
-        onClick: K,
+        loadingAriaLabel: s.formatMessage(u.askDisabledTooltip),
+        onClick: U,
         size: "large",
-        children: p ? void 0 : i.formatMessage(m.ask)
+        children: v ? void 0 : s.formatMessage(u.ask)
       })]
     })]
   });
 };
 export {
-  bt as Footer
+  kt as Footer
 };

package/esm/lib/components/modal/modal.js

@@ -1,128 +1,145 @@
 import "../../../../styles/modal.css";
-import { useBreakpoint as G, Breakpoint as H, Modal as a, Text as P, Tooltip as E, IconButton as S } from "@box/blueprint-web";
-import { Trash as y } from "@box/blueprint-web-assets/icons/Line";
-import { BoxAiLogo as R } from "@box/blueprint-web-assets/icons/Logo";
-import { Size8 as C } from "@box/blueprint-web-assets/tokens/tokens";
+import { useBreakpoint as G, Breakpoint as z, Modal as a, Text as R, Tooltip as j, IconButton as E } from "@box/blueprint-web";
+import { Trash as F } from "@box/blueprint-web-assets/icons/Line";
+import { BoxAiLogo as K } from "@box/blueprint-web-assets/icons/Logo";
+import { Size8 as A } from "@box/blueprint-web-assets/tokens/tokens";
+import { BoxAiAgentSelectorWithApi as W, AgentsProvider as $ } from "@box/box-ai-agent-selector";
 import u from "react";
-import { useIntl as j } from "react-intl";
-import { BoxAiContentAnswers as F } from "../../box-ai-content-answers.js";
-import { AgentsProvider as K } from "../../contexts/AgentsContext.js";
-import { AgentSelector as q } from "../agents/agent-selector.js";
-import { LOGGER_BASE_CONFIG as g, LOGGER_ACTION_CLICK as D } from "../common/constants.js";
-import J from "./hooks/useStopPropagationOnEsc.js";
-import l from "./messages.js";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-const Q = "_BoxAIIconColor_e9yaz_1", U = "_modalHeader_e9yaz_5", V = "_contentAnswersModal_e9yaz_10", W = "_boxAiContentAnswers_e9yaz_17", X = "_clearButton_e9yaz_25", Y = "_contentAnswerModal_e9yaz_1", o = {
-  BoxAIIconColor: Q,
-  modalHeader: U,
-  contentAnswersModal: V,
-  boxAiContentAnswers: W,
-  clearButton: X,
-  "modal-close-button": "_modal-close-button_e9yaz_29",
-  contentAnswerModal: Y
-}, _e = ({
+import { useIntl as q } from "react-intl";
+import { BoxAiContentAnswers as D } from "../../box-ai-content-answers.js";
+import { AgentsProvider as J } from "../../contexts/AgentsContext.js";
+import { AgentSelector as Q } from "../agents/agent-selector.js";
+import { LOGGER_BASE_CONFIG as h, LOGGER_ACTION_CLICK as U } from "../common/constants.js";
+import V from "./hooks/useStopPropagationOnEsc.js";
+import i from "./messages.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+const X = "_BoxAIIconColor_1ed3r_1", Y = "_modalHeader_1ed3r_5", Z = "_contentAnswersModal_1ed3r_10", y = "_boxAiContentAnswers_1ed3r_17", ee = "_clearButton_1ed3r_25", te = "_contentAnswerModal_1ed3r_1", oe = "_modalHeaderContainer_1ed3r_54", ne = "_agentSelectorTrigger_1ed3r_62", re = "_agentSelectorContent_1ed3r_73", t = {
+  BoxAIIconColor: X,
+  modalHeader: Y,
+  contentAnswersModal: Z,
+  boxAiContentAnswers: y,
+  clearButton: ee,
+  "modal-close-button": "_modal-close-button_1ed3r_29",
+  contentAnswerModal: te,
+  modalHeaderContainer: oe,
+  agentSelectorTrigger: ne,
+  agentSelectorContent: re
+}, we = ({
   children: M,
+  getAIStudioAgents: w,
   hostAppName: c,
   isAgentSelectorEnabled: m,
-  isDebugModeEnabled: w,
-  isResetChatEnabled: b,
-  isStopResponseEnabled: h = !1,
-  itemSize: d,
-  extension: f,
-  onClearAction: _,
-  onSelectAgent: x,
-  recordAction: r,
-  shouldRenderProviders: B = !0,
-  stopPropagationOnEsc: I,
-  ...v
+  isAIStudioAgentSelectorEnabled: s,
+  isDebugModeEnabled: x,
+  isResetChatEnabled: B,
+  isStopResponseEnabled: b = !1,
+  itemSize: g,
+  extension: _,
+  onClearAction: C,
+  onSelectAgent: v,
+  recordAction: o,
+  shouldRenderProviders: I = !0,
+  stopPropagationOnEsc: T,
+  ...H
 }) => {
   const {
-    open: A,
-    defaultOpen: z,
+    open: f,
+    defaultOpen: N,
     onOpenChange: L,
-    modal: N,
-    ...O
-  } = v, s = j(), k = G() <= H.Medium;
-  J(I, A);
-  const t = u.useCallback((n) => {
-    r && (n.data ?? (n.data = {}), n.data.hostAppName = c, r(n));
-  }, [c, r]);
+    modal: O,
+    ...S
+  } = H, l = q(), k = G() <= z.Medium;
+  V(T, f);
+  const n = u.useCallback((r) => {
+    o && (r.data ?? (r.data = {}), r.data.hostAppName = c, o(r));
+  }, [c, o]);
   u.useEffect(() => {
-    t({
-      ...g,
+    n({
+      ...h,
       target: "loaded",
       data: {
-        fileSize: d,
-        fileType: f
+        fileSize: g,
+        fileType: _
       }
     });
-  }, [t, f, d, r]);
-  const T = () => {
-    _ && (_(), t({
-      ...g,
-      action: D,
+  }, [n, _, g, o]);
+  const P = () => {
+    C && (C(), n({
+      ...h,
+      action: U,
       target: "clearChat"
     }));
-  }, p = /* @__PURE__ */ i(a, {
-    defaultOpen: z,
-    modal: N,
+  }, p = /* @__PURE__ */ d(a, {
+    defaultOpen: N,
+    modal: O,
     onOpenChange: L,
-    open: A,
+    open: f,
     children: [/* @__PURE__ */ e(a.Trigger, {
       children: M
-    }), /* @__PURE__ */ i(a.Content, {
-      className: o.contentAnswersModal,
+    }), /* @__PURE__ */ d(a.Content, {
+      className: t.contentAnswersModal,
       "data-testid": "content-answers-modal",
       size: "xlarge",
       children: [/* @__PURE__ */ e(a.Header, {
-        children: /* @__PURE__ */ i("div", {
-          className: o.modalHeader,
-          children: [!k && /* @__PURE__ */ e(R, {
-            className: o.BoxAIIconColor,
+        className: t.modalHeaderContainer,
+        children: /* @__PURE__ */ d("div", {
+          className: t.modalHeader,
+          children: [!k && /* @__PURE__ */ e(K, {
+            className: t.BoxAIIconColor,
             "data-testid": "content-answers-icon-color",
-            height: C,
-            width: C
-          }), /* @__PURE__ */ e(P, {
+            height: A,
+            width: A
+          }), /* @__PURE__ */ e(R, {
             as: "span",
             variant: "titleMedium",
-            children: s.formatMessage(l.contentAnswersTitle)
-          }), m && /* @__PURE__ */ e(q, {
-            onSelectAgent: x,
-            recordAction: t
+            children: l.formatMessage(i.contentAnswersTitle)
+          }), !s && m && /* @__PURE__ */ e(Q, {
+            onSelectAgent: v,
+            recordAction: n
+          }), s && /* @__PURE__ */ e(W, {
+            contentClassName: t.agentSelectorContent,
+            fetcher: w,
+            hostAppName: c,
+            recordAction: o,
+            shouldHideAgentSelectorOnLoad: !0,
+            triggerChipClassName: t.agentSelectorTrigger
           })]
         })
-      }), b && /* @__PURE__ */ e(E, {
-        content: s.formatMessage(l.clearConversationLabel),
+      }), B && /* @__PURE__ */ e(j, {
+        content: l.formatMessage(i.clearConversationLabel),
         "data-testid": "clear-conversation-tooltip",
         side: "top",
         variant: "standard",
-        children: /* @__PURE__ */ e(S, {
-          "aria-label": s.formatMessage(l.clearConversationLabel),
-          className: o.clearButton,
+        children: /* @__PURE__ */ e(E, {
+          "aria-label": l.formatMessage(i.clearConversationLabel),
+          className: t.clearButton,
           "data-testid": "clear-conversation-button",
-          icon: y,
-          onClick: T,
+          icon: F,
+          onClick: P,
           size: "small"
         })
       }), /* @__PURE__ */ e(a.Close, {
-        "aria-label": s.formatMessage(l.closeModalAriaLabel),
-        className: o["modal-close-button"],
+        "aria-label": l.formatMessage(i.closeModalAriaLabel),
+        className: t["modal-close-button"],
         size: "small"
-      }), /* @__PURE__ */ e(F, {
-        className: o.boxAiContentAnswers,
-        isAgentSelectorEnabled: m,
-        isDebugModeEnabled: w,
-        isStopResponseEnabled: h,
-        recordAction: t,
-        ...O
+      }), /* @__PURE__ */ e(D, {
+        className: t.boxAiContentAnswers,
+        isAgentSelectorEnabled: !s && m,
+        isAIStudioAgentSelectorEnabled: s,
+        isDebugModeEnabled: x,
+        isStopResponseEnabled: b,
+        recordAction: n,
+        ...S
       })]
     })]
   });
-  return B ? /* @__PURE__ */ e(K, {
-    children: p
+  return I ? /* @__PURE__ */ e($, {
+    children: /* @__PURE__ */ e(J, {
+      children: p
+    })
   }) : p;
 };
 export {
-  _e as IntelligenceModal,
-  _e as default
+  we as IntelligenceModal,
+  we as default
 };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@box/box-ai-content-answers",
-  "version": "0.64.2",
+  "version": "0.65.0",
   "peerDependencies": {
     "@box/blueprint-web": "^7.8.0",
     "@box/blueprint-web-assets": "^4.16.0",
+    "@box/box-ai-agent-selector": "^0.15.2",
     "highlight.js": "^11.9.0",
     "immutable": "^4.0.0",
     "lodash": "^4.17.15",
@@ -13,8 +14,9 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@box/blueprint-web": "^8.5.2",
-    "@box/blueprint-web-assets": "^4.28.0",
+    "@box/blueprint-web": "^8.5.3",
+    "@box/blueprint-web-assets": "^4.29.0",
+    "@box/box-ai-agent-selector": "^0.15.2",
     "@box/storybook-utils": "^0.7.0",
     "@testing-library/react": "^15.0.6",
     "react": "^18.3.0",
@@ -52,5 +54,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "6aca748ad995a1a02df2af9feacf9806e53544de"
+  "gitHead": "31e23f5c37c183d2237deeab90eb3bc5c2b360e2"
 }

package/styles/modal.css

@@ -1 +1 @@
-._BoxAIIconColor_e9yaz_1{margin-right:.75rem}._modalHeader_e9yaz_5{display:flex;align-items:center}._contentAnswersModal_e9yaz_10{display:flex;flex-basis:0;width:100%;height:100%;max-height:43.875rem}._contentAnswersModal_e9yaz_10 ._boxAiContentAnswers_e9yaz_17{display:flex;flex-direction:column;flex-grow:1;max-height:43.875rem;overflow:hidden;box-shadow:0 -1px 8px #0000000d,0 -1px #e8e8e8}._contentAnswersModal_e9yaz_10 ._clearButton_e9yaz_25{position:absolute;right:60px}._contentAnswersModal_e9yaz_10 ._modal-close-button_e9yaz_29,._contentAnswersModal_e9yaz_10 ._clearButton_e9yaz_25{top:1.25rem}@media (max-width: 374px){._contentAnswersModal_e9yaz_10,#_contentAnswerModal_e9yaz_1{flex-basis:100%;max-height:unset}._contentAnswersModal_e9yaz_10 ._boxAiContentAnswers_e9yaz_17,#_contentAnswerModal_e9yaz_1 ._boxAiContentAnswers_e9yaz_17{display:flex;flex-flow:column;max-height:unset}._contentAnswersModal_e9yaz_10 ._modal-close-button_e9yaz_29,._contentAnswersModal_e9yaz_10 ._clearButton_e9yaz_25,#_contentAnswerModal_e9yaz_1 ._modal-close-button_e9yaz_29,#_contentAnswerModal_e9yaz_1 ._clearButton_e9yaz_25{top:1rem}}
+._BoxAIIconColor_1ed3r_1{margin-right:.75rem}._modalHeader_1ed3r_5{display:flex;align-items:center}._contentAnswersModal_1ed3r_10{display:flex;flex-basis:0;width:100%;height:100%;max-height:43.875rem}._contentAnswersModal_1ed3r_10 ._boxAiContentAnswers_1ed3r_17{display:flex;flex-direction:column;flex-grow:1;max-height:43.875rem;overflow:hidden;box-shadow:0 -1px 8px #0000000d,0 -1px #e8e8e8}._contentAnswersModal_1ed3r_10 ._clearButton_1ed3r_25{position:absolute;right:60px}._contentAnswersModal_1ed3r_10 ._modal-close-button_1ed3r_29,._contentAnswersModal_1ed3r_10 ._clearButton_1ed3r_25{top:1.25rem}@media (max-width: 374px){._contentAnswersModal_1ed3r_10,#_contentAnswerModal_1ed3r_1{flex-basis:100%;max-height:unset}._contentAnswersModal_1ed3r_10 ._boxAiContentAnswers_1ed3r_17,#_contentAnswerModal_1ed3r_1 ._boxAiContentAnswers_1ed3r_17{display:flex;flex-flow:column;max-height:unset}._contentAnswersModal_1ed3r_10 ._modal-close-button_1ed3r_29,._contentAnswersModal_1ed3r_10 ._clearButton_1ed3r_25,#_contentAnswerModal_1ed3r_1 ._modal-close-button_1ed3r_29,#_contentAnswerModal_1ed3r_1 ._clearButton_1ed3r_25{top:1rem}}@media (max-width: 540px){._contentAnswersModal_1ed3r_10 div:has(._modalHeaderContainer_1ed3r_54){width:100%;box-sizing:border-box}._contentAnswersModal_1ed3r_10 ._modalHeaderContainer_1ed3r_54 ._modalHeader_1ed3r_5{flex-direction:column;align-items:start}._contentAnswersModal_1ed3r_10 ._modalHeaderContainer_1ed3r_54 ._modalHeader_1ed3r_5 ._agentSelectorTrigger_1ed3r_62{margin-inline-start:0;margin-block-start:var(--space-8);width:100%;flex:1}._contentAnswersModal_1ed3r_10 ._modalHeaderContainer_1ed3r_54 ._modalHeader_1ed3r_5 ._agentSelectorTrigger_1ed3r_62 button{width:100%;max-width:100%}}._agentSelectorContent_1ed3r_73{max-height:15rem}

package/types/lib/components/api-wrapper/content-answers-component.d.ts

@@ -2,5 +2,5 @@ import { type ApiWrapperProps } from './types';
 export type ContentAnswersComponentProps = ApiWrapperProps & {
     WrappedComponent: React.ComponentType<ApiWrapperProps>;
 };
-export declare const ContentAnswersComponent: ({ WrappedComponent, createSessionRequest, getAgentConfig, fetchTimeout, formatCitations, getAnswer, getAnswerStreaming, getSuggestedQuestions, hostAppName, isAgentSelectorEnabled, isCitationsEnabled, isDebugModeEnabled, isMarkdownEnabled, isOpen, isResetChatEnabled, isStopResponseEnabled, isStreamingEnabled, itemID, onCloseModal, suggestedQuestions, warningNotice, warningNoticeAriaLabel, }: ContentAnswersComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnswersComponent: ({ WrappedComponent, createSessionRequest, getAgentConfig, getAIStudioAgents, fetchTimeout, formatCitations, getAnswer, getAnswerStreaming, getSuggestedQuestions, hostAppName, isAgentSelectorEnabled, isAIStudioAgentSelectorEnabled, isCitationsEnabled, isDebugModeEnabled, isMarkdownEnabled, isOpen, isResetChatEnabled, isStopResponseEnabled, isStreamingEnabled, itemID, onCloseModal, shouldRenderProviders, suggestedQuestions, warningNotice, warningNoticeAriaLabel, }: ContentAnswersComponentProps) => import("react/jsx-runtime").JSX.Element;
 export default ContentAnswersComponent;

package/types/lib/components/api-wrapper/types.d.ts

@@ -1,3 +1,4 @@
+import { type AgentListResponse } from '@box/box-ai-agent-selector';
 import { type AgentType, type CitationResponse, type CitationType, type CONTENT_ERROR, type QuestionType, type REQUEST_STATE, type RetryQuestion, type StopQuestion, type SubmitQuestion, type SuggestedQuestionsResponse, type SuggestedQuestionType } from '../../types';
 import { type ContentAnswersRecordType } from './records';
 export type CreateSessionResponse = {
@@ -54,11 +55,18 @@ export type ApiWrapperProps = {
     fetchTimeout?: StreamResponseTimeout;
     formatCitations?: (citations: Array<CitationResponse>) => Array<CitationType>;
     getAgentConfig?: agentFetcherType;
+    getAIStudioAgents?(): Promise<AgentListResponse>;
     getAnswer?: fetcherType;
     getAnswerStreaming?: fetcherStreamingType;
     getSuggestedQuestions?: SuggestedQuestionFetcherType;
     hostAppName?: string;
+    /**
+     * Flag to enable or disable the agent selector
+     * Prefer passing isAIStudioAgentSelectorEnabled and getAIStudioAgents instead since this prop will be removed soon
+     * @deprecated
+     */
     isAgentSelectorEnabled?: boolean;
+    isAIStudioAgentSelectorEnabled?: boolean;
     isDebugModeEnabled?: boolean;
     isResetChatEnabled?: boolean;
     isStopResponseEnabled?: boolean;
@@ -69,6 +77,7 @@ export type ApiWrapperProps = {
     isStreamingEnabled?: boolean;
     itemID?: string;
     onCloseModal?: () => void;
+    shouldRenderProviders?: boolean;
     suggestedQuestionsRequestState?: REQUEST_STATE;
     suggestedQuestions?: SuggestedQuestionType[];
     warningNotice?: string;

package/types/lib/components/common/agentUtils.d.ts

@@ -0,0 +1 @@
+export declare const getAIAgentConfig: (isAgentSelectorEnabled: any, selectedAgent: any, isAIStudioAgentSelectorEnabled: any, aiStudioSelectedAgent: any) => any;

package/types/lib/components/common/constants.d.ts

@@ -1,10 +1,7 @@
+import { type RecordActionType } from '../../types';
 export declare const LOGGER_COMPONENT = "modal";
 export declare const LOGGER_FEATURE = "answers";
 export declare const LOGGER_ACTION_PROGRAMMATIC = "programmatic";
 export declare const LOGGER_ACTION_CLICK = "click";
 export declare const LOGGER_ACTION_KEYPRESS = "keypress";
-export declare const LOGGER_BASE_CONFIG: {
-    action: string;
-    component: string;
-    feature: string;
-};
+export declare const LOGGER_BASE_CONFIG: RecordActionType;

package/types/lib/components/footer/footer.d.ts

@@ -8,8 +8,14 @@ export interface FooterProps {
     enableDebugMode?: boolean;
     /** Whether to indicate if there is a request in progress like an answer being fetched or streamed */
     hasRequestInProgress: boolean;
-    /** Whether to show the agent selector or not */
+    /**
+     * Flag to enable or disable the agent selector
+     * Prefer passing isAIStudioAgentSelectorEnabled instead since this prop will be removed soon
+     * @deprecated
+     */
     isAgentSelectorEnabled?: boolean;
+    /** Whether to show the AI studio agent selector or not */
+    isAIStudioAgentSelectorEnabled?: boolean;
     /** Flag to indicate if the CTRL+SHIFT+X is currently shown */
     isDebugModeShown?: boolean;
     /** Whether to give user a possibility to stop the response before any answer is generated */
@@ -33,4 +39,4 @@ export interface FooterProps {
     /** User information consisting on their name and an optional avatar */
     user: UserInfoType;
 }
-export declare const Footer: ({ askSuggestedQuestion, contentType, enableDebugMode, hasRequestInProgress, isAgentSelectorEnabled, isDebugModeShown, isStopResponseEnabled, isStreamingEnabled, lastQuestion, onRetryQuestion, onStopQuestion, recordAction, sendQuestion, setAskSuggestedQuestion, toggleDebugMode, user, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Footer: ({ askSuggestedQuestion, contentType, enableDebugMode, hasRequestInProgress, isAgentSelectorEnabled, isAIStudioAgentSelectorEnabled, isDebugModeShown, isStopResponseEnabled, isStreamingEnabled, lastQuestion, onRetryQuestion, onStopQuestion, recordAction, sendQuestion, setAskSuggestedQuestion, toggleDebugMode, user, }: FooterProps) => import("react/jsx-runtime").JSX.Element;

package/types/lib/components/modal/modal.d.ts

@@ -1,14 +1,23 @@
 import { type ModalProps } from '@box/blueprint-web';
+import { type AgentListResponse } from '@box/box-ai-agent-selector';
 import React from 'react';
 import { type BoxAiContentAnswersProps } from '../../box-ai-content-answers';
 import { type AgentType, type RecordActionType } from '../../types';
 export type IntelligenceModalProps = ModalProps & BoxAiContentAnswersProps & {
+    /** API callback to send to AI Studio Agent Selector */
+    getAIStudioAgents?(): Promise<AgentListResponse>;
     /** Name of the host application */
     hostAppName?: string;
     /** Size of the item used for QA. This is used for log purposes */
     itemSize?: string;
-    /** Flag to enable or disable the agent selector */
+    /**
+     * Flag to enable or disable the agent selector
+     * Prefer passing isAIStudioAgentSelectorEnabled and getAIStudioAgents instead since this prop will be removed soon
+     * @deprecated
+     */
     isAgentSelectorEnabled?: boolean;
+    /** Flag to enable or disable the AI studio agent selector */
+    isAIStudioAgentSelectorEnabled?: boolean;
     /** Flag to enable or disable the debug mode via CTRL+SHIFT+X */
     isDebugModeEnabled?: boolean;
     /** Flag to enable or disable the reset chat button */

package/types/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { type LOGGER_ACTION_CLICK, type LOGGER_ACTION_KEYPRESS, type LOGGER_ACTION_PROGRAMMATIC } from './components/common/constants';
 export declare enum ANSWER_ERROR {
     GENERAL = "general",
     RATE_LIMITING = "rate_limiting",
@@ -41,8 +42,14 @@ export type ChatProps = WelcomeMessageProps & {
     isCitationsEnabled?: boolean;
     /** Whether if the answers supports markdown or not */
     isMarkdownEnabled?: boolean;
-    /** Whether to show the agent selector or not */
+    /**
+     * Flag to enable or disable the agent selector
+     * Prefer passing isAIStudioAgentSelectorEnabled instead since this prop will be removed soon
+     * @deprecated
+     */
     isAgentSelectorEnabled?: boolean;
+    /** Whether to show the AI studio agent selector or not */
+    isAIStudioAgentSelectorEnabled?: boolean;
     /** Whether to allow CTRL+SHIFT+X feature or not */
     isDebugModeEnabled?: boolean;
     /** Whether to give user a possibility to stop the response before any answer is generated */
@@ -82,6 +89,7 @@ export type ContentProps = Omit<ChatProps, 'handleScrollToBottom'> & {
     setIsErrorMessageShown: ((value: boolean) => void) | null;
 };
 export type AgentType = {
+    id: string;
     config: object;
     description?: string;
     isDefault?: boolean;
@@ -93,11 +101,18 @@ export type AgentState = {
     selectedAgent: AgentType;
 };
 export type RecordActionType = {
-    action: string;
-    data?: any;
+    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;
+    target?: string;
 };
 export type QuestionType = {
     answer?: string;