@box/box-ai-content-answers 0.57.7 → 0.58.0

package/esm/lib/components/answer/answer.js

@@ -1,28 +1,28 @@
 import "../../../../styles/answer.css";
-import { useBreakpoint as v, Breakpoint as P, Text as T } from "@box/blueprint-web";
-import { BoxAi as j, AlertTriangle as L } from "@box/blueprint-web-assets/icons/Line";
-import { Size5 as x, Size6 as D, Gray65 as F, Size4 as f } from "@box/blueprint-web-assets/tokens/tokens";
-import M from "clsx";
+import { useBreakpoint as P, Breakpoint as T, Text as j } from "@box/blueprint-web";
+import { BoxAi as L, AlertTriangle as x } from "@box/blueprint-web-assets/icons/Line";
+import { Size5 as D, Size6 as F, Gray65 as M, Size4 as f } from "@box/blueprint-web-assets/tokens/tokens";
+import U from "clsx";
 import * as m from "react";
-import { useIntl as U } from "react-intl";
+import { useIntl as k } from "react-intl";
 import { A as t } from "../../../../chunks/types.js";
 import { MediaContainer as l } from "../common/media-container.js";
-import { AnswerContent as k } from "./answer-content.js";
-import { CopyButton as y } from "./copy-button.js";
-import { InlineError as z } from "./inline-error.js";
-import { LoadingElement as B } from "./loading-element.js";
+import { AnswerContent as y } from "./answer-content.js";
+import { CopyButton as z } from "./copy-button.js";
+import { InlineError as B } from "./inline-error.js";
+import { LoadingElement as H } from "./loading-element.js";
 import d from "./messages.js";
-import { References as H } from "./references.js";
+import { References as C } from "./references.js";
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-const C = "_answer_17ojr_1", G = "_alertIcon_17ojr_4", b = "_error_17ojr_7", W = "_footer_17ojr_11", q = "_shouldUseAnimation_17ojr_16", J = "_shouldAnimateHeight_17ojr_20", K = "_iconAvatar_17ojr_24", r = {
-  answer: C,
-  alertIcon: G,
-  error: b,
-  footer: W,
-  shouldUseAnimation: q,
-  shouldAnimateHeight: J,
-  iconAvatar: K
-}, Q = /* @__PURE__ */ new Set([t.RATE_LIMITING, t.NO_CONTENT, t.PRECONDITION_FAILED, t.GENERAL]), po = /* @__PURE__ */ m.memo(({
+const G = "_answer_17ojr_1", b = "_alertIcon_17ojr_4", W = "_error_17ojr_7", q = "_footer_17ojr_11", J = "_shouldUseAnimation_17ojr_16", K = "_shouldAnimateHeight_17ojr_20", Q = "_iconAvatar_17ojr_24", r = {
+  answer: G,
+  alertIcon: b,
+  error: W,
+  footer: q,
+  shouldUseAnimation: J,
+  shouldAnimateHeight: K,
+  iconAvatar: Q
+}, V = /* @__PURE__ */ new Set([t.RATE_LIMITING, t.NO_CONTENT, t.PRECONDITION_FAILED, t.GENERAL]), _o = /* @__PURE__ */ m.memo(({
   answer: a,
   citations: h,
   error: o,
@@ -32,24 +32,25 @@ const C = "_answer_17ojr_1", G = "_alertIcon_17ojr_4", b = "_error_17ojr_7", W =
   isLoading: A = !1,
   isMarkdownEnabled: I = !1,
   onCitationClick: N,
+  onAnswerCopy: R,
   recordAction: i,
-  useAnimation: R = !0
+  useAnimation: w = !0
 }) => {
-  const E = Q.has(o), p = A && !a && !o, [w, g] = m.useState(s), {
+  const E = V.has(o), p = A && !a && !o, [g, O] = m.useState(s), {
     formatMessage: c
-  } = U(), _ = v() === P.Small ? x : D;
+  } = k(), _ = P() === T.Small ? D : F;
   m.useEffect(() => {
-    setTimeout(() => g(s), 0);
+    setTimeout(() => O(s), 0);
   }, [s]);
-  const O = () => /* @__PURE__ */ n(T, {
+  const v = () => /* @__PURE__ */ n(j, {
     as: "p",
     className: r.error,
     color: "textOnLightSecondary",
     "data-testid": "content-answers-error",
     variant: "caption",
-    children: [o === t.RESPONSE_INTERRUPTED && c(d.responseInterruptedError), o === t.RESPONSE_FAILED && c(d.responseFailedError), o === t.RESPONSE_STOPPED && c(d.responseStoppedError), o !== t.RESPONSE_STOPPED && /* @__PURE__ */ e(L, {
+    children: [o === t.RESPONSE_INTERRUPTED && c(d.responseInterruptedError), o === t.RESPONSE_FAILED && c(d.responseFailedError), o === t.RESPONSE_STOPPED && c(d.responseStoppedError), o !== t.RESPONSE_STOPPED && /* @__PURE__ */ e(x, {
       className: r.alertIcon,
-      color: F,
+      color: M,
       "data-testid": "content-answers-error-alert-icon",
       height: f,
       role: "presentation",
@@ -64,40 +65,41 @@ const C = "_answer_17ojr_1", G = "_alertIcon_17ojr_4", b = "_error_17ojr_7", W =
       children: [/* @__PURE__ */ e(l.Figure, {
         children: /* @__PURE__ */ e("div", {
           className: r.iconAvatar,
-          children: /* @__PURE__ */ e(j, {
+          children: /* @__PURE__ */ e(L, {
             height: _,
             role: "presentation",
             width: _
           })
         })
       }), /* @__PURE__ */ n(l.Content, {
-        children: [/* @__PURE__ */ e(k, {
+        children: [/* @__PURE__ */ e(y, {
           answer: a,
           isMarkdownEnabled: I
         }), s && /* @__PURE__ */ n("div", {
-          className: M(r.footer, {
-            [r.shouldUseAnimation]: R,
-            [r.shouldAnimateHeight]: w
+          className: U(r.footer, {
+            [r.shouldUseAnimation]: w,
+            [r.shouldAnimateHeight]: g
           }),
           "data-testid": "content-answers-answer-footer",
-          children: [o && O(), u && !o && /* @__PURE__ */ e(H, {
+          children: [o && v(), u && !o && /* @__PURE__ */ e(C, {
             citations: h,
             onCitationClick: N,
             recordAction: i
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(z, {
             answer: a,
+            onAnswerCopy: R,
             recordAction: i
           })]
         })]
       })]
-    }), E && /* @__PURE__ */ e(z, {
+    }), E && /* @__PURE__ */ e(B, {
       contentType: S,
       error: o,
       recordAction: i
-    }), p && /* @__PURE__ */ e(B, {})]
+    }), p && /* @__PURE__ */ e(H, {})]
   });
 });
 export {
-  po as Answer,
-  po as default
+  _o as Answer,
+  _o as default
 };

package/esm/lib/components/answer/copy-button.js

@@ -1,51 +1,52 @@
 import "../../../../styles/copy-button.css";
-import { useNotification as n, Tooltip as p, IconButton as l } from "@box/blueprint-web";
-import { Clipboard as m } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as u } from "react-intl";
+import { useNotification as p, Tooltip as l, IconButton as m } from "@box/blueprint-web";
+import { Clipboard as u } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as f } from "react-intl";
 import d from "../../messages.js";
-import { LOGGER_BASE_CONFIG as f, LOGGER_ACTION_CLICK as b } from "../common/constants.js";
+import { LOGGER_BASE_CONFIG as b, LOGGER_ACTION_CLICK as y } from "../common/constants.js";
 import t from "./messages.js";
-import { jsx as c } from "react/jsx-runtime";
-const y = "_copyButton_1mhca_1", C = {
-  copyButton: y
-}, N = ({
+import { jsx as e } from "react/jsx-runtime";
+const C = "_copyButton_1mhca_1", T = {
+  copyButton: C
+}, h = ({
   answer: i,
-  recordAction: a
+  onAnswerCopy: a,
+  recordAction: s
 }) => {
   const {
     formatMessage: o
-  } = u(), {
-    addNotification: e
-  } = n(), r = () => {
-    a && a({
-      ...f,
-      action: b,
+  } = f(), {
+    addNotification: r
+  } = p(), n = () => {
+    s && s({
+      ...b,
+      action: y,
       target: "copyToClipboard"
     }), i && navigator && navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(i).then(() => {
-      e({
+      r({
         sensitivity: "foreground",
         styledText: o(t.copyToClipboardSucceeded),
         variant: "success",
         typeIconAriaLabel: o(t.copyButtonSuccessText),
         closeButtonAriaLabel: o(d.closeButtonText)
-      });
+      }), a && a(i);
     });
   };
-  return /* @__PURE__ */ c(p, {
+  return /* @__PURE__ */ e(l, {
     content: o(t.copyToClipboard),
-    children: /* @__PURE__ */ c(l, {
+    children: /* @__PURE__ */ e(m, {
       "aria-label": o(t.copyToClipboard),
-      className: C.copyButton,
-      icon: m,
-      onClick: r,
-      onFocusCapture: (s) => {
-        s.target.matches(":focus-visible") || s.stopPropagation();
+      className: T.copyButton,
+      icon: u,
+      onClick: n,
+      onFocusCapture: (c) => {
+        c.target.matches(":focus-visible") || c.stopPropagation();
       },
       size: "x-small"
     })
   });
 };
 export {
-  N as CopyButton,
-  N as default
+  h as CopyButton,
+  h as default
 };

package/esm/lib/components/chat/chat.js

@@ -1,67 +1,69 @@
 import "../../../../styles/chat.css";
-import { Answer as w } from "../answer/answer.js";
-import { Question as C } from "../question/question.js";
-import { SuggestedQuestions as L } from "../suggested-questions/suggested-questions.js";
-import { WelcomeMessage as N } from "../welcome-message/welcome-message.js";
+import { Answer as C } from "../answer/answer.js";
+import { Question as L } from "../question/question.js";
+import { SuggestedQuestions as N } from "../suggested-questions/suggested-questions.js";
+import { WelcomeMessage as W } from "../welcome-message/welcome-message.js";
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-const W = "_chat_fj1ue_1", b = {
-  chat: W
-}, G = ({
+const b = "_chat_fj1ue_1", q = {
+  chat: b
+}, H = ({
   askSuggestedQuestion: c,
   hasRequestInProgress: e,
   isCitationsEnabled: m,
   isMarkdownEnabled: s,
   onCitationClick: h,
-  questions: p,
+  onAnswerCopy: p,
+  questions: d,
   recordAction: o,
   setAskSuggestedQuestion: r,
   suggestedQuestions: a,
-  suggestedQuestionsRequestState: d,
-  useAnimation: l,
-  userInfo: f,
+  suggestedQuestionsRequestState: l,
+  useAnimation: f,
+  userInfo: j,
   ...i
 }) => /* @__PURE__ */ n("div", {
-  className: b.chat,
+  className: q.chat,
   "data-testid": "content-answers-chat",
-  children: [/* @__PURE__ */ t(N, {
+  children: [/* @__PURE__ */ t(W, {
     ...i
-  }), a !== void 0 && r !== void 0 && /* @__PURE__ */ t(L, {
+  }), a !== void 0 && r !== void 0 && /* @__PURE__ */ t(N, {
     askSuggestedQuestion: c,
     isLoading: e,
     recordAction: o,
     setAskSuggestedQuestion: r,
     suggestedQuestions: a,
-    suggestedQuestionsRequestState: d
+    suggestedQuestionsRequestState: l
   }), /* @__PURE__ */ t("ul", {
-    children: p.map(({
-      answer: j,
-      citations: u,
-      id: v,
-      isCompleted: x,
-      isLoading: y,
-      error: _,
-      prompt: T
+    children: d.map(({
+      answer: u,
+      citations: v,
+      id: x,
+      isCompleted: y,
+      isLoading: _,
+      error: T,
+      prompt: w
     }) => /* @__PURE__ */ n("li", {
-      children: [/* @__PURE__ */ t(C, {
-        prompt: T,
-        userInfo: f
-      }), /* @__PURE__ */ t(w, {
-        answer: j,
-        citations: u,
+      children: [/* @__PURE__ */ t(L, {
+        prompt: w,
+        userInfo: j
+      }), /* @__PURE__ */ t(C, {
+        answer: u,
+        citations: v,
         contentType: i.contentType,
-        error: _,
+        error: T,
         isCitationsEnabled: m,
-        isCompleted: x,
-        isLoading: y,
+        isCompleted: y,
+        isLoading: _,
         isMarkdownEnabled: s,
+        onAnswerCopy: p,
         onCitationClick: h,
         recordAction: o,
-        useAnimation: l
+        useAnimation: f
       })]
-    }, v))
+    }, x))
   })]
 });
 export {
-  G as Chat,
-  G as default
+  H as Chat,
+  H as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/box-ai-content-answers",
-  "version": "0.57.7",
+  "version": "0.58.0",
   "peerDependencies": {
     "@box/blueprint-web": "^7.8.0",
     "@box/blueprint-web-assets": "^4.16.0",
@@ -13,7 +13,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@box/blueprint-web": "^7.33.4",
+    "@box/blueprint-web": "^7.34.1",
     "@box/blueprint-web-assets": "^4.27.0",
     "@box/storybook-utils": "^0.6.1",
     "@testing-library/react": "^15.0.6",
@@ -52,5 +52,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "44327d93e1b72fc57a60ca5bcd8c1d59e53d5939"
+  "gitHead": "35b9456f5e326f5f66d7cb19ba4bb773bffc2cb8"
 }

package/types/lib/box-ai-content-answers.d.ts

@@ -12,6 +12,8 @@ export type BoxAiContentAnswersProps = Omit<ContentProps, 'isErrorMessageShown'
     onAgentEditorToggle?: (agent: AgentType) => void;
     /** Callback function when citation button is clicked */
     onCitationClick?: (fileId: CitationResponseRecordType, title: CitationResponseRecordType) => void;
+    /** Callback function when the user clicks on the answer copy button */
+    onAnswerCopy?: (answer: string) => void;
 };
 export declare const BoxAiContentAnswers: React.FC<BoxAiContentAnswersProps>;
 export default BoxAiContentAnswers;

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

@@ -18,6 +18,8 @@ export interface AnswerProps {
     isMarkdownEnabled?: boolean;
     /** Callback function when citation button is clicked */
     onCitationClick?: (fileId: CitationResponseRecordType, title: CitationResponseRecordType) => void;
+    /** Callback function when the user clicks on the answer copy button */
+    onAnswerCopy?: (answer: string) => void;
     /** Callback function to handle logging events */
     recordAction?: (params: RecordActionType) => void;
     /** If keyframe animation for appearing answer should be applied */

package/types/lib/components/answer/copy-button.d.ts

@@ -1,7 +1,8 @@
 import { type RecordActionType } from '../../types';
 export type CopyButtonProps = {
     answer?: string;
+    onAnswerCopy?: (answer: string) => void;
     recordAction?: (params: RecordActionType) => void;
 };
-export declare const CopyButton: ({ answer, recordAction }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyButton: ({ answer, onAnswerCopy, recordAction }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CopyButton;

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

@@ -1,3 +1,3 @@
 import { type ChatProps } from '../../types';
-export declare const Chat: ({ askSuggestedQuestion, hasRequestInProgress, isCitationsEnabled, isMarkdownEnabled, onCitationClick, questions, recordAction, setAskSuggestedQuestion, suggestedQuestions, suggestedQuestionsRequestState, useAnimation, userInfo, ...welcomeMessageProps }: ChatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chat: ({ askSuggestedQuestion, hasRequestInProgress, isCitationsEnabled, isMarkdownEnabled, onCitationClick, onAnswerCopy, questions, recordAction, setAskSuggestedQuestion, suggestedQuestions, suggestedQuestionsRequestState, useAnimation, userInfo, ...welcomeMessageProps }: ChatProps) => import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/types/lib/types.d.ts

@@ -65,6 +65,8 @@ export type ChatProps = WelcomeMessageProps & {
     hasRequestInProgress?: boolean;
     /** Callback function when citation button is clicked */
     onCitationClick?: (fileId: CitationResponseRecordType, title: CitationResponseRecordType) => void;
+    /** Callback function when the user clicks on the answer copy button */
+    onAnswerCopy?: (answer: string) => void;
 };
 export type ContentProps = Omit<ChatProps, 'handleScrollToBottom'> & {
     /** Error state to show instead of the content */