add username

hack4impact-uiuc · Mar 30, 2024 · 9ff22d9 · 9ff22d9
1 parent e20f460
commit 9ff22d9
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 86 deletions.
diff --git a/app/components/ConversationMessages.tsx b/app/components/ConversationMessages.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { Box, Text, VStack, Button } from "@chakra-ui/react";
+import { Box, Text, VStack, Button, Center, Heading } from "@chakra-ui/react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -65,91 +65,101 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
 
   return (
     <VStack spacing={4} align="stretch" width="100%" mb={10}>
-      {messages.map((message, index) => (
-        <Box
-          key={index}
-          borderRadius="none"
-          borderWidth="1px"
-          pt={4}
-          pl={4}
-          pr={4}
-          pb={1}
-          borderColor={message.hidden ? "gray.300" : "black"}
-          alignSelf={message.role === "user" ? "flex-end" : "flex-start"}
-          maxWidth="100%"
-        >
-          <Text
-            fontWeight="bold"
-            mb={1}
-            color={message.hidden ? "gray.500" : "inherit"}
+      {messages.length === 0 ? (
+        <Center height="100%" width="100%">
+          <VStack>
+            <Heading pt={10} size="lg" color="gray.800">
+              HackGPT
+            </Heading>
+          </VStack>
+        </Center>
+      ) : (
+        messages.map((message, index) => (
+          <Box
+            key={index}
+            borderRadius="none"
+            borderWidth="1px"
+            pt={4}
+            pl={4}
+            pr={4}
+            pb={1}
+            borderColor={message.hidden ? "gray.300" : "black"}
+            alignSelf={message.role === "user" ? "flex-end" : "flex-start"}
+            maxWidth="100%"
           >
-            [{index}] {message.role === "user" ? userName : "Assistant"}
-          </Text>
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm, remarkMath]}
-            components={
-              {
-                p: ({ children }) => (
-                  <Text color={message.hidden ? "gray.500" : "inherit"}>
-                    {children}
-                  </Text>
-                ),
-                code({ node, className, children, ...props }) {
-                  const match = /language-(\w+)/.exec(className || "");
-                  return match ? (
-                    <Box overflowX="auto">
-                      <SyntaxHighlighter
-                        style={vs}
-                        language={match[1]}
-                        PreTag="div"
-                      >
-                        {String(children).replace(/\n$/, "")}
-                      </SyntaxHighlighter>
-                    </Box>
-                  ) : (
-                    <code
-                      className={className}
-                      style={{
-                        backgroundColor: "rgba(0, 0, 0, 0.05)",
-                        padding: "0.2em 0.4em",
-                        borderRadius: "3px",
-                      }}
-                      {...props}
-                    >
+            <Text
+              fontWeight="bold"
+              mb={1}
+              color={message.hidden ? "gray.500" : "inherit"}
+            >
+              [{index}] {message.role === "user" ? userName : "Assistant"}
+            </Text>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm, remarkMath]}
+              components={
+                {
+                  p: ({ children }) => (
+                    <Text color={message.hidden ? "gray.500" : "inherit"}>
                       {children}
-                    </code>
-                  );
-                },
-                math: ({ value }) => <BlockMath math={value} />,
-                inlineMath: ({ value }) => <InlineMath math={value} />,
-              } as Components & MathComponents
-            }
-          >
-            {message.content}
-          </ReactMarkdown>
-          <Button
-            size="xs"
-            variant="ghost"
-            onClick={() => handleHideMessage(index)}
-            ml={-1}
-            mt={4}
-            px={1}
-            color="gray.600"
-          >
-            {message.hidden ? "show" : "hide"}
-          </Button>
-          <Button
-            size="xs"
-            variant="ghost"
-            onClick={() => handleDeleteMessage(index)}
-            mt={4}
-            px={1}
-            color="gray.600"
-          >
-            delete
-          </Button>
-        </Box>
-      ))}
+                    </Text>
+                  ),
+                  code({ node, className, children, ...props }) {
+                    const match = /language-(\w+)/.exec(className || "");
+                    return match ? (
+                      <Box overflowX="auto">
+                        <SyntaxHighlighter
+                          style={vs}
+                          language={match[1]}
+                          PreTag="div"
+                        >
+                          {String(children).replace(/\n$/, "")}
+                        </SyntaxHighlighter>
+                      </Box>
+                    ) : (
+                      <code
+                        className={className}
+                        style={{
+                          backgroundColor: "rgba(0, 0, 0, 0.05)",
+                          padding: "0.2em 0.4em",
+                          borderRadius: "3px",
+                        }}
+                        {...props}
+                      >
+                        {children}
+                      </code>
+                    );
+                  },
+                  math: ({ value }) => <BlockMath math={value} />,
+                  inlineMath: ({ value }) => <InlineMath math={value} />,
+                } as Components & MathComponents
+              }
+            >
+              {message.content}
+            </ReactMarkdown>
+            <Button
+              size="xs"
+              variant="ghost"
+              onClick={() => handleHideMessage(index)}
+              ml={-1}
+              mt={4}
+              px={1}
+              color="gray.600"
+            >
+              {message.hidden ? "show" : "hide"}
+            </Button>
+            <Button
+              size="xs"
+              variant="ghost"
+              onClick={() => handleDeleteMessage(index)}
+              mt={4}
+              px={1}
+              color="gray.600"
+            >
+              delete
+            </Button>
+          </Box>
+        ))
+      )}
       <Box ref={messagesEndRef} height="5px" />
     </VStack>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState, } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { useCookies } from "react-cookie";
@@ -28,6 +28,14 @@ import {
   handleDeleteMessage,
 } from "./utils";
 import Link from "next/link";
+import { jwtDecode, JwtPayload } from "jwt-decode";
+
+interface CustomJwtPayload extends JwtPayload {
+  first_name?: string;
+  last_name?:string;
+  sub?: string;
+}
+
 
 export default function Home() {
   const router = useRouter();
@@ -109,6 +117,28 @@ export default function Home() {
     }
   }, [cookies.token, conversationId]);
 
+  let decodedToken: CustomJwtPayload | null = null;
+  if (cookies.token) {
+    try {
+      decodedToken = jwtDecode<CustomJwtPayload>(cookies.token);
+    } catch (error) {
+      console.error("Error decoding JWT token:", error);
+    }
+  }
+
+  let userFirstName: string | undefined = undefined;
+  let userEmail: string | undefined = undefined;
+  if (decodedToken) {
+    userFirstName = decodedToken.first_name || undefined;
+    userEmail = decodedToken.sub || undefined;
+  }
+
+  const [clientUserName, setClientUserName] = useState(userFirstName);
+
+  useEffect(() => {
+    setClientUserName(userFirstName);
+  }, [userFirstName]);
+
   return (
     <Box>
       <Sidebar
@@ -156,7 +186,7 @@ export default function Home() {
           />
         </Link>
       </HStack>
-      <Center minHeight="calc(100vh - 80px)" mt={16} mb={24} >
+      <Center minHeight="calc(100vh - 80px)" mt={16} mb={24}>
         <VStack
           width="60%"
           minWidth="500px"
@@ -169,6 +199,7 @@ export default function Home() {
               messages={messages}
               handleHideMessage={handleHideMessageWrapper}
               handleDeleteMessage={handleDeleteMessageWrapper}
+              userName={clientUserName}
             />
           </Box>
         </VStack>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@types/jwt-decode": "^3.1.0",
     "@types/node": "20.2.4",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
@@ -24,6 +25,7 @@
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.4",
     "framer-motion": "^11.0.14",
+    "jwt-decode": "^4.0.0",
     "katex": "^0.16.9",
     "next": "13.4.4",
     "postcss": "8.4.23",