@assistant-ui/react-markdown 0.2.21 → 0.2.23

package/dist/ui/code-header.mjs

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { INTERNAL, useThreadConfig } from "@assistant-ui/react";
+import { useCopyToClipboard } from "./useCopyToClipboard";
+const { TooltipIconButton } = INTERNAL;
+const CodeHeader = ({ language, code }) => {
+  const {
+    strings: {
+      code: { header: { copy: { tooltip = "Copy" } = {} } = {} } = {}
+    } = {}
+  } = useThreadConfig();
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "aui-code-header-root", children: [
+    /* @__PURE__ */ jsx("span", { className: "aui-code-header-language", children: language }),
+    /* @__PURE__ */ jsxs(TooltipIconButton, { tooltip, onClick: onCopy, children: [
+      !isCopied && /* @__PURE__ */ jsx(CopyIcon, {}),
+      isCopied && /* @__PURE__ */ jsx(CheckIcon, {})
+    ] })
+  ] });
+};
+export {
+  CodeHeader
+};
+//# sourceMappingURL=code-header.mjs.map

package/dist/ui/code-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/code-header.tsx"],"sourcesContent":["import { FC } from \"react\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { INTERNAL, useThreadConfig } from \"@assistant-ui/react\";\n\nimport { CodeHeaderProps } from \"../overrides/types\";\nimport { useCopyToClipboard } from \"./useCopyToClipboard\";\n\nconst { TooltipIconButton } = INTERNAL;\n\nexport const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {\n  const {\n    strings: {\n      code: { header: { copy: { tooltip = \"Copy\" } = {} } = {} } = {},\n    } = {},\n  } = useThreadConfig();\n\n  const { isCopied, copyToClipboard } = useCopyToClipboard();\n  const onCopy = () => {\n    if (!code || isCopied) return;\n    copyToClipboard(code);\n  };\n\n  return (\n    <div className=\"aui-code-header-root\">\n      <span className=\"aui-code-header-language\">{language}</span>\n      <TooltipIconButton tooltip={tooltip} onClick={onCopy}>\n        {!isCopied && <CopyIcon />}\n        {isCopied && <CheckIcon />}\n      </TooltipIconButton>\n    </div>\n  );\n};\n"],"mappings":"AAwBM,cACA,YADA;AAvBN,SAAS,WAAW,gBAAgB;AACpC,SAAS,UAAU,uBAAuB;AAG1C,SAAS,0BAA0B;AAEnC,MAAM,EAAE,kBAAkB,IAAI;AAEvB,MAAM,aAAkC,CAAC,EAAE,UAAU,KAAK,MAAM;AACrE,QAAM;AAAA,IACJ,SAAS;AAAA,MACP,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,OAAO,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC;AAAA,IAChE,IAAI,CAAC;AAAA,EACP,IAAI,gBAAgB;AAEpB,QAAM,EAAE,UAAU,gBAAgB,IAAI,mBAAmB;AACzD,QAAM,SAAS,MAAM;AACnB,QAAI,CAAC,QAAQ,SAAU;AACvB,oBAAgB,IAAI;AAAA,EACtB;AAEA,SACE,qBAAC,SAAI,WAAU,wBACb;AAAA,wBAAC,UAAK,WAAU,4BAA4B,oBAAS;AAAA,IACrD,qBAAC,qBAAkB,SAAkB,SAAS,QAC3C;AAAA,OAAC,YAAY,oBAAC,YAAS;AAAA,MACvB,YAAY,oBAAC,aAAU;AAAA,OAC1B;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/markdown-text.js

@@ -0,0 +1,112 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var markdown_text_exports = {};
+__export(markdown_text_exports, {
+  makeMarkdownText: () => makeMarkdownText
+});
+module.exports = __toCommonJS(markdown_text_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_code_header = require("./code-header");
+var import_classnames = __toESM(require("classnames"));
+var import_MarkdownText = require("../primitives/MarkdownText");
+var import_react2 = require("@assistant-ui/react");
+var import_PreOverride = require("../overrides/PreOverride");
+const { withSmoothContextProvider, useSmoothStatus } = import_react2.INTERNAL;
+const defaultComponents = {
+  h1: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: (0, import_classnames.default)("aui-md-h1", className), ...props }),
+  h2: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: (0, import_classnames.default)("aui-md-h2", className), ...props }),
+  h3: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: (0, import_classnames.default)("aui-md-h3", className), ...props }),
+  h4: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_classnames.default)("aui-md-h4", className), ...props }),
+  h5: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: (0, import_classnames.default)("aui-md-h5", className), ...props }),
+  h6: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: (0, import_classnames.default)("aui-md-h6", className), ...props }),
+  p: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_classnames.default)("aui-md-p", className), ...props }),
+  a: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: (0, import_classnames.default)("aui-md-a", className), ...props }),
+  blockquote: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "blockquote",
+    {
+      className: (0, import_classnames.default)("aui-md-blockquote", className),
+      ...props
+    }
+  ),
+  ul: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: (0, import_classnames.default)("aui-md-ul", className), ...props }),
+  ol: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: (0, import_classnames.default)("aui-md-ol", className), ...props }),
+  hr: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: (0, import_classnames.default)("aui-md-hr", className), ...props }),
+  table: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: (0, import_classnames.default)("aui-md-table", className), ...props }),
+  th: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: (0, import_classnames.default)("aui-md-th", className), ...props }),
+  td: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_classnames.default)("aui-md-td", className), ...props }),
+  tr: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: (0, import_classnames.default)("aui-md-tr", className), ...props }),
+  sup: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", { className: (0, import_classnames.default)("aui-md-sup", className), ...props }),
+  pre: ({ node, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: (0, import_classnames.default)("aui-md-pre", className), ...props }),
+  code: ({ node, className, ...props }) => {
+    const isCodeBlock = (0, import_PreOverride.useIsMarkdownCodeBlock)();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "code",
+      {
+        className: (0, import_classnames.default)(!isCodeBlock && "aui-md-inline-code", className),
+        ...props
+      }
+    );
+  },
+  CodeHeader: import_code_header.CodeHeader
+};
+const makeMarkdownText = ({
+  className,
+  components: userComponents,
+  ...rest
+} = {}) => {
+  const components = {
+    ...defaultComponents,
+    ...Object.fromEntries(
+      // ignore undefined values, so undefined values do not override default components
+      Object.entries(userComponents ?? {}).filter(([_, v]) => v !== void 0)
+    )
+  };
+  const MarkdownTextImpl = () => {
+    const status = useSmoothStatus();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_MarkdownText.MarkdownTextPrimitive,
+      {
+        components,
+        ...rest,
+        className: (0, import_classnames.default)(
+          status.type === "running" && "aui-md-running",
+          className
+        )
+      }
+    );
+  };
+  MarkdownTextImpl.displayName = "MarkdownText";
+  return (0, import_react.memo)(withSmoothContextProvider(MarkdownTextImpl), () => true);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  makeMarkdownText
+});
+//# sourceMappingURL=markdown-text.js.map

package/dist/ui/markdown-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/markdown-text.tsx"],"sourcesContent":["import { FC, memo } from \"react\";\nimport { CodeHeader } from \"./code-header\";\nimport classNames from \"classnames\";\nimport {\n  MarkdownTextPrimitive,\n  MarkdownTextPrimitiveProps,\n} from \"../primitives/MarkdownText\";\nimport { INTERNAL } from \"@assistant-ui/react\";\nimport { useIsMarkdownCodeBlock } from \"../overrides/PreOverride\";\n\nconst { withSmoothContextProvider, useSmoothStatus } = INTERNAL;\n\nexport type MakeMarkdownTextProps = MarkdownTextPrimitiveProps;\n\nconst defaultComponents: MakeMarkdownTextProps[\"components\"] = {\n  h1: ({ node, className, ...props }) => (\n    <h1 className={classNames(\"aui-md-h1\", className)} {...props} />\n  ),\n  h2: ({ node, className, ...props }) => (\n    <h2 className={classNames(\"aui-md-h2\", className)} {...props} />\n  ),\n  h3: ({ node, className, ...props }) => (\n    <h3 className={classNames(\"aui-md-h3\", className)} {...props} />\n  ),\n  h4: ({ node, className, ...props }) => (\n    <h4 className={classNames(\"aui-md-h4\", className)} {...props} />\n  ),\n  h5: ({ node, className, ...props }) => (\n    <h5 className={classNames(\"aui-md-h5\", className)} {...props} />\n  ),\n  h6: ({ node, className, ...props }) => (\n    <h6 className={classNames(\"aui-md-h6\", className)} {...props} />\n  ),\n  p: ({ node, className, ...props }) => (\n    <p className={classNames(\"aui-md-p\", className)} {...props} />\n  ),\n  a: ({ node, className, ...props }) => (\n    <a className={classNames(\"aui-md-a\", className)} {...props} />\n  ),\n  blockquote: ({ node, className, ...props }) => (\n    <blockquote\n      className={classNames(\"aui-md-blockquote\", className)}\n      {...props}\n    />\n  ),\n  ul: ({ node, className, ...props }) => (\n    <ul className={classNames(\"aui-md-ul\", className)} {...props} />\n  ),\n  ol: ({ node, className, ...props }) => (\n    <ol className={classNames(\"aui-md-ol\", className)} {...props} />\n  ),\n  hr: ({ node, className, ...props }) => (\n    <hr className={classNames(\"aui-md-hr\", className)} {...props} />\n  ),\n  table: ({ node, className, ...props }) => (\n    <table className={classNames(\"aui-md-table\", className)} {...props} />\n  ),\n  th: ({ node, className, ...props }) => (\n    <th className={classNames(\"aui-md-th\", className)} {...props} />\n  ),\n  td: ({ node, className, ...props }) => (\n    <td className={classNames(\"aui-md-td\", className)} {...props} />\n  ),\n  tr: ({ node, className, ...props }) => (\n    <tr className={classNames(\"aui-md-tr\", className)} {...props} />\n  ),\n  sup: ({ node, className, ...props }) => (\n    <sup className={classNames(\"aui-md-sup\", className)} {...props} />\n  ),\n  pre: ({ node, className, ...props }) => (\n    <pre className={classNames(\"aui-md-pre\", className)} {...props} />\n  ),\n  code: ({ node, className, ...props }) => {\n    const isCodeBlock = useIsMarkdownCodeBlock();\n    return (\n      <code\n        className={classNames(!isCodeBlock && \"aui-md-inline-code\", className)}\n        {...props}\n      />\n    );\n  },\n  CodeHeader,\n};\n\nexport const makeMarkdownText = ({\n  className,\n  components: userComponents,\n  ...rest\n}: MakeMarkdownTextProps = {}) => {\n  const components = {\n    ...defaultComponents,\n    ...Object.fromEntries(\n      // ignore undefined values, so undefined values do not override default components\n      Object.entries(userComponents ?? {}).filter(([_, v]) => v !== undefined),\n    ),\n  };\n\n  const MarkdownTextImpl: FC = () => {\n    const status = useSmoothStatus();\n    return (\n      <MarkdownTextPrimitive\n        components={components}\n        {...rest}\n        className={classNames(\n          status.type === \"running\" && \"aui-md-running\",\n          className,\n        )}\n      />\n    );\n  };\n  MarkdownTextImpl.displayName = \"MarkdownText\";\n\n  return memo(withSmoothContextProvider(MarkdownTextImpl), () => true);\n};\n"],"mappings":"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","names":["import_react","classNames"]}

package/dist/ui/markdown-text.mjs

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { CodeHeader } from "./code-header";
+import classNames from "classnames";
+import {
+  MarkdownTextPrimitive
+} from "../primitives/MarkdownText";
+import { INTERNAL } from "@assistant-ui/react";
+import { useIsMarkdownCodeBlock } from "../overrides/PreOverride";
+const { withSmoothContextProvider, useSmoothStatus } = INTERNAL;
+const defaultComponents = {
+  h1: ({ node, className, ...props }) => /* @__PURE__ */ jsx("h1", { className: classNames("aui-md-h1", className), ...props }),
+  h2: ({ node, className, ...props }) => /* @__PURE__ */ jsx("h2", { className: classNames("aui-md-h2", className), ...props }),
+  h3: ({ node, className, ...props }) => /* @__PURE__ */ jsx("h3", { className: classNames("aui-md-h3", className), ...props }),
+  h4: ({ node, className, ...props }) => /* @__PURE__ */ jsx("h4", { className: classNames("aui-md-h4", className), ...props }),
+  h5: ({ node, className, ...props }) => /* @__PURE__ */ jsx("h5", { className: classNames("aui-md-h5", className), ...props }),
+  h6: ({ node, className, ...props }) => /* @__PURE__ */ jsx("h6", { className: classNames("aui-md-h6", className), ...props }),
+  p: ({ node, className, ...props }) => /* @__PURE__ */ jsx("p", { className: classNames("aui-md-p", className), ...props }),
+  a: ({ node, className, ...props }) => /* @__PURE__ */ jsx("a", { className: classNames("aui-md-a", className), ...props }),
+  blockquote: ({ node, className, ...props }) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: classNames("aui-md-blockquote", className),
+      ...props
+    }
+  ),
+  ul: ({ node, className, ...props }) => /* @__PURE__ */ jsx("ul", { className: classNames("aui-md-ul", className), ...props }),
+  ol: ({ node, className, ...props }) => /* @__PURE__ */ jsx("ol", { className: classNames("aui-md-ol", className), ...props }),
+  hr: ({ node, className, ...props }) => /* @__PURE__ */ jsx("hr", { className: classNames("aui-md-hr", className), ...props }),
+  table: ({ node, className, ...props }) => /* @__PURE__ */ jsx("table", { className: classNames("aui-md-table", className), ...props }),
+  th: ({ node, className, ...props }) => /* @__PURE__ */ jsx("th", { className: classNames("aui-md-th", className), ...props }),
+  td: ({ node, className, ...props }) => /* @__PURE__ */ jsx("td", { className: classNames("aui-md-td", className), ...props }),
+  tr: ({ node, className, ...props }) => /* @__PURE__ */ jsx("tr", { className: classNames("aui-md-tr", className), ...props }),
+  sup: ({ node, className, ...props }) => /* @__PURE__ */ jsx("sup", { className: classNames("aui-md-sup", className), ...props }),
+  pre: ({ node, className, ...props }) => /* @__PURE__ */ jsx("pre", { className: classNames("aui-md-pre", className), ...props }),
+  code: ({ node, className, ...props }) => {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: classNames(!isCodeBlock && "aui-md-inline-code", className),
+        ...props
+      }
+    );
+  },
+  CodeHeader
+};
+const makeMarkdownText = ({
+  className,
+  components: userComponents,
+  ...rest
+} = {}) => {
+  const components = {
+    ...defaultComponents,
+    ...Object.fromEntries(
+      // ignore undefined values, so undefined values do not override default components
+      Object.entries(userComponents ?? {}).filter(([_, v]) => v !== void 0)
+    )
+  };
+  const MarkdownTextImpl = () => {
+    const status = useSmoothStatus();
+    return /* @__PURE__ */ jsx(
+      MarkdownTextPrimitive,
+      {
+        components,
+        ...rest,
+        className: classNames(
+          status.type === "running" && "aui-md-running",
+          className
+        )
+      }
+    );
+  };
+  MarkdownTextImpl.displayName = "MarkdownText";
+  return memo(withSmoothContextProvider(MarkdownTextImpl), () => true);
+};
+export {
+  makeMarkdownText
+};
+//# sourceMappingURL=markdown-text.mjs.map

package/dist/ui/markdown-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/markdown-text.tsx"],"sourcesContent":["import { FC, memo } from \"react\";\nimport { CodeHeader } from \"./code-header\";\nimport classNames from \"classnames\";\nimport {\n  MarkdownTextPrimitive,\n  MarkdownTextPrimitiveProps,\n} from \"../primitives/MarkdownText\";\nimport { INTERNAL } from \"@assistant-ui/react\";\nimport { useIsMarkdownCodeBlock } from \"../overrides/PreOverride\";\n\nconst { withSmoothContextProvider, useSmoothStatus } = INTERNAL;\n\nexport type MakeMarkdownTextProps = MarkdownTextPrimitiveProps;\n\nconst defaultComponents: MakeMarkdownTextProps[\"components\"] = {\n  h1: ({ node, className, ...props }) => (\n    <h1 className={classNames(\"aui-md-h1\", className)} {...props} />\n  ),\n  h2: ({ node, className, ...props }) => (\n    <h2 className={classNames(\"aui-md-h2\", className)} {...props} />\n  ),\n  h3: ({ node, className, ...props }) => (\n    <h3 className={classNames(\"aui-md-h3\", className)} {...props} />\n  ),\n  h4: ({ node, className, ...props }) => (\n    <h4 className={classNames(\"aui-md-h4\", className)} {...props} />\n  ),\n  h5: ({ node, className, ...props }) => (\n    <h5 className={classNames(\"aui-md-h5\", className)} {...props} />\n  ),\n  h6: ({ node, className, ...props }) => (\n    <h6 className={classNames(\"aui-md-h6\", className)} {...props} />\n  ),\n  p: ({ node, className, ...props }) => (\n    <p className={classNames(\"aui-md-p\", className)} {...props} />\n  ),\n  a: ({ node, className, ...props }) => (\n    <a className={classNames(\"aui-md-a\", className)} {...props} />\n  ),\n  blockquote: ({ node, className, ...props }) => (\n    <blockquote\n      className={classNames(\"aui-md-blockquote\", className)}\n      {...props}\n    />\n  ),\n  ul: ({ node, className, ...props }) => (\n    <ul className={classNames(\"aui-md-ul\", className)} {...props} />\n  ),\n  ol: ({ node, className, ...props }) => (\n    <ol className={classNames(\"aui-md-ol\", className)} {...props} />\n  ),\n  hr: ({ node, className, ...props }) => (\n    <hr className={classNames(\"aui-md-hr\", className)} {...props} />\n  ),\n  table: ({ node, className, ...props }) => (\n    <table className={classNames(\"aui-md-table\", className)} {...props} />\n  ),\n  th: ({ node, className, ...props }) => (\n    <th className={classNames(\"aui-md-th\", className)} {...props} />\n  ),\n  td: ({ node, className, ...props }) => (\n    <td className={classNames(\"aui-md-td\", className)} {...props} />\n  ),\n  tr: ({ node, className, ...props }) => (\n    <tr className={classNames(\"aui-md-tr\", className)} {...props} />\n  ),\n  sup: ({ node, className, ...props }) => (\n    <sup className={classNames(\"aui-md-sup\", className)} {...props} />\n  ),\n  pre: ({ node, className, ...props }) => (\n    <pre className={classNames(\"aui-md-pre\", className)} {...props} />\n  ),\n  code: ({ node, className, ...props }) => {\n    const isCodeBlock = useIsMarkdownCodeBlock();\n    return (\n      <code\n        className={classNames(!isCodeBlock && \"aui-md-inline-code\", className)}\n        {...props}\n      />\n    );\n  },\n  CodeHeader,\n};\n\nexport const makeMarkdownText = ({\n  className,\n  components: userComponents,\n  ...rest\n}: MakeMarkdownTextProps = {}) => {\n  const components = {\n    ...defaultComponents,\n    ...Object.fromEntries(\n      // ignore undefined values, so undefined values do not override default components\n      Object.entries(userComponents ?? {}).filter(([_, v]) => v !== undefined),\n    ),\n  };\n\n  const MarkdownTextImpl: FC = () => {\n    const status = useSmoothStatus();\n    return (\n      <MarkdownTextPrimitive\n        components={components}\n        {...rest}\n        className={classNames(\n          status.type === \"running\" && \"aui-md-running\",\n          className,\n        )}\n      />\n    );\n  };\n  MarkdownTextImpl.displayName = \"MarkdownText\";\n\n  return memo(withSmoothContextProvider(MarkdownTextImpl), () => true);\n};\n"],"mappings":"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","names":[]}

package/dist/ui/useCopyToClipboard.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useCopyToClipboard_exports = {};
+__export(useCopyToClipboard_exports, {
+  useCopyToClipboard: () => useCopyToClipboard
+});
+module.exports = __toCommonJS(useCopyToClipboard_exports);
+var import_react = require("react");
+const useCopyToClipboard = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = (0, import_react.useState)(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+  return { isCopied, copyToClipboard };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCopyToClipboard
+});
+//# sourceMappingURL=useCopyToClipboard.js.map

package/dist/ui/useCopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/useCopyToClipboard.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { UseActionBarCopyProps } from \"@assistant-ui/react\";\n\nexport type useCopyToClipboardProps = UseActionBarCopyProps;\n\nexport const useCopyToClipboard = ({\n  copiedDuration = 3000,\n}: useCopyToClipboardProps = {}) => {\n  const [isCopied, setIsCopied] = useState<boolean>(false);\n\n  const copyToClipboard = (value: string) => {\n    if (!value) return;\n\n    navigator.clipboard.writeText(value).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), copiedDuration);\n    });\n  };\n\n  return { isCopied, copyToClipboard };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAKlB,MAAM,qBAAqB,CAAC;AAAA,EACjC,iBAAiB;AACnB,IAA6B,CAAC,MAAM;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAI,CAAC,MAAO;AAEZ,cAAU,UAAU,UAAU,KAAK,EAAE,KAAK,MAAM;AAC9C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,cAAc;AAAA,IACrD,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,UAAU,gBAAgB;AACrC;","names":[]}

package/dist/ui/useCopyToClipboard.mjs

@@ -0,0 +1,18 @@
+import { useState } from "react";
+const useCopyToClipboard = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+  return { isCopied, copyToClipboard };
+};
+export {
+  useCopyToClipboard
+};
+//# sourceMappingURL=useCopyToClipboard.mjs.map

package/dist/ui/useCopyToClipboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/useCopyToClipboard.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { UseActionBarCopyProps } from \"@assistant-ui/react\";\n\nexport type useCopyToClipboardProps = UseActionBarCopyProps;\n\nexport const useCopyToClipboard = ({\n  copiedDuration = 3000,\n}: useCopyToClipboardProps = {}) => {\n  const [isCopied, setIsCopied] = useState<boolean>(false);\n\n  const copyToClipboard = (value: string) => {\n    if (!value) return;\n\n    navigator.clipboard.writeText(value).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), copiedDuration);\n    });\n  };\n\n  return { isCopied, copyToClipboard };\n};\n"],"mappings":"AAAA,SAAS,gBAAgB;AAKlB,MAAM,qBAAqB,CAAC;AAAA,EACjC,iBAAiB;AACnB,IAA6B,CAAC,MAAM;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAI,CAAC,MAAO;AAEZ,cAAU,UAAU,UAAU,KAAK,EAAE,KAAK,MAAM;AAC9C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,cAAc;AAAA,IACrD,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,UAAU,gBAAgB;AACrC;","names":[]}

package/package.json

@@ -1,27 +1,17 @@
 {
   "name": "@assistant-ui/react-markdown",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "license": "MIT",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./tailwindcss": {
-      "import": {
-        "types": "./dist/tailwindcss/index.d.mts",
-        "default": "./dist/tailwindcss/index.mjs"
-      },
-      "require": {
-        "types": "./dist/tailwindcss/index.d.ts",
-        "default": "./dist/tailwindcss/index.js"
-      }
+      "types": "./dist/tailwindcss/index.d.mts",
+      "import": "./dist/tailwindcss/index.mjs",
+      "require": "./dist/tailwindcss/index.js"
     },
     "./styles/*": {
       "default": "./dist/styles/*"
@@ -33,6 +23,8 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "tailwindcss",
+    "src",
     "README.md"
   ],
   "sideEffects": false,
@@ -44,7 +36,7 @@
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.5.91",
+    "@assistant-ui/react": "^0.5.93",
     "@types/react": "*",
     "react": "^18 || ^19",
     "tailwindcss": "^3.4.4"
@@ -58,14 +50,14 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^22.7.7",
+    "@types/node": "^22.7.9",
     "autoprefixer": "^10.4.20",
     "eslint": "^9",
-    "eslint-config-next": "15.0.0",
+    "eslint-config-next": "15.0.1",
     "postcss": "^8.4.47",
     "postcss-js": "^4.0.1",
-    "react": "19.0.0-rc-65a56d0e-20241020",
-    "react-dom": "19.0.0-rc-65a56d0e-20241020",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "8.3.0",
@@ -86,6 +78,7 @@
     "url": "https://github.com/Yonom/assistant-ui/issues"
   },
   "scripts": {
-    "build": "tsx scripts/build.mts"
+    "build": "tsx scripts/build.mts && pnpm run build:declarations",
+    "build:declarations": "tsc -p tsconfig.declarations.json"
   }
 }

package/src/index.ts

@@ -0,0 +1,18 @@
+export {
+  MarkdownTextPrimitive,
+  type MarkdownTextPrimitiveProps,
+} from "./primitives/MarkdownText";
+
+export type {
+  CodeHeaderProps,
+  SyntaxHighlighterProps,
+} from "./overrides/types";
+
+export { useIsMarkdownCodeBlock } from "./overrides/PreOverride";
+
+export {
+  makeMarkdownText,
+  type MakeMarkdownTextProps,
+} from "./ui/markdown-text";
+
+export { CodeHeader } from "./ui/code-header";

package/src/overrides/CodeBlock.tsx

@@ -0,0 +1,41 @@
+import { ComponentType, FC, useMemo } from "react";
+
+import {
+  CodeComponent,
+  CodeHeaderProps,
+  PreComponent,
+  SyntaxHighlighterProps,
+} from "./types";
+import { DefaultCodeBlockContent } from "./defaultComponents";
+
+export type CodeBlockProps = {
+  language: string;
+  code: string;
+  components: {
+    Pre: PreComponent;
+    Code: CodeComponent;
+    CodeHeader: ComponentType<CodeHeaderProps>;
+    SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+  };
+};
+
+export const DefaultCodeBlock: FC<CodeBlockProps> = ({
+  components: { Pre, Code, SyntaxHighlighter, CodeHeader },
+  language,
+  code,
+}) => {
+  const components = useMemo(() => ({ Pre, Code }), [Pre, Code]);
+
+  const SH = !!language ? SyntaxHighlighter : DefaultCodeBlockContent;
+
+  return (
+    <>
+      <CodeHeader language={language} code={code} />
+      <SH
+        components={components}
+        language={language ?? "unknown"}
+        code={code}
+      />
+    </>
+  );
+};

package/src/overrides/CodeOverride.tsx

@@ -0,0 +1,91 @@
+import { ComponentPropsWithoutRef, ComponentType, FC, useContext } from "react";
+import { PreContext } from "./PreOverride";
+import {
+  CodeComponent,
+  CodeHeaderProps,
+  PreComponent,
+  SyntaxHighlighterProps,
+} from "./types";
+import { DefaultCodeBlock } from "./CodeBlock";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { withDefaultProps } from "./withDefaults";
+import { DefaultCodeBlockContent } from "./defaultComponents";
+
+const CodeBlockOverride: FC<CodeOverrideProps> = ({
+  components: {
+    Pre,
+    Code,
+    SyntaxHighlighter: FallbackSyntaxHighlighter,
+    CodeHeader: FallbackCodeHeader,
+    by_language = {},
+  },
+  children,
+  ...codeProps
+}) => {
+  const preProps = useContext(PreContext)!;
+  const getPreProps = withDefaultProps<any>(preProps);
+  const WrappedPre: PreComponent = useCallbackRef((props) => (
+    <Pre {...getPreProps(props)} />
+  ));
+
+  const getCodeProps = withDefaultProps<any>(codeProps);
+  const WrappedCode: CodeComponent = useCallbackRef((props) => (
+    <Code {...getCodeProps(props)} />
+  ));
+
+  const language = /language-(\w+)/.exec(codeProps.className || "")?.[1] ?? "";
+
+  // if the code content is not string (due to rehype plugins), return a default code block
+  if (typeof children !== "string") {
+    return (
+      <DefaultCodeBlockContent
+        components={{ Pre: WrappedPre, Code: WrappedCode }}
+        code={children}
+      />
+    );
+  }
+
+  const SyntaxHighlighter: ComponentType<SyntaxHighlighterProps> =
+    by_language[language]?.SyntaxHighlighter ?? FallbackSyntaxHighlighter;
+
+  const CodeHeader: ComponentType<CodeHeaderProps> =
+    by_language[language]?.CodeHeader ?? FallbackCodeHeader;
+
+  return (
+    <DefaultCodeBlock
+      components={{
+        Pre: WrappedPre,
+        Code: WrappedCode,
+        SyntaxHighlighter,
+        CodeHeader,
+      }}
+      language={language || "unknown"}
+      code={children}
+    />
+  );
+};
+
+export type CodeOverrideProps = ComponentPropsWithoutRef<CodeComponent> & {
+  components: {
+    Pre: PreComponent;
+    Code: CodeComponent;
+    CodeHeader: ComponentType<CodeHeaderProps>;
+    SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+    by_language?: Record<
+      string,
+      {
+        CodeHeader?: ComponentType<CodeHeaderProps>;
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;
+      }
+    >;
+  };
+};
+
+export const CodeOverride: FC<CodeOverrideProps> = ({
+  components,
+  ...props
+}) => {
+  const preProps = useContext(PreContext);
+  if (!preProps) return <components.Code {...(props as any)} />;
+  return <CodeBlockOverride components={components} {...props} />;
+};

package/src/overrides/PreOverride.tsx

@@ -0,0 +1,15 @@
+import { createContext, ComponentPropsWithoutRef, useContext } from "react";
+import { PreComponent } from "./types";
+
+export const PreContext = createContext<Omit<
+  ComponentPropsWithoutRef<PreComponent>,
+  "children"
+> | null>(null);
+
+export const useIsMarkdownCodeBlock = () => {
+  return useContext(PreContext) !== null;
+};
+
+export const PreOverride: PreComponent = ({ children, ...rest }) => {
+  return <PreContext.Provider value={rest}>{children}</PreContext.Provider>;
+};

package/src/overrides/defaultComponents.tsx

@@ -0,0 +1,21 @@
+import type { ComponentType, ReactNode } from "react";
+import { PreComponent, CodeComponent, CodeHeaderProps } from "./types";
+
+export const DefaultPre: PreComponent = ({ node, ...rest }) => (
+  <pre {...rest} />
+);
+
+export const DefaultCode: CodeComponent = ({ node, ...rest }) => (
+  <code {...rest} />
+);
+
+export const DefaultCodeBlockContent: ComponentType<{
+  components: { Pre: PreComponent; Code: CodeComponent };
+  code: string | ReactNode | undefined;
+}> = ({ components: { Pre, Code }, code }) => (
+  <Pre>
+    <Code>{code}</Code>
+  </Pre>
+);
+
+export const DefaultCodeHeader: ComponentType<CodeHeaderProps> = () => null;

package/src/overrides/types.ts

@@ -0,0 +1,22 @@
+import { Options } from "react-markdown";
+
+export type PreComponent = NonNullable<
+  NonNullable<Options["components"]>["pre"]
+>;
+export type CodeComponent = NonNullable<
+  NonNullable<Options["components"]>["code"]
+>;
+
+export type CodeHeaderProps = {
+  language: string | undefined;
+  code: string;
+};
+
+export type SyntaxHighlighterProps = {
+  components: {
+    Pre: PreComponent;
+    Code: CodeComponent;
+  };
+  language: string;
+  code: string;
+};

package/src/overrides/withDefaults.tsx

@@ -0,0 +1,14 @@
+import classNames from "classnames";
+
+export const withDefaultProps =
+  <TProps extends { className?: string | undefined }>({
+    className,
+    ...defaultProps
+  }: Partial<TProps>) =>
+  ({ className: classNameProp, ...props }: TProps) => {
+    return {
+      className: classNames(className, classNameProp),
+      ...defaultProps,
+      ...props,
+    } as TProps;
+  };