reachat 2.1.0-alpha.4 → 2.1.0-alpha.6

package/dist/stories/Changelog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from '@storybook/addon-docs';
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
 import Readme from "../CHANGELOG.md?raw";
 
 <Meta title="Docs/Changelog" />

package/dist/stories/Chat.stories.tsx

@@ -36,7 +36,7 @@ export const Compact = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -84,7 +84,7 @@ export const FullScreen = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -132,7 +132,7 @@ export const Empty = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -167,7 +167,7 @@ export const Empty = () => {
               <div className="flex flex-col gap-2 items-center justify-center h-full">
                 <Placeholder className="h-[50%] block dark:hidden max-w-[100%]" />
                 <PlaceholderDark className="h-[50%] hidden dark:block max-w-[100%]" />
-                <p className="text-gray-500 max-w-[400px] text-center">
+                <p className="text-(--content-text-neutral-2) max-w-[400px] text-center">
                   Welcome to Reachat, a UI library for effortlessly building and
                   customizing chat experiences with Tailwind.
                 </p>
@@ -201,7 +201,7 @@ export const WithAppBar = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 800,
         height: 600,

package/dist/stories/ChatBubble.stories.tsx

@@ -81,7 +81,7 @@ const ChatSample: FC = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -158,7 +158,7 @@ export const WithChildren: Story = {
       <div className="fixed left-5 bottom-5">
         <ChatBubble {...args}>
           <div
-            className="dark:bg-gray-950 bg-white"
+            className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
             style={{
               width: 350,
               height: 500,
@@ -219,7 +219,7 @@ export const WithChildrenPortal: Story = {
           <p className="text-gray-600">The ChatBubble will portal here!</p>
           <ChatBubble {...args} className="absolute left-5 bottom-5">
             <div
-              className="dark:bg-gray-950 bg-white"
+              className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
               style={{
                 width: 350,
                 height: 500,

package/dist/stories/Companion.stories.tsx

@@ -41,7 +41,7 @@ export const Basic = () => {
   ]);
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -87,7 +87,7 @@ export const Basic = () => {
 export const Empty = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -133,7 +133,7 @@ export const WithAppBar = () => {
   ]);
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -242,7 +242,7 @@ export const TemplatesView = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -307,7 +307,7 @@ export const TemplatesViewWithTitle = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         width: 350,
         height: 500,
@@ -382,7 +382,7 @@ export const TemplatesViewWithAppBar = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white flex flex-col"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white) flex flex-col"
       style={{
         width: 350,
         height: 500,

package/dist/stories/Console.stories.tsx

@@ -55,7 +55,7 @@ export default {
 export const Basic = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -89,7 +89,7 @@ export const Basic = () => {
 export const Embeds = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -123,7 +123,7 @@ export const Embeds = () => {
 export const DefaultSession = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -159,7 +159,7 @@ export const DefaultSession = () => {
 export const Loading = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -199,7 +199,7 @@ export const FileUploads = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -257,7 +257,7 @@ export const FileUploads = () => {
 export const DefaultInputValue = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -293,7 +293,7 @@ export const DefaultInputValue = () => {
 export const UndeleteableSessions = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -367,7 +367,7 @@ export const SessionGrouping = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -423,7 +423,7 @@ export const HundredSessions = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -474,7 +474,7 @@ export const HundredConversations = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -531,7 +531,7 @@ export const LongSessionNames = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -648,7 +648,7 @@ export const MarkdownShowcase = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -718,7 +718,7 @@ export const CVEExample = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -754,7 +754,7 @@ export const CVEExample = () => {
 export const Empty = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -817,7 +817,7 @@ export const Empty = () => {
 export const ConversationSources = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -954,7 +954,7 @@ const CustomSessionListItem: FC<SessionListItemProps> = ({
 export const CustomComponents = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -1038,25 +1038,25 @@ export const ImageFiles = () => {
       id: '1',
       name: 'landscape.jpg',
       type: 'image/jpeg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Faustin.1ee6ee64.jpg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=1'
     },
     {
       id: '2',
       name: 'portrait.jpg',
       type: 'image/jpeg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fandrew.50c21037.jpeg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=2'
     },
     {
       id: '3',
       name: 'abstract.png',
       type: 'image/jpg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fkyle.52befaed.jpg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=3'
     },
     {
       id: '4',
       name: 'nature.jpg',
       type: 'image/jpeg',
-      url: 'https://www.goodcode.us/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsteph.8a52b5d2.jpg&w=640&q=75'
+      url: 'https://picsum.photos/200?random=4'
     }
   ];
 
@@ -1089,7 +1089,7 @@ export const ImageFiles = () => {
 
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         top: 0,
@@ -1124,7 +1124,7 @@ export const ImageFiles = () => {
 export const CSVPreview = () => {
   return (
     <div
-      className="dark:bg-gray-950 bg-white"
+      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
       style={{
         position: 'absolute',
         inset: 0,

package/dist/stories/Integration.stories.tsx

@@ -126,7 +126,7 @@ export const _OpenAI = () => {
         onChange={e => setApiKey(e.target.value)}
       />
       <div
-        className="dark:bg-gray-950 bg-white"
+        className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
         style={{
           position: 'absolute',
           top: 50,
@@ -273,7 +273,7 @@ export const VercelAI = () => {
         onChange={e => setApiKey(e.target.value)}
       />
       <div
-        className="dark:bg-gray-950 bg-white"
+        className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
         style={{
           position: 'absolute',
           top: 50,

package/dist/stories/Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs/Intro" />
 

package/dist/stories/assets/logo.svg

@@ -1,21 +1,40 @@
 <svg width="795" height="140" viewBox="0 0 795 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.3191 17.5C10.2662 17.5 3.73579 24.0304 3.73579 32.0833V102.083L30.2775 84.5833H82.4858C90.5387 84.5833 97.0691 78.0529 97.0691 70V17.5H18.3191Z" fill="url(#paint0_linear_182_647)"/>
-<path d="M137.902 61.2501V134.167L111.361 116.667H59.1525C51.0995 116.667 44.5691 110.136 44.5691 102.083V84.5834H82.4858C90.5387 84.5834 97.0691 78.053 97.0691 70.0001V46.6667H123.319C131.372 46.6667 137.902 53.1972 137.902 61.2501Z" fill="url(#paint1_linear_182_647)"/>
-<path d="M251.987 103.6H237.683L224.147 80.2719H214.067V103.6H200.819V36.3999H227.699C233.939 36.3999 239.219 38.6079 243.539 42.9279C247.859 47.2479 250.067 52.5279 250.067 58.6719C250.067 67.0239 244.883 74.7039 237.107 78.2559L251.987 103.6ZM227.699 48.7839H200.819V68.6559H227.699C232.691 68.6559 236.819 64.1439 236.819 58.6719C236.819 53.1999 232.691 48.7839 227.699 48.7839Z" fill="white"/>
-<path d="M290.508 75.8559V90.9279H332.076V103.6H290.508V36.3999H331.596V49.0719H290.508V63.3759H329.196V75.8559H290.508Z" fill="white"/>
-<path d="M430.765 103.6H416.365L412.333 91.5039H385.549L381.517 103.6H367.213L390.733 36.3999H407.149L430.765 103.6ZM398.989 51.6639L385.549 91.5039H412.333L398.989 51.6639Z" fill="white"/>
-<path d="M497.445 104.944C487.365 104.944 479.013 101.584 472.389 94.8639C465.765 88.1439 462.501 79.8879 462.501 69.9999C462.501 60.1119 465.765 51.7599 472.389 45.1359C479.013 38.4159 487.365 35.0559 497.445 35.0559C509.637 35.0559 520.581 41.1999 526.341 50.8959L514.917 57.5199C511.557 51.4719 505.125 47.9199 497.445 47.9199C490.917 47.9199 485.637 49.9359 481.605 54.0639C477.669 58.1919 475.653 63.4719 475.653 69.9999C475.653 76.4319 477.669 81.7119 481.605 85.8399C485.637 89.9679 490.917 91.9839 497.445 91.9839C505.125 91.9839 511.749 88.3359 514.917 82.4799L526.341 89.1039C520.581 98.7999 509.733 104.944 497.445 104.944Z" fill="white"/>
-<path d="M603.407 63.0879V36.3999H616.559V103.6H603.407V75.7599H578.447V103.6H565.199V36.3999H578.447V63.0879H603.407Z" fill="white"/>
-<path d="M717.363 103.6H702.963L698.931 91.5039H672.147L668.115 103.6H653.811L677.331 36.3999H693.747L717.363 103.6ZM685.587 51.6639L672.147 91.5039H698.931L685.587 51.6639Z" fill="white"/>
-<path d="M744.741 36.3999H794.181V49.0719H776.037V103.6H762.789V49.0719H744.741V36.3999Z" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear_182_647" x1="50.4025" y1="17.5" x2="50.4025" y2="102.083" gradientUnits="userSpaceOnUse">
-<stop stop-color="#105EFF"/>
-<stop offset="1" stop-color="#2E2E77"/>
-</linearGradient>
-<linearGradient id="paint1_linear_182_647" x1="141.706" y1="169.085" x2="61.445" y2="30.0709" gradientUnits="userSpaceOnUse">
-<stop stop-color="#105EFF"/>
-<stop offset="1" stop-color="#105EFF" stop-opacity="0.71"/>
-</linearGradient>
-</defs>
+  <path
+    d="M18.3191 17.5C10.2662 17.5 3.73579 24.0304 3.73579 32.0833V102.083L30.2775 84.5833H82.4858C90.5387 84.5833 97.0691 78.0529 97.0691 70V17.5H18.3191Z"
+    fill="url(#paint0_linear_182_647)" />
+  <path
+    d="M137.902 61.2501V134.167L111.361 116.667H59.1525C51.0995 116.667 44.5691 110.136 44.5691 102.083V84.5834H82.4858C90.5387 84.5834 97.0691 78.053 97.0691 70.0001V46.6667H123.319C131.372 46.6667 137.902 53.1972 137.902 61.2501Z"
+    fill="url(#paint1_linear_182_647)" />
+  <path
+    d="M251.987 103.6H237.683L224.147 80.2719H214.067V103.6H200.819V36.3999H227.699C233.939 36.3999 239.219 38.6079 243.539 42.9279C247.859 47.2479 250.067 52.5279 250.067 58.6719C250.067 67.0239 244.883 74.7039 237.107 78.2559L251.987 103.6ZM227.699 48.7839H200.819V68.6559H227.699C232.691 68.6559 236.819 64.1439 236.819 58.6719C236.819 53.1999 232.691 48.7839 227.699 48.7839Z"
+    fill="currentColor" />
+  <path
+    d="M290.508 75.8559V90.9279H332.076V103.6H290.508V36.3999H331.596V49.0719H290.508V63.3759H329.196V75.8559H290.508Z"
+    fill="currentColor" />
+  <path
+    d="M430.765 103.6H416.365L412.333 91.5039H385.549L381.517 103.6H367.213L390.733 36.3999H407.149L430.765 103.6ZM398.989 51.6639L385.549 91.5039H412.333L398.989 51.6639Z"
+    fill="currentColor" />
+  <path
+    d="M497.445 104.944C487.365 104.944 479.013 101.584 472.389 94.8639C465.765 88.1439 462.501 79.8879 462.501 69.9999C462.501 60.1119 465.765 51.7599 472.389 45.1359C479.013 38.4159 487.365 35.0559 497.445 35.0559C509.637 35.0559 520.581 41.1999 526.341 50.8959L514.917 57.5199C511.557 51.4719 505.125 47.9199 497.445 47.9199C490.917 47.9199 485.637 49.9359 481.605 54.0639C477.669 58.1919 475.653 63.4719 475.653 69.9999C475.653 76.4319 477.669 81.7119 481.605 85.8399C485.637 89.9679 490.917 91.9839 497.445 91.9839C505.125 91.9839 511.749 88.3359 514.917 82.4799L526.341 89.1039C520.581 98.7999 509.733 104.944 497.445 104.944Z"
+    fill="currentColor" />
+  <path
+    d="M603.407 63.0879V36.3999H616.559V103.6H603.407V75.7599H578.447V103.6H565.199V36.3999H578.447V63.0879H603.407Z"
+    fill="currentColor" />
+  <path
+    d="M717.363 103.6H702.963L698.931 91.5039H672.147L668.115 103.6H653.811L677.331 36.3999H693.747L717.363 103.6ZM685.587 51.6639L672.147 91.5039H698.931L685.587 51.6639Z"
+    fill="currentColor" />
+  <path d="M744.741 36.3999H794.181V49.0719H776.037V103.6H762.789V49.0719H744.741V36.3999Z"
+    fill="currentColor" />
+  <defs>
+    <linearGradient id="paint0_linear_182_647" x1="50.4025" y1="17.5" x2="50.4025" y2="102.083"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#105EFF" />
+      <stop offset="1" stop-color="#2E2E77" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_182_647" x1="141.706" y1="169.085" x2="61.445" y2="30.0709"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#105EFF" />
+      <stop offset="1" stop-color="#105EFF" stop-opacity="0.71" />
+    </linearGradient>
+  </defs>
 </svg>

package/dist/stories/assets/paperclip.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px">
+  <path
+    d="M25.3,56.007c-3.409,0-6.818-1.297-9.414-3.893c-2.595-2.596-3.893-6.005-3.893-9.415c0-3.409,1.298-6.819,3.893-9.414	l20.4-20.4c1.847-1.847,4.302-2.864,6.914-2.864c2.611,0,5.067,1.017,6.914,2.864c3.812,3.813,3.812,10.016,0,13.829l-20.4,20.4	c-2.438,2.439-6.385,2.441-8.828,0c-2.434-2.435-2.434-6.395,0-8.829l13.7-13.7c0.781-0.781,2.047-0.781,2.828,0	c0.781,0.781,0.781,2.047,0,2.828l-13.7,13.7c-0.874,0.875-0.874,2.297,0.001,3.172c0.847,0.846,2.324,0.846,3.171,0l20.4-20.4	c2.252-2.253,2.252-5.919,0-8.172c-1.092-1.091-2.543-1.692-4.086-1.692c-1.544,0-2.994,0.601-4.086,1.692l-20.4,20.4	c-1.815,1.816-2.723,4.201-2.723,6.586c0,2.385,0.908,4.77,2.723,6.586c1.816,1.815,4.201,2.723,6.586,2.723	c2.385,0,4.771-0.907,6.586-2.723l12.7-12.7c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828l-12.7,12.7	C32.119,54.709,28.71,56.007,25.3,56.007z" fill="currentColor" />
+</svg>

package/dist/stories/assets/search.svg

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path
+    d="M7.75 2C10.92 2 13.5 4.58 13.5 7.75C13.5 9.06476 13.0552 10.2773 12.3096 11.2471L15.7812 14.7188C16.0743 15.0118 16.0743 15.4873 15.7812 15.7803C15.6353 15.9263 15.443 16 15.251 16H15.25C15.058 16 14.8657 15.9273 14.7197 15.7803L11.248 12.3086C10.2781 13.0547 9.06525 13.5 7.75 13.5C4.58 13.5 2 10.92 2 7.75C2 4.58 4.58 2 7.75 2ZM7.75 3.5C5.407 3.5 3.5 5.407 3.5 7.75C3.5 10.093 5.407 12 7.75 12C10.093 12 12 10.093 12 7.75C12 5.407 10.093 3.5 7.75 3.5Z"
+    fill="currentColor" />
+</svg>

package/dist/stories/examples.ts

@@ -1,6 +1,7 @@
-import { Session } from '@/types';
 import { subHours } from 'date-fns';
 
+import type { Session } from '@/types';
+
 export const fakeSessions: Session[] = [
   {
     id: '1',
@@ -187,12 +188,11 @@ export const sessionWithDataDocs: Session[] = [
       {
         id: '1',
         question: 'Summarize the contents of the CSV.',
-        response: 'The CSV file contains a dataset with the following columns: Name, Age, Occupation, and City.',
+        response:
+          'The CSV file contains a dataset with the following columns: Name, Age, Occupation, and City.',
         createdAt: new Date(),
         updatedAt: new Date(),
-        files: [
-          { name: 'sample.csv', size: 1024000, type: 'text/csv' }
-        ]
+        files: [{ name: 'sample.csv', size: 1024000, type: 'text/csv' }]
       },
       {
         id: '2',
@@ -201,7 +201,7 @@ export const sessionWithDataDocs: Session[] = [
         createdAt: new Date(),
         updatedAt: new Date(),
         files: [
-          { name: 'document.pdf', size: 1024000, type: 'application/pdf' },
+          { name: 'document.pdf', size: 1024000, type: 'application/pdf' }
         ]
       }
     ]
@@ -218,11 +218,17 @@ export const sessionWithCSVFiles: Session[] = [
       {
         id: '1',
         question: 'Summarize the contents of the CSV.',
-        response: 'The CSV file contains a dataset with the following columns: Name, HEX, RGB.',
+        response:
+          'The CSV file contains a dataset with the following columns: Name, HEX, RGB.',
         createdAt: new Date(),
         updatedAt: new Date(),
         files: [
-          { name: 'sample.csv', size: 500, type: 'text/csv', url: 'https://gist.githubusercontent.com/RobVanGroenewoud/ba89ad7684df8cefe5c183adb498cc65/raw/f2eec6d2cb89f5d779e16b28ed0dab89d738ba96/sample.csv' }
+          {
+            name: 'sample.csv',
+            size: 500,
+            type: 'text/csv',
+            url: 'https://gist.githubusercontent.com/RobVanGroenewoud/ba89ad7684df8cefe5c183adb498cc65/raw/f2eec6d2cb89f5d779e16b28ed0dab89d738ba96/sample.csv'
+          }
         ]
       },
       {
@@ -232,7 +238,7 @@ export const sessionWithCSVFiles: Session[] = [
         createdAt: new Date(),
         updatedAt: new Date(),
         files: [
-          { name: 'document.pdf', size: 1024000, type: 'application/pdf' },
+          { name: 'document.pdf', size: 1024000, type: 'application/pdf' }
         ]
       }
     ]
@@ -243,25 +249,26 @@ export const chatTemplates = [
   {
     id: '1',
     title: 'Explore Components',
-    message: "Can you show me the main components available in Reachat?",
+    message: 'Can you show me the main components available in Reachat?',
     icon: 'SendPlane'
   },
   {
     id: '2',
     title: 'Customize Chat UI',
-    message: "How can I customize the appearance of my Reachat interface?",
+    message: 'How can I customize the appearance of my Reachat interface?',
     icon: 'SendPlane'
   },
   {
     id: '3',
     title: 'Manage Sessions',
-    message: "What are the best practices for managing chat sessions in Reachat?",
+    message:
+      'What are the best practices for managing chat sessions in Reachat?',
     icon: 'SendPlane'
   },
   {
     id: '4',
     title: 'Tailwind Setup',
-    message: "How do I properly set up Tailwind CSS with Reachat?",
+    message: 'How do I properly set up Tailwind CSS with Reachat?',
     icon: 'SendPlane'
   }
 ];

package/dist/theme.d.ts

@@ -64,6 +64,19 @@ export interface ChatTheme {
                 ol: string;
                 copy: string;
             };
+            csvPreview: {
+                base: string;
+                header: {
+                    base: string;
+                    icon: string;
+                    actions: string;
+                };
+                tableContainer: string;
+                dialog: {
+                    base: string;
+                    container: string;
+                };
+            };
             footer: {
                 base: string;
                 copy: string;