refactor: PasteDropBox component and MUI label-based file upload button

- Extract paste/drop handling into standalone PasteDropBox component
  that reads text/html, text/plain, and files from DataTransfer and
  fires separate onHTML, onText, onFiles callbacks
- Replace hidden input + ref + onClick with MUI component="label"
  pattern on IconButton (sr-only input inside the button label)
- Wrap TextField with PasteDropBox in project evaluation page

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

components/PasteDropBox.tsx

@@ -0,0 +1,61 @@
+import { ClipboardEvent, DragEvent, FC, PropsWithChildren } from 'react';
+
+export interface PasteDropBoxProps {
+  className?: string;
+  onText?: (text: string) => void;
+  onHTML?: (html: string) => void;
+  onFiles?: (files: File[]) => void;
+}
+
+export const PasteDropBox: FC<PropsWithChildren<PasteDropBoxProps>> = ({
+  children,
+  className,
+  onFiles,
+  onHTML,
+  onText,
+}) => {
+  const handlePasteDrop = async (event: ClipboardEvent | DragEvent) => {
+    const items =
+      event.type === 'paste'
+        ? [...(event as ClipboardEvent).clipboardData.items]
+        : [...(event as DragEvent).dataTransfer.items];
+
+    const files = items
+      .filter(item => item.kind === 'file')
+      .map(item => item.getAsFile())
+      .filter((file): file is File => file !== null);
+
+    if (files.length > 0) {
+      event.preventDefault();
+      onFiles?.(files);
+
+      return;
+    }
+
+    const htmlItem = items.find(({ type }) => type === 'text/html');
+    const plainItem = items.find(({ type }) => type === 'text/plain');
+
+    if (htmlItem && onHTML) {
+      const html = await new Promise<string>(resolve => htmlItem.getAsString(resolve));
+
+      event.preventDefault();
+      onHTML(html);
+    } else if (plainItem && onText) {
+      const text = await new Promise<string>(resolve => plainItem.getAsString(resolve));
+
+      event.preventDefault();
+      onText(text);
+    }
+  };
+
+  return (
+    <div
+      className={className}
+      onDragOver={e => e.preventDefault()}
+      onDrop={handlePasteDrop}
+      onPaste={handlePasteDrop}
+    >
+      {children}
+    </div>
+  );
+};

pages/dashboard/project/[id].tsx

@@ -4,11 +4,12 @@ import { marked } from 'marked';
 import { observer } from 'mobx-react';
 import { ObservedComponent, reaction } from 'mobx-react-helper';
 import { compose, JWTProps, jwtVerifier, RouteProps, router } from 'next-ssr-middleware';
-import { ChangeEvent, ClipboardEvent, createRef, DragEvent, FormEvent, KeyboardEventHandler } from 'react';
+import { ChangeEvent, FormEvent, KeyboardEventHandler } from 'react';
 import { formToJSON, scrollTo, sleep } from 'web-utility';
 
 import { SymbolIcon } from '../../../components/Icon';
 import { PageHead } from '../../../components/PageHead';
+import { PasteDropBox } from '../../../components/PasteDropBox';
 import { EvaluationDisplay } from '../../../components/Project/EvaluationDisplay';
 import { ScrollList } from '../../../components/ScrollList';
 import { SessionBox } from '../../../components/User/SessionBox';
@@ -33,8 +34,6 @@ export default class ProjectEvaluationPage extends ObservedComponent<
 
   messageStore = new ConsultMessageModel(this.projectId);
 
-  fileInputRef = createRef<HTMLInputElement>();
-
   get menu() {
     const { t } = this.observedContext;
 
@@ -99,24 +98,6 @@ export default class ProjectEvaluationPage extends ObservedComponent<
     if (files.length > 0) await this.handleFiles(files);
   };
 
-  handlePasteDrop = async (event: ClipboardEvent | DragEvent) => {
-    const items =
-      event.type === 'paste'
-        ? [...(event as ClipboardEvent).clipboardData.items]
-        : [...(event as DragEvent).dataTransfer.items];
-
-    const files = items
-      .filter(item => item.kind === 'file')
-      .map(item => item.getAsFile())
-      .filter((file): file is File => file !== null);
-
-    if (files.length > 0) {
-      event.preventDefault();
-
-      await this.handleFiles(files);
-    }
-  };
-
   renderChatMessage = (
     { id, content, evaluation, prototypes, createdAt, createdBy }: ConsultMessage,
     index = 0,
@@ -216,36 +197,34 @@ export default class ProjectEvaluationPage extends ObservedComponent<
             className="sticky bottom-0 mx-1 mt-auto mb-1 flex items-end gap-2 p-1.5 sm:mx-0 sm:mb-0 sm:p-2"
             onSubmit={this.handleMessageSubmit}
           >
-            <input
-              ref={this.fileInputRef}
-              type="file"
-              multiple
-              className="hidden"
-              onChange={this.handleFileInputChange}
-            />
             <Tooltip title={t('attach_files')}>
               <IconButton
+                component="label"
                 size="small"
                 disabled={fileStore.uploading > 0 || messageStore.uploading > 0}
-                onClick={() => this.fileInputRef.current?.click()}
               >
                 <SymbolIcon name="attach_file" />
+                <input
+                  type="file"
+                  multiple
+                  className="sr-only"
+                  onChange={this.handleFileInputChange}
+                />
               </IconButton>
             </Tooltip>
-            <TextField
-              name="content"
-              placeholder={t('type_your_message')}
-              multiline
-              maxRows={4}
-              fullWidth
-              variant="outlined"
-              size="small"
-              required
-              onKeyUp={this.handleQuickSubmit}
-              onPaste={this.handlePasteDrop}
-              onDragOver={e => e.preventDefault()}
-              onDrop={this.handlePasteDrop}
-            />
+            <PasteDropBox className="flex-1 min-w-0" onFiles={this.handleFiles}>
+              <TextField
+                name="content"
+                placeholder={t('type_your_message')}
+                multiline
+                maxRows={4}
+                fullWidth
+                variant="outlined"
+                size="small"
+                required
+                onKeyUp={this.handleQuickSubmit}
+              />
+            </PasteDropBox>
             <Button
               type="submit"
               variant="contained"