feat(chat-ui): add smart apply functionality to chat panel

TabbyML · Sep 10, 2024 · 7a7b3ed · 7a7b3ed
1 parent 8d83f30
commit 7a7b3ed
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 5 deletions.
diff --git a/clients/tabby-chat-panel/src/index.ts b/clients/tabby-chat-panel/src/index.ts
@@ -50,6 +50,9 @@ export interface ClientApi {
 
   onApplyInEditor: (content: string) => void
 
+  // smart apply into editor
+  onSmartApplyInEditor: (content: string) => void
+
   // On current page is loaded.
   onLoaded: () => void
 

diff --git a/clients/vscode/src/chat/ChatViewProvider.ts b/clients/vscode/src/chat/ChatViewProvider.ts
@@ -25,6 +25,7 @@ import type { ServerInfo } from "tabby-agent";
 import type { AgentFeature as Agent } from "../lsp/AgentFeature";
 import { createClient } from "./chatPanel";
 import { GitProvider } from "../git/GitProvider";
+import { getLogger } from "../logger";
 
 export class ChatViewProvider implements WebviewViewProvider {
   webview?: WebviewView;
@@ -203,6 +204,9 @@ export class ChatViewProvider implements WebviewViewProvider {
           });
         }
       },
+      onSmartApplyInEditor: (content: string) => {
+        getLogger("Tabby").info("Smart apply in editor is not implemented yet.", content);
+      },
       onLoaded: () => {
         setTimeout(() => {
           this.refreshChatPage();

diff --git a/clients/vscode/src/chat/chatPanel.ts b/clients/vscode/src/chat/chatPanel.ts
@@ -34,6 +34,7 @@ export function createClient(webview: WebviewView, api: ClientApi): ServerApi {
       onApplyInEditor: api.onApplyInEditor,
       onCopy: api.onCopy,
       onLoaded: api.onLoaded,
+      onSmartApplyInEditor: api.onSmartApplyInEditor,
     },
   });
 }
diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx
@@ -294,6 +294,7 @@ export default function ChatPage() {
         onCopyContent={isInEditor && server?.onCopy}
         onSubmitMessage={isInEditor && server?.onSubmitMessage}
         onApplyInEditor={isInEditor && server?.onApplyInEditor}
+        onSmartApplyInEditor={isInEditor && server?.onSmartApplyInEditor}
       />
     </ErrorBoundary>
   )

diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx
@@ -40,6 +40,7 @@ type ChatContextValue = {
   container?: HTMLDivElement
   onCopyContent?: (value: string) => void
   onApplyInEditor?: (value: string) => void
+  onSmartApplyInEditor?: (value: string) => void
   relevantContext: Context[]
   removeRelevantContext: (index: number) => void
 }
@@ -72,6 +73,7 @@ interface ChatProps extends React.ComponentProps<'div'> {
   onCopyContent?: (value: string) => void
   onSubmitMessage?: (msg: string, relevantContext?: Context[]) => Promise<void>
   onApplyInEditor?: (value: string) => void
+  onSmartApplyInEditor?: (value: string) => void
 }
 
 function ChatRenderer(
@@ -90,7 +92,8 @@ function ChatRenderer(
     promptFormClassname,
     onCopyContent,
     onSubmitMessage,
-    onApplyInEditor
+    onApplyInEditor,
+    onSmartApplyInEditor
   }: ChatProps,
   ref: React.ForwardedRef<ChatRef>
 ) {
@@ -442,6 +445,7 @@ function ChatRenderer(
         container,
         onCopyContent,
         onApplyInEditor,
+        onSmartApplyInEditor,
         relevantContext,
         removeRelevantContext
       }}

diff --git a/ee/tabby-ui/components/chat/question-answer.tsx b/ee/tabby-ui/components/chat/question-answer.tsx
@@ -233,8 +233,12 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
     enableRegenerating,
     ...rest
   } = props
-  const { onNavigateToContext, onApplyInEditor, onCopyContent } =
-    React.useContext(ChatContext)
+  const {
+    onNavigateToContext,
+    onApplyInEditor,
+    onSmartApplyInEditor,
+    onCopyContent
+  } = React.useContext(ChatContext)
   const [relevantCodeHighlightIndex, setRelevantCodeHighlightIndex] =
     React.useState<number | undefined>(undefined)
   const serverCode: Array<Context> = React.useMemo(() => {
@@ -363,6 +367,7 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
             <MessageMarkdown
               message={message.message}
               onApplyInEditor={onApplyInEditor}
+              onSmartApplyInEditor={onSmartApplyInEditor}
               onCopyContent={onCopyContent}
               attachmentCode={attachmentCode}
               onCodeCitationClick={onCodeCitationClick}

diff --git a/ee/tabby-ui/components/message-markdown/index.tsx b/ee/tabby-ui/components/message-markdown/index.tsx
@@ -65,6 +65,7 @@ export interface MessageMarkdownProps {
   attachmentCode?: Maybe<Array<AttachmentCodeItem>>
   onCopyContent?: ((value: string) => void) | undefined
   onApplyInEditor?: ((value: string) => void) | undefined
+  onSmartApplyInEditor?: ((value: string) => void) | undefined
   onCodeCitationClick?: (code: MessageAttachmentCode) => void
   onCodeCitationMouseEnter?: (index: number) => void
   onCodeCitationMouseLeave?: (index: number) => void
@@ -93,6 +94,7 @@ export function MessageMarkdown({
   attachmentDocs,
   attachmentCode,
   onApplyInEditor,
+  onSmartApplyInEditor,
   onCopyContent,
   contextInfo,
   fetchingContextInfo,
@@ -236,6 +238,7 @@ export function MessageMarkdown({
                 language={(match && match[1]) || ''}
                 value={String(children).replace(/\n$/, '')}
                 onApplyInEditor={onApplyInEditor}
+                onSmartApplyInEditor={onSmartApplyInEditor}
                 onCopyContent={onCopyContent}
                 {...props}
               />

diff --git a/ee/tabby-ui/components/ui/codeblock.tsx b/ee/tabby-ui/components/ui/codeblock.tsx
@@ -9,7 +9,12 @@ import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
 import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import { IconApplyInEditor, IconCheck, IconCopy } from '@/components/ui/icons'
+import {
+  IconApplyInEditor,
+  IconCheck,
+  IconCopy,
+  IconSmartApplyInEditor
+} from '@/components/ui/icons'
 import {
   Tooltip,
   TooltipContent,
@@ -21,6 +26,7 @@ interface Props {
   value: string
   onCopyContent?: (value: string) => void
   onApplyInEditor?: (value: string) => void
+  onSmartApplyInEditor?: (value: string) => void
 }
 
 interface languageMap {
@@ -64,7 +70,13 @@ export const generateRandomString = (length: number, lowercase = false) => {
 }
 
 const CodeBlock: FC<Props> = memo(
-  ({ language, value, onCopyContent, onApplyInEditor }) => {
+  ({
+    language,
+    value,
+    onCopyContent,
+    onApplyInEditor,
+    onSmartApplyInEditor
+  }) => {
     const { isCopied, copyToClipboard } = useCopyToClipboard({
       timeout: 2000,
       onCopyContent
@@ -83,6 +95,24 @@ const CodeBlock: FC<Props> = memo(
         <div className="flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
           <span className="text-xs lowercase">{language}</span>
           <div className="flex items-center space-x-1">
+            {onSmartApplyInEditor && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-xs hover:bg-[#3C382F] hover:text-[#F4F4F5] focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
+                    onClick={() => onSmartApplyInEditor(value)}
+                  >
+                    <IconSmartApplyInEditor />
+                    <span className="sr-only">Smart Apply in Editor</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="m-0">Smart Apply in Editor</p>
+                </TooltipContent>
+              </Tooltip>
+            )}
             {onApplyInEditor && (
               <Tooltip>
                 <TooltipTrigger asChild>

diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -1523,6 +1523,13 @@ function IconApplyInEditor({
   return <IndentIncrease className={cn('h-4 w-4', className)} {...props} />
 }
 
+function IconSmartApplyInEditor({
+  className,
+  ...props
+}: React.ComponentProps<typeof Sparkles>) {
+  return <Sparkles className={cn('h-4 w-4', className)} {...props} />
+}
+
 function IconBug({ className, ...props }: React.ComponentProps<typeof Bug>) {
   return <Bug className={cn('h-4 w-4', className)} {...props} />
 }
@@ -1682,6 +1689,7 @@ export {
   IconTag,
   IconFileText,
   IconApplyInEditor,
+  IconSmartApplyInEditor,
   IconBug,
   IconFilter,
   IconRemove,