feat: add option to upload file directly to folder via context menu (…

…Issue #230) (#354)

src/components/Chatbar/components/ChatFolders.tsx

@@ -21,7 +21,7 @@ import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
 
-import Folder from '@/src/components/Folder';
+import Folder from '@/src/components/Folder/Folder';
 
 import CollapsableSection from '../../Common/CollapsableSection';
 import { BetweenFoldersLine } from '../../Sidebar/BetweenFoldersLine';

src/components/Common/FolderContextMenu.tsx

@@ -4,6 +4,7 @@ import {
   IconFolderPlus,
   IconPencilMinus,
   IconTrashX,
+  IconUpload,
   IconUserShare,
   IconWorldShare,
 } from '@tabler/icons-react';
@@ -36,6 +37,7 @@ interface FolderContextMenuProps {
   onPublish?: MouseEventHandler<unknown>;
   onUnpublish?: MouseEventHandler<unknown>;
   onPublishUpdate?: MouseEventHandler<unknown>;
+  onUpload?: MouseEventHandler<unknown>;
 }
 export const FolderContextMenu = ({
   folder,
@@ -48,6 +50,7 @@ export const FolderContextMenu = ({
   onPublish,
   onUnpublish,
   onPublishUpdate,
+  onUpload,
   highlightColor,
   isOpen,
 }: FolderContextMenuProps) => {
@@ -60,6 +63,13 @@ export const FolderContextMenu = ({
   );
   const menuItems: DisplayMenuItemProps[] = useMemo(
     () => [
+      {
+        name: t('Upload'),
+        display: !!onUpload,
+        dataQa: 'upload',
+        Icon: IconUpload,
+        onClick: onUpload,
+      },
       {
         name: t('Rename'),
         display: !!onRename,
@@ -113,6 +123,7 @@ export const FolderContextMenu = ({
     ],
     [
       t,
+      onUpload,
       onRename,
       isSharingEnabled,
       onShare,

src/components/Files/FileManagerModal.tsx

@@ -26,11 +26,11 @@ import { FilesActions, FilesSelectors } from '@/src/store/files/files.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 
 import CaretIconComponent from '@/src/components/Common/CaretIconComponent';
+import Folder from '@/src/components/Folder/Folder';
 
 import FolderPlus from '../../../public/images/icons/folder-plus.svg';
 import { ErrorMessage } from '../Common/ErrorMessage';
 import { Spinner } from '../Common/Spinner';
-import Folder from '../Folder';
 import { FileItem, FileItemEventIds } from './FileItem';
 import { PreUploadDialog } from './PreUploadModal';
 
@@ -77,6 +77,9 @@ export const FileManagerModal = ({
   const [errorMessage, setErrorMessage] = useState<string | undefined>();
   const [openedFoldersIds, setOpenedFoldersIds] = useState<string[]>([]);
   const [isAllFilesOpened, setIsAllFilesOpened] = useState(true);
+  const [uploadFolderId, setUploadFolderId] = useState<string | undefined>(
+    undefined,
+  );
   const [isUploadFromDeviceOpened, setIsUploadFromDeviceOpened] =
     useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -154,6 +157,19 @@ export const FileManagerModal = ({
     },
     [dispatch, openedFoldersIds],
   );
+
+  const handleUploadFile = useCallback(
+    (relativePath: string) => {
+      setUploadFolderId(relativePath);
+      setIsUploadFromDeviceOpened(true);
+
+      if (!openedFoldersIds.includes(relativePath)) {
+        setOpenedFoldersIds(openedFoldersIds.concat(relativePath));
+        dispatch(FilesActions.getFolders({ path: relativePath }));
+      }
+    },
+    [dispatch, openedFoldersIds],
+  );
   const handleRenameFolder = useCallback(
     (newName: string, folderId: string) => {
       const renamingFolder = folders.find((folder) => folder.id === folderId);
@@ -250,6 +266,11 @@ export const FileManagerModal = ({
     t,
   ]);
 
+  const handleStartUploadFiles = useCallback(() => {
+    setUploadFolderId(undefined);
+    setIsUploadFromDeviceOpened(true);
+  }, []);
+
   const handleUploadFiles = useCallback(
     (
       selectedFiles: Required<Pick<DialFile, 'fileContent' | 'id' | 'name'>>[],
@@ -379,6 +400,7 @@ export const FileManagerModal = ({
                                       itemComponent={FileItem}
                                       onClickFolder={handleFolderSelect}
                                       onAddFolder={handleAddFolder}
+                                      onFileUpload={handleUploadFile}
                                       onRenameFolder={handleRenameFolder}
                                       onItemEvent={handleItemCallback}
                                     />
@@ -437,7 +459,7 @@ export const FileManagerModal = ({
                 </div>
                 <div className="flex items-center gap-3">
                   <button
-                    onClick={() => setIsUploadFromDeviceOpened(true)}
+                    onClick={handleStartUploadFiles}
                     className={classNames(
                       'button',
                       isInConversation ? 'button-secondary' : 'button-primary',
@@ -459,6 +481,7 @@ export const FileManagerModal = ({
 
               {isUploadFromDeviceOpened && (
                 <PreUploadDialog
+                  uploadFolderId={uploadFolderId}
                   isOpen
                   allowedTypes={allowedTypes}
                   initialFilesSelect

src/components/Files/PreUploadModal.tsx

@@ -48,6 +48,7 @@ interface Props {
     selectedFiles: Required<Pick<DialFile, 'fileContent' | 'id' | 'name'>>[],
     folderPath: string | undefined,
   ) => void;
+  uploadFolderId?: string;
 }
 
 const bytesInMb = 1_048_576;
@@ -59,6 +60,7 @@ export const PreUploadDialog = ({
   allowedTypes = [],
   onClose,
   onUploadFiles,
+  uploadFolderId,
 }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation(Translation.Chat);
@@ -74,9 +76,7 @@ export const PreUploadDialog = ({
   >([]);
   const [isChangeFolderModalOpened, setIsChangeFolderModalOpened] =
     useState(false);
-  const [selectedFolderId, setSelectedFolderId] = useState<string | undefined>(
-    undefined,
-  );
+  const [selectedFolderId, setSelectedFolderId] = useState(uploadFolderId);
 
   const { refs, context } = useFloating({
     open: isOpen,

src/components/Files/SelectFolderModal.tsx

@@ -25,11 +25,11 @@ import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 
 import CaretIconComponent from '@/src/components/Common/CaretIconComponent';
 import { NoResultsFound } from '@/src/components/Common/NoResultsFound';
+import Folder from '@/src/components/Folder/Folder';
 
 import FolderPlus from '../../../public/images/icons/folder-plus.svg';
 import { ErrorMessage } from '../Common/ErrorMessage';
 import { Spinner } from '../Common/Spinner';
-import Folder from '../Folder';
 
 interface Props {
   isOpen: boolean;

src/components/Folder/Folder.tsx

@@ -86,6 +86,7 @@ interface Props<T, P = unknown> {
   featureType?: FeatureType;
   onItemEvent?: (eventId: string, data: unknown) => void;
   readonly?: boolean;
+  onFileUpload?: (parentFolderId: string) => void;
 }
 
 const Folder = <T extends Conversation | Prompt | DialFile>({
@@ -109,6 +110,7 @@ const Folder = <T extends Conversation | Prompt | DialFile>({
   onDeleteFolder,
   onClickFolder,
   onAddFolder,
+  onFileUpload,
   onItemEvent,
   featureType,
   readonly = false,
@@ -354,6 +356,18 @@ const Folder = <T extends Conversation | Prompt | DialFile>({
     [currentFolder.id, onAddFolder],
   );
 
+  const onUpload: MouseEventHandler = useCallback(
+    (e) => {
+      if (!onFileUpload) {
+        return;
+      }
+
+      e.stopPropagation();
+      onFileUpload(currentFolder.id);
+    },
+    [currentFolder.id, onFileUpload],
+  );
+
   const handleDragStart = useCallback(
     (e: DragEvent<HTMLDivElement>, folder: FolderInterface) => {
       if (e.dataTransfer) {
@@ -559,6 +573,7 @@ const Folder = <T extends Conversation | Prompt | DialFile>({
                     onUnpublish={handleOpenUnpublishing}
                     highlightColor={highlightColor}
                     onOpenChange={setIsContextMenu}
+                    onUpload={onFileUpload && onUpload}
                     isOpen={isContextMenu}
                   />
                 </div>
@@ -637,6 +652,7 @@ const Folder = <T extends Conversation | Prompt | DialFile>({
                       handleDrop={handleDrop}
                       onDropBetweenFolders={onDropBetweenFolders}
                       onRenameFolder={onRenameFolder}
+                      onFileUpload={onFileUpload}
                       onDeleteFolder={onDeleteFolder}
                       onAddFolder={onAddFolder}
                       onClickFolder={onClickFolder}

src/components/Promptbar/components/PromptFolders.tsx

@@ -21,7 +21,7 @@ import {
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
 
-import Folder from '@/src/components/Folder';
+import Folder from '@/src/components/Folder/Folder';
 
 import CollapsableSection from '../../Common/CollapsableSection';
 import { BetweenFoldersLine } from '../../Sidebar/BetweenFoldersLine';