Paste inage to input

msveshnikov · Apr 28, 2024 · b87e337 · b87e337
1 parent f6569a3
commit b87e337
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/src/components/ChatInput.js b/src/components/ChatInput.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, TextField, Button } from "@mui/material";
+import { Box, TextField, Button, Typography } from "@mui/material";
 import FileSelector from "./FileSelector";
 import { models } from "./Settings";
 
@@ -26,22 +26,36 @@ const ChatInput = ({
 
     return (
         <Box display="flex" padding={2}>
-            <TextField
-                data-testid="input-field"
-                fullWidth
-                label="Enter your question"
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                onKeyPress={(e) => {
-                    if (e.key === "Enter") {
-                        onSubmit();
-                    }
-                }}
-                multiline
-                minRows={1}
-                maxRows={6}
-                onPaste={handlePaste}
-            />
+            <Box display="flex" flexDirection="column" width="100%">
+                <TextField
+                    data-testid="input-field"
+                    fullWidth
+                    label="Enter your question"
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyPress={(e) => {
+                        if (e.key === "Enter") {
+                            onSubmit();
+                        }
+                    }}
+                    multiline
+                    minRows={1}
+                    maxRows={6}
+                    onPaste={handlePaste}
+                />
+                {pastedImage && (
+                    <Box mt={2}>
+                        <Typography variant="subtitle2">Pasted Image:</Typography>
+                        <img
+                            src={URL.createObjectURL(pastedImage)}
+                            alt="Pasted"
+                            width="100"
+                            height="100"
+                            style={{ objectFit: "contain" }}
+                        />
+                    </Box>
+                )}
+            </Box>
             <FileSelector
                 onFileSelect={onFileSelect}
                 allowedFileTypes={models[selectedModel]}

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -116,6 +116,7 @@ function Main({ darkMode, toggleTheme }) {
                     const fileData = reader.result;
                     fileType = fileData.split(";")[0].split("/")[1];
                     const fileBytesBase64 = fileData.split(",")[1];
+                    setPastedImage(null);
                     sendFileAndQuery(fileType, fileBytesBase64, input);
                 };
                 reader.readAsDataURL(pastedImage || selectedFile);
@@ -208,6 +209,7 @@ function Main({ darkMode, toggleTheme }) {
 
         setIsModelResponding(false);
         setSelectedFile(null);
+        setPastedImage(null);
     };
 
     function removeBrackets(text) {