reachat 2.1.0-alpha.2 → 2.1.0-alpha.21

package/dist/stories/Markdown.stories.tsx

@@ -0,0 +1,318 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import { Markdown, remarkCve } from 'reachat';
+import { chatTheme } from 'reachat';
+
+export default {
+  title: 'Components/Markdown',
+  component: Markdown,
+  args: {
+    theme: chatTheme,
+    remarkPlugins: [remarkGfm, remarkMath]
+  }
+} as Meta<typeof Markdown>;
+
+type Story = StoryObj<typeof Markdown>;
+
+const riskTableMarkdown = `
+Austin, based strictly on the provided organizational profile of Acme Controls International plc and the Dragos Q2 2025 ransomware threat intelligence, I have created a concise Risk Table illustrating key risk areas, their impact domains, likelihood, and priority levels for your strategic assessment.
+
+| Risk Category                  | Description                                                                                                  | Impacted Areas                           | Likelihood      | Priority Level  | Remarks/Notes                                                                                                                     |
+|-------------------------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------|-----------------|-----------------|----------------------------------------------------------------------------------------------------------------------------------|
+| Ransomware Attacks             | CVE-2024-21762 High-volume ransomware targeting manufacturing and industrial control systems; sophisticated groups like Qilin, SafePay, Devman active | Manufacturing, ICS, Supply Chains       | Highly Likely   | Critical        | Qilin alone accounted for ~15% of all industrial ransomware incidents Q2 2025; ties to nation-state actors increase strategic risk|
+| Critical Vulnerability Exploits| Exploitation of unpatched Fortinet, SAP Netweaver, SimpleHelp vulnerabilities leading to network compromise | IT-OT networks, Remote Access Points    | Highly Likely   | High            | Notable CVEs: CVE-2024-21762 (Fortinet), CVE-2025-31324 (SAP); patch management is critical                                     |
+| Supply Chain Disruptions        | Ransomware, component shortages, geopolitical conflict impact supply and finance operations                   | Supply Chain, Procurement, Vendors      | Likely          | High            | Includes semiconductor shortages, geopolitical events in Middle East and Russia/Ukraine impacting component availability        |
+| Social Engineering Attacks      | Increased phishing, vishing, and helpdesk impersonation leading to credential theft and initial access       | Employees, IT helpdesk                   | Likely          | High            | Attackers use voice spoofing, Teams calls, and email bombing; training and awareness crucial                                      |
+| AI-driven Attack Enhancements   | Emerging use of AI for phishing, evasion, and automated reconnaissance reducing detection windows            | Security Operations, SOC                 | Medium Likely   | Medium          | Threat actors enhance sophistication, requiring advanced detection technologies                                                 |
+| Data Privacy and Compliance Risks| Potential violations of GDPR, US state privacy laws and sector-specific reporting obligations due to breaches | Legal, Compliance Departments            | Even Chance     | Medium          | Incident impacts can trigger complex regulatory reporting and fines                                                               |
+| Environmental and Product Liability Litigation| PFAS contamination and asbestos-related claims risk operational and reputational impact               | Legal, Environmental Compliance, Public Affairs | Even Chance     | Medium          | Ongoing remediation and litigation in Wisconsin sites; impacts company reputation and financial reserves                         |
+| Competitor-led Market Shifts     | Competition from Honeywell, Siemens, Schneider Electric in smart building and cooling systems sectors        | Product Development, Strategic Planning | Medium          | Low             | Market dynamics but outside direct cybersecurity scope                                                                             |
+
+This risk table uses Dragos ransomware intelligence trends along with Acme Controls' industrial, geographic, regulatory, and operational context to prioritize risks most pertinent for strategic decision-making.
+
+Let me know your next question or if you want me to elaborate on specific risks before we proceed to complete the Strategic Risk Assessment.`;
+
+export const RiskAssessmentTable: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-full overflow-x-auto">
+      <Markdown {...args} remarkPlugins={[remarkGfm, remarkMath, remarkCve]}>
+        {riskTableMarkdown}
+      </Markdown>
+    </div>
+  )
+};
+
+export const SimpleTable: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base">
+      <Markdown {...args}>
+        {`
+| Name | Age | Location |
+|------|-----|----------|
+| Alice | 30 | New York |
+| Bob | 25 | London |
+| Charlie | 35 | Tokyo |
+`}
+      </Markdown>
+    </div>
+  )
+};
+
+export const TableWithMarkdown: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base">
+      <Markdown {...args}>
+        {`
+## Security Vulnerabilities
+
+| CVE ID | Severity | Description | Fix Available |
+|--------|----------|-------------|---------------|
+| CVE-2024-21762 | **Critical** | Remote code execution in Fortinet SSL VPN | Yes - Patch v7.2.3 |
+| CVE-2025-31324 | **High** | SQL injection in SAP Netweaver | Yes - Update required |
+| CVE-2024-12345 | *Medium* | XSS vulnerability in web interface | Yes - v2.1.0+ |
+`}
+      </Markdown>
+    </div>
+  )
+};
+
+export const InlineAndCodeBlocks: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">
+      <Markdown {...args}>
+        {`
+# Inline Code vs Code Blocks
+
+## Inline Code Examples
+
+Use inline code when referencing code elements within sentences:
+
+- Call the \`useState\` hook to manage component state
+- Import the component with \`import { Button } from 'reablocks'\`
+- Set the variable using \`const name = 'John'\`
+- The function \`calculateTotal()\` returns a number
+- Access the property with \`user.email\`
+- Use the className \`bg-blue-500\` for styling
+
+You can also use inline code for short commands like \`npm install\` or file paths like \`/src/components/App.tsx\`.
+
+## Code Block Examples
+
+Use code blocks for multi-line code snippets:
+\`\`\`
+Hello, world!
+\`\`\`
+
+### TypeScript/React Component
+
+\`\`\`typescript
+import { useState } from 'react';
+import { Button } from 'reablocks';
+
+interface UserProps {
+  name: string;
+  email: string;
+}
+
+export const UserProfile = ({ name, email }: UserProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div className="p-4 border rounded">
+      <h2>{name}</h2>
+      <p>{email}</p>
+      <Button onClick={() => setIsEditing(!isEditing)}>
+        {isEditing ? 'Save' : 'Edit'}
+      </Button>
+    </div>
+  );
+};
+\`\`\`
+
+### JavaScript
+
+\`\`\`javascript
+function fetchUserData(userId) {
+  return fetch(\`/api/users/\${userId}\`)
+    .then(response => response.json())
+    .then(data => {
+      console.log('User data:', data);
+      return data;
+    })
+    .catch(error => {
+      console.error('Error fetching user:', error);
+    });
+}
+\`\`\`
+
+### Python
+
+\`\`\`python
+def calculate_total(items):
+    total = sum(item['price'] * item['quantity'] for item in items)
+    return round(total, 2)
+
+items = [
+    {'name': 'Book', 'price': 12.99, 'quantity': 2},
+    {'name': 'Pen', 'price': 1.50, 'quantity': 5}
+]
+
+print(f"Total: $\{calculate_total(items)}")
+\`\`\`
+
+### JSON
+
+\`\`\`json
+{
+  "name": "reachat",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.3.0",
+    "reablocks": "^8.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+\`\`\`
+
+### CSS/Tailwind
+
+\`\`\`css
+.chat-bubble {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.chat-bubble:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+\`\`\`
+
+### Bash/Shell
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Run tests
+npm test
+\`\`\`
+
+### SQL
+
+\`\`\`sql
+SELECT
+  u.id,
+  u.name,
+  u.email,
+  COUNT(o.id) as order_count
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.created_at > '2024-01-01'
+GROUP BY u.id, u.name, u.email
+ORDER BY order_count DESC
+LIMIT 10;
+\`\`\`
+
+## Mixed Usage
+
+You can combine inline code and code blocks in the same content:
+
+To create a new React component, first import \`React\` and \`useState\`:
+
+\`\`\`tsx
+import React, { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+};
+\`\`\`
+
+Then use it in your app by importing it with \`import { Counter } from './Counter'\` and rendering \`<Counter />\` in your JSX.
+`}
+      </Markdown>
+    </div>
+  )
+};
+
+export const AllMarkdownFeatures: Story = {
+  render: args => (
+    <div className="p-8 bg-background-neutral-canvas-base max-w-4xl">
+      <Markdown {...args}>
+        {`
+# Comprehensive Markdown Test
+
+## Tables
+
+### Simple Table
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+
+### Table with Alignment
+| Left Aligned | Center Aligned | Right Aligned |
+|:-------------|:--------------:|--------------:|
+| Text         | Text           | Text          |
+| More text    | More text      | More text     |
+
+---
+
+## Text Formatting
+
+**Bold text** and *italic text* and ***bold italic***.
+
+## Links
+
+Check out [this link](https://example.com).
+
+## Lists
+
+### Unordered List
+- Item 1
+- Item 2
+  - Nested item
+- Item 3
+
+### Ordered List
+1. First item
+2. Second item
+3. Third item
+
+## Code
+
+Inline \`code\` example.
+
+\`\`\`typescript
+function greet(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+## Headings
+
+# H1 Heading
+## H2 Heading
+### H3 Heading
+#### H4 Heading
+##### H5 Heading
+###### H6 Heading
+`}
+      </Markdown>
+    </div>
+  )
+};

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

@@ -52,17 +52,38 @@ export interface ChatTheme {
                 };
             };
             markdown: {
+                hr: string;
                 p: string;
                 a: string;
                 table: string;
                 th: string;
                 td: string;
                 code: string;
+                inlineCode: string;
                 toolbar: string;
                 li: string;
                 ul: string;
                 ol: string;
                 copy: string;
+                h1: string;
+                h2: string;
+                h3: string;
+                h4: string;
+                h5: string;
+                h6: string;
+            };
+            csvPreview: {
+                base: string;
+                header: {
+                    base: string;
+                    icon: string;
+                    actions: string;
+                };
+                tableContainer: string;
+                dialog: {
+                    base: string;
+                    container: string;
+                };
             };
             footer: {
                 base: string;

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './grouping';