Updates for african microscopists

alhazen-client/app/components/ChatWindow.tsx

@@ -19,6 +19,16 @@ import { ChatMessageBubble, Message } from "../components/ChatMessageBubble";
 import { AutoResizeTextarea } from "./AutoResizeTextarea";
 import { marked } from "marked";
 import { Renderer } from "marked";
+
+
+import {
+  RecoilRoot,
+  atom,
+  selector,
+  useRecoilState,
+  useRecoilValue,
+} from 'recoil';
+
 import hljs from "highlight.js";
 import "highlight.js/styles/gradient-dark.css";
 
@@ -34,21 +44,22 @@ import {
 import { ArrowUpIcon } from "@chakra-ui/icons";
 import { Source } from "./SourceBubble";
 import { apiBaseUrl } from "../utils/constants";
+import { messagesAtom } from "../recoil/atoms/messagesAtom";
 
 export function ChatWindow(props: {
   placeholder?: string;
   titleText?: string;
 }) {
   const conversationId = uuidv4();
+
   const messageContainerRef = useRef<HTMLDivElement | null>(null);
-  const [messages, setMessages] = useState<Array<Message>>([]);
+  //const [messages, setMessages] = useState<Array<Message>>([]);
+  const [messages, setMessages] = useRecoilState(messagesAtom);
   const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-
   const [chatHistory, setChatHistory] = useState<
     { human: string; ai: string }[]
   >([]);
-
   const { placeholder, titleText = "An LLM" } = props;
 
   const sendMessage = async (message?: string) => {
@@ -145,7 +156,7 @@ export function ChatWindow(props: {
                 runId = parsed.metadata.run_id;
             } 
           });
-
+          
         let parsedResult = marked.parse(accumulatedMessage);
 
         setMessages((prevMessages) => {

alhazen-client/app/components/SimpleNavBar.tsx

@@ -0,0 +1,105 @@
+/**
+    * @description      : 
+    * @author           : 
+    * @group            : 
+    * @created          : 01/12/2023 - 15:57:01
+    * 
+    * MODIFICATION LOG
+    * - Version         : 1.0.0
+    * - Date            : 01/12/2023
+    * - Author          : 
+    * - Modification    : 
+**/
+'use client'
+
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  Flex,
+  Avatar,
+  HStack,
+  Text,
+  IconButton,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuDivider,
+  useDisclosure,
+  useColorModeValue,
+  Stack,
+} from '@chakra-ui/react'
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const Links = ['Dashboard', 'Projects', 'Team', 'Search']
+
+const NavLink = (props: Props) => {
+  const { children } = props
+
+  return (
+    <Box
+      as="a"
+      px={2}
+      py={1}
+      rounded={'md'}
+      _hover={{
+        textDecoration: 'none',
+        bg: useColorModeValue('gray.200', 'gray.700'),
+      }}
+      href={'#'}>
+      {children}
+    </Box>
+  )
+}
+
+export default function SimpleNavBar() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  return (
+    <>
+      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+        <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
+          <HStack spacing={8} alignItems={'center'}>
+            <Box>Logo</Box>
+            <HStack as={'nav'} spacing={4} display={{ base: 'none', md: 'flex' }}>
+              {Links.map((link) => (
+                <NavLink key={link}>{link}</NavLink>
+              ))}
+            </HStack>
+          </HStack>
+          <Breadcrumb>
+  <BreadcrumbItem>
+    <BreadcrumbLink href='#'>Home</BreadcrumbLink>
+  </BreadcrumbItem>
+
+  <BreadcrumbItem>
+    <BreadcrumbLink href='#'>Docs</BreadcrumbLink>
+  </BreadcrumbItem>
+
+  <BreadcrumbItem isCurrentPage>
+    <BreadcrumbLink href='#'>Breadcrumb</BreadcrumbLink>
+  </BreadcrumbItem>
+</Breadcrumb>
+        </Flex>
+
+        {isOpen ? (
+          <Box pb={4} display={{ md: 'none' }}>
+            <Stack as={'nav'} spacing={4}>
+              {Links.map((link) => (
+                <NavLink key={link}>{link}</NavLink>
+              ))}
+            </Stack>
+          </Box>
+        ) : null}
+      </Box>
+    </>
+  )
+}

alhazen-client/app/components/TopDashboard.tsx

@@ -0,0 +1,32 @@
+/**
+    * @description      : 
+    * @author           : 
+    * @group            : 
+    * @created          : 27/11/2023 - 23:19:05
+    * 
+    * MODIFICATION LOG
+    * - Version         : 1.0.0
+    * - Date            : 27/11/2023
+    * - Author          : 
+    * - Modification    : 
+**/
+import { MouseEvent, MouseEventHandler } from "react";
+import {
+  Heading,
+  Link,
+  Card,
+  CardHeader,
+  Flex,
+  Spacer,
+} from "@chakra-ui/react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+
+export function TopDashboard(props: {}) {
+  return (
+    <div className="rounded flex flex-col items-center max-w-full md:p-8">
+        <Heading fontSize="3xl" fontWeight={"medium"} mb={1} color={"white"}>
+          Placeholder 
+        </Heading>
+    </div>
+    );
+}