reachat 2.1.0-alpha.9 → 2.1.1

package/dist/stories/Changelog.mdx

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

package/dist/stories/ChartError.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import {
+  Chat,
+  remarkChart,
+  chartComponents,
+  ChartError
+} from 'reachat';
+
+export default {
+  title: 'Components/ChartError',
+  component: ChartError
+} as Meta;
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <div
+    className="dark:bg-gray-950 bg-white"
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: 20
+    }}
+  >
+    <Chat
+      viewType="chat"
+      sessions={[]}
+      activeSessionId=""
+      remarkPlugins={[remarkChart]}
+      markdownComponents={chartComponents}
+    >
+      <div style={{ maxWidth: 500 }}>{children}</div>
+    </Chat>
+  </div>
+);
+
+export const Default = () => (
+  <Wrapper>
+    <ChartError
+      title="Failed to render chart"
+      message="The chart data could not be parsed. Please check the JSON format."
+    />
+  </Wrapper>
+);
+
+export const WithCode = () => (
+  <Wrapper>
+    <ChartError
+      title="Invalid chart configuration"
+      message="The 'type' field is missing from the chart configuration."
+      code={`{
+  "data": [
+    { "key": "A", "data": 10 },
+    { "key": "B", "data": 20 }
+  ]
+}`}
+    />
+  </Wrapper>
+);
+
+export const Warning = () => (
+  <Wrapper>
+    <ChartError
+      variant="warning"
+      title="Chart data incomplete"
+      message="Some data points are missing values. The chart may not display correctly."
+    />
+  </Wrapper>
+);
+
+export const WarningWithCode = () => (
+  <Wrapper>
+    <ChartError
+      variant="warning"
+      title="Unsupported chart type"
+      message="The chart type 'scatter' is not supported. Falling back to bar chart."
+      code={`{
+  "type": "scatter",
+  "data": [{ "key": "X", "data": 50 }]
+}`}
+    />
+  </Wrapper>
+);

package/dist/stories/Charts.stories.tsx

@@ -0,0 +1,371 @@
+import { Meta } from '@storybook/react';
+import { subHours } from 'date-fns';
+import {
+  Chat,
+  Session,
+  remarkChart,
+  chartComponents,
+  SessionsList,
+  SessionGroups,
+  NewSessionButton,
+  SessionMessages,
+  ChatInput,
+  SessionMessagePanel,
+  SessionMessagesHeader
+} from 'reachat';
+
+export default {
+  title: 'Demos/Charts',
+  component: Chat
+} as Meta;
+
+const barChartData = {
+  type: 'bar',
+  data: [
+    { key: 'JavaScript', data: 35 },
+    { key: 'Python', data: 28 },
+    { key: 'TypeScript', data: 22 },
+    { key: 'Go', data: 15 },
+    { key: 'Rust', data: 10 }
+  ],
+  width: 450,
+  height: 300,
+  title: 'Programming Language Popularity'
+};
+
+const lineChartData = {
+  type: 'line',
+  data: [
+    { key: 'Jan', data: 100 },
+    { key: 'Feb', data: 150 },
+    { key: 'Mar', data: 180 },
+    { key: 'Apr', data: 220 },
+    { key: 'May', data: 280 },
+    { key: 'Jun', data: 350 }
+  ],
+  width: 450,
+  height: 250,
+  title: 'Monthly Revenue Growth'
+};
+
+const pieChartData = {
+  type: 'pie',
+  data: [
+    { key: 'Desktop', data: 45 },
+    { key: 'Mobile', data: 35 },
+    { key: 'Tablet', data: 15 },
+    { key: 'Other', data: 5 }
+  ],
+  width: 350,
+  height: 300,
+  title: 'Device Usage Distribution'
+};
+
+const areaChartData = {
+  type: 'area',
+  data: [
+    { key: 'Week 1', data: 50 },
+    { key: 'Week 2', data: 80 },
+    { key: 'Week 3', data: 65 },
+    { key: 'Week 4', data: 95 },
+    { key: 'Week 5', data: 120 },
+    { key: 'Week 6', data: 140 }
+  ],
+  width: 450,
+  height: 250,
+  title: 'Weekly User Engagement'
+};
+
+const sessionWithCharts: Session[] = [
+  {
+    id: 'session-charts',
+    title: 'Data Analysis with Charts',
+    createdAt: subHours(new Date(), 1),
+    updatedAt: new Date(),
+    conversations: [
+      {
+        id: 'conversation-1',
+        question: 'Can you show me the programming language popularity data as a bar chart?',
+        response: `Sure! Here's a bar chart showing the popularity of programming languages based on recent survey data:
+
+\`\`\`chart
+${JSON.stringify(barChartData, null, 2)}
+\`\`\`
+
+As you can see, JavaScript leads the pack with 35% popularity, followed by Python at 28%. TypeScript has been growing rapidly and now sits at 22%.`,
+        createdAt: subHours(new Date(), 1)
+      },
+      {
+        id: 'conversation-2',
+        question: 'What about the monthly revenue growth? Can you visualize that?',
+        response: `Absolutely! Here's a line chart showing the monthly revenue growth for the first half of the year:
+
+\`\`\`chart
+${JSON.stringify(lineChartData, null, 2)}
+\`\`\`
+
+The trend shows consistent growth, with revenue increasing from $100K in January to $350K in June - a 250% increase over 6 months!`,
+        createdAt: subHours(new Date(), 0.5)
+      },
+      {
+        id: 'conversation-3',
+        question: 'How about device usage? A pie chart would be great for that.',
+        response: `Great choice! Pie charts are perfect for showing distribution. Here's the device usage breakdown:
+
+\`\`\`chart
+${JSON.stringify(pieChartData, null, 2)}
+\`\`\`
+
+Desktop still dominates at 45%, but mobile is catching up fast at 35%. Tablet usage is at 15%.`,
+        createdAt: new Date()
+      }
+    ]
+  }
+];
+
+const sessionWithMultipleCharts: Session[] = [
+  {
+    id: 'session-multi-charts',
+    title: 'Quarterly Report',
+    createdAt: subHours(new Date(), 2),
+    updatedAt: new Date(),
+    conversations: [
+      {
+        id: 'conversation-1',
+        question: 'Can you give me a comprehensive analysis with multiple charts?',
+        response: `Of course! Let me present the quarterly analysis with multiple visualizations.
+
+## Revenue Trend
+
+\`\`\`chart
+${JSON.stringify(lineChartData, null, 2)}
+\`\`\`
+
+## User Engagement
+
+\`\`\`chart
+${JSON.stringify(areaChartData, null, 2)}
+\`\`\`
+
+## Market Share by Device
+
+\`\`\`chart
+${JSON.stringify(pieChartData, null, 2)}
+\`\`\`
+
+### Key Takeaways:
+1. **Revenue** has grown 250% over 6 months
+2. **User engagement** shows steady weekly increases
+3. **Mobile adoption** is approaching desktop usage levels`,
+        createdAt: new Date()
+      }
+    ]
+  }
+];
+
+export const BarChartExample = () => {
+  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
+        viewType="console"
+        sessions={sessionWithCharts}
+        activeSessionId="session-charts"
+        remarkPlugins={[remarkChart]}
+        markdownComponents={chartComponents}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const MultipleCharts = () => {
+  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
+        viewType="console"
+        sessions={sessionWithMultipleCharts}
+        activeSessionId="session-multi-charts"
+        remarkPlugins={[remarkChart]}
+        markdownComponents={chartComponents}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const AllChartTypes = () => {
+  const sparklineData = {
+    type: 'sparkline',
+    data: [
+      { key: '1', data: 10 },
+      { key: '2', data: 25 },
+      { key: '3', data: 15 },
+      { key: '4', data: 35 },
+      { key: '5', data: 30 },
+      { key: '6', data: 45 },
+      { key: '7', data: 40 }
+    ],
+    width: 200,
+    height: 50
+  };
+
+  const sessionAllCharts: Session[] = [
+    {
+      id: 'session-all-charts',
+      title: 'Chart Types Showcase',
+      createdAt: subHours(new Date(), 1),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: 'conversation-1',
+          question: 'Show me all the different chart types available.',
+          response: `Here's a showcase of all available chart types:
+
+## Bar Chart
+\`\`\`chart
+${JSON.stringify(barChartData, null, 2)}
+\`\`\`
+
+## Line Chart
+\`\`\`chart
+${JSON.stringify(lineChartData, null, 2)}
+\`\`\`
+
+## Area Chart
+\`\`\`chart
+${JSON.stringify(areaChartData, null, 2)}
+\`\`\`
+
+## Pie Chart
+\`\`\`chart
+${JSON.stringify(pieChartData, null, 2)}
+\`\`\`
+
+## Sparkline (inline mini-chart)
+\`\`\`chart
+${JSON.stringify(sparklineData, null, 2)}
+\`\`\`
+
+Each chart type is optimized for different use cases:
+- **Bar charts** for comparisons
+- **Line charts** for trends over time
+- **Area charts** for cumulative data
+- **Pie charts** for proportions
+- **Sparklines** for compact inline visualizations`,
+          createdAt: new Date()
+        }
+      ]
+    }
+  ];
+
+  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
+        viewType="console"
+        sessions={sessionAllCharts}
+        activeSessionId="session-all-charts"
+        remarkPlugins={[remarkChart]}
+        markdownComponents={chartComponents}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const ChatViewWithCharts = () => {
+  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,
+        maxWidth: 800,
+        marginLeft: 'auto',
+        marginRight: 'auto'
+      }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessionWithCharts}
+        activeSessionId="session-charts"
+        remarkPlugins={[remarkChart]}
+        markdownComponents={chartComponents}
+      >
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};

package/dist/stories/Chat.stories.tsx

@@ -36,7 +36,7 @@ export const Compact = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         width: 350,
         height: 500,
@@ -84,7 +84,7 @@ export const FullScreen = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         position: 'absolute',
         top: 0,
@@ -132,7 +132,7 @@ export const Empty = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-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-(--content-text-neutral-2) max-w-[400px] text-center">
+                <p className="text-gray-500 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-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-white"
       style={{
         width: 800,
         height: 600,

package/dist/stories/ChatBubble.stories.tsx

@@ -81,7 +81,7 @@ const ChatSample: FC = () => {
 
   return (
     <div
-      className="dark:bg-(--color-background-basic-black) bg-(--color-background-basic-white)"
+      className="dark:bg-gray-950 bg-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-(--color-background-basic-black) bg-(--color-background-basic-white)"
+            className="dark:bg-gray-950 bg-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-(--color-background-basic-black) bg-(--color-background-basic-white)"
+              className="dark:bg-gray-950 bg-white"
               style={{
                 width: 350,
                 height: 500,