@box/box-ai-content-answers 1.1.4 → 1.2.0

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

@@ -1,11 +1,11 @@
 import i from "clsx";
-import _ from "../common/markdown-react.js";
-import f from "../common/markdown.js";
+import { markdownToHtmlString as _ } from "../common/markdown.js";
+import f from "../common/markdown-react.js";
 import { jsxs as h, Fragment as u, jsx as r } from "react/jsx-runtime";
-import '../../../../styles/answer-content.css';const C = "_answerContent_uoab3_1", x = "_answerMarkdown_uoab3_16", n = {
+import '../../../../styles/answer-content.css';const C = "_answerContent_uoab3_1", k = "_answerMarkdown_uoab3_16", n = {
   answerContent: C,
-  answerMarkdown: x
-}, v = ({
+  answerMarkdown: k
+}, g = ({
   answer: e,
   isMarkdownEnabled: t,
   isReactMarkdownEnabled: w = !1,
@@ -13,15 +13,15 @@ import '../../../../styles/answer-content.css';const C = "_answerContent_uoab3_1
   variant: m = "modal",
   ...s
 }) => {
-  const a = m === "sidebar", c = (d) => {
+  const a = m === "sidebar", l = (d) => {
     if (w)
-      return /* @__PURE__ */ r(_, {
+      return /* @__PURE__ */ r(f, {
         children: d
       });
-    const l = f.render(d);
+    const c = _(d);
     return /* @__PURE__ */ r("div", {
       dangerouslySetInnerHTML: {
-        __html: l
+        __html: c
       }
     });
   };
@@ -33,11 +33,11 @@ import '../../../../styles/answer-content.css';const C = "_answerContent_uoab3_1
     }), t && e && /* @__PURE__ */ r("div", {
       className: i(n.answerContent, n.answerMarkdown, a && n.sidebar, "Answer-text", o),
       ...s,
-      children: c(e)
+      children: l(e)
     })]
   });
 };
 export {
-  v as AnswerContent,
-  v as default
+  g as AnswerContent,
+  g as default
 };

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

@@ -1,43 +1,53 @@
-import { useNotification as n, Tooltip as l, IconButton as m } from "@box/blueprint-web";
+import { useNotification as l, Tooltip as m, IconButton as d } from "@box/blueprint-web";
 import { Clipboard as u } from "@box/blueprint-web-assets/icons/Line";
-import { useIntl as d } from "react-intl";
+import { useIntl as b } from "react-intl";
 import f from "../../messages.js";
-import { LOGGER_BASE_CONFIG as b, LOGGER_ACTION_CLICK as C } from "../common/constants.js";
-import t from "./messages.js";
-import { focusInput as T } from "../common/focusInputUtils.js";
-import { jsx as s } from "react/jsx-runtime";
+import { LOGGER_BASE_CONFIG as C, LOGGER_ACTION_CLICK as g } from "../common/constants.js";
+import { focusInput as y } from "../common/focusInputUtils.js";
+import { markdownToHtmlString as T } from "../common/markdown.js";
+import a from "./messages.js";
+import { jsx as n } from "react/jsx-runtime";
 const N = ({
-  answer: i,
-  onAnswerCopy: a,
-  recordAction: r
+  answer: t,
+  onAnswerCopy: r,
+  recordAction: e
 }) => {
   const {
     formatMessage: o
-  } = d(), {
-    addNotification: c
-  } = n(), p = () => {
-    r && r({
-      ...b,
-      action: C,
+  } = b(), {
+    addNotification: s
+  } = l(), p = async () => {
+    if (e && e({
+      ...C,
+      action: g,
       target: "copyToClipboard"
-    }), i && navigator && navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(i).then(() => {
-      c({
+    }), t && navigator && navigator.clipboard && navigator.clipboard.write) {
+      const i = T(t), c = new ClipboardItem({
+        "text/html": new Blob([i], {
+          type: "text/html"
+        }),
+        "text/plain": new Blob([t], {
+          type: "text/plain"
+        })
+      });
+      await navigator.clipboard.write([c]), s({
         sensitivity: "foreground",
-        styledText: o(t.copyToClipboardSucceeded),
+        styledText: o(a.copyToClipboardSucceeded),
         variant: "success",
-        typeIconAriaLabel: o(t.copyButtonSuccessText),
+        typeIconAriaLabel: o(a.copyButtonSuccessText),
         closeButtonAriaLabel: o(f.closeButtonText)
-      }), a && a(i);
-    }), T();
+      }), r && r(t);
+    }
+    y();
   };
-  return /* @__PURE__ */ s(l, {
-    content: o(t.copyToClipboard),
-    children: /* @__PURE__ */ s(m, {
-      "aria-label": o(t.copyToClipboard),
+  return /* @__PURE__ */ n(m, {
+    content: o(a.copyToClipboard),
+    children: /* @__PURE__ */ n(d, {
+      "aria-label": o(a.copyToClipboard),
       icon: u,
       onClick: p,
-      onFocusCapture: (e) => {
-        e.target.matches(":focus-visible") || e.stopPropagation();
+      onFocusCapture: (i) => {
+        i.target.matches(":focus-visible") || i.stopPropagation();
       },
       size: "x-small",
       "data-target-id": "IconButton-copyToClipboard"

package/dist/esm/lib/components/common/markdown.js

@@ -1057,11 +1057,11 @@ https://github.com/highlightjs/highlight.js/issues/2277`), U = u, k = f), w ===
   for (const u in Ae)
     typeof Ae[u] == "object" && ut(Ae[u]);
   return Object.assign(n, Ae), n;
-}, he = Tt({});
-he.newInstance = () => Tt({});
-var yr = he;
-he.HighlightJS = he;
-he.default = he;
+}, Ne = Tt({});
+Ne.newInstance = () => Tt({});
+var yr = Ne;
+Ne.HighlightJS = Ne;
+Ne.default = Ne;
 var De, Mn;
 function Tr() {
   if (Mn) return De;
@@ -10658,15 +10658,15 @@ function jr() {
       end: /\//,
       contains: ge
     }, re = ($) => {
-      const Re = t($, /\//), Ne = t(/\//, $);
+      const Re = t($, /\//), ye = t(/\//, $);
       return {
         begin: Re,
-        end: Ne,
+        end: ye,
         contains: [
           ...ge,
           {
             scope: "comment",
-            begin: `#(?!.*${Ne})`,
+            begin: `#(?!.*${ye})`,
             end: /$/
           }
         ]
@@ -10884,7 +10884,7 @@ function jr() {
     for (const $ of oe.variants) {
       const Re = $.contains.find((Ot) => Ot.label === "interpol");
       Re.keywords = u;
-      const Ne = [
+      const ye = [
         ...f,
         ...U,
         ...te,
@@ -10893,13 +10893,13 @@ function jr() {
         ...G
       ];
       Re.contains = [
-        ...Ne,
+        ...ye,
         {
           begin: /\(/,
           end: /\)/,
           contains: [
             "self",
-            ...Ne
+            ...ye
           ]
         }
       ];
@@ -12130,7 +12130,7 @@ R.registerLanguage("wasm", ra());
 R.HighlightJS = R;
 R.default = R;
 var aa = R;
-const Me = /* @__PURE__ */ At(aa), ye = new wt({
+const Me = /* @__PURE__ */ At(aa), he = new wt({
   breaks: !1,
   html: !1,
   linkTarget: "_blank",
@@ -12147,9 +12147,9 @@ const Me = /* @__PURE__ */ At(aa), ye = new wt({
     return "";
   }
 });
-ye.renderer.rules.table_open = () => `<div class="${fe.tableWrapper}" tabindex="0"><table>`;
-ye.renderer.rules.table_close = () => "</table></div>";
-ye.renderer.rules.link_open = (n, e) => {
+he.renderer.rules.table_open = () => `<div class="${fe.tableWrapper}" tabindex="0"><table>`;
+he.renderer.rules.table_close = () => "</table></div>";
+he.renderer.rules.link_open = (n, e) => {
   const {
     href: t
   } = n[e];
@@ -12159,10 +12159,11 @@ ye.renderer.rules.link_open = (n, e) => {
   } catch {
     a = "", c = !1;
   } finally {
-    c ? ye.renderer.rules.link_close = () => "</a>" : ye.renderer.rules.link_close = () => ` (${t})`;
+    c ? he.renderer.rules.link_close = () => "</a>" : he.renderer.rules.link_close = () => ` (${t})`;
   }
   return a;
 };
+const ca = (n) => he.render(n);
 export {
-  ye as default
+  ca as markdownToHtmlString
 };

package/dist/types/lib/components/answer/stories/shared.d.ts

@@ -30,6 +30,7 @@ export declare const citationsFromHubsMetadata: {
 export declare const answerWithLargeTable = "\n| English       | Spanish       | French        | German       | Italian      | Portuguese   | Dutch        | Russian      | Japanese     | Color        | Origin       | Taste        | Uses               | Season          | Nutritional Benefits                     |\n|---------------|---------------|---------------|--------------|--------------|--------------|--------------|--------------|--------------|--------------|--------------|--------------|---------------------|------------------|-------------------------------------------|\n| Apple         | Manzana       | Pomme         | Apfel        | Mela         | Ma\u00E7\u00E3         | Appel        | \u042F\u0431\u043B\u043E\u043A\u043E       | \u308A\u3093\u3054         | Red          | Europe       | Sweet        | Eating, Cooking    | Autumn          | High in fiber, vitamin C                  |\n| Banana        | Pl\u00E1tano       | Banane        | Banane       | Banana       | Banana       | Banaan       | \u0411\u0430\u043D\u0430\u043D        | \u30D0\u30CA\u30CA         | Yellow       | Tropical     | Sweet        | Eating, Smoothies  | Year-round      | High in potassium, vitamin B6             |\n| Orange        | Naranja       | Orange        | Orange       | Arancia      | Laranja      | Sinaasappel  | \u0410\u043F\u0435\u043B\u044C\u0441\u0438\u043D     | \u30AA\u30EC\u30F3\u30B8       | Orange       | Asia         | Tangy        | Juice, Eating      | Winter          | High in vitamin C, antioxidants           |\n| Grape         | Uva           | Raisin        | Traube       | Uva          | Uva          | Druif        | \u0412\u0438\u043D\u043E\u0433\u0440\u0430\u0434     | \u3076\u3069\u3046           | Purple       | Europe       | Sweet        | Eating, Wine       | Autumn          | High in antioxidants                     |\n| Strawberry    | Fresa         | Fraisier      | Erdbeere     | Fragola      | Morango      | Aardbei      | \u041A\u043B\u0443\u0431\u043D\u0438\u043A\u0430     | \u3044\u3061\u3054           | Red          | Europe       | Sweet        | Eating, Desserts   | Spring          | High in vitamin C, fiber                 |\n| Blueberry     | Ar\u00E1ndano      | Myrtille      | Heidelbeere  | Mirtillo     | Mirtilo      | Bosbes       | \u0413\u043E\u043B\u0443\u0431\u0438\u043A\u0430     | \u30D6\u30EB\u30FC\u30D9\u30EA\u30FC     | Blue         | North America| Sweet        | Eating, Baking     | Summer          | High in antioxidants                     |\n| Lemon         | Lim\u00F3n         | Citron        | Zitrone      | Limone       | Lim\u00E3o        | Citroen      | \u041B\u0438\u043C\u043E\u043D        | \u30EC\u30E2\u30F3         | Yellow       | Asia         | Sour         | Juice, Cooking     | Year-round      | High in vitamin C, aids digestion        |\n| Pineapple     | Pi\u00F1a          | Ananas        | Ananas       | Ananas       | Abacaxi      | Ananas       | \u0410\u043D\u0430\u043D\u0430\u0441       | \u30D1\u30A4\u30CA\u30C3\u30D7\u30EB     | Brown/Yellow | South America| Sweet        | Eating, Juicing    | Summer          | Rich in vitamin C, aids digestion        |\n| Watermelon    | Sand\u00EDa        | Past\u00E8que      | Wassermelone | Anguria      | Melancia     | Watermeloen  | \u0410\u0440\u0431\u0443\u0437        | \u30B9\u30A4\u30AB         | Green/Red    | Africa       | Sweet        | Eating, Juicing    | Summer          | Hydrating, low in calories               |\n| Cherry        | Cereza        | Cerise        | Kirsche      | Ciliegia     | Cereja       | Kers         | \u0412\u0438\u0448\u043D\u044F        | \u3055\u304F\u3089\u3093\u307C       | Red          | Europe       | Sweet        | Eating, Desserts   | Spring          | High in antioxidants, anti-inflammatory |\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit nisi eget ligula suscipit, id tempus lorem volutpat. Nam eget placerat justo. Fusce vitae tortor id mi accumsan vestibulum. Integer auctor fermentum nisi, et consequat orci facilisis ac. Ut vitae nisl sit amet orci ullamcorper fringilla non a turpis. Proin nec turpis sed elit mattis efficitur. Sed consequat dui et nisi malesuada, sed sodales nulla hendrerit. Nullam tristique, lorem nec aliquet varius, mauris purus eleifend justo, vitae varius purus mauris sit amet purus. Duis ac odio ut nulla fermentum congue. Integer consequat dui sed libero vulputate commodo. \n Donec rhoncus purus nec turpis pulvinar, ac aliquam neque aliquet. Sed semper libero quis massa vehicula, sit amet rhoncus tortor fringilla. Nulla facilisi. In ut nibh eget mauris dictum suscipit vel eget lacus. Nullam sollicitudin leo nec ligula convallis, eget pharetra nisi tristique. Nulla facilisi. Phasellus vestibulum tristique sollicitudin. Cras lacinia velit quis sapien tristique, sed luctus elit ultricies. Suspendisse ut dictum tortor. Phasellus sed purus nec odio congue ullamcorper. Sed auctor lorem id venenatis cursus. Sed ac quam tortor. Sed vel ante nec nulla vulputate placerat. Maecenas sed ante eget leo ultrices posuere. Vivamus sit amet feugiat risus.\n";
 export declare const answerWithTable = "\n| English       | Spanish       | Color       |\n|---------------|---------------|-------------|\n| Apple         | Manzana       | Red         |\n| Banana        | Pl\u00E1tano       | Yellow      |\n| Orange        | Naranja       | Orange      |\n| Grape         | Uva           | Purple      |\n| Strawberry    | Fresa         | Red         |\n| Blueberry     | Ar\u00E1ndano      | Blue        |\n| Lemon         | Lim\u00F3n         | Yellow      |\n| Pineapple     | Pi\u00F1a          | Brown/Yellow|\n| Watermelon    | Sand\u00EDa        | Green/Red   |\n| Cherry        | Cereza        | Red         |\n";
 export declare const answerWithCodeBlocks = "\nCode Blocks\n```html\n<div>\n  <p>This is a paragraph inside a &lt;div&gt; block.</p>\n</div>\n```\n\n```\nfunction greet(name) {\n    console.log('Hello, ' + name + '!');\n}\n\ngreet('World');\n```\n\n```c++\n#include <iostream>\n\nint main() {\n    std::cout << \"Hello, world! This is a long line that will cause overflow in the code block when displayed on a narrow screen or container.\" << std::endl;\n    return 0;\n}\n```\n";
+export declare const comprehensiveMarkdownAnswer = "\n# Comprehensive AI Answer with All Markdown Features\n\nThis is a comprehensive mock AI answer designed to test all markdown rendering capabilities in the Box AI content answers system.\n\n## Text Formatting\n\nHere we demonstrate various text formatting options:\n\n- **Bold text** using double asterisks\n- *Italic text* using single asterisks  \n- ***Bold and italic*** using triple asterisks\n- ~~Strikethrough text~~ using double tildes\n- `Inline code` using backticks\n- [External link](https://www.example.com) to external websites\n- [Box file link](https://app.box.com/file/123) to Box documents\n\n## Headers\n\nWe support all header levels:\n\n# Header 1\n## Header 2  \n### Header 3\n#### Header 4\n##### Header 5\n###### Header 6\n\n## Lists\n\n### Unordered Lists\n- First item\n- Second item\n  - Nested item A\n  - Nested item B\n    - Deeply nested item\n- Third item\n\n### Ordered Lists\n1. First numbered item\n2. Second numbered item\n   1. Nested numbered item A\n   2. Nested numbered item B\n      1. Deeply nested numbered item\n3. Third numbered item\n\n### Mixed Lists\n1. Ordered item with unordered sub-items\n   - Unordered sub-item 1\n   - Unordered sub-item 2\n2. Another ordered item\n   - More unordered content\n   - Even more content\n\n## Code Blocks\n\n### JavaScript\n```javascript\nfunction calculateSum(a, b) {\n    return a + b;\n}\n\nconst result = calculateSum(5, 3);\nconsole.log('Result:', result);\n```\n\n### Python\n```python\ndef fibonacci(n):\n    if n <= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)\n\n# Calculate first 10 Fibonacci numbers\nfor i in range(10):\n    print(f\"F({i}) = {fibonacci(i)}\")\n```\n\n### HTML\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Sample Page</title>\n</head>\n<body>\n    <h1>Welcome to our site</h1>\n    <p>This is a sample paragraph with <strong>bold</strong> and <em>italic</em> text.</p>\n</body>\n</html>\n```\n\n### CSS\n```css\n.container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px;\n}\n\n.button {\n    background-color: #007bff;\n    color: white;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.button:hover {\n    background-color: #0056b3;\n}\n```\n\n## Tables\n\n### Simple Table\n| Feature | Status | Notes |\n|---------|--------|-------|\n| Headers | \u2705 | All 6 levels supported |\n| Lists | \u2705 | Ordered, unordered, mixed |\n| Code | \u2705 | Inline and blocks |\n| Links | \u2705 | External and Box files |\n\n### Complex Table\n| Language | Type | Paradigm | Popularity | Use Cases |\n|----------|------|----------|------------|-----------|\n| JavaScript | Dynamic | Multi-paradigm | Very High | Web development, Node.js |\n| Python | Dynamic | Multi-paradigm | Very High | Data science, AI, web |\n| Java | Static | Object-oriented | High | Enterprise, Android |\n| C++ | Static | Multi-paradigm | High | Systems, games, performance |\n| Rust | Static | Multi-paradigm | Growing | Systems, safety-critical |\n\n## Blockquotes\n\n> This is a simple blockquote. It can contain multiple lines and will be properly formatted.\n\n> **Important Note:** Blockquotes can also contain other markdown elements like **bold text** and [links](https://example.com).\n\n> ### Blockquote with Header\n> \n> This blockquote contains a header and demonstrates how nested elements work within blockquotes.\n\n## Horizontal Rules\n\nWe can use horizontal rules to separate sections:\n\n---\n\n## Footnotes\n\nHere's some text with a footnote[^1] and another footnote[^2].\n\n[^1]: This is the first footnote with additional information.\n[^2]: This is the second footnote that might contain links to [external resources](https://example.com).\n\n## Task Lists\n\n- [x] Implement basic markdown support\n- [x] Add code block syntax highlighting  \n- [x] Support tables and lists\n- [ ] Add custom components for Box files\n- [ ] Implement advanced table features\n- [ ] Add support for mathematical expressions\n\n## Mixed Content Example\n\nHere's a paragraph that combines multiple markdown features:\n\nThe **Box AI system** supports various content types including:\n1. *Text documents* with formatting\n2. `Code files` with syntax highlighting\n3. [Spreadsheets](https://app.box.com/file/456) with data analysis\n4. [Presentations](https://app.box.com/file/789) with visual content\n\n> **Pro Tip:** You can reference multiple file types in a single answer, and the system will automatically create clickable links to Box files while showing external links with their URLs.\n\n---\n\n## Conclusion\n\nThis comprehensive example demonstrates the full range of markdown features supported by the Box AI content answers system. All elements should render correctly in both legacy and React markdown modes.\n\n**Key Features Tested:**\n- \u2705 Headers (H1-H6)\n- \u2705 Text formatting (bold, italic, strikethrough, code)\n- \u2705 Lists (ordered, unordered, mixed, nested)\n- \u2705 Code blocks with syntax highlighting\n- \u2705 Tables (simple and complex)\n- \u2705 Blockquotes\n- \u2705 Links (external and Box files)\n- \u2705 Horizontal rules\n- \u2705 Footnotes\n- \u2705 Task lists\n- \u2705 Mixed content scenarios\n";
 export declare const testItems: {
     id: string;
     name: string;
@@ -104,3 +105,5 @@ export declare const AnswerWithNonBoxUrlsMarkdown: (props: AnswerProps) => impor
 export declare const AnswerWithMixedUrlsMarkdown: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AnswerWithReactModeCitations: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AnswerWithReactModeMixedUrls: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnswerWithComprehensiveMarkdown: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnswerWithComprehensiveMarkdownReact: (props: AnswerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/common/markdown.d.ts

@@ -1,2 +1,7 @@
-declare const md: any;
-export default md;
+/**
+ * Renders markdown content to HTML string.
+ * This abstraction makes it easier to replace the underlying markdown library in the future.
+ * @param content - The markdown content to render
+ * @returns The rendered HTML string
+ */
+export declare const markdownToHtmlString: (content: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/box-ai-content-answers",
-    "version": "1.1.4",
+    "version": "1.2.0",
     "peerDependencies": {
         "@box/blueprint-web": "^7.8.0",
         "@box/blueprint-web-assets": "^4.56.1",
@@ -17,11 +17,11 @@
     },
     "devDependencies": {
         "@box/babel-plugin-target-attributes": "1.3.0",
-        "@box/blueprint-web": "^12.84.0",
-        "@box/blueprint-web-assets": "^4.72.0",
-        "@box/box-ai-agent-selector": "^1.1.3",
-        "@box/item-icon": "^1.1.3",
-        "@box/storybook-utils": "^0.14.8",
+        "@box/blueprint-web": "^12.85.1",
+        "@box/blueprint-web-assets": "^4.73.0",
+        "@box/box-ai-agent-selector": "^1.1.5",
+        "@box/item-icon": "^1.1.5",
+        "@box/storybook-utils": "^0.14.9",
         "@testing-library/react": "^15.0.6",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",