@copilotz/chat-ui 0.1.38 → 0.2.0

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

@@ -170,6 +170,11 @@ var defaultChatConfig = {
     longMessageChunkChars: 12e3,
     renderUserMarkdown: true
   },
+  markdown: {
+    remarkPlugins: [],
+    rehypePlugins: [],
+    components: {}
+  },
   voiceCompose: {
     enabled: false,
     defaultMode: "text",
@@ -203,6 +208,10 @@ function mergeConfig(_baseConfig, userConfig) {
       ...defaultChatConfig.ui,
       ...userConfig.ui
     },
+    markdown: {
+      ...defaultChatConfig.markdown,
+      ...userConfig.markdown
+    },
     voiceCompose: {
       ...defaultChatConfig.voiceCompose,
       ...userConfig.voiceCompose
@@ -698,7 +707,7 @@ var ThinkingBlock = (0, import_react.memo)(function ThinkingBlock2({ reasoning,
     ] }) })
   ] });
 });
-var markdownComponents = {
+var defaultMarkdownComponents = {
   code: ({ node, className, children, ...props }) => {
     const inline = props.inline;
     const match = /language-(\w+)/.exec(className || "");
@@ -763,12 +772,34 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
   thinkingLabel = "Thinking...",
   className = "",
   renderMarkdown = true,
+  markdown,
   plainTextChunkChars = 12e3,
   contentStyle,
   hideThinkingIndicator = false
 }) {
   const hasContent = content.trim().length > 0;
   const enableSyntaxHighlight = renderMarkdown && !isStreaming && hasCodeBlocks(content);
+  const mergedComponents = (0, import_react.useMemo)(
+    () => ({
+      ...defaultMarkdownComponents,
+      ...markdown?.components
+    }),
+    [markdown?.components]
+  );
+  const mergedRemarkPlugins = (0, import_react.useMemo)(
+    () => [
+      ...remarkPluginsDefault,
+      ...markdown?.remarkPlugins ?? []
+    ],
+    [markdown?.remarkPlugins]
+  );
+  const mergedRehypePlugins = (0, import_react.useMemo)(
+    () => [
+      ...enableSyntaxHighlight ? rehypePluginsDefault : rehypePluginsEmpty,
+      ...markdown?.rehypePlugins ?? []
+    ],
+    [enableSyntaxHighlight, markdown?.rehypePlugins]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     hasContent ? renderMarkdown ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       LongContentShell,
@@ -778,9 +809,9 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_markdown.default,
           {
-            remarkPlugins: remarkPluginsDefault,
-            rehypePlugins: enableSyntaxHighlight ? rehypePluginsDefault : rehypePluginsEmpty,
-            components: markdownComponents,
+            remarkPlugins: mergedRemarkPlugins,
+            rehypePlugins: mergedRehypePlugins,
+            components: mergedComponents,
             children: content
           }
         )
@@ -954,6 +985,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   if (prevProps.longMessagePreviewChars !== nextProps.longMessagePreviewChars) return false;
   if (prevProps.longMessageChunkChars !== nextProps.longMessageChunkChars) return false;
   if (prevProps.renderUserMarkdown !== nextProps.renderUserMarkdown) return false;
+  if (prevProps.markdown !== nextProps.markdown) return false;
   if (prevProps.isExpanded !== nextProps.isExpanded) return false;
   if (prevProps.onToggleExpanded !== nextProps.onToggleExpanded) return false;
   if (prevProps.isGrouped !== nextProps.isGrouped) return false;
@@ -985,6 +1017,7 @@ var Message = (0, import_react.memo)(({
   longMessagePreviewChars = 4e3,
   longMessageChunkChars = 12e3,
   renderUserMarkdown = true,
+  markdown,
   isExpanded = false,
   onToggleExpanded,
   isGrouped = false
@@ -1102,6 +1135,7 @@ var Message = (0, import_react.memo)(({
                 isStreaming: message.isStreaming,
                 thinkingLabel,
                 renderMarkdown: shouldRenderMarkdown,
+                markdown,
                 plainTextChunkChars: normalizedChunkChars,
                 contentStyle,
                 hideThinkingIndicator: !!message.reasoning
@@ -5165,6 +5199,7 @@ var ChatUI = ({
     longMessagePreviewChars: config.ui.longMessagePreviewChars,
     longMessageChunkChars: config.ui.longMessageChunkChars,
     renderUserMarkdown: config.ui.renderUserMarkdown,
+    markdown: config.markdown,
     onToggleExpanded: handleToggleMessageExpansion
   }), [
     user?.avatar,
@@ -5187,6 +5222,7 @@ var ChatUI = ({
     config.ui.longMessagePreviewChars,
     config.ui.longMessageChunkChars,
     config.ui.renderUserMarkdown,
+    config.markdown,
     handleMessageAction,
     handleToggleMessageExpansion
   ]);