diff --git a/src/SessionMessages/SessionMessage/MessageFile.tsx b/src/SessionMessages/SessionMessage/MessageFile.tsx
deleted file mode 100644
index 3e533b7..0000000
--- a/src/SessionMessages/SessionMessage/MessageFile.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { FC, useContext, ReactElement } from 'react';
-import { ConversationFile } from '@/types';
-import { ChatContext } from '@/ChatContext';
-import { Ellipsis, cn } from 'reablocks';
-import FileIcon from '@/assets/file.svg?react';
-
-export interface MessageFileProps extends ConversationFile {
-  /**
-   * Icon to show for delete.
-   */
-  fileIcon?: ReactElement;
-
-  /**
-   * Limit for the name.
-   */
-  limit?: number;
-}
-
-export const MessageFile: FC<MessageFileProps> = ({
-  name,
-  type,
-  url,
-  limit = 100,
-  fileIcon = <FileIcon />
-}) => {
-  const { theme } = useContext(ChatContext);
-  const isImage = type?.startsWith('image/');
-
-  return (
-    <figure
-      className={cn(theme.messages.message.files.file.base)}
-      onClick={() => {
-        window.open(url, '_blank');
-      }}
-    >
-      {isImage ? (
-        <>
-          <img src={url} className="h-10 w-10" />
-        </>
-      ) : (
-        <>
-          {fileIcon}
-        </>
-      )}
-      {name && (
-        <figcaption>
-          {name && (
-            <span className={cn(theme.messages.message.files.file.name)}>
-              <Ellipsis value={name} limit={limit} />
-            </span>
-          )}
-        </figcaption>
-      )}
-    </figure>
-  );
-};
diff --git a/src/SessionMessages/SessionMessage/MessageFile/CSVFileRenderer.tsx b/src/SessionMessages/SessionMessage/MessageFile/CSVFileRenderer.tsx
new file mode 100644
index 0000000..b14658e
--- /dev/null
+++ b/src/SessionMessages/SessionMessage/MessageFile/CSVFileRenderer.tsx
@@ -0,0 +1,152 @@
+import { FC, useEffect, useState, ReactElement, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { parseCSV } from '@/utils/parseCSV';
+import DownloadIcon from '@/assets/download.svg?react';
+import PlaceholderIcon from '@/assets/copy.svg?react';
+
+interface CSVFileRendererProps {
+  name?: string;
+  url: string;
+  fileIcon?: ReactElement;
+}
+
+/**
+ * Renderer for CSV files that fetches and displays a snippet of the file data.
+ */
+const CSVFileRenderer: FC<CSVFileRendererProps> = ({ name, url, fileIcon }) => {
+  const [csvData, setCsvData] = useState<string[][]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchCsvData = async () => {
+      try {
+        const data = parseCSV();
+        setCsvData(data);
+      } catch {
+        setError('Failed to load CSV file.');
+      }
+    };
+
+    fetchCsvData();
+  }, [url]);
+
+  const toggleModal = () => {
+    setIsModalOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      setIsModalOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isModalOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isModalOpen]);
+
+  const downloadCSV = () => {
+    if (csvData.length === 0) return;
+
+    const csvContent = csvData.map((row) => row.join(',')).join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `${name || 'data'}`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const renderTable = (data: string[][], maxRows?: number) => (
+    <motion.table
+      layout
+      className="w-full"
+      transition={{ type: 'spring', stiffness: 100, damping: 20 }}
+    >
+      <thead className="sticky top-0 bg-gray-200 dark:bg-gray-800 z-10">
+        <tr>
+          <th className="py-4 px-6">#</th>
+          {data[0].map((header, index) => (
+            <th key={`header-${index}`} className="py-4 px-6">
+              {header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.slice(1, maxRows).map((row, rowIndex) => (
+          <tr
+            key={`row-${rowIndex}`}
+            className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-text-secondary"
+          >
+            <td className="py-4 px-6">{rowIndex + 1}</td>
+            {row.map((cell, cellIndex) => (
+              <td
+                key={`cell-${rowIndex}-${cellIndex}`}
+                className="py-4 px-6 dark:bg-vulcan light:bg-mystic"
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </motion.table>
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex justify-between items-center">
+        <div className="csv-icon flex items-center gap-2">
+          {fileIcon}
+          {name && <figcaption className="file-name">{name}</figcaption>}
+        </div>
+        <div className="csv-icon flex items-center gap-6">
+          <DownloadIcon onClick={downloadCSV} className="cursor-pointer" />
+          <PlaceholderIcon onClick={toggleModal} className="cursor-pointer" />
+        </div>
+      </div>
+
+      {error && <div className="error-message">{error}</div>}
+
+      <div className="flex justify-between">
+        {!error && csvData.length > 0 && renderTable(csvData, 6)}
+      </div>
+
+      <AnimatePresence>
+        {isModalOpen && (
+          <motion.div
+            className="fixed inset-0 bg-black/70 flex justify-center items-center z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <motion.div
+              ref={modalRef}
+              className="bg-white dark:bg-gray-900 rounded-md w-11/12 h-5/6 overflow-auto"
+              initial={{ scale: 0.8 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0.8 }}
+              transition={{ duration: 0.3 }}
+            >
+              {!error && csvData.length > 0 && renderTable(csvData)}
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default CSVFileRenderer;
diff --git a/src/SessionMessages/SessionMessage/MessageFile/DefaultFileRenderer.tsx b/src/SessionMessages/SessionMessage/MessageFile/DefaultFileRenderer.tsx
new file mode 100644
index 0000000..08cb952
--- /dev/null
+++ b/src/SessionMessages/SessionMessage/MessageFile/DefaultFileRenderer.tsx
@@ -0,0 +1,30 @@
+import { FC, ReactElement } from 'react';
+import FileIcon from '@/assets/file.svg?react';
+import { Ellipsis, cn } from 'reablocks';
+
+interface DefaultFileRendererProps {
+  name?: string;
+  url: string;
+  limit?: number;
+  fileIcon?: ReactElement;
+}
+
+/**
+ * Default renderer for unspecified file types.
+ */
+const DefaultFileRenderer: FC<DefaultFileRendererProps> = ({
+  name,
+  limit = 100,
+  fileIcon = <FileIcon />,
+}) => (
+  <figure className="flex items-center gap-2">
+    {fileIcon}
+    {name && (
+      <figcaption className={cn('file-name-class')}>
+        <Ellipsis value={name} limit={limit} />
+      </figcaption>
+    )}
+  </figure>
+);
+
+export default DefaultFileRenderer;
diff --git a/src/SessionMessages/SessionMessage/MessageFile/ImageFileRenderer.tsx b/src/SessionMessages/SessionMessage/MessageFile/ImageFileRenderer.tsx
new file mode 100644
index 0000000..9f3a7e2
--- /dev/null
+++ b/src/SessionMessages/SessionMessage/MessageFile/ImageFileRenderer.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+interface ImageFileRendererProps {
+  name?: string;
+  url: string;
+}
+
+/**
+ * Renderer for image files.
+ */
+const ImageFileRenderer: FC<ImageFileRendererProps> = ({ url }) => (
+  <img src={url} alt="Image" className="h-10 w-10" />
+);
+
+export default ImageFileRenderer;
diff --git a/src/SessionMessages/SessionMessage/MessageFile/MessageFile.tsx b/src/SessionMessages/SessionMessage/MessageFile/MessageFile.tsx
new file mode 100644
index 0000000..6ccc750
--- /dev/null
+++ b/src/SessionMessages/SessionMessage/MessageFile/MessageFile.tsx
@@ -0,0 +1,58 @@
+import { FC, useContext, ReactElement, Suspense, lazy, useMemo } from 'react';
+import { ConversationFile } from '@/types';
+import { ChatContext } from '@/ChatContext';
+import { cn } from 'reablocks';
+import FileIcon from '@/assets/file.svg?react';
+
+const DefaultFileRenderer = lazy(() => import('./DefaultFileRenderer'));
+const CSVFileRenderer = lazy(() => import('./CSVFileRenderer'));
+const ImageFileRenderer = lazy(() => import('./ImageFileRenderer'));
+const PDFFileRenderer = lazy(() => import('./PDFFileRenderer'));
+
+export interface MessageFileProps extends ConversationFile {
+  /**
+   * Icon to show for delete.
+   */
+  fileIcon?: ReactElement;
+
+  /**
+   * Limit for the name.
+   */
+  limit?: number;
+}
+
+/**
+ * Base MessageFile component that routes to specific file renderers based on file type.
+ */
+export const MessageFile: FC<MessageFileProps> = ({
+  name,
+  type,
+  url,
+  limit = 100,
+  fileIcon = <FileIcon />,
+}) => {
+  const { theme } = useContext(ChatContext);
+
+  const fileTypeRendererMap: { [key: string]: FC<any> } = {
+    'image/': ImageFileRenderer,
+    'text/csv': CSVFileRenderer,
+    'application/pdf': PDFFileRenderer,
+  };
+
+  const FileRenderer = useMemo(() => {
+    const Renderer =
+      Object.keys(fileTypeRendererMap).find((key) => type?.startsWith(key)) ??
+      'default';
+    return fileTypeRendererMap[Renderer] || DefaultFileRenderer;
+  }, [type]);
+
+  return (
+    <div
+      className={cn(theme.messages.message.files.file.base)}
+    >
+      <Suspense fallback={<div>Loading...</div>}>
+        <FileRenderer name={name} url={url} fileIcon={fileIcon} limit={limit} />
+      </Suspense>
+    </div>
+  );
+};
diff --git a/src/SessionMessages/SessionMessage/MessageFile/PDFFileRenderer.tsx b/src/SessionMessages/SessionMessage/MessageFile/PDFFileRenderer.tsx
new file mode 100644
index 0000000..1337d88
--- /dev/null
+++ b/src/SessionMessages/SessionMessage/MessageFile/PDFFileRenderer.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+
+interface PDFFileRendererProps {
+  name?: string;
+  url: string;
+  fileIcon?: ReactElement;
+}
+
+/**
+ * Renderer for PDF files.
+ */
+const PDFFileRenderer: FC<PDFFileRendererProps> = ({ name, url, fileIcon }) => (
+  <figure className="csv-icon flex items-center gap-2" onClick={() => window.open(url, '_blank')}>
+    {fileIcon}
+    {name && <figcaption className="file-name">{name}</figcaption>}
+  </figure>
+);
+
+export default PDFFileRenderer;
diff --git a/src/SessionMessages/SessionMessage/MessageFile/index.ts b/src/SessionMessages/SessionMessage/MessageFile/index.ts
new file mode 100644
index 0000000..ce2c964
--- /dev/null
+++ b/src/SessionMessages/SessionMessage/MessageFile/index.ts
@@ -0,0 +1 @@
+export * from './MessageFile';
diff --git a/src/data/sample.csv b/src/data/sample.csv
new file mode 100644
index 0000000..6612048
--- /dev/null
+++ b/src/data/sample.csv
@@ -0,0 +1,701 @@
+Name, Age, Occupation, City
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
+John Doe, 29, Engineer, New York
+Jane Smith, 34, Designer, Los Angeles
+Alice Johnson, 25, Developer, San Francisco
+Bob Brown, 40, Manager, Chicago
+Eve Davis, 22, Intern, Seattle
\ No newline at end of file
diff --git a/src/utils/parseCSV.ts b/src/utils/parseCSV.ts
new file mode 100644
index 0000000..7469ddd
--- /dev/null
+++ b/src/utils/parseCSV.ts
@@ -0,0 +1,27 @@
+import TestCSV from '@/data/sample.csv?raw';
+
+/**
+ * Parses a CSV string from a local file and returns an array of rows.
+ * Sanitizes cell data to prevent injection attacks.
+ * @param csvString The raw CSV string content to parse.
+ * @returns The parsed CSV data as a 2D array of strings.
+ */
+export const parseCSV = (csvString: string = TestCSV): string[][] => {
+  try {
+    const rows = csvString.split('\n');
+    return rows.map((row) => row.split(',').map((cell) => sanitizeCell(cell)));
+  } catch (error) {
+    console.error('Error parsing CSV:', error);
+    throw new Error('Failed to parse CSV file.');
+  }
+};
+
+/**
+ * Sanitizes cell content to prevent CSV injection and other potential vulnerabilities.
+ * Strips or encodes harmful characters that could be used in an attack.
+ * @param cell The cell content to sanitize.
+ * @returns The sanitized cell content.
+ */
+const sanitizeCell = (cell: string): string => {
+  return cell.trim().replace(/^[=+\-@]/, '');
+};
diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx
index 785ed95..902344b 100644
--- a/stories/Console.stories.tsx
+++ b/stories/Console.stories.tsx
@@ -43,7 +43,8 @@ import {
   fakeSessionsWithEmbeds,
   sessionWithSources,
   sessionsWithFiles,
-  sessionsWithPartialConversation
+  sessionsWithPartialConversation,
+  sessionWithDataDocs
 } from './examples';
 
 export default {
@@ -1093,3 +1094,38 @@ export const ImageFiles = () => {
     </div>
   );
 };
+
+export const CSVPreview = () => {
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        sessions={sessionWithDataDocs}
+        activeSessionId="1"
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput allowedFiles={['.pdf', '.docx', '.csv']} />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
diff --git a/stories/examples.ts b/stories/examples.ts
index 2bb49b4..e50ff16 100644
--- a/stories/examples.ts
+++ b/stories/examples.ts
@@ -176,3 +176,34 @@ export const sessionsWithPartialConversation: Session[] = [
     ]
   }
 ];
+
+export const sessionWithDataDocs: Session[] = [
+  {
+    id: '1',
+    title: 'Session with Partial Conversation',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    conversations: [
+      {
+        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.',
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        files: [
+          { name: 'sample.csv', size: 1024000, type: 'text/csv' }
+        ]
+      },
+      {
+        id: '2',
+        question: 'How does this data align with this PDF?',
+        response: null, // No response yet
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        files: [
+          { name: 'document.pdf', size: 1024000, type: 'application/pdf' },
+        ]
+      }
+    ]
+  }
+];