@copilotz/chat-ui 0.1.39 → 0.2.1

package/README.md

@@ -202,6 +202,78 @@ import { ChatUI, chatConfigPresets } from '@copilotz/chat-ui';
 />
 ```
 
+### Markdown Extensions
+
+By default, `@copilotz/chat-ui` renders messages with:
+
+- `remark-gfm`
+- syntax highlighting for non-streaming code blocks
+- the built-in markdown component overrides used by the chat UI
+
+If you need more control, you can extend the markdown pipeline through `config.markdown`.
+
+```tsx
+import type { Components } from 'react-markdown';
+
+const markdownComponents: Components = {
+  code: MyCustomCodeBlock,
+};
+
+<ChatUI
+  config={{
+    markdown: {
+      remarkPlugins: [myRemarkPlugin],
+      rehypePlugins: [myRehypePlugin],
+      components: markdownComponents,
+    },
+  }}
+/>
+```
+
+Notes:
+
+- `remarkPlugins` and `rehypePlugins` are appended to the built-in defaults.
+- `components` are merged with the built-in markdown component map.
+- This is the recommended way to add Mermaid, custom code blocks, callouts, or project-specific markdown behavior without increasing the core `chat-ui` bundle.
+
+Example: Mermaid via a custom `code` renderer
+
+````tsx
+function MermaidCodeBlock({ className, children, inline, ...props }) {
+  const isMermaid = !inline && /\blanguage-mermaid\b/.test(className || '');
+
+  if (isMermaid) {
+    return <MyMermaidRenderer definition={String(children)} />;
+  }
+
+  return !inline ? (
+    <pre>
+      <code className={className} {...props}>
+        {children}
+      </code>
+    </pre>
+  ) : (
+    <code {...props}>{children}</code>
+  );
+}
+
+<ChatUI
+  config={{
+    markdown: {
+      components: {
+        code: MermaidCodeBlock,
+      },
+    },
+  }}
+/>
+````
+
+Recommended approach for Mermaid:
+
+- keep Mermaid project-specific instead of bundling it into every `chat-ui` consumer
+- lazy-load the Mermaid runtime inside your custom renderer
+- render Mermaid only for completed code blocks, not for token-by-token streaming content
+
 ### Custom Right Sidebar
 
 Add a custom component to the right sidebar (e.g., profile info, settings, context):
@@ -280,6 +352,23 @@ All user interactions are handled through callbacks. This keeps the component pu
 | `onInitialInputConsumed` | `() => void` | Called when initial input is modified/sent |
 | `className` | `string` | Additional CSS classes |
 
+### ChatConfig Markdown
+
+```typescript
+interface ChatMarkdownConfig {
+  remarkPlugins?: ReactMarkdownOptions['remarkPlugins'];
+  rehypePlugins?: ReactMarkdownOptions['rehypePlugins'];
+  components?: Components;
+}
+```
+
+```typescript
+interface ChatConfig {
+  // ...
+  markdown?: ChatMarkdownConfig;
+}
+```
+
 ### ChatMessage
 
 ```typescript

package/dist/index.cjs

@@ -5351,7 +5351,7 @@ var ChatUI = ({
             children: state.showSidebar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "div",
               {
-                className: "flex flex-col h-full border-l bg-background animate-in slide-in-from-right-4 duration-300",
+                className: "h-full overflow-hidden border-l bg-background animate-in slide-in-from-right-4 duration-300",
                 style: { width: config.customComponent.panelWidth ?? 320 },
                 children: renderCustomComponent()
               }
@@ -5374,7 +5374,7 @@ var ChatUI = ({
         {
           className: `absolute top-0 right-0 h-full w-full bg-background transform-gpu transition-transform duration-200 ease-out ${isCustomVisible ? "translate-x-0" : "translate-x-full"}`,
           style: { willChange: "transform" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex flex-col", children: renderCustomComponent() })
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full overflow-hidden", children: renderCustomComponent() })
         }
       )
     ] }),