add multiple files to studio (#1254)

BloopAI · Apr 8, 2024 · 659f6c3 · 659f6c3
1 parent 77a7ddb
commit 659f6c3
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 70 deletions.
diff --git a/client/src/CommandBar/Body/Item.tsx b/client/src/CommandBar/Body/Item.tsx
@@ -76,23 +76,26 @@ const CommandBarItem = ({
     [index, setFocusedIndex],
   );
 
-  const handleClick = useCallback(() => {
-    if (onClick) {
-      onClick();
-      if (closeOnClick) {
-        setIsVisible(false);
-        setChosenStep({ id: CommandBarStepEnum.INITIAL });
+  const handleClick = useCallback(
+    (e: React.MouseEvent | KeyboardEvent) => {
+      if (onClick) {
+        onClick(e);
+        if (closeOnClick) {
+          setIsVisible(false);
+          setChosenStep({ id: CommandBarStepEnum.INITIAL });
+        }
+      } else {
+        setChosenStep({
+          id: id as Exclude<
+            CommandBarStepEnum,
+            CommandBarStepEnum.ADD_TO_STUDIO | CommandBarStepEnum.SEARCH_DOCS
+          >,
+        });
       }
-    } else {
-      setChosenStep({
-        id: id as Exclude<
-          CommandBarStepEnum,
-          CommandBarStepEnum.ADD_TO_STUDIO | CommandBarStepEnum.SEARCH_DOCS
-        >,
-      });
-    }
-    updateArrayInStorage(RECENT_COMMANDS_KEY, itemKey);
-  }, [id, onClick, closeOnClick, itemKey]);
+      updateArrayInStorage(RECENT_COMMANDS_KEY, itemKey);
+    },
+    [id, onClick, closeOnClick, itemKey],
+  );
 
   const handleKeyEvent = useCallback(
     (e: KeyboardEvent) => {
@@ -103,7 +106,7 @@ const CommandBarItem = ({
       ) {
         e.preventDefault();
         e.stopPropagation();
-        handleClick();
+        handleClick(e);
         return;
       }
       if (focusedIndex === index && shortAction?.action) {

diff --git a/client/src/CommandBar/steps/SeachFiles.tsx b/client/src/CommandBar/steps/SeachFiles.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
   ChangeEvent,
   memo,
   useCallback,
@@ -12,7 +12,11 @@ import { Trans, useTranslation } from 'react-i18next';
 import Header from '../Header';
 import { CommandBarStepEnum, TabTypesEnum } from '../../types/general';
 import { CommandBarContext } from '../../context/commandBarContext';
-import { getAutocomplete } from '../../services/api';
+import {
+  getAutocomplete,
+  getCodeStudio,
+  patchCodeStudio,
+} from '../../services/api';
 import { FileResItem } from '../../types/api';
 import Body from '../Body';
 import FileIcon from '../../components/FileIcon';
@@ -34,7 +38,9 @@ const SearchFiles = ({ studioId }: Props) => {
   const { setChosenStep, setIsVisible } = useContext(
     CommandBarContext.Handlers,
   );
-  const { project } = useContext(ProjectContext.Current);
+  const { project, refreshCurrentProjectRepos } = useContext(
+    ProjectContext.Current,
+  );
   const { openNewTab } = useContext(TabsContext.Handlers);
   const { setIsLeftSidebarFocused } = useContext(UIContext.Focus);
   const [files, setFiles] = useState<
@@ -65,7 +71,7 @@ const SearchFiles = ({ studioId }: Props) => {
     if (project?.id) {
       getAutocomplete(
         project.id,
-        `path:${searchValue}&content=false&page_size=20`,
+        `path:${searchValue}&content=false&file=true&page_size=20`,
       ).then((respPath) => {
         const fileResults = respPath.data
           .filter(
@@ -96,41 +102,89 @@ const SearchFiles = ({ studioId }: Props) => {
         items: filterOutDuplicates(
           files.map((f) => ({ ...f, key: `${f.path}-${f.repo}-${f.branch}` })),
           'key',
-        ).map(({ path, repo, branch, key }) => ({
-          key,
-          id: key,
-          onClick: () => {
-            openNewTab({
-              type: TabTypesEnum.FILE,
-              path,
-              repoRef: repo,
-              branch,
-              studioId,
-            });
-            setIsLeftSidebarFocused(false);
-            setIsVisible(false);
-            setChosenStep({ id: CommandBarStepEnum.INITIAL });
-          },
-          label: path,
-          footerHint: `${splitPath(repo)
-            .slice(repo.startsWith('local//') ? -1 : -2)
-            .join('/')} ${
-            branch ? `/ ${splitPath(branch).pop()} ` : ''
-          }/ ${path}`,
-          footerBtns: [
-            {
-              label: studioId ? t('Add file') : t('Open'),
-              shortcut: ['entr'],
+        ).map(({ path, repo, branch, key }) => {
+          const addMultipleFilesToStudio = async () => {
+            if (project?.id && studioId) {
+              const studio = await getCodeStudio(project.id, studioId);
+              const patchedFile = studio?.context.find(
+                (f) =>
+                  f.path === path && f.repo === repo && f.branch === branch,
+              );
+              if (!patchedFile) {
+                await patchCodeStudio(project.id, studioId, {
+                  context: [
+                    ...(studio?.context || []),
+                    {
+                      path,
+                      branch: branch,
+                      repo,
+                      hidden: false,
+                      ranges: [],
+                    },
+                  ],
+                });
+                refreshCurrentProjectRepos();
+                openNewTab({
+                  type: TabTypesEnum.FILE,
+                  path,
+                  repoRef: repo,
+                  branch,
+                  studioId,
+                  isFileInContext: true,
+                  initialRanges: [],
+                });
+              }
+            }
+          };
+          return {
+            key,
+            id: key,
+            onClick: async (e: React.MouseEvent | KeyboardEvent) => {
+              if (studioId && e.shiftKey && project?.id) {
+                await addMultipleFilesToStudio();
+              } else {
+                openNewTab({
+                  type: TabTypesEnum.FILE,
+                  path,
+                  repoRef: repo,
+                  branch,
+                  studioId,
+                });
+                setIsLeftSidebarFocused(false);
+                setIsVisible(false);
+                setChosenStep({ id: CommandBarStepEnum.INITIAL });
+              }
             },
-          ],
-          Icon: (props: { sizeClassName?: string }) => (
-            <FileIcon filename={path} noMargin />
-          ),
-        })),
+            label: path,
+            footerHint: `${splitPath(repo)
+              .slice(repo.startsWith('local//') ? -1 : -2)
+              .join('/')} ${
+              branch ? `/ ${splitPath(branch).pop()} ` : ''
+            }/ ${path}`,
+            footerBtns: [
+              ...(studioId
+                ? [
+                    {
+                      label: t('Add multiple files'),
+                      shortcut: ['shift', 'entr'],
+                      action: addMultipleFilesToStudio,
+                    },
+                  ]
+                : []),
+              {
+                label: studioId ? t('Add file') : t('Open'),
+                shortcut: ['entr'],
+              },
+            ],
+            Icon: (props: { sizeClassName?: string }) => (
+              <FileIcon filename={path} noMargin />
+            ),
+          };
+        }),
         itemsOffset: 0,
       },
     ];
-  }, [files, studioId]);
+  }, [files, studioId, project?.id]);
 
   return (
     <div className="flex flex-col h-[28.875rem] w-[40rem] overflow-auto">

diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/AddContextFile.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/AddContextFile.tsx
@@ -4,13 +4,15 @@ import Button from '../../../../components/Button';
 import { CommandBarContext } from '../../../../context/commandBarContext';
 import { CommandBarStepEnum } from '../../../../types/general';
 import { useArrowNavigationItemProps } from '../../../../hooks/useArrowNavigationItemProps';
+import PlusSign from '../../../../icons/PlusSign';
 
 type Props = {
   studioId: string;
   index: string;
+  isFull?: boolean;
 };
 
-const AddContextFile = ({ studioId, index }: Props) => {
+const AddContextFile = ({ studioId, index, isFull }: Props) => {
   useTranslation();
   const { setChosenStep, setIsVisible } = useContext(
     CommandBarContext.Handlers,
@@ -28,17 +30,31 @@ const AddContextFile = ({ studioId, index }: Props) => {
 
   return (
     <div
-      className={`pb-2 pr-4 pl-10.5 ${isFocused ? 'bg-bg-sub-hover' : ''}`}
+      className={`${
+        isFull ? 'pb-2' : isFocused ? 'text-label-title' : 'text-label-base '
+      } pr-4 pl-10.5 ${isFocused ? 'bg-bg-sub-hover' : ''}`}
       {...props}
     >
-      <div className="flex flex-col items-center p-4 gap-4 rounded-md border border-dashed border-bg-border">
-        <p className="select-none body-mini text-label-base">
-          <Trans>Studio conversation require at least one context file.</Trans>
-        </p>
-        <Button variant="secondary" size="mini" onClick={onClick}>
-          <Trans>Add file</Trans>
-        </Button>
-      </div>
+      {isFull ? (
+        <div className="flex flex-col items-center p-4 gap-4 rounded-md border border-dashed border-bg-border">
+          <p className="select-none body-mini text-label-base">
+            <Trans>
+              Studio conversation require at least one context file.
+            </Trans>
+          </p>
+          <Button variant="secondary" size="mini" onClick={onClick}>
+            <Trans>Add files</Trans>
+          </Button>
+        </div>
+      ) : (
+        <div
+          className="flex items-center gap-3 cursor-pointer h-7 w-full"
+          onClick={onClick}
+        >
+          <PlusSign sizeClassName="w-3.5 h-3.5" />
+          <Trans>Add files</Trans>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx
@@ -21,6 +21,8 @@ import Tooltip from '../../../../components/Tooltip';
 import Badge from '../../../../components/Badge';
 import { IndexingStatusType } from '../../../../types/general';
 import { useArrowNavigationItemProps } from '../../../../hooks/useArrowNavigationItemProps';
+import PlusSign from '../../../../icons/PlusSign';
+import Button from '../../../../components/Button';
 import StudioSubItem from './StudioSubItem';
 import AddContextFile from './AddContextFile';
 import StudioFile from './StudioFile';
@@ -121,8 +123,12 @@ const StudioEntry = ({
           <div className="body-tiny text-label-base pl-10.5 pr-4 h-7 flex items-center">
             <Trans>Context files</Trans>
           </div>
-          {!context.length && !previewingSnapshot && (
-            <AddContextFile studioId={id} index={`${index}-add-file`} />
+          {!previewingSnapshot && (
+            <AddContextFile
+              studioId={id}
+              index={`${index}-add-file`}
+              isFull={!context.length}
+            />
           )}
           {(previewingSnapshot?.context || context).map((f, i) => (
             <StudioFile

diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -536,5 +536,6 @@
 	"Default": "Default",
 	"Simplified": "Simplified",
 	"Recommended: The classic input": "Recommended: The classic input",
-	"Fallback: Use if experiencing problems with the default one": "Fallback: Use if experiencing problems with the default one"
+	"Fallback: Use if experiencing problems with the default one": "Fallback: Use if experiencing problems with the default one",
+	"Add multiple files": "Add multiple files"
 }
diff --git a/client/src/locales/es.json b/client/src/locales/es.json
@@ -535,5 +535,6 @@
 	"Fallback: Use if experiencing problems with the default one": "Fallback: use si experimenta problemas con el predeterminado",
 	"Select the input type to use in conversations": "Seleccione el tipo de entrada a usar en conversaciones",
 	"Default": "Por defecto",
-	"Recommended: The classic input": "Recomendado: la entrada clásica"
+	"Recommended: The classic input": "Recomendado: la entrada clásica",
+	"Add multiple files": "Agregar varios archivos"
 }
diff --git a/client/src/locales/it.json b/client/src/locales/it.json
@@ -517,5 +517,6 @@
 	"Simplified": "Semplificata",
 	"Select the input type to use in conversations": "Seleziona il tipo di input da utilizzare nelle conversazioni",
 	"Recommended: The classic input": "Consigliato: l'ingresso classico",
-	"Conversation input": "Input di conversazione"
+	"Conversation input": "Input di conversazione",
+	"Add multiple files": "Aggiungi più file"
 }
diff --git a/client/src/locales/ja.json b/client/src/locales/ja.json
@@ -522,5 +522,6 @@
 	"Simplified": "簡素化",
 	"Default": "デフォルト",
 	"Recommended: The classic input": "推奨：クラシック入力",
-	"Conversation input": "会話の入力"
+	"Conversation input": "会話の入力",
+	"Add multiple files": "複数のファイルを追加します"
 }
diff --git a/client/src/locales/zh-CN.json b/client/src/locales/zh-CN.json
@@ -532,5 +532,6 @@
 	"Simplified": "简化",
 	"Select the input type to use in conversations": "选择要在对话中使用的输入类型",
 	"Default": "默认",
-	"Recommended: The classic input": "推荐：经典输入"
+	"Recommended: The classic input": "推荐：经典输入",
+	"Add multiple files": "添加多个文件"
 }
diff --git a/client/src/types/general.ts b/client/src/types/general.ts
@@ -475,7 +475,7 @@ export type CommandBarItemGeneralType = {
     action?: () => void | Promise<void>;
   }[];
   iconContainerClassName?: string;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent | KeyboardEvent) => void | Promise<void>;
 };
 
 export type CommandBarItemInvisibleType = {