@copilotkit/react-ui 1.56.2 → 1.56.4-canary.1777529757

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.56.2",
+  "version": "1.56.4-canary.1777529757",
   "private": false,
   "keywords": [
     "ai",
@@ -48,9 +48,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.56.2",
-    "@copilotkit/runtime-client-gql": "1.56.2",
-    "@copilotkit/shared": "1.56.2"
+    "@copilotkit/react-core": "1.56.4-canary.1777529757",
+    "@copilotkit/shared": "1.56.4-canary.1777529757",
+    "@copilotkit/runtime-client-gql": "1.56.4-canary.1777529757"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -62,8 +62,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.2.3",
     "vitest": "^3.2.4",
-    "tailwind-config": "1.4.12",
-    "tsconfig": "1.4.12"
+    "tsconfig": "1.4.12",
+    "tailwind-config": "1.4.12"
   },
   "peerDependencies": {
     "react": "^18 || ^19 || ^19.0.0-rc"

package/src/components/chat/Markdown.tsx

@@ -122,39 +122,42 @@ const defaultComponents: Components = {
   ),
 };
 
-const MemoizedReactMarkdown: FC<Options> = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    prevProps.components === nextProps.components &&
-    prevProps.urlTransform === nextProps.urlTransform,
-);
+const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);
 
-type MarkdownProps = {
+type MarkdownProps = Omit<Options, "children"> & {
   content: string;
-  components?: Components;
-  urlTransform?: Options["urlTransform"];
 };
 
 export const Markdown = ({
   content,
   components,
-  urlTransform,
+  remarkPlugins,
+  rehypePlugins,
+  ...rest
 }: MarkdownProps) => {
   const mergedComponents = useMemo(
     () => ({ ...defaultComponents, ...components }),
     [components],
   );
+  const mergedRemarkPlugins = useMemo<Options["remarkPlugins"]>(
+    () => [
+      remarkGfm,
+      [remarkMath, { singleDollarTextMath: false }],
+      ...(remarkPlugins ?? []),
+    ],
+    [remarkPlugins],
+  );
+  const mergedRehypePlugins = useMemo<Options["rehypePlugins"]>(
+    () => [rehypeRaw, ...(rehypePlugins ?? [])],
+    [rehypePlugins],
+  );
   return (
     <div className="copilotKitMarkdown">
       <MemoizedReactMarkdown
+        {...rest}
         components={mergedComponents}
-        remarkPlugins={[
-          remarkGfm,
-          [remarkMath, { singleDollarTextMath: false }],
-        ]}
-        rehypePlugins={[rehypeRaw]}
-        {...(urlTransform !== undefined ? { urlTransform } : {})}
+        remarkPlugins={mergedRemarkPlugins}
+        rehypePlugins={mergedRehypePlugins}
       >
         {content}
       </MemoizedReactMarkdown>

package/src/css/messages.css

@@ -208,10 +208,15 @@
 }
 
 .copilotKitImageRenderingImage {
-  max-width: 100%;
+  max-width: 80px;
+  max-height: 80px;
+  width: auto;
   height: auto;
-  border-radius: 8px;
+  object-fit: cover;
+  border-radius: 12px;
+  background-color: var(--copilot-kit-input-background-color);
   box-shadow: var(--copilot-kit-shadow-sm);
+  cursor: pointer;
 }
 
 .copilotKitImageRenderingContent {