reachat 3.3.0 → 3.4.1

package/dist/Chat.d.ts

@@ -38,7 +38,7 @@ export interface ChatProps extends PropsWithChildren {
     theme?: ChatTheme;
     /**
      * Remark plugins to apply to the request/response.
-     * @default defaultRemarkPlugins
+     * @default undefined
      */
     remarkPlugins?: Plugin[];
     /**

package/dist/Markdown/Markdown.d.ts

@@ -1,10 +1,11 @@
 import { FC, PropsWithChildren } from 'react';
 import { Components } from 'react-markdown';
 import { Plugin } from 'unified';
-import { ChatTheme } from '../theme';
+import { MarkdownTheme } from './types';
 interface MarkdownWrapperProps extends PropsWithChildren {
     /**
      * Remark plugins to apply to the markdown content.
+     * @default [remarkGfm, remarkYoutube, remarkMath]
      */
     remarkPlugins?: Plugin[];
     /**
@@ -15,7 +16,7 @@ interface MarkdownWrapperProps extends PropsWithChildren {
     /**
      * Theme to apply to the markdown content.
      */
-    theme?: ChatTheme;
+    theme: MarkdownTheme;
     /**
      * Custom components to override default markdown rendering.
      * These will be merged with the default components.

package/dist/Markdown/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Markdown';
 export * from './Table';
 export * from './CodeHighlighter';
+export * from './types';
 export * from './charts';
 export * from './plugins';
 export * from './themes';

package/dist/Markdown/types.d.ts

@@ -0,0 +1,21 @@
+export interface MarkdownTheme {
+    hr: string;
+    p: string;
+    a: string;
+    table: string;
+    th: string;
+    td: string;
+    code: string;
+    inlineCode: string;
+    toolbar: string;
+    li: string;
+    ul: string;
+    ol: string;
+    copy: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+}

package/dist/index.css

@@ -35,6 +35,7 @@
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-green-950: oklch(26.6% 0.065 152.934);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
     --color-cyan-500: oklch(71.5% 0.143 215.221);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -45,6 +46,7 @@
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-blue-950: oklch(28.2% 0.091 267.935);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-violet-500: oklch(60.6% 0.25 292.717);
@@ -74,6 +76,7 @@
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-2xl: 42rem;
+    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -1011,6 +1014,9 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
   .max-w-10 {
     max-width: calc(var(--spacing) * 10);
   }
@@ -2307,6 +2313,9 @@
   .text-blue-700 {
     color: var(--color-blue-700);
   }
+  .text-cyan-300 {
+    color: var(--color-cyan-300);
+  }
   .text-gray-100 {
     color: var(--color-gray-100);
   }
@@ -2331,6 +2340,9 @@
   .text-green-500 {
     color: var(--color-green-500);
   }
+  .text-indigo-300 {
+    color: var(--color-indigo-300);
+  }
   .text-inherit {
     color: inherit;
   }

package/dist/index.js

@@ -15,14 +15,14 @@ import { AnimatePresence, motion } from "motion/react";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkYoutube from "remark-youtube";
 import { Prism } from "react-syntax-highlighter";
 import { AreaChart, AreaSeries, BarChart, BarSeries, LineChart, LineSeries, LinearXAxis, LinearYAxis, PieArcSeries, PieChart, RadialAreaChart, RadialAreaSeries, RadialBarChart, RadialBarSeries, SparklineChart } from "reaviz";
 import { findAndReplace } from "mdast-util-find-and-replace";
 import debounce from "lodash/debounce.js";
 import { useHotkeys } from "reakeys";
-import remarkGfm from "remark-gfm";
-import remarkYoutube from "remark-youtube";
-import remarkMath from "remark-math";
 import { differenceInYears, format, isThisWeek, isToday, isYesterday } from "date-fns";
 import { offset } from "@floating-ui/react";
 import { z } from "zod";
@@ -1413,9 +1413,12 @@ var TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsx("td", {
 });
 //#endregion
 //#region src/Markdown/Markdown.tsx
-var Markdown = ({ children, remarkPlugins, rehypePlugins = [rehypeRaw, rehypeKatex], theme: themeProp, customComponents }) => {
-	const { theme: contextTheme, markdownComponents } = useContext(ChatContext);
-	const theme = themeProp || contextTheme;
+var defaultRemarkPlugins = [
+	remarkGfm,
+	remarkYoutube,
+	remarkMath
+];
+var Markdown = ({ children, remarkPlugins = defaultRemarkPlugins, rehypePlugins = [rehypeRaw, rehypeKatex], theme, customComponents }) => {
 	return /* @__PURE__ */ jsx(ReactMarkdown, {
 		remarkPlugins,
 		rehypePlugins,
@@ -1424,85 +1427,80 @@ var Markdown = ({ children, remarkPlugins, rehypePlugins = [rehypeRaw, rehypeKat
 				code: ({ className, children, ...props }) => /* @__PURE__ */ jsx(CodeHighlighter, {
 					...props,
 					language: cn(className),
-					inlineClassName: cn(theme.messages.message.markdown.inlineCode),
-					className: cn(theme.messages.message.markdown.code, className),
-					copyClassName: cn(theme.messages.message.markdown.copy),
-					toolbarClassName: cn(theme.messages.message.markdown.toolbar),
+					inlineClassName: cn(theme.inlineCode),
+					className: cn(theme.code, className),
+					copyClassName: cn(theme.copy),
+					toolbarClassName: cn(theme.toolbar),
 					children
 				}),
 				table: (props) => /* @__PURE__ */ jsx(TableComponent, {
 					...props,
-					className: cn(theme.messages.message.markdown.table)
+					className: cn(theme.table)
 				}),
 				th: (props) => /* @__PURE__ */ jsx(TableHeaderCell, {
 					...props,
-					className: cn(theme.messages.message.markdown.th)
+					className: cn(theme.th)
 				}),
 				td: (props) => /* @__PURE__ */ jsx(TableDataCell, {
 					...props,
-					className: cn(theme.messages.message.markdown.td)
+					className: cn(theme.td)
 				}),
 				a: (props) => /* @__PURE__ */ jsx("a", {
 					...props,
-					className: cn(theme.messages.message.markdown.a)
+					className: cn(theme.a)
 				}),
 				hr: (props) => /* @__PURE__ */ jsx("hr", {
 					...props,
-					className: cn(theme.messages.message.markdown.hr)
+					className: cn(theme.hr)
 				}),
 				p: (props) => /* @__PURE__ */ jsx("p", {
 					...props,
-					className: cn(theme.messages.message.markdown.p)
+					className: cn(theme.p)
 				}),
 				li: (props) => /* @__PURE__ */ jsx("li", {
 					...props,
-					className: cn(theme.messages.message.markdown.li)
+					className: cn(theme.li)
 				}),
 				ul: (props) => /* @__PURE__ */ jsx("ul", {
 					...props,
-					className: cn(theme.messages.message.markdown.ul)
+					className: cn(theme.ul)
 				}),
 				ol: (props) => /* @__PURE__ */ jsx("ol", {
 					...props,
-					className: cn(theme.messages.message.markdown.ol)
+					className: cn(theme.ol)
 				}),
 				h1: (props) => /* @__PURE__ */ jsx("h1", {
 					...props,
-					className: cn(theme.messages.message.markdown.h1)
+					className: cn(theme.h1)
 				}),
 				h2: (props) => /* @__PURE__ */ jsx("h2", {
 					...props,
-					className: cn(theme.messages.message.markdown.h2)
+					className: cn(theme.h2)
 				}),
 				h3: (props) => /* @__PURE__ */ jsx("h3", {
 					...props,
-					className: cn(theme.messages.message.markdown.h3)
+					className: cn(theme.h3)
 				}),
 				h4: (props) => /* @__PURE__ */ jsx("h4", {
 					...props,
-					className: cn(theme.messages.message.markdown.h4)
+					className: cn(theme.h4)
 				}),
 				h5: (props) => /* @__PURE__ */ jsx("h5", {
 					...props,
-					className: cn(theme.messages.message.markdown.h5)
+					className: cn(theme.h5)
 				}),
 				h6: (props) => /* @__PURE__ */ jsx("h6", {
 					...props,
-					className: cn(theme.messages.message.markdown.h6)
+					className: cn(theme.h6)
 				}),
 				redact: ((props) => /* @__PURE__ */ jsx(Redact, {
 					value: props["data-redact-value"] || props.children,
 					allowToggle: true,
 					tooltipText: `${props["data-redact-name"] || "Sensitive"} information - Click to toggle`
 				})),
-				...markdownComponents,
 				...customComponents
 			};
-		}, [
-			theme,
-			markdownComponents,
-			customComponents
-		]),
+		}, [theme, customComponents]),
 		children
 	});
 };
@@ -2032,7 +2030,7 @@ MessageFiles.displayName = "MessageFiles";
 //#endregion
 //#region src/SessionMessages/SessionMessage/MessageQuestion.tsx
 var MessageQuestion = memo(({ children, ...props }) => {
-	const { theme, remarkPlugins } = useContext(ChatContext);
+	const { theme, remarkPlugins, markdownComponents } = useContext(ChatContext);
 	const { question, files } = props;
 	const Comp = children ? Slot : "div";
 	const [expanded, setExpanded] = useState(false);
@@ -2044,7 +2042,8 @@ var MessageQuestion = memo(({ children, ...props }) => {
 			/* @__PURE__ */ jsx(MessageFiles, { files }),
 			/* @__PURE__ */ jsx(Markdown, {
 				remarkPlugins,
-				theme,
+				theme: theme.messages.message.markdown,
+				customComponents: markdownComponents,
 				children: question
 			}),
 			isLong && !expanded && /* @__PURE__ */ jsx(Button, {
@@ -2061,13 +2060,14 @@ MessageQuestion.displayName = "MessageQuestion";
 //#endregion
 //#region src/SessionMessages/SessionMessage/MessageResponse.tsx
 var MessageResponse = memo(({ response, isLoading, children }) => {
-	const { theme, isCompact, remarkPlugins } = useContext(ChatContext);
+	const { theme, isCompact, remarkPlugins, markdownComponents } = useContext(ChatContext);
 	return /* @__PURE__ */ jsx(children ? Slot : "div", {
 		"data-compact": isCompact,
 		className: cn(theme.messages.message.response),
 		children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Markdown, {
 			remarkPlugins,
-			theme,
+			theme: theme.messages.message.markdown,
+			customComponents: markdownComponents,
 			children: response
 		}), isLoading && /* @__PURE__ */ jsx(motion.div, {
 			className: cn(theme.messages.message.cursor),
@@ -2425,12 +2425,7 @@ var useDimensions = () => {
 };
 //#endregion
 //#region src/Chat.tsx
-var defaultRemarkPlugins = [
-	remarkGfm,
-	remarkYoutube,
-	remarkMath
-];
-var Chat = ({ children, viewType = "console", sessions, onSelectSession, onDeleteSession, onSendMessage, onStopMessage, onFileUpload, isLoading, activeSessionId, theme: customTheme = chatTheme, onNewSession, remarkPlugins = defaultRemarkPlugins, markdownComponents, components: componentCatalog, disabled, style, className }) => {
+var Chat = ({ children, viewType = "console", sessions, onSelectSession, onDeleteSession, onSendMessage, onStopMessage, onFileUpload, isLoading, activeSessionId, theme: customTheme = chatTheme, onNewSession, remarkPlugins, markdownComponents, components: componentCatalog, disabled, style, className }) => {
 	const theme = useComponentTheme("chat", customTheme);
 	const [internalActiveSessionID, setInternalActiveSessionID] = useState(activeSessionId);
 	const { width, observe } = useDimensions();
@@ -2462,7 +2457,8 @@ var Chat = ({ children, viewType = "console", sessions, onSelectSession, onDelet
 	const activeSession = useMemo(() => sessions.find((session) => session.id === internalActiveSessionID), [sessions, internalActiveSessionID]);
 	const mergedRemarkPlugins = useMemo(() => {
 		if (!componentCatalog) return remarkPlugins;
-		return [...remarkPlugins, componentCatalog.remarkPlugin];
+		if (!remarkPlugins) return;
+		return [...remarkPlugins ?? [], componentCatalog.remarkPlugin];
 	}, [remarkPlugins, componentCatalog]);
 	const mergedMarkdownComponents = useMemo(() => {
 		if (!componentCatalog) return markdownComponents;