From c4a947c1a1c8927b0e32f22ad00a3574e5922ae9 Mon Sep 17 00:00:00 2001 From: Meng Zhang Date: Fri, 6 Sep 2024 16:29:25 -0700 Subject: [PATCH] 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 | 10 ++++--- clients/vscode/src/chat/ChatViewProvider.ts | 2 +- ee/tabby-ui/app/chat/page.css | 14 +++++----- ee/tabby-ui/app/chat/page.tsx | 26 +++++++++---------- .../app/files/components/chat-side-bar.tsx | 6 ++++- ee/tabby-ui/components/chat/chat.tsx | 4 --- .../components/chat/code-references.tsx | 4 +-- .../components/chat/question-answer.tsx | 11 ++++---- 8 files changed, 38 insertions(+), 39 deletions(-) diff --git a/clients/tabby-chat-panel/src/index.ts b/clients/tabby-chat-panel/src/index.ts index 9e9f6f5eb..964fa314c 100644 --- a/clients/tabby-chat-panel/src/index.ts +++ b/clients/tabby-chat-panel/src/index.ts @@ -46,15 +46,15 @@ export interface ClientApi { navigate: (context: Context, opts?: NavigateOpts) => void refresh: () => Promise - onSubmitMessage?: (msg: string, relevantContext?: Context[]) => Promise + onSubmitMessage: (msg: string, relevantContext?: Context[]) => Promise - 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, }, }) } diff --git a/clients/vscode/src/chat/ChatViewProvider.ts b/clients/vscode/src/chat/ChatViewProvider.ts index 568857ad0..c96849136 100644 --- a/clients/vscode/src/chat/ChatViewProvider.ts +++ b/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; } } diff --git a/ee/tabby-ui/app/chat/page.css b/ee/tabby-ui/app/chat/page.css index b6754fb64..b6339077f 100644 --- a/ee/tabby-ui/app/chat/page.css +++ b/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); diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx index 4fde84a10..50a88eb60 100644 --- a/ee/tabby-ui/app/chat/page.tsx +++ b/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() {
@@ -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} /> ) } + +type ClientType = 'vscode' | 'intellij' | 'vim' | 'eclipse' | null diff --git a/ee/tabby-ui/app/files/components/chat-side-bar.tsx b/ee/tabby-ui/app/files/components/chat-side-bar.tsx index 7b8e94868..7114a6578 100644 --- a/ee/tabby-ui/app/files/components/chat-side-bar.tsx +++ b/ee/tabby-ui/app/files/components/chat-side-bar.tsx @@ -75,7 +75,11 @@ export const ChatSideBar: React.FC = ({ await new Promise(resolve => { setTimeout(() => resolve(null), 1000) }) - } + }, + async onSubmitMessage(_msg, _relevantContext) {}, + onApplyInEditor(_content) {}, + onLoaded() {}, + onCopy(_content) {} }) const getPrompt = ({ action }: QuickActionEventPayload) => { diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx index 3990794a8..6ca5df313 100644 --- a/ee/tabby-ui/components/chat/chat.tsx +++ b/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 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 diff --git a/ee/tabby-ui/components/chat/code-references.tsx b/ee/tabby-ui/components/chat/code-references.tsx index 195dfbd2d..284914c62 100644 --- a/ee/tabby-ui/components/chat/code-references.tsx +++ b/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) } diff --git a/ee/tabby-ui/components/chat/question-answer.tsx b/ee/tabby-ui/components/chat/question-answer.tsx index 9f6cb28f9..9004fd8d5 100644 --- a/ee/tabby-ui/components/chat/question-answer.tsx +++ b/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(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 ? (