@box/box-ai-content-answers 0.150.0 → 0.151.0

package/dist/chunks/markdown.module.js

@@ -0,0 +1,19 @@
+import '../styles/markdown.css';const n = "_markdownContent_hd94b_1", i = "_inlineParagraph_hd94b_5", t = "_tableWrapper_hd94b_11", e = "_hljs_hd94b_38", l = "_hljsLanguage_hd94b_50", _ = "_hljsContent_hd94b_63", a = "_hljsLine_hd94b_68", o = "_hljsLineNumber_hd94b_73", h = "_hljsLineContent_hd94b_85", s = "_inlineCitationGroup_hd94b_90", b = {
+  markdownContent: n,
+  inlineParagraph: i,
+  tableWrapper: t,
+  hljs: e,
+  hljsLanguage: l,
+  hljsContent: _,
+  hljsLine: a,
+  hljsLineNumber: o,
+  hljsLineContent: h,
+  inlineCitationGroup: s,
+  "inline-citation-chip-button": "_inline-citation-chip-button_hd94b_95",
+  "inline-citation-file-icon": "_inline-citation-file-icon_hd94b_104",
+  "bp-filter-chip-label": "_bp-filter-chip-label_hd94b_109",
+  "inline-citation-filename-label": "_inline-citation-filename-label_hd94b_110"
+};
+export {
+  b as s
+};

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

@@ -1,170 +1,166 @@
-import { Text as J } from "@box/blueprint-web";
-import { AlertTriangle as K } from "@box/blueprint-web-assets/icons/Line";
-import { Gray65 as Q, Size4 as g } from "@box/blueprint-web-assets/tokens/tokens";
-import S from "clsx";
-import * as f from "react";
-import { useIntl as X } from "react-intl";
-import { A as e } from "../../../../chunks/types.js";
-import { extractBoxLinks as Y, extractFileNames as Z } from "../../utils/getBoxLinks.js";
-import { MediaContainer as R } from "../common/media-container.js";
+import { Text as q } from "@box/blueprint-web";
+import { AlertTriangle as J } from "@box/blueprint-web-assets/icons/Line";
+import { Gray65 as K, Size4 as N } from "@box/blueprint-web-assets/tokens/tokens";
+import I from "clsx";
+import { memo as Q, useState as X, useEffect as S, useMemo as Y } from "react";
+import { useIntl as Z } from "react-intl";
+import { A as r } from "../../../../chunks/types.js";
+import { injectInlineCitation as $ } from "../../utils/inlineCitationsUtils.js";
+import { MediaContainer as g } from "../common/media-container.js";
 import { AnswerContent as tt } from "./answer-content.js";
 import { CopyButton as ot } from "./copy-button.js";
-import { InlineError as nt } from "./inline-error.js";
-import { LoadingIndicator as et } from "./loading-indicator.js";
-import h from "./messages.js";
+import { InlineError as et } from "./inline-error.js";
+import { LoadingIndicator as nt } from "./loading-indicator.js";
+import f from "./messages.js";
 import { References as rt } from "./references.js";
 import { ThumbButtons as st } from "./thumb-buttons.js";
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import '../../../../styles/answer.css';const at = "_answer_140hd_1", it = "_alertIcon_140hd_5", lt = "_error_140hd_8", ct = "_footer_140hd_12", dt = "_copyButtonContainer_140hd_18", ft = "_feedbackButtonsContainer_140hd_19", ut = "_shouldHaveMarginTop_140hd_23", mt = "_shouldUseAnimation_140hd_26", _t = "_shouldAnimateHeight_140hd_30", ht = "_footerButtons_140hd_34", Et = "_iconAvatar_140hd_40", pt = "_buttonsVisible_140hd_56", t = {
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import '../../../../styles/answer.css';const at = "_answer_140hd_1", it = "_alertIcon_140hd_5", ct = "_error_140hd_8", lt = "_footer_140hd_12", dt = "_copyButtonContainer_140hd_18", ut = "_feedbackButtonsContainer_140hd_19", ft = "_shouldHaveMarginTop_140hd_23", mt = "_shouldUseAnimation_140hd_26", _t = "_shouldAnimateHeight_140hd_30", ht = "_footerButtons_140hd_34", Et = "_iconAvatar_140hd_40", pt = "_buttonsVisible_140hd_56", o = {
   answer: at,
   alertIcon: it,
-  error: lt,
-  footer: ct,
+  error: ct,
+  footer: lt,
   copyButtonContainer: dt,
-  feedbackButtonsContainer: ft,
-  shouldHaveMarginTop: ut,
+  feedbackButtonsContainer: ut,
+  shouldHaveMarginTop: ft,
   shouldUseAnimation: mt,
   shouldAnimateHeight: _t,
   footerButtons: ht,
   iconAvatar: Et,
   buttonsVisible: pt
-}, Nt = /* @__PURE__ */ new Set([e.RATE_LIMITING, e.NO_CONTENT, e.PRECONDITION_FAILED, e.GENERAL, e.AGENT_NOT_FOUND]), Dt = /* @__PURE__ */ f.memo(({
-  answer: r,
-  citations: T,
-  error: o,
-  contentType: A,
-  hostAppName: u,
-  feedbackValue: b,
+}, Nt = /* @__PURE__ */ new Set([r.RATE_LIMITING, r.NO_CONTENT, r.PRECONDITION_FAILED, r.GENERAL, r.AGENT_NOT_FOUND]), Lt = /* @__PURE__ */ Q(({
+  answer: t,
+  citations: R,
+  error: e,
+  contentType: T,
+  hostAppName: d,
+  feedbackValue: A,
   isCitationsEnabled: O = !1,
-  isCompleted: a = !1,
-  isFeedbackEnabled: B = !1,
-  isFeedbackFormEnabled: w,
-  isFeedbackTooltipOpen: E,
-  isInlineCitationsEnabled: P = !1,
-  isLoading: C = !1,
-  isMarkdownEnabled: L = !1,
-  items: m = [],
-  onAnswerCopy: v,
+  isCompleted: s = !1,
+  isFeedbackEnabled: b = !1,
+  isFeedbackFormEnabled: B,
+  isFeedbackTooltipOpen: m,
+  isInlineCitationsEnabled: _ = !1,
+  isLoading: P = !1,
+  isMarkdownEnabled: w = !1,
+  items: a = [],
+  onAnswerCopy: C,
   onCitationClick: M,
-  onFeedbackFormSubmit: y,
-  onFeedbackTooltipOpenChange: D,
-  promptType: F,
-  recordAction: c,
-  shouldFeedbackFormIncludeFeedbackText: H,
-  useAnimation: U = !0,
-  variant: i = "modal",
-  isReactMarkdownEnabled: k,
-  setAnswerFeedback: x,
-  questionId: G
+  onFeedbackFormSubmit: v,
+  onFeedbackTooltipOpenChange: y,
+  promptType: D,
+  recordAction: i,
+  shouldFeedbackFormIncludeFeedbackText: F,
+  useAnimation: H = !0,
+  variant: c = "modal",
+  isReactMarkdownEnabled: L,
+  setAnswerFeedback: U,
+  questionId: x
 }) => {
-  const p = Nt.has(o), N = C && !r && !o, [V, $] = f.useState(a), {
-    formatMessage: _
-  } = X();
-  f.useEffect(() => {
-    if (r && c && a) {
-      const s = Y(r), l = Z(r);
-      (s.length > 0 || l.length > 0) && c({
-        action: "programmatic",
-        component: i,
-        feature: "answers",
-        target: "links_detected",
-        data: {
-          hostAppName: u,
-          linkCount: s.length,
-          fileNameCount: l.length
-        }
-      });
-    }
-  }, [r, i, u, a]), f.useEffect(() => {
-    setTimeout(() => $(a), 0);
-  }, [a]);
-  const I = () => /* @__PURE__ */ n(K, {
-    className: t.alertIcon,
-    color: Q,
+  const h = Nt.has(e), E = P && !t && !e, [k, G] = X(s), {
+    formatMessage: u
+  } = Z();
+  S(() => {
+    t && i && s && a.some((W) => t.includes(W.name)) && i({
+      action: "programmatic",
+      component: c,
+      feature: "answers",
+      target: "links_detected",
+      data: {
+        hostAppName: d,
+        linkCount: a.length,
+        fileNameCount: a.length
+      }
+    });
+  }, [t, c, d, s, i, a]), S(() => {
+    setTimeout(() => G(s), 0);
+  }, [s]);
+  const p = () => /* @__PURE__ */ n(J, {
+    className: o.alertIcon,
+    color: K,
     "data-testid": "content-answers-error-alert-icon",
-    height: g,
+    height: N,
     role: "presentation",
-    width: g
-  }), j = () => /* @__PURE__ */ d(J, {
+    width: N
+  }), V = () => /* @__PURE__ */ l(q, {
     as: "p",
-    className: t.error,
+    className: o.error,
     color: "textOnLightSecondary",
     "data-testid": "content-answers-error",
     variant: "caption",
-    children: [o === e.RESPONSE_INTERRUPTED && _(h.responseInterruptedError), o === e.RESPONSE_FAILED && _(h.responseFailedError), o === e.RESPONSE_STOPPED && _(h.responseStoppedError), o !== e.RESPONSE_STOPPED && I()]
-  }), z = () => o !== e.RESPONSE_STOPPED ? /* @__PURE__ */ d("div", {
-    className: S(t.footerButtons, "footer-buttons-container", {
-      [t.buttonsVisible]: E
+    children: [e === r.RESPONSE_INTERRUPTED && u(f.responseInterruptedError), e === r.RESPONSE_FAILED && u(f.responseFailedError), e === r.RESPONSE_STOPPED && u(f.responseStoppedError), e !== r.RESPONSE_STOPPED && p()]
+  }), j = () => e !== r.RESPONSE_STOPPED ? /* @__PURE__ */ l("div", {
+    className: I(o.footerButtons, "footer-buttons-container", {
+      [o.buttonsVisible]: m
     }),
-    children: [B ? /* @__PURE__ */ n("div", {
-      className: t.feedbackButtonsContainer,
+    children: [b ? /* @__PURE__ */ n("div", {
+      className: o.feedbackButtonsContainer,
       children: /* @__PURE__ */ n(st, {
-        feedbackValue: b,
-        hostAppName: u,
-        isFeedbackFormEnabled: w,
-        isFeedbackTooltipOpen: E,
-        items: m,
-        onFeedbackFormSubmit: y,
-        onFeedbackTooltipOpenChange: D,
-        promptType: F,
-        questionId: G,
-        recordAction: c,
-        setAnswerFeedback: x,
-        shouldFeedbackFormIncludeFeedbackText: H,
-        variant: i
+        feedbackValue: A,
+        hostAppName: d,
+        isFeedbackFormEnabled: B,
+        isFeedbackTooltipOpen: m,
+        items: a,
+        onFeedbackFormSubmit: v,
+        onFeedbackTooltipOpenChange: y,
+        promptType: D,
+        questionId: x,
+        recordAction: i,
+        setAnswerFeedback: U,
+        shouldFeedbackFormIncludeFeedbackText: F,
+        variant: c
       })
     }) : null, /* @__PURE__ */ n("div", {
-      className: t.copyButtonContainer,
+      className: o.copyButtonContainer,
       children: /* @__PURE__ */ n(ot, {
-        answer: r,
-        onAnswerCopy: v,
-        recordAction: c
+        answer: t,
+        onAnswerCopy: C,
+        recordAction: i
       })
     })]
-  }) : r ? null : I(), W = (s) => (!m || !a || !P || m.forEach((l) => {
-    if (s.includes(l.name)) {
-      const q = `${window.location.origin}/file/${l.id}`;
-      s = s.replaceAll(l.name, `[${l.name}](${q})`);
-    }
-  }), s);
-  return /* @__PURE__ */ d("div", {
+  }) : t ? null : p(), z = Y(() => t && $(t, {
+    items: a,
+    isCompleted: s,
+    isInlineCitationsEnabled: _
+  }), [t, a, s, _]);
+  return /* @__PURE__ */ l("div", {
     "aria-live": "polite",
-    className: t.answer,
+    className: o.answer,
     "data-testid": "content-answers-answer",
-    children: [N && /* @__PURE__ */ n(et, {}), !p && !N && /* @__PURE__ */ n(R, {
+    children: [E && /* @__PURE__ */ n(nt, {}), !h && !E && /* @__PURE__ */ n(g, {
       className: "answer",
-      variant: i,
-      children: /* @__PURE__ */ d(R.Content, {
-        isUsedInsideSidebar: i === "sidebar",
+      variant: c,
+      children: /* @__PURE__ */ l(g.Content, {
+        isUsedInsideSidebar: c === "sidebar",
         variant: "answer",
         children: [/* @__PURE__ */ n(tt, {
-          answer: W(r),
-          isMarkdownEnabled: L,
-          isReactMarkdownEnabled: k,
-          variant: i
-        }), a && /* @__PURE__ */ d("div", {
-          className: S(t.footer, {
-            [t.shouldHaveMarginTop]: r,
-            [t.shouldAnimateHeight]: V,
-            [t.shouldUseAnimation]: U
+          answer: z,
+          isMarkdownEnabled: w,
+          isReactMarkdownEnabled: L,
+          variant: c
+        }), s && /* @__PURE__ */ l("div", {
+          className: I(o.footer, {
+            [o.shouldHaveMarginTop]: t,
+            [o.shouldAnimateHeight]: k,
+            [o.shouldUseAnimation]: H
           }),
           "data-testid": "content-answers-answer-footer",
-          children: [o && j(), O && !o && /* @__PURE__ */ n(rt, {
-            citations: T,
+          children: [e && V(), O && !e && /* @__PURE__ */ n(rt, {
+            citations: R,
             onCitationClick: M,
-            recordAction: c
-          }), z()]
+            recordAction: i
+          }), j()]
         })]
       })
-    }), p && /* @__PURE__ */ n(nt, {
-      contentType: A,
-      error: o,
-      recordAction: c,
-      variant: i
+    }), h && /* @__PURE__ */ n(et, {
+      contentType: T,
+      error: e,
+      recordAction: i,
+      variant: c
     })]
   });
 });
 export {
-  Dt as Answer,
-  Dt as default
+  Lt as Answer,
+  Lt as default
 };

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

@@ -123,6 +123,10 @@ const t = e({
   thumbsDownAriaLabel: {
     id: "boxAI.contentAnswers.thumbsDownAriaLabel",
     defaultMessage: "Not helpful"
+  },
+  inlineCitationAriaLabel: {
+    id: "boxAI.contentAnswers.inlineCitationAriaLabel",
+    defaultMessage: "Open {fileName} in new tab"
   }
 });
 export {

package/dist/esm/lib/components/answer/thumb-buttons.js

@@ -1,12 +1,12 @@
+import { useNotification as A, Tooltip as L, IconButton as p } from "@box/blueprint-web";
+import { ThumbUp as E, ThumbDown as I } from "@box/blueprint-web-assets/icons/Fill";
+import { ThumbUp as S, ThumbDown as W } from "@box/blueprint-web-assets/icons/Line";
+import { useAgents as $ } from "@box/box-ai-agent-selector";
 import b from "react";
-import { useIntl as A } from "react-intl";
-import { useNotification as E, Tooltip as p, IconButton as M } from "@box/blueprint-web";
-import { ThumbUp as I, ThumbDown as S } from "@box/blueprint-web-assets/icons/Fill";
-import { ThumbUp as W, ThumbDown as $ } from "@box/blueprint-web-assets/icons/Line";
-import { useAgents as j } from "@box/box-ai-agent-selector";
+import { useIntl as j } from "react-intl";
 import { LOGGER_BASE_CONFIG as z, LOGGER_ACTION_PROGRAMMATIC as J } from "../common/constants.js";
 import { FeedbackTooltip as K } from "./feedback-tooltip.js";
-import L from "../../messages.js";
+import N from "../../messages.js";
 import { focusInput as Q } from "../common/focusInputUtils.js";
 import r from "./messages.js";
 import { jsxs as V, Fragment as X, jsx as f } from "react/jsx-runtime";
@@ -17,40 +17,40 @@ import '../../../../styles/thumb-buttons.css';const Y = "_thumbDown_1axcd_1", Z
   THUMB_DOWN: "negative",
   NONE: "none"
 }, rt = ({
-  feedbackValue: y,
+  feedbackValue: w,
   hostAppName: n,
-  isFeedbackFormEnabled: N = !1,
-  isFeedbackTooltipOpen: w = !1,
+  isFeedbackFormEnabled: y = !1,
+  isFeedbackTooltipOpen: x = !1,
   items: U,
   onFeedbackFormSubmit: h,
   onFeedbackTooltipOpenChange: s,
-  promptType: x,
+  promptType: D,
   questionId: a,
   recordAction: i,
   setAnswerFeedback: o,
-  shouldFeedbackFormIncludeFeedbackText: D = !1,
-  variant: B
+  shouldFeedbackFormIncludeFeedbackText: B = !1,
+  variant: T
 }) => {
   const {
     formatMessage: m
-  } = A(), {
+  } = j(), {
     addNotification: H
-  } = E(), {
-    selectedAgent: T
-  } = j(), l = y, _ = b.useMemo(() => U.filter((t) => t.status === "supported").map((t) => t.fileType), [U]), e = b.useCallback((t) => {
+  } = A(), {
+    selectedAgent: M
+  } = $(), l = w, _ = b.useMemo(() => U.filter((t) => t.status === "supported").map((t) => t.fileType), [U]), e = b.useCallback((t) => {
     l !== t && (o == null || o(a, t), i == null || i({
       ...z,
       action: J,
       target: "answer_feedback",
-      component: B,
+      component: T,
       data: {
         feedback_value: t,
         file_types: _,
         feature: n,
-        prompt_type: x
+        prompt_type: D
       }
     }), Q());
-  }, [n, i, l, B, _, a, o]), G = ({
+  }, [n, i, l, T, _, a, o, D]), G = ({
     feedback: t,
     issueType: v
   }) => {
@@ -63,13 +63,13 @@ import '../../../../styles/thumb-buttons.css';const Y = "_thumbDown_1axcd_1", Z
       timestamp: Date.now(),
       questionId: a
     };
-    D && (c.feedback = t, c.hasFeedback = !!t), T && (c.selectedAgentName = T.name), h(c, () => {
+    B && (c.feedback = t, c.hasFeedback = !!t), M && (c.selectedAgentName = M.name), h(c, () => {
       H({
         sensitivity: "foreground",
         styledText: m(r.feedbackTooltipConfirmation),
         variant: "success",
-        typeIconAriaLabel: m(L.ariaTypeSuccessIconLabel),
-        closeButtonAriaLabel: m(L.closeButtonText)
+        typeIconAriaLabel: m(N.ariaTypeSuccessIconLabel),
+        closeButtonAriaLabel: m(N.closeButtonText)
       });
     });
   }, d = (t) => {
@@ -78,29 +78,29 @@ import '../../../../styles/thumb-buttons.css';const Y = "_thumbDown_1axcd_1", Z
     e(u.THUMB_DOWN), s == null || s(!0, a);
   }, [e, s, a]);
   return /* @__PURE__ */ V(X, {
-    children: [/* @__PURE__ */ f(p, {
+    children: [/* @__PURE__ */ f(L, {
       content: m(r.thumbsUpAriaLabel),
-      children: /* @__PURE__ */ f(M, {
+      children: /* @__PURE__ */ f(p, {
         "aria-label": m(r.thumbsUpAriaLabel),
         disabled: l === u.THUMB_DOWN,
-        icon: l === u.THUMB_UP ? I : W,
+        icon: l === u.THUMB_UP ? E : S,
         onClick: P,
         size: "x-small",
         "data-target-id": "IconButton-thumbsUpAriaLabel"
       })
     }), /* @__PURE__ */ f(K, {
-      isOpen: w,
+      isOpen: x,
       onOpenChange: d,
       onSubmit: G,
-      shouldIncludeFeedbackText: D,
-      shouldShow: N,
-      children: /* @__PURE__ */ f(p, {
+      shouldIncludeFeedbackText: B,
+      shouldShow: y,
+      children: /* @__PURE__ */ f(L, {
         content: m(r.thumbsDownAriaLabel),
-        children: /* @__PURE__ */ f(M, {
+        children: /* @__PURE__ */ f(p, {
           "aria-label": m(r.thumbsDownAriaLabel),
           className: Z.thumbDown,
           disabled: l === u.THUMB_UP,
-          icon: l === u.THUMB_DOWN ? S : $,
+          icon: l === u.THUMB_DOWN ? I : W,
           onClick: R,
           size: "x-small",
           "data-target-id": "IconButton-thumbsDownAriaLabel"

package/dist/esm/lib/components/common/inline-citation.js

@@ -0,0 +1,47 @@
+import { FilterChip as t, Tooltip as a } from "@box/blueprint-web";
+import { File as r } from "@box/blueprint-web-assets/icons/Medium";
+import { useCallback as s, useMemo as c } from "react";
+import { useIntl as m } from "react-intl";
+import { isBoxDomain as p } from "../../utils/inlineCitationsUtils.js";
+import d from "../answer/messages.js";
+import { s as u } from "../../../../chunks/markdown.module.js";
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+const A = ({
+  fileName: n,
+  href: o
+}) => {
+  const {
+    formatMessage: e
+  } = m(), l = s(() => {
+    window.open(o, "_blank", "noopener,noreferrer");
+  }, [o]);
+  return c(() => p(o), [o]) ? /* @__PURE__ */ i(t.Group, {
+    className: u.inlineCitationGroup,
+    name: "inline-citation-interactive",
+    type: "single",
+    children: /* @__PURE__ */ i(a, {
+      content: n,
+      children: /* @__PURE__ */ f(t.ChipButton, {
+        "aria-label": e(d.inlineCitationAriaLabel, {
+          fileName: n
+        }),
+        className: "inline-citation-chip-button",
+        "data-testid": "inline-citation-chip",
+        onClick: l,
+        value: "interactive",
+        children: [/* @__PURE__ */ i(t.Icon, {
+          className: "inline-citation-file-icon",
+          icon: r
+        }), /* @__PURE__ */ i(t.Label, {
+          className: "inline-citation-filename-label",
+          children: n
+        })]
+      })
+    })
+  }) : /* @__PURE__ */ i("span", {
+    children: n
+  });
+};
+export {
+  A as default
+};