#18 Simplify SessionGroups and SessionMessages for basic implementation

src/SessionMessages/SessionMessage/MessageQuestion.tsx

@@ -20,37 +20,40 @@ export interface MessageQuestionProps extends PropsWithChildren {
 }
 
 export const MessageQuestion: FC<MessageQuestionProps> = ({
-  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 (
-    <Comp className={cn(theme.messages.message.question, {
-      [theme.messages.message.overlay]: isLong && !expanded
-    })}>
-      <MessageFiles files={files} />
+    <Comp
+      className={cn(theme.messages.message.question, {
+        [theme.messages.message.overlay]: isLong && !expanded
+      })}
+      {...props}
+    >
       {children || (
-        <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
-          {question}
-        </Markdown>
-      )}
-      {isLong && !expanded && (
-        <Button
-          variant="link"
-          size="small"
-          className={theme.messages.message.expand}
-          onClick={() => setExpanded(true)}
-        >
-          Show more
-        </Button>
+        <>
+          <MessageFiles files={files} />
+          <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
+            {question}
+          </Markdown>
+          {isLong && !expanded && (
+            <Button
+              variant="link"
+              size="small"
+              className={theme.messages.message.expand}
+              onClick={() => setExpanded(true)}
+            >
+              Show more
+            </Button>
+          )}
+        </>
       )}
     </Comp>
   );
 };
-

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<SessionMessagesProps> = ({
             requestAnimationFrame(() => setIsAnimating(false));
           }}
         >
-          {children(convosToRender)}
+          {children
+            ? children(convosToRender)
+            : convosToRender.map((conversation, index) => (
+                <SessionMessage
+                  key={conversation.id}
+                  conversation={conversation}
+                  isLast={index === conversation.length - 1}
+                />
+              ))}
         </motion.div>
       </AnimatePresence>
     </div>

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<SessionGroupsProps> = ({ children }) => {
   const { sessions } = useContext(ChatContext);
   const groups = useMemo(() => groupSessionsByDate(sessions), [sessions]);
 
-  return <>{children(groups)}</>;
+  return (
+    <>
+      {children
+        ? children(groups)
+        : groups.map(({ heading, sessions }) => (
+            <SessionsGroup heading={heading}>
+              {sessions.map(session => (
+                <SessionListItem key={session.id} session={session} />
+              ))}
+            </SessionsGroup>
+          ))}
+    </>
+  );
 };

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';
@@ -67,17 +61,7 @@ export const Compact = () => {
         onDeleteSession={() => alert('delete!')}
       >
         <SessionMessagePanel>
-          <SessionMessages>
-            {conversations =>
-              conversations.map((conversation, index) => (
-                <SessionMessage
-                  key={conversation.id}
-                  conversation={conversation}
-                  isLast={index === conversations.length - 1}
-                />
-              ))
-            }
-          </SessionMessages>
+          <SessionMessages />
           <ChatInput />
         </SessionMessagePanel>
       </Chat>
@@ -129,17 +113,7 @@ export const FullScreen = () => {
         onDeleteSession={() => alert('delete!')}
       >
         <SessionMessagePanel>
-          <SessionMessages>
-            {conversations =>
-              conversations.map((conversation, index) => (
-                <SessionMessage
-                  key={conversation.id}
-                  conversation={conversation}
-                  isLast={index === conversations.length - 1}
-                />
-              ))
-            }
-          </SessionMessages>
+          <SessionMessages />
           <ChatInput />
         </SessionMessagePanel>
       </Chat>

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 {
@@ -68,31 +65,11 @@ export const Basic = () => {
       >
         <SessionsList>
           <NewSessionButton />
-          <SessionGroups>
-            {groups =>
-              groups.map(({ heading, sessions }) => (
-                <SessionsGroup heading={heading} key={heading}>
-                  {sessions.map(s => (
-                    <SessionListItem key={s.id} session={s} />
-                  ))}
-                </SessionsGroup>
-              ))
-            }
-          </SessionGroups>
+          <SessionGroups />
         </SessionsList>
         <SessionMessagePanel>
           <SessionMessagesHeader />
-          <SessionMessages>
-            {conversations =>
-              conversations.map((conversation, index) => (
-                <SessionMessage
-                  key={conversation.id}
-                  conversation={conversation}
-                  isLast={index === conversations.length - 1}
-                />
-              ))
-            }
-          </SessionMessages>
+          <SessionMessages />
           <ChatInput />
         </SessionMessagePanel>
       </Chat>
@@ -118,17 +95,7 @@ export const Empty = () => {
       >
         <SessionsList>
           <NewSessionButton />
-          <SessionGroups>
-            {groups =>
-              groups.map(({ heading, sessions }) => (
-                <SessionsGroup heading={heading} key={heading}>
-                  {sessions.map(s => (
-                    <SessionListItem key={s.id} session={s} />
-                  ))}
-                </SessionsGroup>
-              ))
-            }
-          </SessionGroups>
+          <SessionGroups />
         </SessionsList>
         <div className="flex-1 h-full flex flex-col">
           <SessionMessages