feat: New way to stop the loading task (#631)

frontend/src/components/organisms/chat/inputBox/SubmitButton.tsx

@@ -0,0 +1,49 @@
+import StopCircle from '@mui/icons-material/StopCircle';
+import Telegram from '@mui/icons-material/Telegram';
+import { Tooltip } from '@mui/material';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+
+import { useChatData, useChatInteract } from '@chainlit/react-client';
+
+interface SubmitButtonProps {
+  disabled?: boolean;
+  onSubmit: () => void;
+}
+
+const SubmitButton = ({ disabled, onSubmit }: SubmitButtonProps) => {
+  const { loading } = useChatData();
+  const { stopTask } = useChatInteract();
+
+  const handleClick = () => {
+    stopTask();
+  };
+
+  return (
+    <Box
+      sx={{
+        mr: 1,
+        color: 'text.secondary'
+      }}
+    >
+      {!loading ? (
+        <Tooltip title="Send message">
+          <InputAdornment position="end">
+            <IconButton disabled={disabled} color="inherit" onClick={onSubmit}>
+              <Telegram />
+            </IconButton>
+          </InputAdornment>
+        </Tooltip>
+      ) : (
+        <Tooltip title="Stop task">
+          <IconButton id="stop-button" onClick={handleClick}>
+            <StopCircle />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Box>
+  );
+};
+
+export { SubmitButton };

frontend/src/components/organisms/chat/inputBox/index.tsx

@@ -11,7 +11,6 @@ import { IAttachment } from 'state/chat';
 import { IProjectSettings } from 'state/project';
 import { inputHistoryState } from 'state/userInputHistory';
 
-import StopButton from '../stopButton';
 import Input from './input';
 import WaterMark from './waterMark';
 
@@ -106,7 +105,6 @@ const InputBox = memo(
           justifyContent: 'center'
         }}
       >
-        <StopButton />
         <Box>
           <Input
             fileSpec={fileSpec}

frontend/src/components/organisms/chat/inputBox/input.tsx

@@ -2,7 +2,6 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import 'regenerator-runtime';
 
-import SendIcon from '@mui/icons-material/Telegram';
 import TuneIcon from '@mui/icons-material/Tune';
 import { Box, IconButton, Stack, TextField } from '@mui/material';
 import InputAdornment from '@mui/material/InputAdornment';
@@ -16,6 +15,7 @@ import { IAttachment, attachmentsState } from 'state/chat';
 import { chatSettingsOpenState, projectSettingsState } from 'state/project';
 import { inputHistoryState } from 'state/userInputHistory';
 
+import { SubmitButton } from './SubmitButton';
 import UploadButton from './UploadButton';
 import SpeechButton from './speechButton';
 
@@ -164,11 +164,6 @@ const Input = memo(
         />
       </>
     );
-    const endAdornment = (
-      <IconButton disabled={disabled} color="inherit" onClick={() => submit()}>
-        <SendIcon />
-      </IconButton>
-    );
 
     return (
       <Stack
@@ -226,14 +221,7 @@ const Input = memo(
                 {startAdornment}
               </InputAdornment>
             ),
-            endAdornment: (
-              <InputAdornment
-                position="end"
-                sx={{ mr: 1, color: 'text.secondary' }}
-              >
-                {endAdornment}
-              </InputAdornment>
-            )
+            endAdornment: <SubmitButton onSubmit={submit} disabled={disabled} />
           }}
         />
       </Stack>