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

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

@@ -69,6 +69,8 @@ export interface ClientApi {
   onCopy: (content: string) => void
 
   onKeyboardEvent: (type: 'keydown' | 'keyup' | 'keypress', event: KeyboardEventInit) => void
+
+  onOpenExternal: (url: string) => Promise<boolean>
 }
 
 export interface ChatMessage {
@@ -94,6 +96,7 @@ export function createClient(target: HTMLIFrameElement, api: ClientApi): ServerA
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
+      onOpenExternal: api.onOpenExternal,
     },
   })
 }

clients/vscode/src/chat/WebviewHelper.ts

@@ -548,6 +548,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

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

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

@@ -1178,7 +1178,7 @@ impl Mutation {
 
     /// 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'
@@ -263,6 +263,23 @@ export default function ChatPage() {
     server?.navigate(context, opts)
   }
 
+  const onOpenExternal = useMemo(() => {
+    // FIXME check capability
+    const hasCapability = true
+    if (isInEditor && !hasCapability) {
+      return undefined
+    }
+
+    return async (url: string) => {
+      if (isInEditor) {
+        return server?.onOpenExternal(url)
+      } else {
+        const success = window.open(url, '_blank')
+        return !!success
+      }
+    }
+  }, [isInEditor, server])
+
   const refresh = async () => {
     setIsRefreshLoading(true)
     await server?.refresh()
@@ -370,6 +387,7 @@ export default function ChatPage() {
         onCopyContent={isInEditor && server?.onCopy}
         onSubmitMessage={isInEditor && server?.onSubmitMessage}
         onApplyInEditor={isInEditor && server?.onApplyInEditor}
+        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,
@@ -924,12 +925,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 = {
   activeSelection: Context | null
   removeRelevantContext: (index: number) => void
   chatInputRef: RefObject<HTMLTextAreaElement>
+  onOpenExternal?: (url: string) => Promise<boolean | undefined>
 }
 
 export const ChatContext = React.createContext<ChatContextValue>(
@@ -85,6 +87,7 @@ interface ChatProps extends React.ComponentProps<'div'> {
     opts?: { languageId: string; smart: boolean }
   ) => void
   chatInputRef: RefObject<HTMLTextAreaElement>
+  onOpenExternal?: (url: string) => Promise<boolean | undefined>
 }
 
 function ChatRenderer(
@@ -104,6 +107,7 @@ function ChatRenderer(
     onCopyContent,
     onSubmitMessage,
     onApplyInEditor,
+    onOpenExternal,
     chatInputRef
   }: ChatProps,
   ref: React.ForwardedRef<ChatRef>
@@ -520,6 +524,7 @@ function ChatRenderer(
   return (
     <ChatContext.Provider
       value={{
+        threadId,
         isLoading,
         qaPairs,
         onNavigateToContext,
@@ -531,7 +536,8 @@ function ChatRenderer(
         relevantContext,
         removeRelevantContext,
         chatInputRef,
-        activeSelection
+        activeSelection,
+        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)
+  }
+`)