chore(ui): add readWorksapceRepositories to chat sidebar in code brow…

…ser (#3634)
TabbyML · Dec 31, 2024 · bafd011 · bafd011
1 parent 652afaf
commit bafd011
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 18 deletions.
diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx
@@ -279,7 +279,9 @@ export default function ChatPage() {
       currentChatRef.addRelevantContext(context)
     })
 
-    currentChatRef.updateActiveSelection(pendingActiveSelection)
+    if (pendingActiveSelection) {
+      currentChatRef.updateActiveSelection(pendingActiveSelection)
+    }
 
     if (pendingCommand) {
       // FIXME: this delay is a workaround for waiting for the active selection to be updated
@@ -418,7 +420,7 @@ export default function ChatPage() {
         openInEditor={openInEditor}
         openExternal={openExternal}
         readWorkspaceGitRepositories={
-          isInEditor && supportsProvideWorkspaceGitRepoInfo
+          supportsProvideWorkspaceGitRepoInfo
             ? server?.readWorkspaceGitRepositories
             : undefined
         }

diff --git a/ee/tabby-ui/app/files/components/chat-side-bar.tsx b/ee/tabby-ui/app/files/components/chat-side-bar.tsx
@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { find } from 'lodash-es'
-import type { FileLocation } from 'tabby-chat-panel'
+import type { FileLocation, GitRepository } from 'tabby-chat-panel'
 import { useClient } from 'tabby-chat-panel/react'
 
+import { RepositoryListQuery } from '@/lib/gql/generates/graphql'
 import { useLatest } from '@/lib/hooks/use-latest'
 import { useMe } from '@/lib/hooks/use-me'
 import { filename2prism } from '@/lib/language-utils'
@@ -16,17 +17,22 @@ import { SourceCodeBrowserContext } from './source-code-browser'
 import { generateEntryPath, getDefaultRepoRef, resolveRepoRef } from './utils'
 
 interface ChatSideBarProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {}
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  activeRepo: RepositoryListQuery['repositoryList'][0] | undefined
+}
 
 export const ChatSideBar: React.FC<ChatSideBarProps> = ({
+  activeRepo,
   className,
   ...props
 }) => {
   const [{ data }] = useMe()
+  const [initialized, setInitialized] = useState(false)
   const { pendingEvent, setPendingEvent, repoMap, updateActivePath } =
     React.useContext(SourceCodeBrowserContext)
   const activeChatId = useChatStore(state => state.activeChatId)
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
+  const executedCommand = useRef(false)
   const repoMapRef = useLatest(repoMap)
   const openInCodeBrowser = async (fileLocation: FileLocation) => {
     const { filepath, location } = fileLocation
@@ -60,6 +66,12 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
     return false
   }
 
+  const readWorkspaceGitRepositories = useLatest(() => {
+    if (!activeRepo) return []
+    const list: GitRepository[] = [{ url: activeRepo.gitUrl }]
+    return list
+  })
+
   const client = useClient(iframeRef, {
     refresh: async () => {
       window.location.reload()
@@ -70,14 +82,19 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
       })
     },
     onApplyInEditor(_content) {},
-    onLoaded() {},
+    onLoaded() {
+      setInitialized(true)
+    },
     onCopy(_content) {},
     onKeyboardEvent() {},
     openInEditor: async (fileLocation: FileLocation) => {
       return openInCodeBrowser(fileLocation)
     },
     openExternal: async (url: string) => {
       window.open(url, '_blank')
+    },
+    readWorkspaceGitRepositories: async () => {
+      return readWorkspaceGitRepositories.current?.()
     }
   })
 
@@ -100,10 +117,10 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
         }
       })
     }
-  }, [iframeRef?.current, client, data])
+  }, [iframeRef?.current, client?.init, data])
 
   React.useEffect(() => {
-    if (pendingEvent && client) {
+    if (pendingEvent && client && initialized) {
       const execute = async () => {
         const { lineFrom, lineTo, code, path, gitUrl } = pendingEvent
         client.updateActiveSelection({
@@ -119,17 +136,18 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
             gitUrl
           }
         })
+        const command = getCommand(pendingEvent)
         // FIXME: this delay is a workaround for waiting for the active selection to be updated
         setTimeout(() => {
-          client.executeCommand(getCommand(pendingEvent))
+          client.executeCommand(command)
         }, 500)
+        setPendingEvent(undefined)
       }
+
       execute()
     }
-    setPendingEvent(undefined)
-  }, [pendingEvent, client])
+  }, [initialized, pendingEvent])
 
-  if (!data?.me) return <></>
   return (
     <div className={cn('flex h-full flex-col', className)} {...props}>
       <Header />

diff --git a/ee/tabby-ui/app/files/components/source-code-browser.tsx b/ee/tabby-ui/app/files/components/source-code-browser.tsx
@@ -379,6 +379,8 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
   const { progress, setProgress } = useTopbarProgress()
   const chatSideBarPanelRef = React.useRef<ImperativePanelHandle>(null)
   const [chatSideBarPanelSize, setChatSideBarPanelSize] = React.useState(35)
+  const [chatSidebarInitialized, setChatSidebarInitialized] = useState(false)
+
   const searchQuery = searchParams.get('q')?.toString()
 
   const parsedEntryInfo = React.useMemo(() => {
@@ -619,12 +621,23 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
   }, [fetchingRawFile, fetchingTreeEntries])
 
   React.useEffect(() => {
-    if (chatSideBarVisible) {
-      chatSideBarPanelRef.current?.expand()
-      chatSideBarPanelRef.current?.resize(chatSideBarPanelSize)
-    } else {
-      chatSideBarPanelRef.current?.collapse()
+    const initChatSidebar = () => {
+      if (chatSideBarVisible && !chatSidebarInitialized) {
+        setChatSidebarInitialized(true)
+      }
+    }
+
+    const toggleChatSidebarPanel = () => {
+      if (chatSideBarVisible) {
+        chatSideBarPanelRef.current?.expand()
+        chatSideBarPanelRef.current?.resize(chatSideBarPanelSize)
+      } else {
+        chatSideBarPanelRef.current?.collapse()
+      }
     }
+
+    initChatSidebar()
+    toggleChatSidebarPanel()
   }, [chatSideBarVisible])
 
   React.useEffect(() => {
@@ -736,7 +749,9 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
           ref={chatSideBarPanelRef}
           onCollapse={() => setChatSideBarVisible(false)}
         >
-          <ChatSideBar />
+          {chatSidebarInitialized ? (
+            <ChatSideBar activeRepo={activeRepo} />
+          ) : null}
         </ResizablePanel>
       </>
     </ResizablePanelGroup>