feat(chat-ui): support toggling active selection collection in chat s…

…idebar (#3419) * feat(chat-ui): support toggling active selection collection in chat sidebar * [autofix.ci] apply automated fixes * update * update * update * [autofix.ci] apply automated fixes * update --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · Nov 15, 2024 · 41785e0 · 41785e0
1 parent e9b2ded
commit 41785e0
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 149 deletions.
diff --git a/clients/vscode/src/chat/WebviewHelper.ts b/clients/vscode/src/chat/WebviewHelper.ts
@@ -336,6 +336,7 @@ export class WebviewHelper {
 
   public async syncActiveSelection(editor: TextEditor | undefined) {
     if (!editor) {
+      this.syncActiveSelectionToChatPanel(null);
       return;
     }
 
@@ -362,8 +363,18 @@ export class WebviewHelper {
   }
 
   public addTextEditorEventListeners() {
+    window.onDidChangeActiveTextEditor((e) => {
+      if (e && e.document.uri.scheme !== "file") {
+        this.syncActiveSelection(undefined);
+        return;
+      }
+
+      this.syncActiveSelection(e);
+    });
+
     window.onDidChangeTextEditorSelection((e) => {
-      if (e.textEditor !== window.activeTextEditor) {
+      // This listener only handles text files.
+      if (e.textEditor.document.uri.scheme !== "file") {
         return;
       }
       this.syncActiveSelection(e.textEditor);

diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx
@@ -94,7 +94,7 @@ export default function ChatPage() {
   const updateActiveSelection = (ctx: Context | null) => {
     if (chatRef.current) {
       chatRef.current.updateActiveSelection(ctx)
-    } else {
+    } else if (ctx) {
       setPendingActiveSelection(ctx)
     }
   }
@@ -146,9 +146,7 @@ export default function ChatPage() {
       document.documentElement.className =
         themeClass + ` client client-${client}`
     },
-    updateActiveSelection: context => {
-      return updateActiveSelection(context)
-    }
+    updateActiveSelection
   })
 
   useEffect(() => {
@@ -255,7 +253,7 @@ export default function ChatPage() {
   const onChatLoaded = () => {
     pendingRelevantContexts.forEach(addRelevantContext)
     pendingMessages.forEach(sendMessage)
-    updateActiveSelection(pendingActiveSelection)
+    chatRef.current?.updateActiveSelection(pendingActiveSelection)
 
     clearPendingState()
     setChatLoaded(true)

diff --git a/ee/tabby-ui/app/files/components/chat-side-bar.tsx b/ee/tabby-ui/app/files/components/chat-side-bar.tsx
@@ -5,7 +5,6 @@ import { useClient } from 'tabby-chat-panel/react'
 
 import { useLatest } from '@/lib/hooks/use-latest'
 import { useMe } from '@/lib/hooks/use-me'
-import { useStore } from '@/lib/hooks/use-store'
 import { filename2prism } from '@/lib/language-utils'
 import { useChatStore } from '@/lib/stores/chat-store'
 import { cn, formatLineHashForCodeBrowser } from '@/lib/utils'
@@ -26,7 +25,7 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
   const [{ data }] = useMe()
   const { pendingEvent, setPendingEvent, repoMap, updateActivePath } =
     React.useContext(SourceCodeBrowserContext)
-  const activeChatId = useStore(useChatStore, state => state.activeChatId)
+  const activeChatId = useChatStore(state => state.activeChatId)
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
   const repoMapRef = useLatest(repoMap)
   const onNavigate = async (context: Context) => {

diff --git a/ee/tabby-ui/components/chat/chat-panel.tsx b/ee/tabby-ui/components/chat/chat-panel.tsx
@@ -1,11 +1,16 @@
 import React, { RefObject } from 'react'
 import type { UseChatHelpers } from 'ai/react'
+import { AnimatePresence, motion } from 'framer-motion'
 import type { Context } from 'tabby-chat-panel'
 
+import { updateEnableActiveSelection } from '@/lib/stores/chat-actions'
+import { useChatStore } from '@/lib/stores/chat-store'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
+  IconEye,
+  IconEyeOff,
   IconRefresh,
   IconRemove,
   IconStop,
@@ -54,6 +59,9 @@ function ChatPanelRenderer(
     removeRelevantContext,
     activeSelection
   } = React.useContext(ChatContext)
+  const enableActiveSelection = useChatStore(
+    state => state.enableActiveSelection
+  )
 
   React.useImperativeHandle(
     ref,
@@ -105,40 +113,81 @@ function ChatPanelRenderer(
           )}
         </div>
         <div className="border-t bg-background px-4 py-2 shadow-lg sm:space-y-4 sm:rounded-t-xl sm:border md:py-4">
-          {(!!activeSelection || relevantContext.length > 0) && (
-            <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2">
+            <AnimatePresence presenceAffectsLayout>
               {activeSelection ? (
-                <Badge
-                  variant="outline"
-                  key={`${activeSelection.filepath}_active_selection`}
-                  className="inline-flex flex-nowrap items-center gap-1.5 overflow-hidden rounded text-sm font-semibold"
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9, y: -5 }}
+                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                  transition={{
+                    ease: 'easeInOut',
+                    duration: 0.1
+                  }}
+                  exit={{ opacity: 0, scale: 0.9, y: 5 }}
                 >
-                  <ContextLabel
-                    context={activeSelection}
-                    className="flex-1 truncate"
-                  />
-                  <span className="shrink-0 text-muted-foreground">
-                    Current file
-                  </span>
-                </Badge>
-              ) : null}
-              {relevantContext.map((item, idx) => {
-                return (
                   <Badge
                     variant="outline"
-                    key={item.filepath + idx}
-                    className="inline-flex flex-nowrap items-center gap-0.5 overflow-hidden rounded text-sm font-semibold"
+                    className={cn(
+                      'inline-flex h-7 flex-nowrap items-center gap-1.5 overflow-hidden rounded-md pr-0 text-sm font-semibold',
+                      {
+                        'border-dashed !text-muted-foreground italic line-through':
+                          !enableActiveSelection
+                      }
+                    )}
                   >
-                    <ContextLabel context={item} />
-                    <IconRemove
-                      className="shrink-0 cursor-pointer text-muted-foreground transition-all hover:text-red-300"
-                      onClick={removeRelevantContext.bind(null, idx)}
+                    <ContextLabel
+                      context={activeSelection}
+                      className="flex-1 truncate"
                     />
+                    <span className="shrink-0 text-muted-foreground">
+                      Current file
+                    </span>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="h-7 w-7 shrink-0 rounded-l-none"
+                      onClick={e => {
+                        updateEnableActiveSelection(!enableActiveSelection)
+                      }}
+                    >
+                      {enableActiveSelection ? <IconEye /> : <IconEyeOff />}
+                    </Button>
                   </Badge>
+                </motion.div>
+              ) : null}
+              {relevantContext.map((item, idx) => {
+                return (
+                  <motion.div
+                    // `filepath + range` as unique key
+                    key={item.filepath + item.range.start + item.range.end}
+                    initial={{ opacity: 0, scale: 0.9, y: -5 }}
+                    animate={{ opacity: 1, scale: 1, y: 0 }}
+                    transition={{
+                      ease: 'easeInOut',
+                      duration: 0.1
+                    }}
+                    exit={{ opacity: 0, scale: 0.9, y: 5 }}
+                    layout
+                  >
+                    <Badge
+                      variant="outline"
+                      className="inline-flex h-7 flex-nowrap items-center gap-1 overflow-hidden rounded-md pr-0 text-sm font-semibold"
+                    >
+                      <ContextLabel context={item} />
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-7 w-7 shrink-0 rounded-l-none"
+                        onClick={removeRelevantContext.bind(null, idx)}
+                      >
+                        <IconRemove />
+                      </Button>
+                    </Badge>
+                  </motion.div>
                 )
               })}
-            </div>
-          )}
+            </AnimatePresence>
+          </div>
           <PromptForm
             ref={promptFormRef}
             onSubmit={onSubmit}
@@ -168,13 +217,13 @@ function ContextLabel({
   const [fileName] = context.filepath.split('/').slice(-1)
   const line =
     context.range.start === context.range.end
-      ? `${context.range.start}`
-      : `${context.range.start}-${context.range.end}`
+      ? `:${context.range.start}`
+      : `:${context.range.start}-${context.range.end}`
 
   return (
-    <span className={cn('truncate text-foreground', className)}>
+    <span className={cn('truncate', className)}>
       {fileName}
-      <span className="text-muted-foreground">{`:${line}`}</span>
+      <span className="text-muted-foreground">{line}</span>
     </span>
   )
 }
diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx
@@ -14,6 +14,7 @@ import { useDebounceCallback } from '@/lib/hooks/use-debounce'
 import { useLatest } from '@/lib/hooks/use-latest'
 import { useThreadRun } from '@/lib/hooks/use-thread-run'
 import { filename2prism } from '@/lib/language-utils'
+import { useChatStore } from '@/lib/stores/chat-store'
 import { ExtendedCombinedError } from '@/lib/types'
 import {
   AssistantMessage,
@@ -116,6 +117,9 @@ function ChatRenderer(
   const [activeSelection, setActiveSelection] = React.useState<Context | null>(
     null
   )
+  const enableActiveSelection = useChatStore(
+    state => state.enableActiveSelection
+  )
   const chatPanelRef = React.useRef<ChatPanelRef>(null)
 
   const {
@@ -171,7 +175,8 @@ function ChatRenderer(
       ]
       setQaPairs(nextQaPairs)
       const [userMessage, threadRunOptions] = generateRequestPayload(
-        qaPair.user
+        qaPair.user,
+        enableActiveSelection
       )
 
       return regenerate({
@@ -328,11 +333,16 @@ function ChatRenderer(
   }, [error])
 
   const generateRequestPayload = (
-    userMessage: UserMessage
+    userMessage: UserMessage,
+    enableActiveSelection?: boolean
   ): [CreateMessageInput, ThreadRunOptionsInput] => {
-    // use selectContext or activeContext for code query
-    const contextForCodeQuery: FileContext | undefined =
-      userMessage.selectContext || userMessage.activeContext
+    // use selectContext for code query by default
+    let contextForCodeQuery: FileContext | undefined = userMessage.selectContext
+
+    // if enableActiveSelection, use selectContext or activeContext for code query
+    if (enableActiveSelection) {
+      contextForCodeQuery = contextForCodeQuery || userMessage.activeContext
+    }
 
     const codeQuery: InputMaybe<CodeQueryInput> = contextForCodeQuery
       ? {
@@ -345,9 +355,11 @@ function ChatRenderer(
         }
       : null
 
+    const hasUsableActiveContext =
+      enableActiveSelection && !!userMessage.activeContext
     const fileContext: FileContext[] = uniqWith(
       compact([
-        userMessage?.activeContext,
+        hasUsableActiveContext && userMessage.activeContext,
         ...(userMessage?.relevantContext || [])
       ]),
       isEqual
@@ -391,14 +403,18 @@ function ChatRenderer(
         }\n${'```'}\n`
       }
 
+      const finalActiveContext = activeSelection || userMessage.activeContext
       const newUserMessage: UserMessage = {
         ...userMessage,
         message: userMessage.message + selectCodeSnippet,
         // If no id is provided, set a fallback id.
         id: userMessage.id ?? nanoid(),
         selectContext: userMessage.selectContext,
         // For forward compatibility
-        activeContext: activeSelection || userMessage.activeContext
+        activeContext:
+          enableActiveSelection && finalActiveContext
+            ? finalActiveContext
+            : undefined
       }
 
       const nextQaPairs = [
@@ -416,7 +432,9 @@ function ChatRenderer(
 
       setQaPairs(nextQaPairs)
 
-      sendUserMessage(...generateRequestPayload(newUserMessage))
+      sendUserMessage(
+        ...generateRequestPayload(newUserMessage, enableActiveSelection)
+      )
     }
   )
 
@@ -455,8 +473,15 @@ function ChatRenderer(
     onThreadUpdates?.(qaPairs)
   }, [qaPairs])
 
+  const debouncedUpdateActiveSelection = useDebounceCallback(
+    (ctx: Context | null) => {
+      setActiveSelection(ctx)
+    },
+    300
+  )
+
   const updateActiveSelection = (ctx: Context | null) => {
-    setActiveSelection(ctx)
+    debouncedUpdateActiveSelection.run(ctx)
   }
 
   React.useImperativeHandle(
@@ -475,11 +500,8 @@ function ChatRenderer(
   )
 
   React.useEffect(() => {
-    if (isOnLoadExecuted.current) return
-
-    isOnLoadExecuted.current = true
-    onLoaded?.()
     setInitialzed(true)
+    onLoaded?.()
   }, [])
 
   const chatMaxWidthClass = maxWidth ? `max-w-${maxWidth}` : 'max-w-2xl'

diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -15,6 +15,8 @@ import {
   CircleAlert,
   CircleHelp,
   CirclePlay,
+  Eye,
+  EyeOff,
   Files,
   FileText,
   Filter,
@@ -1692,6 +1694,16 @@ function IconPanelLeft({
   return <PanelLeft className={cn('h-4 w-4', className)} {...props} />
 }
 
+function IconEye({ className, ...props }: React.ComponentProps<typeof Eye>) {
+  return <Eye className={cn('h-4 w-4', className)} {...props} />
+}
+function IconEyeOff({
+  className,
+  ...props
+}: React.ComponentProps<typeof EyeOff>) {
+  return <EyeOff className={cn('h-4 w-4', className)} {...props} />
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1797,5 +1809,7 @@ export {
   IconSquareActivity,
   IconCircleAlert,
   IconCircleHelp,
-  IconPanelLeft
+  IconPanelLeft,
+  IconEye,
+  IconEyeOff
 }
diff --git a/ee/tabby-ui/lib/hooks/use-debounce.ts b/ee/tabby-ui/lib/hooks/use-debounce.ts
@@ -4,6 +4,8 @@ import { debounce, DebouncedFunc, type DebounceSettings } from 'lodash-es'
 import { useLatest } from './use-latest'
 import { useUnmount } from './use-unmount'
 
+// import { useUnmount } from './use-unmount'
+
 type noop = (...args: any[]) => any
 
 interface UseDebounceOptions<T extends noop> extends DebounceSettings {