update: remove onOpenExternal

clients/tabby-chat-panel/src/index.ts

@@ -76,8 +76,6 @@ export interface ClientApiMethods {
   onCopy: (content: string) => void
 
   onKeyboardEvent: (type: 'keydown' | 'keyup' | 'keypress', event: KeyboardEventInit) => void
-
-  onOpenExternal: (url: string) => Promise<boolean>
 }
 
 export interface ClientApi extends ClientApiMethods {
@@ -120,7 +118,6 @@ export function createClient(target: HTMLIFrameElement, api: ClientApiMethods):
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
-      onOpenExternal: api.onOpenExternal,
     },
   })
 }

clients/vscode/src/chat/WebviewHelper.ts

@@ -557,11 +557,6 @@ export class WebviewHelper {
         this.logger.debug(`Dispatching keyboard event: ${type} ${JSON.stringify(event)}`);
         this.webview?.postMessage({ action: "dispatchKeyboardEvent", type, event });
       },
-      onOpenExternal: async (url: string) => {
-        this.logger.info("Open external", url);
-        const success = await env.openExternal(Uri.parse(url));
-        return success;
-      },
     });
   }
 }

clients/vscode/src/chat/chatPanel.ts

@@ -33,7 +33,6 @@ export function createClient(webview: Webview, api: ClientApiMethods): ServerApi
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
-      onOpenExternal: api.onOpenExternal,
     },
   });
 }

ee/tabby-ui/app/chat/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import { useSearchParams } from 'next/navigation'
 import tabbyUrl from '@/assets/tabby.png'
@@ -74,7 +74,6 @@ export default function ChatPage() {
   // server feature support check
   const [supportsOnApplyInEditorV2, setSupportsOnApplyInEditorV2] =
     useState(false)
-  const [supportsOnOpenExternal, setSupportsOnOpenExternal] = useState(false)
 
   const sendMessage = (message: ChatMessage) => {
     if (chatRef.current) {
@@ -237,8 +236,6 @@ export default function ChatPage() {
         server
           ?.hasCapability('onApplyInEditorV2')
           .then(setSupportsOnApplyInEditorV2)
-
-        server?.hasCapability('onOpenExternal').then(setSupportsOnOpenExternal)
       }
 
       checkCapabilities()
@@ -278,21 +275,6 @@ export default function ChatPage() {
     server?.navigate(context, opts)
   }
 
-  const onOpenExternal = useMemo(() => {
-    if (isInEditor && !supportsOnOpenExternal) {
-      return undefined
-    }
-
-    return async (url: string) => {
-      if (isInEditor) {
-        return server?.onOpenExternal(url)
-      } else {
-        const success = window.open(url, '_blank')
-        return !!success
-      }
-    }
-  }, [isInEditor, server, supportsOnOpenExternal])
-
   const refresh = async () => {
     setIsRefreshLoading(true)
     await server?.refresh()
@@ -406,7 +388,6 @@ export default function ChatPage() {
             : server?.onApplyInEditor)
         }
         supportsOnApplyInEditorV2={supportsOnApplyInEditorV2}
-        onOpenExternal={onOpenExternal}
       />
     </ErrorBoundary>
   )

ee/tabby-ui/app/search/components/assistant-message-section.tsx

@@ -4,15 +4,19 @@ import { MouseEventHandler, useContext, useMemo, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import DOMPurify from 'dompurify'
 import he from 'he'
-import { compact, isEmpty } from 'lodash-es'
+import { compact, isEmpty, merge } from 'lodash-es'
 import { marked } from 'marked'
 import { useForm } from 'react-hook-form'
 import Textarea from 'react-textarea-autosize'
 import { Context } from 'tabby-chat-panel/index'
 import * as z from 'zod'
 
 import { MARKDOWN_CITATION_REGEX } from '@/lib/constants/regex'
-import { MessageAttachmentCode } from '@/lib/gql/generates/graphql'
+import {
+  Maybe,
+  MessageAttachmentClientCode,
+  MessageAttachmentCode
+} from '@/lib/gql/generates/graphql'
 import { makeFormErrorHandler } from '@/lib/tabby/gql'
 import {
   AttachmentDocItem,
@@ -68,19 +72,21 @@ import {
 import { ConversationMessage, SearchContext, SOURCE_CARD_STYLE } from './search'
 
 export function AssistantMessageSection({
+  className,
   message,
   showRelatedQuestion,
   isLoading,
   isLastAssistantMessage,
   isDeletable,
-  className
+  clientCode
 }: {
+  className?: string
   message: ConversationMessage
   showRelatedQuestion: boolean
   isLoading?: boolean
   isLastAssistantMessage?: boolean
   isDeletable?: boolean
-  className?: string
+  clientCode?: Maybe<Array<MessageAttachmentClientCode>>
 }) {
   const {
     onRegenerateResponse,
@@ -133,16 +139,29 @@ export function AssistantMessageSection({
 
   const IconAnswer = isLoading ? IconSpinner : IconSparkles
 
-  const messageAttachmentDocs = message?.attachment?.doc
-  const messageAttachmentCode = message?.attachment?.code
+  const relevantCodeGitURL = message?.attachment?.code?.[0]?.gitUrl || ''
 
-  const totalHeightInRem = messageAttachmentDocs?.length
-    ? Math.ceil(messageAttachmentDocs.length / 4) * SOURCE_CARD_STYLE.expand +
-      0.5 * Math.floor(messageAttachmentDocs.length / 4) +
-      0.5
-    : 0
+  const clientCodeContexts: RelevantCodeContext[] = useMemo(() => {
+    if (!clientCode?.length) return []
+    return (
+      clientCode.map(code => {
+        const { startLine, endLine } = getRangeFromAttachmentCode(code)
+
+        return {
+          kind: 'file',
+          range: {
+            start: startLine,
+            end: endLine
+          },
+          filepath: code.filepath || '',
+          content: code.content,
+          git_url: relevantCodeGitURL
+        }
+      }) ?? []
+    )
+  }, [clientCode, relevantCodeGitURL])
 
-  const relevantCodeContexts: RelevantCodeContext[] = useMemo(() => {
+  const serverCodeContexts: RelevantCodeContext[] = useMemo(() => {
     return (
       message?.attachment?.code?.map(code => {
         const { startLine, endLine } = getRangeFromAttachmentCode(code)
@@ -162,7 +181,23 @@ export function AssistantMessageSection({
         }
       }) ?? []
     )
-  }, [message?.attachment?.code])
+  }, [clientCode, message?.attachment?.code])
+
+  const messageAttachmentCode = useMemo(() => {
+    return merge(
+      [],
+      clientCode?.map(o => ({ ...o, gitUrl: relevantCodeGitURL })),
+      message?.attachment?.code
+    )
+  }, [clientCode, message?.attachment?.code, relevantCodeGitURL])
+
+  const messageAttachmentDocs = message?.attachment?.doc
+
+  const totalHeightInRem = messageAttachmentDocs?.length
+    ? Math.ceil(messageAttachmentDocs.length / 4) * SOURCE_CARD_STYLE.expand +
+      0.5 * Math.floor(messageAttachmentDocs.length / 4) +
+      0.5
+    : 0
 
   const onCodeContextClick = (ctx: Context) => {
     if (!ctx.filepath) return
@@ -295,13 +330,15 @@ export function AssistantMessageSection({
         </div>
 
         {/* code search hits */}
-        {messageAttachmentCode && messageAttachmentCode.length > 0 && (
+        {messageAttachmentCode.length > 0 && (
           <CodeReferences
-            contexts={relevantCodeContexts}
+            contexts={serverCodeContexts}
+            clientContexts={clientCodeContexts}
             className="mt-1 text-sm"
             onContextClick={onCodeContextClick}
             enableTooltip={enableDeveloperMode}
             showExternalLink={false}
+            showClientCode
             onTooltipClick={() => {
               setConversationIdForDev(message.id)
               setDevPanelOpen(true)

ee/tabby-ui/app/search/components/search.tsx

@@ -3,6 +3,7 @@
 import {
   createContext,
   CSSProperties,
+  Fragment,
   useEffect,
   useMemo,
   useRef,
@@ -31,6 +32,7 @@ import {
   InputMaybe,
   Maybe,
   Message,
+  MessageAttachmentClientCode,
   Role
 } from '@/lib/gql/generates/graphql'
 import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
@@ -103,11 +105,17 @@ export type ConversationMessage = Omit<
   threadRelevantQuestions?: Maybe<string[]>
   error?: string
   attachment?: {
+    clientCode?: Maybe<Array<MessageAttachmentClientCode>> | undefined
     code: Maybe<Array<AttachmentCodeItem>> | undefined
     doc: Maybe<Array<AttachmentDocItem>> | undefined
   }
 }
 
+type ConversationPair = {
+  question: ConversationMessage | null
+  answer: ConversationMessage | null
+}
+
 type SearchContextValue = {
   // flag for initialize the pathname
   isPathnameInitialized: boolean
@@ -453,6 +461,7 @@ export function Search() {
     // get and format scores from streaming answer
     if (!currentAssistantMessage.attachment?.code && !!answer.attachmentsCode) {
       currentAssistantMessage.attachment = {
+        clientCode: null,
         doc: currentAssistantMessage.attachment?.doc || null,
         code:
           answer.attachmentsCode.map(hit => ({
@@ -467,6 +476,7 @@ export function Search() {
     // get and format scores from streaming answer
     if (!currentAssistantMessage.attachment?.doc && !!answer.attachmentsDoc) {
       currentAssistantMessage.attachment = {
+        clientCode: null,
         doc:
           answer.attachmentsDoc.map(hit => ({
             ...hit.doc,
@@ -619,7 +629,8 @@ export function Search() {
       content: '',
       attachment: {
         code: null,
-        doc: null
+        doc: null,
+        clientCode: null
       },
       error: undefined
     }
@@ -731,6 +742,25 @@ export function Search() {
     200
   )
 
+  const qaPairs = useMemo(() => {
+    const pairs: Array<ConversationPair> = []
+    let currentPair: ConversationPair = { question: null, answer: null }
+    messages.forEach(message => {
+      if (message.role === Role.User) {
+        currentPair.question = message
+      } else if (message.role === Role.Assistant) {
+        if (!currentPair.answer) {
+          // Take the first answer
+          currentPair.answer = message
+          pairs.push(currentPair)
+          currentPair = { question: null, answer: null }
+        }
+      }
+    })
+
+    return pairs
+  }, [messages])
+
   const style = isShowDemoBanner
     ? { height: `calc(100vh - ${BANNER_HEIGHT})` }
     : { height: '100vh' }
@@ -789,35 +819,34 @@ export function Search() {
               <ScrollArea className="h-full" ref={contentContainerRef}>
                 <div className="mx-auto px-4 pb-32 lg:max-w-4xl lg:px-0">
                   <div className="flex flex-col">
-                    {/* messages */}
-                    {messages.map((message, index) => {
-                      const isLastMessage = index === messages.length - 1
-                      if (message.role === Role.User) {
-                        return (
-                          <UserMessageSection
-                            className="pb-2 pt-8"
-                            key={message.id}
-                            message={message}
-                          />
-                        )
-                      } else if (message.role === Role.Assistant) {
-                        return (
-                          <>
+                    {qaPairs.map((pair, index) => {
+                      const isLastMessage = index === qaPairs.length - 1
+                      if (!pair.question) return null
+
+                      return (
+                        <Fragment key={pair.question.id}>
+                          {!!pair.question && (
+                            <UserMessageSection
+                              className="pb-2 pt-8"
+                              key={pair.question.id}
+                              message={pair.question}
+                            />
+                          )}
+                          {!!pair.answer && (
                             <AssistantMessageSection
-                              key={message.id}
+                              key={pair.answer.id}
                               className="pb-8 pt-2"
-                              message={message}
+                              message={pair.answer}
+                              clientCode={pair.question?.attachment?.clientCode}
                               isLoading={isLoading && isLastMessage}
                               isLastAssistantMessage={isLastMessage}
                               showRelatedQuestion={isLastMessage}
                               isDeletable={!isLoading && messages.length > 2}
                             />
-                            {!isLastMessage && <Separator />}
-                          </>
-                        )
-                      } else {
-                        return null
-                      }
+                          )}
+                          {!isLastMessage && <Separator />}
+                        </Fragment>
+                      )
                     })}
                   </div>
                 </div>