@copilotz/chat-ui 0.1.37 → 0.1.39

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
   ]);
@@ -5310,8 +5346,16 @@ var ChatUI = ({
         config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
-            className: `h-full transition-all duration-300 ease-in-out overflow-hidden ${state.showSidebar ? "w-80" : "w-0"}`,
-            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 w-80", children: renderCustomComponent() })
+            className: "h-full transition-all duration-300 ease-in-out overflow-hidden",
+            style: { width: state.showSidebar ? config.customComponent.panelWidth ?? 320 : 0 },
+            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",
+                style: { width: config.customComponent.panelWidth ?? 320 },
+                children: renderCustomComponent()
+              }
+            )
           }
         )
       ] })