Fix: Delete the uploaded file in the chat input box, the corresponding file ID is not deleted #9701 (#9702)

### What problem does this PR solve?

Fix: Delete the uploaded file in the chat input box, the corresponding
file ID is not deleted #9701
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/message-input/next.tsx

@@ -34,6 +34,7 @@ interface IProps {
   createConversationBeforeUploadDocument?(message: string): Promise<any>;
   stopOutputMessage?(): void;
   onUpload?: NonNullable<FileUploadProps['onUpload']>;
+  removeFile?(file: File): void;
 }
 
 export function NextMessageInput({
@@ -47,6 +48,7 @@ export function NextMessageInput({
   onInputChange,
   stopOutputMessage,
   onPressEnter,
+  removeFile,
 }: IProps) {
   const [files, setFiles] = React.useState<File[]>([]);
 
@@ -77,6 +79,13 @@ export function NextMessageInput({
     [submit],
   );
 
+  const handleRemoveFile = React.useCallback(
+    (file: File) => () => {
+      removeFile?.(file);
+    },
+    [removeFile],
+  );
+
   return (
     <FileUpload
       value={files}
@@ -121,6 +130,7 @@ export function NextMessageInput({
                   variant="secondary"
                   size="icon"
                   className="-top-1 -right-1 absolute size-4 shrink-0 cursor-pointer rounded-full"
+                  onClick={handleRemoveFile(file)}
                 >
                   <X className="size-2.5" />
                 </Button>