feat: Add button to cancel LLM response (#1978)

* feat: Add button to cancel LLM response
- Replace text area with cancel button when loading.
- Add useEffect to change elipsis in cancel button text.
- Add new SVG icon for cancel response.
- Button colors match Figma designs.

* fix: Cancel button UI matches new design
- Delete cancel-response svg.
- Change previous cancel button to match the new Figma design.
- Remove console log in handleCancel function.

* fix: Adjust cancel button rounding

* feat: Update UI for send button
- Add SendArrowIcon component, enables dynamic svg color changes
- Replace original icon
- Update colors and hover effects

* (fix:send-button) minor blink in transition

---------

Co-authored-by: Manish Madan <manishmadan321@gmail.com>

frontend/src/components/MessageInput.tsx

@@ -7,11 +7,9 @@ import userService from '../api/services/userService';
 import AlertIcon from '../assets/alert.svg';
 import ClipIcon from '../assets/clip.svg';
 import ExitIcon from '../assets/exit.svg';
-import PaperPlane from '../assets/paper_plane.svg';
+import SendArrowIcon from './SendArrowIcon';
 import SourceIcon from '../assets/source.svg';
 import DocumentationDark from '../assets/documentation-dark.svg';
-import SpinnerDark from '../assets/spinner-dark.svg';
-import Spinner from '../assets/spinner.svg';
 import ToolIcon from '../assets/tool.svg';
 import {
   addAttachment,
@@ -19,7 +17,7 @@ import {
   selectAttachments,
   updateAttachment,
 } from '../upload/uploadSlice';
-import { useDarkTheme } from '../hooks';
+
 import { ActiveState } from '../models/misc';
 import {
   selectSelectedDocs,
@@ -29,6 +27,7 @@ import Upload from '../upload/Upload';
 import { getOS, isTouchDevice } from '../utils/browserUtils';
 import SourcesPopup from './SourcesPopup';
 import ToolsPopup from './ToolsPopup';
+import { handleAbort } from '../conversation/conversationSlice';
 
 type MessageInputProps = {
   onSubmit: (text: string) => void;
@@ -46,7 +45,6 @@ export default function MessageInput({
   autoFocus = true,
 }: MessageInputProps) {
   const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
   const [value, setValue] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const sourceButtonRef = useRef<HTMLButtonElement>(null);
@@ -256,6 +254,11 @@ export default function MessageInput({
       setValue('');
     }
   };
+
+  const handleCancel = () => {
+    handleAbort();
+  };
+
   return (
     <div className="mx-2 flex w-full flex-col">
       <div className="border-dark-gray bg-lotion dark:border-grey relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
@@ -427,26 +430,33 @@ export default function MessageInput({
             {/* Additional badges can be added here in the future */}
           </div>
 
-          <button
-            onClick={loading ? undefined : handleSubmit}
-            aria-label={loading ? t('loading') : t('send')}
-            className={`flex h-7 w-7 items-center justify-center rounded-full sm:h-9 sm:w-9 ${loading || !value.trim() ? 'bg-black opacity-60 dark:bg-[#F0F3F4] dark:opacity-80' : 'bg-black opacity-100 dark:bg-[#F0F3F4]'} ml-auto shrink-0`}
-            disabled={loading}
-          >
-            {loading ? (
-              <img
-                src={isDarkTheme ? SpinnerDark : Spinner}
-                className="mx-auto my-auto block h-3.5 w-3.5 animate-spin sm:h-4 sm:w-4"
-                alt={t('loading')}
+          {loading ? (
+            <button
+              onClick={handleCancel}
+              aria-label={t('cancel')}
+              className={`ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#7F54D6] text-white sm:h-9 sm:w-9`}
+              disabled={!loading}
+            >
+              <div className="flex h-3 w-3 items-center justify-center rounded-[3px] bg-white sm:h-3.5 sm:w-3.5" />
+            </button>
+          ) : (
+            <button
+              onClick={handleSubmit}
+              aria-label={t('send')}
+              className={`ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors duration-300 ease-in-out sm:h-9 sm:w-9 ${
+                value.trim() && !loading
+                  ? 'bg-purple-30 text-white'
+                  : 'bg-[#EDEDED] text-[#959595] dark:bg-[#37383D] dark:text-[#77787D]'
+              }`}
+              disabled={!value.trim() || loading}
+            >
+              <SendArrowIcon
+                className="mx-auto my-auto block h-3.5 w-3.5 sm:h-4 sm:w-4"
+                aria-label={t('send')}
+                role="img"
               />
-            ) : (
-              <img
-                className={`mx-auto my-auto block h-3.5 w-3.5 translate-x-[-0.9px] translate-y-[1.1px] sm:h-4 sm:w-4 ${isDarkTheme ? 'invert filter' : ''}`}
-                src={PaperPlane}
-                alt={t('send')}
-              />
-            )}
-          </button>
+            </button>
+          )}
         </div>
       </div>
 

frontend/src/components/SendArrowIcon.tsx

@@ -0,0 +1,17 @@
+import { SVGProps } from 'react';
+const SendArrowIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="11"
+    height="14"
+    viewBox="0 0 11 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M0.292786 6.20676C0.105315 6.01923 -3.59956e-07 5.76492 -3.71547e-07 5.49976C-3.83138e-07 5.23459 0.105315 4.98028 0.292786 4.79276L4.79279 0.292756C4.98031 0.105284 5.23462 -3.07464e-05 5.49979 -3.0758e-05C5.76495 -3.07696e-05 6.01926 0.105284 6.20679 0.292756L10.7068 4.79276C10.8889 4.98136 10.9897 5.23396 10.9875 5.49616C10.9852 5.75835 10.88 6.00917 10.6946 6.19457C10.5092 6.37998 10.2584 6.48515 9.99619 6.48743C9.73399 6.48971 9.48139 6.38891 9.29279 6.20676L6.49979 3.49976L6.49979 12.9998C6.49979 13.265 6.39443 13.5193 6.20689 13.7069C6.01936 13.8944 5.765 13.9998 5.49979 13.9998C5.23457 13.9998 4.98022 13.8944 4.79268 13.7069C4.60514 13.5193 4.49979 13.265 4.49979 12.9998L4.49979 3.49976L1.70679 6.20676C1.51926 6.39423 1.26495 6.49954 0.999786 6.49954C0.734622 6.49954 0.480314 6.39423 0.292786 6.20676Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SendArrowIcon;