reachat 2.1.0-alpha.8 → 2.1.0

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img width="650" src=".storybook/logo.png">
+  <img width="650" src=".storybook/logo.svg">
   <br />
   Building Blocks for LLM UI
   <br /><br />
@@ -62,10 +62,12 @@ theme via Tailwind.
 - Conversation Pagination
 - Smart/Dynamic Grouping of Sessions
 - Keyboard shortcuts
-- Animations via Framer Motion
+- Animations via Motion.dev
 - Responsive
 - Tailwind for Themeing
 - Customizable via Slots
+- Conversation Charting via Reaviz.dev
+- Mentions and Commands via Tiptap
 
 ## 📦 Install
 

package/dist/AppBar/AppBar.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode, FC } from 'react';
 import { ChatTheme } from '../theme';
 export interface AppBarProps {
     /**

package/dist/{CSVFileRenderer-CaWN5iTb.js → CSVFileRenderer-D2mDdCjs.js}

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
 import { AnimatePresence, motion } from "motion/react";
+import { a as SvgCopy } from "./index-B3dZT-5c.js";
 import { IconButton } from "reablocks";
-import * as React from "react";
-import { useContext, useState, useRef, useEffect } from "react";
-import { C as ChatContext, a as SvgCopy } from "./index-DRRvnZUj.js";
-const SvgDownload = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M 11 2 C 10.448 2 10 2.448 10 3 L 10 11 L 6.5 11 A 0.5 0.5 0 0 0 6 11.5 A 0.5 0.5 0 0 0 6.1464844 11.853516 A 0.5 0.5 0 0 0 6.1777344 11.882812 L 11.283203 16.697266 L 11.316406 16.728516 A 1 1 0 0 0 12 17 A 1 1 0 0 0 12.683594 16.728516 L 12.697266 16.716797 A 1 1 0 0 0 12.707031 16.705078 L 17.810547 11.892578 A 0.5 0.5 0 0 0 17.839844 11.865234 L 17.847656 11.859375 A 0.5 0.5 0 0 0 17.853516 11.853516 A 0.5 0.5 0 0 0 18 11.5 A 0.5 0.5 0 0 0 17.5 11 L 14 11 L 14 3 C 14 2.448 13.552 2 13 2 L 12 2 L 11 2 z M 3 20 A 1.0001 1.0001 0 1 0 3 22 L 21 22 A 1.0001 1.0001 0 1 0 21 20 L 3 20 z", fill: "currentColor" }));
 const sanitizeSVGCell = (cell) => {
   const trimmed = cell.trim();
   const escaped = trimmed.replace(/"/g, '""');
@@ -21,8 +20,8 @@ const parseCSV = (csvString) => {
     throw new Error("Failed to parse CSV file.");
   }
 };
+const SvgDownload = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-cloud-download", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }), /* @__PURE__ */ React.createElement("path", { d: "M12 12v9" }), /* @__PURE__ */ React.createElement("path", { d: "m8 17 4 4 4-4" }));
 const CSVFileRenderer = ({ name, url, fileIcon }) => {
-  const { theme } = useContext(ChatContext);
   const [isLoading, setIsLoading] = useState(true);
   const [csvData, setCsvData] = useState([]);
   const [error, setError] = useState(null);
@@ -98,24 +97,24 @@ const CSVFileRenderer = ({ name, url, fileIcon }) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: theme.messages.message.csvPreview.base, children: [
-    /* @__PURE__ */ jsxs("div", { className: theme.messages.message.csvPreview.header.base, children: [
-      /* @__PURE__ */ jsxs("div", { className: theme.messages.message.csvPreview.header.icon, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "csv-icon flex items-center", children: [
         fileIcon,
         name && /* @__PURE__ */ jsx("figcaption", { className: "ml-1", children: name })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: theme.messages.message.csvPreview.header.actions, children: [
-        /* @__PURE__ */ jsx(IconButton, { size: "medium", variant: "text", onClick: downloadCSV, children: /* @__PURE__ */ jsx(SvgDownload, {}) }),
-        /* @__PURE__ */ jsx(IconButton, { size: "medium", variant: "text", onClick: toggleModal, children: /* @__PURE__ */ jsx(SvgCopy, {}) })
+      /* @__PURE__ */ jsxs("div", { className: "csv-icon flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "text", onClick: downloadCSV, children: /* @__PURE__ */ jsx(SvgDownload, {}) }),
+        /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "text", onClick: toggleModal, children: /* @__PURE__ */ jsx(SvgCopy, {}) })
       ] })
     ] }),
     error && /* @__PURE__ */ jsx("div", { className: "error-message", children: error }),
     isLoading && !csvData && /* @__PURE__ */ jsx("div", { className: "text-text-secondary", children: "Loading..." }),
-    /* @__PURE__ */ jsx("div", { className: theme.messages.message.csvPreview.tableContainer, children: !error && csvData.length > 0 && renderTable(csvData, 6) }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: !error && csvData.length > 0 && renderTable(csvData, 6) }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: isModalOpen && /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: theme.messages.message.csvPreview.dialog.base,
+        className: "fixed inset-0 bg-black/70 flex justify-center items-center z-50",
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -124,7 +123,7 @@ const CSVFileRenderer = ({ name, url, fileIcon }) => {
           motion.div,
           {
             ref: modalRef,
-            className: theme.messages.message.csvPreview.dialog.container,
+            className: "bg-white dark:bg-gray-900 rounded-md w-11/12 h-5/6 overflow-auto",
             initial: { scale: 0.8 },
             animate: { scale: 1 },
             exit: { scale: 0.8 },
@@ -139,4 +138,4 @@ const CSVFileRenderer = ({ name, url, fileIcon }) => {
 export {
   CSVFileRenderer as default
 };
-//# sourceMappingURL=CSVFileRenderer-CaWN5iTb.js.map
+//# sourceMappingURL=CSVFileRenderer-D2mDdCjs.js.map

package/dist/CSVFileRenderer-D2mDdCjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSVFileRenderer-D2mDdCjs.js","sources":["../src/utils/sanitize.ts","../src/utils/parseCSV.ts","../src/assets/download.svg?react","../src/SessionMessages/SessionMessage/MessageFile/renderers/CSVFileRenderer.tsx"],"sourcesContent":["\n/**\n * Sanitizes cell content to prevent CSV injection and other potential vulnerabilities.\n * Based on the documentation of OWASP for CSV Injection\n * https://owasp.org/www-community/attacks/CSV_Injection\n * @param cell The cell content to sanitize.\n * @returns The sanitized cell content.\n */\nexport const sanitizeSVGCell = (cell: string): string => {\n  const trimmed = cell.trim();\n  // Escape double quotes by doubling them\n  const escaped = trimmed.replace(/\"/g, '\"\"');\n  // Add single quote prefix only for potentially dangerous content\n  const prefix = /^[=+\\-@]/.test(trimmed) ? '\\'' : '';\n  // Only wrap in quotes if the content contains special characters\n  const needsQuotes = /[\",\\n\\r]/.test(escaped) || prefix;\n\n  return needsQuotes ? `\"${prefix}${escaped}\"` : escaped;\n};\n","import { sanitizeSVGCell } from './sanitize';\n\n/**\n * Parses a CSV string from a local file and returns an array of rows.\n * Sanitizes cell data to prevent injection attacks.\n * @param csvString The raw CSV string content to parse.\n * @returns The parsed CSV data as a 2D array of strings.\n */\nexport const parseCSV = (csvString: string): string[][] => {\n  try {\n    const rows = csvString.split('\\n');\n    return rows.map((row) => row.split(',').map((cell) => sanitizeSVGCell(cell)));\n  } catch (error) {\n    console.error('Error parsing CSV:', error);\n    throw new Error('Failed to parse CSV file.');\n  }\n};\n","import * as React from \"react\";\nconst SvgDownload = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\", className: \"lucide lucide-cloud-download\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 12v9\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"m8 17 4 4 4-4\" }));\nexport default SvgDownload;\n","import { FC, useEffect, useState, ReactElement, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { parseCSV } from '@/utils/parseCSV';\nimport DownloadIcon from '@/assets/download.svg?react';\nimport PlaceholderIcon from '@/assets/copy.svg?react';\nimport { IconButton } from 'reablocks';\n\ninterface CSVFileRendererProps {\n  /**\n   * Name of the file.\n   */\n  name?: string;\n\n  /**\n   * URL of the file.\n   */\n  url: string;\n\n  /**\n   * Icon to for file type.\n   */\n  fileIcon?: ReactElement;\n}\n\n/**\n * Renderer for CSV files that fetches and displays a snippet of the file data.\n */\nconst CSVFileRenderer: FC<CSVFileRendererProps> = ({ name, url, fileIcon }) => {\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [csvData, setCsvData] = useState<string[][]>([]);\n  const [error, setError] = useState<string | null>(null);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const modalRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const fetchCsvData = async () => {\n      try {\n        setIsLoading(true);\n        const response = await fetch(url);\n        const data = parseCSV(await response.text());\n        setCsvData(data);\n      } catch {\n        setError('Failed to load CSV file.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    fetchCsvData();\n  }, [url]);\n\n  const toggleModal = () => {\n    setIsModalOpen(prev => !prev);\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {\n      setIsModalOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    if (isModalOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [isModalOpen]);\n\n  const downloadCSV = () => {\n    if (csvData.length === 0) return;\n\n    const csvContent = csvData.map(row => row.join(',')).join('\\n');\n    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    link.href = url;\n    link.setAttribute('download', `${name || 'data'}`);\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n  };\n\n  const renderTable = (data: string[][], maxRows?: number) => (\n    <motion.table\n      layout\n      className=\"w-full\"\n      transition={{ type: 'spring', stiffness: 100, damping: 20 }}\n    >\n      <thead className=\"sticky top-0 bg-gray-200 dark:bg-gray-800 z-10\">\n        <tr>\n          <th className=\"py-4 px-6\">#</th>\n          {data[0].map((header, index) => (\n            <th key={`header-${index}`} className=\"py-4 px-6\">\n              {header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {data.slice(1, maxRows).map((row, rowIndex) => (\n          <tr\n            key={`row-${rowIndex}`}\n            className=\"border-b border-panel-accent light:border-gray-700 hover:bg-panel-accent hover:light:bg-gray-700/40 transition-colors text-base\"\n          >\n            <td className=\"py-4 px-6\">{rowIndex + 1}</td>\n            {row.map((cell, cellIndex) => (\n              <td key={`cell-${rowIndex}-${cellIndex}`} className=\"py-4 px-6\">\n                {cell}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </motion.table>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"flex justify-between items-center gap-4\">\n        <div className=\"csv-icon flex items-center\">\n          {fileIcon}\n          {name && <figcaption className=\"ml-1\">{name}</figcaption>}\n        </div>\n        <div className=\"csv-icon flex items-center gap-6\">\n          <IconButton size=\"small\" variant=\"text\" onClick={downloadCSV}>\n            <DownloadIcon />\n          </IconButton>\n          <IconButton size=\"small\" variant=\"text\" onClick={toggleModal}>\n            <PlaceholderIcon />\n          </IconButton>\n        </div>\n      </div>\n\n      {error && <div className=\"error-message\">{error}</div>}\n\n      {isLoading && !csvData && (\n        <div className=\"text-text-secondary\">Loading...</div>\n      )}\n\n      <div className=\"flex justify-between\">\n        {!error && csvData.length > 0 && renderTable(csvData, 6)}\n      </div>\n\n      <AnimatePresence>\n        {isModalOpen && (\n          <motion.div\n            className=\"fixed inset-0 bg-black/70 flex justify-center items-center z-50\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n          >\n            <motion.div\n              ref={modalRef}\n              className=\"bg-white dark:bg-gray-900 rounded-md w-11/12 h-5/6 overflow-auto\"\n              initial={{ scale: 0.8 }}\n              animate={{ scale: 1 }}\n              exit={{ scale: 0.8 }}\n              transition={{ duration: 0.3 }}\n            >\n              {!error && csvData.length > 0 && renderTable(csvData)}\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default CSVFileRenderer;\n"],"names":["url","DownloadIcon","PlaceholderIcon"],"mappings":"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"}

package/dist/Chat.d.ts

@@ -1,8 +1,9 @@
 import { CSSProperties, FC, PropsWithChildren } from 'react';
-import { Plugin } from 'unified';
-import { ChatViewType } from './ChatContext';
-import { ChatTheme } from './theme';
+import { Components } from 'react-markdown';
 import { Session } from './types';
+import { ChatTheme } from './theme';
+import { ChatViewType } from './ChatContext';
+import { Plugin } from 'unified';
 export interface ChatProps extends PropsWithChildren {
     /**
      * The style to apply to the root element.
@@ -36,6 +37,11 @@ export interface ChatProps extends PropsWithChildren {
      * Remark plugins to apply to the request/response.
      */
     remarkPlugins?: Plugin[];
+    /**
+     * Custom markdown components to override default rendering.
+     * Use this to add support for custom elements like charts.
+     */
+    markdownComponents?: Components;
     /**
      * Whether to display a loading state.
      */

package/dist/ChatBubble/ChatBubble.d.ts

@@ -24,4 +24,4 @@ export interface ChatBubbleProps {
      */
     className?: string;
 }
-export declare const ChatBubble: import('react').MemoExoticComponent<({ children, bubbleContent, position, modifiers, className }: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChatBubble: import('react').NamedExoticComponent<ChatBubbleProps>;

package/dist/ChatContext.d.ts

@@ -1,6 +1,7 @@
-import { Plugin } from 'unified';
-import { ChatTheme } from './theme';
+import { Components } from 'react-markdown';
 import { Session } from './types';
+import { ChatTheme } from './theme';
+import { Plugin } from 'unified';
 export type ChatViewType = 'chat' | 'companion' | 'console';
 export interface ChatContextProps {
     sessions: Session[];
@@ -12,6 +13,7 @@ export interface ChatContextProps {
     viewType?: ChatViewType;
     activeSession?: Session | null;
     remarkPlugins?: Plugin[];
+    markdownComponents?: Components;
     selectSession?: (sessionId: string) => void;
     deleteSession?: (sessionId: string) => void;
     createSession?: () => void;

package/dist/ChatInput/ChatInput.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
-interface ChatInputProps {
+import { SuggestionConfig, MentionItem, SlashCommandItem } from './types';
+export interface ChatInputProps {
     /**
      * Default value for the input field.
      */
@@ -25,17 +26,27 @@ interface ChatInputProps {
      */
     attachIcon?: ReactElement;
     /**
-     * Message to be displayed in the input field.
+     * Configuration for mentions (@user).
+     * Provide items or an onSearch function to enable mentions.
      */
-    message?: string;
+    mentions?: SuggestionConfig<MentionItem>;
     /**
-     * Class name to apply to the container.
+     * Configuration for commands (/command).
+     * Provide items or an onSearch function to enable commands.
      */
-    className?: string;
+    commands?: SuggestionConfig<SlashCommandItem>;
     /**
-     * Callback function to handle message change.
+     * Minimum height for the input (default: 24px)
      */
-    onMessageChange?: (message: string) => void;
+    minHeight?: number;
+    /**
+     * Maximum height for the input (default: 200px)
+     */
+    maxHeight?: number;
+    /**
+     * Whether to auto-focus the input on mount (default: true)
+     */
+    autoFocus?: boolean;
 }
 export interface ChatInputRef {
     /**
@@ -43,17 +54,16 @@ export interface ChatInputRef {
      */
     focus: () => void;
     /**
-     * Send the message.
+     * Get the current input value.
      */
-    send: () => void;
+    getValue: () => string;
     /**
-     * Set the input value programmatically.
+     * Set the input value.
      */
     setValue: (value: string) => void;
     /**
-     * Get the input value programmatically.
+     * Insert text at the current cursor position.
      */
-    getValue: () => string;
+    insertText: (text: string) => void;
 }
 export declare const ChatInput: import('react').ForwardRefExoticComponent<ChatInputProps & import('react').RefAttributes<ChatInputRef>>;
-export {};

package/dist/ChatInput/FileInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, ReactNode } from 'react';
+import { FC, ReactNode, ChangeEvent } from 'react';
 interface FileInputProps {
     /**
      * Array of allowed file extensions.

package/dist/ChatInput/MentionList.d.ts

@@ -0,0 +1,32 @@
+import { SuggestionConfig, SuggestionItem } from './types';
+export interface MentionListRef {
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+}
+export interface MentionListProps {
+    /**
+     * List of suggestion items to display
+     */
+    items: SuggestionItem[];
+    /**
+     * Callback to execute the selected suggestion command
+     */
+    command: (item: {
+        id: string;
+        label: string;
+    }) => void;
+    /**
+     * The trigger character (e.g., '@' or '/')
+     */
+    triggerChar: string;
+    /**
+     * Configuration for the suggestion popup
+     */
+    config: SuggestionConfig;
+    /**
+     * Current search query text
+     */
+    query?: string;
+}
+export declare const MentionList: import('react').ForwardRefExoticComponent<MentionListProps & import('react').RefAttributes<MentionListRef>>;

package/dist/ChatInput/RichTextInput.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { SuggestionConfig } from './types';
+export interface RichTextInputRef {
+    focus: () => void;
+    getValue: () => string;
+    setValue: (value: string) => void;
+    insertText: (text: string) => void;
+}
+export interface RichTextInputProps {
+    /**
+     * Current value of the input
+     */
+    value?: string;
+    /**
+     * Placeholder text when empty
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to auto-focus on mount (default: true)
+     */
+    autoFocus?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Minimum height in pixels (default: 24)
+     */
+    minHeight?: number;
+    /**
+     * Maximum height in pixels (default: 200)
+     */
+    maxHeight?: number;
+    /**
+     * Configuration for @ mentions
+     */
+    mentions?: SuggestionConfig;
+    /**
+     * Configuration for / slash commands
+     */
+    commands?: SuggestionConfig;
+    /**
+     * Callback when user submits (presses Enter)
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * Callback when input value changes
+     */
+    onChange?: (value: string) => void;
+}
+export declare const RichTextInput: React.ForwardRefExoticComponent<RichTextInputProps & React.RefAttributes<RichTextInputRef>>;

package/dist/ChatInput/index.d.ts

@@ -1,2 +1,5 @@
 export * from './ChatInput';
+export * from './RichTextInput';
+export * from './MentionList';
 export * from './FileInput';
+export * from './types';

package/dist/ChatInput/types.d.ts

@@ -0,0 +1,104 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Base interface for all suggestion items (mentions, commands, etc.)
+ */
+export interface SuggestionItem {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Display name/label for the item
+     */
+    label: string;
+    /**
+     * Optional description for additional context
+     */
+    description?: string;
+    /**
+     * Optional icon to display next to the item
+     */
+    icon?: ReactElement;
+    /**
+     * Optional metadata for custom use cases
+     */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Configuration for a mention (@) item
+ */
+export interface MentionItem extends SuggestionItem {
+    /**
+     * The value to insert when mention is selected
+     * Defaults to @{label} if not specified
+     */
+    value?: string;
+}
+/**
+ * Configuration for a slash command (/) item
+ */
+export interface SlashCommandItem extends SuggestionItem {
+    /**
+     * Optional shortcut hint to display
+     */
+    shortcut?: string;
+    /**
+     * Whether this command inserts text or triggers an action
+     */
+    type?: 'insert' | 'action';
+    /**
+     * The value to insert when command is selected (for 'insert' type)
+     */
+    value?: string;
+}
+/**
+ * Configuration for a suggestion trigger (mentions, commands, or custom)
+ */
+export interface SuggestionConfig<T extends SuggestionItem = SuggestionItem> {
+    /**
+     * The character that triggers this suggestion (e.g., '@', '/', '#')
+     */
+    trigger?: string;
+    /**
+     * Static list of available items for this trigger
+     */
+    items?: T[];
+    /**
+     * Async function to fetch items dynamically based on query
+     */
+    onSearch?: (query: string) => Promise<T[]> | T[];
+    /**
+     * Callback when an item is selected
+     */
+    onSelect?: (item: T, insertText: (text: string) => void) => void;
+    /**
+     * Maximum items to show in the popup (default: 10)
+     */
+    maxResults?: number;
+    /**
+     * Custom render function for items
+     */
+    renderItem?: (item: T, isHighlighted: boolean) => ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: (query: string) => ReactNode;
+}
+/**
+ * Configuration for mentions
+ * @deprecated Use SuggestionConfig directly with trigger: '@'
+ */
+export type MentionPluginConfig = SuggestionConfig<MentionItem>;
+/**
+ * Configuration for slash commands
+ * @deprecated Use SuggestionConfig directly with trigger: '/'
+ */
+export type SlashCommandPluginConfig = SuggestionConfig<SlashCommandItem>;
+/**
+ * @deprecated Use SuggestionItem instead
+ */
+export type InputPluginItem = SuggestionItem;
+/**
+ * @deprecated Use SuggestionConfig instead
+ */
+export type InputTrigger<T extends SuggestionItem = SuggestionItem> = SuggestionConfig<T>;

package/dist/ChatSuggestions/ChatSuggestion.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Suggestion } from '../types';
+export interface ChatSuggestionProps extends Suggestion {
+    /**
+     * Callback when the suggestion is clicked.
+     */
+    onClick?: (suggestion: string) => void;
+}
+export declare const ChatSuggestion: FC<ChatSuggestionProps>;

package/dist/ChatSuggestions/ChatSuggestions.d.ts

@@ -0,0 +1,22 @@
+import { FC, ReactElement } from 'react';
+import { Suggestion } from '../types';
+export interface ChatSuggestionsProps {
+    /**
+     * Array of suggestions to display.
+     */
+    suggestions: Suggestion[];
+    /**
+     * Custom class name to apply to the container.
+     */
+    className?: string;
+    /**
+     * Callback when a suggestion is clicked.
+     */
+    onSuggestionClick?: (suggestion: string) => void;
+    /**
+     * Custom render function for each suggestion item.
+     * Receives the suggestion data and onClick handler.
+     */
+    children?: ReactElement;
+}
+export declare const ChatSuggestions: FC<ChatSuggestionsProps>;

package/dist/ChatSuggestions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatSuggestions';
+export * from './ChatSuggestion';

package/dist/{DefaultFileRenderer-C30msYzW.js → DefaultFileRenderer-BLV8PtJk.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { S as SvgFile } from "./index-B3dZT-5c.js";
 import { cn, Ellipsis } from "reablocks";
-import { S as SvgFile } from "./index-DRRvnZUj.js";
 const DefaultFileRenderer = ({
   name,
   limit = 100,
@@ -12,4 +12,4 @@ const DefaultFileRenderer = ({
 export {
   DefaultFileRenderer as default
 };
-//# sourceMappingURL=DefaultFileRenderer-C30msYzW.js.map
+//# sourceMappingURL=DefaultFileRenderer-BLV8PtJk.js.map

package/dist/DefaultFileRenderer-BLV8PtJk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultFileRenderer-BLV8PtJk.js","sources":["../src/SessionMessages/SessionMessage/MessageFile/renderers/DefaultFileRenderer.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport FileIcon from '@/assets/file.svg?react';\nimport { Ellipsis, cn } from 'reablocks';\n\ninterface DefaultFileRendererProps {\n  /**\n   * Limit for the name.\n   */\n  limit?: number;\n\n  /**\n   * Name of the file.\n   */\n  name?: string;\n\n  /**\n   * URL of the file.\n   */\n  url: string;\n\n  /**\n   * Icon to for file type.\n   */\n  fileIcon?: ReactElement;\n}\n\n/**\n * Default renderer for unspecified file types.\n */\nconst DefaultFileRenderer: FC<DefaultFileRendererProps> = ({\n  name,\n  limit = 100,\n  fileIcon = <FileIcon />,\n}) => (\n  <figure className=\"flex items-center gap-2\">\n    {fileIcon}\n    {name && (\n      <figcaption className={cn('file-name-class')}>\n        <Ellipsis value={name} limit={limit} />\n      </figcaption>\n    )}\n  </figure>\n);\n\nexport default DefaultFileRenderer;\n"],"names":["FileIcon"],"mappings":";;;AA6BA,MAAM,sBAAoD,CAAC;AAAA,EACzD;AAAA,EACA,QAAQ;AAAA,EACR,+BAAYA,SAAA,CAAA,CAAS;AACvB,MACE,qBAAC,UAAA,EAAO,WAAU,2BACf,UAAA;AAAA,EAAA;AAAA,EACA,QACC,oBAAC,cAAA,EAAW,WAAW,GAAG,iBAAiB,GACzC,UAAA,oBAAC,UAAA,EAAS,OAAO,MAAM,MAAA,CAAc,EAAA,CACvC;AAAA,EAAA,CAEJ;"}

package/dist/ImageFileRenderer-C8tVW3I8.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageFileRenderer-C8tVW3I8.js","sources":["../src/SessionMessages/SessionMessage/MessageFile/renderers/ImageFileRenderer.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ninterface ImageFileRendererProps {\n  /**\n   * Name of the file.\n   */\n  name?: string;\n\n  /**\n   * URL of the file.\n   */\n  url: string;\n}\n\n/**\n * Renderer for image files.\n */\nconst ImageFileRenderer: FC<ImageFileRendererProps> = ({ url }) => (\n  <img src={url} alt=\"Image\" className=\"size-10\" />\n);\n\nexport default ImageFileRenderer;\n"],"names":[],"mappings":";AAiBA,MAAM,oBAAgD,CAAC,EAAE,IAAA,MACvD,oBAAC,OAAA,EAAI,KAAK,KAAK,KAAI,SAAQ,WAAU,UAAA,CAAU;"}
+{"version":3,"file":"ImageFileRenderer-C8tVW3I8.js","sources":["../src/SessionMessages/SessionMessage/MessageFile/renderers/ImageFileRenderer.tsx"],"sourcesContent":["import { FC } from 'react';\n\ninterface ImageFileRendererProps {\n  /**\n   * Name of the file.\n   */\n  name?: string;\n\n  /**\n   * URL of the file.\n   */\n  url: string;\n}\n\n/**\n * Renderer for image files.\n */\nconst ImageFileRenderer: FC<ImageFileRendererProps> = ({ url }) => (\n  <img src={url} alt=\"Image\" className=\"size-10\" />\n);\n\nexport default ImageFileRenderer;\n"],"names":[],"mappings":";AAiBA,MAAM,oBAAgD,CAAC,EAAE,IAAA,MACvD,oBAAC,OAAA,EAAI,KAAK,KAAK,KAAI,SAAQ,WAAU,UAAA,CAAU;"}

package/dist/Markdown/Markdown.d.ts

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
+import { Components } from 'react-markdown';
 import { Plugin } from 'unified';
-import { ChatTheme } from '../theme';
 interface MarkdownWrapperProps extends PropsWithChildren {
     /**
      * Remark plugins to apply to the markdown content.
@@ -11,9 +11,10 @@ interface MarkdownWrapperProps extends PropsWithChildren {
      */
     rehypePlugins?: Plugin[];
     /**
-     * Theme to apply to the markdown content.
+     * Custom components to override default markdown rendering.
+     * These will be merged with the default components.
      */
-    theme: ChatTheme;
+    customComponents?: Components;
 }
 export declare const Markdown: FC<MarkdownWrapperProps>;
 export {};

package/dist/Markdown/Table.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, default as React } from 'react';
+import { default as React, FC, PropsWithChildren } from 'react';
 export declare const TableComponent: FC<PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>>;
 export declare const TableHeaderCell: FC<PropsWithChildren<React.HTMLAttributes<HTMLTableHeaderCellElement>>>;
 export declare const TableDataCell: FC<PropsWithChildren<React.HTMLAttributes<HTMLTableDataCellElement>>>;

package/dist/Markdown/charts/ChartError.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+export interface ChartErrorProps {
+    /**
+     * The visual style variant of the error display.
+     * Defaults to 'error'.
+     */
+    variant?: 'error' | 'warning';
+    /**
+     * The heading text displayed at the top of the error.
+     */
+    title?: string;
+    /**
+     * The descriptive message explaining the error or warning.
+     */
+    message?: string;
+    /**
+     * The raw code or data that caused the error, displayed in a code block.
+     */
+    code?: string;
+}
+export declare const ChartError: FC<ChartErrorProps>;

package/dist/Markdown/charts/ChartPre.d.ts

@@ -0,0 +1,6 @@
+import { default as React, FC } from 'react';
+export interface ChartPreProps {
+    children?: React.ReactNode;
+    [key: string]: unknown;
+}
+export declare const ChartPre: FC<ChartPreProps>;

package/dist/Markdown/charts/ChartRenderer.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ChartConfig } from '../plugins/remarkChart';
+export interface ChartRendererProps {
+    /**
+     * The chart configuration.
+     */
+    config: ChartConfig;
+    /**
+     * The class name to apply to the chart container.
+     */
+    className?: string;
+}
+export declare const ChartRenderer: FC<ChartRendererProps>;

package/dist/Markdown/charts/chartHelpers.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { ChartConfig } from '../plugins/remarkChart';
+/**
+ * Validates that chart data is an array of objects with the required structure.
+ * Each item must have a `key` (convertible to string) and `data` (number) property.
+ *
+ * @param data - The unknown data array to validate
+ * @returns An array of validated chart data points with `key` and `data` properties,
+ *          or `null` if the data is invalid or empty
+ */
+export declare function validateChartData(data: unknown[]): {
+    key: string;
+    data: number;
+}[] | null;
+/**
+ * Parses a JSON string into a validated ChartConfig object.
+ * The JSON must contain a `type` and `data` property, where `data` is validated
+ * using `validateChartData`.
+ *
+ * @param value - The JSON string to parse
+ * @returns A validated ChartConfig object, or `null` if parsing fails or the config is invalid
+ */
+export declare function parseChartConfig(value: string): ChartConfig | null;
+/**
+ * Checks if the given className indicates a chart code block.
+ * Used to identify markdown code blocks that should be rendered as charts.
+ *
+ * @param className - The className to check
+ * @returns `true` if the className is 'language-chart', `false` otherwise
+ */
+export declare function isChartClassName(className?: string): boolean;
+/**
+ * Recursively extracts text content from React children.
+ * Handles strings, numbers, arrays, and React elements by traversing
+ * their children props.
+ *
+ * @param children - The React children to extract text from
+ * @returns The concatenated text content as a string
+ */
+export declare function getChildText(children: React.ReactNode): string;

package/dist/Markdown/charts/chartHelpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Markdown/charts/index.d.ts

@@ -0,0 +1,7 @@
+export * from './ChartRenderer';
+export * from './ChartPre';
+export * from './ChartError';
+export * from './chartHelpers';
+export declare const chartComponents: {
+    pre: import('react').FC<import('./ChartPre').ChartPreProps>;
+};