reachat 3.1.0 → 3.2.0

package/dist/{CSVFileRenderer-C2E4Xnkz.js → CSVFileRenderer-Darm68BZ.js}

@@ -2,7 +2,7 @@ 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-CZSBRZbI.js";
+import { a as SvgCopy } from "./index-iuJAmrEE.js";
 import { IconButton } from "reablocks";
 const sanitizeSVGCell = (cell) => {
   const trimmed = cell.trim();
@@ -138,4 +138,4 @@ const CSVFileRenderer = ({ name, url, fileIcon }) => {
 export {
   CSVFileRenderer as default
 };
-//# sourceMappingURL=CSVFileRenderer-C2E4Xnkz.js.map
+//# sourceMappingURL=CSVFileRenderer-Darm68BZ.js.map

package/dist/{CSVFileRenderer-C2E4Xnkz.js.map → CSVFileRenderer-Darm68BZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CSVFileRenderer-C2E4Xnkz.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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"}
+{"version":3,"file":"CSVFileRenderer-Darm68BZ.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":";;;;;;AAQO,MAAM,kBAAkB,CAAC,SAAyB;AACvD,QAAM,UAAU,KAAK,KAAA;AAErB,QAAM,UAAU,QAAQ,QAAQ,MAAM,IAAI;AAE1C,QAAM,SAAS,WAAW,KAAK,OAAO,IAAI,MAAO;AAEjD,QAAM,cAAc,WAAW,KAAK,OAAO,KAAK;AAEhD,SAAO,cAAc,IAAI,MAAM,GAAG,OAAO,MAAM;AACjD;ACVO,MAAM,WAAW,CAAC,cAAkC;AACzD,MAAI;AACF,UAAM,OAAO,UAAU,MAAM,IAAI;AACjC,WAAO,KAAK,IAAI,CAAC,QAAQ,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,SAAS,gBAAgB,IAAI,CAAC,CAAC;AAAA,EAC9E,SAAS,OAAO;AACd,YAAQ,MAAM,sBAAsB,KAAK;AACzC,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC7C;AACF;ACfA,MAAM,cAAc,CAAC,UAA0B,sBAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,QAAQ,gBAAgB,aAAa,GAAG,eAAe,SAAS,gBAAgB,SAAS,WAAW,gCAAgC,GAAG,MAAK,GAAoB,sBAAM,cAAc,QAAQ,EAAE,GAAG,2DAA0D,CAAE,GAAmB,sBAAM,cAAc,QAAQ,EAAE,GAAG,WAAU,CAAE,GAAmB,sBAAM,cAAc,QAAQ,EAAE,GAAG,gBAAe,CAAE,CAAC;AC0B/iB,MAAM,kBAA4C,CAAC,EAAE,MAAM,KAAK,eAAe;AAC7E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,IAAI;AACxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqB,CAAA,CAAE;AACrD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,WAAW,OAAuB,IAAI;AAE5C,YAAU,MAAM;AACd,UAAM,eAAe,YAAY;AAC/B,UAAI;AACF,qBAAa,IAAI;AACjB,cAAM,WAAW,MAAM,MAAM,GAAG;AAChC,cAAM,OAAO,SAAS,MAAM,SAAS,MAAM;AAC3C,mBAAW,IAAI;AAAA,MACjB,QAAQ;AACN,iBAAS,0BAA0B;AAAA,MACrC,UAAA;AACE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAEA,iBAAA;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,cAAc,MAAM;AACxB,mBAAe,CAAA,SAAQ,CAAC,IAAI;AAAA,EAC9B;AAEA,QAAM,qBAAqB,CAAC,UAAsB;AAChD,QAAI,SAAS,WAAW,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc,GAAG;AACxE,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,aAAa;AACf,eAAS,iBAAiB,aAAa,kBAAkB;AAAA,IAC3D,OAAO;AACL,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AACA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,cAAc,MAAM;AACxB,QAAI,QAAQ,WAAW,EAAG;AAE1B,UAAM,aAAa,QAAQ,IAAI,CAAA,QAAO,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,IAAI;AAC9D,UAAM,OAAO,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,MAAM,2BAA2B;AACvE,UAAMA,OAAM,IAAI,gBAAgB,IAAI;AACpC,UAAM,OAAO,SAAS,cAAc,GAAG;AACvC,SAAK,OAAOA;AACZ,SAAK,aAAa,YAAY,GAAG,QAAQ,MAAM,EAAE;AACjD,aAAS,KAAK,YAAY,IAAI;AAC9B,SAAK,MAAA;AACL,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC;AAEA,QAAM,cAAc,CAAC,MAAkB,YACrC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,QAAM;AAAA,MACN,WAAU;AAAA,MACV,YAAY,EAAE,MAAM,UAAU,WAAW,KAAK,SAAS,GAAA;AAAA,MAEvD,UAAA;AAAA,QAAA,oBAAC,SAAA,EAAM,WAAU,kDACf,UAAA,qBAAC,MAAA,EACC,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,WAAU,aAAY,UAAA,KAAC;AAAA,UAC1B,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,UACpB,oBAAC,MAAA,EAA2B,WAAU,aACnC,UAAA,OAAA,GADM,UAAU,KAAK,EAExB,CACD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,QACA,oBAAC,SAAA,EACE,UAAA,KAAK,MAAM,GAAG,OAAO,EAAE,IAAI,CAAC,KAAK,aAChC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,oBAAC,MAAA,EAAG,WAAU,aAAa,UAAA,WAAW,GAAE;AAAA,cACvC,IAAI,IAAI,CAAC,MAAM,cACd,oBAAC,MAAA,EAAyC,WAAU,aACjD,kBADM,QAAQ,QAAQ,IAAI,SAAS,EAEtC,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UARI,OAAO,QAAQ;AAAA,QAAA,CAUvB,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ,SACE,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,QAAA;AAAA,QACA,QAAQ,oBAAC,cAAA,EAAW,WAAU,QAAQ,UAAA,KAAA,CAAK;AAAA,MAAA,GAC9C;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,SAAQ,QAAO,SAAS,aAC/C,UAAA,oBAACC,aAAA,CAAA,CAAa,EAAA,CAChB;AAAA,QACA,oBAAC,YAAA,EAAW,MAAK,SAAQ,SAAQ,QAAO,SAAS,aAC/C,UAAA,oBAACC,SAAA,CAAA,CAAgB,EAAA,CACnB;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEC,SAAS,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAM;AAAA,IAE/C,aAAa,CAAC,+BACZ,OAAA,EAAI,WAAU,uBAAsB,UAAA,cAAU;AAAA,IAGjD,oBAAC,OAAA,EAAI,WAAU,wBACZ,UAAA,CAAC,SAAS,QAAQ,SAAS,KAAK,YAAY,SAAS,CAAC,EAAA,CACzD;AAAA,IAEA,oBAAC,mBACE,UAAA,eACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,MAAM,EAAE,SAAS,EAAA;AAAA,QACjB,YAAY,EAAE,UAAU,IAAA;AAAA,QAExB,UAAA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,KAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,EAAE,OAAO,IAAA;AAAA,YAClB,SAAS,EAAE,OAAO,EAAA;AAAA,YAClB,MAAM,EAAE,OAAO,IAAA;AAAA,YACf,YAAY,EAAE,UAAU,IAAA;AAAA,YAEvB,WAAC,SAAS,QAAQ,SAAS,KAAK,YAAY,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACtD;AAAA,IAAA,EACF,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/ChatContext.d.ts

@@ -19,6 +19,6 @@ export interface ChatContextProps {
     createSession?: () => void;
     sendMessage?: (message: string) => void;
     stopMessage?: () => void;
-    fileUpload?: (file: File) => void;
+    fileUpload?: (file: File | File[]) => void;
 }
 export declare const ChatContext: import('react').Context<ChatContextProps>;

package/dist/ChatInput/ChatInput.d.ts

@@ -9,6 +9,10 @@ export interface ChatInputProps {
      * Allowed file types for upload.
      */
     allowedFiles?: string[];
+    /**
+     * Allow multiple file uploads.
+     */
+    allowMultipleFiles?: boolean;
     /**
      * Placeholder text for the input field.
      */

package/dist/ChatInput/FileInput.d.ts

@@ -4,6 +4,10 @@ interface FileInputProps {
      * Array of allowed file extensions.
      */
     allowedFiles: string[];
+    /**
+     * Allow multiple file uploads.
+     */
+    multiple: boolean;
     /**
      * Indicates whether a file upload is in progress.
      */

package/dist/{DefaultFileRenderer-Day12qYs.js → DefaultFileRenderer-BrFdb4JQ.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { S as SvgFile } from "./index-CZSBRZbI.js";
+import { S as SvgFile } from "./index-iuJAmrEE.js";
 import { Ellipsis, cn } from "reablocks";
 const DefaultFileRenderer = ({
   name,
@@ -12,4 +12,4 @@ const DefaultFileRenderer = ({
 export {
   DefaultFileRenderer as default
 };
-//# sourceMappingURL=DefaultFileRenderer-Day12qYs.js.map
+//# sourceMappingURL=DefaultFileRenderer-BrFdb4JQ.js.map

package/dist/{DefaultFileRenderer-Day12qYs.js.map → DefaultFileRenderer-BrFdb4JQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DefaultFileRenderer-Day12qYs.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;"}
+{"version":3,"file":"DefaultFileRenderer-BrFdb4JQ.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/Markdown/CodeHighlighter.d.ts

@@ -4,6 +4,10 @@ export interface CodeHighlighterProps extends PropsWithChildren {
      * The class name to apply to the code block.
      */
     className?: string;
+    /**
+     * The class name to apply to the inline code.
+     */
+    inlineClassName?: string;
     /**
      * The language of the code block.
      */

package/dist/Markdown/Markdown.d.ts

@@ -1,6 +1,7 @@
 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.
@@ -10,6 +11,10 @@ interface MarkdownWrapperProps extends PropsWithChildren {
      * Rehype plugins to apply to the markdown content.
      */
     rehypePlugins?: Plugin[];
+    /**
+     * Theme to apply to the markdown content.
+     */
+    theme?: ChatTheme;
     /**
      * Custom components to override default markdown rendering.
      * These will be merged with the default components.

package/dist/SessionMessages/SessionMessage/SessionMessage.d.ts

@@ -1,6 +1,10 @@
 import { PropsWithChildren } from 'react';
 import { Conversation } from '../../types';
 interface SessionMessageProps extends PropsWithChildren {
+    /**
+     * Class name to apply to the root element.
+     */
+    className?: string;
     /**
      * Conversation to render.
      */

package/dist/SessionMessages/SessionMessages.d.ts

@@ -1,6 +1,10 @@
-import { default as React, ReactNode } from 'react';
+import { ReactNode, UIEventHandler, default as React } from 'react';
 import { Conversation } from '../types';
 interface SessionMessagesProps {
+    /**
+     * Class name to apply to the root element.
+     */
+    className?: string;
     /**
      * Content to display when there are no sessions selected or a new session is started.
      */
@@ -13,6 +17,10 @@ interface SessionMessagesProps {
      * Text to display for the show more button.
      */
     showMoreText?: string;
+    /**
+     * Whether to automatically scroll to the bottom of the content.
+     */
+    autoScroll?: boolean;
     /**
      * Whether to display the scroll to bottom button.
      */
@@ -21,6 +29,23 @@ interface SessionMessagesProps {
      * Render function for the session messages.
      */
     children?: (conversations: Conversation[]) => ReactNode;
+    /**
+     * Whether to show the load more button.
+     */
+    showLoadMoreButton?: boolean;
+    /**
+     * Whether to disable the load more button.
+     */
+    loadMoreButtonDisabled?: boolean;
+    /**
+     * Scroll event handler.
+     * @param e
+     */
+    onScroll?: UIEventHandler<HTMLDivElement>;
+    /**
+     * Load more event handler.
+     */
+    onLoadMore?: () => void;
 }
 export declare const SessionMessages: React.FC<SessionMessagesProps>;
 export {};

package/dist/docs.json

@@ -105,7 +105,7 @@
       },
       "theme": {
         "defaultValue": {
-          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-blue-400 underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-gray-500',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        toolbar:\n          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  },\n  component: {\n    base: 'my-4'\n  }\n}"
+          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        hr: 'my-4 border-t border-stroke-neutral-4',\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-buttons-colors-link-primary-text-resting underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-stroke-neutral-4',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        inlineCode: 'bg-gradient-neutral-200 p-1 rounded',\n        toolbar:\n          'text-xs flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gradient-neutral-500/50',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal',\n        h1: 'text-4xl font-bold mb-4 mt-6',\n        h2: 'text-3xl font-bold mb-3 mt-5',\n        h3: 'text-2xl font-bold mb-3 mt-4',\n        h4: 'text-xl font-bold mb-2 mt-3',\n        h5: 'text-lg font-bold mb-2 mt-2',\n        h6: 'text-base font-bold mb-2 mt-2'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  },\n  component: {\n    base: 'my-4'\n  }\n}"
         },
         "description": "Custom theme for the chat.",
         "name": "theme",
@@ -365,7 +365,7 @@
       },
       "theme": {
         "defaultValue": {
-          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-blue-400 underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-gray-500',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        toolbar:\n          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  },\n  component: {\n    base: 'my-4'\n  }\n}"
+          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        hr: 'my-4 border-t border-stroke-neutral-4',\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-buttons-colors-link-primary-text-resting underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-stroke-neutral-4',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        inlineCode: 'bg-gradient-neutral-200 p-1 rounded',\n        toolbar:\n          'text-xs flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gradient-neutral-500/50',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal',\n        h1: 'text-4xl font-bold mb-4 mt-6',\n        h2: 'text-3xl font-bold mb-3 mt-5',\n        h3: 'text-2xl font-bold mb-3 mt-4',\n        h4: 'text-xl font-bold mb-2 mt-3',\n        h5: 'text-lg font-bold mb-2 mt-2',\n        h6: 'text-base font-bold mb-2 mt-2'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  },\n  component: {\n    base: 'my-4'\n  }\n}"
         },
         "description": "Custom theme for the appbar",
         "name": "theme",
@@ -539,6 +539,27 @@
           "name": "string[]"
         }
       },
+      "allowMultipleFiles": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Allow multiple file uploads.",
+        "name": "allowMultipleFiles",
+        "parent": {
+          "fileName": "src/ChatInput/ChatInput.tsx",
+          "name": "ChatInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/ChatInput.tsx",
+            "name": "ChatInputProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "placeholder": {
         "defaultValue": {
           "value": "Type a message..."
@@ -750,6 +771,25 @@
           "name": "string[]"
         }
       },
+      "multiple": {
+        "defaultValue": null,
+        "description": "Allow multiple file uploads.",
+        "name": "multiple",
+        "parent": {
+          "fileName": "src/ChatInput/FileInput.tsx",
+          "name": "FileInputProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ChatInput/FileInput.tsx",
+            "name": "FileInputProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "isLoading": {
         "defaultValue": null,
         "description": "Indicates whether a file upload is in progress.",
@@ -1512,6 +1552,25 @@
           "name": "string"
         }
       },
+      "inlineClassName": {
+        "defaultValue": null,
+        "description": "The class name to apply to the inline code.",
+        "name": "inlineClassName",
+        "parent": {
+          "fileName": "src/Markdown/CodeHighlighter.tsx",
+          "name": "CodeHighlighterProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/Markdown/CodeHighlighter.tsx",
+            "name": "CodeHighlighterProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "language": {
         "defaultValue": null,
         "description": "The language of the code block.",
@@ -1660,6 +1719,25 @@
           "name": "Plugin[]"
         }
       },
+      "theme": {
+        "defaultValue": null,
+        "description": "Theme to apply to the markdown content.",
+        "name": "theme",
+        "parent": {
+          "fileName": "src/Markdown/Markdown.tsx",
+          "name": "MarkdownWrapperProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/Markdown/Markdown.tsx",
+            "name": "MarkdownWrapperProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ChatTheme"
+        }
+      },
       "customComponents": {
         "defaultValue": null,
         "description": "Custom components to override default markdown rendering.\nThese will be merged with the default components.",
@@ -1950,6 +2028,25 @@
     "displayName": "SessionMessages",
     "methods": [],
     "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "Class name to apply to the root element.",
+        "name": "className",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessages.tsx",
+          "name": "SessionMessagesProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessages.tsx",
+            "name": "SessionMessagesProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "newSessionContent": {
         "defaultValue": null,
         "description": "Content to display when there are no sessions selected or a new session is started.",
@@ -2011,10 +2108,29 @@
           "name": "string"
         }
       },
-      "showScrollBottomButton": {
+      "autoScroll": {
         "defaultValue": {
-          "value": "false"
+          "value": "true"
         },
+        "description": "Whether to automatically scroll to the bottom of the content.",
+        "name": "autoScroll",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessages.tsx",
+          "name": "SessionMessagesProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessages.tsx",
+            "name": "SessionMessagesProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "showScrollBottomButton": {
+        "defaultValue": null,
         "description": "Whether to display the scroll to bottom button.",
         "name": "showScrollBottomButton",
         "parent": {
@@ -2050,6 +2166,84 @@
         "type": {
           "name": "(conversations: Conversation[]) => ReactNode"
         }
+      },
+      "showLoadMoreButton": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Whether to show the load more button.",
+        "name": "showLoadMoreButton",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessages.tsx",
+          "name": "SessionMessagesProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessages.tsx",
+            "name": "SessionMessagesProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "loadMoreButtonDisabled": {
+        "defaultValue": null,
+        "description": "Whether to disable the load more button.",
+        "name": "loadMoreButtonDisabled",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessages.tsx",
+          "name": "SessionMessagesProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessages.tsx",
+            "name": "SessionMessagesProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onScroll": {
+        "defaultValue": null,
+        "description": "Scroll event handler.\n@param e",
+        "name": "onScroll",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessages.tsx",
+          "name": "SessionMessagesProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessages.tsx",
+            "name": "SessionMessagesProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "UIEventHandler<HTMLDivElement>"
+        }
+      },
+      "onLoadMore": {
+        "defaultValue": null,
+        "description": "Load more event handler.",
+        "name": "onLoadMore",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessages.tsx",
+          "name": "SessionMessagesProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessages.tsx",
+            "name": "SessionMessagesProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
       }
     }
   },
@@ -2856,6 +3050,25 @@
     "displayName": "SessionMessage",
     "methods": [],
     "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "Class name to apply to the root element.",
+        "name": "className",
+        "parent": {
+          "fileName": "src/SessionMessages/SessionMessage/SessionMessage.tsx",
+          "name": "SessionMessageProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionMessages/SessionMessage/SessionMessage.tsx",
+            "name": "SessionMessageProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "conversation": {
         "defaultValue": null,
         "description": "Conversation to render.",