refactor(ui/chat): cleanup client usage in chat page (#3098)

* refactor(ui/chat): cleanup client usage in chat page

* refactor(ui/chat): cleanup css variables

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -46,15 +46,15 @@ export interface ClientApi {
   navigate: (context: Context, opts?: NavigateOpts) => void
   refresh: () => Promise<void>
 
-  onSubmitMessage?: (msg: string, relevantContext?: Context[]) => Promise<void>
+  onSubmitMessage: (msg: string, relevantContext?: Context[]) => Promise<void>
 
-  onApplyInEditor?: (content: string) => void
+  onApplyInEditor: (content: string) => void
 
   // On current page is loaded.
-  onLoaded?: () => void
+  onLoaded: () => void
 
   // On user copy content to clipboard.
-  onCopy?: (content: string) => void
+  onCopy: (content: string) => void
 }
 
 export interface ChatMessage {
@@ -77,6 +77,8 @@ export function createClient(target: HTMLIFrameElement, api: ClientApi): ServerA
       refresh: api.refresh,
       onSubmitMessage: api.onSubmitMessage,
       onApplyInEditor: api.onApplyInEditor,
+      onLoaded: api.onLoaded,
+      onCopy: api.onCopy,
     },
   })
 }

clients/vscode/src/chat/ChatViewProvider.ts

@@ -251,7 +251,7 @@ export class ChatViewProvider implements WebviewViewProvider {
     webviewView.webview.onDidReceiveMessage((message) => {
       switch (message.action) {
         case "sync-theme": {
-          this.client?.updateTheme(message.style, getColorThemeString(window.activeColorTheme.kind) + " vscode");
+          this.client?.updateTheme(message.style, getColorThemeString(window.activeColorTheme.kind));
           return;
         }
       }

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

@@ -4,7 +4,11 @@ html {
   font-size: var(--vscode-font-size, var(--intellij-font-size));
 }
 
-.vscode body {
+.client ::-webkit-scrollbar {
+  display: none;
+}
+
+.client-vscode body {
   --background: var(--vscode-editor-background);
   --foreground: var(--vscode-editor-foreground);
 
@@ -15,15 +19,11 @@ html {
   --primary-foreground: var(--vscode-button-foreground);
 }
 
-.vscode ::-webkit-scrollbar, .intellij ::-webkit-scrollbar {
-  display: none;
-}
-
-.vscode .editor-bg {
+.client-vscode .editor-bg {
   background-color: hsl(var(--vscode-sideBar-background))
 }
 
-.intellij body {
+.client-intellij body {
   --background: var(--intellij-editor-background);
   --foreground: var(--intellij-editor-foreground);
   --border: var(--intellij-editor-border);

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

@@ -61,15 +61,13 @@ export default function ChatPage() {
   const prevWidthRef = useRef(width)
 
   const searchParams = useSearchParams()
-  const client = searchParams.get('client') || undefined
-  const isFromVSCode = client === 'vscode'
-  const isFromIntellij = client === 'intellij'
-  const maxWidth = isFromVSCode ? '5xl' : undefined
+  const client = searchParams.get('client') as ClientType
+  const isInEditor = !!client || undefined
 
   // VSCode bug: not support shortcuts like copy/paste
   // @see - https://github.com/microsoft/vscode/issues/129178
   useEffect(() => {
-    if (!isFromVSCode) return
+    if (client !== 'vscode') return
 
     const onKeyDown = (event: KeyboardEvent) => {
       if ((event.ctrlKey || event.metaKey) && event.code === 'KeyC') {
@@ -145,13 +143,14 @@ export default function ChatPage() {
       document.documentElement.style.cssText = styleWithHslValue
 
       // Sync with edit theme
-      document.documentElement.className = themeClass
+      document.documentElement.className =
+        themeClass + ` client client-${client}`
     }
   })
 
   useEffect(() => {
     if (server) {
-      server?.onLoaded?.()
+      server?.onLoaded()
     }
   }, [server])
 
@@ -192,7 +191,7 @@ export default function ChatPage() {
       <div
         className="h-screen w-screen"
         style={{
-          padding: isFromIntellij ? '20px' : '5px 18px'
+          padding: client == 'intellij' ? '20px' : '5px 18px'
         }}
       >
         <div className="flex items-center" style={{ marginBottom: '0.55em' }}>
@@ -288,12 +287,13 @@ export default function ChatPage() {
         headers={headers}
         onNavigateToContext={onNavigateToContext}
         onLoaded={onChatLoaded}
-        maxWidth={maxWidth}
-        onCopyContent={server?.onCopy}
-        client={client}
-        onSubmitMessage={server?.onSubmitMessage}
-        onApplyInEditor={server?.onApplyInEditor}
+        maxWidth={client === 'vscode' ? '5xl' : undefined}
+        onCopyContent={isInEditor && server?.onCopy}
+        onSubmitMessage={isInEditor && server?.onSubmitMessage}
+        onApplyInEditor={isInEditor && server?.onApplyInEditor}
       />
     </ErrorBoundary>
   )
 }
+
+type ClientType = 'vscode' | 'intellij' | 'vim' | 'eclipse' | null

ee/tabby-ui/app/files/components/chat-side-bar.tsx

@@ -75,7 +75,11 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
       await new Promise(resolve => {
         setTimeout(() => resolve(null), 1000)
       })
-    }
+    },
+    async onSubmitMessage(_msg, _relevantContext) {},
+    onApplyInEditor(_content) {},
+    onLoaded() {},
+    onCopy(_content) {}
   })
 
   const getPrompt = ({ action }: QuickActionEventPayload) => {

ee/tabby-ui/components/chat/chat.tsx

@@ -39,7 +39,6 @@ type ChatContextValue = {
   onClearMessages: () => void
   container?: HTMLDivElement
   onCopyContent?: (value: string) => void
-  client?: string
   onApplyInEditor?: (value: string) => void
   relevantContext: Context[]
   removeRelevantContext: (index: number) => void
@@ -82,7 +81,6 @@ interface ChatProps extends React.ComponentProps<'div'> {
   welcomeMessage?: string
   promptFormClassname?: string
   onCopyContent?: (value: string) => void
-  client?: string
   onSubmitMessage?: (msg: string, relevantContext?: Context[]) => Promise<void>
   onApplyInEditor?: (value: string) => void
 }
@@ -103,7 +101,6 @@ function ChatRenderer(
     welcomeMessage,
     promptFormClassname,
     onCopyContent,
-    client,
     onSubmitMessage,
     onApplyInEditor
   }: ChatProps,
@@ -457,7 +454,6 @@ function ChatRenderer(
         onClearMessages,
         container,
         onCopyContent,
-        client,
         onApplyInEditor,
         relevantContext,
         removeRelevantContext

ee/tabby-ui/components/chat/code-references.tsx

@@ -27,7 +27,6 @@ interface ContextReferencesProps {
   ) => void
   enableTooltip?: boolean
   onTooltipClick?: () => void
-  isExternalLink?: boolean
   highlightIndex?: number | undefined
 }
 
@@ -43,7 +42,6 @@ export const CodeReferences = forwardRef<
       onContextClick,
       enableTooltip,
       onTooltipClick,
-      isExternalLink,
       highlightIndex
     },
     ref
@@ -100,7 +98,7 @@ export const CodeReferences = forwardRef<
                   onContextClick={ctx => onContextClick?.(ctx, false)}
                   enableTooltip={enableTooltip}
                   onTooltipClick={onTooltipClick}
-                  isExternalLink={isExternalLink}
+                  isExternalLink={true}
                   isHighlighted={
                     highlightIndex === index + (userContexts?.length || 0)
                   }

ee/tabby-ui/components/chat/question-answer.tsx

@@ -102,7 +102,7 @@ function UserMessageCard(props: { message: UserMessage }) {
   const { message } = props
   const [{ data }] = useMe()
   const selectContext = message.selectContext
-  const { onNavigateToContext, client } = React.useContext(ChatContext)
+  const { onNavigateToContext } = React.useContext(ChatContext)
   const selectCodeSnippet = React.useMemo(() => {
     if (!selectContext?.content) return ''
     const language = selectContext?.filepath
@@ -163,7 +163,7 @@ function UserMessageCard(props: { message: UserMessage }) {
               className="flex cursor-pointer items-center gap-1 overflow-x-auto text-xs text-muted-foreground hover:underline"
               onClick={() =>
                 onNavigateToContext?.(message.selectContext!, {
-                  openInEditor: client === 'vscode'
+                  openInEditor: true
                 })
               }
             >
@@ -233,7 +233,7 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
     enableRegenerating,
     ...rest
   } = props
-  const { onNavigateToContext, client, onApplyInEditor, onCopyContent } =
+  const { onNavigateToContext, onApplyInEditor, onCopyContent } =
     React.useContext(ChatContext)
   const [relevantCodeHighlightIndex, setRelevantCodeHighlightIndex] =
     React.useState<number | undefined>(undefined)
@@ -314,7 +314,7 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
       }
     }
     onNavigateToContext?.(ctx, {
-      openInEditor: client === 'vscode' && code.isClient
+      openInEditor: code.isClient
     })
   }
 
@@ -349,10 +349,9 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
           userContexts={clientCode}
           onContextClick={(ctx, isInWorkspace) => {
             onNavigateToContext?.(ctx, {
-              openInEditor: client === 'vscode' && isInWorkspace
+              openInEditor: isInWorkspace
             })
           }}
-          isExternalLink={!!client}
           highlightIndex={relevantCodeHighlightIndex}
         />
         {isLoading && !message?.message ? (