more animated button for submit

web/src/components/ui/inputs/InputTextAreaButton.stories.tsx

@@ -19,7 +19,14 @@ const meta: Meta<typeof InputTextAreaButton> = {
     className: {
       control: 'text'
     }
-  }
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-4">
+        <Story />
+      </div>
+    )
+  ]
 };
 
 export default meta;

web/src/components/ui/inputs/InputTextAreaButton.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, forwardRef } from 'react';
 import { InputTextArea, InputTextAreaProps } from './InputTextArea';
 import { cn } from '@/lib/classMerge';
 import { cva } from 'class-variance-authority';
@@ -9,7 +9,7 @@ import { useMemoizedFn } from 'ahooks';
 import { Tooltip } from '../tooltip';
 
 const inputTextAreaButtonVariants = cva(
-  'relative flex w-full items-center overflow-hidden rounded-xl border border-border transition-all duration-200',
+  'relative flex w-full items-center overflow-visible rounded-xl border border-border transition-all duration-200',
   {
     variants: {
       variant: {
@@ -30,7 +30,9 @@ export interface InputTextAreaButtonProps extends Omit<InputTextAreaProps, 'vari
   disabledSubmit?: boolean;
 }
 
-export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
+export const InputTextAreaButton = forwardRef<HTMLTextAreaElement, InputTextAreaButtonProps>(
+  (
+    {
       className,
       disabled,
       autoResize,
@@ -42,13 +44,12 @@ export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
       variant = 'default',
       disabledSubmit,
       ...props
-}) => {
+    },
-  const textRef = useRef<HTMLTextAreaElement>(null);
+    textRef
-
+  ) => {
     const onSubmitPreflight = useMemoizedFn(() => {
       if (disabled) return;
-    const text = textRef.current?.value || '';
+      const text = (textRef as React.RefObject<HTMLTextAreaElement>).current?.value || '';
-    if (text.trim() === '') return;
       onSubmit(text);
     });
 
@@ -68,8 +69,8 @@ export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
           disabled={disabled || loading}
           variant="ghost"
           className={cn(
-          'leading-1.3 w-full px-5! py-4! pr-10 align-middle transition-all duration-400',
+            'leading-1.3 w-full px-5! py-4! pr-10 align-middle transition-all duration-500',
-          loading && 'cursor-default! opacity-60'
+            loading && 'cursor-not-allowed! opacity-70'
           )}
           autoResize={autoResize}
           rounding="xl"
@@ -89,7 +90,8 @@ export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
         </div>
       </div>
     );
-};
+  }
+);
 
 const SubmitButton: React.FC<{
   loading: boolean;
@@ -101,18 +103,19 @@ const SubmitButton: React.FC<{
 }> = ({ disabled, sendIcon, loading, loadingIcon, onSubmitPreflight, onStop }) => {
   const memoizedPrefix = useMemo(() => {
     return (
-      <Tooltip sideOffset={7} title={loading ? 'Stop' : 'Send'}>
-        <div className={cn('relative h-4 w-4 transition-all duration-200')}>
       <div
-            className={`absolute inset-0 transition-all duration-300 ${loading ? 'scale-95 opacity-0' : 'scale-100 opacity-100'}`}>
+        className={cn(
+          'relative h-4 w-4 transition-all duration-300 ease-out will-change-transform'
+        )}>
+        <div
+          className={`absolute inset-0 transition-all duration-300 ease-out ${loading ? 'scale-80 opacity-0' : 'scale-100 opacity-100'}`}>
           {sendIcon}
         </div>
         <div
-            className={`absolute inset-0 flex items-center justify-center text-sm transition-all duration-300 ${loading ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`}>
+          className={`absolute inset-0 flex items-center justify-center text-sm transition-all duration-300 ease-out ${loading ? 'scale-100 opacity-100' : 'scale-85 opacity-0'}`}>
           {loadingIcon}
         </div>
       </div>
-      </Tooltip>
     );
   }, [loading, sendIcon, loadingIcon]);
 
@@ -123,6 +126,10 @@ const SubmitButton: React.FC<{
       prefix={memoizedPrefix}
       onClick={loading && onStop ? onStop : onSubmitPreflight}
       disabled={disabled}
+      className={cn(
+        'origin-center transform-gpu transition-all duration-300 ease-out will-change-transform',
+        !disabled && 'hover:scale-110 active:scale-95'
+      )}
     />
   );
 };

web/src/controllers/HomePage/NewChatInput.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { InputTextAreaButton } from '@/components/ui/inputs/InputTextAreaButton';
 import { useBusterChatContextSelector, useBusterNewChatContextSelector } from '@/context/Chats';
 import { inputHasText } from '@/lib/text';
-import { useMemoizedFn } from 'ahooks';
+import { useMemoizedFn, useMount } from 'ahooks';
 import { ChangeEvent, useMemo, useState } from 'react';
 
 const autoResizeConfig = {
@@ -16,6 +16,7 @@ export const NewChatInput: React.FC<{}> = () => {
   const onStartNewChat = useBusterNewChatContextSelector((state) => state.onStartNewChat);
   const [inputValue, setInputValue] = useState('');
   const [loading, setLoading] = useState(false);
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   const disabledSubmit = useMemo(() => {
     return !inputHasText(inputValue);
@@ -33,12 +34,20 @@ export const NewChatInput: React.FC<{}> = () => {
 
   const onStop = useMemoizedFn(() => {
     setLoading(false);
+    textAreaRef.current?.focus();
+    textAreaRef.current?.select();
   });
 
   const onChange = useMemoizedFn((e: ChangeEvent<HTMLTextAreaElement>) => {
     setInputValue(e.target.value);
   });
 
+  useMount(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  });
+
   return (
     <InputTextAreaButton
       placeholder="Ask Buster a question..."
@@ -49,6 +58,7 @@ export const NewChatInput: React.FC<{}> = () => {
       loading={loading}
       disabledSubmit={disabledSubmit}
       autoFocus
+      ref={textAreaRef}
     />
   );
 };

web/src/styles/styles.scss

@@ -6,7 +6,7 @@
 @import 'react-data-grid/lib/styles.css';
 @import '../components/ui/layouts/AppSplitter/SplitPane/themes/default'; //TODO check if we can remove this
 
-@import 'antd/dist/reset.css';
+// @import 'antd/dist/reset.css';
 
 input {
   font-family: