@box/box-ai-content-answers 0.49.0

package/esm/lib/components/agents/agent-selector.js

@@ -0,0 +1,76 @@
+import "../../../../styles/agent-selector.css";
+import { FilterChip as n, Popover as a, Status as S, SmallList as i } from "@box/blueprint-web";
+import { useState as f, useCallback as C } from "react";
+import { useIntl as I } from "react-intl";
+import { useAgents as v, useAgentsDispatch as N } from "../../contexts/AgentsContext.js";
+import { LOGGER_BASE_CONFIG as G, LOGGER_ACTION_CLICK as O } from "../common/constants.js";
+import p from "./messages.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+const A = "_agentSelector_vehz7_1", E = "_agentStatus_vehz7_5", x = "_agentList_vehz7_20", T = "_agentListItem_vehz7_20", s = {
+  agentSelector: A,
+  agentStatus: E,
+  agentList: x,
+  agentListItem: T
+}, K = ({
+  onSelectAgent: o,
+  recordAction: r
+}) => {
+  const {
+    formatMessage: l
+  } = I(), {
+    agents: h,
+    selectedAgent: c
+  } = v(), m = N(), [_, g] = f(!1), u = l(p.selectAgent), L = C((t) => {
+    g(!1), m({
+      type: "SELECT_AGENT",
+      agentName: t.name
+    }), r && r({
+      ...G,
+      action: O,
+      target: "agentSelector",
+      data: {
+        agentSelected: t.name
+      }
+    }), o && o(t);
+  }, [m, o, r]);
+  return /* @__PURE__ */ e(n.Group, {
+    className: s.agentSelector,
+    name: u,
+    type: "multiple",
+    children: /* @__PURE__ */ d(a.Root, {
+      modal: !1,
+      onOpenChange: g,
+      open: _,
+      children: [/* @__PURE__ */ e(a.Trigger, {
+        children: /* @__PURE__ */ d(n.TriggerChip, {
+          value: "trigger-chip",
+          children: [/* @__PURE__ */ e(S, {
+            className: s.agentStatus,
+            colorIndex: 0,
+            text: l(p.agent)
+          }), /* @__PURE__ */ e(n.Label, {
+            children: c.name
+          }), /* @__PURE__ */ e(n.DropdownIndicator, {})]
+        })
+      }), /* @__PURE__ */ e(a.ContentContainer, {
+        children: /* @__PURE__ */ e(a.MainContent, {
+          children: /* @__PURE__ */ e(i, {
+            className: s.agentList,
+            selectedKeys: [c.name],
+            children: h.map((t) => /* @__PURE__ */ e(i.Item, {
+              className: s.agentListItem,
+              id: t.name,
+              onAction: () => L(t),
+              children: /* @__PURE__ */ e(i.Header, {
+                children: t.name
+              })
+            }, t.name))
+          })
+        })
+      })]
+    })
+  });
+};
+export {
+  K as AgentSelector
+};

package/esm/lib/components/agents/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages as e } from "react-intl";
+const s = e({
+  agent: {
+    id: "boxAI.contentAnswers.agent",
+    defaultMessage: "Agent"
+  },
+  selectAgent: {
+    id: "boxAI.contentAnswers.selectAgent",
+    defaultMessage: "Select an Agent"
+  }
+});
+export {
+  s as default
+};

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

@@ -0,0 +1,29 @@
+import m from "clsx";
+import i from "../common/markdown.js";
+import { s as r } from "../../../../chunks/answer-content.module.js";
+import { jsxs as l, Fragment as f, jsx as d } from "react/jsx-runtime";
+const C = ({
+  answer: t,
+  isMarkdownEnabled: e,
+  className: n,
+  ...o
+}) => {
+  let s = t;
+  return e && t && (s = i.render(t)), /* @__PURE__ */ l(f, {
+    children: [!e && /* @__PURE__ */ d("div", {
+      className: m(r.answerContent, "Answer-text", n),
+      ...o,
+      children: t
+    }), e && /* @__PURE__ */ d("div", {
+      className: m(r.answerContent, r.answerMarkdown, "Answer-text", n),
+      dangerouslySetInnerHTML: {
+        __html: s
+      },
+      ...o
+    })]
+  });
+};
+export {
+  C as AnswerContent,
+  C as default
+};

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

@@ -0,0 +1,100 @@
+import { useBreakpoint as x, Breakpoint as A, Text as L } from "@box/blueprint-web";
+import { BoxAi as T, AlertTriangle as _ } from "@box/blueprint-web-assets/icons/Line";
+import { Size5 as k, Size6 as y, Gray65 as z, Size4 as R } from "@box/blueprint-web-assets/tokens/tokens";
+import C from "clsx";
+import * as p from "react";
+import { useIntl as D } from "react-intl";
+import { A as r } from "../../../../chunks/types.js";
+import { MediaContainer as f } from "../common/media-container.js";
+import { AnswerContent as F } from "./answer-content.js";
+import { CopyButton as M } from "./copy-button.js";
+import { InlineError as G } from "./inline-error.js";
+import { LoadingElement as b } from "./loading-element.js";
+import d from "./messages.js";
+import { References as j } from "./references.js";
+import { s as o } from "../../../../chunks/answer.module.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+const ne = /* @__PURE__ */ p.memo(({
+  answer: s,
+  citations: N,
+  error: e,
+  handleScrollToBottom: i,
+  isCitationsEnabled: I = !1,
+  isCompleted: v = !1,
+  isLoading: P = !1,
+  isMarkdownEnabled: w = !1,
+  isStreamingEnabled: a = !1,
+  onCitationClick: O,
+  recordAction: m,
+  useAnimation: c = !0
+}) => {
+  const E = p.useRef(!0), S = e === r.RATE_LIMITING || e === r.GENERAL, h = P && !s && !e, {
+    formatMessage: l
+  } = D(), u = x() === A.Small ? k : y;
+  p.useEffect(() => {
+    if (E.current) {
+      E.current = !1;
+      return;
+    }
+    s && i && i(a ? "instant" : "smooth", a);
+  }, [s, i, a]);
+  const g = () => /* @__PURE__ */ n(L, {
+    as: "p",
+    className: o.error,
+    color: "textOnLightSecondary",
+    "data-testid": "content-answers-error",
+    variant: "caption",
+    children: [e === r.RESPONSE_INTERRUPTED && l(d.responseInterruptedError), e === r.RESPONSE_FAILED && l(d.responseFailedError), e === r.RESPONSE_STOPPED && l(d.responseStoppedError), e !== r.RESPONSE_STOPPED && /* @__PURE__ */ t(_, {
+      className: o.alertIcon,
+      color: z,
+      "data-testid": "content-answers-error-alert-icon",
+      height: R,
+      role: "presentation",
+      width: R
+    })]
+  });
+  return /* @__PURE__ */ n("div", {
+    "aria-live": "polite",
+    className: o.answer,
+    "data-testid": "content-answers-answer",
+    children: [!S && !h && /* @__PURE__ */ n(f, {
+      children: [/* @__PURE__ */ t(f.Figure, {
+        children: /* @__PURE__ */ t("div", {
+          className: o.iconAvatar,
+          children: /* @__PURE__ */ t(T, {
+            height: u,
+            role: "presentation",
+            width: u
+          })
+        })
+      }), /* @__PURE__ */ n(f.Content, {
+        useAnimation: c,
+        children: [/* @__PURE__ */ t(F, {
+          answer: s,
+          isMarkdownEnabled: w
+        }), v && /* @__PURE__ */ n("div", {
+          className: C(o.footer, {
+            [o.animated]: c
+          }),
+          "data-testid": "content-answers-answer-footer",
+          children: [e && g(), I && !e && /* @__PURE__ */ t(j, {
+            citations: N,
+            onCitationClick: O,
+            recordAction: m
+          }), /* @__PURE__ */ t(M, {
+            answer: s,
+            recordAction: m
+          })]
+        })]
+      })]
+    }), S && /* @__PURE__ */ t(G, {
+      error: e,
+      recordAction: m,
+      useAnimation: c
+    }), h && /* @__PURE__ */ t(b, {})]
+  });
+});
+export {
+  ne as Answer,
+  ne as default
+};

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

@@ -0,0 +1,130 @@
+import { Popover as d, Status as S, Text as N, TextButton as M } from "@box/blueprint-web";
+import { ArrowUpRightSquare as D } from "@box/blueprint-web-assets/icons/Fill";
+import G from "clsx";
+import R from "lodash/debounce";
+import _ from "lodash/truncate";
+import { useState as b, useRef as F, useCallback as A, useEffect as y } from "react";
+import { useIntl as j } from "react-intl";
+import { LOGGER_BASE_CONFIG as w, LOGGER_ACTION_CLICK as K } from "../common/constants.js";
+import { MAX_CITATION_LENGTH as P } from "./constants.js";
+import i from "./messages.js";
+import { s as o } from "../../../../chunks/citation.module.js";
+import { jsxs as B, jsx as e } from "react/jsx-runtime";
+const Z = ({
+  animate: p,
+  content: T,
+  id: a,
+  recordAction: n,
+  fileId: h,
+  title: l,
+  onCitationClick: c
+}) => {
+  const [g, O] = b(!1), [E, I] = b(!p), {
+    formatMessage: r
+  } = j(), x = !!c, C = F(null);
+  let f;
+  l ? f = r(i.cardTooltipTitleWithDocumentName, {
+    title: l.toString()
+  }) : f = r(i.cardTooltipTitle);
+  const v = R((t) => {
+    O(t), t === !0 && n && n({
+      ...w,
+      feature: "answers-citations",
+      target: "hovered",
+      data: {
+        index: a
+      }
+    });
+  }, 100), u = () => {
+    v(!0);
+  }, s = () => {
+    v(!1);
+  }, L = A(() => {
+    c && n && (c(h, l), n({
+      ...w,
+      feature: "answers-citations",
+      target: K,
+      data: {
+        index: a
+      }
+    }));
+  }, [c, n, a, h, l]);
+  y(() => {
+    p && I(!0);
+  }, []);
+  const m = T ? _(T.toString(), {
+    length: P,
+    separator: /,? +/
+  }) : void 0;
+  return /* @__PURE__ */ B(d.Root, {
+    modal: !1,
+    open: g,
+    children: [/* @__PURE__ */ e(d.Trigger, {
+      className: o.citationTrigger,
+      onMouseEnter: u,
+      onMouseLeave: s,
+      children: /* @__PURE__ */ e(S, {
+        ref: C,
+        "aria-label": g ? m : r(i.referenceAriaLabel, {
+          number: a
+        }),
+        className: G(o.citationStatus, {
+          [o.animate]: p,
+          [o.fadeIn]: E
+        }),
+        colorIndex: 0,
+        "data-testid": "content-answers-citation-status",
+        interactive: !0,
+        onBlur: s,
+        onFocus: u,
+        tabIndex: 0,
+        text: `${a}`
+      })
+    }), /* @__PURE__ */ e(d.ContentContainer, {
+      "aria-label": m,
+      collisionPadding: 10,
+      "data-testid": "content-answers-citation-card",
+      onBlur: s,
+      onCloseAutoFocus: (t) => t.preventDefault(),
+      onEscapeKeyDown: () => {
+        var t;
+        (t = C.current) == null || t.focus(), s();
+      },
+      onFocus: u,
+      onMouseEnter: u,
+      onMouseLeave: s,
+      onOpenAutoFocus: (t) => {
+        x || t.preventDefault();
+      },
+      side: "top",
+      sideOffset: 5,
+      children: /* @__PURE__ */ e(d.MainContent, {
+        children: /* @__PURE__ */ B("div", {
+          className: o.cardTooltip,
+          children: [/* @__PURE__ */ e(N, {
+            as: "h4",
+            className: o.cardTooltipTitle,
+            variant: "bodyDefaultBold",
+            children: f
+          }), /* @__PURE__ */ e(N, {
+            as: "p",
+            className: o.cardTooltipCitation,
+            color: "textOnLightDefault",
+            variant: "caption",
+            children: m
+          }), x && /* @__PURE__ */ e(M, {
+            "aria-label": r(i.cardTooltipButton),
+            className: o.cardTooltipButton,
+            icon: D,
+            onClick: L,
+            children: r(i.cardTooltipButton)
+          })]
+        })
+      })
+    })]
+  });
+};
+export {
+  Z as Citation,
+  Z as default
+};

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

@@ -0,0 +1,4 @@
+const T = 500;
+export {
+  T as MAX_CITATION_LENGTH
+};

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

@@ -0,0 +1,49 @@
+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 f from "../../messages.js";
+import { LOGGER_BASE_CONFIG as d, LOGGER_ACTION_CLICK as b } from "../common/constants.js";
+import t from "./messages.js";
+import { s as C } from "../../../../chunks/copy-button.module.js";
+import { jsx as r } from "react/jsx-runtime";
+const N = ({
+  answer: i,
+  recordAction: a
+}) => {
+  const {
+    formatMessage: o
+  } = u(), {
+    addNotification: e
+  } = n(), c = () => {
+    a && a({
+      ...d,
+      action: b,
+      target: "copyToClipboard"
+    }), i && navigator && navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(i).then(() => {
+      e({
+        sensitivity: "foreground",
+        styledText: o(t.copyToClipboardSucceeded),
+        variant: "success",
+        typeIconAriaLabel: o(t.copyButtonSuccessText),
+        closeButtonAriaLabel: o(f.closeButtonText)
+      });
+    });
+  };
+  return /* @__PURE__ */ r(p, {
+    content: o(t.copyToClipboard),
+    children: /* @__PURE__ */ r(l, {
+      "aria-label": o(t.copyToClipboard),
+      className: C.copyButton,
+      icon: m,
+      onClick: c,
+      onFocusCapture: (s) => {
+        s.target.matches(":focus-visible") || s.stopPropagation();
+      },
+      size: "x-small"
+    })
+  });
+};
+export {
+  N as CopyButton,
+  N as default
+};

package/esm/lib/components/answer/inline-error.js

@@ -0,0 +1,64 @@
+import { useBreakpoint as f, Breakpoint as h, Text as E } from "@box/blueprint-web";
+import { BoxAi as g, AlertTriangle as S } from "@box/blueprint-web-assets/icons/Line";
+import { Size5 as n, Size6 as u } from "@box/blueprint-web-assets/tokens/tokens";
+import * as s from "react";
+import { useIntl as v } from "react-intl";
+import { A as x } from "../../../../chunks/types.js";
+import { LOGGER_BASE_CONFIG as R } from "../common/constants.js";
+import { MediaContainer as a } from "../common/media-container.js";
+import l from "./messages.js";
+import { s as e } from "../../../../chunks/inline-error.module.js";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+const z = ({
+  error: i,
+  recordAction: t,
+  useAnimation: c
+}) => {
+  const {
+    formatMessage: d
+  } = v();
+  s.useEffect(() => {
+    t && t({
+      ...R,
+      target: "inlineError"
+    });
+  }, [t]);
+  const p = s.useCallback(() => i === x.RATE_LIMITING ? l.inlineRateLimitingErrorText : l.inlineErrorText, [i]), o = f() === h.Small ? n : u;
+  return /* @__PURE__ */ r("div", {
+    className: e.inlineError,
+    "data-testid": "content-answers-inline-error",
+    children: /* @__PURE__ */ m(a, {
+      children: [/* @__PURE__ */ r(a.Figure, {
+        variant: "center-aligned",
+        children: /* @__PURE__ */ r("div", {
+          className: e.iconAvatar,
+          children: /* @__PURE__ */ r(g, {
+            height: o,
+            role: "presentation",
+            width: o
+          })
+        })
+      }), /* @__PURE__ */ m(a.Content, {
+        shouldAddCard: !1,
+        useAnimation: c,
+        variant: "error",
+        children: [/* @__PURE__ */ r("div", {
+          className: e.icon,
+          children: /* @__PURE__ */ r(S, {
+            height: n,
+            role: "presentation",
+            width: n
+          })
+        }), /* @__PURE__ */ r(E, {
+          as: "p",
+          className: e.text,
+          children: i && d(p())
+        })]
+      })]
+    })
+  });
+};
+export {
+  z as InlineError,
+  z as default
+};

package/esm/lib/components/answer/loading-element.js

@@ -0,0 +1,41 @@
+import { useBreakpoint as n, Breakpoint as s, LoadingIndicator as l } from "@box/blueprint-web";
+import { BoxAi as m } from "@box/blueprint-web-assets/icons/Line";
+import { Size5 as d, Size6 as c } from "@box/blueprint-web-assets/tokens/tokens";
+import { useIntl as p } from "react-intl";
+import { MediaContainer as r } from "../common/media-container.js";
+import f from "./messages.js";
+import { s as i } from "../../../../chunks/loading.module.js";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+const B = ({
+  useAnimation: a
+}) => {
+  const {
+    formatMessage: t
+  } = p(), o = n() === s.Small ? d : c;
+  return /* @__PURE__ */ e("div", {
+    className: i.loadingElement,
+    children: /* @__PURE__ */ g(r, {
+      children: [/* @__PURE__ */ e(r.Figure, {
+        children: /* @__PURE__ */ e("div", {
+          className: i.iconAvatar,
+          children: /* @__PURE__ */ e(m, {
+            height: o,
+            role: "presentation",
+            width: o
+          })
+        })
+      }), /* @__PURE__ */ e(r.Content, {
+        useAnimation: a,
+        children: /* @__PURE__ */ e(l, {
+          "aria-label": t(f.loadingAnswer),
+          className: i.loadingIndicator,
+          "data-testid": "content-answers-loading-indicator"
+        })
+      })]
+    })
+  });
+};
+export {
+  B as LoadingElement,
+  B as default
+};

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

@@ -0,0 +1,66 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  basedOn: {
+    id: "boxAI.contentAnswers.basedOn",
+    defaultMessage: "Based on:"
+  },
+  cardTooltipButton: {
+    id: "boxAI.contentAnswers.cardTooltipButton",
+    defaultMessage: "Open document"
+  },
+  cardTooltipTitle: {
+    id: "boxAI.contentAnswers.cardTooltipTitle",
+    defaultMessage: "From document:"
+  },
+  cardTooltipTitleWithDocumentName: {
+    id: "boxAI.contentAnswers.cardTooltipTitleWithDocumentName",
+    defaultMessage: 'From "{title}":'
+  },
+  copyButtonSuccessText: {
+    id: "boxAI.textInputWithCopyButton.copyButtonSuccessText",
+    defaultMessage: "Copied"
+  },
+  copyToClipboard: {
+    id: "boxAI.contentAnswers.copyToClipboard",
+    defaultMessage: "Copy to Clipboard"
+  },
+  copyToClipboardSucceeded: {
+    id: "boxAI.contentAnswers.copyToClipboardSucceeded",
+    defaultMessage: "Copied to your clipboard"
+  },
+  inlineErrorText: {
+    id: "boxAI.contentAnswers.inlineErrorText",
+    defaultMessage: "The Box AI service was unavailable."
+  },
+  inlineRateLimitingErrorText: {
+    id: "boxAI.contentAnswers.inlineRateLimitingErrorText",
+    defaultMessage: "Box AI currently has limited capacity (we're working to expand bandwidth). Please try again in a few minutes."
+  },
+  loadingAnswer: {
+    id: "boxAI.contentAnswers.loadingAnswer",
+    defaultMessage: "Loading Answer..."
+  },
+  noReferences: {
+    id: "boxAI.contentAnswers.noReferences",
+    defaultMessage: "Response based on general document analysis"
+  },
+  referenceAriaLabel: {
+    id: "boxAI.contentAnswers.referenceAriaLabel",
+    defaultMessage: "Reference {number}"
+  },
+  responseInterruptedError: {
+    id: "boxAI.contentAnswers.responseInterruptedError",
+    defaultMessage: "Response Interrupted"
+  },
+  responseFailedError: {
+    id: "boxAI.contentAnswers.responseFailedError",
+    defaultMessage: "Response Failed"
+  },
+  responseStoppedError: {
+    id: "boxAI.contentAnswers.responseStoppedError",
+    defaultMessage: "Response Stopped"
+  }
+});
+export {
+  t as default
+};

package/esm/lib/components/answer/no-citations.js

@@ -0,0 +1,34 @@
+import { Tooltip as s, IconButton as r } from "@box/blueprint-web";
+import { InfoBadge as a } from "@box/blueprint-web-assets/icons/Line";
+import { useEffect as f } from "react";
+import { useIntl as i } from "react-intl";
+import { LOGGER_BASE_CONFIG as m } from "../common/constants.js";
+import c from "./messages.js";
+import { jsx as o } from "react/jsx-runtime";
+const N = ({
+  recordAction: e
+}) => {
+  const {
+    formatMessage: n
+  } = i(), t = n(c.noReferences);
+  return f(() => {
+    e && e({
+      ...m,
+      target: "noReferences"
+    });
+  }, [e]), /* @__PURE__ */ o(s, {
+    className: "Answer-NoCitations",
+    content: t,
+    "data-testid": "content-answers-references-no-references-tooltip",
+    children: /* @__PURE__ */ o(r, {
+      "aria-label": t,
+      "data-testid": "content-answers-references-no-references",
+      icon: a,
+      size: "x-small"
+    })
+  });
+};
+export {
+  N as NoCitationsIcon,
+  N as default
+};

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

@@ -0,0 +1,67 @@
+import { Text as u } from "@box/blueprint-web";
+import { useEffect as g } from "react";
+import { useIntl as i } from "react-intl";
+import { LOGGER_BASE_CONFIG as w } from "../common/constants.js";
+import { Citation as N } from "./citation.js";
+import x from "./messages.js";
+import { NoCitationsIcon as C } from "./no-citations.js";
+import { s as t } from "../../../../chunks/references.module.js";
+import { jsx as s, jsxs as m, Fragment as O } from "react/jsx-runtime";
+const R = ({
+  animate: o = !0,
+  citations: e,
+  recordAction: r,
+  onCitationClick: f
+}) => {
+  const a = e && e.length > 0, {
+    formatMessage: l
+  } = i();
+  return g(() => {
+    a && r && r({
+      ...w,
+      feature: "answers-citations",
+      target: "shown",
+      data: {
+        count: e.length
+      }
+    });
+  }, []), e === null ? /* @__PURE__ */ s("div", {
+    className: t.references,
+    "data-testid": "content-answers-references-null"
+  }) : /* @__PURE__ */ m("div", {
+    className: t.references,
+    "data-testid": "content-answers-references",
+    children: [a && /* @__PURE__ */ m(O, {
+      children: [/* @__PURE__ */ s(u, {
+        as: "span",
+        className: t.label,
+        color: "textOnLightSecondary",
+        "data-testid": "content-answers-references-label",
+        variant: "caption",
+        children: l(x.basedOn)
+      }), e.map(({
+        content: p,
+        location: d,
+        title: c,
+        fileId: h
+      }, n) => (
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ s(N, {
+          animate: o,
+          content: p,
+          fileId: h,
+          id: n + 1,
+          onCitationClick: f,
+          recordAction: r,
+          title: c
+        }, `${d}-${n + 1}`)
+      ))]
+    }), (e == null ? void 0 : e.length) === 0 && /* @__PURE__ */ s(C, {
+      recordAction: r
+    })]
+  });
+};
+export {
+  R as References,
+  R as default
+};