style: update graphics (#1138)

* style: update new icon and NavLinks scale

* style: new username update

* refactor(Dropdown); style: general settings

* style(Dropdown); adjust theme

* style: dropdown and settings text

* fix(Dropdown) system theme not working

* style: topbar sticky; fix: general's menu settings transparent with light theme

* fix(SubmitButton) stop generate button

* fix: user_provided dialog for new dropdown

* fix: TS error 'display'

* fix(EditPresetDialog): for new dropdown

* style: added green send button

* converted textchat in tsx

* style(SubmitButton): tooltip

* test: fixed ThemeSelector and LangSelector

* removed transition-opacity

* fix all tests

* removed empty cn call

* chore: Update General.tsx to add Arabic option

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>

Author: berry-13

client/src/components/Endpoints/EditPresetDialog.tsx

@@ -91,14 +91,9 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditP
                   </Label>
                   <Dropdown
                     value={endpoint || ''}
-                    onChange={setOption('endpoint')}
+                    onChange={(value) => setOption('endpoint')(value)}
                     options={availableEndpoints}
-                    className={cn(
-                      defaultTextProps,
-                      'flex h-10 max-h-10 w-full resize-none ',
-                      removeFocusOutlines,
-                    )}
-                    containerClassName="flex w-full resize-none z-[51]"
+                    className={cn()}
                   />
                 </div>
               </div>

client/src/components/Endpoints/Settings/Anthropic.tsx

@@ -40,7 +40,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'z-50 flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Endpoints/Settings/Google.tsx

@@ -42,7 +42,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'z-50 flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx

@@ -3,7 +3,7 @@ import type { TDialogProps } from '~/common';
 import { Dialog, Dropdown } from '~/components/ui';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { RevokeKeysButton } from '~/components/Nav';
-import { cn, defaultTextProps, removeFocusOutlines, alternateName } from '~/utils';
+import { cn, alternateName } from '~/utils';
 import { useUserKey, useLocalize } from '~/hooks';
 import GoogleConfig from './GoogleConfig';
 import OpenAIConfig from './OpenAIConfig';
@@ -75,13 +75,7 @@ const SetKeyDialog = ({
               value={expiresAtLabel}
               onChange={handleExpirationChange}
               options={expirationOptions.map((option) => option.display)}
-              className={cn(
-                defaultTextProps,
-                'flex h-full w-full resize-none',
-                removeFocusOutlines,
-              )}
-              optionsClassName="max-h-72"
-              containerClassName="flex w-1/2 md:w-1/3 resize-none z-[51]"
+              width={185}
             />
             <EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
             <HelpText endpoint={endpoint} />

client/src/components/Input/SubmitButton.tsx

@@ -2,7 +2,9 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { StopGeneratingIcon } from '~/components';
 import { Settings } from 'lucide-react';
 import { SetKeyDialog } from './SetKeyDialog';
-import { useUserKey, useLocalize } from '~/hooks';
+import { useUserKey, useLocalize, useMediaQuery } from '~/hooks';
+import { SendMessageIcon } from '~/components/svg';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
 
 export default function SubmitButton({
   conversation,
@@ -11,13 +13,24 @@ export default function SubmitButton({
   disabled,
   isSubmitting,
   userProvidesKey,
+  hasText,
 }) {
   const { endpoint } = conversation;
   const [isDialogOpen, setDialogOpen] = useState(false);
   const { checkExpiry } = useUserKey(endpoint);
   const [isKeyProvided, setKeyProvided] = useState(userProvidesKey ? checkExpiry() : true);
   const isKeyActive = checkExpiry();
   const localize = useLocalize();
+  const dots = ['·', '··', '···'];
+  const [dotIndex, setDotIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDotIndex((prevDotIndex) => (prevDotIndex + 1) % dots.length);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, [dots.length]);
 
   useEffect(() => {
     if (userProvidesKey) {
@@ -35,22 +48,43 @@ export default function SubmitButton({
     [submitMessage],
   );
 
+  const [isSquareGreen, setIsSquareGreen] = useState(false);
+
   const setKey = useCallback(() => {
     setDialogOpen(true);
   }, []);
 
-  if (isSubmitting) {
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  const iconContainerClass = `m-1 mr-0 rounded-md pb-[5px] pl-[6px] pr-[4px] pt-[5px] ${
+    hasText ? (isSquareGreen ? 'bg-green-500' : '') : ''
+  } group-hover:bg-19C37D group-disabled:hover:bg-transparent dark:${
+    hasText ? (isSquareGreen ? 'bg-green-500' : '') : ''
+  } dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent`;
+
+  useEffect(() => {
+    setIsSquareGreen(hasText);
+  }, [hasText]);
+
+  if (isSubmitting && isSmallScreen) {
     return (
-      <button
-        onClick={handleStopGenerating}
-        type="button"
-        className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
-      >
+      <button onClick={handleStopGenerating} type="button">
         <div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
           <StopGeneratingIcon />
         </div>
       </button>
     );
+  } else if (isSubmitting) {
+    return (
+      <div className="relative flex h-full">
+        <div
+          className="absolute text-2xl"
+          style={{ top: '50%', transform: 'translateY(-20%) translateX(-33px)' }}
+        >
+          {dots[dotIndex]}
+        </div>
+      </div>
+    );
   } else if (!isKeyProvided) {
     return (
       <>
@@ -73,34 +107,31 @@ export default function SubmitButton({
     );
   } else {
     return (
-      <button
-        onClick={clickHandler}
-        disabled={disabled}
-        data-testid="submit-button"
-        className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
-      >
-        <div className="m-1 mr-0 rounded-md pb-[9px] pl-[9.5px] pr-[7px] pt-[11px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
-          <svg
-            stroke="currentColor"
-            fill="none"
-            strokeWidth="2"
-            viewBox="0 0 24 24"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mr-1 h-4 w-4 "
-            height="1em"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <line x1="22" y1="2" x2="11" y2="13" />
-            <polygon points="22 2 15 22 11 13 2 9 22 2" />
-          </svg>
-        </div>
-      </button>
+      <TooltipProvider delayDuration={50}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={clickHandler}
+              disabled={disabled}
+              data-testid="submit-button"
+              className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
+            >
+              <div className={iconContainerClass}>
+                {hasText ? (
+                  <div className="bg-19C37D flex h-[24px] w-[24px] items-center justify-center rounded-full text-white">
+                    <SendMessageIcon />
+                  </div>
+                ) : (
+                  <SendMessageIcon />
+                )}
+              </div>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top" sideOffset={-5}>
+            {localize('com_nav_send_message')}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 }
-
-{
-  /* <div class="text-2xl"><span class="">·</span><span class="">·</span><span class="invisible">·</span></div> */
-}

client/src/components/Input/TextChat.jsx renamed to client/src/components/Input/TextChat.tsx

@@ -1,37 +1,43 @@
-import React, { useEffect, useContext, useRef } from 'react';
+import React, { useEffect, useContext, useRef, useState, useCallback } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
 import SubmitButton from './SubmitButton';
+
 import OptionsBar from './OptionsBar';
 import { EndpointMenu } from './EndpointMenu';
 import Footer from './Footer';
 import { useMessageHandler, ThemeContext } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
 
-export default function TextChat({ isSearchView = false }) {
+interface TextChatProps {
+  isSearchView?: boolean;
+}
+
+export default function TextChat({ isSearchView = false }: TextChatProps) {
   const { ask, isSubmitting, handleStopGenerating, latestMessage, endpointsConfig } =
     useMessageHandler();
   const conversation = useRecoilValue(store.conversation);
   const setShowBingToneSetting = useSetRecoilState(store.showBingToneSetting);
   const [text, setText] = useRecoilState(store.text);
   const { theme } = useContext(ThemeContext);
   const isComposing = useRef(false);
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [hasText, setHasText] = useState(false);
 
   // TODO: do we need this?
   const disabled = false;
 
-  const isNotAppendable = latestMessage?.unfinished & !isSubmitting || latestMessage?.error;
+  const isNotAppendable = (latestMessage?.unfinished && !isSubmitting) || latestMessage?.error;
   const { conversationId, jailbreak } = conversation || {};
 
-  // auto focus to input, when enter a conversation.
+  // auto focus to input, when entering a conversation.
   useEffect(() => {
     if (!conversationId) {
       return;
     }
 
-    // Prevents Settings from not showing on new conversation, also prevents showing toneStyle change without jailbreak
+    // Prevents Settings from not showing on a new conversation, also prevents showing toneStyle change without jailbreak
     if (conversationId === 'new' || !jailbreak) {
       setShowBingToneSetting(false);
     }
@@ -54,9 +60,10 @@ export default function TextChat({ isSearchView = false }) {
   const submitMessage = () => {
     ask({ text });
     setText('');
+    setHasText(false);
   };
 
-  const handleKeyDown = (e) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && isSubmitting) {
       return;
     }
@@ -70,9 +77,9 @@ export default function TextChat({ isSearchView = false }) {
     }
   };
 
-  const handleKeyUp = (e) => {
-    if (e.keyCode === 8 && e.target.value.trim() === '') {
-      setText(e.target.value);
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.keyCode === 8 && e.currentTarget.value.trim() === '') {
+      setText(e.currentTarget.value);
     }
 
     if (e.key === 'Enter' && e.shiftKey) {
@@ -92,12 +99,24 @@ export default function TextChat({ isSearchView = false }) {
     isComposing.current = false;
   };
 
-  const changeHandler = (e) => {
+  const changeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = e.target;
 
     setText(value);
+    updateHasText(value);
   };
 
+  const updateHasText = useCallback(
+    (text: string) => {
+      setHasText(!!text.trim() || !!latestMessage?.error);
+    },
+    [setHasText, latestMessage],
+  );
+
+  useEffect(() => {
+    updateHasText(text);
+  }, [text, latestMessage, updateHasText]);
+
   const getPlaceholderText = () => {
     if (isSearchView) {
       return 'Click a message title to open its conversation.';
@@ -153,11 +172,11 @@ export default function TextChat({ isSearchView = false }) {
                 <TextareaAutosize
                   // set test id for e2e testing
                   data-testid="text-input"
-                  tabIndex="0"
+                  tabIndex={0}
                   autoFocus
                   ref={inputRef}
                   // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
-                  rows="1"
+                  rows={1}
                   value={disabled || isNotAppendable ? '' : text}
                   onKeyUp={handleKeyUp}
                   onKeyDown={handleKeyDown}
@@ -174,7 +193,12 @@ export default function TextChat({ isSearchView = false }) {
                   handleStopGenerating={handleStopGenerating}
                   disabled={disabled || isNotAppendable}
                   isSubmitting={isSubmitting}
-                  userProvidesKey={endpointsConfig?.[conversation.endpoint]?.userProvide}
+                  userProvidesKey={
+                    conversation?.endpoint
+                      ? endpointsConfig?.[conversation.endpoint]?.userProvide
+                      : undefined
+                  }
+                  hasText={hasText}
                 />
               </div>
             </div>

client/src/components/Messages/MessageHeader.tsx

@@ -89,8 +89,9 @@ const MessageHeader = ({ isSearchView = false }) => {
     <>
       <div
         className={cn(
-          'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 hover:bg-opacity-30 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:bg-opacity-100',
-          isNotClickable ? '' : 'cursor-pointer ',
+          'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700',
+          isNotClickable ? '' : 'cursor-pointer',
+          'sticky top-0 z-10',
         )}
         onClick={() => (isNotClickable ? null : setSaveAsDialogShow(true))}
       >

client/src/components/Nav/Nav.tsx

@@ -221,7 +221,7 @@ export default function Nav({ navVisible, setNavVisible }) {
           </div>
         </div>
         {!navVisible && (
-          <div className="absolute left-2 top-2 z-10 hidden md:inline-block">
+          <div className="absolute left-2 top-2 z-20 hidden md:inline-block">
             <TooltipTrigger asChild>
               <button
                 type="button"

client/src/components/Nav/NavLinks.tsx

@@ -50,7 +50,7 @@ export default function NavLinks() {
             )}
             <Menu.Button
               className={cn(
-                'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
+                'group-ui-open:bg-gray-800 rounded-sd flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors duration-200 hover:bg-gray-800',
                 open ? 'bg-gray-800' : '',
               )}
               data-testid="nav-user"
@@ -69,18 +69,24 @@ export default function NavLinks() {
                   />
                 </div>
               </div>
-              <div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
+              <div
+                className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-white"
+                style={{ marginTop: '-4px', marginLeft: '2px' }}
+              >
                 {user?.name || localize('com_nav_user')}
               </div>
-              <DotsIcon />
+
+              <div style={{ marginBottom: '5px' }}>
+                <DotsIcon />
+              </div>
             </Menu.Button>
 
             <Transition
               as={Fragment}
-              enter="transition ease-out duration-100 transform"
+              enter="transition ease-out duration-110 transform"
               enterFrom="translate-y-2 opacity-0"
               enterTo="translate-y-0 opacity-100"
-              leave="transition ease-in duration-75 transform"
+              leave="transition ease-in duration-100 transform"
               leaveFrom="translate-y-0 opacity-100"
               leaveTo="translate-y-2 opacity-0"
             >