fix compact

reaviz · Aug 7, 2024 · 274bbe8 · 274bbe8
1 parent b7b4f43
commit 274bbe8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 2 deletions.
diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx
@@ -7,10 +7,10 @@ import BackIcon from '@/assets/back.svg?react';
 export const SessionMessagePanel: FC<PropsWithChildren> = ({ children }) => {
   const { activeSessionId, theme, isCompact, selectSession, viewType } =
     useContext(ChatContext);
-  const isVisible = isCompact && activeSessionId;
+  const isVisible = (isCompact && activeSessionId) || viewType === 'chat' || !isCompact;
 
   return (
-    (!isCompact || isVisible) && (
+    isVisible && (
       <motion.div
         initial={{ translateX: '200%' }}
         animate={{

diff --git a/stories/Chat.stories.tsx b/stories/Chat.stories.tsx
@@ -19,6 +19,8 @@ import {
   sessionsWithFiles
 } from './examples';
 import { useState } from 'react';
+import Placeholder from '@/assets/placeholder.svg?react';
+import PlaceholderDark from '@/assets/placeholder-dark.svg?react';
 
 export default {
   title: 'Demos/Chat',
@@ -144,3 +146,68 @@ export const FullScreen = () => {
     </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>
+  );
+};