studio navigation using left sidebar

BloopAI · Jan 18, 2024 · 6e1f6c3 · 6e1f6c3
1 parent 47b51c5
commit 6e1f6c3
Show file tree

Hide file tree

Showing 33 changed files with 541 additions and 332 deletions.
diff --git a/client/src/Project/CurrentTabContent/Header/TabButton.tsx b/client/src/Project/CurrentTabContent/Header/TabButton.tsx
@@ -38,6 +38,16 @@ type Props = TabType & {
   tokenRange?: string;
   focusedPanel: 'left' | 'right';
   isTemp?: boolean;
+  studioId?: string;
+  initialRanges?: [number, number][];
+  isFileInContext?: boolean;
+  conversationId?: string;
+  initialQuery?: {
+    path: string;
+    lines: [number, number];
+    repoRef: string;
+    branch?: string | null | undefined;
+  };
 };
 
 const closeTabShortcut = ['cmd', 'W'];
@@ -58,6 +68,11 @@ const TabButton = ({
   tokenRange,
   focusedPanel,
   isTemp,
+  studioId,
+  initialRanges,
+  isFileInContext,
+  conversationId,
+  initialQuery,
 }: Props) => {
   const { t } = useTranslation();
   const { closeTab, setActiveLeftTab, setActiveRightTab, setFocusedPanel } =
@@ -140,6 +155,11 @@ const TabButton = ({
           branch,
           scrollToLine,
           tokenRange,
+          studioId,
+          initialRanges,
+          isFileInContext,
+          conversationId,
+          initialQuery,
         },
         side,
       };
@@ -170,9 +190,28 @@ const TabButton = ({
       branch,
       scrollToLine,
       tokenRange,
+      studioId,
+      initialRanges,
+      isFileInContext,
+      conversationId,
+      initialQuery,
     });
     setFocusedPanel(side);
-  }, [path, repoRef, tabKey, side, branch, scrollToLine, tokenRange, title]);
+  }, [
+    path,
+    repoRef,
+    tabKey,
+    side,
+    branch,
+    scrollToLine,
+    tokenRange,
+    title,
+    studioId,
+    initialRanges,
+    isFileInContext,
+    conversationId,
+    initialQuery,
+  ]);
 
   return (
     <a

diff --git a/client/src/Project/CurrentTabContent/StudioTab/Conversation/Input/index.tsx b/client/src/Project/CurrentTabContent/StudioTab/Conversation/Input/index.tsx
@@ -37,6 +37,7 @@ type Props = {
   templatesRef?: React.MutableRefObject<HTMLButtonElement | null>;
   isTokenLimitExceeded: boolean;
   isLast: boolean;
+  isActiveTab: boolean;
   side: 'left' | 'right';
   templates?: StudioTemplateType[];
   setIsDropdownShown: (b: boolean) => void;
@@ -55,6 +56,7 @@ const ConversationInput = ({
   templates,
   setIsDropdownShown,
   templatesRef,
+  isActiveTab,
 }: Props) => {
   const { t } = useTranslation();
   const { envConfig } = useContext(EnvContext);
@@ -65,9 +67,11 @@ const ConversationInput = ({
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
-      onMessageChange(e.target.value, i);
+      if (isActiveTab) {
+        onMessageChange(e.target.value, i);
+      }
     },
-    [i, onMessageChange],
+    [i, onMessageChange, isActiveTab],
   );
 
   useEffect(() => {

diff --git a/client/src/Project/CurrentTabContent/StudioTab/Conversation/index.tsx b/client/src/Project/CurrentTabContent/StudioTab/Conversation/index.tsx
@@ -141,6 +141,7 @@ const Conversation = ({
             isLast={i === studioData.conversation.length - 1}
             side={side}
             templates={templates}
+            isActiveTab={isActiveTab}
             setIsDropdownShown={setIsDropdownShown}
           />
         ))}
@@ -198,6 +199,7 @@ const Conversation = ({
               templates={templates}
               setIsDropdownShown={setIsDropdownShown}
               templatesRef={templatesRef}
+              isActiveTab={isActiveTab}
             />
           )}
       </ScrollToBottom>

diff --git a/client/src/Project/CurrentTabContent/StudioTab/index.tsx b/client/src/Project/CurrentTabContent/StudioTab/index.tsx
@@ -17,11 +17,7 @@ import Dropdown from '../../../components/Dropdown';
 import { checkEventKeys } from '../../../utils/keyboardUtils';
 import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
 import { TabsContext } from '../../../context/tabsContext';
-import {
-  ChatTabType,
-  SettingSections,
-  StudioTabType,
-} from '../../../types/general';
+import { SettingSections, StudioTabType } from '../../../types/general';
 import { ProjectContext } from '../../../context/projectContext';
 import { CommandBarContext } from '../../../context/commandBarContext';
 import { openInSplitViewShortcut } from '../../../consts/commandBar';

diff --git a/...idebar/NavPanel/ConversationsDropdown.tsx → ...l/Conversations/ConversationsDropdown.tsx b/...idebar/NavPanel/ConversationsDropdown.tsx → ...l/Conversations/ConversationsDropdown.tsx
@@ -1,10 +1,10 @@
 import { memo, useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import DropdownSection from '../../../components/Dropdown/Section';
-import SectionItem from '../../../components/Dropdown/Section/SectionItem';
-import { TrashCanIcon } from '../../../icons';
-import { deleteConversation } from '../../../services/api';
-import { ProjectContext } from '../../../context/projectContext';
+import DropdownSection from '../../../../components/Dropdown/Section';
+import SectionItem from '../../../../components/Dropdown/Section/SectionItem';
+import { TrashCanIcon } from '../../../../icons';
+import { deleteConversation } from '../../../../services/api';
+import { ProjectContext } from '../../../../context/projectContext';
 
 type Props = {};
 

diff --git a/...LeftSidebar/NavPanel/CoversationEntry.tsx → ...vPanel/Conversations/CoversationEntry.tsx b/...LeftSidebar/NavPanel/CoversationEntry.tsx → ...vPanel/Conversations/CoversationEntry.tsx
@@ -1,20 +1,30 @@
 import { memo, useCallback, useContext } from 'react';
-import { ConversationShortType } from '../../../types/api';
-import { TabsContext } from '../../../context/tabsContext';
-import { TabTypesEnum } from '../../../types/general';
+import { ConversationShortType } from '../../../../types/api';
+import { TabsContext } from '../../../../context/tabsContext';
+import { TabTypesEnum } from '../../../../types/general';
+import { useEnterKey } from '../../../../hooks/useEnterKey';
 
 type Props = ConversationShortType & {
   index: string;
   focusedIndex: string;
+  isLeftSidebarFocused: boolean;
 };
 
-const ConversationEntry = ({ title, id, index, focusedIndex }: Props) => {
+const ConversationEntry = ({
+  title,
+  id,
+  index,
+  focusedIndex,
+  isLeftSidebarFocused,
+}: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
   const handleClick = useCallback(() => {
     openNewTab({ type: TabTypesEnum.CHAT, conversationId: id, title });
   }, [openNewTab, id, title]);
 
+  useEnterKey(handleClick, focusedIndex !== index || !isLeftSidebarFocused);
+
   return (
     <a
       href="#"
@@ -24,7 +34,7 @@ const ConversationEntry = ({ title, id, index, focusedIndex }: Props) => {
             ? 'bg-bg-sub-hover text-label-title'
             : 'text-label-base'
         }
-        hover:bg-bg-base-hover hover:text-label-title active:bg-transparent pl-[2.625rem]`}
+        hover:bg-bg-base-hover hover:text-label-title active:bg-transparent pl-10.5`}
       onClick={handleClick}
       data-node-index={index}
     >

diff --git a/...ct/LeftSidebar/NavPanel/Conversations.tsx → ...tSidebar/NavPanel/Conversations/index.tsx b/...ct/LeftSidebar/NavPanel/Conversations.tsx → ...tSidebar/NavPanel/Conversations/index.tsx
@@ -1,27 +1,19 @@
-import React, {
-  Dispatch,
-  memo,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useRef,
-  MouseEvent,
-  useContext,
-} from 'react';
+import React, { Dispatch, memo, SetStateAction, useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import Dropdown from '../../../components/Dropdown';
+import Dropdown from '../../../../components/Dropdown';
 import {
   ArrowTriangleBottomIcon,
   ChatBubblesIcon,
   MoreHorizontalIcon,
-} from '../../../icons';
-import Button from '../../../components/Button';
-import { ProjectContext } from '../../../context/projectContext';
+} from '../../../../icons';
+import Button from '../../../../components/Button';
+import { ProjectContext } from '../../../../context/projectContext';
+import { useNavPanel } from '../../../../hooks/useNavPanel';
 import ConversationsDropdown from './ConversationsDropdown';
 import ConversationEntry from './CoversationEntry';
 
 type Props = {
-  setExpanded: Dispatch<SetStateAction<number>>;
+  setExpanded: Dispatch<SetStateAction<string>>;
   isExpanded: boolean;
   focusedIndex: string;
   index: string;
@@ -37,27 +29,8 @@ const ConversationsNav = ({
 }: Props) => {
   const { t } = useTranslation();
   const { project } = useContext(ProjectContext.Current);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const toggleExpanded = useCallback(() => {
-    setExpanded((prev) => (prev === 0 ? -1 : 0));
-  }, []);
-
-  useEffect(() => {
-    if (isExpanded) {
-      // containerRef.current?.scrollIntoView({ block: 'nearest' });
-    }
-  }, [isExpanded]);
-
-  const noPropagate = useCallback((e?: MouseEvent) => {
-    e?.stopPropagation();
-  }, []);
-
-  useEffect(() => {
-    if (focusedIndex === index && containerRef.current) {
-      containerRef.current.scrollIntoView({ block: 'nearest' });
-    }
-  }, [focusedIndex, index]);
+  const { containerRef, toggleExpanded, noPropagate, isLeftSidebarFocused } =
+    useNavPanel(index, setExpanded, isExpanded, focusedIndex);
 
   return (
     <div className="select-none overflow-hidden w-full flex-shrink-0">
@@ -108,12 +81,13 @@ const ConversationsNav = ({
       </span>
       {isExpanded && (
         <div className={'overflow-hidden'}>
-          {project?.conversations.map((c, ci) => (
+          {project?.conversations.map((c) => (
             <ConversationEntry
               key={c.id}
               {...c}
-              index={`${index}-${ci}`}
+              index={`${index}-${c.id}`}
               focusedIndex={focusedIndex}
+              isLeftSidebarFocused={isLeftSidebarFocused}
             />
           ))}
         </div>

diff --git a/...ect/LeftSidebar/NavPanel/RepoDropdown.tsx → ...eftSidebar/NavPanel/Repo/RepoDropdown.tsx b/...ect/LeftSidebar/NavPanel/RepoDropdown.tsx → ...eftSidebar/NavPanel/Repo/RepoDropdown.tsx
@@ -9,29 +9,29 @@ import {
   useEffect,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import DropdownSection from '../../../components/Dropdown/Section';
-import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import DropdownSection from '../../../../components/Dropdown/Section';
+import SectionItem from '../../../../components/Dropdown/Section/SectionItem';
 import {
   ArrowTriangleBottomIcon,
   BranchIcon,
   RefreshIcon,
   TrashCanIcon,
-} from '../../../icons';
+} from '../../../../icons';
 import {
   changeRepoBranch,
   indexRepoBranch,
   removeRepoFromProject,
   syncRepo,
-} from '../../../services/api';
-import { DeviceContext } from '../../../context/deviceContext';
-import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader';
-import SectionLabel from '../../../components/Dropdown/Section/SectionLabel';
-import Button from '../../../components/Button';
-import { ProjectContext } from '../../../context/projectContext';
-import { PersonalQuotaContext } from '../../../context/personalQuotaContext';
-import { RepoIndexingStatusType } from '../../../types/general';
-import { RepositoriesContext } from '../../../context/repositoriesContext';
-import { UIContext } from '../../../context/uiContext';
+} from '../../../../services/api';
+import { DeviceContext } from '../../../../context/deviceContext';
+import SpinLoaderContainer from '../../../../components/Loaders/SpinnerLoader';
+import SectionLabel from '../../../../components/Dropdown/Section/SectionLabel';
+import Button from '../../../../components/Button';
+import { ProjectContext } from '../../../../context/projectContext';
+import { PersonalQuotaContext } from '../../../../context/personalQuotaContext';
+import { RepoIndexingStatusType } from '../../../../types/general';
+import { RepositoriesContext } from '../../../../context/repositoriesContext';
+import { UIContext } from '../../../../context/uiContext';
 
 type Props = {
   repoRef: string;

diff --git a/...roject/LeftSidebar/NavPanel/RepoEntry.tsx → ...t/LeftSidebar/NavPanel/Repo/RepoEntry.tsx b/...roject/LeftSidebar/NavPanel/RepoEntry.tsx → ...t/LeftSidebar/NavPanel/Repo/RepoEntry.tsx
@@ -6,18 +6,17 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ChevronRightIcon, EyeCutIcon, FolderIcon } from '../../../icons';
-import FileIcon from '../../../components/FileIcon';
-import { DirectoryEntry } from '../../../types/api';
-import { TabsContext } from '../../../context/tabsContext';
+import { ChevronRightIcon, EyeCutIcon, FolderIcon } from '../../../../icons';
+import FileIcon from '../../../../components/FileIcon';
+import { DirectoryEntry } from '../../../../types/api';
+import { TabsContext } from '../../../../context/tabsContext';
 import {
   RepoIndexingStatusType,
   SyncStatus,
   TabTypesEnum,
-} from '../../../types/general';
-import SpinLoaderContainer from '../../../components/Loaders/SpinnerLoader';
-import { UIContext } from '../../../context/uiContext';
-import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+} from '../../../../types/general';
+import SpinLoaderContainer from '../../../../components/Loaders/SpinnerLoader';
+import { useEnterKey } from '../../../../hooks/useEnterKey';
 
 type Props = {
   name: string;
@@ -34,6 +33,7 @@ type Props = {
   indexingData?: RepoIndexingStatusType;
   focusedIndex: string;
   index: string;
+  isLeftSidebarFocused: boolean;
 };
 
 const RepoEntry = ({
@@ -51,9 +51,9 @@ const RepoEntry = ({
   indexingData,
   focusedIndex,
   index,
+  isLeftSidebarFocused,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
-  const { isLeftSidebarFocused } = useContext(UIContext.Focus);
   const [isOpen, setOpen] = useState(
     defaultOpen || (currentPath && currentPath.startsWith(fullPath)),
   );
@@ -110,15 +110,7 @@ const RepoEntry = ({
     }
   }, [isDirectory, fullPath, openNewTab, repoRef, branch]);
 
-  const handleKeyEvent = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        handleClick();
-      }
-    },
-    [handleClick],
-  );
-  useKeyboardNavigation(handleKeyEvent, focusedIndex !== index);
+  useEnterKey(handleClick, focusedIndex !== index || !isLeftSidebarFocused);
 
   useEffect(() => {
     if (focusedIndex === index && ref.current) {
@@ -220,6 +212,7 @@ const RepoEntry = ({
               branch={branch}
               focusedIndex={focusedIndex}
               index={`${index}-${sii}`}
+              isLeftSidebarFocused={isLeftSidebarFocused}
             />
           ))}
         </div>