reachat 2.0.1 → 2.0.2

package/dist/stories/Changelog.mdx

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

package/dist/stories/Chat.stories.tsx

@@ -0,0 +1,265 @@
+import { Meta } from '@storybook/react';
+import {
+  Chat,
+  SessionMessages,
+  ChatInput,
+  SessionMessagePanel,
+  SessionMessage,
+  Session,
+  AppBar
+} from 'reachat';
+import {
+  fakeSessions,
+  sessionWithSources,
+  sessionsWithFiles
+} from './examples';
+import { useState } from 'react';
+import Placeholder from './assets/placeholder.svg?react';
+import PlaceholderDark from './assets/placeholder-dark.svg?react';
+import ReachatLogo from './assets/logo.svg?react';
+import IconSearch from './assets/search.svg?react';
+import IconClose from './assets/close-fill.svg?react';
+import { IconButton } from 'reablocks';
+
+export default {
+  title: 'Demos/Chat',
+  component: Chat
+} as Meta;
+
+export const Compact = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        width: 350,
+        height: 500,
+        padding: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const FullScreen = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+
+  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="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionMessagePanel>
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const Empty = () => {
+  const [activeId, setActiveId] = useState<string>();
+  const [sessions, setSessions] = useState<Session[]>([]);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        width: 350,
+        height: 500,
+        padding: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionMessagePanel>
+          <SessionMessages
+            newSessionContent={
+              <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">
+                  Welcome to Reachat, a UI library for effortlessly building and
+                  customizing chat experiences with Tailwind.
+                </p>
+              </div>
+            }
+          >
+            {conversations =>
+              conversations.map((conversation, index) => (
+                <SessionMessage
+                  key={conversation.id}
+                  conversation={conversation}
+                  isLast={index === conversations.length - 1}
+                />
+              ))
+            }
+          </SessionMessages>
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const WithAppBar = () => {
+  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        width: 800,
+        height: 600,
+        padding: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="chat"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <div className="flex flex-col h-full">
+          <AppBar
+            content={
+              <div className="flex items-center justify-between w-full">
+                <div className="flex-shrink-0">
+                  <IconButton size="small" variant="outline" className='rounded-full p-3'>
+                    <IconSearch className='w-4 h-4' />
+                  </IconButton>
+                </div>
+                <div className="flex-grow flex justify-center items-center">
+                  <ReachatLogo className="h-6 w-auto" />
+                </div>
+                <div className="flex-shrink-0">
+                  <IconButton
+                    variant="text"
+                    size="small"
+                    className='rounded-full p-3'
+                  >
+                    <IconClose className='w-4 h-4' />
+                  </IconButton>
+                </div>
+              </div>
+            }
+          />
+          <SessionMessagePanel>
+            <SessionMessages />
+            <ChatInput />
+          </SessionMessagePanel>
+        </div>
+      </Chat>
+    </div>
+  );
+};

package/dist/stories/ChatBubble.stories.tsx

@@ -0,0 +1,267 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatBubble } from 'reachat';
+import {
+  Chat,
+  SessionsList,
+  NewSessionButton,
+  SessionMessages,
+  SessionGroups,
+  ChatInput,
+  SessionMessagePanel,
+  SessionMessagesHeader,
+  Session
+} from 'reachat';
+import { FC, useState } from 'react';
+import { IconButton } from 'reablocks';
+import IconChat from './assets/chat-voice-fill.svg?react';
+import {
+  fakeSessions,
+  sessionsWithFiles,
+  sessionWithSources
+} from './examples';
+
+export default {
+  title: 'Demos/ChatBubble',
+  component: ChatBubble,
+  args: {
+    position: 'right-end',
+    bubbleContent: (
+      <IconButton
+        size="medium"
+        variant="outline"
+        className="rounded-full p-3 hover:scale-110 transition-transform"
+      >
+        <IconChat />
+      </IconButton>
+    )
+  },
+  argTypes: {
+    position: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end'
+      ],
+      description: 'The position of the chat bubble'
+    },
+    className: {
+      description: 'Additional CSS classes'
+    },
+    children: {
+      description: 'Main content (chat/companion interface)'
+    },
+    bubbleContent: {
+      description: 'Content to show in the trigger bubble'
+    },
+    modifiers: {
+      description: 'Custom position modifiers'
+    }
+  }
+} as Meta<typeof ChatBubble>;
+
+type Story = StoryObj<typeof ChatBubble>;
+
+const ChatSample: FC = () => {
+  const [activeId, setActiveId] = useState<string>();
+  const [sessions, setSessions] = useState<Session[]>([
+    ...fakeSessions,
+    ...sessionsWithFiles,
+    ...sessionWithSources
+  ]);
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        width: 350,
+        height: 500,
+        padding: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        viewType="companion"
+        sessions={sessions}
+        activeSessionId={activeId}
+        onNewSession={() => {
+          const newId = (sessions.length + 1).toLocaleString();
+          setSessions([
+            ...sessions,
+            {
+              id: newId,
+              title: `New Session #${newId}`,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              conversations: []
+            }
+          ]);
+          setActiveId(newId);
+        }}
+        onSelectSession={setActiveId}
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};
+
+export const Basic: Story = {
+  render: args => (
+    <ChatBubble className="absolute left-5 bottom-5" {...args}>
+      <ChatSample />
+    </ChatBubble>
+  )
+};
+
+export const PortalExample: Story = {
+  render: args => (
+    <>
+      <div className="relative w-[400px] h-[300px] border-2 border-gray-300 flex justify-center items-center">
+        <p className="text-gray-600">The ChatBubble will portal here!</p>
+        <ChatBubble className="absolute left-5 bottom-5" {...args}>
+          <ChatSample />
+        </ChatBubble>
+      </div>
+    </>
+  )
+};
+
+export const WithChildren: Story = {
+  render: args => {
+    const [activeId, setActiveId] = useState<string>();
+    const [sessions, setSessions] = useState<Session[]>([
+      ...fakeSessions,
+      ...sessionsWithFiles,
+      ...sessionWithSources
+    ]);
+
+    return (
+      <div className="fixed left-5 bottom-5">
+        <ChatBubble {...args}>
+          <div
+            className="dark:bg-gray-950 bg-white"
+            style={{
+              width: 350,
+              height: 500,
+              padding: 20,
+              borderRadius: 5
+            }}
+          >
+            <Chat
+              viewType="companion"
+              sessions={sessions}
+              activeSessionId={activeId}
+              onNewSession={() => {
+                const newId = (sessions.length + 1).toLocaleString();
+                setSessions([
+                  ...sessions,
+                  {
+                    id: newId,
+                    title: `New Session #${newId}`,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    conversations: []
+                  }
+                ]);
+                setActiveId(newId);
+              }}
+              onSelectSession={setActiveId}
+              onDeleteSession={() => alert('delete!')}
+            >
+              <SessionsList>
+                <NewSessionButton />
+                <SessionGroups />
+              </SessionsList>
+              <SessionMessagePanel>
+                <SessionMessagesHeader />
+                <SessionMessages />
+                <ChatInput />
+              </SessionMessagePanel>
+            </Chat>
+          </div>
+        </ChatBubble>
+      </div>
+    );
+  }
+};
+
+export const WithChildrenPortal: Story = {
+  render: args => {
+    const [activeId, setActiveId] = useState<string>();
+    const [sessions, setSessions] = useState<Session[]>([
+      ...fakeSessions,
+      ...sessionsWithFiles,
+      ...sessionWithSources
+    ]);
+
+    return (
+      <>
+        <div className="relative w-[400px] h-[300px] border-2 border-gray-300 flex flex-col justify-center items-center">
+          <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"
+              style={{
+                width: 350,
+                height: 500,
+                padding: 20,
+                borderRadius: 5
+              }}
+            >
+              <Chat
+                viewType="companion"
+                sessions={sessions}
+                activeSessionId={activeId}
+                onNewSession={() => {
+                  const newId = (sessions.length + 1).toLocaleString();
+                  setSessions([
+                    ...sessions,
+                    {
+                      id: newId,
+                      title: `New Session #${newId}`,
+                      createdAt: new Date(),
+                      updatedAt: new Date(),
+                      conversations: []
+                    }
+                  ]);
+                  setActiveId(newId);
+                }}
+                onSelectSession={setActiveId}
+                onDeleteSession={() => alert('delete!')}
+              >
+                <SessionsList>
+                  <NewSessionButton />
+                  <SessionGroups />
+                </SessionsList>
+                <SessionMessagePanel>
+                  <SessionMessagesHeader />
+                  <SessionMessages />
+                  <ChatInput />
+                </SessionMessagePanel>
+              </Chat>
+            </div>
+          </ChatBubble>
+        </div>
+      </>
+    );
+  }
+};