feat(ui): enable clickable code references within the workspace (#2785)

* feat(ui): enable clickable code references within the workspace * update
TabbyML · Aug 5, 2024 · 7022235 · 7022235
1 parent 6b2edb2
commit 7022235
Showing 1 changed file with 30 additions and 9 deletions.
diff --git a/ee/tabby-ui/components/chat/question-answer.tsx b/ee/tabby-ui/components/chat/question-answer.tsx
@@ -34,7 +34,13 @@ import {
   AccordionTrigger
 } from '../ui/accordion'
 import { Button } from '../ui/button'
-import { IconFile, IconRefresh, IconTrash, IconUser } from '../ui/icons'
+import {
+  IconExternalLink,
+  IconFile,
+  IconRefresh,
+  IconTrash,
+  IconUser
+} from '../ui/icons'
 import { Separator } from '../ui/separator'
 import { Skeleton } from '../ui/skeleton'
 import { UserAvatar } from '../user-avatar'
@@ -225,7 +231,7 @@ interface AssistantMessageActionProps {
 
 function AssistantMessageCard(props: AssistantMessageCardProps) {
   const { message, userMessage, isLoading, userMessageId, ...rest } = props
-  const { onNavigateToContext } = React.useContext(ChatContext)
+  const { onNavigateToContext, client } = React.useContext(ChatContext)
   const contexts: Array<Context> = React.useMemo(() => {
     return (
       message?.relevant_code?.map(code => {
@@ -274,7 +280,12 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
         <CodeReferences
           contexts={contexts}
           userContexts={userMessage.relevantContext}
-          onContextClick={onNavigateToContext}
+          onContextClick={(ctx, isInWorkspace) => {
+            onNavigateToContext?.(ctx, {
+              openInEditor: client === 'vscode' && isInWorkspace
+            })
+          }}
+          isExternalLink={!!client}
         />
         {isLoading && !message?.message ? (
           <MessagePendingIndicator />
@@ -445,10 +456,14 @@ interface ContextReferencesProps {
   contexts: RelevantCodeContext[]
   userContexts?: RelevantCodeContext[]
   className?: string
-  onContextClick?: (context: RelevantCodeContext) => void
+  onContextClick?: (
+    context: RelevantCodeContext,
+    isInWorkspace?: boolean
+  ) => void
   defaultOpen?: boolean
   enableTooltip?: boolean
   onTooltipClick?: () => void
+  isExternalLink?: boolean
 }
 export const CodeReferences = ({
   contexts,
@@ -457,7 +472,8 @@ export const CodeReferences = ({
   onContextClick,
   defaultOpen,
   enableTooltip,
-  onTooltipClick
+  onTooltipClick,
+  isExternalLink
 }: ContextReferencesProps) => {
   const totalContextLength = (userContexts?.length || 0) + contexts.length
   const isMultipleReferences = totalContextLength > 1
@@ -482,8 +498,7 @@ export const CodeReferences = ({
               <ContextItem
                 key={`user-${index}`}
                 context={item}
-                clickable={false}
-                onContextClick={onContextClick}
+                onContextClick={ctx => onContextClick?.(ctx, true)}
               />
             )
           })}
@@ -492,9 +507,10 @@ export const CodeReferences = ({
               <ContextItem
                 key={`assistant-${index}`}
                 context={item}
-                onContextClick={onContextClick}
+                onContextClick={ctx => onContextClick?.(ctx, false)}
                 enableTooltip={enableTooltip}
                 onTooltipClick={onTooltipClick}
+                isExternalLink={isExternalLink}
               />
             )
           })}
@@ -509,13 +525,15 @@ function ContextItem({
   clickable = true,
   onContextClick,
   enableTooltip,
-  onTooltipClick
+  onTooltipClick,
+  isExternalLink
 }: {
   context: RelevantCodeContext
   clickable?: boolean
   onContextClick?: (context: RelevantCodeContext) => void
   enableTooltip?: boolean
   onTooltipClick?: () => void
+  isExternalLink?: boolean
 }) {
   const [tooltipOpen, setTooltipOpen] = useState(false)
   const isMultiLine =
@@ -562,6 +580,9 @@ function ContextItem({
               )}
               <span className="ml-2 text-xs text-muted-foreground">{path}</span>
             </div>
+            {isExternalLink && (
+              <IconExternalLink className="shrink-0 text-muted-foreground" />
+            )}
           </div>
         </div>
       </TooltipTrigger>