scrollable message list with sticky conversation header

layouts/LayoutDefault.tsx

@@ -2,11 +2,13 @@ import "@mantine/core/styles.css";
 import { navigate } from "vike/client/router";
 import {
   AppShell,
+  Box,
   Burger,
   Group,
   Image,
   MantineProvider,
   NavLink,
+  ScrollArea,
   Title,
 } from "@mantine/core";
 import {
@@ -137,7 +139,19 @@ export default function LayoutDefault({
               <NavLink href="/" label="Welcome" active={urlPathname === "/"} />
               <NavLinkChat key="chat-new" />
             </AppShell.Navbar>
-            <AppShell.Main> {children} </AppShell.Main>
+            <AppShell.Main
+              styles={{
+                main: {
+                  height: "100vh",
+                  overflow: "hidden",
+                },
+              }}
+            >
+              <Box h="100%" w="100%">
+                {" "}
+                {children}{" "}
+              </Box>
+            </AppShell.Main>
           </AppShell>
         </MantineProvider>
       </TRPCProvider>

pages/chat/@id/+Page.tsx

@@ -496,8 +496,8 @@ export default function ChatPage() {
   }
 
   return (
-    <Box>
+    <Box h="100%" w="100%" style={{ display: "flex", flexDirection: "column" }}>
-      <Group justify="flex-start" gap={"sm"}>
+      <Group justify="flex-start" gap={"sm"} w="100%">
         <TextInput
           inputSize="50"
           description={`Conversation #${conversationId}`}
@@ -532,7 +532,15 @@ export default function ChatPage() {
           <StatusMessage sendMessageStatus={sendMessageStatus} />
         )}
       </Group>
-      <Tabs defaultValue="message">
+      <Tabs
+        defaultValue="message"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          overflow: "hidden",
+        }}
+      >
         <Tabs.List>
           <Tabs.Tab value="message">Message</Tabs.Tab>
           <Tabs.Tab value="system-prompt">System Prompt</Tabs.Tab>
@@ -540,35 +548,39 @@ export default function ChatPage() {
           <Tabs.Tab value="facts">Facts</Tabs.Tab>
           <Tabs.Tab value="fact-triggers">Fact Triggers</Tabs.Tab>
         </Tabs.List>
-        <Tabs.Panel value="message">
+        <Tabs.Panel value="message" style={{ flex: 1, overflow: "hidden" }}>
-          <Messages />
+          <Stack gap="md" justify="space-between" h="100%">
-          <Textarea
+            <ScrollArea scrollbars="y" style={{ flex: 1 }}>
-            resize="vertical"
+              <Messages />
-            placeholder="Type your message here..."
+            </ScrollArea>
-            value={message}
+            <Textarea
-            disabled={loading}
+              resize="vertical"
-            onChange={(e) => setMessage(e.target.value)}
+              placeholder="Type your message here..."
-            onKeyDown={async (e) => {
+              value={message}
-              if (e.key === "Enter") {
+              disabled={loading}
-                e.preventDefault();
+              onChange={(e) => setMessage(e.target.value)}
-                setLoading(true);
+              onKeyDown={async (e) => {
-                await sendSubscriptionMessage({
+                if (e.key === "Enter") {
-                  conversationId,
+                  e.preventDefault();
-                  messages: [
+                  setLoading(true);
-                    ...(messages || []),
+                  await sendSubscriptionMessage({
-                    {
+                    conversationId,
-                      role: "user" as const,
+                    messages: [
-                      parts: [{ type: "text", text: message }],
+                      ...(messages || []),
-                    } as DraftMessage,
+                      {
-                  ],
+                        role: "user" as const,
-                  systemPrompt,
+                        parts: [{ type: "text", text: message }],
-                  parameters,
+                      } as DraftMessage,
-                });
+                    ],
-                setMessage("");
+                    systemPrompt,
-                setLoading(false);
+                    parameters,
-              }
+                  });
-            }}
+                  setMessage("");
-          />
+                  setLoading(false);
+                }
+              }}
+            />
+          </Stack>
         </Tabs.Panel>
         <Tabs.Panel value="system-prompt">
           <Textarea