reachat 3.2.2 → 3.3.0

package/dist/stories/AgUi.stories.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode, useState } from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import {
   Chat,
   SessionsList,

package/dist/stories/Charts.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { subHours } from 'date-fns';
 import {
   Chat,

package/dist/stories/Chat.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import {
   Chat,
   SessionMessages,

package/dist/stories/ChatBubble.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ChatBubble } from 'reachat';
 import {
   Chat,

package/dist/stories/ChatSuggestions.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 import {
   Chat,
   SessionsList,

package/dist/stories/Companion.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import {
   Chat,
   SessionsList,
@@ -100,13 +100,10 @@ export const Empty = () => {
       <Chat
         sessions={[]}
         viewType="companion"
+        className="flex flex-col"
         onDeleteSession={() => alert('delete!')}
       >
-        <SessionsList>
-          <NewSessionButton />
-          <SessionGroups />
-        </SessionsList>
-        <div className="flex-1 h-full flex flex-col">
+        <div className="flex-1 min-h-0 flex flex-col">
           <SessionMessages
             newSessionContent={
               <div className="flex flex-col gap-2 items-center justify-center h-full">

package/dist/stories/ComponentCatalog.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { subHours } from 'date-fns';
 import { z } from 'zod';
 import {

package/dist/stories/ComponentError.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import {
   Chat,
   ComponentError,

package/dist/stories/Console.stories.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, FC, useContext, useEffect } from 'react';
 import AttachIcon from './assets/paperclip.svg?react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import {
   Chat,
   Session,

package/dist/stories/EnhancedInput.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-vite';
 import { useState, useCallback } from 'react';
 import {
   Chat,
@@ -252,7 +252,9 @@ export const WithAsyncSearch: StoryFn = () => {
             mentions={{
               items: sampleUsers,
               onSearch: searchUsers,
-              renderEmpty: query => <span>No users found matching "{query}"</span>
+              renderEmpty: query => (
+                <span>No users found matching &quot;{query}&quot;</span>
+              )
             }}
           />
         </SessionMessagePanel>

package/dist/stories/MessageStatus.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 import {
   MessageStatus,

package/dist/stories/Redact.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import {
   Chat,
   SessionMessages,

package/dist/stories/RichTextInput.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { RichTextInput, MentionItem, SlashCommandItem } from 'reachat';
 import { ChatContext } from 'reachat';

package/dist/stories/examples.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Session } from '@/types';
+import { Session } from 'reachat';
 import { subHours } from 'date-fns';
 
 /**

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "reachat",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Chat UI for Building LLMs",
   "scripts": {
     "build-storybook": "storybook build",
-    "build": "npm run build:js && npm run build:styles && npm run build:docs && npm run rewrite:stories",
+    "build": "npm run build:js && npm run build:styles && npm run rewrite:stories",
     "build:js": "vite build --mode library",
-    "build:docs": "node scripts/docs.js",
     "build:styles": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css",
-    "lint": "eslint --ext js,ts,tsx",
-    "lint:fix": "eslint --ext js,ts,tsx --fix src",
+    "lint": "eslint src stories",
+    "lint:fix": "eslint src stories --fix",
     "lint:prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
     "prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
     "rewrite:stories": "node scripts/stories.cjs",
@@ -18,7 +17,7 @@
     "test:coverage": "vitest run --coverage --passWithNoTests",
     "test:visual": "test-storybook --url http://localhost:9009",
     "test:visual:update": "test-storybook --url http://localhost:9009 --updateSnapshot",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "license": "Apache-2.0",
   "files": [
@@ -26,16 +25,15 @@
   ],
   "type": "module",
   "types": "dist/index.d.ts",
-  "main": "./dist/index.umd.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "source": "src/index.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "default": "./dist/index.js"
     },
-    "./docs.json": "./dist/docs.json",
     "./stories/*": "./dist/stories/*",
     "./index.css": "./dist/index.css"
   },
@@ -45,23 +43,23 @@
     "@floating-ui/dom": "^1.6.0",
     "@floating-ui/react": "^0.27.6",
     "@radix-ui/react-slot": "^1.1.0",
-    "@tiptap/core": "^3.15.3",
-    "@tiptap/extension-document": "^3.15.3",
-    "@tiptap/extension-hard-break": "^3.15.3",
-    "@tiptap/extension-mention": "^3.15.3",
-    "@tiptap/extension-paragraph": "^3.15.3",
-    "@tiptap/extension-placeholder": "^3.15.3",
-    "@tiptap/extension-text": "^3.15.3",
-    "@tiptap/extensions": "^3.20.4",
-    "@tiptap/pm": "^3.15.3",
-    "@tiptap/react": "^3.15.3",
-    "@tiptap/suggestion": "^3.20.4",
+    "@tiptap/core": "^3.25.0",
+    "@tiptap/extension-document": "^3.25.0",
+    "@tiptap/extension-hard-break": "^3.25.0",
+    "@tiptap/extension-mention": "^3.25.0",
+    "@tiptap/extension-paragraph": "^3.25.0",
+    "@tiptap/extension-placeholder": "^3.25.0",
+    "@tiptap/extension-text": "^3.25.0",
+    "@tiptap/extensions": "^3.25.0",
+    "@tiptap/pm": "^3.25.0",
+    "@tiptap/react": "^3.25.0",
+    "@tiptap/suggestion": "^3.25.0",
     "date-fns": "^4.1.0",
     "katex": "^0.16.11",
     "lodash": "^4.17.21",
     "mdast-util-find-and-replace": "^3.0.1",
     "motion": "^12.4.2",
-    "reablocks": "^10.0.0",
+    "reablocks": "^10.2.0",
     "react-markdown": "^10.0.0",
     "react-syntax-highlighter": "^16.1.0",
     "reakeys": "^2.0.3",
@@ -85,56 +83,53 @@
     }
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.0.0",
-    "@storybook/addon-themes": "^10.0.0",
-    "@storybook/react": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
+    "@eslint/js": "^9.39.4",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-themes": "^10.4.2",
+    "@storybook/react": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
     "@storybook/test-runner": "^0.24.0",
-    "@tailwindcss/cli": "^4.0.3",
-    "@tailwindcss/postcss": "^4.0.1",
-    "@tailwindcss/vite": "^4.0.6",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.0",
     "@types/lodash": "^4.17.21",
     "@types/mdast": "^4.0.4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/coverage-v8": "^3.2.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "^4.1.8",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-no-relative-import-paths": "^1.5.4",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.4.2",
     "fast-glob": "^3.3.2",
+    "globals": "^17.6.0",
     "husky": "^9.0.11",
     "jest-image-snapshot": "^6.4.0",
-    "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.2",
+    "jiti": "^2.7.0",
+    "jsdom": "^29.1.1",
+    "lint-staged": "^16.4.0",
     "postcss": "^8.4.39",
-    "postcss-nested": "^6.0.1",
-    "postcss-preset-env": "^9.5.2",
     "prettier": "^3.2.5",
     "react": "^19.0.0",
-    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.0.0",
     "reaviz": "^16.1.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
-    "storybook": "^10.0.0",
-    "tailwindcss": "^4.0.0",
-    "tw-colors": "^3.3.1",
-    "typescript": "^5.9.3",
+    "storybook": "^10.4.2",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3",
     "typescript-rewrite-paths": "^1.3.1",
-    "vite": "^7.0.0",
-    "vite-plugin-checker": "^0.12.0",
-    "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vite-plugin-dts": "^4.5.0",
-    "vite-plugin-static-copy": "^3.1.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^3.2.0"
+    "vite": "^8.0.16",
+    "vite-plugin-checker": "^0.14.1",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "vite-plugin-dts": "^5.0.2",
+    "vite-plugin-static-copy": "^4.1.0",
+    "vite-plugin-svgr": "^5.2.0",
+    "vitest": "^4.1.8"
   },
   "prettier": {
     "semi": true,
@@ -146,13 +141,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
   }
 }

package/dist/CSVFileRenderer-CQkyw8il.js

@@ -1,141 +0,0 @@
-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-BiStNXJ4.js";
-import { IconButton } from "reablocks";
-const sanitizeSVGCell = (cell) => {
-  const trimmed = cell.trim();
-  const escaped = trimmed.replace(/"/g, '""');
-  const prefix = /^[=+\-@]/.test(trimmed) ? "'" : "";
-  const needsQuotes = /[",\n\r]/.test(escaped) || prefix;
-  return needsQuotes ? `"${prefix}${escaped}"` : escaped;
-};
-const parseCSV = (csvString) => {
-  try {
-    const rows = csvString.split("\n");
-    return rows.map((row) => row.split(",").map((cell) => sanitizeSVGCell(cell)));
-  } catch (error) {
-    console.error("Error parsing CSV:", error);
-    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 [isLoading, setIsLoading] = useState(true);
-  const [csvData, setCsvData] = useState([]);
-  const [error, setError] = useState(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const modalRef = useRef(null);
-  useEffect(() => {
-    const fetchCsvData = async () => {
-      try {
-        setIsLoading(true);
-        const response = await fetch(url);
-        const data = parseCSV(await response.text());
-        setCsvData(data);
-      } catch {
-        setError("Failed to load CSV file.");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchCsvData();
-  }, [url]);
-  const toggleModal = () => {
-    setIsModalOpen((prev) => !prev);
-  };
-  const handleClickOutside = (event) => {
-    if (modalRef.current && !modalRef.current.contains(event.target)) {
-      setIsModalOpen(false);
-    }
-  };
-  useEffect(() => {
-    if (isModalOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isModalOpen]);
-  const downloadCSV = () => {
-    if (csvData.length === 0) return;
-    const csvContent = csvData.map((row) => row.join(",")).join("\n");
-    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    const url2 = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url2;
-    link.setAttribute("download", `${name || "data"}`);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-  const renderTable = (data, maxRows) => /* @__PURE__ */ jsxs(
-    motion.table,
-    {
-      layout: true,
-      className: "w-full",
-      transition: { type: "spring", stiffness: 100, damping: 20 },
-      children: [
-        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-gray-200 dark:bg-gray-800 z-10", children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { className: "py-4 px-6", children: "#" }),
-          data[0].map((header, index) => /* @__PURE__ */ jsx("th", { className: "py-4 px-6", children: header }, `header-${index}`))
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { children: data.slice(1, maxRows).map((row, rowIndex) => /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            className: "border-b border-panel-accent light:border-gray-700 hover:bg-panel-accent hover:light:bg-gray-700/40 transition-colors text-base",
-            children: [
-              /* @__PURE__ */ jsx("td", { className: "py-4 px-6", children: rowIndex + 1 }),
-              row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { className: "py-4 px-6", children: cell }, `cell-${rowIndex}-${cellIndex}`))
-            ]
-          },
-          `row-${rowIndex}`
-        )) })
-      ]
-    }
-  );
-  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: "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: "flex justify-between", children: !error && csvData.length > 0 && renderTable(csvData, 6) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: isModalOpen && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: "fixed inset-0 bg-black/70 flex justify-center items-center z-50",
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.3 },
-        children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            ref: modalRef,
-            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 },
-            transition: { duration: 0.3 },
-            children: !error && csvData.length > 0 && renderTable(csvData)
-          }
-        )
-      }
-    ) })
-  ] });
-};
-export {
-  CSVFileRenderer as default
-};
-//# sourceMappingURL=CSVFileRenderer-CQkyw8il.js.map

package/dist/CSVFileRenderer-CQkyw8il.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSVFileRenderer-CQkyw8il.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/DefaultFileRenderer-B0ZTdkz2.js

@@ -1,15 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { S as SvgFile } from "./index-BiStNXJ4.js";
-import { Ellipsis, cn } from "reablocks";
-const DefaultFileRenderer = ({
-  name,
-  limit = 100,
-  fileIcon = /* @__PURE__ */ jsx(SvgFile, {})
-}) => /* @__PURE__ */ jsxs("figure", { className: "flex items-center gap-2", children: [
-  fileIcon,
-  name && /* @__PURE__ */ jsx("figcaption", { className: cn("file-name-class"), children: /* @__PURE__ */ jsx(Ellipsis, { value: name, limit }) })
-] });
-export {
-  DefaultFileRenderer as default
-};
-//# sourceMappingURL=DefaultFileRenderer-B0ZTdkz2.js.map

package/dist/DefaultFileRenderer-B0ZTdkz2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultFileRenderer-B0ZTdkz2.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

@@ -1,6 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const ImageFileRenderer = ({ url }) => /* @__PURE__ */ jsx("img", { src: url, alt: "Image", className: "size-10" });
-export {
-  ImageFileRenderer as default
-};
-//# sourceMappingURL=ImageFileRenderer-C8tVW3I8.js.map

package/dist/ImageFileRenderer-C8tVW3I8.js.map

@@ -1 +0,0 @@
-{"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/PDFFileRenderer-DQdFS2l6.js

@@ -1,9 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-const PDFFileRenderer = ({ name, url, fileIcon }) => /* @__PURE__ */ jsxs("figure", { className: "csv-icon flex items-center gap-2", onClick: () => window.open(url, "_blank"), children: [
-  fileIcon,
-  name && /* @__PURE__ */ jsx("figcaption", { className: "file-name", children: name })
-] });
-export {
-  PDFFileRenderer as default
-};
-//# sourceMappingURL=PDFFileRenderer-DQdFS2l6.js.map

package/dist/PDFFileRenderer-DQdFS2l6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PDFFileRenderer-DQdFS2l6.js","sources":["../src/SessionMessages/SessionMessage/MessageFile/renderers/PDFFileRenderer.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\n\ninterface PDFFileRendererProps {\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 PDF files.\n */\nconst PDFFileRenderer: FC<PDFFileRendererProps> = ({ name, url, fileIcon }) => (\n  <figure className=\"csv-icon flex items-center gap-2\" onClick={() => window.open(url, '_blank')}>\n    {fileIcon}\n    {name && <figcaption className=\"file-name\">{name}</figcaption>}\n  </figure>\n);\n\nexport default PDFFileRenderer;\n"],"names":[],"mappings":";AAsBA,MAAM,kBAA4C,CAAC,EAAE,MAAM,KAAK,eAC9D,qBAAC,UAAA,EAAO,WAAU,oCAAmC,SAAS,MAAM,OAAO,KAAK,KAAK,QAAQ,GAC1F,UAAA;AAAA,EAAA;AAAA,EACA,QAAQ,oBAAC,cAAA,EAAW,WAAU,aAAa,UAAA,KAAA,CAAK;AAAA,EAAA,CACnD;"}