@copilotz/chat-ui 0.1.38 → 0.2.0

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
+import { Options, Components } from 'react-markdown';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
 
@@ -94,6 +95,11 @@ interface ChatThread {
     isArchived?: boolean;
     metadata?: Record<string, any>;
 }
+interface ChatMarkdownConfig {
+    remarkPlugins?: Options['remarkPlugins'];
+    rehypePlugins?: Options['rehypePlugins'];
+    components?: Components;
+}
 interface ChatConfig {
     branding?: {
         logo?: ReactNode;
@@ -202,6 +208,7 @@ interface ChatConfig {
         longMessageChunkChars?: number;
         renderUserMarkdown?: boolean;
     };
+    markdown?: ChatMarkdownConfig;
     voiceCompose?: {
         enabled?: boolean;
         defaultMode?: 'text' | 'voice';
@@ -445,6 +452,7 @@ interface MessageProps {
     longMessagePreviewChars?: number;
     longMessageChunkChars?: number;
     renderUserMarkdown?: boolean;
+    markdown?: ChatMarkdownConfig;
     isExpanded?: boolean;
     onToggleExpanded?: (messageId: string) => void;
     /** When true, hides the avatar and name (for grouped consecutive messages from same sender) */
@@ -675,4 +683,4 @@ declare const chatUtils: {
     generateThreadTitle: (firstMessage: string) => string;
 };
 
-export { type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };
+export { type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMarkdownConfig, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
+import { Options, Components } from 'react-markdown';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
 
@@ -94,6 +95,11 @@ interface ChatThread {
     isArchived?: boolean;
     metadata?: Record<string, any>;
 }
+interface ChatMarkdownConfig {
+    remarkPlugins?: Options['remarkPlugins'];
+    rehypePlugins?: Options['rehypePlugins'];
+    components?: Components;
+}
 interface ChatConfig {
     branding?: {
         logo?: ReactNode;
@@ -202,6 +208,7 @@ interface ChatConfig {
         longMessageChunkChars?: number;
         renderUserMarkdown?: boolean;
     };
+    markdown?: ChatMarkdownConfig;
     voiceCompose?: {
         enabled?: boolean;
         defaultMode?: 'text' | 'voice';
@@ -445,6 +452,7 @@ interface MessageProps {
     longMessagePreviewChars?: number;
     longMessageChunkChars?: number;
     renderUserMarkdown?: boolean;
+    markdown?: ChatMarkdownConfig;
     isExpanded?: boolean;
     onToggleExpanded?: (messageId: string) => void;
     /** When true, hides the avatar and name (for grouped consecutive messages from same sender) */
@@ -675,4 +683,4 @@ declare const chatUtils: {
     generateThreadTitle: (firstMessage: string) => string;
 };
 
-export { type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };
+export { type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMarkdownConfig, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };

package/dist/index.js

@@ -114,6 +114,11 @@ var defaultChatConfig = {
     longMessageChunkChars: 12e3,
     renderUserMarkdown: true
   },
+  markdown: {
+    remarkPlugins: [],
+    rehypePlugins: [],
+    components: {}
+  },
   voiceCompose: {
     enabled: false,
     defaultMode: "text",
@@ -147,6 +152,10 @@ function mergeConfig(_baseConfig, userConfig) {
       ...defaultChatConfig.ui,
       ...userConfig.ui
     },
+    markdown: {
+      ...defaultChatConfig.markdown,
+      ...userConfig.markdown
+    },
     voiceCompose: {
       ...defaultChatConfig.voiceCompose,
       ...userConfig.voiceCompose
@@ -653,7 +662,7 @@ var ThinkingBlock = memo(function ThinkingBlock2({ reasoning, isStreaming = fals
     ] }) })
   ] });
 });
-var markdownComponents = {
+var defaultMarkdownComponents = {
   code: ({ node, className, children, ...props }) => {
     const inline = props.inline;
     const match = /language-(\w+)/.exec(className || "");
@@ -718,12 +727,34 @@ var StreamingText = 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 = useMemo(
+    () => ({
+      ...defaultMarkdownComponents,
+      ...markdown?.components
+    }),
+    [markdown?.components]
+  );
+  const mergedRemarkPlugins = useMemo(
+    () => [
+      ...remarkPluginsDefault,
+      ...markdown?.remarkPlugins ?? []
+    ],
+    [markdown?.remarkPlugins]
+  );
+  const mergedRehypePlugins = useMemo(
+    () => [
+      ...enableSyntaxHighlight ? rehypePluginsDefault : rehypePluginsEmpty,
+      ...markdown?.rehypePlugins ?? []
+    ],
+    [enableSyntaxHighlight, markdown?.rehypePlugins]
+  );
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     hasContent ? renderMarkdown ? /* @__PURE__ */ jsx7(
       LongContentShell,
@@ -733,9 +764,9 @@ var StreamingText = memo(function StreamingText2({
         children: /* @__PURE__ */ jsx7(
           ReactMarkdown,
           {
-            remarkPlugins: remarkPluginsDefault,
-            rehypePlugins: enableSyntaxHighlight ? rehypePluginsDefault : rehypePluginsEmpty,
-            components: markdownComponents,
+            remarkPlugins: mergedRemarkPlugins,
+            rehypePlugins: mergedRehypePlugins,
+            components: mergedComponents,
             children: content
           }
         )
@@ -909,6 +940,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;
@@ -940,6 +972,7 @@ var Message = memo(({
   longMessagePreviewChars = 4e3,
   longMessageChunkChars = 12e3,
   renderUserMarkdown = true,
+  markdown,
   isExpanded = false,
   onToggleExpanded,
   isGrouped = false
@@ -1057,6 +1090,7 @@ var Message = memo(({
                 isStreaming: message.isStreaming,
                 thinkingLabel,
                 renderMarkdown: shouldRenderMarkdown,
+                markdown,
                 plainTextChunkChars: normalizedChunkChars,
                 contentStyle,
                 hideThinkingIndicator: !!message.reasoning
@@ -5187,6 +5221,7 @@ var ChatUI = ({
     longMessagePreviewChars: config.ui.longMessagePreviewChars,
     longMessageChunkChars: config.ui.longMessageChunkChars,
     renderUserMarkdown: config.ui.renderUserMarkdown,
+    markdown: config.markdown,
     onToggleExpanded: handleToggleMessageExpansion
   }), [
     user?.avatar,
@@ -5209,6 +5244,7 @@ var ChatUI = ({
     config.ui.longMessagePreviewChars,
     config.ui.longMessageChunkChars,
     config.ui.renderUserMarkdown,
+    config.markdown,
     handleMessageAction,
     handleToggleMessageExpansion
   ]);