feedback fixes

BloopAI · Jan 12, 2024 · 73fb4e1 · 73fb4e1
1 parent 4e865e2
commit 73fb4e1
Show file tree

Hide file tree

Showing 24 changed files with 925 additions and 75 deletions.
diff --git a/apps/desktop/src/TextSearch.tsx b/apps/desktop/src/TextSearch.tsx
@@ -142,7 +142,7 @@ const TextSearch = ({
       currentResult={currentResult}
       setCurrentResult={setCurrentResult}
       searchValue={searchValue}
-      containerClassName="fixed top-[100px] right-[5px]"
+      containerClassName="fixed top-[100px] right-[5px] w-80"
     />
   );
 };

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -16,6 +16,7 @@ import ProjectSettings from './ProjectSettings';
 import TabsContextProvider from './context/providers/TabsContextProvider';
 import { FileHighlightsContextProvider } from './context/providers/FileHighlightsContextProvider';
 import RepositoriesContextProvider from './context/providers/RepositoriesContextProvider';
+import UpgradeRequiredPopup from './components/UpgradeRequiredPopup';
 
 const toastOptions = {
   unStyled: true,
@@ -44,6 +45,7 @@ const App = () => {
               <RepositoriesContextProvider>
                 <ReportBugModal />
                 <Onboarding />
+                <UpgradeRequiredPopup />
                 <CommandBarContextProvider>
                   <Settings />
                   <ProjectSettings />

diff --git a/client/src/CommandBar/Header/index.tsx b/client/src/CommandBar/Header/index.tsx
@@ -32,6 +32,7 @@ type GeneralProps = {
   handleBack?: () => void;
   breadcrumbs?: string[];
   customRightComponent?: ReactElement;
+  disableKeyNav?: boolean;
 };
 
 type Props = GeneralProps & (PropsWithInput | PropsWithoutInput);
@@ -45,6 +46,7 @@ const CommandBarHeader = ({
   value,
   placeholder,
   noInput,
+  disableKeyNav,
 }: Props) => {
   const { t } = useTranslation();
   const { isVisible } = useContext(CommandBarContext.General);
@@ -62,7 +64,10 @@ const CommandBarHeader = ({
 
   const handleKeyEvent = useCallback(
     (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (
+        e.key === 'Escape' ||
+        (e.key === 'Backspace' && !value && !isComposing)
+      ) {
         e.stopPropagation();
         e.preventDefault();
         if (handleBack) {
@@ -78,7 +83,7 @@ const CommandBarHeader = ({
     },
     [setIsVisible, handleBack, customSubmitHandler, value, isComposing],
   );
-  useKeyboardNavigation(handleKeyEvent, !isVisible);
+  useKeyboardNavigation(handleKeyEvent, !isVisible || disableKeyNav);
 
   return (
     <div className="w-full flex flex-col p-4 items-start gap-4 border-b border-bg-border">
@@ -111,6 +116,7 @@ const CommandBarHeader = ({
           autoFocus
           onCompositionStart={onCompositionStart}
           onCompositionEnd={onCompositionEnd}
+          disabled={disableKeyNav}
         />
       )}
     </div>

diff --git a/client/src/CommandBar/steps/ManageRepos/index.tsx b/client/src/CommandBar/steps/ManageRepos/index.tsx
@@ -196,6 +196,7 @@ const ManageRepos = ({}: Props) => {
         onChange={handleInputChange}
         handleBack={handleBack}
         placeholder={t('')}
+        disableKeyNav={isDropdownVisible}
       />
       {sectionsToShow.length ? (
         <Body sections={sectionsToShow} disableKeyNav={isDropdownVisible} />

diff --git a/client/src/CommandBar/steps/PrivateRepos/index.tsx b/client/src/CommandBar/steps/PrivateRepos/index.tsx
@@ -104,6 +104,7 @@ const PrivateReposStep = ({}: Props) => {
         value={inputValue}
         onChange={handleInputChange}
         placeholder={t('Search private repos...')}
+        disableKeyNav={isDropdownVisible}
       />
       {sectionsToShow.length ? (
         <Body sections={sectionsToShow} disableKeyNav={isDropdownVisible} />

diff --git a/client/src/CommandBar/steps/SeachFiles.tsx b/client/src/CommandBar/steps/SeachFiles.tsx
@@ -66,6 +66,7 @@ const SearchFiles = ({}: Props) => {
           onClick: () => {
             openNewTab({ type: TabTypesEnum.FILE, path, repoRef: repo });
             setIsVisible(false);
+            setChosenStep({ id: CommandBarStepEnum.INITIAL });
           },
           label: path,
           footerHint: t('Open'),

diff --git a/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx b/client/src/Project/CurrentTabContent/ChatTab/ChatPersistentState.tsx
@@ -58,7 +58,7 @@ const ChatPersistentState = ({
   const { setChats } = useContext(ChatsContext);
   const { openNewTab, updateTabProperty } = useContext(TabsContext.Handlers);
 
-  const prevEventSource = useRef<EventSource | null>(null);
+  const eventSource = useRef<EventSource | null>(null);
 
   const [conversation, setConversation] = useState<ChatMessage[]>([]);
   useEffect(() => {
@@ -232,11 +232,11 @@ const ChatPersistentState = ({
   }, [setInputValueImperatively]);
 
   const makeSearch = useCallback(
-    (query: string, options?: Options) => {
+    async (query: string, options?: Options) => {
       if (!query) {
         return;
       }
-      prevEventSource.current?.close();
+      eventSource.current?.close();
       setInputValue({ plain: '', parsed: [] });
       setInputImperativeValue(null);
       setLoading(true);
@@ -270,11 +270,10 @@ const ChatPersistentState = ({
       }
       const fullUrl = url + '?' + new URLSearchParams(queryParams).toString();
       console.log(fullUrl);
-      const eventSource = new EventSource(fullUrl);
-      prevEventSource.current = eventSource;
+      eventSource.current = new EventSource(fullUrl);
       setSelectedLines(null);
       let firstResultCame: boolean;
-      eventSource.onerror = (err) => {
+      eventSource.current.onerror = (err) => {
         console.log('SSE error', err);
         firstResultCame = false;
         stopGenerating();
@@ -303,26 +302,30 @@ const ChatPersistentState = ({
         });
       };
       let conversation_id = '';
-      setConversation((prev) => [
-        ...prev,
-        {
-          author: ChatMessageAuthor.Server,
-          isLoading: true,
-          loadingSteps: [],
-          text: '',
-          conclusion: '',
-          queryId: '',
-          responseTimestamp: '',
-        },
-      ]);
-      eventSource.onmessage = (ev) => {
+      setConversation((prev) =>
+        prev[prev.length - 1].author === ChatMessageAuthor.Server &&
+        (prev[prev.length - 1] as ChatMessageServer).isLoading
+          ? prev
+          : [
+              ...prev,
+              {
+                author: ChatMessageAuthor.Server,
+                isLoading: true,
+                loadingSteps: [],
+                text: '',
+                conclusion: '',
+                queryId: '',
+                responseTimestamp: '',
+              },
+            ],
+      );
+      eventSource.current.onmessage = (ev) => {
         console.log(ev.data);
         if (
           ev.data === '{"Err":"incompatible client"}' ||
           ev.data === '{"Err":"failed to check compatibility"}'
         ) {
-          eventSource.close();
-          prevEventSource.current?.close();
+          eventSource.current?.close();
           if (ev.data === '{"Err":"incompatible client"}') {
             setDeprecatedModalOpen(true);
           } else {
@@ -408,8 +411,8 @@ const ChatPersistentState = ({
                 side,
               );
             }
-            eventSource.close();
-            prevEventSource.current = null;
+            eventSource.current?.close();
+            eventSource.current = null;
             setLoading(false);
             setConversation((prev) => {
               const newConversation = prev.slice(0, -1);
@@ -468,13 +471,16 @@ const ChatPersistentState = ({
           console.log('failed to parse response', err);
         }
       };
-      return () => {
-        eventSource.close();
-      };
     },
     [conversationId, t, queryIdToEdit, preferredAnswerSpeed, openNewTab, side],
   );
 
+  useEffect(() => {
+    return () => {
+      eventSource.current?.close();
+    };
+  }, []);
+
   useEffect(() => {
     if (!submittedQuery.plain) {
       return;
@@ -497,7 +503,10 @@ const ChatPersistentState = ({
       userQueryParsed = [{ type: ParsedQueryTypeEnum.TEXT, text: userQuery }];
     }
     setConversation((prev) => {
-      return prev.length === 1 && submittedQuery.options
+      return (prev.length === 1 && submittedQuery.options) ||
+        (prev.length === 2 &&
+          submittedQuery.options?.lines &&
+          submittedQuery.options === initialQuery)
         ? prev
         : [
             ...prev,
@@ -524,7 +533,7 @@ const ChatPersistentState = ({
   }, [conversation, tabKey, side, tabTitle]);
 
   const stopGenerating = useCallback(() => {
-    prevEventSource.current?.close();
+    eventSource.current?.close();
     setLoading(false);
     setConversation((prev) => {
       const newConversation = prev.slice(0, -1);

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
@@ -145,7 +145,7 @@ const InputCore = ({
           if (key && state[key]?.active) {
             return false;
           }
-          const parts = state.toJSON().doc.content[0]?.content;
+          const parts = state.toJSON().doc?.content?.[0]?.content;
           // trying to submit with no text
           if (!parts) {
             return false;
@@ -193,7 +193,7 @@ const InputCore = ({
   );
 
   useEffect(() => {
-    const newValue = state.toJSON().doc.content[0]?.content;
+    const newValue = state.toJSON().doc?.content?.[0]?.content || '';
     onChange(newValue || []);
   }, [state]);
 

diff --git a/client/src/Project/CurrentTabContent/EmptyTab.tsx b/client/src/Project/CurrentTabContent/EmptyTab.tsx
@@ -20,7 +20,7 @@ const EmptyTab = ({}: Props) => {
           <Trans>Select a file or open a new tab to display it here.</Trans>{' '}
           <Trans values={{ cmdKey: shortcut?.[0] }}>
             Press{' '}
-            <span className="w-5 h-5 inline-flex items-center justify-center rounded border border-bg-border bg-bg-base shadow-low">
+            <span className="min-w-[20px] h-5 px-0.5 inline-flex items-center justify-center rounded border border-bg-border bg-bg-base shadow-low">
               cmdKey
             </span>{' '}
             <span className="w-5 h-5 inline-flex items-center justify-center rounded border border-bg-border bg-bg-base shadow-low">

diff --git a/client/src/Project/CurrentTabContent/FileTab/index.tsx b/client/src/Project/CurrentTabContent/FileTab/index.tsx
@@ -254,6 +254,7 @@ const FileTab = ({
           <AutoSizer>
             {({ width, height }) => (
               <CodeFull
+                isSearchDisabled={focusedPanel !== side}
                 code={file.contents}
                 language={file.lang}
                 repoRef={repoRef}

diff --git a/client/src/Project/LeftSidebar/NavPanel/RepoDropdown.tsx b/client/src/Project/LeftSidebar/NavPanel/RepoDropdown.tsx
@@ -31,6 +31,7 @@ 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;
@@ -39,6 +40,7 @@ type Props = {
   allBranches: { name: string; last_commit_unix_secs: number }[];
   indexedBranches: string[];
   indexingStatus?: RepoIndexingStatusType;
+  handleClose: () => void;
 };
 
 const RepoDropdown = ({
@@ -48,6 +50,7 @@ const RepoDropdown = ({
   allBranches,
   projectId,
   indexingStatus,
+  handleClose,
 }: Props) => {
   const { t } = useTranslation();
   const [isBranchesOpen, setIsBranchesOpen] = useState(false);
@@ -57,6 +60,9 @@ const RepoDropdown = ({
   const { isSelfServe } = useContext(DeviceContext);
   const { refreshCurrentProjectRepos } = useContext(ProjectContext.Current);
   const { isSubscribed } = useContext(PersonalQuotaContext.Values);
+  const { setIsUpgradeRequiredPopupOpen } = useContext(
+    UIContext.UpgradeRequiredPopup,
+  );
 
   const onRepoSync = useCallback(
     async (e?: MouseEvent) => {
@@ -142,10 +148,15 @@ const RepoDropdown = ({
   const switchToBranch = useCallback(
     async (branch: string, e?: MouseEvent) => {
       e?.stopPropagation();
-      await changeRepoBranch(projectId, repoRef, branch);
-      refreshCurrentProjectRepos();
+      if (isSubscribed || isSelfServe) {
+        await changeRepoBranch(projectId, repoRef, branch);
+        refreshCurrentProjectRepos();
+      } else {
+        setIsUpgradeRequiredPopupOpen(true);
+        handleClose();
+      }
     },
-    [projectId, repoRef],
+    [projectId, repoRef, isSubscribed, isSelfServe],
   );
 
   return (
@@ -162,24 +173,22 @@ const RepoDropdown = ({
             )
           }
         />
-        {(isSelfServe || isSubscribed) && (
-          <SectionItem
-            onClick={toggleBranches}
-            label={t('Branches')}
-            icon={<BranchIcon sizeClassName="w-4 h-4" />}
-            customRightElement={
-              <span className="body-s text-label-muted overflow-hidden flex items-center gap-2">
-                <span className="ellipsis">{selectedBranch}</span>
-                <ArrowTriangleBottomIcon
-                  sizeClassName="w-2 h-2"
-                  className={`${
-                    isBranchesOpen ? 'rotate-180' : 'rotate-0'
-                  } transition-transform duration-150 ease-in-out`}
-                />
-              </span>
-            }
-          />
-        )}
+        <SectionItem
+          onClick={toggleBranches}
+          label={t('Branches')}
+          icon={<BranchIcon sizeClassName="w-4 h-4" />}
+          customRightElement={
+            <span className="body-s text-label-muted overflow-hidden flex items-center gap-2">
+              <span className="ellipsis">{selectedBranch}</span>
+              <ArrowTriangleBottomIcon
+                sizeClassName="w-2 h-2"
+                className={`${
+                  isBranchesOpen ? 'rotate-180' : 'rotate-0'
+                } transition-transform duration-150 ease-in-out`}
+              />
+            </span>
+          }
+        />
       </DropdownSection>
       <div
         style={{
@@ -247,8 +256,13 @@ const RepoDropdown = ({
                     variant="secondary"
                     size="mini"
                     onClick={async () => {
-                      setBranchesToSync((prev) => [...prev, b]);
-                      await indexRepoBranch(repoRef, b);
+                      if (isSubscribed || isSelfServe) {
+                        setBranchesToSync((prev) => [...prev, b]);
+                        await indexRepoBranch(repoRef, b);
+                      } else {
+                        setIsUpgradeRequiredPopupOpen(true);
+                        handleClose();
+                      }
                     }}
                   >
                     {t('Sync')}