wip

src/Chat.tsx

@@ -11,7 +11,7 @@ import { useHotkeys } from 'reakeys';
 import { cn, useComponentTheme } from 'reablocks';
 import { Session } from './types';
 import { ChatTheme, chatTheme } from './theme';
-import { ChatContext } from './ChatContext';
+import { ChatContext, ChatViewType } from './ChatContext';
 import { PluggableList } from 'react-markdown/lib';
 import { AnimatePresence } from 'framer-motion';
 import { useDimensions } from './utils/useDimensions';
@@ -28,11 +28,13 @@ export interface ChatProps extends PropsWithChildren {
   className?: string;
 
   /**
-   * The type of prompt to display. Companion prompts are smaller and are
-   * meant to be displayed alongside other content. Full prompts are larger
-   * and are meant to be displayed on their own.
+   * The type of prompt to display.
+   *
+   * - Companion: Smaller prompt screen with session lists.
+   * - Console: Full screen experience.
+   * - Chat: Only chat, no sessions.
    */
-  viewType?: 'companion' | 'console';
+  viewType?: ChatViewType;
 
   /**
    * The list of sessions to display.
@@ -172,6 +174,7 @@ export const Chat: FC<ChatProps> = ({
       disabled,
       isLoading,
       isCompact,
+      viewType,
       activeSessionId: internalActiveSessionID,
       selectSession: handleSelectSession,
       deleteSession: handleDeleteSession,
@@ -183,6 +186,7 @@ export const Chat: FC<ChatProps> = ({
     [
       isLoading,
       isCompact,
+      viewType,
       disabled,
       theme,
       remarkPlugins,

src/ChatContext.ts

@@ -3,13 +3,16 @@ import { Session } from './types';
 import { ChatTheme } from './theme';
 import { PluggableList } from 'react-markdown/lib';
 
+export type ChatViewType = 'chat' | 'companion' | 'console';
+
 export interface ChatContextProps {
   sessions: Session[];
   disabled?: boolean;
   activeSessionId: string | null;
   theme?: ChatTheme;
   isLoading?: boolean;
   isCompact?: boolean;
+  viewType?: ChatViewType;
   activeSession?: Session | null;
   remarkPlugins?: PluggableList[];
   selectSession?: (sessionId: string) => void;

src/SessionMessages/SessionMessagePanel.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import BackIcon from '@/assets/back.svg?react';
 
 export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
-  const { activeSessionId, theme, isCompact, selectSession } =
+  const { activeSessionId, theme, isCompact, selectSession, viewType } =
     useContext(ChatContext);
   const isVisible = isCompact && activeSessionId;
 
@@ -29,7 +29,7 @@ export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
         })}
       >
         <div className={cn(theme.messages.inner)}>
-          {isCompact && (
+          {(isCompact && viewType !== 'chat') && (
             <Button
               variant="text"
               size="small"

stories/Chat.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta } from '@storybook/react';
+import {
+  Chat,
+  SessionsList,
+  SessionsGroup,
+  SessionListItem,
+  NewSessionButton,
+  SessionMessages,
+  SessionGroups,
+  ChatInput,
+  SessionMessagePanel,
+  SessionMessagesHeader,
+  SessionMessage,
+  Session
+} from '../src';
+import {
+  fakeSessions,
+  sessionWithSources,
+  sessionsWithFiles
+} from './examples';
+import { useState } from 'react';
+
+export default {
+  title: 'Demos/Chat',
+  component: Chat
+} as Meta;
+
+export const Basic = () => {
+  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>
+            {conversations =>
+              conversations.map((conversation, index) => (
+                <SessionMessage
+                  key={conversation.id}
+                  conversation={conversation}
+                  isLast={index === conversations.length - 1}
+                />
+              ))
+            }
+          </SessionMessages>
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};