@extrachill/chat 0.3.0 → 0.3.1

package/dist/components/ChatMessage.d.ts

@@ -7,7 +7,6 @@ export interface ChatMessageProps {
     contentFormat?: ContentFormat;
     /**
      * Custom content renderer. When provided, overrides contentFormat.
-     * Use this to plug in your own markdown renderer (react-markdown, etc.).
      */
     renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
     /** Additional CSS class name on the outer wrapper. */
@@ -17,7 +16,7 @@ export interface ChatMessageProps {
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
  */
 export declare function ChatMessage({ message, contentFormat, renderContent, className, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatMessage.d.ts.map

package/dist/components/ChatMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvF,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAyBlB"}
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKvF,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAyBlB"}

package/dist/components/ChatMessage.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { lazy, Suspense } from 'react';
 import { markdownToHtml } from "../markdown.js";
+const ReactMarkdown = lazy(() => import('react-markdown'));
 /**
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
  */
 export function ChatMessage({ message, contentFormat = 'markdown', renderContent, className, }) {
     const isUser = message.role === 'user';
@@ -16,16 +17,19 @@ export function ChatMessage({ message, contentFormat = 'markdown', renderContent
                     ? renderContent(message.content, message.role)
                     : _jsx(DefaultContent, { content: message.content, format: contentFormat }) }), message.timestamp && (_jsx("time", { className: `${baseClass}__timestamp`, dateTime: message.timestamp, title: new Date(message.timestamp).toLocaleString(), children: formatTime(message.timestamp) }))] }));
 }
+/**
+ * Markdown rendered via lazy-loaded react-markdown.
+ * Falls back to the built-in lightweight parser while loading.
+ */
+function MarkdownContent({ content }) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { dangerouslySetInnerHTML: { __html: markdownToHtml(content) } }), children: _jsx(ReactMarkdown, { children: content }) }));
+}
 function DefaultContent({ content, format }) {
-    const html = useMemo(() => {
-        if (format === 'html')
-            return content;
-        if (format === 'markdown')
-            return markdownToHtml(content);
-        return null;
-    }, [content, format]);
-    if (html !== null) {
-        return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+    if (format === 'html') {
+        return _jsx("div", { dangerouslySetInnerHTML: { __html: content } });
+    }
+    if (format === 'markdown') {
+        return _jsx(MarkdownContent, { content: content });
     }
     // Plain text — split on double newlines for paragraphs.
     return (_jsx(_Fragment, { children: content.split('\n\n').map((paragraph, i) => (_jsx("p", { children: paragraph }, i))) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/chat",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Chat UI components with built-in REST API client. Speaks the standard chat message format natively.",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,10 +52,13 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "typescript": "^5.7.0"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0"
   }
 }

package/src/components/ChatMessage.tsx

@@ -1,7 +1,9 @@
-import { type ReactNode, useMemo } from 'react';
+import { type ReactNode, lazy, Suspense } from 'react';
 import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
 import { markdownToHtml } from '../markdown.ts';
 
+const ReactMarkdown = lazy(() => import('react-markdown'));
+
 export interface ChatMessageProps {
 	/** The message to render. */
 	message: ChatMessageType;
@@ -9,7 +11,6 @@ export interface ChatMessageProps {
 	contentFormat?: ContentFormat;
 	/**
 	 * Custom content renderer. When provided, overrides contentFormat.
-	 * Use this to plug in your own markdown renderer (react-markdown, etc.).
 	 */
 	renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
 	/** Additional CSS class name on the outer wrapper. */
@@ -20,7 +21,7 @@ export interface ChatMessageProps {
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
  */
 export function ChatMessage({
 	message,
@@ -59,15 +60,29 @@ interface DefaultContentProps {
 	format: ContentFormat;
 }
 
+/**
+ * Markdown rendered via lazy-loaded react-markdown.
+ * Falls back to the built-in lightweight parser while loading.
+ */
+function MarkdownContent({ content }: { content: string }) {
+	return (
+		<Suspense
+			fallback={
+				<div dangerouslySetInnerHTML={{ __html: markdownToHtml(content) }} />
+			}
+		>
+			<ReactMarkdown>{content}</ReactMarkdown>
+		</Suspense>
+	);
+}
+
 function DefaultContent({ content, format }: DefaultContentProps) {
-	const html = useMemo(() => {
-		if (format === 'html') return content;
-		if (format === 'markdown') return markdownToHtml(content);
-		return null;
-	}, [content, format]);
+	if (format === 'html') {
+		return <div dangerouslySetInnerHTML={{ __html: content }} />;
+	}
 
-	if (html !== null) {
-		return <div dangerouslySetInnerHTML={{ __html: html }} />;
+	if (format === 'markdown') {
+		return <MarkdownContent content={content} />;
 	}
 
 	// Plain text — split on double newlines for paragraphs.