@assistant-ui/react-markdown 0.0.3 → 0.0.5

package/dist/index.d.mts

@@ -1,7 +1,28 @@
-import { FC } from 'react';
+import { ComponentType, FC } from 'react';
 import { Options } from 'react-markdown';
 
-type MarkdownTextPrimitiveProps = Omit<Options, "children">;
+type PreComponent = NonNullable<NonNullable<Options["components"]>["pre"]>;
+type CodeComponent = NonNullable<NonNullable<Options["components"]>["code"]>;
+type CodeHeaderProps = {
+    language: string | undefined;
+    code: string;
+};
+type SyntaxHighlighterProps = {
+    components: {
+        Pre: PreComponent;
+        Code: CodeComponent;
+    };
+    language: string;
+    code: string;
+};
+
+type MarkdownTextPrimitiveProps = Omit<Options, "components" | "children"> & {
+    components?: NonNullable<Options["components"]> & {
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;
+        CodeHeader?: ComponentType<CodeHeaderProps>;
+    };
+    smooth?: boolean;
+};
 declare const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps>;
 
-export { MarkdownTextPrimitive, type MarkdownTextPrimitiveProps };
+export { type CodeHeaderProps, MarkdownTextPrimitive, type MarkdownTextPrimitiveProps, type SyntaxHighlighterProps };

package/dist/index.d.ts

@@ -1,7 +1,28 @@
-import { FC } from 'react';
+import { ComponentType, FC } from 'react';
 import { Options } from 'react-markdown';
 
-type MarkdownTextPrimitiveProps = Omit<Options, "children">;
+type PreComponent = NonNullable<NonNullable<Options["components"]>["pre"]>;
+type CodeComponent = NonNullable<NonNullable<Options["components"]>["code"]>;
+type CodeHeaderProps = {
+    language: string | undefined;
+    code: string;
+};
+type SyntaxHighlighterProps = {
+    components: {
+        Pre: PreComponent;
+        Code: CodeComponent;
+    };
+    language: string;
+    code: string;
+};
+
+type MarkdownTextPrimitiveProps = Omit<Options, "components" | "children"> & {
+    components?: NonNullable<Options["components"]> & {
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;
+        CodeHeader?: ComponentType<CodeHeaderProps>;
+    };
+    smooth?: boolean;
+};
 declare const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps>;
 
-export { MarkdownTextPrimitive, type MarkdownTextPrimitiveProps };
+export { type CodeHeaderProps, MarkdownTextPrimitive, type MarkdownTextPrimitiveProps, type SyntaxHighlighterProps };

package/dist/index.js

@@ -35,19 +35,99 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/MarkdownText.tsx
-var import_react = require("@assistant-ui/react");
+var import_react3 = require("@assistant-ui/react");
 var import_react_markdown = __toESM(require("react-markdown"));
+
+// src/PreOverride.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var MarkdownTextPrimitive = (options) => {
-  const { useContentPart } = (0, import_react.useContentPartContext)();
-  const text = useContentPart((c) => {
-    if (c.part.type !== "text")
-      throw new Error(
-        "This component can only be used inside text content parts."
-      );
-    return c.part.text;
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { ...options, children: text });
+var PreContext = (0, import_react.createContext)(null);
+var PreOverride = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreContext.Provider, { value: rest, children });
+};
+
+// src/defaultComponents.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DefaultPre = ({ node, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { ...rest });
+var DefaultCode = ({ node, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { ...rest });
+var DefaultSyntaxHighlighter = ({ components: { Pre, Code }, code }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Code, { children: code }) });
+var DefaultCodeHeader = () => null;
+
+// src/MarkdownText.tsx
+var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
+
+// src/CodeOverride.tsx
+var import_react2 = require("react");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CodeBlockOverride = ({
+  components: { Pre, Code, SyntaxHighlighter, CodeHeader },
+  children,
+  ...codeProps
+}) => {
+  const preProps = (0, import_react2.useContext)(PreContext);
+  const WrappedPre = (0, import_react_use_callback_ref.useCallbackRef)((props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot.Slot, { ...preProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Pre, { ...props }) }));
+  const WrappedCode = (0, import_react_use_callback_ref.useCallbackRef)((props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot.Slot, { ...codeProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Code, { ...props }) }));
+  const components = (0, import_react2.useMemo)(
+    () => ({ Pre: WrappedPre, Code: WrappedCode }),
+    [WrappedPre, WrappedCode]
+  );
+  const language = /language-(\w+)/.exec(codeProps.className || "")?.[1];
+  const code = children;
+  const SH = language ? SyntaxHighlighter : DefaultSyntaxHighlighter;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CodeHeader, { language, code }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      SH,
+      {
+        components,
+        language: language ?? "unknown",
+        code
+      }
+    )
+  ] });
+};
+var CodeOverride = ({
+  components,
+  ...props
+}) => {
+  const preProps = (0, import_react2.useContext)(PreContext);
+  if (!preProps) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(components.Code, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CodeBlockOverride, { components, ...props });
+};
+
+// src/MarkdownText.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var { useSmooth } = import_react3.INTERNAL;
+var MarkdownTextPrimitive = ({
+  smooth = true,
+  components: userComponents,
+  ...rest
+}) => {
+  const {
+    part: { text }
+  } = (0, import_react3.useContentPartText)();
+  const smoothText = useSmooth(text, smooth);
+  const {
+    pre = DefaultPre,
+    code = DefaultCode,
+    SyntaxHighlighter = DefaultSyntaxHighlighter,
+    CodeHeader = DefaultCodeHeader,
+    ...componentsRest
+  } = userComponents ?? {};
+  const components = {
+    ...componentsRest,
+    pre: PreOverride,
+    code: (0, import_react_use_callback_ref2.useCallbackRef)((props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      CodeOverride,
+      {
+        components: { Pre: pre, Code: code, SyntaxHighlighter, CodeHeader },
+        ...props
+      }
+    ))
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_markdown.default, { components, ...rest, children: smoothText });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/MarkdownText.tsx"],"sourcesContent":["export {\n  MarkdownTextPrimitive,\n  type MarkdownTextPrimitiveProps,\n} from \"./MarkdownText\";\n","import { useContentPartContext } from \"@assistant-ui/react\";\nimport type { FC } from \"react\";\nimport ReactMarkdown, { type Options } from \"react-markdown\";\n\nexport type MarkdownTextPrimitiveProps = Omit<Options, \"children\">;\n\nexport const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps> = (\n  options,\n) => {\n  const { useContentPart } = useContentPartContext();\n  const text = useContentPart((c) => {\n    if (c.part.type !== \"text\")\n      throw new Error(\n        \"This component can only be used inside text content parts.\",\n      );\n\n    return c.part.text;\n  });\n  return <ReactMarkdown {...options}>{text}</ReactMarkdown>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsC;AAEtC,4BAA4C;AAgBnC;AAZF,IAAM,wBAAwD,CACnE,YACG;AACH,QAAM,EAAE,eAAe,QAAI,oCAAsB;AACjD,QAAM,OAAO,eAAe,CAAC,MAAM;AACjC,QAAI,EAAE,KAAK,SAAS;AAClB,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAEF,WAAO,EAAE,KAAK;AAAA,EAChB,CAAC;AACD,SAAO,4CAAC,sBAAAA,SAAA,EAAe,GAAG,SAAU,gBAAK;AAC3C;","names":["ReactMarkdown"]}
+{"version":3,"sources":["../src/index.ts","../src/MarkdownText.tsx","../src/PreOverride.tsx","../src/defaultComponents.tsx","../src/CodeOverride.tsx"],"sourcesContent":["export {\n  MarkdownTextPrimitive,\n  type MarkdownTextPrimitiveProps,\n} from \"./MarkdownText\";\n\nexport type { CodeHeaderProps, SyntaxHighlighterProps } from \"./types\";\n","import { INTERNAL, useContentPartText } from \"@assistant-ui/react\";\nimport type { ComponentType, FC } from \"react\";\nimport ReactMarkdown, { type Options } from \"react-markdown\";\nimport { SyntaxHighlighterProps, CodeHeaderProps } from \"./types\";\nimport { PreOverride } from \"./PreOverride\";\nimport {\n  DefaultPre,\n  DefaultCode,\n  DefaultSyntaxHighlighter,\n  DefaultCodeHeader,\n} from \"./defaultComponents\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { CodeOverride } from \"./CodeOverride\";\n\nconst { useSmooth } = INTERNAL;\n\nexport type MarkdownTextPrimitiveProps = Omit<\n  Options,\n  \"components\" | \"children\"\n> & {\n  components?: NonNullable<Options[\"components\"]> & {\n    SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;\n    CodeHeader?: ComponentType<CodeHeaderProps>;\n  };\n  smooth?: boolean;\n};\nexport const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps> = ({\n  smooth = true,\n  components: userComponents,\n  ...rest\n}) => {\n  const {\n    part: { text },\n  } = useContentPartText();\n  const smoothText = useSmooth(text, smooth);\n\n  const {\n    pre = DefaultPre,\n    code = DefaultCode,\n    SyntaxHighlighter = DefaultSyntaxHighlighter,\n    CodeHeader = DefaultCodeHeader,\n    ...componentsRest\n  } = userComponents ?? {};\n  const components: typeof userComponents = {\n    ...componentsRest,\n    pre: PreOverride,\n    code: useCallbackRef((props) => (\n      <CodeOverride\n        components={{ Pre: pre, Code: code, SyntaxHighlighter, CodeHeader }}\n        {...props}\n      />\n    )),\n  };\n\n  return (\n    <ReactMarkdown components={components} {...rest}>\n      {smoothText}\n    </ReactMarkdown>\n  );\n};\n","import { createContext, ComponentPropsWithoutRef } from \"react\";\nimport { PreComponent } from \"./types\";\n\nexport const PreContext = createContext<Omit<\n  ComponentPropsWithoutRef<PreComponent>,\n  \"children\"\n> | null>(null);\n\nexport const PreOverride: PreComponent = ({ children, ...rest }) => {\n  return <PreContext.Provider value={rest}>{children}</PreContext.Provider>;\n};\n","import type { ComponentType } from \"react\";\nimport {\n  PreComponent,\n  CodeComponent,\n  SyntaxHighlighterProps,\n  CodeHeaderProps,\n} from \"./types\";\n\nexport const DefaultPre: PreComponent = ({ node, ...rest }) => (\n  <pre {...rest} />\n);\nexport const DefaultCode: CodeComponent = ({ node, ...rest }) => (\n  <code {...rest} />\n);\nexport const DefaultSyntaxHighlighter: ComponentType<\n  SyntaxHighlighterProps\n> = ({ components: { Pre, Code }, code }) => (\n  <Pre>\n    <Code>{code}</Code>\n  </Pre>\n);\nexport const DefaultCodeHeader: ComponentType<CodeHeaderProps> = () => null;\n","import {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FC,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { PreContext } from \"./PreOverride\";\nimport {\n  CodeComponent,\n  CodeHeaderProps,\n  PreComponent,\n  SyntaxHighlighterProps,\n} from \"./types\";\nimport { DefaultSyntaxHighlighter } from \"./defaultComponents\";\n\ntype CodeOverrideProps = ComponentPropsWithoutRef<CodeComponent> & {\n  components: {\n    Pre: PreComponent;\n    Code: CodeComponent;\n    CodeHeader: ComponentType<CodeHeaderProps>;\n    SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;\n  };\n};\n\nconst CodeBlockOverride: FC<CodeOverrideProps> = ({\n  components: { Pre, Code, SyntaxHighlighter, CodeHeader },\n  children,\n  ...codeProps\n}) => {\n  const preProps = useContext(PreContext);\n  const WrappedPre: PreComponent = useCallbackRef((props) => (\n    <Slot {...(preProps as any)}>\n      <Pre {...props} />\n    </Slot>\n  ));\n  const WrappedCode: CodeComponent = useCallbackRef((props) => (\n    <Slot {...(codeProps as any)}>\n      <Code {...props} />\n    </Slot>\n  ));\n\n  const components = useMemo(\n    () => ({ Pre: WrappedPre, Code: WrappedCode }),\n    [WrappedPre, WrappedCode],\n  );\n\n  const language = /language-(\\w+)/.exec(codeProps.className || \"\")?.[1];\n  const code = children as string;\n  const SH = language ? SyntaxHighlighter : DefaultSyntaxHighlighter;\n\n  return (\n    <>\n      <CodeHeader language={language} code={code} />\n      <SH\n        components={components}\n        language={language ?? \"unknown\"}\n        code={code}\n      />\n    </>\n  );\n};\n\nexport const CodeOverride: FC<CodeOverrideProps> = ({\n  components,\n  ...props\n}) => {\n  const preProps = useContext(PreContext);\n  if (!preProps) return <components.Code {...(props as any)} />;\n  return <CodeBlockOverride components={components} {...props} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6C;AAE7C,4BAA4C;;;ACF5C,mBAAwD;AAS/C;AANF,IAAM,iBAAa,4BAGhB,IAAI;AAEP,IAAM,cAA4B,CAAC,EAAE,UAAU,GAAG,KAAK,MAAM;AAClE,SAAO,4CAAC,WAAW,UAAX,EAAoB,OAAO,MAAO,UAAS;AACrD;;;ACDE,IAAAC,sBAAA;AADK,IAAM,aAA2B,CAAC,EAAE,MAAM,GAAG,KAAK,MACvD,6CAAC,SAAK,GAAG,MAAM;AAEV,IAAM,cAA6B,CAAC,EAAE,MAAM,GAAG,KAAK,MACzD,6CAAC,UAAM,GAAG,MAAM;AAEX,IAAM,2BAET,CAAC,EAAE,YAAY,EAAE,KAAK,KAAK,GAAG,KAAK,MACrC,6CAAC,OACC,uDAAC,QAAM,gBAAK,GACd;AAEK,IAAM,oBAAoD,MAAM;;;AFVvE,IAAAC,iCAA+B;;;AGX/B,IAAAC,gBAMO;AACP,wBAAqB;AACrB,oCAA+B;AA2BzB,IAAAC,sBAAA;AARN,IAAM,oBAA2C,CAAC;AAAA,EAChD,YAAY,EAAE,KAAK,MAAM,mBAAmB,WAAW;AAAA,EACvD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAW,0BAAW,UAAU;AACtC,QAAM,iBAA2B,8CAAe,CAAC,UAC/C,6CAAC,0BAAM,GAAI,UACT,uDAAC,OAAK,GAAG,OAAO,GAClB,CACD;AACD,QAAM,kBAA6B,8CAAe,CAAC,UACjD,6CAAC,0BAAM,GAAI,WACT,uDAAC,QAAM,GAAG,OAAO,GACnB,CACD;AAED,QAAM,iBAAa;AAAA,IACjB,OAAO,EAAE,KAAK,YAAY,MAAM,YAAY;AAAA,IAC5C,CAAC,YAAY,WAAW;AAAA,EAC1B;AAEA,QAAM,WAAW,iBAAiB,KAAK,UAAU,aAAa,EAAE,IAAI,CAAC;AACrE,QAAM,OAAO;AACb,QAAM,KAAK,WAAW,oBAAoB;AAE1C,SACE,8EACE;AAAA,iDAAC,cAAW,UAAoB,MAAY;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,YAAY;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,IAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAW,0BAAW,UAAU;AACtC,MAAI,CAAC,SAAU,QAAO,6CAAC,WAAW,MAAX,EAAiB,GAAI,OAAe;AAC3D,SAAO,6CAAC,qBAAkB,YAAyB,GAAG,OAAO;AAC/D;;;AHzBM,IAAAC,sBAAA;AAjCN,IAAM,EAAE,UAAU,IAAI;AAYf,IAAM,wBAAwD,CAAC;AAAA,EACpE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,MAAM,EAAE,KAAK;AAAA,EACf,QAAI,kCAAmB;AACvB,QAAM,aAAa,UAAU,MAAM,MAAM;AAEzC,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,GAAG;AAAA,EACL,IAAI,kBAAkB,CAAC;AACvB,QAAM,aAAoC;AAAA,IACxC,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAM,+CAAe,CAAC,UACpB;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,mBAAmB,WAAW;AAAA,QACjE,GAAG;AAAA;AAAA,IACN,CACD;AAAA,EACH;AAEA,SACE,6CAAC,sBAAAC,SAAA,EAAc,YAAyB,GAAG,MACxC,sBACH;AAEJ;","names":["import_react","import_jsx_runtime","import_react_use_callback_ref","import_react","import_jsx_runtime","import_jsx_runtime","ReactMarkdown"]}

package/dist/index.mjs

@@ -1,17 +1,100 @@
 // src/MarkdownText.tsx
-import { useContentPartContext } from "@assistant-ui/react";
+import { INTERNAL, useContentPartText } from "@assistant-ui/react";
 import ReactMarkdown from "react-markdown";
+
+// src/PreOverride.tsx
+import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
-var MarkdownTextPrimitive = (options) => {
-  const { useContentPart } = useContentPartContext();
-  const text = useContentPart((c) => {
-    if (c.part.type !== "text")
-      throw new Error(
-        "This component can only be used inside text content parts."
-      );
-    return c.part.text;
-  });
-  return /* @__PURE__ */ jsx(ReactMarkdown, { ...options, children: text });
+var PreContext = createContext(null);
+var PreOverride = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx(PreContext.Provider, { value: rest, children });
+};
+
+// src/defaultComponents.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DefaultPre = ({ node, ...rest }) => /* @__PURE__ */ jsx2("pre", { ...rest });
+var DefaultCode = ({ node, ...rest }) => /* @__PURE__ */ jsx2("code", { ...rest });
+var DefaultSyntaxHighlighter = ({ components: { Pre, Code }, code }) => /* @__PURE__ */ jsx2(Pre, { children: /* @__PURE__ */ jsx2(Code, { children: code }) });
+var DefaultCodeHeader = () => null;
+
+// src/MarkdownText.tsx
+import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
+
+// src/CodeOverride.tsx
+import {
+  useContext,
+  useMemo
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CodeBlockOverride = ({
+  components: { Pre, Code, SyntaxHighlighter, CodeHeader },
+  children,
+  ...codeProps
+}) => {
+  const preProps = useContext(PreContext);
+  const WrappedPre = useCallbackRef((props) => /* @__PURE__ */ jsx3(Slot, { ...preProps, children: /* @__PURE__ */ jsx3(Pre, { ...props }) }));
+  const WrappedCode = useCallbackRef((props) => /* @__PURE__ */ jsx3(Slot, { ...codeProps, children: /* @__PURE__ */ jsx3(Code, { ...props }) }));
+  const components = useMemo(
+    () => ({ Pre: WrappedPre, Code: WrappedCode }),
+    [WrappedPre, WrappedCode]
+  );
+  const language = /language-(\w+)/.exec(codeProps.className || "")?.[1];
+  const code = children;
+  const SH = language ? SyntaxHighlighter : DefaultSyntaxHighlighter;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(CodeHeader, { language, code }),
+    /* @__PURE__ */ jsx3(
+      SH,
+      {
+        components,
+        language: language ?? "unknown",
+        code
+      }
+    )
+  ] });
+};
+var CodeOverride = ({
+  components,
+  ...props
+}) => {
+  const preProps = useContext(PreContext);
+  if (!preProps) return /* @__PURE__ */ jsx3(components.Code, { ...props });
+  return /* @__PURE__ */ jsx3(CodeBlockOverride, { components, ...props });
+};
+
+// src/MarkdownText.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var { useSmooth } = INTERNAL;
+var MarkdownTextPrimitive = ({
+  smooth = true,
+  components: userComponents,
+  ...rest
+}) => {
+  const {
+    part: { text }
+  } = useContentPartText();
+  const smoothText = useSmooth(text, smooth);
+  const {
+    pre = DefaultPre,
+    code = DefaultCode,
+    SyntaxHighlighter = DefaultSyntaxHighlighter,
+    CodeHeader = DefaultCodeHeader,
+    ...componentsRest
+  } = userComponents ?? {};
+  const components = {
+    ...componentsRest,
+    pre: PreOverride,
+    code: useCallbackRef2((props) => /* @__PURE__ */ jsx4(
+      CodeOverride,
+      {
+        components: { Pre: pre, Code: code, SyntaxHighlighter, CodeHeader },
+        ...props
+      }
+    ))
+  };
+  return /* @__PURE__ */ jsx4(ReactMarkdown, { components, ...rest, children: smoothText });
 };
 export {
   MarkdownTextPrimitive

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MarkdownText.tsx"],"sourcesContent":["import { useContentPartContext } from \"@assistant-ui/react\";\nimport type { FC } from \"react\";\nimport ReactMarkdown, { type Options } from \"react-markdown\";\n\nexport type MarkdownTextPrimitiveProps = Omit<Options, \"children\">;\n\nexport const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps> = (\n  options,\n) => {\n  const { useContentPart } = useContentPartContext();\n  const text = useContentPart((c) => {\n    if (c.part.type !== \"text\")\n      throw new Error(\n        \"This component can only be used inside text content parts.\",\n      );\n\n    return c.part.text;\n  });\n  return <ReactMarkdown {...options}>{text}</ReactMarkdown>;\n};\n"],"mappings":";AAAA,SAAS,6BAA6B;AAEtC,OAAO,mBAAqC;AAgBnC;AAZF,IAAM,wBAAwD,CACnE,YACG;AACH,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,OAAO,eAAe,CAAC,MAAM;AACjC,QAAI,EAAE,KAAK,SAAS;AAClB,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAEF,WAAO,EAAE,KAAK;AAAA,EAChB,CAAC;AACD,SAAO,oBAAC,iBAAe,GAAG,SAAU,gBAAK;AAC3C;","names":[]}
+{"version":3,"sources":["../src/MarkdownText.tsx","../src/PreOverride.tsx","../src/defaultComponents.tsx","../src/CodeOverride.tsx"],"sourcesContent":["import { INTERNAL, useContentPartText } from \"@assistant-ui/react\";\nimport type { ComponentType, FC } from \"react\";\nimport ReactMarkdown, { type Options } from \"react-markdown\";\nimport { SyntaxHighlighterProps, CodeHeaderProps } from \"./types\";\nimport { PreOverride } from \"./PreOverride\";\nimport {\n  DefaultPre,\n  DefaultCode,\n  DefaultSyntaxHighlighter,\n  DefaultCodeHeader,\n} from \"./defaultComponents\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { CodeOverride } from \"./CodeOverride\";\n\nconst { useSmooth } = INTERNAL;\n\nexport type MarkdownTextPrimitiveProps = Omit<\n  Options,\n  \"components\" | \"children\"\n> & {\n  components?: NonNullable<Options[\"components\"]> & {\n    SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;\n    CodeHeader?: ComponentType<CodeHeaderProps>;\n  };\n  smooth?: boolean;\n};\nexport const MarkdownTextPrimitive: FC<MarkdownTextPrimitiveProps> = ({\n  smooth = true,\n  components: userComponents,\n  ...rest\n}) => {\n  const {\n    part: { text },\n  } = useContentPartText();\n  const smoothText = useSmooth(text, smooth);\n\n  const {\n    pre = DefaultPre,\n    code = DefaultCode,\n    SyntaxHighlighter = DefaultSyntaxHighlighter,\n    CodeHeader = DefaultCodeHeader,\n    ...componentsRest\n  } = userComponents ?? {};\n  const components: typeof userComponents = {\n    ...componentsRest,\n    pre: PreOverride,\n    code: useCallbackRef((props) => (\n      <CodeOverride\n        components={{ Pre: pre, Code: code, SyntaxHighlighter, CodeHeader }}\n        {...props}\n      />\n    )),\n  };\n\n  return (\n    <ReactMarkdown components={components} {...rest}>\n      {smoothText}\n    </ReactMarkdown>\n  );\n};\n","import { createContext, ComponentPropsWithoutRef } from \"react\";\nimport { PreComponent } from \"./types\";\n\nexport const PreContext = createContext<Omit<\n  ComponentPropsWithoutRef<PreComponent>,\n  \"children\"\n> | null>(null);\n\nexport const PreOverride: PreComponent = ({ children, ...rest }) => {\n  return <PreContext.Provider value={rest}>{children}</PreContext.Provider>;\n};\n","import type { ComponentType } from \"react\";\nimport {\n  PreComponent,\n  CodeComponent,\n  SyntaxHighlighterProps,\n  CodeHeaderProps,\n} from \"./types\";\n\nexport const DefaultPre: PreComponent = ({ node, ...rest }) => (\n  <pre {...rest} />\n);\nexport const DefaultCode: CodeComponent = ({ node, ...rest }) => (\n  <code {...rest} />\n);\nexport const DefaultSyntaxHighlighter: ComponentType<\n  SyntaxHighlighterProps\n> = ({ components: { Pre, Code }, code }) => (\n  <Pre>\n    <Code>{code}</Code>\n  </Pre>\n);\nexport const DefaultCodeHeader: ComponentType<CodeHeaderProps> = () => null;\n","import {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FC,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { PreContext } from \"./PreOverride\";\nimport {\n  CodeComponent,\n  CodeHeaderProps,\n  PreComponent,\n  SyntaxHighlighterProps,\n} from \"./types\";\nimport { DefaultSyntaxHighlighter } from \"./defaultComponents\";\n\ntype CodeOverrideProps = ComponentPropsWithoutRef<CodeComponent> & {\n  components: {\n    Pre: PreComponent;\n    Code: CodeComponent;\n    CodeHeader: ComponentType<CodeHeaderProps>;\n    SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;\n  };\n};\n\nconst CodeBlockOverride: FC<CodeOverrideProps> = ({\n  components: { Pre, Code, SyntaxHighlighter, CodeHeader },\n  children,\n  ...codeProps\n}) => {\n  const preProps = useContext(PreContext);\n  const WrappedPre: PreComponent = useCallbackRef((props) => (\n    <Slot {...(preProps as any)}>\n      <Pre {...props} />\n    </Slot>\n  ));\n  const WrappedCode: CodeComponent = useCallbackRef((props) => (\n    <Slot {...(codeProps as any)}>\n      <Code {...props} />\n    </Slot>\n  ));\n\n  const components = useMemo(\n    () => ({ Pre: WrappedPre, Code: WrappedCode }),\n    [WrappedPre, WrappedCode],\n  );\n\n  const language = /language-(\\w+)/.exec(codeProps.className || \"\")?.[1];\n  const code = children as string;\n  const SH = language ? SyntaxHighlighter : DefaultSyntaxHighlighter;\n\n  return (\n    <>\n      <CodeHeader language={language} code={code} />\n      <SH\n        components={components}\n        language={language ?? \"unknown\"}\n        code={code}\n      />\n    </>\n  );\n};\n\nexport const CodeOverride: FC<CodeOverrideProps> = ({\n  components,\n  ...props\n}) => {\n  const preProps = useContext(PreContext);\n  if (!preProps) return <components.Code {...(props as any)} />;\n  return <CodeBlockOverride components={components} {...props} />;\n};\n"],"mappings":"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","names":["jsx","useCallbackRef","jsx","jsx","useCallbackRef"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-markdown",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "MIT",
   "exports": {
     ".": {
@@ -24,11 +24,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "react-markdown": "^9.0.1",
-    "zod": "^3.23.8"
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-use-callback-ref": "^1.1.0",
+    "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.3.0",
+    "@assistant-ui/react": "^0.3.5",
     "@types/react": "*",
     "react": "^18"
   },
@@ -38,7 +39,7 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^20.14.9",
+    "eslint-config-next": "14.2.4",
     "tsup": "^8.1.0",
     "@assistant-ui/tsconfig": "0.0.0"
   },
@@ -55,6 +56,6 @@
     "url": "https://github.com/Yonom/assistant-ui/issues"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
   }
 }