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>

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,6 +13,7 @@ export default function SubmitButton({
   disabled,
   isSubmitting,
   userProvidesKey,
+  hasText,
 }) {
   const { endpoint } = conversation;
   const [isDialogOpen, setDialogOpen] = useState(false);
@@ -18,6 +21,16 @@ export default function SubmitButton({
   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> */
-}