feat: Add customizable chat input and file upload components (#8237)

✨ (custom-chat-input.tsx): introduce a new component CustomChatInput to customize chat input functionality
✨ (use-custom-post-upload-file.ts): introduce a custom hook customPostUploadFileV2 to handle file uploads with customization
✨ (use-custom-use-file-handler.ts): introduce a custom hook customUseFileHandler to handle file operations with customization
♻️ (use-upload-file.ts): refactor useUploadFile to use customPostUploadFileV2 for file uploads with customization
♻️ (chat-view.tsx): refactor ChatView component to use CustomChatInput instead of ChatInput for customization
♻️ (fileRendererComponent/index.tsx): refactor FileRendererComponent to use customPostUploadFileV2 for file uploads with customization
♻️ (index.tsx): refactor MainPage filesPage to use customPostUploadFileV2 for file uploads with customization

src/frontend/src/customization/components/custom-chat-input.tsx

@@ -0,0 +1,26 @@
+import ChatInput from "@/modals/IOModal/components/chatView/chatInput/chat-input";
+import { ChatInputType } from "@/types/components";
+
+export const CustomChatInput = ({
+  sendMessage,
+  inputRef,
+  noInput,
+  files,
+  setFiles,
+  isDragging,
+  playgroundPage,
+}: ChatInputType) => {
+  return (
+    <ChatInput
+      sendMessage={sendMessage}
+      inputRef={inputRef}
+      noInput={noInput}
+      files={files}
+      setFiles={setFiles}
+      isDragging={isDragging}
+      playgroundPage={playgroundPage}
+    />
+  );
+};
+
+export default CustomChatInput;

src/frontend/src/customization/hooks/use-custom-post-upload-file.ts

@@ -0,0 +1,13 @@
+import { usePostUploadFileV2 } from "@/controllers/API/queries/file-management";
+import { useMutationFunctionType } from "@/types/api";
+
+interface IPostUploadFile {
+  file: File;
+}
+
+export const customPostUploadFileV2: useMutationFunctionType<
+  undefined,
+  IPostUploadFile
+> = (options?) => {
+  return usePostUploadFileV2(options);
+};

src/frontend/src/customization/hooks/use-custom-use-file-handler.ts

@@ -0,0 +1,7 @@
+import { useFileHandler } from "@/modals/IOModal/components/chatView/chatInput/hooks/use-file-handler";
+
+export const customUseFileHandler = (currentFlowId: string) => {
+  return useFileHandler(currentFlowId);
+};
+
+export default customUseFileHandler;

src/frontend/src/hooks/files/use-upload-file.ts

@@ -1,4 +1,4 @@
-import { usePostUploadFileV2 } from "@/controllers/API/queries/file-management/use-post-upload-file";
+import { customPostUploadFileV2 } from "@/customization/hooks/use-custom-post-upload-file";
 import { createFileUpload } from "@/helpers/create-file-upload";
 import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
 
@@ -9,7 +9,7 @@ const useUploadFile = ({
   types?: string[];
   multiple?: boolean;
 }) => {
-  const { mutateAsync: uploadFileMutation } = usePostUploadFileV2();
+  const { mutateAsync: uploadFileMutation } = customPostUploadFileV2();
   const { validateFileSize } = useFileSizeValidator();
 
   const getFilesToUpload = async ({

src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx

@@ -1,5 +1,6 @@
 import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import { TextEffectPerChar } from "@/components/ui/textAnimation";
+import CustomChatInput from "@/customization/components/custom-chat-input";
 import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { useMessagesStore } from "@/stores/messagesStore";
@@ -18,7 +19,6 @@ import useFlowStore from "../../../../../stores/flowStore";
 import { ChatMessageType } from "../../../../../types/chat";
 import { chatViewProps } from "../../../../../types/components";
 import FlowRunningSqueleton from "../../flow-running-squeleton";
-import ChatInput from "../chatInput/chat-input";
 import useDragAndDrop from "../chatInput/hooks/use-drag-and-drop";
 import { useFileHandler } from "../chatInput/hooks/use-file-handler";
 import ChatMessage from "../chatMessage/chat-message";
@@ -287,7 +287,7 @@ export default function ChatView({
       </div>
 
       <div className="m-auto w-full max-w-[768px] md:w-5/6">
-        <ChatInput
+        <CustomChatInput
           playgroundPage={!!playgroundPage}
           noInput={!inputTypes.includes("ChatInput")}
           sendMessage={({ repeat, files }) => {

src/frontend/src/modals/fileManagerModal/components/filesRendererComponent/components/fileRendererComponent/index.tsx

@@ -3,7 +3,7 @@ import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import { usePostUploadFileV2 } from "@/controllers/API/queries/file-management";
+import { customPostUploadFileV2 } from "@/customization/hooks/use-custom-post-upload-file";
 import { FileType } from "@/types/file_management";
 import { formatFileSize } from "@/utils/stringManipulation";
 import { FILE_ICONS } from "@/utils/styleUtils";
@@ -37,7 +37,7 @@ export default function FileRendererComponent({
     handleRename && setOpenRename(true);
   };
 
-  const { mutate: uploadFile } = usePostUploadFileV2();
+  const { mutate: uploadFile } = customPostUploadFileV2();
 
   useEffect(() => {
     setNewName(file.name);

src/frontend/src/pages/MainPage/pages/filesPage/index.tsx

@@ -6,14 +6,11 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import Loading from "@/components/ui/loading";
 import { SidebarTrigger } from "@/components/ui/sidebar";
-import {
+import { useGetFilesV2 } from "@/controllers/API/queries/file-management";
-  useGetDownloadFileV2,
-  useGetFilesV2,
-  usePostUploadFileV2,
-} from "@/controllers/API/queries/file-management";
 import { useDeleteFilesV2 } from "@/controllers/API/queries/file-management/use-delete-files";
 import { useGetDownloadFilesV2 } from "@/controllers/API/queries/file-management/use-get-download-files";
 import { usePostRenameFileV2 } from "@/controllers/API/queries/file-management/use-put-rename-file";
+import { customPostUploadFileV2 } from "@/customization/hooks/use-custom-post-upload-file";
 import useUploadFile from "@/hooks/files/use-upload-file";
 import DeleteConfirmationModal from "@/modals/deleteConfirmationModal";
 import FilesContextMenuComponent from "@/modals/fileManagerModal/components/filesContextMenuComponent";
@@ -115,7 +112,7 @@ export const FilesPage = () => {
     }
   };
 
-  const { mutate: uploadFileDirect } = usePostUploadFileV2();
+  const { mutate: uploadFileDirect } = customPostUploadFileV2();
 
   const colDefs: ColDef[] = [
     {