From d0bc72076121d58f8e2605f42e69904465a941ba Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Thu, 5 Jan 2023 12:17:45 +0100
Subject: [PATCH 1/9] inital try for navigation messages trees

should be redone probably in a recursive way...
---
 .../components/Messages/MessageTableEntry.tsx | 12 ++-
 .../src/pages/api/messages/[id]/children.ts   | 27 +++++++
 .../pages/api/messages/[id]/conversation.ts   | 27 +++++++
 website/src/pages/api/messages/[id]/index.ts  | 27 +++++++
 website/src/pages/api/messages/[id]/parent.ts | 48 +++++++++++
 .../api/messages/{index.tsx => index.ts}      |  0
 .../pages/api/messages/{user.tsx => user.ts}  |  0
 website/src/pages/messages/[id]/index.tsx     | 80 +++++++++++++++++++
 8 files changed, 220 insertions(+), 1 deletion(-)
 create mode 100644 website/src/pages/api/messages/[id]/children.ts
 create mode 100644 website/src/pages/api/messages/[id]/conversation.ts
 create mode 100644 website/src/pages/api/messages/[id]/index.ts
 create mode 100644 website/src/pages/api/messages/[id]/parent.ts
 rename website/src/pages/api/messages/{index.tsx => index.ts} (100%)
 rename website/src/pages/api/messages/{user.tsx => user.ts} (100%)
 create mode 100644 website/src/pages/messages/[id]/index.tsx

diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index 2bc17201..d272b960 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -3,7 +3,17 @@ import { boolean } from "boolean";
 import NextLink from "next/link";
 import { FlaggableElement } from "../FlaggableElement";
 
-export function MessageTableEntry({ item, idx }) {
+interface Message {
+  text: string;
+  id: string;
+  is_assistant: boolean;
+}
+interface MessageTableEntryProps {
+  item: Message;
+  idx: number;
+}
+export function MessageTableEntry(props: MessageTableEntryProps) {
+  const { item, idx } = props;
   const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900");
 
   return (
diff --git a/website/src/pages/api/messages/[id]/children.ts b/website/src/pages/api/messages/[id]/children.ts
new file mode 100644
index 00000000..9c8fb84a
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/children.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/children`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+  const messages = await messagesRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(messages);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/[id]/conversation.ts b/website/src/pages/api/messages/[id]/conversation.ts
new file mode 100644
index 00000000..6fa8feb9
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/conversation.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/conversation`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+  const messages = await messagesRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(messages);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/[id]/index.ts b/website/src/pages/api/messages/[id]/index.ts
new file mode 100644
index 00000000..8e056532
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/index.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+  const message = await messageRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(message);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/[id]/parent.ts b/website/src/pages/api/messages/[id]/parent.ts
new file mode 100644
index 00000000..05a69cfa
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/parent.ts
@@ -0,0 +1,48 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  if(!id){
+    res.status(400).end()
+    return;
+  }
+
+  const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+
+  const message = await messageRes.json();
+
+  if(!message.parent_id){
+    res.status(404).end();
+    return;
+  }
+
+  const parentRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${message.parent_id}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+
+  const parent = await parentRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(parent);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/index.tsx b/website/src/pages/api/messages/index.ts
similarity index 100%
rename from website/src/pages/api/messages/index.tsx
rename to website/src/pages/api/messages/index.ts
diff --git a/website/src/pages/api/messages/user.tsx b/website/src/pages/api/messages/user.ts
similarity index 100%
rename from website/src/pages/api/messages/user.tsx
rename to website/src/pages/api/messages/user.ts
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
new file mode 100644
index 00000000..8816fcba
--- /dev/null
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -0,0 +1,80 @@
+import { Box, Container, Flex, HStack, useColorModeValue } from "@chakra-ui/react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import useSWRImmutable from "swr/immutable";
+
+import fetcher from "src/lib/fetcher";
+import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
+import { colors } from "styles/Theme/colors";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+
+const MessageDetail = () => {
+  const bg = useColorModeValue("white", colors.dark.bg);
+  const router = useRouter()
+  const { id } = router.query
+  const [message, setMessage] = useState(null);
+  const [parent, setParent]= useState(null);
+  const [children, setChildren] = useState(null);
+
+  const { isLoading } = useSWRImmutable(`/api/messages/${id}`, fetcher, {
+    onSuccess: (data) => {
+      setMessage(data);
+    },
+  });
+
+  const { isLoading: isLoadingChildren } = useSWRImmutable(`/api/messages/${id}/children`, fetcher, {
+    onSuccess: (data) => {
+      setChildren(data);
+    },
+  });
+
+  const { isLoading: isLoadingParent } = useSWRImmutable(`/api/messages/${id}/parent`, fetcher, {
+
+    onSuccess: (data) => {
+      console.log(data);
+      setParent(data);
+    },
+    onError: (err, key, config) => {
+      console.log(parent);
+    }
+  });
+
+  if (isLoading || isLoadingChildren || isLoadingParent) {
+    return <LoadingScreen text="Loading..." />;
+  }
+  return <>
+    <Head>
+      <title>Open Assistant</title>
+      <meta
+        name="description"
+        content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+      />
+    </Head>
+    <main>
+      <Container>
+      {parent && 
+        <Box my="3" bg={bg} rounded='lg' p="4">
+            <MessageTableEntry item={parent} idx={1} />
+          </Box>
+        }
+        {message &&
+          <Box my="3" bg={bg} rounded='lg' p="4">
+            <MessageTableEntry item={message} idx={1} />
+          </Box>
+        }
+          </Container>
+          {children && Array.isArray(children) &&
+          <HStack spacing={8} alignItems="start">
+            {children.map((item, idx) =>
+              <Box bg={bg} rounded='lg' flex="1" p="4">
+                <MessageTableEntry item={item} idx={idx * 2} />
+              </Box>
+          )}
+          </HStack>
+          }
+    </main>
+  </>
+}
+
+export default MessageDetail;
\ No newline at end of file

From 1d46b3132ae2b73590a4d2c5b0a0c44c3d984204 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Thu, 5 Jan 2023 18:54:38 +0100
Subject: [PATCH 2/9] hacky solution for a bug

https://dev.to/wh1zk1d/swr-dynamic-routes-in-next-js-3cbl
---
 website/src/pages/messages/[id]/index.tsx | 64 ++++++++++++++---------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index 8816fcba..0b712801 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Flex, HStack, useColorModeValue } from "@chakra-ui/react";
+import { Box, Container, Text, HStack, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -13,31 +13,36 @@ const MessageDetail = () => {
   const bg = useColorModeValue("white", colors.dark.bg);
   const router = useRouter()
   const { id } = router.query
+
+  /** State arrays of messages */
   const [message, setMessage] = useState(null);
-  const [parent, setParent]= useState(null);
+  const [parent, setParent] = useState(null);
   const [children, setChildren] = useState(null);
 
-  const { isLoading } = useSWRImmutable(`/api/messages/${id}`, fetcher, {
+  /** Fetching functions */
+  const { isLoading } = useSWRImmutable(id ? `/api/messages/${id}` : null, fetcher, {
     onSuccess: (data) => {
       setMessage(data);
     },
+    onError: (err, key, config) => {
+      setMessage(null);
+    },
   });
-
-  const { isLoading: isLoadingChildren } = useSWRImmutable(`/api/messages/${id}/children`, fetcher, {
+  const { isLoading: isLoadingChildren } = useSWRImmutable(id ? `/api/messages/${id}/children` : null, fetcher, {
     onSuccess: (data) => {
       setChildren(data);
     },
+    onError: (err, key, config) => {
+      setChildren(null);
+    },
   });
-
-  const { isLoading: isLoadingParent } = useSWRImmutable(`/api/messages/${id}/parent`, fetcher, {
-
+  const { isLoading: isLoadingParent } = useSWRImmutable(id ? `/api/messages/${id}/parent` : null, fetcher, {
     onSuccess: (data) => {
-      console.log(data);
       setParent(data);
     },
     onError: (err, key, config) => {
-      console.log(parent);
-    }
+      setParent(null);
+    },
   });
 
   if (isLoading || isLoadingChildren || isLoadingParent) {
@@ -52,27 +57,38 @@ const MessageDetail = () => {
       />
     </Head>
     <main>
-      <Container>
-      {parent && 
-        <Box my="3" bg={bg} rounded='lg' p="4">
+      <Container w='100%'>
+        {parent &&
+        <>
+        <Text align="center" fontSize='xl' pt="4">Parent</Text>
+          <Box my="3" bg={bg} rounded='lg' pb="4" px="4">
             <MessageTableEntry item={parent} idx={1} />
           </Box>
+          </>
         }
         {message &&
-          <Box my="3" bg={bg} rounded='lg' p="4">
+        <>
+        <Text align="center" fontSize='xl'>Message</Text>
+          <Box my="3" bg={bg} rounded='lg'pb="4" px="4">
             <MessageTableEntry item={message} idx={1} />
           </Box>
+          </>
         }
-          </Container>
-          {children && Array.isArray(children) &&
-          <HStack spacing={8} alignItems="start">
-            {children.map((item, idx) =>
-              <Box bg={bg} rounded='lg' flex="1" p="4">
-                <MessageTableEntry item={item} idx={idx * 2} />
-              </Box>
+      </Container>
+      {children && Array.isArray(children) &&
+      <>
+      <Text align="center" fontSize='xl'>Children</Text>
+        <HStack spacing={8} alignItems="start" justifyContent="center">
+          {children.map((item, idx) =>
+          <Box maxWidth="container.sm" flex="1" px="6">
+            <Box my="3" bg={bg} rounded='lg' pb="4" px="6" >
+              <MessageTableEntry item={item} idx={idx * 2} key={idx} />
+            </Box>
+          </Box>
           )}
-          </HStack>
-          }
+        </HStack>
+        </>
+      }
     </main>
   </>
 }

From 1bd0336d2725c00514a11795a5270c7292e6844d Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Thu, 5 Jan 2023 19:02:00 +0100
Subject: [PATCH 3/9] bugfix

---
 website/src/pages/messages/[id]/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index 0b712801..f0714e10 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -75,14 +75,14 @@ const MessageDetail = () => {
           </>
         }
       </Container>
-      {children && Array.isArray(children) &&
+      {children && Array.isArray(children) && children.length > 0 &&
       <>
       <Text align="center" fontSize='xl'>Children</Text>
         <HStack spacing={8} alignItems="start" justifyContent="center">
           {children.map((item, idx) =>
-          <Box maxWidth="container.sm" flex="1" px="6">
+          <Box maxWidth="container.sm" flex="1" px="6" key={idx} >
             <Box my="3" bg={bg} rounded='lg' pb="4" px="6" >
-              <MessageTableEntry item={item} idx={idx * 2} key={idx} />
+              <MessageTableEntry item={item} idx={idx * 2} />
             </Box>
           </Box>
           )}

From a822db11a7a2a3e90e8f1fb8f375c6c8f41dc642 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Fri, 6 Jan 2023 11:55:31 +0100
Subject: [PATCH 4/9] pre-commit

---
 website/src/pages/api/messages/[id]/parent.ts |   6 +-
 website/src/pages/messages/[id]/index.tsx     | 100 ++++++++++--------
 2 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/website/src/pages/api/messages/[id]/parent.ts b/website/src/pages/api/messages/[id]/parent.ts
index 05a69cfa..de6fbac6 100644
--- a/website/src/pages/api/messages/[id]/parent.ts
+++ b/website/src/pages/api/messages/[id]/parent.ts
@@ -11,8 +11,8 @@ const handler = async (req, res) => {
 
   const { id } = req.query;
 
-  if(!id){
-    res.status(400).end()
+  if (!id) {
+    res.status(400).end();
     return;
   }
 
@@ -26,7 +26,7 @@ const handler = async (req, res) => {
 
   const message = await messageRes.json();
 
-  if(!message.parent_id){
+  if (!message.parent_id) {
     res.status(404).end();
     return;
   }
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index f0714e10..f1512d25 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -11,8 +11,8 @@ import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 
 const MessageDetail = () => {
   const bg = useColorModeValue("white", colors.dark.bg);
-  const router = useRouter()
-  const { id } = router.query
+  const router = useRouter();
+  const { id } = router.query;
 
   /** State arrays of messages */
   const [message, setMessage] = useState(null);
@@ -48,49 +48,57 @@ const MessageDetail = () => {
   if (isLoading || isLoadingChildren || isLoadingParent) {
     return <LoadingScreen text="Loading..." />;
   }
-  return <>
-    <Head>
-      <title>Open Assistant</title>
-      <meta
-        name="description"
-        content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
-      />
-    </Head>
-    <main>
-      <Container w='100%'>
-        {parent &&
-        <>
-        <Text align="center" fontSize='xl' pt="4">Parent</Text>
-          <Box my="3" bg={bg} rounded='lg' pb="4" px="4">
-            <MessageTableEntry item={parent} idx={1} />
-          </Box>
-          </>
-        }
-        {message &&
-        <>
-        <Text align="center" fontSize='xl'>Message</Text>
-          <Box my="3" bg={bg} rounded='lg'pb="4" px="4">
-            <MessageTableEntry item={message} idx={1} />
-          </Box>
-          </>
-        }
-      </Container>
-      {children && Array.isArray(children) && children.length > 0 &&
-      <>
-      <Text align="center" fontSize='xl'>Children</Text>
-        <HStack spacing={8} alignItems="start" justifyContent="center">
-          {children.map((item, idx) =>
-          <Box maxWidth="container.sm" flex="1" px="6" key={idx} >
-            <Box my="3" bg={bg} rounded='lg' pb="4" px="6" >
-              <MessageTableEntry item={item} idx={idx * 2} />
-            </Box>
-          </Box>
+  return (
+    <>
+      <Head>
+        <title>Open Assistant</title>
+        <meta
+          name="description"
+          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+        />
+      </Head>
+      <main>
+        <Container w="100%">
+          {parent && (
+            <>
+              <Text align="center" fontSize="xl" pt="4">
+                Parent
+              </Text>
+              <Box my="3" bg={bg} rounded="lg" pb="4" px="4">
+                <MessageTableEntry item={parent} idx={1} />
+              </Box>
+            </>
           )}
-        </HStack>
-        </>
-      }
-    </main>
-  </>
-}
+          {message && (
+            <>
+              <Text align="center" fontSize="xl">
+                Message
+              </Text>
+              <Box my="3" bg={bg} rounded="lg" pb="4" px="4">
+                <MessageTableEntry item={message} idx={1} />
+              </Box>
+            </>
+          )}
+        </Container>
+        {children && Array.isArray(children) && children.length > 0 && (
+          <>
+            <Text align="center" fontSize="xl">
+              Children
+            </Text>
+            <HStack spacing={8} alignItems="start" justifyContent="center">
+              {children.map((item, idx) => (
+                <Box maxWidth="container.sm" flex="1" px="6" key={idx}>
+                  <Box my="3" bg={bg} rounded="lg" pb="4" px="6">
+                    <MessageTableEntry item={item} idx={idx * 2} />
+                  </Box>
+                </Box>
+              ))}
+            </HStack>
+          </>
+        )}
+      </main>
+    </>
+  );
+};
 
-export default MessageDetail;
\ No newline at end of file
+export default MessageDetail;

From 2db310ab060b82c3f81d0cd19d85046f4344ab59 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Fri, 6 Jan 2023 15:53:18 +0100
Subject: [PATCH 5/9] (#309) Message navigation recursive

---
 .../Messages/MessageWithChildren.tsx          | 85 +++++++++++++++++++
 website/src/pages/messages/[id]/index.tsx     | 71 +++-------------
 2 files changed, 99 insertions(+), 57 deletions(-)
 create mode 100644 website/src/components/Messages/MessageWithChildren.tsx

diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
new file mode 100644
index 00000000..f59017c7
--- /dev/null
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -0,0 +1,85 @@
+import { Box, CircularProgress, Flex, HStack, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import useSWR from "swr";
+
+import fetcher from "src/lib/fetcher";
+import { MessageTableEntry } from "./MessageTableEntry";
+
+interface MessageWithChildrenProps {
+    id: string;
+    depth?: number;
+    maxDepth?: number;
+}
+
+export function MessageWithChildren(props: MessageWithChildrenProps) {
+    const { id, depth, maxDepth } = props;
+
+    const [message, setMessage] = useState(null);
+    const [children, setChildren] = useState(null);
+
+    const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, fetcher, {
+        onSuccess: (data) => {
+            setMessage(data);
+        },
+        onError: (err, key, config) => {
+            setMessage(null);
+        },
+    });
+    const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, fetcher, {
+        onSuccess: (data) => {
+            setChildren(data);
+        },
+        onError: (err, key, config) => {
+            setChildren(null);
+        },
+    });
+
+    const renderRecursive = maxDepth && ((depth && (depth < maxDepth)) || !depth);
+
+    if (isLoading || isLoadingChildren) {
+        return (<CircularProgress isIndeterminate />)
+    }
+
+    return (
+        <>
+            {message && (<>
+                <Text align="center" fontSize="xl">
+                    {(depth === 0 || !depth) ? "Message" : depth === 1 ? "Children" : "Ancestor"}
+                </Text>
+                <Flex justifyContent="center">
+                    <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
+                        <Box rounded="lg" p="2">
+                            <MessageTableEntry item={message} idx={1} />
+                        </Box>
+                    </Box>
+                </Flex>
+            </>
+            )}
+            {children && Array.isArray(children) && children.length > 0 ?
+                renderRecursive ?
+                    <HStack spacing={8} alignItems="start" justifyContent="center">
+                        {children.map((item, idx) => (
+                            <Box flex="1">
+                                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} key={`recursiveMessageWChildren_${idx}`} />
+                            </Box>))}
+                    </HStack> :
+                    (
+                        <>
+                            <Text align="center" fontSize="xl">
+                                {(depth === 0 || !depth) ? "Children" : "Ancestor"}
+                            </Text>
+                            <HStack spacing={8} alignItems="start" justifyContent="center">
+                                {children.map((item, idx) => (
+                                    <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
+                                        <Box rounded="lg" p="2">
+                                            <MessageTableEntry item={item} idx={idx * 2} />
+                                        </Box>
+                                    </Box>
+                                ))}
+                            </HStack>
+                        </>
+                    ) : <></>}
+        </>);
+
+}
+
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index f1512d25..d455f256 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -1,42 +1,22 @@
-import { Box, Container, Text, HStack, useColorModeValue } from "@chakra-ui/react";
+import { Box, Container, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import useSWRImmutable from "swr/immutable";
+import { useState } from "react";
+import useSWR from "swr";
 
 import fetcher from "src/lib/fetcher";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
-import { colors } from "styles/Theme/colors";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
 
 const MessageDetail = () => {
-  const bg = useColorModeValue("white", colors.dark.bg);
+  const mainBg = useColorModeValue("bg-slate-300", "bg-slate-900");
   const router = useRouter();
   const { id } = router.query;
 
-  /** State arrays of messages */
-  const [message, setMessage] = useState(null);
   const [parent, setParent] = useState(null);
-  const [children, setChildren] = useState(null);
 
-  /** Fetching functions */
-  const { isLoading } = useSWRImmutable(id ? `/api/messages/${id}` : null, fetcher, {
-    onSuccess: (data) => {
-      setMessage(data);
-    },
-    onError: (err, key, config) => {
-      setMessage(null);
-    },
-  });
-  const { isLoading: isLoadingChildren } = useSWRImmutable(id ? `/api/messages/${id}/children` : null, fetcher, {
-    onSuccess: (data) => {
-      setChildren(data);
-    },
-    onError: (err, key, config) => {
-      setChildren(null);
-    },
-  });
-  const { isLoading: isLoadingParent } = useSWRImmutable(id ? `/api/messages/${id}/parent` : null, fetcher, {
+  const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, fetcher, {
     onSuccess: (data) => {
       setParent(data);
     },
@@ -45,7 +25,7 @@ const MessageDetail = () => {
     },
   });
 
-  if (isLoading || isLoadingChildren || isLoadingParent) {
+  if (isLoadingParent) {
     return <LoadingScreen text="Loading..." />;
   }
   return (
@@ -57,45 +37,22 @@ const MessageDetail = () => {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      <main>
-        <Container w="100%">
+      <main className={`${mainBg}`}>
+        <Container w="100%" pt={[2, 2, 4, 4]}>
           {parent && (
             <>
-              <Text align="center" fontSize="xl" pt="4">
+              <Text align="center" fontSize="xl">
                 Parent
               </Text>
-              <Box my="3" bg={bg} rounded="lg" pb="4" px="4">
+              <Box rounded="lg" p="2">
                 <MessageTableEntry item={parent} idx={1} />
               </Box>
             </>
           )}
-          {message && (
-            <>
-              <Text align="center" fontSize="xl">
-                Message
-              </Text>
-              <Box my="3" bg={bg} rounded="lg" pb="4" px="4">
-                <MessageTableEntry item={message} idx={1} />
-              </Box>
-            </>
-          )}
         </Container>
-        {children && Array.isArray(children) && children.length > 0 && (
-          <>
-            <Text align="center" fontSize="xl">
-              Children
-            </Text>
-            <HStack spacing={8} alignItems="start" justifyContent="center">
-              {children.map((item, idx) => (
-                <Box maxWidth="container.sm" flex="1" px="6" key={idx}>
-                  <Box my="3" bg={bg} rounded="lg" pb="4" px="6">
-                    <MessageTableEntry item={item} idx={idx * 2} />
-                  </Box>
-                </Box>
-              ))}
-            </HStack>
-          </>
-        )}
+        <Box pb="4">
+          <MessageWithChildren id={id} maxDepth={2} />
+        </Box>
       </main>
     </>
   );

From d292643ea6b36a9fcfb35b2a36858b1dbaca01c8 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Fri, 6 Jan 2023 15:57:20 +0100
Subject: [PATCH 6/9] (#309) pre-commit

---
 .../Messages/MessageWithChildren.tsx          | 143 ++++++++++--------
 1 file changed, 76 insertions(+), 67 deletions(-)

diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
index f59017c7..3b6f8649 100644
--- a/website/src/components/Messages/MessageWithChildren.tsx
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -6,80 +6,89 @@ import fetcher from "src/lib/fetcher";
 import { MessageTableEntry } from "./MessageTableEntry";
 
 interface MessageWithChildrenProps {
-    id: string;
-    depth?: number;
-    maxDepth?: number;
+  id: string;
+  depth?: number;
+  maxDepth?: number;
 }
 
 export function MessageWithChildren(props: MessageWithChildrenProps) {
-    const { id, depth, maxDepth } = props;
+  const { id, depth, maxDepth } = props;
 
-    const [message, setMessage] = useState(null);
-    const [children, setChildren] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [children, setChildren] = useState(null);
 
-    const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, fetcher, {
-        onSuccess: (data) => {
-            setMessage(data);
-        },
-        onError: (err, key, config) => {
-            setMessage(null);
-        },
-    });
-    const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, fetcher, {
-        onSuccess: (data) => {
-            setChildren(data);
-        },
-        onError: (err, key, config) => {
-            setChildren(null);
-        },
-    });
+  const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, fetcher, {
+    onSuccess: (data) => {
+      setMessage(data);
+    },
+    onError: (err, key, config) => {
+      setMessage(null);
+    },
+  });
+  const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, fetcher, {
+    onSuccess: (data) => {
+      setChildren(data);
+    },
+    onError: (err, key, config) => {
+      setChildren(null);
+    },
+  });
 
-    const renderRecursive = maxDepth && ((depth && (depth < maxDepth)) || !depth);
+  const renderRecursive = maxDepth && ((depth && depth < maxDepth) || !depth);
 
-    if (isLoading || isLoadingChildren) {
-        return (<CircularProgress isIndeterminate />)
-    }
+  if (isLoading || isLoadingChildren) {
+    return <CircularProgress isIndeterminate />;
+  }
 
-    return (
+  return (
+    <>
+      {message && (
         <>
-            {message && (<>
-                <Text align="center" fontSize="xl">
-                    {(depth === 0 || !depth) ? "Message" : depth === 1 ? "Children" : "Ancestor"}
-                </Text>
-                <Flex justifyContent="center">
-                    <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
-                        <Box rounded="lg" p="2">
-                            <MessageTableEntry item={message} idx={1} />
-                        </Box>
-                    </Box>
-                </Flex>
-            </>
-            )}
-            {children && Array.isArray(children) && children.length > 0 ?
-                renderRecursive ?
-                    <HStack spacing={8} alignItems="start" justifyContent="center">
-                        {children.map((item, idx) => (
-                            <Box flex="1">
-                                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} key={`recursiveMessageWChildren_${idx}`} />
-                            </Box>))}
-                    </HStack> :
-                    (
-                        <>
-                            <Text align="center" fontSize="xl">
-                                {(depth === 0 || !depth) ? "Children" : "Ancestor"}
-                            </Text>
-                            <HStack spacing={8} alignItems="start" justifyContent="center">
-                                {children.map((item, idx) => (
-                                    <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
-                                        <Box rounded="lg" p="2">
-                                            <MessageTableEntry item={item} idx={idx * 2} />
-                                        </Box>
-                                    </Box>
-                                ))}
-                            </HStack>
-                        </>
-                    ) : <></>}
-        </>);
-
+          <Text align="center" fontSize="xl">
+            {depth === 0 || !depth ? "Message" : depth === 1 ? "Children" : "Ancestor"}
+          </Text>
+          <Flex justifyContent="center">
+            <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
+              <Box rounded="lg" p="2">
+                <MessageTableEntry item={message} idx={1} />
+              </Box>
+            </Box>
+          </Flex>
+        </>
+      )}
+      {children && Array.isArray(children) && children.length > 0 ? (
+        renderRecursive ? (
+          <HStack spacing={8} alignItems="start" justifyContent="center">
+            {children.map((item, idx) => (
+              <Box flex="1">
+                <MessageWithChildren
+                  id={item.id}
+                  depth={depth ? depth + 1 : 1}
+                  maxDepth={maxDepth}
+                  key={`recursiveMessageWChildren_${idx}`}
+                />
+              </Box>
+            ))}
+          </HStack>
+        ) : (
+          <>
+            <Text align="center" fontSize="xl">
+              {depth === 0 || !depth ? "Children" : "Ancestor"}
+            </Text>
+            <HStack spacing={8} alignItems="start" justifyContent="center">
+              {children.map((item, idx) => (
+                <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
+                  <Box rounded="lg" p="2">
+                    <MessageTableEntry item={item} idx={idx * 2} />
+                  </Box>
+                </Box>
+              ))}
+            </HStack>
+          </>
+        )
+      ) : (
+        <></>
+      )}
+    </>
+  );
 }
-

From a1b0bb556116b72fc55f52b9836de4ac30f8b479 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Fri, 6 Jan 2023 16:50:25 +0100
Subject: [PATCH 7/9] moved key prop

---
 website/src/components/Messages/MessageWithChildren.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
index 3b6f8649..70d6c318 100644
--- a/website/src/components/Messages/MessageWithChildren.tsx
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -60,13 +60,8 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
         renderRecursive ? (
           <HStack spacing={8} alignItems="start" justifyContent="center">
             {children.map((item, idx) => (
-              <Box flex="1">
-                <MessageWithChildren
-                  id={item.id}
-                  depth={depth ? depth + 1 : 1}
-                  maxDepth={maxDepth}
-                  key={`recursiveMessageWChildren_${idx}`}
-                />
+              <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} />
               </Box>
             ))}
           </HStack>

From fa7d8ecfdef5feaed02322f6e76436cef51bc9d8 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Fri, 6 Jan 2023 17:01:27 +0100
Subject: [PATCH 8/9] Update index.tsx

---
 website/src/pages/messages/[id]/index.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index d455f256..bf7e97ea 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -9,10 +9,8 @@ import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
 
-const MessageDetail = () => {
+const MessageDetail = ({ id }) => {
   const mainBg = useColorModeValue("bg-slate-300", "bg-slate-900");
-  const router = useRouter();
-  const { id } = router.query;
 
   const [parent, setParent] = useState(null);
 
@@ -58,4 +56,9 @@ const MessageDetail = () => {
   );
 };
 
+MessageDetail.getInitialProps = async ({ query }) => {
+  const { id } = query;
+  return { id };
+};
+
 export default MessageDetail;

From 4f5a86430549d92e39224b7a71faa1c16e9d9634 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Sat, 7 Jan 2023 10:23:08 +0100
Subject: [PATCH 9/9] visual cleanup

---
 .../Messages/MessageWithChildren.tsx          | 52 ++++++++++++-------
 website/src/pages/messages/[id]/index.tsx     |  2 +-
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
index 70d6c318..8fcd8658 100644
--- a/website/src/components/Messages/MessageWithChildren.tsx
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -1,18 +1,33 @@
-import { Box, CircularProgress, Flex, HStack, Text } from "@chakra-ui/react";
+import { Box, CircularProgress, Flex, HStack, StackDivider, Text, TextProps, StackProps } from "@chakra-ui/react";
 import { useState } from "react";
 import useSWR from "swr";
 
 import fetcher from "src/lib/fetcher";
 import { MessageTableEntry } from "./MessageTableEntry";
+import { boolean } from "boolean";
+
+const MessageHeaderProps: TextProps = {
+  align: "center",
+  fontSize: "xl",
+  py: "2",
+};
+
+const MessageStackProps: StackProps = {
+  spacing: "2",
+  alignItems: "start",
+  justifyContent: "center",
+  divider: <StackDivider />,
+};
 
 interface MessageWithChildrenProps {
   id: string;
   depth?: number;
   maxDepth?: number;
+  isOnlyChild?: boolean;
 }
 
 export function MessageWithChildren(props: MessageWithChildrenProps) {
-  const { id, depth, maxDepth } = props;
+  const { id, depth, maxDepth, isOnlyChild = true } = props;
 
   const [message, setMessage] = useState(null);
   const [children, setChildren] = useState(null);
@@ -35,6 +50,8 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
   });
 
   const renderRecursive = maxDepth && ((depth && depth < maxDepth) || !depth);
+  const isFirst = depth === 0 || !depth;
+  const isFirstOrOnly = isFirst || boolean(isOnlyChild);
 
   if (isLoading || isLoadingChildren) {
     return <CircularProgress isIndeterminate />;
@@ -44,12 +61,10 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
     <>
       {message && (
         <>
-          <Text align="center" fontSize="xl">
-            {depth === 0 || !depth ? "Message" : depth === 1 ? "Children" : "Ancestor"}
-          </Text>
-          <Flex justifyContent="center">
-            <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
-              <Box rounded="lg" p="2">
+          <Text {...MessageHeaderProps}>{isFirst ? "Message" : depth === 1 ? "Children" : "Ancestor"}</Text>
+          <Flex justifyContent="center" pb="2">
+            <Box maxWidth="container.sm" flex="1" px={isFirstOrOnly ? [4, 6, 8, 9] : "0"}>
+              <Box px={isFirstOrOnly ? "2" : "0"}>
                 <MessageTableEntry item={message} idx={1} />
               </Box>
             </Box>
@@ -58,24 +73,25 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
       )}
       {children && Array.isArray(children) && children.length > 0 ? (
         renderRecursive ? (
-          <HStack spacing={8} alignItems="start" justifyContent="center">
+          <HStack {...MessageStackProps}>
             {children.map((item, idx) => (
               <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
-                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} />
+                <MessageWithChildren
+                  id={item.id}
+                  depth={depth ? depth + 1 : 1}
+                  maxDepth={maxDepth}
+                  isOnlyChild={children.length === 1 && isOnlyChild}
+                />
               </Box>
             ))}
           </HStack>
         ) : (
           <>
-            <Text align="center" fontSize="xl">
-              {depth === 0 || !depth ? "Children" : "Ancestor"}
-            </Text>
-            <HStack spacing={8} alignItems="start" justifyContent="center">
+            <Text {...MessageHeaderProps}>{isFirstOrOnly ? "Children" : "Ancestor"}</Text>
+            <HStack {...MessageStackProps}>
               {children.map((item, idx) => (
-                <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
-                  <Box rounded="lg" p="2">
-                    <MessageTableEntry item={item} idx={idx * 2} />
-                  </Box>
+                <Box maxWidth="container.sm" flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                  <MessageTableEntry item={item} idx={idx * 2} />
                 </Box>
               ))}
             </HStack>
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index bf7e97ea..e778e74a 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -48,7 +48,7 @@ const MessageDetail = ({ id }) => {
             </>
           )}
         </Container>
-        <Box pb="4">
+        <Box pb="4" maxW="full" px="2">
           <MessageWithChildren id={id} maxDepth={2} />
         </Box>
       </main>