use /file and /folder endpoints instead of /q?open:true

client/src/Project/CurrentTabContent/ChatTab/Message/LoadingStep.tsx

@@ -0,0 +1,43 @@
+import { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import FileChip from '../../../../components/Chips/FileChip';
+import { ChatLoadingStep, TabTypesEnum } from '../../../../types/general';
+import { TabsContext } from '../../../../context/tabsContext';
+
+type Props = ChatLoadingStep & {
+  side: 'left' | 'right';
+  repo?: string;
+};
+
+const LoadingStep = ({ type, path, displayText, side, repo }: Props) => {
+  const { t } = useTranslation();
+  const { openNewTab } = useContext(TabsContext.Handlers);
+
+  const handleClickFile = useCallback(() => {
+    if (type === 'proc' && repo && path) {
+      openNewTab(
+        {
+          type: TabTypesEnum.FILE,
+          repoRef: repo,
+          path,
+        },
+        side === 'left' ? 'right' : 'left',
+      );
+    }
+  }, [path, repo, side]);
+
+  return (
+    <div className="flex gap-2 body-s text-label-base items-center">
+      <span>{type === 'proc' ? t('Reading ') : displayText}</span>
+      {type === 'proc' ? (
+        <FileChip
+          onClick={handleClickFile}
+          fileName={path.split('/').pop() || ''}
+          filePath={path || ''}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default memo(LoadingStep);

client/src/Project/CurrentTabContent/ChatTab/Message/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 import {
@@ -22,11 +22,12 @@ import SpinLoaderContainer from '../../../../components/Loaders/SpinnerLoader';
 import {
   getPlainFromStorage,
   LOADING_STEPS_SHOWN_KEY,
+  savePlainToStorage,
 } from '../../../../services/storage';
 import { LocaleContext } from '../../../../context/localeContext';
-import FileChip from '../../../../components/Chips/FileChip';
 import { upvoteAnswer } from '../../../../services/api';
 import UserParsedQuery from './UserParsedQuery';
+import LoadingStep from './LoadingStep';
 
 type Props = {
   author: ChatMessageAuthor;
@@ -76,6 +77,13 @@ const ConversationMessage = ({
       : true,
   );
 
+  useEffect(() => {
+    savePlainToStorage(
+      LOADING_STEPS_SHOWN_KEY,
+      isLoadingStepsShown ? '1' : '0',
+    );
+  }, [isLoadingStepsShown]);
+
   const toggleStepsShown = useCallback(() => {
     setLoadingStepsShown((prev) => !prev);
   }, []);
@@ -195,24 +203,7 @@ const ConversationMessage = ({
                 }}
               >
                 {loadingSteps.map((s, i) => (
-                  <div
-                    className="flex gap-2 body-s text-label-base items-center"
-                    key={i}
-                  >
-                    <span>
-                      {s.type === 'proc' ? t('Reading ') : s.displayText}
-                    </span>
-                    {s.type === 'proc' ? (
-                      <FileChip
-                        onClick={() =>
-                          // navigateFullResult(s.path, undefined, i, threadId)
-                          {}
-                        }
-                        fileName={s.path.split('/').pop() || ''}
-                        filePath={s.path || ''}
-                      />
-                    ) : null}
-                  </div>
+                  <LoadingStep {...s} key={i} side={side} />
                 ))}
               </div>
             )}

client/src/Project/CurrentTabContent/FileTab.tsx

@@ -5,18 +5,19 @@ import React, {
   useEffect,
   useRef,
   useState,
+  useTransition,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
   forceFileToBeIndexed,
+  getFileContent,
   getHoverables,
-  search,
 } from '../../services/api';
-import { buildRepoQuery, splitPath } from '../../utils';
+import { splitPath } from '../../utils';
 import FileIcon from '../../components/FileIcon';
 import Button from '../../components/Button';
 import { EyeCutIcon, MoreHorizontalIcon } from '../../icons';
-import { File } from '../../types/api';
+import { FileResponse } from '../../types/api';
 import { mapRanges } from '../../mappers/results';
 import { Range } from '../../types/results';
 import CodeFull from '../../components/Code/CodeFull';
@@ -27,7 +28,6 @@ import { DeviceContext } from '../../context/deviceContext';
 import { ProjectContext } from '../../context/projectContext';
 
 type Props = {
-  repoName: string;
   repoRef: string;
   path: string;
   scrollToLine?: string;
@@ -37,7 +37,6 @@ type Props = {
 };
 
 const FileTab = ({
-  repoName,
   path,
   noBorder,
   repoRef,
@@ -46,39 +45,40 @@ const FileTab = ({
   tokenRange,
 }: Props) => {
   const { t } = useTranslation();
-  const [file, setFile] = useState<
-    (File & { hoverableRanges?: Record<number, Range[]> }) | null
-  >(null);
+  const [file, setFile] = useState<FileResponse | null>(null);
+  const [hoverableRanges, setHoverableRanges] = useState<
+    Record<number, Range[]> | undefined
+  >(undefined);
   const [indexRequested, setIndexRequested] = useState(false);
+  const [isFetched, setIsFetched] = useState(false);
   const { apiUrl } = useContext(DeviceContext);
   const { refreshCurrentProjectRepos } = useContext(ProjectContext.Current);
   const eventSourceRef = useRef<EventSource | null>(null);
+  const [isPending, startTransition] = useTransition();
 
   useEffect(() => {
     setIndexRequested(false);
-  }, [repoName, path, repoRef]);
+  }, [path, repoRef]);
 
   const refetchFile = useCallback(() => {
-    search(buildRepoQuery(repoName, path, branch)).then((resp) => {
-      const item = resp?.data?.[0]?.data as File;
-      if (!item) {
-        return;
-      }
-      setFile(item);
-      if (item.indexed) {
-        getHoverables(
-          item.relative_path,
-          item.repo_ref,
-          // selectedBranch ? selectedBranch : undefined,
-        ).then((data) => {
-          setFile((prevState) => ({
-            ...prevState!,
-            hoverableRanges: mapRanges(data.ranges),
-          }));
+    getFileContent(repoRef, path, branch)
+      .then((resp) => {
+        if (!resp) {
+          return;
+        }
+        startTransition(() => {
+          setFile(resp);
         });
-      }
-    });
-  }, [repoName, path, branch]);
+        // if (item.indexed) {
+        getHoverables(path, repoRef, branch).then((data) => {
+          setHoverableRanges(mapRanges(data.ranges));
+        });
+        // }
+      })
+      .finally(() => {
+        setIsFetched(true);
+      });
+  }, [repoRef, path, branch]);
 
   useEffect(() => {
     refetchFile();
@@ -153,19 +153,18 @@ const FileTab = ({
       <div className="flex-1 h-full max-w-full pl-4 py-4 overflow-auto">
         {file?.lang === 'jupyter notebook' ? (
           <IpynbRenderer data={file.contents} />
-        ) : file?.indexed ? (
+        ) : file ? (
           <CodeFull
             code={file.contents}
             language={file.lang}
-            repoRef={file.repo_ref}
-            relativePath={file.relative_path}
-            hoverableRanges={file.hoverableRanges}
-            repoName={file.repo_name}
+            repoRef={repoRef}
+            relativePath={path}
+            hoverableRanges={hoverableRanges}
             scrollToLine={scrollToLine}
             branch={branch}
             tokenRange={tokenRange}
           />
-        ) : !!file && !file.indexed ? (
+        ) : isFetched && !file ? (
           <div className="flex-1 h-full flex flex-col items-center justify-center gap-6">
             <div className="w-15 h-15 flex items-center justify-center rounded-xl border border-bg-divider">
               <EyeCutIcon sizeClassName="w-5 h-5" />

client/src/Project/CurrentTabContent/Header/TabButton.tsx

@@ -26,10 +26,12 @@ type Props = TabType & {
   moveTab: (i: number, j: number) => void;
   i: number;
   repoRef?: string;
-  repoName?: string;
   path?: string;
   threadId?: string;
   name?: string;
+  branch?: string | null;
+  scrollToLine?: string;
+  tokenRange?: string;
 };
 
 const TabButton = ({
@@ -43,8 +45,10 @@ const TabButton = ({
   side,
   moveTab,
   isOnlyTab,
-  repoName,
   i,
+  branch,
+  scrollToLine,
+  tokenRange,
 }: Props) => {
   const { t } = useTranslation();
   const { closeTab, setActiveLeftTab, setActiveRightTab, setFocusedPanel } =
@@ -105,7 +109,17 @@ const TabButton = ({
         id: tabKey,
         index: i,
         // @ts-ignore
-        t: { key: tabKey, repoRef, repoName, path, type, threadId, name },
+        t: {
+          key: tabKey,
+          repoRef: repoRef!,
+          path: path!,
+          type,
+          threadId,
+          name,
+          branch,
+          scrollToLine,
+          tokenRange,
+        },
         side,
       };
     },
@@ -126,9 +140,19 @@ const TabButton = ({
   const handleClick = useCallback(() => {
     const setAction = side === 'left' ? setActiveLeftTab : setActiveRightTab;
     // @ts-ignore
-    setAction({ path, repoRef, repoName, key: tabKey, type, threadId, name });
+    setAction({
+      path,
+      repoRef,
+      key: tabKey,
+      type,
+      threadId,
+      name,
+      branch,
+      scrollToLine,
+      tokenRange,
+    });
     setFocusedPanel(side);
-  }, [path, repoRef, tabKey, side, repoName]);
+  }, [path, repoRef, tabKey, side, branch, scrollToLine, tokenRange]);
 
   return (
     <a

client/src/Project/CurrentTabContent/index.tsx

@@ -53,7 +53,6 @@ const CurrentTabContent = ({ side, onDrop, shouldStretch }: Props) => {
           <FileTab
             key={tab.key}
             path={tab.path}
-            repoName={tab.repoName}
             repoRef={tab.repoRef}
             scrollToLine={tab.scrollToLine}
             noBorder={side === 'left'}

client/src/Project/LeftSidebar/NavPanel/Repo.tsx

@@ -10,9 +10,9 @@ import React, {
   MouseEvent,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Directory, DirectoryEntry } from '../../../types/api';
-import { search } from '../../../services/api';
-import { buildRepoQuery, splitPath } from '../../../utils';
+import { DirectoryEntry } from '../../../types/api';
+import { getFolderContent } from '../../../services/api';
+import { splitPath } from '../../../utils';
 import GitHubIcon from '../../../icons/GitHubIcon';
 import Dropdown from '../../../components/Dropdown';
 import {
@@ -25,7 +25,6 @@ import RepoEntry from './RepoEntry';
 import RepoDropdown from './RepoDropdown';
 
 type Props = {
-  repoName: string;
   repoRef: string;
   setExpanded: Dispatch<SetStateAction<number>>;
   isExpanded: boolean;
@@ -41,7 +40,6 @@ type Props = {
 const reactRoot = document.getElementById('root')!;
 
 const RepoNav = ({
-  repoName,
   repoRef,
   i,
   isExpanded,
@@ -59,19 +57,19 @@ const RepoNav = ({
 
   const fetchFiles = useCallback(
     async (path?: string) => {
-      const resp = await search(buildRepoQuery(repoName, path, branch));
-      if (!resp.data?.[0]?.data) {
+      const resp = await getFolderContent(repoRef, path, branch);
+      if (!resp.entries) {
         return [];
       }
-      return (resp.data[0].data as Directory)?.entries.sort((a, b) => {
+      return resp?.entries.sort((a, b) => {
         if ((a.entry_data === 'Directory') === (b.entry_data === 'Directory')) {
           return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
         } else {
           return a.entry_data === 'Directory' ? -1 : 1;
         }
       });
     },
-    [repoName, branch],
+    [repoRef, branch],
   );
 
   const refetchParentFolder = useCallback(() => {
@@ -124,7 +122,7 @@ const RepoNav = ({
         )}
         <div className="flex items-center gap-1 ellipsis body-s-b flex-1">
           <p className="text-label-title ellipsis">
-            {splitPath(repoName).pop()}
+            {splitPath(repoRef).pop()}
           </p>
           {isExpanded && (
             <>
@@ -174,7 +172,6 @@ const RepoNav = ({
             fetchFiles={fetchFiles}
             fullPath={f.name}
             repoRef={repoRef}
-            repoName={repoName}
             currentPath={currentPath}
             lastIndex={lastIndex}
             branch={branch}