Feat: Render the uploaded agent message file #3221 (#9081)

### What problem does this PR solve?

Feat: Render the uploaded agent message file #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/next-message-item/uploaded-message-files.tsx

@@ -0,0 +1,36 @@
+import { getExtension } from '@/utils/document-util';
+import { formatBytes } from '@/utils/file-util';
+import { memo } from 'react';
+import SvgIcon from '../svg-icon';
+
+interface IProps {
+  files?: File[];
+}
+export function InnerUploadedMessageFiles({ files = [] }: IProps) {
+  return (
+    <section className="flex gap-2 pt-2">
+      {files?.map((file, idx) => (
+        <div key={idx} className="flex gap-1 border rounded-md p-1.5">
+          {file.type.startsWith('image/') ? (
+            <img
+              src={URL.createObjectURL(file)}
+              alt={file.name}
+              className="size-10 object-cover"
+            />
+          ) : (
+            <SvgIcon
+              name={`file-icon/${getExtension(file.name)}`}
+              width={24}
+            ></SvgIcon>
+          )}
+          <div className="text-xs max-w-20">
+            <div className="truncate">{file.name}</div>
+            <p className="text-text-sub-title pt-1">{formatBytes(file.size)}</p>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export const UploadedMessageFiles = memo(InnerUploadedMessageFiles);