Merge branch 'cz/mergeAll' into shortcuts_settings

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx

@@ -5,17 +5,20 @@ const UploadFileButton = ({
   fileInputRef,
   handleFileChange,
   handleButtonClick,
+  lockChat,
 }) => {
   return (
     <div>
       <input
+        disabled={lockChat}
         type="file"
         ref={fileInputRef}
         style={{ display: "none" }}
         onChange={handleFileChange}
       />
       <Button
-        className="font-bold text-white transition-all hover:text-muted-foreground"
+        disabled={lockChat}
+        className={`font-bold text-white transition-all ${lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"}`}
         onClick={handleButtonClick}
         variant="none"
         size="none"

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx

@@ -1,13 +1,30 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
+
+const fsErrorText =
+  "Please ensure your file has one of the following extensions:";
+const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp";
 
 export const useHandleFileChange = (setFiles, currentFlowId) => {
+  const setErrorData = useAlertStore((state) => state.setErrorData);
   const handleFileChange = async (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     const fileInput = event.target;
     const file = fileInput.files?.[0];
     if (file) {
+      const allowedExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
+      const fileExtension = file.name.split(".").pop()?.toLowerCase();
+
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        setErrorData({
+          title: "Error uploading file",
+          list: [fsErrorText, snErrorTxt],
+        });
+        return;
+      }
+
       const uid = new ShortUniqueId({ length: 10 }); // Increase the length to ensure uniqueness
       const id = uid();
       const type = file.type.split("/")[0];

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx

@@ -1,10 +1,19 @@
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
 
-const useUpload = (uploadFile, currentFlowId, setFiles) => {
+const fsErrorText =
+  "Please ensure your file has one of the following extensions:";
+const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp";
+
+const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => {
+  const setErrorData = useAlertStore((state) => state.setErrorData);
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent): void => {
+      if (lockChat) {
+        return;
+      }
       const items = event.clipboardData?.items;
       if (items) {
         for (let i = 0; i < items.length; i++) {
@@ -12,6 +21,23 @@ const useUpload = (uploadFile, currentFlowId, setFiles) => {
           const uid = new ShortUniqueId({ length: 3 });
           const blob = items[i].getAsFile();
           if (blob) {
+            const allowedExtensions = [
+              "png",
+              "jpg",
+              "jpeg",
+              "gif",
+              "bmp",
+              "webp",
+            ];
+            const fileExtension = blob.name.split(".").pop()?.toLowerCase();
+
+            if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+              setErrorData({
+                title: "Error uploading file",
+                list: [fsErrorText, snErrorTxt],
+              });
+              return;
+            }
             const id = uid();
             setFiles((prevFiles) => [
               ...prevFiles,
@@ -27,7 +53,7 @@ const useUpload = (uploadFile, currentFlowId, setFiles) => {
     return () => {
       document.removeEventListener("paste", handlePaste);
     };
-  }, [uploadFile, currentFlowId]);
+  }, [uploadFile, currentFlowId, lockChat]);
 
   return null;
 };

src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx

@@ -37,7 +37,7 @@ export default function ChatInput({
 
   useFocusOnUnlock(lockChat, inputRef);
   useAutoResizeTextArea(chatValue, inputRef);
-  useUpload(uploadFile, currentFlowId, setFiles);
+  useUpload(uploadFile, currentFlowId, setFiles, lockChat || saveLoading);
   const { handleFileChange } = useHandleFileChange(setFiles, currentFlowId);
 
   const send = () => {
@@ -92,8 +92,11 @@ export default function ChatInput({
           />
         </div>
 
-        <div className="absolute bottom-2 left-4">
+        <div
+          className={`absolute bottom-2 left-4 ${lockChat || saveLoading ? "cursor-not-allowed" : ""}`}
+        >
           <UploadFileButton
+            lockChat={lockChat || saveLoading}
             fileInputRef={fileInputRef}
             handleFileChange={handleFileChange}
             handleButtonClick={handleButtonClick}

src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx

@@ -1,4 +1,5 @@
 import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../../components/ui/button";
 
 export default function DownloadButton({
   isHovered,
@@ -10,14 +11,18 @@ export default function DownloadButton({
   if (isHovered) {
     return (
       <div
-        className={`absolute right-1 top-1 rounded-bl-lg bg-muted text-sm font-bold text-foreground `}
+        className={`absolute right-1 top-1 rounded-md bg-muted text-sm font-bold text-foreground `}
       >
-        <button className="px-2 py-1 text-ring " onClick={handleDownload}>
+        <Button
+          variant={"none"}
+          className="bg-transparent px-2 py-1 text-ring"
+          onClick={handleDownload}
+        >
           <ForwardedIconComponent
             name="DownloadCloud"
-            className="h-5 w-5 text-current hover:scale-110"
+            className="h-5 w-5 bg-transparent text-current hover:scale-110"
           />
-        </button>
+        </Button>
       </div>
     );
   }

src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx

@@ -8,7 +8,7 @@ import DownloadButton from "./components/downloadButton/downloadButton";
 import getClasses from "./utils/get-classes";
 import handleDownload from "./utils/handle-download";
 
-const imgTypes = new Set(["png", "jpg"]);
+const imgTypes = new Set(["png", "jpg", "jpeg", "gif", "webp", "image"]);
 
 export default function FileCard({
   fileName,

src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx

@@ -5,6 +5,8 @@ import IconComponent, {
 import { Skeleton } from "../../../../../components/ui/skeleton";
 import formatFileName from "./utils/format-file-name";
 
+const supImgFiles = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "image"];
+
 export default function FilePreview({
   error,
   file,
@@ -16,7 +18,8 @@ export default function FilePreview({
   error: boolean;
   onDelete: () => void;
 }) {
-  const isImage = file.type.toLowerCase().includes("image");
+  const fileType = file.type.toLowerCase();
+  const isImage = supImgFiles.some((type) => fileType.includes(type));
 
   const [isHovered, setIsHovered] = useState(false);