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,66 +30,68 @@ export interface InputTextAreaButtonProps extends Omit<InputTextAreaProps, 'vari
   disabledSubmit?: boolean;
 }
 
-export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
+export const InputTextAreaButton = forwardRef<HTMLTextAreaElement, InputTextAreaButtonProps>(
-  className,
+  (
-  disabled,
+    {
-  autoResize,
+      className,
-  sendIcon = <ArrowUp />,
+      disabled,
-  loadingIcon = <ShapeSquare />,
+      autoResize,
-  loading = false,
+      sendIcon = <ArrowUp />,
-  onSubmit,
+      loadingIcon = <ShapeSquare />,
-  onStop,
+      loading = false,
-  variant = 'default',
+      onSubmit,
-  disabledSubmit,
+      onStop,
-  ...props
+      variant = 'default',
-}) => {
+      disabledSubmit,
-  const textRef = useRef<HTMLTextAreaElement>(null);
+      ...props
+    },
+    textRef
+  ) => {
+    const onSubmitPreflight = useMemoizedFn(() => {
+      if (disabled) return;
+      const text = (textRef as React.RefObject<HTMLTextAreaElement>).current?.value || '';
+      onSubmit(text);
+    });
 
-  const onSubmitPreflight = useMemoizedFn(() => {
+    const onPressMetaEnter = useMemoizedFn(() => {
-    if (disabled) return;
+      onSubmitPreflight();
-    const text = textRef.current?.value || '';
+    });
-    if (text.trim() === '') return;
-    onSubmit(text);
-  });
 
-  const onPressMetaEnter = useMemoizedFn(() => {
+    return (
-    onSubmitPreflight();
+      <div
-  });
-
-  return (
-    <div
-      className={cn(
-        inputTextAreaButtonVariants({ variant }),
-        loading && 'border-border!',
-        className
-      )}>
-      <InputTextArea
-        ref={textRef}
-        disabled={disabled || loading}
-        variant="ghost"
         className={cn(
-          'leading-1.3 w-full px-5! py-4! pr-10 align-middle transition-all duration-400',
+          inputTextAreaButtonVariants({ variant }),
-          loading && 'cursor-default! opacity-60'
+          loading && 'border-border!',
-        )}
+          className
-        autoResize={autoResize}
+        )}>
-        rounding="xl"
+        <InputTextArea
-        onPressMetaEnter={onPressMetaEnter}
+          ref={textRef}
-        {...props}
+          disabled={disabled || loading}
-      />
+          variant="ghost"
-
+          className={cn(
-      <div className="absolute right-2 bottom-2">
+            'leading-1.3 w-full px-5! py-4! pr-10 align-middle transition-all duration-500',
-        <SubmitButton
+            loading && 'cursor-not-allowed! opacity-70'
-          disabled={disabled || disabledSubmit}
+          )}
-          loading={loading}
+          autoResize={autoResize}
-          sendIcon={sendIcon}
+          rounding="xl"
-          loadingIcon={loadingIcon}
+          onPressMetaEnter={onPressMetaEnter}
-          onStop={onStop}
+          {...props}
-          onSubmitPreflight={onSubmitPreflight}
         />
+
+        <div className="absolute right-2 bottom-2">
+          <SubmitButton
+            disabled={disabled || disabledSubmit}
+            loading={loading}
+            sendIcon={sendIcon}
+            loadingIcon={loadingIcon}
+            onStop={onStop}
+            onSubmitPreflight={onSubmitPreflight}
+          />
+        </div>
       </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
-        <div className={cn('relative h-4 w-4 transition-all duration-200')}>
+        className={cn(
-          <div
+          'relative h-4 w-4 transition-all duration-300 ease-out will-change-transform'
-            className={`absolute inset-0 transition-all duration-300 ${loading ? 'scale-95 opacity-0' : 'scale-100 opacity-100'}`}>
+        )}>
-            {sendIcon}
+        <div
-          </div>
+          className={`absolute inset-0 transition-all duration-300 ease-out ${loading ? 'scale-80 opacity-0' : 'scale-100 opacity-100'}`}>
-          <div
+          {sendIcon}
-            className={`absolute inset-0 flex items-center justify-center text-sm transition-all duration-300 ${loading ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`}>
-            {loadingIcon}
-          </div>
         </div>
-      </Tooltip>
+        <div
+          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>
     );
   }, [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: