@box/box-ai-content-answers 0.154.4 → 0.156.0

package/dist/esm/lib/components/api-wrapper/utils/stream.js

@@ -1,14 +1,14 @@
 import b from "lodash/camelCase";
-import { A as h } from "../../../../../chunks/types.js";
+import { A as s } from "../../../../../chunks/types.js";
 const d = {
   chunk: 15 * 1e3,
   // fetch timeout for each chunk. We need to abort the fetch if needed.
   initial: 45 * 1e3
   // latency p99 (30s) +  buffer. Other host integrations can override this value.
 }, N = {
-  RESPONSE_FAILED: h.RESPONSE_FAILED,
-  RESPONSE_INTERRUPTED: h.RESPONSE_INTERRUPTED,
-  RESPONSE_STOPPED: h.RESPONSE_STOPPED
+  RESPONSE_FAILED: s.RESPONSE_FAILED,
+  RESPONSE_INTERRUPTED: s.RESPONSE_INTERRUPTED,
+  RESPONSE_STOPPED: s.RESPONSE_STOPPED
 }, O = {
   CONTINUE: "continue",
   DONE: "done",
@@ -32,31 +32,31 @@ class T {
   }
   // eslint-disable-next-line class-methods-use-this
   parseNDJSON(r, i, t) {
-    const e = new TextDecoder().decode(i), o = r.partialData + e, a = /\r?\n/, n = o.trim().split(a);
+    const n = new TextDecoder().decode(i), o = r.partialData + n, a = /\r?\n/, e = o.trim().split(a);
     r.partialData = o.endsWith(`
-`) || o.endsWith("}") ? "" : n.pop() || "";
+`) || o.endsWith("}") ? "" : e.pop() || "";
     let E = "";
-    n.forEach((c) => {
-      const l = JSON.parse(c);
-      l[t] && (E += l[t]), Object.entries(l).forEach(([u, s]) => {
+    e.forEach((h) => {
+      const l = JSON.parse(h);
+      l[t] && (E += l[t]), l.thinking_answer && (r.thinkingAnswer || (r.thinkingAnswer = ""), r.thinkingAnswer += l.thinking_answer), Object.entries(l).forEach(([u, c]) => {
         const C = b(u);
-        C !== t && (r[C] = s);
+        C !== t && C !== "thinkingAnswer" && (r[C] = c);
       });
     }), r.data += E;
   }
-  receiveStreamedResponse(r, i, t, e = "answer", o, a) {
+  receiveStreamedResponse(r, i, t, n = "answer", o, a) {
     var u;
-    const n = this.initializeStreamedResponseState(), E = (u = i.body) == null ? void 0 : u.getReader();
+    const e = this.initializeStreamedResponseState(), E = (u = i.body) == null ? void 0 : u.getReader();
     if (this.chunkTimeout = (o == null ? void 0 : o.chunk) || d.chunk, !E) {
-      this.handleNoResponseBody(t, n);
+      this.handleNoResponseBody(t, e);
       return;
     }
-    let c;
+    let h;
     const l = () => {
-      E.read().then((s) => {
-        this.handleChunkSuccess(c, t, s, r, n, e), s.done || (c = this.setChunkTimeout(r, a), l());
-      }).catch((s) => {
-        this.handleChunkError(c, t, r, n);
+      E.read().then((c) => {
+        this.handleChunkSuccess(h, t, c, r, e, n), c.done || (h = this.setChunkTimeout(r, a), l());
+      }).catch((c) => {
+        this.handleChunkError(h, t, r, e);
       });
     };
     l();
@@ -73,23 +73,23 @@ class T {
       partialData: ""
     };
   }
-  handleChunkSuccess(r, i, t, e, o, a) {
+  handleChunkSuccess(r, i, t, n, o, a) {
     if (!t)
       return;
     clearTimeout(r);
     const {
-      completionReason: n
+      completionReason: e
     } = o;
-    o.isCompleted = t.done || n !== null, t.value && this.parseNDJSON(o, t.value, a), o.isCompleted && (this.removeAbortController(e), n !== O.DONE && (o.data ? o.error = n === O.CONTINUE ? N.RESPONSE_INTERRUPTED : N.RESPONSE_FAILED : o.error = h.NO_CONTENT)), i(o);
+    o.isCompleted = t.done || e !== null, t.value && this.parseNDJSON(o, t.value, a), o.isCompleted && (this.removeAbortController(n), e !== O.DONE && (o.data ? o.error = e === O.CONTINUE ? N.RESPONSE_INTERRUPTED : N.RESPONSE_FAILED : o.error = s.NO_CONTENT)), i(o);
   }
-  handleChunkError(r, i, t, e) {
-    e.error = N.RESPONSE_FAILED;
+  handleChunkError(r, i, t, n) {
+    n.error = N.RESPONSE_FAILED;
     const o = this.abortControllerMap.get(t);
-    o && o.isUserInitiatedAbort && (e.error = N.RESPONSE_STOPPED, e.isAborted = o.isUserInitiatedAbort), e.isCompleted = !0, this.removeAbortController(t), clearTimeout(r), i(e);
+    o && o.isUserInitiatedAbort && (n.error = N.RESPONSE_STOPPED, n.isAborted = o.isUserInitiatedAbort), n.isCompleted = !0, this.removeAbortController(t), clearTimeout(r), i(n);
   }
   // eslint-disable-next-line class-methods-use-this
   handleNoResponseBody(r, i) {
-    i.error = h.NO_CONTENT, i.isCompleted = !0, r(i);
+    i.error = s.NO_CONTENT, i.isCompleted = !0, r(i);
   }
   removeAbortController(r) {
     this.abortControllerMap.delete(r);
@@ -104,10 +104,10 @@ class T {
     }, this.chunkTimeout);
   }
 }
-const k = new T();
+const f = new T();
 export {
   d as FETCH_TIMEOUT,
   O as STREAMING_COMPLETION_REASON,
   N as STREAM_ERROR,
-  k as default
+  f as default
 };

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

@@ -1,37 +1,38 @@
-import { Text as V } from "@box/blueprint-web";
-import { BoxAiLogo as X } from "@box/blueprint-web-assets/icons/Logo";
-import { Size10 as _ } from "@box/blueprint-web-assets/tokens/tokens";
-import Y from "clsx";
-import * as Z from "react";
-import { useIntl as $ } from "react-intl";
-import { Answer as L } from "../answer/answer.js";
-import { MediaContainer as P } from "../common/media-container.js";
-import { Question as S } from "../question/question.js";
-import { SuggestedQuestions as ee } from "../suggested-questions/suggested-questions.js";
-import te from "../welcome-message/messages.js";
-import { WelcomeMessage as oe } from "../welcome-message/welcome-message.js";
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import '../../../../styles/chat.css';const ae = "_chat_77vqr_1", re = "_clearChatText_77vqr_1", se = "_landingPage_77vqr_7", ie = "_askQuestionText_77vqr_15", ne = "_iconAvatar_77vqr_23", ce = "_sidebar_77vqr_39", a = {
-  chat: ae,
-  clearChatText: re,
-  landingPage: se,
-  askQuestionText: ie,
-  iconAvatar: ne,
-  sidebar: ce
-}, ge = ({
+import { Text as Y } from "@box/blueprint-web";
+import { BoxAiLogo as Z } from "@box/blueprint-web-assets/icons/Logo";
+import { Size10 as f } from "@box/blueprint-web-assets/tokens/tokens";
+import $ from "clsx";
+import * as w from "react";
+import { useIntl as L } from "react-intl";
+import { Answer as P } from "../answer/answer.js";
+import { MediaContainer as S } from "../common/media-container.js";
+import { Question as ee } from "../question/question.js";
+import { SuggestedQuestions as te } from "../suggested-questions/suggested-questions.js";
+import { ThinkingBubble as oe } from "../thinkingBubble/thinkingBubble.js";
+import ae from "../welcome-message/messages.js";
+import { WelcomeMessage as ie } from "../welcome-message/welcome-message.js";
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
+import '../../../../styles/chat.css';const re = "_chat_77vqr_1", se = "_clearChatText_77vqr_1", ne = "_landingPage_77vqr_7", ce = "_askQuestionText_77vqr_15", le = "_iconAvatar_77vqr_23", me = "_sidebar_77vqr_39", a = {
+  chat: re,
+  clearChatText: se,
+  landingPage: ne,
+  askQuestionText: ce,
+  iconAvatar: le,
+  sidebar: me
+}, qe = ({
   askSuggestedQuestion: h,
   contentType: n,
-  hasCustomSuggestedQuestions: x,
-  hasRequestInProgress: T,
+  hasCustomSuggestedQuestions: T,
+  hasRequestInProgress: x,
   isCitationsEnabled: b,
-  isFeedbackEnabled: v,
-  isFeedbackFormEnabled: C,
+  isFeedbackEnabled: C,
+  isFeedbackFormEnabled: v,
   isInlineCitationsEnabled: g = !1,
   isMarkdownEnabled: k,
-  isSessionLoading: q = !1,
-  onCitationClick: u,
-  onAnswerCopy: A,
-  onFeedbackFormSubmit: F,
+  isSessionLoading: u = !1,
+  onCitationClick: q,
+  onAnswerCopy: F,
+  onFeedbackFormSubmit: A,
   onSuggestedQuestionInteraction: I,
   questions: N,
   recordAction: c,
@@ -42,109 +43,114 @@ import '../../../../styles/chat.css';const ae = "_chat_77vqr_1", re = "_clearCha
   shouldFeedbackFormIncludeFeedbackText: j,
   shouldFeedbackIncludePromptData: y,
   shouldShowLandingPage: o,
-  useAnimation: M,
+  useAnimation: B,
   variant: t = "modal",
-  hostAppName: w = "",
+  hostAppName: M = "",
   isReactMarkdownEnabled: z,
-  welcomeMessageClearText: B,
-  ...d
+  welcomeMessageClearText: R,
+  ...p
 }) => {
   const {
-    formatMessage: R
-  } = $(), [W, D] = Z.useState(null), E = (r, s) => {
-    D(r ? s : null);
+    formatMessage: W
+  } = L(), [D, E] = w.useState(null), G = (i, r) => {
+    E(i ? r : null);
   };
   return /* @__PURE__ */ e("div", {
     className: a.chat,
     "data-testid": "content-answers-chat",
-    children: /* @__PURE__ */ f("div", {
-      className: Y({
+    children: /* @__PURE__ */ _("div", {
+      className: $({
         [a.landingPage]: o,
         [a.sidebar]: t === "sidebar"
       }),
-      children: [o && /* @__PURE__ */ e(P.Figure, {
+      children: [o && /* @__PURE__ */ e(S.Figure, {
         variant: t,
         children: /* @__PURE__ */ e("div", {
           className: a.iconAvatar,
-          children: /* @__PURE__ */ e(X, {
-            height: _,
+          children: /* @__PURE__ */ e(Z, {
+            height: f,
             role: "presentation",
-            width: _
+            width: f
           })
         })
-      }), /* @__PURE__ */ e(oe, {
+      }), /* @__PURE__ */ e(ie, {
         contentType: "",
         shouldShowLandingPage: o,
-        ...d,
+        ...p,
         variant: t
-      }), o && m !== void 0 && l !== void 0 && /* @__PURE__ */ e(ee, {
+      }), o && m !== void 0 && l !== void 0 && /* @__PURE__ */ e(te, {
         askSuggestedQuestion: h,
-        hasCustomSuggestedQuestions: x,
-        isLoading: T,
+        hasCustomSuggestedQuestions: T,
+        isLoading: x,
         onSuggestedQuestionInteraction: I,
         recordAction: c,
         setAskSuggestedQuestion: l,
         suggestedQuestions: m,
         suggestedQuestionsRequestState: Q,
         variant: t
-      }), /* @__PURE__ */ e(V, {
+      }), /* @__PURE__ */ e(Y, {
         as: "p",
         className: a.clearChatText,
-        children: B || R(te.welcomeClearChatText, {
+        children: R || W(ae.welcomeClearChatText, {
           type: n
         })
       }), !o && /* @__PURE__ */ e("ul", {
         children: N.map(({
-          answer: r,
-          citations: s,
-          id: i,
-          isCompleted: G,
-          isLoading: H,
-          error: J,
-          prompt: p,
-          promptType: K,
-          feedbackValue: U
-        }) => /* @__PURE__ */ f("li", {
-          children: [/* @__PURE__ */ e(S, {
-            prompt: p,
+          answer: i,
+          thinkingAnswer: r,
+          citations: H,
+          id: s,
+          isCompleted: J,
+          isLoading: K,
+          error: U,
+          prompt: d,
+          promptType: V,
+          feedbackValue: X
+        }) => /* @__PURE__ */ _("li", {
+          children: [/* @__PURE__ */ e(ee, {
+            prompt: d,
             variant: t
-          }), /* @__PURE__ */ e(L, {
-            answer: r,
-            citations: s,
+          }), r && /* @__PURE__ */ e(oe, {
+            content: r,
+            isThinkingComplete: !!i,
+            variant: t
+          }), /* @__PURE__ */ e(P, {
+            answer: i,
+            citations: H,
             contentType: n,
-            error: J,
-            feedbackValue: U,
-            hostAppName: w,
+            error: U,
+            feedbackValue: X,
+            hostAppName: M,
             isCitationsEnabled: b,
-            isCompleted: G,
-            isFeedbackEnabled: v,
-            isFeedbackFormEnabled: C,
-            isFeedbackTooltipOpen: W === i,
+            isCompleted: J,
+            isFeedbackEnabled: C,
+            isFeedbackFormEnabled: v,
+            isFeedbackTooltipOpen: D === s,
             isInlineCitationsEnabled: g,
-            isLoading: H || q,
+            isLoading: K || u,
             isMarkdownEnabled: k,
             isReactMarkdownEnabled: z,
-            items: d.items,
-            onAnswerCopy: A,
-            onCitationClick: u,
-            onFeedbackFormSubmit: F,
-            onFeedbackTooltipOpenChange: E,
-            prompt: p,
-            promptType: K,
-            questionId: i,
+            items: p.items,
+            onAnswerCopy: F,
+            onCitationClick: q,
+            onFeedbackFormSubmit: A,
+            onFeedbackTooltipOpenChange: G,
+            prompt: d,
+            promptType: V,
+            questionId: s,
             recordAction: c,
             setAnswerFeedback: O,
             shouldFeedbackFormIncludeFeedbackText: j,
             shouldFeedbackIncludePromptData: y,
-            useAnimation: M,
+            useAnimation: B,
             variant: t
           })]
-        }, i))
+        }, s))
       })]
     })
   });
 };
 export {
-  ge as Chat,
-  ge as default
+  qe as Chat,
+  qe as default
 };

package/dist/esm/lib/components/thinkingBubble/boxAILoadingIndicator.js

@@ -0,0 +1,235 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import '../../../../styles/boxAILoadingIndicator.css';const t = "_boxAILoadingIndicator_ddl80_1", l = "_ring_ddl80_1", i = "_ringTwo_ddl80_11", a = "_blueRing_ddl80_18", n = "_blueDraw_ddl80_1", s = "_blueFade_ddl80_1", p = "_blueRingTwo_ddl80_22", c = "_purpleRing_ddl80_25", d = "_purpleDraw_ddl80_1", g = "_purpleFade_ddl80_1", y = "_purpleRingTwo_ddl80_29", _ = "_magentaRing_ddl80_32", u = "_magentaDraw_ddl80_1", w = "_magentaFade_ddl80_1", m = "_magentaRingTwo_ddl80_36", x = "_bgRings_ddl80_39", o = {
+  boxAILoadingIndicator: t,
+  ring: l,
+  ringTwo: i,
+  blueRing: a,
+  blueDraw: n,
+  blueFade: s,
+  blueRingTwo: p,
+  purpleRing: c,
+  purpleDraw: d,
+  purpleFade: g,
+  purpleRingTwo: y,
+  magentaRing: _,
+  magentaDraw: u,
+  magentaFade: w,
+  magentaRingTwo: m,
+  bgRings: x
+}, h = () => /* @__PURE__ */ r("svg", {
+  className: o.boxAILoadingIndicator,
+  viewBox: "0 0 400 400",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/* @__PURE__ */ r("defs", {
+    children: [/* @__PURE__ */ r("linearGradient", {
+      id: "magentaGradient",
+      x1: "0%",
+      x2: "100%",
+      y1: "0%",
+      y2: "100%",
+      children: [/* @__PURE__ */ e("stop", {
+        offset: "0%",
+        style: {
+          stopColor: "#FF80FF",
+          stopOpacity: 1
+        }
+      }), /* @__PURE__ */ e("stop", {
+        offset: "50%",
+        style: {
+          stopColor: "#FF00FF",
+          stopOpacity: 1
+        }
+      }), /* @__PURE__ */ e("stop", {
+        offset: "100%",
+        style: {
+          stopColor: "#CC00CC",
+          stopOpacity: 1
+        }
+      })]
+    }), /* @__PURE__ */ r("linearGradient", {
+      id: "purpleGradient",
+      x1: "0%",
+      x2: "100%",
+      y1: "0%",
+      y2: "100%",
+      children: [/* @__PURE__ */ e("stop", {
+        offset: "0%",
+        style: {
+          stopColor: "#BB66EE",
+          stopOpacity: 1
+        }
+      }), /* @__PURE__ */ e("stop", {
+        offset: "50%",
+        style: {
+          stopColor: "#9933CC",
+          stopOpacity: 1
+        }
+      }), /* @__PURE__ */ e("stop", {
+        offset: "100%",
+        style: {
+          stopColor: "#7722AA",
+          stopOpacity: 1
+        }
+      })]
+    }), /* @__PURE__ */ r("linearGradient", {
+      id: "blueGradient",
+      x1: "0%",
+      x2: "100%",
+      y1: "0%",
+      y2: "100%",
+      children: [/* @__PURE__ */ e("stop", {
+        offset: "0%",
+        style: {
+          stopColor: "#77BBFF",
+          stopOpacity: 1
+        }
+      }), /* @__PURE__ */ e("stop", {
+        offset: "50%",
+        style: {
+          stopColor: "#3399FF",
+          stopOpacity: 1
+        }
+      }), /* @__PURE__ */ e("stop", {
+        offset: "100%",
+        style: {
+          stopColor: "#0077DD",
+          stopOpacity: 1
+        }
+      })]
+    }), /* @__PURE__ */ r("filter", {
+      height: "140%",
+      id: "whiteBorder",
+      width: "140%",
+      x: "-20%",
+      y: "-20%",
+      children: [/* @__PURE__ */ e("feMorphology", {
+        in: "SourceAlpha",
+        operator: "dilate",
+        radius: "5",
+        result: "expanded"
+      }), /* @__PURE__ */ e("feFlood", {
+        floodColor: "white",
+        floodOpacity: "1",
+        result: "whiteColor"
+      }), /* @__PURE__ */ e("feComposite", {
+        in: "whiteColor",
+        in2: "expanded",
+        operator: "in",
+        result: "whiteBorder"
+      }), /* @__PURE__ */ e("feComposite", {
+        in: "SourceGraphic",
+        in2: "whiteBorder",
+        operator: "over"
+      })]
+    }), /* @__PURE__ */ e("clipPath", {
+      id: "clip1",
+      children: /* @__PURE__ */ e("path", {
+        d: "M0,200 L400,200 L400,400 L0,400 z"
+      })
+    }), /* @__PURE__ */ e("clipPath", {
+      id: "clip2",
+      children: /* @__PURE__ */ e("path", {
+        d: "M0,0 L400,0 L400,200 L0,200 z"
+      })
+    })]
+  }), /* @__PURE__ */ r("g", {
+    className: o.bgRings,
+    children: [/* @__PURE__ */ r("g", {
+      clipPath: "url(#clip1)",
+      children: [/* @__PURE__ */ e("ellipse", {
+        className: `${o.ringTwo} ${o.blueRingTwo}`,
+        cx: "200",
+        cy: "200",
+        rx: "80",
+        ry: "160",
+        transform: "rotate(-60, 200, 200)"
+      }), /* @__PURE__ */ e("ellipse", {
+        className: `${o.ringTwo} ${o.purpleRingTwo}`,
+        cx: "200",
+        cy: "200",
+        rx: "80",
+        ry: "160",
+        transform: "rotate(60, 200, 200)"
+      }), /* @__PURE__ */ e("ellipse", {
+        className: `${o.ringTwo} ${o.magentaRingTwo}`,
+        cx: "200",
+        cy: "200",
+        rx: "80",
+        ry: "160"
+      })]
+    }), /* @__PURE__ */ r("g", {
+      clipPath: "url(#clip2)",
+      children: [/* @__PURE__ */ e("ellipse", {
+        className: `${o.ringTwo} ${o.magentaRingTwo}`,
+        cx: "200",
+        cy: "200",
+        rx: "80",
+        ry: "160"
+      }), /* @__PURE__ */ e("ellipse", {
+        className: `${o.ringTwo} ${o.blueRingTwo}`,
+        cx: "200",
+        cy: "200",
+        rx: "80",
+        ry: "160",
+        transform: "rotate(-60, 200, 200)"
+      }), /* @__PURE__ */ e("ellipse", {
+        className: `${o.ringTwo} ${o.purpleRingTwo}`,
+        cx: "200",
+        cy: "200",
+        rx: "80",
+        ry: "160",
+        transform: "rotate(60, 200, 200)"
+      })]
+    })]
+  }), /* @__PURE__ */ r("g", {
+    clipPath: "url(#clip1)",
+    children: [/* @__PURE__ */ e("ellipse", {
+      className: `${o.ring} ${o.blueRing}`,
+      cx: "200",
+      cy: "200",
+      rx: "80",
+      ry: "160",
+      transform: "rotate(-60, 200, 200)"
+    }), /* @__PURE__ */ e("ellipse", {
+      className: `${o.ring} ${o.purpleRing}`,
+      cx: "200",
+      cy: "200",
+      rx: "80",
+      ry: "160",
+      transform: "rotate(60, 200, 200)"
+    }), /* @__PURE__ */ e("ellipse", {
+      className: `${o.ring} ${o.magentaRing}`,
+      cx: "200",
+      cy: "200",
+      rx: "80",
+      ry: "160"
+    })]
+  }), /* @__PURE__ */ r("g", {
+    clipPath: "url(#clip2)",
+    children: [/* @__PURE__ */ e("ellipse", {
+      className: `${o.ring} ${o.magentaRing}`,
+      cx: "200",
+      cy: "200",
+      rx: "80",
+      ry: "160"
+    }), /* @__PURE__ */ e("ellipse", {
+      className: `${o.ring} ${o.blueRing}`,
+      cx: "200",
+      cy: "200",
+      rx: "80",
+      ry: "160",
+      transform: "rotate(-60, 200, 200)"
+    }), /* @__PURE__ */ e("ellipse", {
+      className: `${o.ring} ${o.purpleRing}`,
+      cx: "200",
+      cy: "200",
+      rx: "80",
+      ry: "160",
+      transform: "rotate(60, 200, 200)"
+    })]
+  })]
+});
+export {
+  h as BoxAILoadingIndicator,
+  h as default
+};

package/dist/esm/lib/components/thinkingBubble/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages as n } from "react-intl";
+const t = n({
+  thinkingInProgress: {
+    id: "boxui.contentAnswers.thinkingInProgress",
+    defaultMessage: "Thinking..."
+  },
+  thinkingCompleted: {
+    id: "boxui.contentAnswers.thinkingCompleted",
+    defaultMessage: "Thinking Complete"
+  },
+  thinkingContentScrollableArea: {
+    id: "boxui.contentAnswers.thinkingContentScrollableArea",
+    defaultMessage: "Thinking content scrollable area"
+  },
+  expandThinkingContent: {
+    id: "boxui.contentAnswers.expandThinkingContent",
+    defaultMessage: "Expand"
+  },
+  collapseThinkingContent: {
+    id: "boxui.contentAnswers.collapseThinkingContent",
+    defaultMessage: "Collapse"
+  }
+});
+export {
+  t as default
+};