improve padding and icon sizes for mobile prompt (#654)

tarasglek · Jun 17, 2024 · fa04130 · fa04130
1 parent 3d2de0f
commit fa04130
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 53 deletions.
diff --git a/src/Chat/ChatHeader.tsx b/src/Chat/ChatHeader.tsx
@@ -101,6 +101,7 @@ function ChatHeader({ chat }: ChatHeaderProps) {
                     bg="white"
                     _dark={{ bg: "gray.700" }}
                     size="sm"
+                    borderRadius={4}
                     fontSize="1rem"
                     w="100%"
                     autoFocus={true}

diff --git a/src/components/OptionsButton.tsx b/src/components/OptionsButton.tsx
@@ -228,7 +228,8 @@ function OptionsButton({
           <IconButton
             aria-label="Options menu"
             isDisabled={isDisabled}
-            size="lg"
+            size="md"
+            fontSize="1.25rem"
             variant="outline"
             icon={<PiGearBold />}
             isRound

diff --git a/src/components/PromptForm/DesktopPromptForm.tsx b/src/components/PromptForm/DesktopPromptForm.tsx
@@ -44,7 +44,7 @@ function KeyboardHint({ isVisible }: KeyboardHintProps) {
   }
 
   return (
-    <Text fontSize="sm" color="gray">
+    <Text fontSize="sm" color="gray" px={2}>
       <span>
         {settings.enterBehaviour === "newline" ? (
           <span>
@@ -316,7 +316,7 @@ function DesktopPromptForm({
     <Flex dir="column" w="100%" h="100%">
       <Card flex={1} my={3} mx={1}>
         <chakra.form onSubmit={handlePromptSubmit} h="100%">
-          <CardBody h="100%" p={6}>
+          <CardBody h="100%" px={6} py={4}>
             <VStack w="100%" h="100%" gap={3}>
               <InputGroup
                 h="100%"

diff --git a/src/components/PromptForm/MicIcon.tsx b/src/components/PromptForm/MicIcon.tsx
@@ -119,9 +119,9 @@ export default function MicIcon({
         variant={isRecording ? "solid" : isMobile ? "outline" : "ghost"}
         colorScheme={isRecording ? "red" : "blue"}
         aria-label="Record speech"
-        size={isRecording ? "lg" : "md"}
+        size="md"
         transition={"all 150ms ease-in-out"}
-        fontSize="18px"
+        fontSize="1.25rem"
         ref={micIconRef}
         onClick={handleMicToggle}
         onBlur={() => onRecordingCancel()}

diff --git a/src/components/PromptForm/MobilePromptForm.tsx b/src/components/PromptForm/MobilePromptForm.tsx
@@ -163,9 +163,9 @@ function MobilePromptForm({
   };
 
   return (
-    <Box flex={1} w="100%" h="100%" px={1} pt={2} pb={4}>
+    <Box flex={1} w="100%" h="100%" my={1} px={2} py={1}>
       <chakra.form onSubmit={handlePromptSubmit} h="100%">
-        <Flex mt={2} pb={2} px={1} alignItems="end" gap={2}>
+        <Flex alignItems="end" gap={2}>
           <OptionsButton
             chat={chat}
             forkUrl={forkUrl}
@@ -222,7 +222,7 @@ function MobilePromptForm({
               ))}
             </Flex>
             {inputType === "audio" ? (
-              <Box py={2} px={1}>
+              <Box p={2}>
                 <AudioStatus
                   isRecording={isRecording}
                   isTranscribing={isTranscribing}
@@ -241,12 +241,11 @@ function MobilePromptForm({
                 _dark={{ bg: "gray.700" }}
                 overflowY="auto"
                 placeholder="Ask about..."
-                mb={1}
               />
             )}
           </Box>
 
-          {isTranscriptionSupported() && (
+          {isTranscriptionSupported() && !isTranscribing && !prompt && (
             <MicIcon
               isDisabled={isLoading}
               onRecording={handleRecording}
@@ -256,7 +255,7 @@ function MobilePromptForm({
             />
           )}
 
-          <PromptSendButton isLoading={isLoading} />
+          {!isRecording && <PromptSendButton isLoading={isLoading} />}
         </Flex>
       </chakra.form>
     </Box>

diff --git a/src/components/PromptForm/PromptSendButton.tsx b/src/components/PromptForm/PromptSendButton.tsx
@@ -63,56 +63,20 @@ function MobilePromptSendButton({ isLoading }: PromptSendButtonProps) {
       <Menu placement="top" strategy="fixed" closeOnSelect={false} offset={[-90, 0]}>
         <IconButton
           type="submit"
-          size="lg"
+          size="md"
+          fontSize="1.375rem"
+          width="2.75rem"
           variant="solid"
           isRound
           aria-label="Submit"
           isLoading={isLoading}
           icon={<TbSend />}
         />
-        {isTtsSupported && (
-          <Tooltip
-            label={
-              settings.textToSpeech.announceMessages
-                ? "Text-to-Speech Enabled"
-                : "Text-to-Speech Disabled"
-            }
-          >
-            <IconButton
-              type="button"
-              size="lg"
-              variant="solid"
-              aria-label={
-                settings.textToSpeech.announceMessages
-                  ? "Text-to-Speech Enabled"
-                  : "Text-to-Speech Disabled"
-              }
-              icon={
-                settings.textToSpeech.announceMessages ? (
-                  <MdVolumeUp size={25} />
-                ) : (
-                  <MdVolumeOff size={25} />
-                )
-              }
-              onClick={() => {
-                if (settings.textToSpeech.announceMessages) {
-                  // Flush any remaining audio clips being announced
-                  clearAudioQueue();
-                }
-                setSettings({
-                  ...settings,
-                  textToSpeech: {
-                    ...settings.textToSpeech,
-                    announceMessages: !settings.textToSpeech.announceMessages,
-                  },
-                });
-              }}
-            />
-          </Tooltip>
-        )}
         <MenuButton
           as={IconButton}
-          size="lg"
+          size="md"
+          width="2.75rem"
+          fontSize="1.375rem"
           isRound
           variant="solid"
           aria-label="Choose Model"
@@ -181,6 +145,37 @@ function MobilePromptSendButton({ isLoading }: PromptSendButtonProps) {
               />
             </InputGroup>
           </MenuGroup>
+          {isTtsSupported && (
+            <>
+              <MenuDivider />
+              <MenuItem
+                icon={
+                  settings.textToSpeech.announceMessages ? (
+                    <MdVolumeUp style={{ fontSize: "1.25rem" }} />
+                  ) : (
+                    <MdVolumeOff style={{ fontSize: "1.25rem" }} />
+                  )
+                }
+                onClick={() => {
+                  if (settings.textToSpeech.announceMessages) {
+                    // Flush any remaining audio clips being announced
+                    clearAudioQueue();
+                  }
+                  setSettings({
+                    ...settings,
+                    textToSpeech: {
+                      ...settings.textToSpeech,
+                      announceMessages: !settings.textToSpeech.announceMessages,
+                    },
+                  });
+                }}
+              >
+                {settings.textToSpeech.announceMessages
+                  ? "Text-to-Speech Enabled"
+                  : "Text-to-Speech Disabled"}
+              </MenuItem>
+            </>
+          )}
         </MenuList>
       </Menu>
     </ButtonGroup>
@@ -271,6 +266,7 @@ function DesktopPromptSendButton({ isLoading }: PromptSendButtonProps) {
         <MenuButton
           as={IconButton}
           size="sm"
+          fontSize="1.25rem"
           aria-label="Choose Model"
           title="Choose Model"
           icon={<TbChevronUp />}