feat(chat): allow share a thread from Chat panel sidebar

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

@@ -77,6 +77,7 @@ export interface ClientApiMethods {
 
   onKeyboardEvent: (type: 'keydown' | 'keyup' | 'keypress', event: KeyboardEventInit) => void
 
+  onOpenExternal: (url: string) => Promise<boolean>
 }
 
 export interface ClientApi extends ClientApiMethods {
@@ -119,6 +120,7 @@ export function createClient(target: HTMLIFrameElement, api: ClientApiMethods):
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
+      onOpenExternal: api.onOpenExternal,
     },
   })
 }

clients/vscode/src/chat/WebviewHelper.ts

@@ -557,6 +557,11 @@ export class WebviewHelper {
         this.logger.debug(`Dispatching keyboard event: ${type} ${JSON.stringify(event)}`);
         this.webview?.postMessage({ action: "dispatchKeyboardEvent", type, event });
       },
+      onOpenExternal: async (url: string) => {
+        this.logger.info("Open external", url);
+        const success = await env.openExternal(Uri.parse(url));
+        return success;
+      },
     });
   }
 }

clients/vscode/src/chat/chatPanel.ts

@@ -33,6 +33,7 @@ export function createClient(webview: Webview, api: ClientApiMethods): ServerApi
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
+      onOpenExternal: api.onOpenExternal,
     },
   });
 }

ee/tabby-schema/src/schema/mod.rs

@@ -1178,7 +1178,7 @@
 
     /// Turn on persisted status for a thread.
     async fn set_thread_persisted(ctx: &Context, thread_id: ID) -> Result<bool> {
-        let user = check_user(ctx).await?;
+        let user = check_user_allow_auth_token(ctx).await?;
         let svc = ctx.locator.thread();
         let Some(thread) = svc.get(&thread_id).await? else {
             return Err(CoreError::NotFound("Thread not found"));

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import Image from 'next/image'
 import { useSearchParams } from 'next/navigation'
 import tabbyUrl from '@/assets/tabby.png'
@@ -74,6 +74,7 @@ export default function ChatPage() {
   // server feature support check
   const [supportsOnApplyInEditorV2, setSupportsOnApplyInEditorV2] =
     useState(false)
+  const [supportsOnOpenExternal, setSupportsOnOpenExternal] = useState(false)
 
   const sendMessage = (message: ChatMessage) => {
     if (chatRef.current) {
@@ -236,6 +237,8 @@ export default function ChatPage() {
         server
           ?.hasCapability('onApplyInEditorV2')
           .then(setSupportsOnApplyInEditorV2)
+
+        server?.hasCapability('onOpenExternal').then(setSupportsOnOpenExternal)
       }
 
       checkCapabilities()
@@ -275,6 +278,21 @@ export default function ChatPage() {
     server?.navigate(context, opts)
   }
 
+  const onOpenExternal = useMemo(() => {
+    if (isInEditor && !supportsOnOpenExternal) {
+      return undefined
+    }
+
+    return async (url: string) => {
+      if (isInEditor) {
+        return server?.onOpenExternal(url)
+      } else {
+        const success = window.open(url, '_blank')
+        return !!success
+      }
+    }
+  }, [isInEditor, server, supportsOnOpenExternal])
+
   const refresh = async () => {
     setIsRefreshLoading(true)
     await server?.refresh()
@@ -388,6 +406,7 @@ export default function ChatPage() {
             : server?.onApplyInEditor)
         }
         supportsOnApplyInEditorV2={supportsOnApplyInEditorV2}
+        onOpenExternal={onOpenExternal}
       />
     </ErrorBoundary>
   )

ee/tabby-ui/app/search/components/search.tsx

@@ -48,7 +48,8 @@ import { useMutation } from '@/lib/tabby/gql'
 import {
   contextInfoQuery,
   listThreadMessages,
-  listThreads
+  listThreads,
+  setThreadPersistedMutation
 } from '@/lib/tabby/query'
 import {
   AttachmentCodeItem,
@@ -949,12 +950,6 @@ export function Search() {
   )
 }
 
-const setThreadPersistedMutation = graphql(/* GraphQL */ `
-  mutation SetThreadPersisted($threadId: ID!) {
-    setThreadPersisted(threadId: $threadId)
-  }
-`)
-
 const updateThreadMessageMutation = graphql(/* GraphQL */ `
   mutation UpdateThreadMessage($input: UpdateMessageInput!) {
     updateThreadMessage(input: $input)

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

@@ -1,18 +1,26 @@
-import React, { RefObject } from 'react'
+import React, { RefObject, useMemo } from 'react'
+import slugify from '@sindresorhus/slugify'
 import type { UseChatHelpers } from 'ai/react'
 import { AnimatePresence, motion } from 'framer-motion'
+import { compact } from 'lodash-es'
+import { toast } from 'sonner'
 import type { Context } from 'tabby-chat-panel'
 
+import { SLUG_TITLE_MAX_LENGTH } from '@/lib/constants'
+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'
 import { updateEnableActiveSelection } from '@/lib/stores/chat-actions'
 import { useChatStore } from '@/lib/stores/chat-store'
-import { cn } from '@/lib/utils'
+import { useMutation } from '@/lib/tabby/gql'
+import { setThreadPersistedMutation } from '@/lib/tabby/query'
+import { cn, getTitleFromMessages } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
   IconEye,
   IconEyeOff,
   IconRefresh,
   IconRemove,
+  IconShare,
   IconStop,
   IconTrash
 } from '@/components/ui/icons'
@@ -51,18 +59,57 @@ function ChatPanelRenderer(
 ) {
   const promptFormRef = React.useRef<PromptFormRef>(null)
   const {
+    threadId,
     container,
     onClearMessages,
     qaPairs,
     isLoading,
     relevantContext,
     removeRelevantContext,
-    activeSelection
+    activeSelection,
+    onOpenExternal
   } = React.useContext(ChatContext)
   const enableActiveSelection = useChatStore(
     state => state.enableActiveSelection
   )
 
+  const slugWithThreadId = useMemo(() => {
+    if (!threadId) return ''
+    const content = qaPairs[0]?.user.message
+    if (!content) return threadId
+
+    const title = getTitleFromMessages([], content, {
+      maxLength: SLUG_TITLE_MAX_LENGTH
+    })
+    const slug = slugify(title)
+    const slugWithThreadId = compact([slug, threadId]).join('-')
+    return slugWithThreadId
+  }, [qaPairs[0]?.user.message, threadId])
+
+  const { isCopied, copyToClipboard } = useCopyToClipboard({
+    timeout: 2000
+  })
+
+  const setThreadPersisted = useMutation(setThreadPersistedMutation, {
+    onError(err) {
+      toast.error(err.message)
+    }
+  })
+
+  const handleShareThread = async () => {
+    if (!threadId) return
+
+    const result = await setThreadPersisted({ threadId })
+    if (!result?.data?.setThreadPersisted) return
+
+    let url = new URL(window.location.origin)
+    url.pathname = `/search/${slugWithThreadId}`
+
+    if (onOpenExternal) {
+      await onOpenExternal(url.toString())
+    }
+  }
+
   React.useImperativeHandle(
     ref,
     () => {
@@ -91,14 +138,26 @@ function ChatPanelRenderer(
             </Button>
           ) : (
             qaPairs?.length > 0 && (
-              <Button
-                variant="outline"
-                onClick={() => reload()}
-                className="bg-background"
-              >
-                <IconRefresh className="mr-2" />
-                Regenerate response
-              </Button>
+              <>
+                <Button
+                  variant="outline"
+                  onClick={() => reload()}
+                  className="bg-background"
+                >
+                  <IconRefresh className="mr-2" />
+                  Regenerate
+                </Button>
+                {!!onOpenExternal && (
+                  <Button
+                    variant="outline"
+                    className="bg-background"
+                    onClick={handleShareThread}
+                  >
+                    <IconShare className="mr-2" />
+                    Share
+                  </Button>
+                )}
+              </>
             )
           )}
           {qaPairs?.length > 0 && (

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

@@ -32,6 +32,7 @@ import { EmptyScreen } from './empty-screen'
 import { QuestionAnswerList } from './question-answer'
 
 type ChatContextValue = {
+  threadId: string | undefined
   isLoading: boolean
   qaPairs: QuestionAnswerPair[]
   handleMessageAction: (
@@ -50,6 +51,7 @@ type ChatContextValue = {
   removeRelevantContext: (index: number) => void
   chatInputRef: RefObject<HTMLTextAreaElement>
   supportsOnApplyInEditorV2: boolean
+  onOpenExternal?: (url: string) => Promise<boolean | undefined>
 }
 
 export const ChatContext = React.createContext<ChatContextValue>(
@@ -85,6 +87,7 @@ interface ChatProps extends React.ComponentProps<'div'> {
     | ((content: string, opts?: { languageId: string; smart: boolean }) => void)
   chatInputRef: RefObject<HTMLTextAreaElement>
   supportsOnApplyInEditorV2: boolean
+  onOpenExternal?: (url: string) => Promise<boolean | undefined>
 }
 
 function ChatRenderer(
@@ -105,7 +108,8 @@ function ChatRenderer(
     onSubmitMessage,
     onApplyInEditor,
     chatInputRef,
-    supportsOnApplyInEditorV2
+    supportsOnApplyInEditorV2,
+    onOpenExternal
   }: ChatProps,
   ref: React.ForwardedRef<ChatRef>
 ) {
@@ -521,6 +525,7 @@ function ChatRenderer(
   return (
     <ChatContext.Provider
       value={{
+        threadId,
         isLoading,
         qaPairs,
         onNavigateToContext,
@@ -533,7 +538,8 @@ function ChatRenderer(
         removeRelevantContext,
         chatInputRef,
         activeSelection,
-        supportsOnApplyInEditorV2
+        supportsOnApplyInEditorV2,
+        onOpenExternal
       }}
     >
       <div className="flex justify-center overflow-x-hidden">

ee/tabby-ui/lib/tabby/query.ts

@@ -445,3 +445,9 @@ export const listThreadMessages = graphql(/* GraphQL */ `
     }
   }
 `)
+
+export const setThreadPersistedMutation = graphql(/* GraphQL */ `
+  mutation SetThreadPersisted($threadId: ID!) {
+    setThreadPersisted(threadId: $threadId)
+  }
+`)