From 0618aafdb1a3bd6e96f2711843bbf00072687a75 Mon Sep 17 00:00:00 2001 From: amcdnl Date: Wed, 7 Aug 2024 05:50:56 -0400 Subject: [PATCH 1/6] wip --- src/Chat.tsx | 14 ++-- src/ChatContext.ts | 3 + src/SessionMessages/SessionMessagePanel.tsx | 4 +- stories/Chat.stories.tsx | 84 +++++++++++++++++++++ 4 files changed, 98 insertions(+), 7 deletions(-) create mode 100644 stories/Chat.stories.tsx diff --git a/src/Chat.tsx b/src/Chat.tsx index 952de3b..d392a38 100644 --- a/src/Chat.tsx +++ b/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 = ({ disabled, isLoading, isCompact, + viewType, activeSessionId: internalActiveSessionID, selectSession: handleSelectSession, deleteSession: handleDeleteSession, @@ -183,6 +186,7 @@ export const Chat: FC = ({ [ isLoading, isCompact, + viewType, disabled, theme, remarkPlugins, diff --git a/src/ChatContext.ts b/src/ChatContext.ts index d66bffd..aadca37 100644 --- a/src/ChatContext.ts +++ b/src/ChatContext.ts @@ -3,6 +3,8 @@ 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; @@ -10,6 +12,7 @@ export interface ChatContextProps { theme?: ChatTheme; isLoading?: boolean; isCompact?: boolean; + viewType?: ChatViewType; activeSession?: Session | null; remarkPlugins?: PluggableList[]; selectSession?: (sessionId: string) => void; diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx index 28c7f18..eaa128e 100644 --- a/src/SessionMessages/SessionMessagePanel.tsx +++ b/src/SessionMessages/SessionMessagePanel.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion'; import BackIcon from '@/assets/back.svg?react'; export const SessionMessagePanel: FC = ({ 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 = ({ children }) => { })} >
- {isCompact && ( + {(isCompact && viewType !== 'chat') && (
); }; + +export const FullScreen = () => { + const [activeId, setActiveId] = useState(fakeSessions[0].id); + const [sessions, setSessions] = useState([ + ...fakeSessions, + ...sessionsWithFiles, + ...sessionWithSources + ]); + + return ( +
+ { + 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!')} + > + + + {conversations => + conversations.map((conversation, index) => ( + + )) + } + + + + +
+ ); +}; From 8cb716ecc08a36ffa9a8fdc774d3808ee9d9152e Mon Sep 17 00:00:00 2001 From: amcdnl Date: Wed, 7 Aug 2024 06:06:38 -0400 Subject: [PATCH 3/6] fix limit --- src/SessionMessages/SessionMessages.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/SessionMessages/SessionMessages.tsx b/src/SessionMessages/SessionMessages.tsx index 4dd5bb8..6b98d1a 100644 --- a/src/SessionMessages/SessionMessages.tsx +++ b/src/SessionMessages/SessionMessages.tsx @@ -66,7 +66,7 @@ export const SessionMessages: React.FC = ({ }, [activeSession, isAnimating]); function handleShowMore() { - showNext(10); + showNext(limit); requestAnimationFrame(() => (contentRef.current.scrollTop = 0)); } @@ -78,7 +78,7 @@ export const SessionMessages: React.FC = ({ const { data, hasMore, showNext } = useInfinityList({ items: reversedConvos, - limit + size: limit }); // Reverse the data to the last one last now From f1f523d2e79725e52ee616636127f661cd13ef1b Mon Sep 17 00:00:00 2001 From: amcdnl Date: Wed, 7 Aug 2024 06:10:03 -0400 Subject: [PATCH 4/6] fix gap --- src/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index 938cecd..33527a8 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -84,7 +84,7 @@ export interface ChatTheme { export const chatTheme: ChatTheme = { base: 'dark:text-white text-gray-500', - console: 'flex w-full gap-10 h-full', + console: 'flex w-full gap-4 h-full', companion: 'w-full h-full overflow-hidden', empty: 'text-center flex-1', sessions: { @@ -110,7 +110,7 @@ export const chatTheme: ChatTheme = { }, messages: { base: '', - console: 'flex flex-col mr-5 flex-1 overflow-hidden', + console: 'flex flex-col mx-5 flex-1 overflow-hidden', companion: 'flex w-full h-full', back: 'self-start p-0 my-2', inner: 'flex-1 h-full flex flex-col', From b7b4f43a988d0d3bd7a68a8c2ffdd1a5473bf583 Mon Sep 17 00:00:00 2001 From: amcdnl Date: Wed, 7 Aug 2024 08:28:17 -0400 Subject: [PATCH 5/6] fix animation issue --- src/SessionMessages/SessionMessages.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SessionMessages/SessionMessages.tsx b/src/SessionMessages/SessionMessages.tsx index 6b98d1a..a91eb2d 100644 --- a/src/SessionMessages/SessionMessages.tsx +++ b/src/SessionMessages/SessionMessages.tsx @@ -110,7 +110,7 @@ export const SessionMessages: React.FC = ({ initial="hidden" animate="visible" onAnimationComplete={() => { - setIsAnimating(false); + requestAnimationFrame(() => setIsAnimating(false)); }} > {children(convosToRender)} From 274bbe8377ead9e5a77a5c2bf76ff2b8ef8a6654 Mon Sep 17 00:00:00 2001 From: amcdnl Date: Wed, 7 Aug 2024 08:38:38 -0400 Subject: [PATCH 6/6] fix compact --- src/SessionMessages/SessionMessagePanel.tsx | 4 +- stories/Chat.stories.tsx | 67 +++++++++++++++++++++ 2 files changed, 69 insertions(+), 2 deletions(-) diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx index eaa128e..742d282 100644 --- 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 = ({ children }) => { const { activeSessionId, theme, isCompact, selectSession, viewType } = useContext(ChatContext); - const isVisible = isCompact && activeSessionId; + const isVisible = (isCompact && activeSessionId) || viewType === 'chat' || !isCompact; return ( - (!isCompact || isVisible) && ( + isVisible && ( { ); }; + +export const Empty = () => { + const [activeId, setActiveId] = useState(); + const [sessions, setSessions] = useState([]); + + return ( +
+ { + 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!')} + > + + + + +

+ Welcome to Reachat, a UI library for effortlessly building and + customizing chat experiences with Tailwind. +

+
+ } + > + {conversations => + conversations.map((conversation, index) => ( + + )) + } + + + + + + ); +};