From 61bef213eda103bc0a37b0ce25bf8aecb2c2ca1f Mon Sep 17 00:00:00 2001 From: Stephanie Yang Date: Sat, 10 Aug 2024 18:39:36 -0500 Subject: [PATCH 1/3] simplify SessionGroups and SessionMessages for basic implementation --- package-lock.json | 4 +- .../SessionMessage/MessageQuestion.tsx | 49 +-- src/SessionMessages/SessionMessages.tsx | 11 +- src/SessionsList/SessionGroups.tsx | 18 +- stories/Chat.stories.tsx | 24 +- stories/Companion.stories.tsx | 36 +- stories/Console.stories.tsx | 376 +++--------------- 7 files changed, 106 insertions(+), 412 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3795428..0b4f01e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "reachat", - "version": "1.0.7", + "version": "1.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "reachat", - "version": "1.0.7", + "version": "1.3.1", "license": "Apache-2.0", "dependencies": { "@radix-ui/react-slot": "^1.1.0", diff --git a/src/SessionMessages/SessionMessage/MessageQuestion.tsx b/src/SessionMessages/SessionMessage/MessageQuestion.tsx index fa2d923..b7f2e16 100644 --- a/src/SessionMessages/SessionMessage/MessageQuestion.tsx +++ b/src/SessionMessages/SessionMessage/MessageQuestion.tsx @@ -20,37 +20,40 @@ export interface MessageQuestionProps extends PropsWithChildren { } export const MessageQuestion: FC = ({ - question, - files, - children + children, + ...props }) => { - const { theme, remarkPlugins } = - useContext(ChatContext); + const { theme, remarkPlugins } = useContext(ChatContext); + const { question, files } = props; const Comp = children ? Slot : 'div'; const [expanded, setExpanded] = useState(false); const isLong = question.length > 500; return ( - - + {children || ( - - {question} - - )} - {isLong && !expanded && ( - + <> + + + {question} + + {isLong && !expanded && ( + + )} + )} ); }; - diff --git a/src/SessionMessages/SessionMessages.tsx b/src/SessionMessages/SessionMessages.tsx index a91eb2d..dcd6f05 100644 --- a/src/SessionMessages/SessionMessages.tsx +++ b/src/SessionMessages/SessionMessages.tsx @@ -11,6 +11,7 @@ import { ChatContext } from '@/ChatContext'; import { Button, cn, useInfinityList } from 'reablocks'; import { AnimatePresence, motion } from 'framer-motion'; import { Conversation } from '@/types'; +import { SessionMessage } from './SessionMessage/SessionMessage'; const containerVariants = { hidden: {}, @@ -113,7 +114,15 @@ export const SessionMessages: React.FC = ({ requestAnimationFrame(() => setIsAnimating(false)); }} > - {children(convosToRender)} + {children + ? children(convosToRender) + : convosToRender.map((conversation, index) => ( + + ))} diff --git a/src/SessionsList/SessionGroups.tsx b/src/SessionsList/SessionGroups.tsx index ace8b85..8ee7851 100644 --- a/src/SessionsList/SessionGroups.tsx +++ b/src/SessionsList/SessionGroups.tsx @@ -1,17 +1,31 @@ import { FC, ReactNode, useContext, useMemo } from 'react'; import { GroupedSessions, groupSessionsByDate } from '@/utils/grouping'; import { ChatContext } from '@/ChatContext'; +import { SessionsGroup } from './SessionsGroup'; +import { SessionListItem } from './SessionListItem'; export interface SessionGroupsProps { /** * Render function for the session groups. */ - children: (groups: GroupedSessions[]) => ReactNode; + children?: (groups: GroupedSessions[]) => ReactNode; } export const SessionGroups: FC = ({ children }) => { const { sessions } = useContext(ChatContext); const groups = useMemo(() => groupSessionsByDate(sessions), [sessions]); - return <>{children(groups)}; + return ( + <> + {children + ? children(groups) + : groups.map(({ heading, sessions }) => ( + + {sessions.map(session => ( + + ))} + + ))} + + ); }; diff --git a/stories/Chat.stories.tsx b/stories/Chat.stories.tsx index 6778bb7..ce99e2f 100644 --- a/stories/Chat.stories.tsx +++ b/stories/Chat.stories.tsx @@ -67,17 +67,7 @@ export const Compact = () => { onDeleteSession={() => alert('delete!')} > - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -129,17 +119,7 @@ export const FullScreen = () => { onDeleteSession={() => alert('delete!')} > - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx index 8df57d1..19a7737 100644 --- a/stories/Companion.stories.tsx +++ b/stories/Companion.stories.tsx @@ -68,31 +68,11 @@ export const Basic = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -118,17 +98,7 @@ export const Empty = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - +
{ > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -126,31 +106,11 @@ export const Embeds = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -181,32 +141,12 @@ export const DefaultSession = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -238,32 +178,12 @@ export const Loading = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -294,31 +214,11 @@ export const FileUploads = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -349,32 +249,12 @@ export const DefaultInputValue = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -415,17 +295,7 @@ export const UndeleteableSessions = () => { - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -489,32 +359,12 @@ export const SessionGrouping = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -560,32 +410,12 @@ export const HundredSessions = () => { - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -635,32 +465,12 @@ export const HundredConversations = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -678,8 +488,10 @@ export const LongSessionNames = () => { conversations: [ { id: '1', - question: 'Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics?', - response: 'Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics?', + question: + 'Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics?', + response: + 'Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics? Can you provide an in-depth explanation of the theory of relativity, including its historical context, key principles, mathematical foundations, experimental evidence, and its implications for our understanding of space, time, and gravity? Additionally, how does it relate to quantum mechanics, and what are the current challenges in reconciling these two fundamental theories of physics?', createdAt: new Date(), updatedAt: new Date() } @@ -710,32 +522,12 @@ export const LongSessionNames = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -847,32 +639,12 @@ export const MarkdownShowcase = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -938,32 +710,12 @@ export const CVEExample = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -1056,32 +808,12 @@ export const ConversationSources = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -1102,10 +834,15 @@ const CustomMessagesHeader: FC = () => { ); }; -const CustomMessageQuestion: FC = ({ question }) => ( - - This is my question: {question} - +const CustomMessageQuestion: FC = ({ question, files }) => ( + <> + + This is my question: {question} + + + + + ); const CustomMessageResponse: FC = ({ response }) => ( @@ -1116,6 +853,7 @@ const CustomMessageResponse: FC = ({ response }) => ( const CustomMessageFile: FC = ({ name, type }) => ( + <>{console.log('boop', name, type)} {name || type} ); @@ -1240,12 +978,12 @@ export const CustomComponents = () => { isLast={index === conversations.length - 1} key={conversation.id} > - + - - - @@ -1343,32 +1081,12 @@ export const ImageFiles = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + From e117bf0d4f3eded4a1180c69c9feeb3f855c1514 Mon Sep 17 00:00:00 2001 From: Stephanie Yang Date: Sat, 10 Aug 2024 18:48:58 -0500 Subject: [PATCH 2/3] cleanup unused imports --- stories/Chat.stories.tsx | 6 ------ stories/Companion.stories.tsx | 3 --- 2 files changed, 9 deletions(-) diff --git a/stories/Chat.stories.tsx b/stories/Chat.stories.tsx index ce99e2f..09bb9da 100644 --- a/stories/Chat.stories.tsx +++ b/stories/Chat.stories.tsx @@ -1,15 +1,9 @@ import { Meta } from '@storybook/react'; import { Chat, - SessionsList, - SessionsGroup, - SessionListItem, - NewSessionButton, SessionMessages, - SessionGroups, ChatInput, SessionMessagePanel, - SessionMessagesHeader, SessionMessage, Session } from '../src'; diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx index 19a7737..2a8be7a 100644 --- a/stories/Companion.stories.tsx +++ b/stories/Companion.stories.tsx @@ -2,15 +2,12 @@ import { Meta } from '@storybook/react'; import { Chat, SessionsList, - SessionsGroup, - SessionListItem, NewSessionButton, SessionMessages, SessionGroups, ChatInput, SessionMessagePanel, SessionMessagesHeader, - SessionMessage, Session } from '../src'; import { From 7a395250c1d4ce20de7be93575e4177661f1cc02 Mon Sep 17 00:00:00 2001 From: Stephanie Yang Date: Sat, 10 Aug 2024 18:50:48 -0500 Subject: [PATCH 3/3] update integration stories --- stories/Integration.stories.tsx | 53 ++++----------------------------- 1 file changed, 5 insertions(+), 48 deletions(-) diff --git a/stories/Integration.stories.tsx b/stories/Integration.stories.tsx index 10d0373..92c9279 100644 --- a/stories/Integration.stories.tsx +++ b/stories/Integration.stories.tsx @@ -5,15 +5,12 @@ import { Chat, Session, SessionsList, - SessionsGroup, - SessionListItem, NewSessionButton, SessionMessages, SessionGroups, ChatInput, SessionMessagePanel, - SessionMessagesHeader, - SessionMessage + SessionMessagesHeader } from '../src'; import { Input } from 'reablocks'; import { generateText } from 'ai'; @@ -152,32 +149,12 @@ export const _OpenAI = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - + @@ -320,32 +297,12 @@ export const VercelAI = () => { > - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - + - - {conversations => - conversations.map((conversation, index) => ( - - )) - } - +