Visual Layout fixes (#653)

* add icons to functions title menu * put search icon inside search box * fix buttons shape and increase header size * Sidebar improvements Show Saved Chats by default. Padding and buttons improvements * hide star arrow button when there are no starred prompts fix divider position in starred prompts list and zIndex position * show Today or Tomorrow as a date in sidebar * align header edit bar with buttons
tarasglek · Jun 11, 2024 · 3d2de0f · 3d2de0f
1 parent 67b20f5
commit 3d2de0f
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 97 deletions.
diff --git a/src/Chat/ChatHeader.tsx b/src/Chat/ChatHeader.tsx
@@ -92,7 +92,7 @@ function ChatHeader({ chat }: ChatHeaderProps) {
           <Box w="100%">
             {isEditing ? (
               <form onSubmit={handleSaveSummary}>
-                <Flex align="center" gap={2}>
+                <Flex align="center" gap={2} px={2} pb={2}>
                   <Input
                     flex={1}
                     defaultValue={chat.summary}
@@ -101,15 +101,16 @@ function ChatHeader({ chat }: ChatHeaderProps) {
                     bg="white"
                     _dark={{ bg: "gray.700" }}
                     size="sm"
+                    fontSize="1rem"
                     w="100%"
                     autoFocus={true}
                     placeholder="Chat Summary"
                   />
                   <ButtonGroup>
-                    <Button variant="outline" size="xs" onClick={() => setIsEditing(false)}>
+                    <Button variant="outline" size="sm" onClick={() => setIsEditing(false)}>
                       Cancel
                     </Button>
-                    <Button size="xs" type="submit">
+                    <Button size="sm" type="submit">
                       Save
                     </Button>
                   </ButtonGroup>

diff --git a/src/Function/index.tsx b/src/Function/index.tsx
@@ -16,6 +16,8 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
+import { MdContentCopy } from "react-icons/md";
+import { TbDownload, TbTrash } from "react-icons/tb";
 import debounce from "lodash-es/debounce";
 import { useCallback, useMemo, useRef } from "react";
 import { LuFunctionSquare } from "react-icons/lu";
@@ -162,11 +164,25 @@ export default function Function() {
                         variant="ghost"
                       />
                       <MenuList>
-                        <MenuItem onClick={() => handleCopyFunctionClick()}>Copy</MenuItem>
-                        <MenuItem onClick={() => handleDownloadFunctionClick()}>Download</MenuItem>
+                        <MenuItem
+                          icon={<MdContentCopy />}
+                          onClick={() => handleCopyFunctionClick()}
+                        >
+                          Copy
+                        </MenuItem>
+                        <MenuItem
+                          icon={<TbDownload />}
+                          onClick={() => handleDownloadFunctionClick()}
+                        >
+                          Download
+                        </MenuItem>
 
                         <MenuDivider />
-                        <MenuItem color="red.400" onClick={() => handleDeleteFunctionClick()}>
+                        <MenuItem
+                          icon={<TbTrash />}
+                          color="red.400"
+                          onClick={() => handleDeleteFunctionClick()}
+                        >
                           Delete
                         </MenuItem>
                       </MenuList>

diff --git a/src/components/CodeHeader.tsx b/src/components/CodeHeader.tsx
@@ -1,7 +1,6 @@
 import { memo, useCallback, useMemo, type ReactNode, useState } from "react";
 import {
   Flex,
-  ButtonGroup,
   IconButton,
   useClipboard,
   useColorModeValue,
@@ -198,7 +197,7 @@ function CodeHeader({
             {language}
           </Text>
         </Box>
-        <ButtonGroup isAttached pr={2}>
+        <Flex pr={2}>
           {shouldShowRunButton && (
             <Menu strategy="fixed">
               <MenuButton
@@ -252,7 +251,7 @@ function CodeHeader({
             variant="ghost"
             onClick={handleCopy}
           />
-        </ButtonGroup>
+        </Flex>
       </Flex>
       {children}
     </>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,11 +2,11 @@ import { useCallback, type RefObject } from "react";
 import {
   Avatar,
   Box,
-  ButtonGroup,
   Flex,
   IconButton,
   Input,
   InputGroup,
+  InputRightElement,
   Link,
   Menu,
   MenuButton,
@@ -85,7 +85,8 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
   return (
     <Flex
       w="100%"
-      gap={1}
+      h="3rem"
+      gap={3}
       bg={useColorModeValue("white", "gray.700")}
       justify="space-between"
       align="center"
@@ -94,14 +95,19 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
     >
       <Flex pl={1} align="center" gap={2}>
         <IconButton
+          fontSize="1.5rem"
           icon={<BiMenu />}
           variant="ghost"
           aria-label="Toggle Sidebar Menu"
           title="Toggle Sidebar Menu"
           onClick={onToggleSidebar}
         />
 
-        <Text fontWeight="bold" color={useColorModeValue("blue.600", "blue.200")}>
+        <Text
+          fontWeight="bold"
+          fontSize="1.125rem"
+          color={useColorModeValue("blue.600", "blue.200")}
+        >
           <Link
             href="/"
             _hover={{ textDecoration: "none", color: useColorModeValue("blue.400", "blue.100") }}
@@ -116,27 +122,40 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
           <Form action="/s" method="get">
             <InputGroup size="sm" variant="outline">
               <Input
+                fontSize="1rem"
                 type="search"
                 name="q"
                 defaultValue={searchText}
+                borderRadius={4}
                 isRequired
                 placeholder="Search chat history"
               />
-              <IconButton aria-label="Search" variant="ghost" icon={<TbSearch />} type="submit" />
+              <InputRightElement>
+                <IconButton
+                  size="sm"
+                  height="2rem"
+                  aria-label="Search"
+                  variant="ghost"
+                  icon={<TbSearch />}
+                  type="submit"
+                />
+              </InputRightElement>
             </InputGroup>
           </Form>
         )}
       </Box>
 
-      <ButtonGroup isAttached pr={2} alignItems="center">
+      <Flex pr={2} alignItems="center">
         <IconButton
+          fontSize="1.25rem"
           aria-label={"Copy Shared Chats Feed URL"}
           title={"Copy Shared Chats Feed URL"}
           icon={<FiRss />}
           variant="ghost"
           onClick={handleOpenFeedUrl}
         />
         <IconButton
+          fontSize="1.25rem"
           aria-label={useColorModeValue("Switch to Dark Mode", "Switch to Light Mode")}
           title={useColorModeValue("Switch to Dark Mode", "Switch to Light Mode")}
           icon={useColorModeValue(<BiMoon />, <BiSun />)}
@@ -209,7 +228,7 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
             </MenuList>
           </Menu>
         </Box>
-      </ButtonGroup>
+      </Flex>
 
       <PreferencesModal
         isOpen={isPrefModalOpen}

diff --git a/src/components/Message/MessageBase.tsx b/src/components/Message/MessageBase.tsx
@@ -453,7 +453,7 @@ function MessageBase({
   return (
     <Box
       id={id}
-      my={6}
+      my={5}
       flex={1}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
@@ -491,7 +491,7 @@ function MessageBase({
 
             <Flex align="center" zIndex={1}>
               {isHovering && (
-                <ButtonGroup isAttached display={{ base: "none", md: "block" }}>
+                <Flex display={{ base: "none", md: "block" }}>
                   <IconButton
                     variant="ghost"
                     icon={<MdContentCopy />}
@@ -517,7 +517,7 @@ function MessageBase({
                       onClick={() => onDeleteClick()}
                     />
                   )}
-                </ButtonGroup>
+                </Flex>
               )}
               <Menu align="end" isDisabled={isLoading}>
                 <MenuItem onClick={handleCopy} icon={<MdContentCopy />}>
@@ -605,15 +605,7 @@ function MessageBase({
         </CardHeader>
         <CardBody p={0}>
           <Flex direction="column" gap={3}>
-            <Box
-              maxWidth="100%"
-              minH="2em"
-              overflow="hidden"
-              // Offset for the extra pixel of padding added to the messageContent box below
-              m={-1}
-              px={6}
-              pb={2}
-            >
+            <Box maxWidth="100%" minH="2em" overflow="hidden" px={5} pb={2}>
               {
                 // only display the button before message if the message is too long and toggled
                 !editing && isLongMessage && isOpen ? (
@@ -638,7 +630,7 @@ function MessageBase({
                       defaultValue={text}
                       autoFocus={true}
                     />
-                    <Flex width="100%" alignItems="center" alignContent="end" gap={2}>
+                    <Flex width="100%" alignItems="center" alignContent="end" gap={2} mb={2}>
                       <Spacer />
                       {!isNarrowScreen && (
                         <Text fontSize="sm" color="gray">
@@ -671,11 +663,7 @@ function MessageBase({
                   </VStack>
                 </form>
               ) : (
-                <Box
-                  ref={messageContent}
-                  // Add a single pixel of offset for rendering to canvas (offset handled above with m=-1)
-                  p={1}
-                >
+                <Box ref={messageContent} p={1}>
                   {imageUrls.map((imageUrl, index) => (
                     <Box key={`${id}-${index}`}>
                       <Image

diff --git a/src/components/Message/SystemMessage.tsx b/src/components/Message/SystemMessage.tsx
@@ -1,6 +1,7 @@
 import { memo } from "react";
 import {
   Avatar,
+  Box,
   Container,
   Divider,
   Flex,
@@ -102,30 +103,30 @@ function SystemPromptVersionsMenu({
         variant="ghost"
         onClick={handleStarredChanged}
       />
-      <Menu placement="bottom-end" isLazy={true}>
-        <MenuButton
-          as={IconButton}
-          size="xs"
-          variant="ghost"
-          icon={<TbChevronDown title={`${prevSystemPrompts.length} Previous System Prompts`} />}
-        />
-        <MenuList>
-          {prevSystemPrompts.map((systemPrompt, idx, arr) => (
-            <MenuItem
-              key={systemPrompt}
-              value={systemPrompt}
-              onClick={() => onChange(systemPrompt)}
-            >
-              <Container>
-                <Text noOfLines={3} title={systemPrompt}>
-                  {systemPrompt}
-                </Text>
-                {idx < arr.length - 1 && <Divider mt={4} />}
-              </Container>
-            </MenuItem>
-          ))}
-        </MenuList>
-      </Menu>
+      {prevSystemPrompts?.length != 0 && (
+        <Menu placement="bottom" isLazy={true}>
+          <MenuButton
+            as={IconButton}
+            size="sm"
+            variant="ghost"
+            icon={<TbChevronDown title={`${prevSystemPrompts.length} Previous System Prompts`} />}
+          />
+          <MenuList zIndex={2}>
+            {prevSystemPrompts.map((systemPrompt, idx, arr) => (
+              <Box key={systemPrompt}>
+                <MenuItem value={systemPrompt} onClick={() => onChange(systemPrompt)}>
+                  <Container>
+                    <Text noOfLines={3} my={2} title={systemPrompt}>
+                      {systemPrompt}
+                    </Text>
+                  </Container>
+                </MenuItem>
+                {idx < arr.length - 1 && <Divider />}
+              </Box>
+            ))}
+          </MenuList>
+        </Menu>
+      )}
     </Flex>
   );
 }

diff --git a/src/components/PromptForm/DesktopPromptForm.tsx b/src/components/PromptForm/DesktopPromptForm.tsx
@@ -314,7 +314,7 @@ function DesktopPromptForm({
 
   return (
     <Flex dir="column" w="100%" h="100%">
-      <Card flex={1} my={4} mx={1}>
+      <Card flex={1} my={3} mx={1}>
         <chakra.form onSubmit={handlePromptSubmit} h="100%">
           <CardBody h="100%" p={6}>
             <VStack w="100%" h="100%" gap={3}>