feat(ui): add action bar in code browser (#1719)

* feat: action bar mock * rename * [autofix.ci] apply automated fixes * logo-transparent-logo * [autofix.ci] apply automated fixes * reverse * update * emitter event * meta * isChatEnabled * rename * displayName * fix lint * update * delay * [autofix.ci] apply automated fixes * update * Update ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget-extension.tsx Co-authored-by: Meng Zhang <[email protected]> * mv event-emttier * renaem * Update ee/tabby-ui/app/files/lib/event-emitter.ts Co-authored-by: Meng Zhang <[email protected]> * Update ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget.tsx Co-authored-by: Meng Zhang <[email protected]> * Update ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget.tsx Co-authored-by: Meng Zhang <[email protected]> * explain --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Meng Zhang <[email protected]>
TabbyML · Mar 29, 2024 · df3fbcb · df3fbcb
1 parent e45e509
commit df3fbcb
Show file tree

Hide file tree

Showing 11 changed files with 285 additions and 45 deletions.
diff --git a/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget-extension.tsx b/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget-extension.tsx
@@ -0,0 +1,73 @@
+import type { EditorState, Extension, Transaction } from '@codemirror/state'
+import { StateField } from '@codemirror/state'
+import type { Tooltip } from '@codemirror/view'
+import { showTooltip } from '@codemirror/view'
+import ReactDOM from 'react-dom/client'
+
+import { ActionBarWidget } from './action-bar-widget'
+
+let delayTimer: number
+
+function ActionBarWidgetExtension(): Extension {
+  return StateField.define<Tooltip | null>({
+    create() {
+      return null
+    },
+    update(value, transaction) {
+      if (transaction.newSelection.main.empty) {
+        clearTimeout(delayTimer)
+        return null
+      }
+      if (transaction.selection) {
+        if (shouldShowActionBarWidget(transaction)) {
+          const tooltip = createActionBarWidget(transaction.state)
+          // avoid flickering
+          // return tooltip?.pos !== value?.pos ? tooltip : value
+          return tooltip
+        }
+
+        clearTimeout(delayTimer)
+        return null
+      }
+      return value
+    },
+    provide: field => showTooltip.compute([field], state => state.field(field))
+  })
+}
+
+function createActionBarWidget(state: EditorState): Tooltip {
+  const { selection } = state
+  const lineFrom = state.doc.lineAt(selection.main.from)
+  const lineTo = state.doc.lineAt(selection.main.to)
+  const isMultiline = lineFrom.number !== lineTo.number
+  const pos = isMultiline ? lineTo.from : selection.main.from
+
+  return {
+    pos,
+    above: false,
+    strictSide: true,
+    arrow: false,
+    create() {
+      const dom = document.createElement('div')
+      dom.style.background = 'transparent'
+      dom.style.border = 'none'
+      const root = ReactDOM.createRoot(dom)
+      dom.onclick = e => e.stopImmediatePropagation()
+      // delay popup
+      if (delayTimer) clearTimeout(delayTimer)
+      delayTimer = window.setTimeout(() => {
+        root.render(<ActionBarWidget />)
+      }, 1000)
+
+      return { dom }
+    }
+  }
+}
+
+function shouldShowActionBarWidget(transaction: Transaction): boolean {
+  const isTextSelected =
+    !!transaction.selection && !transaction.selection.main.empty
+  return isTextSelected && transaction.isUserEvent('select')
+}
+
+export { ActionBarWidgetExtension }
diff --git a/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget.tsx b/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget.tsx
@@ -0,0 +1,66 @@
+import Image from 'next/image'
+import tabbyLogo from '@/assets/tabby.png'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { IconChevronUpDown } from '@/components/ui/icons'
+
+import { CodeBrowserQuickAction, emitter } from '../../lib/event-emitter'
+
+interface ActionBarWidgetProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const ActionBarWidget: React.FC<ActionBarWidgetProps> = ({
+  className,
+  ...props
+}) => {
+  const handleAction = (action: CodeBrowserQuickAction) => {
+    emitter.emit('code_browser_quick_action', action)
+  }
+
+  return (
+    <div
+      className={cn(
+        'mt-2 flex items-center gap-2 rounded-md border bg-background px-2 py-1',
+        className
+      )}
+      {...props}
+    >
+      <Image src={tabbyLogo} width={32} alt="logo" />
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={e => handleAction('explain')}
+      >
+        Explain
+      </Button>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button size="sm" variant="outline">
+            Generate
+            <IconChevronUpDown className="ml-1" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onSelect={() => handleAction('generate_unittest')}
+          >
+            Unit Test
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onSelect={() => handleAction('generate_doc')}
+          >
+            Documentation
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/ee/tabby-ui/app/files/components/code-editor-view.tsx b/ee/tabby-ui/app/files/components/code-editor-view.tsx
@@ -1,14 +1,21 @@
 import React from 'react'
 import { Extension } from '@codemirror/state'
-import { EditorView } from '@codemirror/view'
+import { drawSelection, EditorView } from '@codemirror/view'
 import { useTheme } from 'next-themes'
 
+import { EXP_enable_code_browser_quick_action_bar } from '@/lib/experiment-flags'
+import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
 import { TFileMeta } from '@/lib/types'
-import CodeEditor from '@/components/codemirror/codemirror'
+import CodeEditor, {
+  CodeMirrorEditorRef
+} from '@/components/codemirror/codemirror'
 import { markTagNameExtension } from '@/components/codemirror/name-tag-extension'
 import { highlightTagExtension } from '@/components/codemirror/tag-range-highlight-extension'
 import { codeTagHoverTooltip } from '@/components/codemirror/tooltip-extesion'
 
+import { CodeBrowserQuickAction, emitter } from '../lib/event-emitter'
+import { ActionBarWidgetExtension } from './action-bar-widget/action-bar-widget-extension'
+
 interface CodeEditorViewProps {
   value: string
   meta?: TFileMeta
@@ -22,6 +29,9 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({
 }) => {
   const { theme } = useTheme()
   const tags = meta?.tags
+  const editorRef = React.useRef<CodeMirrorEditorRef>(null)
+  const isChatEnabled = useIsChatEnabled()
+
   const extensions = React.useMemo(() => {
     let result: Extension[] = [
       EditorView.baseTheme({
@@ -36,8 +46,12 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({
           backgroundColor: 'transparent',
           borderRight: 'none'
         }
-      })
+      }),
+      drawSelection()
     ]
+    if (EXP_enable_code_browser_quick_action_bar.value && isChatEnabled) {
+      result.push(ActionBarWidgetExtension())
+    }
     if (value && tags) {
       result.push(
         markTagNameExtension(tags),
@@ -46,7 +60,47 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({
       )
     }
     return result
-  }, [value, tags])
+  }, [value, tags, editorRef.current])
+
+  React.useEffect(() => {
+    const quickActionBarCallback = (action: CodeBrowserQuickAction) => {
+      let builtInPrompt = ''
+      switch (action) {
+        case 'explain':
+          builtInPrompt = 'Explain the following code:'
+          break
+        case 'generate_unittest':
+          builtInPrompt = 'Generate a unit test for the following code:'
+          break
+        case 'generate_doc':
+          builtInPrompt = 'Generate documentation for the following code:'
+          break
+        default:
+          break
+      }
+      const view = editorRef.current?.editorView
+      const text =
+        view?.state.doc.sliceString(
+          view?.state.selection.main.from,
+          view?.state.selection.main.to
+        ) || ''
+
+      const initialMessage = `${builtInPrompt}\n${'```'}${
+        language ?? ''
+      }\n${text}\n${'```'}\n`
+      if (initialMessage) {
+        window.open(
+          `/playground?initialMessage=${encodeURIComponent(initialMessage)}`
+        )
+      }
+    }
+
+    emitter.on('code_browser_quick_action', quickActionBarCallback)
+
+    return () => {
+      emitter.off('code_browser_quick_action', quickActionBarCallback)
+    }
+  }, [])
 
   return (
     <CodeEditor
@@ -55,6 +109,7 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({
       language={language}
       readonly
       extensions={extensions}
+      ref={editorRef}
     />
   )
 }

diff --git a/ee/tabby-ui/app/files/components/text-file-view.tsx b/ee/tabby-ui/app/files/components/text-file-view.tsx
@@ -86,7 +86,7 @@ export const TextFileView: React.FC<TextFileViewProps> = ({
           {showMarkdown ? (
             <MarkdownView value={value} />
           ) : (
-            <CodeEditorView value={value} language={language} />
+            <CodeEditorView value={value} language={language} meta={meta} />
           )}
         </Suspense>
       </div>

diff --git a/ee/tabby-ui/app/files/lib/event-emitter.ts b/ee/tabby-ui/app/files/lib/event-emitter.ts
@@ -0,0 +1,12 @@
+import mitt from 'mitt'
+
+type CodeBrowserQuickAction = 'explain' | 'generate_unittest' | 'generate_doc'
+
+type CodeBrowserQuickActionEvents = {
+  code_browser_quick_action: CodeBrowserQuickAction
+}
+
+const emitter = mitt<CodeBrowserQuickActionEvents>()
+
+export type { CodeBrowserQuickAction }
+export { emitter }
diff --git a/ee/tabby-ui/assets/tabby.png b/ee/tabby-ui/assets/tabby.png
diff --git a/ee/tabby-ui/components/chat-message.tsx b/ee/tabby-ui/components/chat-message.tsx
@@ -93,7 +93,7 @@ export function ChatMessage({
 function IconTabby() {
   return (
     <Image
-      style={{ borderRadius: 4 }}
+      style={{ borderRadius: 4, backgroundColor: '#E8E2D2' }}
       src={tabbyLogo}
       alt="tabby"
       width="128"