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<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>
   );
 };
-
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<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>
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<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>
+          ))}
+    </>
+  );
 };
diff --git a/stories/Chat.stories.tsx b/stories/Chat.stories.tsx
index 6778bb7..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';
@@ -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>
diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx
index 8df57d1..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 {
@@ -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
diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx
index 77626e1..702d8bc 100644
--- a/stories/Console.stories.tsx
+++ b/stories/Console.stories.tsx
@@ -72,31 +72,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>
@@ -126,31 +106,11 @@ export const Embeds = () => {
       >
         <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>
@@ -181,32 +141,12 @@ export const DefaultSession = () => {
       >
         <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>
@@ -238,32 +178,12 @@ export const Loading = () => {
       >
         <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>
@@ -294,31 +214,11 @@ export const FileUploads = () => {
       >
         <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 allowedFiles={['.pdf', '.docx']} />
         </SessionMessagePanel>
       </Chat>
@@ -349,32 +249,12 @@ export const DefaultInputValue = () => {
       >
         <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>
@@ -415,17 +295,7 @@ export const UndeleteableSessions = () => {
 
         <SessionMessagePanel>
           <SessionMessagesHeader />
-          <SessionMessages>
-            {conversations =>
-              conversations.map((conversation, index) => (
-                <SessionMessage
-                  key={conversation.id}
-                  conversation={conversation}
-                  isLast={index === conversations.length - 1}
-                />
-              ))
-            }
-          </SessionMessages>
+          <SessionMessages />
           <ChatInput />
         </SessionMessagePanel>
       </Chat>
@@ -489,32 +359,12 @@ export const SessionGrouping = () => {
       >
         <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 placeholder="Send a message" />
         </SessionMessagePanel>
       </Chat>
@@ -560,32 +410,12 @@ export const HundredSessions = () => {
       <Chat viewType="console" sessions={hundredSessions}>
         <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>
@@ -635,32 +465,12 @@ export const HundredConversations = () => {
       >
         <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>
@@ -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 = () => {
       >
         <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>
@@ -847,32 +639,12 @@ export const MarkdownShowcase = () => {
       >
         <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>
@@ -938,32 +710,12 @@ export const CVEExample = () => {
       >
         <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>
@@ -1056,32 +808,12 @@ export const ConversationSources = () => {
       >
         <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>
@@ -1102,10 +834,15 @@ const CustomMessagesHeader: FC<any> = () => {
   );
 };
 
-const CustomMessageQuestion: FC<any> = ({ question }) => (
-  <span className="text-lg font-semibold text-blue-500">
-    This is my question: {question}
-  </span>
+const CustomMessageQuestion: FC<any> = ({ question, files }) => (
+  <>
+    <span className="text-lg font-semibold text-blue-500">
+      This is my question: {question}
+    </span>
+    <MessageFiles files={files}>
+      <CustomMessageFile />
+    </MessageFiles>
+  </>
 );
 
 const CustomMessageResponse: FC<any> = ({ response }) => (
@@ -1116,6 +853,7 @@ const CustomMessageResponse: FC<any> = ({ response }) => (
 
 const CustomMessageFile: FC<any> = ({ name, type }) => (
   <Chip size="small" className="rounded-full border border-gray-700">
+    <>{console.log('boop', name, type)}</>
     {name || type}
   </Chip>
 );
@@ -1240,12 +978,12 @@ export const CustomComponents = () => {
                   isLast={index === conversations.length - 1}
                   key={conversation.id}
                 >
-                  <MessageQuestion question={conversation.question}>
+                  <MessageQuestion
+                    question={conversation.question}
+                    files={conversation.files}
+                  >
                     <CustomMessageQuestion />
                   </MessageQuestion>
-                  <MessageFiles files={conversation.files}>
-                    <CustomMessageFile />
-                  </MessageFiles>
                   <MessageResponse response={conversation.response}>
                     <CustomMessageResponse />
                   </MessageResponse>
@@ -1343,32 +1081,12 @@ export const ImageFiles = () => {
       >
         <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>
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 = () => {
         >
           <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>
@@ -320,32 +297,12 @@ export const VercelAI = () => {
         >
           <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>