Minor fixes (#1222)

* focus first item on search changed * fix model param name * set focus on the panel where user types, fix scroll to line when clicking from chat * fix missing highlights in left sidebar for currently focused tab * fix long names in command bar items * don't add repos to project automatically, but add a button to 'indexing finished' toast
BloopAI · Jan 31, 2024 · c387128 · c387128
1 parent 477047a
commit c387128
Show file tree

Hide file tree

Showing 27 changed files with 206 additions and 60 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -24,12 +24,12 @@ const toastOptions = {
   unStyled: true,
   classNames: {
     toast:
-      'w-[20.75rem] p-4 pl-5 flex items-start gap-3 rounded-md border border-bg-border bg-bg-base shadow-high',
+      'w-[20.75rem] p-4 pl-5 grid grid-cols-[1rem_1fr] items-start gap-3 rounded-md border border-bg-border bg-bg-base shadow-high',
     error: 'text-red',
     info: 'text-label-title',
     title: 'body-s-b',
     description: '!text-label-muted body-s mt-1.5',
-    actionButton: 'bg-zinc-400',
+    actionButton: 'col-span-full',
     cancelButton: 'bg-orange-400',
     closeButton:
       '!bg-bg-base !text-label-muted !border-none !left-[unset] !right-2 !top-6 !w-6 !h-6',

diff --git a/client/src/CommandBar/Body/Item.tsx b/client/src/CommandBar/Body/Item.tsx
@@ -141,7 +141,7 @@ const CommandBarItem = ({
           />
         )}
       </div>
-      <p className="flex-1 body-s-b">{label}</p>
+      <p className="flex-1 body-s-b ellipsis">{label}</p>
       {!!shortcutKeys && (
         <div className="flex items-center gap-1">
           {shortcutKeys.map((k) => (

diff --git a/client/src/CommandBar/Body/index.tsx b/client/src/CommandBar/Body/index.tsx
@@ -20,6 +20,12 @@ const CommandBarBody = ({
   const { focusedIndex, setFocusedIndex, handleArrowKey, navContainerRef } =
     useArrowNavigation();
 
+  useEffect(() => {
+    if (sections?.[0]?.items?.[0]) {
+      setFocusedIndex(`${sections[0].key}-${sections[0].items[0].key}`);
+    }
+  }, [sections]);
+
   useEffect(() => {
     if (onFocusedIndexChange) {
       onFocusedIndexChange(focusedIndex);

diff --git a/client/src/CommandBar/steps/ManageRepos/index.tsx b/client/src/CommandBar/steps/ManageRepos/index.tsx
@@ -105,18 +105,14 @@ const ManageRepos = ({ shouldShowTutorial }: Props) => {
               setTutorialStep(3);
             },
             onDone: () => {
-              setOnBoardingState((prev) => ({
-                ...prev,
-                isCommandBarTutorialFinished: true,
-              }));
               setTutorialStep(4);
             },
             onAddToProject: () => {
               setOnBoardingState((prev) => ({
                 ...prev,
                 isCommandBarTutorialFinished: true,
               }));
-              setTutorialStep(4);
+              setTutorialStep(5);
             },
           },
           key: r.ref,
@@ -234,7 +230,7 @@ const ManageRepos = ({ shouldShowTutorial }: Props) => {
         placeholder={t('')}
         disableKeyNav={isDropdownVisible}
       />
-      {shouldShowTutorial && tutorialStep < 4 ? (
+      {shouldShowTutorial && tutorialStep < 5 ? (
         <TutorialTooltip
           content={
             <TutorialBody

diff --git a/client/src/CommandBar/steps/PrivateRepos/index.tsx b/client/src/CommandBar/steps/PrivateRepos/index.tsx
@@ -63,18 +63,14 @@ const PrivateReposStep = ({ shouldShowTutorial }: Props) => {
             setTutorialStep(3);
           },
           onDone: () => {
-            setOnBoardingState((prev) => ({
-              ...prev,
-              isCommandBarTutorialFinished: true,
-            }));
             setTutorialStep(4);
           },
           onAddToProject: () => {
             setOnBoardingState((prev) => ({
               ...prev,
               isCommandBarTutorialFinished: true,
             }));
-            setTutorialStep(4);
+            setTutorialStep(5);
           },
         },
         key: r.ref,
@@ -131,7 +127,7 @@ const PrivateReposStep = ({ shouldShowTutorial }: Props) => {
         placeholder={t('Search private repos...')}
         disableKeyNav={isDropdownVisible}
       />
-      {shouldShowTutorial && tutorialStep < 4 ? (
+      {shouldShowTutorial && tutorialStep < 5 ? (
         <TutorialTooltip
           content={
             <TutorialBody

diff --git a/client/src/CommandBar/steps/items/RepoItem.tsx b/client/src/CommandBar/steps/items/RepoItem.tsx
@@ -300,7 +300,7 @@ const RepoItem = ({
             {t(repoStatusMap[status].text)}
             {indexingStatus?.percentage !== null &&
               indexingStatus?.percentage !== undefined &&
-              `· ${indexingStatus?.percentage}%`}
+              ` · ${indexingStatus?.percentage}%`}
           </p>
         ) : undefined
       }

diff --git a/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx b/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx
@@ -246,9 +246,9 @@ const ChatPersistentState = ({
         options ? `/explain` : ``
       }`;
       const queryParams: Record<string, string> = {
-        model:
+        answer_model:
           preferredAnswerSpeed === 'normal'
-            ? 'gpt-4'
+            ? 'gpt-4-turbo-24k'
             : 'gpt-3.5-turbo-finetuned',
       };
       if (conversationId) {

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
@@ -27,6 +27,7 @@ import { MentionOptionType } from '../../../../types/results';
 import { splitPath } from '../../../../utils';
 import { openTabsCache } from '../../../../services/cache';
 import { CommandBarContext } from '../../../../context/commandBarContext';
+import { UIContext } from '../../../../context/uiContext';
 import InputCore from './InputCore';
 import { mapEditorContentToInputValue } from './utils';
 
@@ -76,6 +77,7 @@ const ConversationInput = ({
   const { t } = useTranslation();
   const { envConfig } = useContext(EnvContext);
   const { isVisible } = useContext(CommandBarContext.General);
+  const { setIsLeftSidebarFocused } = useContext(UIContext.Focus);
   const [initialValue, setInitialValue] = useState<
     Record<string, any> | null | undefined
   >({
@@ -135,6 +137,7 @@ const ConversationInput = ({
 
   const onChangeInput = useCallback((inputState: InputEditorContent[]) => {
     setInputValue(mapEditorContentToInputValue(inputState));
+    setIsLeftSidebarFocused(false);
   }, []);
 
   const onSubmitButtonClicked = useCallback(() => {

diff --git a/client/src/Project/CurrentTabContent/FileTab/index.tsx b/client/src/Project/CurrentTabContent/FileTab/index.tsx
@@ -643,6 +643,7 @@ const FileTab = ({
         <div
           className="flex-1 h-full max-w-full pl-4 py-4 overflow-auto"
           data-active={(focusedPanel === side).toString()}
+          data-path={path}
         >
           {file?.lang === 'jupyter notebook' ? (
             <IpynbRenderer data={file.contents} />

diff --git a/client/src/Project/LeftSidebar/NavPanel/Conversations/CoversationEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Conversations/CoversationEntry.tsx
@@ -6,26 +6,31 @@ import { useArrowNavigationItemProps } from '../../../../hooks/useArrowNavigatio
 
 type Props = ConversationShortType & {
   index: string;
+  isCurrentPath?: boolean;
 };
 
-const ConversationEntry = ({ title, id, index }: Props) => {
+const ConversationEntry = ({ title, id, index, isCurrentPath }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
   const onClick = useCallback(() => {
     openNewTab({ type: TabTypesEnum.CHAT, conversationId: id, title });
   }, [openNewTab, id, title]);
 
-  const { isFocused, props } = useArrowNavigationItemProps<HTMLAnchorElement>(
-    index,
-    onClick,
-  );
+  const { isFocused, isLeftSidebarFocused, props } =
+    useArrowNavigationItemProps<HTMLAnchorElement>(index, onClick);
 
   return (
     <a
       href="#"
       className={`w-full text-left h-7 flex-shrink-0 flex items-center gap-3 pr-2 cursor-pointer
         ellipsis body-mini group pl-10.5 ${
-          isFocused ? 'bg-bg-sub-hover text-label-title' : 'text-label-base'
+          isCurrentPath
+            ? isLeftSidebarFocused
+              ? 'bg-bg-shade-hover text-label-title'
+              : 'bg-bg-shade text-label-title'
+            : isFocused
+            ? 'bg-bg-sub-hover text-label-title'
+            : 'text-label-base'
         }`}
       {...props}
     >

diff --git a/client/src/Project/LeftSidebar/NavPanel/Conversations/index.tsx b/client/src/Project/LeftSidebar/NavPanel/Conversations/index.tsx
@@ -16,11 +16,17 @@ type Props = {
   setExpanded: Dispatch<SetStateAction<string>>;
   isExpanded: boolean;
   index: string;
+  currentPath?: string;
 };
 
 const reactRoot = document.getElementById('root')!;
 
-const ConversationsNav = ({ isExpanded, setExpanded, index }: Props) => {
+const ConversationsNav = ({
+  isExpanded,
+  setExpanded,
+  index,
+  currentPath,
+}: Props) => {
   const { t } = useTranslation();
   const { project } = useContext(ProjectContext.Current);
   const { noPropagate, itemProps } = useNavPanel(
@@ -70,7 +76,12 @@ const ConversationsNav = ({ isExpanded, setExpanded, index }: Props) => {
       {isExpanded && (
         <div className={'overflow-hidden'}>
           {project?.conversations.map((c) => (
-            <ConversationEntry key={c.id} {...c} index={`${index}-${c.id}`} />
+            <ConversationEntry
+              key={c.id}
+              {...c}
+              index={`${index}-${c.id}`}
+              isCurrentPath={currentPath === c.id}
+            />
           ))}
         </div>
       )}

diff --git a/client/src/Project/LeftSidebar/NavPanel/Doc/DocEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Doc/DocEntry.tsx
@@ -8,6 +8,7 @@ import { useArrowNavigationItemProps } from '../../../../hooks/useArrowNavigatio
 type Props = DocPageType & {
   index: string;
   favicon?: string;
+  isCurrentPath?: boolean;
 };
 
 const DocEntry = ({
@@ -16,6 +17,7 @@ const DocEntry = ({
   doc_title,
   relative_url,
   favicon,
+  isCurrentPath,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
@@ -29,17 +31,21 @@ const DocEntry = ({
     });
   }, [openNewTab, doc_id, doc_title, favicon, relative_url]);
 
-  const { isFocused, props } = useArrowNavigationItemProps<HTMLAnchorElement>(
-    index,
-    onClick,
-  );
+  const { isFocused, isLeftSidebarFocused, props } =
+    useArrowNavigationItemProps<HTMLAnchorElement>(index, onClick);
 
   return (
     <a
       href="#"
       className={`w-full text-left h-7 flex-shrink-0 flex items-center gap-3 pr-2 cursor-pointer
-        ellipsis body-mini group pl-10.5 ${
-          isFocused ? 'bg-bg-sub-hover text-label-title' : 'text-label-base'
+        ellipsis body-mini group pl-10.5  ${
+          isCurrentPath
+            ? isLeftSidebarFocused
+              ? 'bg-bg-shade-hover text-label-title'
+              : 'bg-bg-shade text-label-title'
+            : isFocused
+            ? 'bg-bg-sub-hover text-label-title'
+            : 'text-label-base'
         }`}
       {...props}
     >

diff --git a/client/src/Project/LeftSidebar/NavPanel/Doc/index.tsx b/client/src/Project/LeftSidebar/NavPanel/Doc/index.tsx
@@ -34,6 +34,7 @@ type Props = {
   favicon?: string;
   title?: string;
   url: string;
+  currentPath?: string;
 };
 
 const reactRoot = document.getElementById('root')!;
@@ -47,6 +48,7 @@ const DocNav = ({
   docId,
   title,
   url,
+  currentPath,
 }: Props) => {
   const { t } = useTranslation();
   const [pages, setPages] = useState<DocPageType[]>([]);
@@ -134,6 +136,7 @@ const DocNav = ({
               {...p}
               index={`${index}-${p.relative_url}`}
               favicon={favicon}
+              isCurrentPath={currentPath === p.relative_url}
             />
           ))}
         </div>

diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx
@@ -33,6 +33,9 @@ type Props = CodeStudioType & {
   indexingStatus: IndexingStatusType;
   projectId: string;
   previewingSnapshot: HistoryConversationTurn | null;
+  currentPath?: { path: string; repoRef: string };
+  currentDoc?: { docId: string; relativeUrl: string };
+  isViewingPrompts?: boolean;
 };
 
 const StudioEntry = ({
@@ -47,6 +50,9 @@ const StudioEntry = ({
   indexingStatus,
   projectId,
   previewingSnapshot,
+  currentPath,
+  currentDoc,
+  isViewingPrompts,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -98,11 +104,13 @@ const StudioEntry = ({
             projectId={projectId}
             shouldRefresh={token_counts}
             index={`${index}-history`}
+            previewingSnapshot={previewingSnapshot?.id}
           />
           <StudioSubItem
             studioId={id}
             index={`${index}-prompts`}
             studioName={name}
+            isCurrentPath={isViewingPrompts}
           >
             <PromptIcon sizeClassName="w-3.5 h-3.5" />
             <span className="flex-1 ellipsis">
@@ -124,6 +132,7 @@ const StudioEntry = ({
               studioName={name}
               tokens={token_counts.per_file[i]}
               indexingData={indexingStatus[f.repo]}
+              currentPath={currentPath}
               {...f}
             />
           ))}
@@ -143,6 +152,10 @@ const StudioEntry = ({
               docTitle={d.doc_title || ''}
               docFavicon={d.doc_icon || ''}
               sections={d.ranges}
+              isCurrentPath={
+                currentDoc?.docId === d.doc_id &&
+                currentDoc?.relativeUrl === d.relative_url
+              }
             >
               {d.doc_icon ? (
                 <img

diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioFile.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioFile.tsx
@@ -19,6 +19,7 @@ type Props = StudioContextFile & {
   studioName: string;
   tokens?: number | null;
   indexingData?: RepoIndexingStatusType;
+  currentPath?: { path: string; repoRef: string };
 };
 
 const StudioFile = ({
@@ -31,6 +32,7 @@ const StudioFile = ({
   studioName,
   tokens,
   indexingData,
+  currentPath,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -55,6 +57,9 @@ const StudioFile = ({
       repoRef={repo}
       branch={branch}
       ranges={ranges}
+      isCurrentPath={
+        currentPath?.path === path && currentPath?.repoRef === repo
+      }
     >
       {isIndexing && indexingData ? (
         <Tooltip

diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioHistory.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioHistory.tsx
@@ -23,6 +23,7 @@ type Props = {
   shouldRefresh: any;
   index: string;
   studioName: string;
+  previewingSnapshot?: string;
 };
 
 const StudioHistory = ({
@@ -31,6 +32,7 @@ const StudioHistory = ({
   shouldRefresh,
   index,
   studioName,
+  previewingSnapshot,
 }: Props) => {
   const { t } = useTranslation();
   const { locale } = useContext(LocaleContext);
@@ -87,6 +89,7 @@ const StudioHistory = ({
               index={`${index}-${s.id}`}
               studioName={studioName}
               snapshot={i === 0 ? null : s}
+              isCurrentPath={previewingSnapshot === s.id}
             >
               <DateTimeCalendarIcon sizeClassName="w-3.5 h-3.5" />
               <span className="flex-1 ellipsis">