From f61f582a9b003c89636b692b1014683ac913440e Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Tue, 10 Jan 2023 18:48:14 -0600
Subject: [PATCH] Integrate Dashboard with Messages/Styling Changes

---
 website/src/components/FlaggableElement.tsx   |  6 +-
 website/src/components/Header/UserMenu.tsx    |  2 -
 .../src/components/Loading/LoadingScreen.jsx  | 16 ++----
 .../components/Messages/MessageTableEntry.tsx | 35 ++++++------
 .../Messages/MessageWithChildren.tsx          | 55 ++++++++++---------
 website/src/components/SideMenuLayout.tsx     |  2 +-
 website/src/components/Tasks/Task.tsx         |  2 +-
 website/src/pages/messages/[id]/index.tsx     | 35 +++++++-----
 website/src/pages/messages/index.tsx          |  6 +-
 website/src/styles/globals.css                |  1 +
 10 files changed, 86 insertions(+), 74 deletions(-)

diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx
index a7157c4a..c4b28735 100644
--- a/website/src/components/FlaggableElement.tsx
+++ b/website/src/components/FlaggableElement.tsx
@@ -34,6 +34,8 @@ interface textFlagLabels {
 }
 
 export const FlaggableElement = (props) => {
+  const backgroundColor = useColorModeValue("gray.200", "gray.700");
+
   const [isEditing, setIsEditing] = useBoolean();
   const flaggable_labels = props.flaggable_labels;
   const TEXT_LABEL_FLAGS =
@@ -93,10 +95,10 @@ export const FlaggableElement = (props) => {
     >
       <Grid templateColumns="1fr min-content" gap={2}>
         <PopoverAnchor>{props.children}</PopoverAnchor>
-        <Tooltip hasArrow label="Report" bg="red.600">
+        <Tooltip label="Report" bg="red.500">
           <div>
             <PopoverTrigger>
-              <Button h="full">
+              <Button h="full" bg={backgroundColor}>
                 <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
               </Button>
             </PopoverTrigger>
diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index c5ca92bd..2f59efb1 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -22,14 +22,12 @@ export function UserMenu() {
         href: "/dashboard",
         desc: "Dashboard",
         icon: FiLayout,
-        //For future use
       },
       {
         name: "Account Settings",
         href: "/account",
         desc: "Account Settings",
         icon: FiSettings,
-        //For future use
       },
     ];
     return (
diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
index 3595b3c4..4674acf7 100644
--- a/website/src/components/Loading/LoadingScreen.jsx
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -1,18 +1,14 @@
-import { Progress } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
+import { Box, Progress, Text } from "@chakra-ui/react";
 
 export const LoadingScreen = ({ text = "Loading..." } = {}) => {
-  const { colorMode } = useColorMode();
-  const mainClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   return (
-    <div className={`h-full ${mainClasses}`}>
+    <Box width="full">
       <Progress size="sm" isIndeterminate />
       {text && (
-        <div className="flex h-full">
-          <div className="text-xl font-bold  mx-auto my-auto">{text}</div>
-        </div>
+        <Box width="full">
+          <Text fontFamily="Inter">{text}</Text>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 };
diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index e9e8775a..6b02e3f5 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -1,6 +1,5 @@
-import { Avatar, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
+import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
-import NextLink from "next/link";
 import { FlaggableElement } from "src/components/FlaggableElement";
 import type { ValidLabel } from "src/types/Task";
 
@@ -15,22 +14,24 @@ interface MessageTableEntryProps {
   valid_labels: ValidLabel[];
 }
 export function MessageTableEntry(props: MessageTableEntryProps) {
-  const { item, idx, valid_labels } = props;
-  const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900");
+  const { item, valid_labels } = props;
+  const backgroundColor = useColorModeValue("gray.50", "gray.800");
 
   return (
-    <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`} flaggable_labels={valid_labels}>
-      <HStack>
-        <Avatar
-          name={`${boolean(item.is_assistant) ? "Assitant" : "User"}`}
-          src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
-        />
-        <LinkBox className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>
-          <NextLink href={`/messages/${item.id}`} passHref>
-            {item.text}
-          </NextLink>
-        </LinkBox>
-      </HStack>
-    </FlaggableElement>
+    <div>
+      <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`} flaggable_labels={valid_labels}>
+        <HStack>
+          <Avatar
+            size="sm"
+            name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
+            src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+          />
+
+          <LinkBox bg={backgroundColor} fontFamily="Inter" className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
+            <LinkOverlay href={`/messages/${item.id}`}>{item.text}</LinkOverlay>
+          </LinkBox>
+        </HStack>
+      </FlaggableElement>
+    </div>
   );
 }
diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
index 7e604dfa..1cd287b6 100644
--- a/website/src/components/Messages/MessageWithChildren.tsx
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -1,4 +1,4 @@
-import { Box, CircularProgress, Flex, HStack, StackDivider, StackProps, Text, TextProps } from "@chakra-ui/react";
+import { Box, CircularProgress, Stack, StackProps, Text, TextProps, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
 import { useState } from "react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
@@ -6,8 +6,9 @@ import fetcher from "src/lib/fetcher";
 import useSWR from "swr";
 
 const MessageHeaderProps: TextProps = {
-  align: "center",
   fontSize: "xl",
+  fontWeight: "bold",
+  fontFamily: "Inter",
   py: "2",
 };
 
@@ -15,7 +16,6 @@ const MessageStackProps: StackProps = {
   spacing: "2",
   alignItems: "start",
   justifyContent: "center",
-  divider: <StackDivider />,
 };
 
 interface MessageWithChildrenProps {
@@ -26,6 +26,9 @@ interface MessageWithChildrenProps {
 }
 
 export function MessageWithChildren(props: MessageWithChildrenProps) {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const childBackgroundColor = useColorModeValue("gray.200", "gray.800");
+
   const { id, depth, maxDepth, isOnlyChild = true } = props;
 
   const [message, setMessage] = useState(null);
@@ -60,40 +63,42 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
     <>
       {message && (
         <>
-          <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} valid_labels={[]} />
-              </Box>
+          <Box pb={isFirstOrOnly ? "4" : "0"}>
+            <Text textAlign="left" {...MessageHeaderProps}>
+              {isFirst ? "Message" : depth === 1 ? "Children" : "Ancestor"}
+            </Text>
+            <Box width="fit-content" bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base">
+              <MessageTableEntry item={message} idx={1} valid_labels={[]} />
             </Box>
-          </Flex>
+          </Box>
         </>
       )}
       {children && Array.isArray(children) && children.length > 0 ? (
         renderRecursive ? (
-          <HStack {...MessageStackProps}>
-            {children.map((item, idx) => (
-              <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
-                <MessageWithChildren
-                  id={item.id}
-                  depth={depth ? depth + 1 : 1}
-                  maxDepth={maxDepth}
-                  isOnlyChild={children.length === 1 && isOnlyChild}
-                />
-              </Box>
-            ))}
-          </HStack>
+          <Stack {...MessageStackProps}>
+            <Box bg={childBackgroundColor} padding="4" borderRadius="xl">
+              {children.map((item, idx) => (
+                <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                  <MessageWithChildren
+                    id={item.id}
+                    depth={depth ? depth + 1 : 1}
+                    maxDepth={maxDepth}
+                    isOnlyChild={children.length === 1 && isOnlyChild}
+                  />
+                </Box>
+              ))}
+            </Box>
+          </Stack>
         ) : (
           <>
             <Text {...MessageHeaderProps}>{isFirstOrOnly ? "Children" : "Ancestor"}</Text>
-            <HStack {...MessageStackProps}>
+            <Stack {...MessageStackProps}>
               {children.map((item, idx) => (
-                <Box maxWidth="container.sm" flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
                   <MessageTableEntry item={item} idx={idx * 2} valid_labels={[]} />
                 </Box>
               ))}
-            </HStack>
+            </Stack>
           </>
         )
       ) : (
diff --git a/website/src/components/SideMenuLayout.tsx b/website/src/components/SideMenuLayout.tsx
index ae8cfbc2..d69b64d4 100644
--- a/website/src/components/SideMenuLayout.tsx
+++ b/website/src/components/SideMenuLayout.tsx
@@ -16,7 +16,7 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
         <Box className="p-6 sm:pr-0">
           <SideMenu buttonOptions={props.menuButtonOptions} />
         </Box>
-        <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">{props.children}</Box>
+        <Box className="flex flex-col overflow-y-auto p-6 sm:pl-0 gap-14">{props.children}</Box>
       </Box>
     </Box>
   );
diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task.tsx
index e95fe3e2..fccea5eb 100644
--- a/website/src/components/Tasks/Task.tsx
+++ b/website/src/components/Tasks/Task.tsx
@@ -10,7 +10,7 @@ export const Task = ({ tasks, trigger, mutate }) => {
   const task = tasks[0].task;
 
   const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
 
   const { trigger: sendRejection } = useSWRMutation("/api/reject_task", poster, {
     onSuccess: async () => {
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index 933c7508..173b38c8 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -1,6 +1,7 @@
-import { Box, Container, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
@@ -8,7 +9,7 @@ import fetcher from "src/lib/fetcher";
 import useSWR from "swr";
 
 const MessageDetail = ({ id }) => {
-  const mainBg = useColorModeValue("bg-slate-300", "bg-slate-900");
+  const backgroundColor = useColorModeValue("white", "gray.700");
 
   const [parent, setParent] = useState(null);
 
@@ -22,7 +23,11 @@ const MessageDetail = ({ id }) => {
   });
 
   if (isLoadingParent) {
-    return <LoadingScreen text="Loading..." />;
+    return (
+      <Box className="w-full">
+        <LoadingScreen text="Loading..." />
+      </Box>
+    );
   }
   return (
     <>
@@ -33,23 +38,26 @@ const MessageDetail = ({ id }) => {
           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 className={`${mainBg}`}>
-        <Container w="100%" pt={[2, 2, 4, 4]}>
+      <Box width="full">
+        <Box>
           {parent && (
             <>
-              <Text align="center" fontSize="xl">
-                Parent
-              </Text>
-              <Box rounded="lg" p="2">
-                <MessageTableEntry item={parent} idx={1} valid_labels={[]} />
+              <Box pb="4">
+                <Text fontFamily="Inter" fontWeight="bold" fontSize="xl" pb="2">
+                  Parent
+                </Text>
+                <Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
+                  {" "}
+                  <MessageTableEntry item={parent} idx={1} valid_labels={[]} />
+                </Box>
               </Box>
             </>
           )}
-        </Container>
-        <Box pb="4" maxW="full" px="2">
+        </Box>
+        <Box pb="4">
           <MessageWithChildren id={id} maxDepth={2} />
         </Box>
-      </main>
+      </Box>
     </>
   );
 };
@@ -59,4 +67,5 @@ MessageDetail.getInitialProps = async ({ query }) => {
   return { id };
 };
 
+MessageDetail.getLayout = (page) => getDashboardLayout(page);
 export default MessageDetail;
diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
index ed48d47b..dd5df7da 100644
--- a/website/src/pages/messages/index.tsx
+++ b/website/src/pages/messages/index.tsx
@@ -40,10 +40,10 @@ const MessagesDashboard = () => {
         <title>Messages - Open Assistant</title>
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
-      <SimpleGrid columns={[1, 1, 1, 2]} gap={4}>
+      <SimpleGrid fontFamily="Inter" columns={[1, 1, 1, 2]} gap={4}>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            Most recent messages
+            Recent messages
           </Text>
           <Box
             backgroundColor={boxBgColor}
@@ -61,7 +61,7 @@ const MessagesDashboard = () => {
         </Box>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            Your most recent messages
+            Your recent messages
           </Text>
           <Box
             backgroundColor={boxBgColor}
diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
index 7f168bbe..48e7cad9 100644
--- a/website/src/styles/globals.css
+++ b/website/src/styles/globals.css
@@ -10,6 +10,7 @@
     font-named-instance: "Regular";
     src: url("/fonts/Inter-roman.var.woff2") format("woff2");
 }
+
 @font-face {
     font-family: "Inter";
     font-weight: 100 900;