feat(ui): adding path to the user's code block (TabbyML#2417)

* feat(ui): adding path to the user's code block * fix selectContext * hide in vscode * fix --------- Co-authored-by: liangfung <[email protected]>
zsjtiger · Jun 17, 2024 · 22318d9 · 22318d9
1 parent cda26d0
commit 22318d9
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx
@@ -159,6 +159,7 @@ export default function ChatPage() {
       onLoaded={onChatLoaded}
       maxWidth={maxWidth}
       onCopyContent={from === 'vscode' ? onCopyContent : undefined}
+      from={from}
     />
   )
 }
diff --git a/ee/tabby-ui/app/files/components/code-editor-view.tsx b/ee/tabby-ui/app/files/components/code-editor-view.tsx
@@ -42,12 +42,10 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({ value, language }) => {
   const line = searchParams.get('line')?.toString()
   const [editorView, setEditorView] = React.useState<EditorView | null>(null)
 
-  const { isChatEnabled, activePath, fileMap, activeEntryInfo } =
+  const { isChatEnabled, activePath, activeEntryInfo, activeRepo } =
     React.useContext(SourceCodeBrowserContext)
-  const { repositorySpecifier, rev, basename } = activeEntryInfo
-  const gitUrl = repositorySpecifier
-    ? fileMap[`${repositorySpecifier}/${rev}`]?.repository?.gitUrl ?? ''
-    : ''
+  const { basename } = activeEntryInfo
+  const gitUrl = activeRepo?.gitUrl ?? ''
 
   const extensions = React.useMemo(() => {
     let result: Extension[] = [

diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx
@@ -35,6 +35,7 @@ type ChatContextValue = {
   container?: HTMLDivElement
   onCopyContent?: (value: string) => void
   isReferenceClickable: boolean
+  from?: string
 }
 
 export const ChatContext = React.createContext<ChatContextValue>(
@@ -120,6 +121,7 @@ interface ChatProps extends React.ComponentProps<'div'> {
   promptFormClassname?: string
   onCopyContent?: (value: string) => void
   isReferenceClickable?: boolean
+  from?: string
 }
 
 function ChatRenderer(
@@ -140,7 +142,8 @@ function ChatRenderer(
     welcomeMessage,
     promptFormClassname,
     onCopyContent,
-    isReferenceClickable = true
+    isReferenceClickable = true,
+    from
   }: ChatProps,
   ref: React.ForwardedRef<ChatRef>
 ) {
@@ -388,7 +391,8 @@ function ChatRenderer(
         onClearMessages,
         container,
         onCopyContent,
-        isReferenceClickable
+        isReferenceClickable,
+        from
       }}
     >
       <div className="flex justify-center overflow-x-hidden">

diff --git a/ee/tabby-ui/components/chat/question-answer.tsx b/ee/tabby-ui/components/chat/question-answer.tsx
@@ -67,6 +67,11 @@ interface QuestionAnswerItemProps {
   isLoading: boolean
 }
 
+type SelectCode = {
+  filepath: string
+  isMultiLine: boolean
+}
+
 function QuestionAnswerItem({ message, isLoading }: QuestionAnswerItemProps) {
   const { user, assistant } = message
 
@@ -91,6 +96,7 @@ function UserMessageCard(props: { message: UserMessage }) {
   const { message } = props
   const [{ data }] = useMe()
   const selectContext = message.selectContext
+  const { onNavigateToContext, from } = React.useContext(ChatContext)
   const selectCodeSnippet = React.useMemo(() => {
     if (!selectContext?.content) return ''
     const language = selectContext?.filepath
@@ -99,6 +105,15 @@ function UserMessageCard(props: { message: UserMessage }) {
     return `\n${'```'}${language}\n${selectContext?.content ?? ''}\n${'```'}\n`
   }, [selectContext])
 
+  let selectCode: SelectCode | null = null
+  if (selectCodeSnippet && message.selectContext) {
+    const { range, filepath } = message.selectContext
+    selectCode = {
+      filepath,
+      isMultiLine:
+        !isNil(range?.start) && !isNil(range?.end) && range.start < range.end
+    }
+  }
   return (
     <div
       className={cn(
@@ -139,6 +154,24 @@ function UserMessageCard(props: { message: UserMessage }) {
           <div className="hidden md:block">
             <UserMessageCardActions {...props} />
           </div>
+
+          {selectCode && message.selectContext && from !== 'vscode' && (
+            <div
+              className="flex cursor-pointer items-center gap-1 overflow-x-auto text-xs text-muted-foreground hover:underline"
+              onClick={() => onNavigateToContext?.(message.selectContext!)}
+            >
+              <IconFile className="h-3 w-3" />
+              <p className="flex-1 truncate pr-1">
+                <span>{selectCode.filepath}</span>
+                {message.selectContext?.range?.start && (
+                  <span>:{message.selectContext?.range.start}</span>
+                )}
+                {selectCode.isMultiLine && (
+                  <span>-{message.selectContext?.range.end}</span>
+                )}
+              </p>
+            </div>
+          )}
         </div>
         {!data?.me.name && (
           <div className="editor-bg absolute right-0 top-0 -mt-0.5 block opacity-0 transition-opacity group-hover:opacity-100 md:hidden">