feat(ui): support selecting repositories in answer engine (#2594)

* feat(ui): support selecting repos in answer engine * update textarea style * [autofix.ci] apply automated fixes * update: single choice * [autofix.ci] apply automated fixes * update: adjust style of 'clear' button * [autofix.ci] apply automated fixes * Update ee/tabby-ui/components/textarea-search.tsx Co-authored-by: Meng Zhang <[email protected]> * Update ee/tabby-ui/components/textarea-search.tsx Co-authored-by: Meng Zhang <[email protected]> * Update ee/tabby-ui/components/textarea-search.tsx Co-authored-by: Meng Zhang <[email protected]> * Update ee/tabby-ui/components/textarea-search.tsx Co-authored-by: Meng Zhang <[email protected]> * Update ee/tabby-ui/components/textarea-search.tsx Co-authored-by: Meng Zhang <[email protected]> * [autofix.ci] apply automated fixes * update text * [autofix.ci] apply automated fixes * update style * update: add code_query * update: extraRequestPayload * [autofix.ci] apply automated fixes * update: request with code_query * update: fix repo select * update: process topbar * update: use kind & id as key of commandItem * update * update: cache key * update: rename storage key * update: show repo select in search page --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Meng Zhang <[email protected]>
TabbyML · Jul 14, 2024 · 759206c · 759206c
1 parent 0e0a882
commit 759206c
Show file tree

Hide file tree

Showing 12 changed files with 550 additions and 74 deletions.
diff --git a/...dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx b/...dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx
@@ -381,7 +381,7 @@ const ActiveRepoTable: React.FC<{
           ) : (
             <TableRow>
               <TableCell colSpan={4} className="h-[100px] text-center">
-                No repositories yet.
+                No repositories
               </TableCell>
             </TableRow>
           )}

diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import tabbyUrl from '@/assets/logo-dark.png'
 import AOS from 'aos'
-import { noop } from 'lodash-es'
+import { noop, omit } from 'lodash-es'
 
 import { SESSION_STORAGE_KEY } from '@/lib/constants'
 import { useEnableSearch } from '@/lib/experiment-flags'
@@ -41,6 +41,7 @@ import Stats from './components/stats'
 
 import 'aos/dist/aos.css'
 
+import { AnswerEngineExtraContext } from '@/lib/types'
 import { Separator } from '@/components/ui/separator'
 
 const resetUserAuthTokenDocument = graphql(/* GraphQL */ `
@@ -82,10 +83,17 @@ function MainPanel() {
 
   if (!healthInfo || !data?.me) return <></>
 
-  const onSearch = (question: string) => {
+  const onSearch = (question: string, ctx?: AnswerEngineExtraContext) => {
     setIsLoading(true)
     sessionStorage.removeItem(SESSION_STORAGE_KEY.SEARCH_LATEST_MSG)
+    sessionStorage.removeItem(SESSION_STORAGE_KEY.SEARCH_LATEST_EXTRA_CONTEXT)
     sessionStorage.setItem(SESSION_STORAGE_KEY.SEARCH_INITIAL_MSG, question)
+    sessionStorage.setItem(
+      SESSION_STORAGE_KEY.SEARCH_INITIAL_EXTRA_CONTEXT,
+      JSON.stringify({
+        repository: ctx?.repository ? omit(ctx.repository, 'refs') : undefined
+      })
+    )
     router.push('/search')
   }
 

diff --git a/ee/tabby-ui/app/files/components/file-tree-header.tsx b/ee/tabby-ui/app/files/components/file-tree-header.tsx
@@ -259,7 +259,7 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
           <SelectContent className="max-h-[50vh] overflow-y-auto">
             {noIndexedRepo ? (
               <SelectItem isPlaceHolder value="" disabled>
-                No indexed repository
+                No repositories
               </SelectItem>
             ) : (
               <>

diff --git a/ee/tabby-ui/app/files/components/file-tree.tsx b/ee/tabby-ui/app/files/components/file-tree.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React from 'react'
-import { isEmpty } from 'lodash-es'
 import { useInView } from 'react-intersection-observer'
 import { SWRResponse } from 'swr'
 import useSWRImmutable from 'swr/immutable'
@@ -352,13 +351,6 @@ const FileTreeRenderer: React.FC = () => {
 
   if (!initialized) return <FileTreeSkeleton />
 
-  if (isEmpty(repoMap))
-    return (
-      <div className="flex h-full items-center justify-center">
-        No Indexed repository
-      </div>
-    )
-
   if (!hasSelectedRepo) {
     return null
   }

diff --git a/ee/tabby-ui/app/files/components/source-code-browser.tsx b/ee/tabby-ui/app/files/components/source-code-browser.tsx
@@ -14,6 +14,7 @@ import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
 import { filename2prism } from '@/lib/language-utils'
 import fetcher from '@/lib/tabby/fetcher'
 import { client } from '@/lib/tabby/gql'
+import { repositoryListQuery } from '@/lib/tabby/query'
 import type { ResolveEntriesResponse, TFile } from '@/lib/types'
 import { cn, formatLineHashForCodeBrowser } from '@/lib/utils'
 import {
@@ -75,18 +76,6 @@ type TFileMapItem = {
 type TFileMap = Record<string, TFileMapItem>
 type RepositoryItem = RepositoryListQuery['repositoryList'][0]
 
-const repositoryListQuery = graphql(/* GraphQL */ `
-  query RepositoryList {
-    repositoryList {
-      id
-      name
-      kind
-      gitUrl
-      refs
-    }
-  }
-`)
-
 const repositoryGrepQuery = graphql(/* GraphQL */ `
   query RepositoryGrep($id: ID!, $kind: RepositoryKind!, $query: String!) {
     repositoryGrep(kind: $kind, id: $id, query: $query) {
@@ -356,9 +345,10 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
   const isSearchMode = activeEntryInfo?.viewMode === 'search'
 
   const shouldFetchTree =
-    !!isPathInitialized && !isEmpty(repoMap) && !!activePath && !isSearchMode
+    !!initialized && !isEmpty(repoMap) && !!activePath && !isSearchMode
   const shouldFetchRepositoryGrep =
-    !!isPathInitialized && !isEmpty(repoMap) && !!activePath && isSearchMode
+    !!initialized && !isEmpty(repoMap) && !!activePath && isSearchMode
+  const shouldFetchRawFile = !!initialized && isBlobMode && activeRepo
 
   // fetch tree
   const {
@@ -393,7 +383,7 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
     contentLength?: number
     fileDisplayType: FileDisplayType
   }>(
-    isBlobMode && activeRepo
+    shouldFetchRawFile
       ? [
           toEntryRequestUrl(activeRepo, activeRepoRef?.name, activeBasename),
           activeBasename

diff --git a/ee/tabby-ui/app/files/components/tree-mode-view.tsx b/ee/tabby-ui/app/files/components/tree-mode-view.tsx
@@ -4,7 +4,13 @@ import { find, isEmpty, omit } from 'lodash-es'
 
 import { useDebounceValue } from '@/lib/hooks/use-debounce'
 import { cn } from '@/lib/utils'
-import { IconDirectorySolid, IconFile } from '@/components/ui/icons'
+import { buttonVariants } from '@/components/ui/button'
+import {
+  IconArrowRight,
+  IconDirectorySolid,
+  IconFile,
+  IconFileSearch
+} from '@/components/ui/icons'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 
@@ -150,8 +156,20 @@ const TreeModeView: React.FC<TreeModeViewProps> = ({
           </TableBody>
         </Table>
       ) : isEmpty(repoMap) ? (
-        <div className="flex justify-center py-8">
-          No indexed repository yet
+        <div className="flex min-h-[30vh] items-center justify-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex items-center gap-2">
+              <IconFileSearch className="h-6 w-6" />
+              <div className="text-xl font-semibold">No repositories</div>
+            </div>
+            <Link
+              href="/settings/providers/git"
+              className={cn(buttonVariants(), 'gap-2')}
+            >
+              <span>Connect</span>
+              <IconArrowRight />
+            </Link>
+          </div>
         </div>
       ) : null}
     </div>