reachat 2.2.0 → 3.1.0

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@tiptap/react"), require("@floating-ui/dom"), require("@tiptap/extension-document"), require("@tiptap/extension-paragraph"), require("@tiptap/extension-text"), require("@tiptap/extension-hard-break"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-mention"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("rehype-raw"), require("reaviz"), require("mdast-util-find-and-replace"), require("unist-util-visit"), require("lodash/debounce.js"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@tiptap/react", "@floating-ui/dom", "@tiptap/extension-document", "@tiptap/extension-paragraph", "@tiptap/extension-text", "@tiptap/extension-hard-break", "@tiptap/extension-placeholder", "@tiptap/extension-mention", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "rehype-raw", "reaviz", "mdast-util-find-and-replace", "unist-util-visit", "lodash/debounce.js", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react$1, global.react, global.dom, global.Document, global.Paragraph, global.Text, global.HardBreak, global.Placeholder, global.Mention, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.rehypeRaw, global.reaviz, global.mdastUtilFindAndReplace, global.unistUtilVisit, global.debounce, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$2));
-})(this, function(exports2, jsxRuntime, reablocks, React, react$1, react, dom, Document, Paragraph, Text, HardBreak, Placeholder, Mention, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, rehypeRaw, reaviz, mdastUtilFindAndReplace, unistUtilVisit, debounce, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$2) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@tiptap/react"), require("@floating-ui/dom"), require("@tiptap/extension-document"), require("@tiptap/extension-paragraph"), require("@tiptap/extension-text"), require("@tiptap/extension-hard-break"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-mention"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("rehype-raw"), require("reaviz"), require("mdast-util-find-and-replace"), require("lodash/debounce.js"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react"), require("zod")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@tiptap/react", "@floating-ui/dom", "@tiptap/extension-document", "@tiptap/extension-paragraph", "@tiptap/extension-text", "@tiptap/extension-hard-break", "@tiptap/extension-placeholder", "@tiptap/extension-mention", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "rehype-raw", "reaviz", "mdast-util-find-and-replace", "lodash/debounce.js", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react", "zod"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react$1, global.react, global.dom, global.Document, global.Paragraph, global.Text, global.HardBreak, global.Placeholder, global.Mention, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.rehypeRaw, global.reaviz, global.mdastUtilFindAndReplace, global.debounce, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$2, global.zod));
+})(this, (function(exports2, jsxRuntime, reablocks, React, react$1, react, dom, Document, Paragraph, Text, HardBreak, Placeholder, Mention, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, rehypeRaw, reaviz, mdastUtilFindAndReplace, debounce, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$2, zod) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -70,10 +70,7 @@
           variant: "text",
           disabled: isLoading || disabled,
           className: reablocks.cn(theme.input.upload),
-          onClick: () => {
-            var _a;
-            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-          },
+          onClick: () => fileInputRef.current?.click(),
           children: attachIcon
         }
       )
@@ -320,23 +317,24 @@
         ].join(" "),
         title: "text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2"
       }
+    },
+    component: {
+      base: "my-4"
     }
   };
   const POPUP_STYLE = { zIndex: 9999 };
   const MentionList = React.forwardRef(
     ({ items, command, triggerChar, config, query }, ref) => {
-      var _a;
       const [selectedIndex, setSelectedIndex] = React.useState(0);
       const itemRefs = React.useRef([]);
       const { theme } = React.useContext(ChatContext);
-      const popupTheme = ((_a = theme == null ? void 0 : theme.input) == null ? void 0 : _a.popup) || chatTheme.input.popup;
+      const popupTheme = theme?.input?.popup || chatTheme.input.popup;
       React.useEffect(() => {
         setSelectedIndex(0);
       }, [items]);
       React.useEffect(() => {
-        var _a2;
         if (itemRefs.current[selectedIndex]) {
-          (_a2 = itemRefs.current[selectedIndex]) == null ? void 0 : _a2.scrollIntoView({
+          itemRefs.current[selectedIndex]?.scrollIntoView({
             block: "nearest",
             behavior: "smooth"
           });
@@ -467,10 +465,7 @@
         if (!query) return config.items.slice(0, config.maxResults || 10);
         const lowerQuery = query.toLowerCase();
         return config.items.filter(
-          (item) => {
-            var _a;
-            return item.label.toLowerCase().includes(lowerQuery) || ((_a = item.description) == null ? void 0 : _a.toLowerCase().includes(lowerQuery));
-          }
+          (item) => item.label.toLowerCase().includes(lowerQuery) || item.description?.toLowerCase().includes(lowerQuery)
         ).slice(0, config.maxResults || 10);
       },
       // Render callbacks for managing the popup lifecycle
@@ -497,7 +492,7 @@
           },
           // Called when query or items change
           onUpdate: (props) => {
-            component == null ? void 0 : component.updateProps({
+            component?.updateProps({
               ...props,
               triggerChar,
               config
@@ -505,25 +500,23 @@
             if (!props.clientRect) {
               return;
             }
-            if (component == null ? void 0 : component.element) {
+            if (component?.element) {
               updatePopupPosition(props.editor, component.element);
             }
           },
           // Handle keyboard navigation (Escape closes popup)
           onKeyDown: (props) => {
-            var _a;
             if (props.event.key === "Escape") {
-              component == null ? void 0 : component.destroy();
+              component?.destroy();
               return true;
             }
-            return ((_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) ?? false;
+            return component?.ref?.onKeyDown(props) ?? false;
           },
           // Cleanup when suggestion is dismissed
           onExit: () => {
-            var _a;
             suggestionActiveRef.current = false;
-            (_a = component == null ? void 0 : component.element) == null ? void 0 : _a.remove();
-            component == null ? void 0 : component.destroy();
+            component?.element?.remove();
+            component?.destroy();
           }
         };
       }
@@ -543,12 +536,10 @@
       onSubmit,
       onChange
     }, ref) => {
-      var _a, _b, _c, _d;
       const { theme } = React.useContext(ChatContext);
       const containerRef = React.useRef(null);
       const suggestionActiveRef = React.useRef(false);
       const extensions = React.useMemo(() => {
-        var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
         const exts = [
           Document,
           Paragraph.configure({
@@ -567,7 +558,7 @@
           exts.push(
             Mention.configure({
               HTMLAttributes: {
-                class: reablocks.cn((_b2 = (_a2 = theme == null ? void 0 : theme.input) == null ? void 0 : _a2.tag) == null ? void 0 : _b2.base, (_d2 = (_c2 = theme == null ? void 0 : theme.input) == null ? void 0 : _c2.tag) == null ? void 0 : _d2.mention)
+                class: reablocks.cn(theme?.input?.tag?.base, theme?.input?.tag?.mention)
               },
               suggestion: createSuggestionConfig(
                 mentions,
@@ -583,7 +574,7 @@
           exts.push(
             Mention.configure({
               HTMLAttributes: {
-                class: reablocks.cn((_f = (_e = theme == null ? void 0 : theme.input) == null ? void 0 : _e.tag) == null ? void 0 : _f.base, (_h = (_g = theme == null ? void 0 : theme.input) == null ? void 0 : _g.tag) == null ? void 0 : _h.command)
+                class: reablocks.cn(theme?.input?.tag?.base, theme?.input?.tag?.command)
               },
               suggestion: createSuggestionConfig(
                 commands,
@@ -604,13 +595,13 @@
         immediatelyRender: false,
         onUpdate: ({ editor: editor2 }) => {
           const text = editor2.getText();
-          onChange == null ? void 0 : onChange(text);
+          onChange?.(text);
         },
         editorProps: {
           attributes: {
             class: reablocks.cn(
-              (_b = (_a = theme == null ? void 0 : theme.input) == null ? void 0 : _a.editor) == null ? void 0 : _b.base,
-              (_d = (_c = theme == null ? void 0 : theme.input) == null ? void 0 : _c.editor) == null ? void 0 : _d.placeholder
+              theme?.input?.editor?.base,
+              theme?.input?.editor?.placeholder
             ),
             style: `min-height: ${minHeight}px; max-height: ${maxHeight}px;`,
             role: "textbox",
@@ -628,7 +619,7 @@
               if (text.trim() && onSubmit) {
                 event.preventDefault();
                 onSubmit(text);
-                editor == null ? void 0 : editor.commands.clearContent();
+                editor?.commands.clearContent();
                 return true;
               }
             }
@@ -645,16 +636,16 @@
       }, [editor, autoFocus]);
       React.useImperativeHandle(ref, () => ({
         focus: () => {
-          editor == null ? void 0 : editor.commands.focus();
+          editor?.commands.focus();
         },
         getValue: () => {
-          return (editor == null ? void 0 : editor.getText()) || "";
+          return editor?.getText() || "";
         },
         setValue: (newValue) => {
-          editor == null ? void 0 : editor.commands.setContent(newValue ? `<p>${newValue}</p>` : "");
+          editor?.commands.setContent(newValue ? `<p>${newValue}</p>` : "");
         },
         insertText: (text) => {
-          editor == null ? void 0 : editor.commands.insertContent(text);
+          editor?.commands.insertContent(text);
         }
       }));
       return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: reablocks.cn("relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }) });
@@ -688,43 +679,37 @@
       const inputRef = React.useRef(null);
       const containerRef = React.useRef(null);
       React.useEffect(() => {
-        var _a;
         if (autoFocus) {
-          (_a = inputRef.current) == null ? void 0 : _a.focus();
+          inputRef.current?.focus();
         }
       }, [activeSessionId, autoFocus]);
       React.useImperativeHandle(ref, () => ({
         focus: () => {
-          var _a;
-          (_a = inputRef.current) == null ? void 0 : _a.focus();
+          inputRef.current?.focus();
         },
         getValue: () => {
-          var _a;
-          return ((_a = inputRef.current) == null ? void 0 : _a.getValue()) || "";
+          return inputRef.current?.getValue() || "";
         },
         setValue: (value) => {
-          var _a;
           setMessage(value);
-          (_a = inputRef.current) == null ? void 0 : _a.setValue(value);
+          inputRef.current?.setValue(value);
         },
         insertText: (text) => {
-          var _a;
-          (_a = inputRef.current) == null ? void 0 : _a.insertText(text);
+          inputRef.current?.insertText(text);
         }
       }));
       const handleSendMessage = React.useCallback(() => {
-        var _a, _b;
-        const currentMessage = (_a = inputRef.current) == null ? void 0 : _a.getValue();
+        const currentMessage = inputRef.current?.getValue();
         if (currentMessage.trim()) {
-          sendMessage == null ? void 0 : sendMessage(currentMessage);
+          sendMessage?.(currentMessage);
           setMessage("");
-          (_b = inputRef.current) == null ? void 0 : _b.setValue("");
+          inputRef.current?.setValue("");
         }
       }, [sendMessage]);
       const handleSubmit = React.useCallback(
         (value) => {
           if (value.trim()) {
-            sendMessage == null ? void 0 : sendMessage(value);
+            sendMessage?.(value);
             setMessage("");
           }
         },
@@ -735,8 +720,7 @@
       }, []);
       const handleFileUpload = React.useCallback(
         (event) => {
-          var _a;
-          const file = (_a = event.target.files) == null ? void 0 : _a[0];
+          const file = event.target.files?.[0];
           if (file && fileUpload) {
             fileUpload(file);
           }
@@ -770,7 +754,7 @@
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
-          (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          allowedFiles?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             FileInput,
             {
               allowedFiles,
@@ -1880,7 +1864,7 @@
     toolbarClassName,
     theme = dark
   }) => {
-    const match = language == null ? void 0 : language.match(/language-(\w+)/);
+    const match = language?.match(/language-(\w+)/);
     const lang = match ? match[1] : "text";
     const handleCopy = (text) => {
       navigator.clipboard.writeText(text).then(() => {
@@ -1963,14 +1947,16 @@
         li: (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: reablocks.cn(theme.messages.message.markdown.li) }),
         ul: (props) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...props, className: reablocks.cn(theme.messages.message.markdown.ul) }),
         ol: (props) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: reablocks.cn(theme.messages.message.markdown.ol) }),
-        redact: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        // 'redact' is a custom element created by remarkRedact, not a standard
+        // HTML tag, so it falls outside react-markdown's Components type.
+        redact: ((props) => /* @__PURE__ */ jsxRuntime.jsx(
           reablocks.Redact,
           {
             value: props["data-redact-value"] || props.children,
             allowToggle: true,
             tooltipText: `${props["data-redact-name"] || "Sensitive"} information - Click to toggle`
           }
-        )
+        ))
       };
       return {
         ...defaultComponents,
@@ -1988,7 +1974,7 @@
       }
     );
   };
-  const ChartError = ({
+  const ComponentError = ({
     variant = "error",
     title,
     message,
@@ -2016,12 +2002,12 @@
         data: d.data
       }));
       if (!chartData || chartData.length === 0) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartError, { variant: "warning", message: "No chart data available" });
+        return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { variant: "warning", message: "No chart data available" });
       }
       for (const point of chartData) {
         if (typeof point.data !== "number" || isNaN(point.data)) {
           return /* @__PURE__ */ jsxRuntime.jsx(
-            ChartError,
+            ComponentError,
             {
               message: `Invalid data point: ${JSON.stringify(point)}`
             }
@@ -2090,10 +2076,10 @@
           case "sparkline":
             return /* @__PURE__ */ jsxRuntime.jsx(reaviz.SparklineChart, { width, height, data: chartData });
           default:
-            return /* @__PURE__ */ jsxRuntime.jsx(ChartError, { message: `Unknown chart type: ${type}` });
+            return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { message: `Unknown chart type: ${type}` });
         }
       } catch (error) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartError, { message: `Chart render error: ${String(error)}` });
+        return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { message: `Chart render error: ${String(error)}` });
       }
     }, [type, data, width, height]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.chart.base, className), children: [
@@ -2101,93 +2087,6 @@
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.chart.content, children: chartElement })
     ] });
   };
-  function validateChartData(data) {
-    if (!Array.isArray(data)) {
-      return null;
-    }
-    const validData = [];
-    for (const item of data) {
-      if (item && typeof item === "object" && "key" in item && "data" in item && typeof item.data === "number") {
-        validData.push({
-          key: String(item.key),
-          data: item.data
-        });
-      } else {
-        return null;
-      }
-    }
-    return validData.length > 0 ? validData : null;
-  }
-  function parseChartConfig(value) {
-    try {
-      const config = JSON.parse(value);
-      if (!config || !config.type || !config.data) {
-        return null;
-      }
-      const validData = validateChartData(config.data);
-      if (!validData) {
-        console.warn("parseChartConfig: Invalid chart data format");
-        return null;
-      }
-      return {
-        ...config,
-        data: validData
-      };
-    } catch (error) {
-      console.warn("parseChartConfig: Failed to parse JSON", error);
-      return null;
-    }
-  }
-  function isChartClassName(className) {
-    return className === "language-chart";
-  }
-  function getChildText(children) {
-    if (children === null || children === void 0) {
-      return "";
-    }
-    if (typeof children === "string") {
-      return children;
-    }
-    if (typeof children === "number") {
-      return String(children);
-    }
-    if (Array.isArray(children)) {
-      return children.map(getChildText).join("");
-    }
-    if (typeof children === "object") {
-      if ("props" in children && children.props) {
-        const element = children;
-        return getChildText(element.props.children);
-      }
-    }
-    return "";
-  }
-  const ChartPre = ({ children, ...props }) => {
-    var _a, _b;
-    if (children && typeof children === "object" && "props" in children) {
-      const codeElement = children;
-      if (isChartClassName((_a = codeElement.props) == null ? void 0 : _a.className)) {
-        const codeContent = getChildText((_b = codeElement.props) == null ? void 0 : _b.children);
-        if (codeContent) {
-          const chartConfig = parseChartConfig(codeContent);
-          if (chartConfig) {
-            return /* @__PURE__ */ jsxRuntime.jsx(ChartRenderer, { config: chartConfig });
-          }
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ChartError,
-          {
-            title: "Failed to parse chart configuration",
-            code: codeContent || "No content"
-          }
-        );
-      }
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children });
-  };
-  const chartComponents = {
-    pre: ChartPre
-  };
   const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
   function remarkCve() {
     return (tree, _file) => {
@@ -2208,31 +2107,8 @@
       ];
     }
   }
-  const remarkChart = (options = {}) => {
-    const { defaultWidth = 400, defaultHeight = 300 } = options;
-    return (tree) => {
-      unistUtilVisit.visit(tree, "code", (node) => {
-        if (node.lang !== "chart") {
-          return;
-        }
-        try {
-          const config = JSON.parse(node.value);
-          if (!config.type || !config.data) {
-            console.warn(
-              "remarkChart: Invalid chart config - missing type or data"
-            );
-            return;
-          }
-          const chartConfig = {
-            ...config,
-            width: config.width ?? defaultWidth,
-            height: config.height ?? defaultHeight
-          };
-          node.value = JSON.stringify(chartConfig);
-        } catch (error) {
-          console.warn("remarkChart: Failed to parse chart config:", error);
-        }
-      });
+  const remarkComponent = (_options = {}) => {
+    return () => {
     };
   };
   function remarkRedact(matchers) {
@@ -2307,7 +2183,7 @@
   }) => {
     const { theme } = React.useContext(ChatContext);
     const FileRenderer = React.useMemo(() => {
-      const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type == null ? void 0 : type.startsWith(key)) ?? "default";
+      const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type?.startsWith(key)) ?? "default";
       return FILE_TYPE_RENDERER_MAP[Renderer] || DefaultFileRenderer$2;
     }, [type]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2491,8 +2367,7 @@
       }
       return files.reduce(
         (acc, file) => {
-          var _a;
-          if ((_a = file.type) == null ? void 0 : _a.startsWith("image/")) {
+          if (file.type?.startsWith("image/")) {
             acc.imageFiles.push(file);
           } else {
             acc.otherFiles.push(file);
@@ -2794,7 +2669,6 @@ ${response}` : ""}`);
     showMoreText = "Show more",
     showScrollBottomButton = false
   }) => {
-    var _a, _b, _c, _d, _e, _f;
     const { activeSession, theme } = React.useContext(ChatContext);
     const contentRef = React.useRef(null);
     const messagesRef = React.useRef(null);
@@ -2835,7 +2709,7 @@ ${response}` : ""}`);
       }
     };
     const reversedConvos = React.useMemo(
-      () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
+      () => [...activeSession?.conversations ?? []].reverse(),
       [activeSession]
     );
     const { data, hasMore, showNext } = reablocks.useInfinityList({
@@ -2843,7 +2717,7 @@ ${response}` : ""}`);
       size: limit
     });
     const reReversedConvo = React.useMemo(() => [...data].reverse(), [data]);
-    const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
+    const convosToRender = limit ? reReversedConvo : activeSession?.conversations;
     if (!activeSession) {
       return /* @__PURE__ */ jsxRuntime.jsx(SessionEmpty, { children: newSessionContent });
     }
@@ -2853,7 +2727,7 @@ ${response}` : ""}`);
         {
           className: reablocks.cn(theme.messages.content, "h-full"),
           ref: contentRef,
-          id: activeSession == null ? void 0 : activeSession.id,
+          id: activeSession?.id,
           children: [
             hasMore && /* @__PURE__ */ jsxRuntime.jsx(
               reablocks.Button,
@@ -2887,7 +2761,7 @@ ${response}` : ""}`);
                   conversation.id
                 ))
               },
-              activeSession == null ? void 0 : activeSession.id
+              activeSession?.id
             ) })
           ]
         }
@@ -2899,12 +2773,12 @@ ${response}` : ""}`);
           animate: { y: 0, opacity: 1 },
           exit: { y: 100, opacity: 0 },
           transition: { duration: 0.3, ease: "easeOut" },
-          className: (_c = (_b = (_a = theme.messages) == null ? void 0 : _a.message) == null ? void 0 : _b.scrollToBottom) == null ? void 0 : _c.container,
+          className: theme.messages?.message?.scrollToBottom?.container,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             reablocks.IconButton,
             {
               onClick: handleScrollToBottom,
-              className: (_f = (_e = (_d = theme.messages) == null ? void 0 : _d.message) == null ? void 0 : _e.scrollToBottom) == null ? void 0 : _f.button,
+              className: theme.messages?.message?.scrollToBottom?.button,
               size: "sm",
               children: /* @__PURE__ */ jsxRuntime.jsx(SvgArrowDown, {})
             }
@@ -2960,6 +2834,7 @@ ${response}` : ""}`);
     onNewSession,
     remarkPlugins = defaultRemarkPlugins,
     markdownComponents,
+    components: componentCatalog2,
     disabled,
     style,
     className
@@ -2974,20 +2849,20 @@ ${response}` : ""}`);
     const handleSelectSession = React.useCallback(
       (sessionId) => {
         setInternalActiveSessionID(sessionId);
-        onSelectSession == null ? void 0 : onSelectSession(sessionId);
+        onSelectSession?.(sessionId);
       },
       [onSelectSession]
     );
     const handleDeleteSession = React.useCallback(
       (sessionId) => {
         setInternalActiveSessionID(void 0);
-        onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
+        onDeleteSession?.(sessionId);
       },
       [onDeleteSession]
     );
     const handleCreateNewSession = React.useCallback(() => {
       setInternalActiveSessionID(void 0);
-      onNewSession == null ? void 0 : onNewSession();
+      onNewSession?.();
     }, [onNewSession]);
     reakeys.useHotkeys([
       {
@@ -3004,12 +2879,23 @@ ${response}` : ""}`);
       () => sessions.find((session) => session.id === internalActiveSessionID),
       [sessions, internalActiveSessionID]
     );
+    const mergedRemarkPlugins = React.useMemo(() => {
+      if (!componentCatalog2) return remarkPlugins;
+      return [...remarkPlugins, componentCatalog2.remarkPlugin];
+    }, [remarkPlugins, componentCatalog2]);
+    const mergedMarkdownComponents = React.useMemo(() => {
+      if (!componentCatalog2) return markdownComponents;
+      return {
+        ...componentCatalog2.components,
+        ...markdownComponents
+      };
+    }, [markdownComponents, componentCatalog2]);
     const contextValue = React.useMemo(
       () => ({
         sessions,
         activeSession,
-        remarkPlugins,
-        markdownComponents,
+        remarkPlugins: mergedRemarkPlugins,
+        markdownComponents: mergedMarkdownComponents,
         theme,
         disabled,
         isLoading,
@@ -3029,8 +2915,8 @@ ${response}` : ""}`);
         viewType,
         disabled,
         theme,
-        remarkPlugins,
-        markdownComponents,
+        mergedRemarkPlugins,
+        mergedMarkdownComponents,
         sessions,
         activeSession,
         internalActiveSessionID,
@@ -3069,7 +2955,7 @@ ${response}` : ""}`);
       const { activeSessionId, selectSession, deleteSession, theme } = React.useContext(ChatContext);
       const Comp = children ? reactSlot.Slot : reablocks.ListItem;
       const handleSelect = React.useCallback(() => {
-        selectSession == null ? void 0 : selectSession(session.id);
+        selectSession?.(session.id);
       }, [selectSession, session.id]);
       const handleDelete = React.useCallback(
         (e) => {
@@ -3131,7 +3017,7 @@ ${response}` : ""}`);
         }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reablocks.List, { children }),
-          templates && !activeSessionId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => createSession == null ? void 0 : createSession(), children: /* @__PURE__ */ jsxRuntime.jsx(
+          templates && !activeSessionId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => createSession?.(), children: /* @__PURE__ */ jsxRuntime.jsx(
             SessionListItem,
             {
               session: {
@@ -3160,7 +3046,7 @@ ${response}` : ""}`);
         fullWidth: true,
         disableMargins: true,
         color: "primary",
-        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(SvgPlus, {}),
+        start: /* @__PURE__ */ jsxRuntime.jsx(SvgPlus, {}),
         className: reablocks.cn(theme.sessions.create),
         disabled,
         onClick: createSession,
@@ -3296,7 +3182,7 @@ ${response}` : ""}`);
     const { theme, disabled, isLoading } = React.useContext(ChatContext);
     const handleClick = () => {
       if (disabled || isLoading) return;
-      onClick == null ? void 0 : onClick(content);
+      onClick?.(content);
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       reablocks.Button,
@@ -3549,8 +3435,7 @@ ${response}` : ""}`);
     return null;
   }
   async function* parseSSE(response, signal) {
-    var _a;
-    const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+    const reader = response.body?.getReader();
     if (!reader) {
       throw new Error("Response body is not readable");
     }
@@ -3602,8 +3487,7 @@ ${response}` : ""}`);
     onEventRef.current = onEvent;
     React.useEffect(() => {
       return () => {
-        var _a;
-        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        abortRef.current?.abort();
       };
     }, []);
     const selectSession = React.useCallback((sessionId) => {
@@ -3631,15 +3515,13 @@ ${response}` : ""}`);
       setActiveSessionId(id);
     }, []);
     const stopMessage = React.useCallback(() => {
-      var _a;
-      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      abortRef.current?.abort();
       abortRef.current = null;
       setIsLoading(false);
     }, []);
     const sendMessage = React.useCallback(
       async (message) => {
-        var _a, _b, _c, _d, _e, _f;
-        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        abortRef.current?.abort();
         const abortController = new AbortController();
         abortRef.current = abortController;
         let sessionId = activeSessionId;
@@ -3666,7 +3548,7 @@ ${response}` : ""}`);
         );
         setIsLoading(true);
         const currentSession = [
-          ...((_b = sessions.find((s) => s.id === sessionId)) == null ? void 0 : _b.conversations) ?? []
+          ...sessions.find((s) => s.id === sessionId)?.conversations ?? []
         ];
         const historyMessages = sessionsToAgUiMessages({
           conversations: currentSession
@@ -3714,11 +3596,11 @@ ${response}` : ""}`);
             abortController.signal
           )) {
             if (eventOrError instanceof Error) {
-              (_c = onErrorRef.current) == null ? void 0 : _c.call(onErrorRef, eventOrError);
+              onErrorRef.current?.(eventOrError);
               continue;
             }
             const event = eventOrError;
-            (_d = onEventRef.current) == null ? void 0 : _d.call(onEventRef, event);
+            onEventRef.current?.(event);
             switch (event.type) {
               case AgUiEventType.TEXT_MESSAGE_CONTENT: {
                 responseText += event.delta;
@@ -3763,7 +3645,7 @@ ${response}` : ""}`);
               }
               case AgUiEventType.RUN_ERROR: {
                 const err = new Error(event.message);
-                (_e = onErrorRef.current) == null ? void 0 : _e.call(onErrorRef, err);
+                onErrorRef.current?.(err);
                 break;
               }
               case AgUiEventType.RUN_FINISHED: {
@@ -3776,7 +3658,7 @@ ${response}` : ""}`);
             return;
           }
           const error = err instanceof Error ? err : new Error(String(err));
-          (_f = onErrorRef.current) == null ? void 0 : _f.call(onErrorRef, error);
+          onErrorRef.current?.(error);
         } finally {
           if (abortRef.current === abortController) {
             abortRef.current = null;
@@ -3797,10 +3679,420 @@ ${response}` : ""}`);
       stopMessage
     };
   }
+  function validateSpec(raw, definitions) {
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      return {
+        ok: false,
+        error: {
+          type: "invalid_json",
+          message: "Failed to parse component JSON",
+          raw
+        }
+      };
+    }
+    const specArray = Array.isArray(parsed) ? parsed : [parsed];
+    const validated = [];
+    for (const item of specArray) {
+      const result = validateSingleSpec(item, raw, definitions);
+      if (!result.ok) {
+        return { ok: false, error: result.error };
+      }
+      validated.push(result.spec);
+    }
+    return { ok: true, specs: validated };
+  }
+  function validateSingleSpec(item, raw, definitions) {
+    if (!item || typeof item !== "object" || !("type" in item)) {
+      return {
+        ok: false,
+        error: {
+          type: "invalid_json",
+          message: 'Component spec must be an object with a "type" field',
+          raw
+        }
+      };
+    }
+    const spec = item;
+    if (typeof spec.type !== "string") {
+      return {
+        ok: false,
+        error: {
+          type: "invalid_json",
+          message: '"type" must be a string',
+          raw
+        }
+      };
+    }
+    const componentType = spec.type;
+    const definition = definitions[componentType];
+    if (!definition) {
+      return {
+        ok: false,
+        error: {
+          type: "unknown_component",
+          message: `Unknown component "${componentType}". Available: ${Object.keys(definitions).join(", ")}`,
+          raw,
+          componentType
+        }
+      };
+    }
+    const props = spec.props && typeof spec.props === "object" && !Array.isArray(spec.props) ? spec.props : {};
+    const parseResult = definition.props.safeParse(props);
+    if (!parseResult.success) {
+      return {
+        ok: false,
+        error: {
+          type: "invalid_props",
+          message: `Invalid props for "${componentType}": ${parseResult.error.issues.map((i) => i.message).join(", ")}`,
+          raw,
+          componentType,
+          issues: parseResult.error.issues.map((i) => ({
+            message: i.message,
+            path: i.path
+          }))
+        }
+      };
+    }
+    let validatedChildren;
+    if (spec.children) {
+      if (!Array.isArray(spec.children)) {
+        return {
+          ok: false,
+          error: {
+            type: "invalid_json",
+            message: '"children" must be an array',
+            raw,
+            componentType
+          }
+        };
+      }
+      validatedChildren = [];
+      for (const child of spec.children) {
+        const childResult = validateSingleSpec(child, raw, definitions);
+        if (!childResult.ok) {
+          return childResult;
+        }
+        validatedChildren.push(childResult.spec);
+      }
+    }
+    return {
+      ok: true,
+      spec: {
+        type: componentType,
+        props: parseResult.data,
+        ...validatedChildren ? { children: validatedChildren } : {}
+      }
+    };
+  }
+  const ComponentRenderer = ({
+    raw,
+    definitions,
+    options
+  }) => {
+    const { theme, sendMessage } = React.useContext(ChatContext);
+    const result = React.useMemo(
+      () => validateSpec(raw, definitions),
+      [raw, definitions]
+    );
+    if (!result.ok) {
+      const error = result.error;
+      const custom = options?.onError?.(error);
+      if (custom !== void 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComponentError,
+        {
+          title: errorTitle(error.type),
+          message: error.message,
+          code: error.raw
+        }
+      );
+    }
+    const specs = result.specs;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.component?.base, children: specs.map((spec, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      SpecRenderer,
+      {
+        spec,
+        definitions,
+        options,
+        sendMessage
+      },
+      `${spec.type}-${index}-${stableKey(spec)}`
+    )) });
+  };
+  const SpecRenderer = ({
+    spec,
+    definitions,
+    options,
+    sendMessage
+  }) => {
+    const definition = definitions[spec.type];
+    if (!definition) {
+      const error = {
+        type: "unknown_component",
+        message: `Unknown component "${spec.type}"`,
+        raw: JSON.stringify(spec),
+        componentType: spec.type
+      };
+      const custom = options?.onError?.(error);
+      if (custom !== void 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(ComponentError, { title: errorTitle(error.type), message: error.message });
+    }
+    const RenderedComponent = definition.component;
+    const children = spec.children?.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      SpecRenderer,
+      {
+        spec: child,
+        definitions,
+        options,
+        sendMessage
+      },
+      `${child.type}-${index}-${stableKey(child)}`
+    ));
+    return /* @__PURE__ */ jsxRuntime.jsx(SpecErrorBoundary, { spec, options, children: /* @__PURE__ */ jsxRuntime.jsx(RenderedComponent, { ...spec.props, sendMessage, children }) });
+  };
+  class SpecErrorBoundary extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+      return { error };
+    }
+    render() {
+      if (this.state.error) {
+        const { spec, options } = this.props;
+        const catalogError = {
+          type: "render_error",
+          message: `Error rendering "${spec.type}": ${this.state.error.message}`,
+          raw: JSON.stringify(spec),
+          componentType: spec.type
+        };
+        const custom = options?.onError?.(catalogError);
+        if (custom !== void 0) {
+          return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ComponentError,
+          {
+            title: errorTitle(catalogError.type),
+            message: catalogError.message
+          }
+        );
+      }
+      return this.props.children;
+    }
+  }
+  function stableKey(spec) {
+    const str = JSON.stringify({
+      t: spec.type,
+      p: spec.props,
+      c: spec.children
+    });
+    let h = 0;
+    for (let i = 0; i < str.length; i++) {
+      h = h * 31 + str.charCodeAt(i) | 0;
+    }
+    return (h >>> 0).toString(36);
+  }
+  function errorTitle(type) {
+    switch (type) {
+      case "unknown_component":
+        return "Unknown Component";
+      case "invalid_props":
+        return "Invalid Props";
+      case "render_error":
+        return "Render Error";
+      default:
+        return "Invalid Component";
+    }
+  }
+  function getChildText(children) {
+    if (children === null || children === void 0) {
+      return "";
+    }
+    if (typeof children === "string") {
+      return children;
+    }
+    if (typeof children === "number") {
+      return String(children);
+    }
+    if (Array.isArray(children)) {
+      return children.map(getChildText).join("");
+    }
+    if (typeof children === "object") {
+      if ("props" in children && children.props) {
+        const element = children;
+        return getChildText(element.props.children);
+      }
+    }
+    return "";
+  }
+  function createComponentPre(definitions, options) {
+    const language = options?.language ?? "component";
+    const className = `language-${language}`;
+    const ComponentPre = ({ children, ...props }) => {
+      if (children && typeof children === "object" && "props" in children) {
+        const codeElement = children;
+        if (codeElement.props?.className === className) {
+          const codeContent = getChildText(codeElement.props?.children);
+          if (codeContent) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              ComponentRenderer,
+              {
+                raw: codeContent,
+                definitions,
+                options
+              }
+            );
+          }
+        }
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("pre", { ...props, children });
+    };
+    ComponentPre.displayName = "ComponentPre";
+    return ComponentPre;
+  }
+  function describeJsonSchemaProperty(prop, indent = "") {
+    const description = prop.description ? ` // ${prop.description}` : "";
+    if (prop.anyOf) {
+      const nonNull = prop.anyOf.filter((s) => !(s.type === "null"));
+      const hasNull = prop.anyOf.some((s) => s.type === "null");
+      if (nonNull.length === 1 && hasNull) {
+        return `${describeJsonSchemaProperty(nonNull[0], indent)} | null${description}`;
+      }
+      const parts = prop.anyOf.map(
+        (s) => describeJsonSchemaProperty(s, indent)
+      );
+      return `${parts.join(" | ")}${description}`;
+    }
+    if (prop.enum) {
+      return `${prop.enum.map((v) => `"${v}"`).join(" | ")}${description}`;
+    }
+    if (prop.type === "array") {
+      const items = prop.items ? describeJsonSchemaProperty(prop.items, indent) : "any";
+      return `${items}[]${description}`;
+    }
+    if (prop.type === "object" && prop.properties) {
+      const required = new Set(prop.required ?? []);
+      const fields = [];
+      for (const [key, value] of Object.entries(prop.properties)) {
+        const opt = required.has(key) ? "" : "?";
+        fields.push(
+          `${indent}  ${key}: ${describeJsonSchemaProperty(value, indent + "  ")}${opt}`
+        );
+      }
+      return `{
+${fields.join(",\n")}
+${indent}}${description}`;
+    }
+    if (prop.type === "string") return `string${description}`;
+    if (prop.type === "number" || prop.type === "integer")
+      return `number${description}`;
+    if (prop.type === "boolean") return `boolean${description}`;
+    if (prop.type === "null") return `null${description}`;
+    return `any${description}`;
+  }
+  function describeProps(schema) {
+    try {
+      const jsonSchema = zod.z.toJSONSchema(schema);
+      if (jsonSchema.type === "object" && jsonSchema.properties) {
+        return describeJsonSchemaProperty(jsonSchema);
+      }
+      return "Record<string, any>";
+    } catch {
+      return "Record<string, any>";
+    }
+  }
+  function generatePrompt(definitions, language = "component") {
+    const names = Object.keys(definitions);
+    if (names.length === 0) {
+      return "";
+    }
+    const componentDocs = names.map((name) => {
+      const def = definitions[name];
+      const propsDesc = describeProps(def.props);
+      return `- **${name}**: ${def.description}
+  Props: ${propsDesc}`;
+    }).join("\n\n");
+    return `When you need to render a dynamic UI component in your response, use a fenced code block with language \`${language}\` containing a JSON object:
+
+\`\`\`${language}
+{ "type": "ComponentName", "props": { ... } }
+\`\`\`
+
+For multiple components, use a JSON array:
+
+\`\`\`${language}
+[
+  { "type": "ComponentA", "props": { ... } },
+  { "type": "ComponentB", "props": { ... } }
+]
+\`\`\`
+
+For nested/composed layouts, use the "children" field:
+
+\`\`\`${language}
+{
+  "type": "Parent",
+  "props": { ... },
+  "children": [
+    { "type": "Child", "props": { ... } }
+  ]
+}
+\`\`\`
+
+Available components:
+
+${componentDocs}`;
+  }
+  function componentCatalog(definitions, options) {
+    const language = options?.language ?? "component";
+    const plugin = remarkComponent.bind(void 0, {
+      language
+    });
+    const Pre = createComponentPre(definitions, options);
+    return {
+      remarkPlugin: plugin,
+      components: { pre: Pre },
+      systemPrompt: () => generatePrompt(definitions, language),
+      definitions
+    };
+  }
+  function createChartComponentDef() {
+    const chartPropsSchema = zod.z.object({
+      type: zod.z.enum([
+        "bar",
+        "line",
+        "area",
+        "pie",
+        "radialBar",
+        "radialArea",
+        "sparkline"
+      ]).describe("Chart type"),
+      data: zod.z.array(zod.z.object({ key: zod.z.string(), data: zod.z.number() })).describe("Array of { key, data } data points"),
+      width: zod.z.number().describe("Chart width in px").optional(),
+      height: zod.z.number().describe("Chart height in px").optional(),
+      title: zod.z.string().describe("Chart title").optional()
+    });
+    return {
+      description: "Renders a chart. Supported types: bar, line, area, pie, radialBar, radialArea, sparkline",
+      props: chartPropsSchema,
+      component: ({
+        children: _children,
+        sendMessage: _sendMessage,
+        ...config
+      }) => /* @__PURE__ */ jsxRuntime.jsx(ChartRenderer, { config })
+    };
+  }
   exports2.AgUiEventType = AgUiEventType;
   exports2.AppBar = AppBar;
-  exports2.ChartError = ChartError;
-  exports2.ChartPre = ChartPre;
   exports2.ChartRenderer = ChartRenderer;
   exports2.Chat = Chat;
   exports2.ChatBubble = ChatBubble;
@@ -3809,6 +4101,8 @@ ${response}` : ""}`);
   exports2.ChatSuggestion = ChatSuggestion;
   exports2.ChatSuggestions = ChatSuggestions;
   exports2.CodeHighlighter = CodeHighlighter;
+  exports2.ComponentError = ComponentError;
+  exports2.ComponentRenderer = ComponentRenderer;
   exports2.FileInput = FileInput;
   exports2.Markdown = Markdown;
   exports2.MentionList = MentionList;
@@ -3837,21 +4131,21 @@ ${response}` : ""}`);
   exports2.TableDataCell = TableDataCell;
   exports2.TableHeaderCell = TableHeaderCell;
   exports2.bitcoinMatcher = bitcoinMatcher;
-  exports2.chartComponents = chartComponents;
   exports2.chatTheme = chatTheme;
   exports2.commonRedactMatchers = commonRedactMatchers;
+  exports2.componentCatalog = componentCatalog;
+  exports2.createChartComponentDef = createChartComponentDef;
+  exports2.createComponentPre = createComponentPre;
   exports2.creditCardMatcher = creditCardMatcher;
   exports2.dark = dark;
-  exports2.getChildText = getChildText;
-  exports2.isChartClassName = isChartClassName;
+  exports2.generatePrompt = generatePrompt;
   exports2.light = light;
-  exports2.parseChartConfig = parseChartConfig;
-  exports2.remarkChart = remarkChart;
+  exports2.remarkComponent = remarkComponent;
   exports2.remarkCve = remarkCve;
   exports2.remarkRedact = remarkRedact;
   exports2.ssnMatcher = ssnMatcher;
   exports2.useAgUi = useAgUi;
-  exports2.validateChartData = validateChartData;
+  exports2.validateSpec = validateSpec;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+}));
 //# sourceMappingURL=index.umd.cjs.map