Merge branch 'main' into release-intellij-1.9

clients/intellij/src/main/kotlin/com/tabbyml/intellijtabby/chat/ChatBrowser.kt

@@ -226,7 +226,8 @@ class ChatBrowser(private val project: Project) : JBCefBrowser(
       ?: project.guessProjectDir()?.url?.let { project.findVirtualFile(it.appendUrlPathSegments(fileContext.filepath)) }
       ?: return
     invokeLater {
-      val descriptor = OpenFileDescriptor(project, virtualFile, fileContext.range.start, 0)
+      val lineNumber = (fileContext.range.start - 1).coerceAtLeast(0)
+      val descriptor = OpenFileDescriptor(project, virtualFile, lineNumber, 0)
       FileEditorManager.getInstance(project).openTextEditor(descriptor, true)
     }
   }

clients/tabby-chat-panel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tabby-chat-panel",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "keywords": [],
   "sideEffects": false,
   "exports": {
@@ -44,8 +44,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@quilted/threads": "^2.2.0",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "tabby-threads": "workspace:*"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.16.0",

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

@@ -1,4 +1,4 @@
-import { createThreadFromIframe, createThreadFromInsideIframe } from '@quilted/threads'
+import { createThreadFromIframe, createThreadFromInsideIframe } from 'tabby-threads'
 import { version } from '../package.json'
 
 export const TABBY_CHAT_PANEL_API_VERSION: string = version
@@ -54,7 +54,7 @@ export interface ServerApi {
   updateActiveSelection: (context: Context | null) => void
 }
 
-export interface ClientApi {
+export interface ClientApiMethods {
   navigate: (context: Context, opts?: NavigateOpts) => void
   refresh: () => Promise<void>
 
@@ -69,6 +69,13 @@ export interface ClientApi {
   onCopy: (content: string) => void
 
   onKeyboardEvent: (type: 'keydown' | 'keyup' | 'keypress', event: KeyboardEventInit) => void
+
+}
+
+export interface ClientApi extends ClientApiMethods {
+  // this is inner function cover by tabby-threads
+  // the function doesn't need to expose to client but can call by client
+  hasCapability: (method: keyof ClientApiMethods) => Promise<boolean>
 }
 
 export interface ChatMessage {
@@ -84,7 +91,7 @@ export interface ChatMessage {
   activeContext?: Context
 }
 
-export function createClient(target: HTMLIFrameElement, api: ClientApi): ServerApi {
+export function createClient(target: HTMLIFrameElement, api: ClientApiMethods): ServerApi {
   return createThreadFromIframe(target, {
     expose: {
       navigate: api.navigate,

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

@@ -1,10 +1,10 @@
 import type { RefObject } from 'react'
 import { useEffect, useState } from 'react'
 
-import type { ClientApi, ServerApi } from './index'
+import type { ClientApi, ClientApiMethods, ServerApi } from './index'
 import { createClient, createServer } from './index'
 
-function useClient(iframeRef: RefObject<HTMLIFrameElement>, api: ClientApi) {
+function useClient(iframeRef: RefObject<HTMLIFrameElement>, api: ClientApiMethods) {
   const [client, setClient] = useState<ServerApi | null>(null)
   let isCreated = false
 

clients/vscode/package.json

@@ -459,7 +459,7 @@
     "publish-prerelease": "pnpm run vscode:publish-prerelease && pnpm run ovsx:publish-prerelease"
   },
   "devDependencies": {
-    "@quilted/threads": "^2.2.0",
+    "tabby-threads": "workspace:*",
     "@types/deep-equal": "^1.0.4",
     "@types/diff": "^5.2.1",
     "@types/fs-extra": "^11.0.1",

clients/vscode/src/chat/chatPanel.ts

@@ -1,5 +1,5 @@
-import { createThread, type ThreadOptions } from "@quilted/threads";
-import type { ServerApi, ClientApi } from "tabby-chat-panel";
+import { createThread, type ThreadOptions } from "tabby-threads";
+import type { ServerApi, ClientApiMethods } from "tabby-chat-panel";
 import { Webview } from "vscode";
 
 export function createThreadFromWebview<Self = Record<string, never>, Target = Record<string, never>>(
@@ -22,7 +22,7 @@ export function createThreadFromWebview<Self = Record<string, never>, Target = R
   );
 }
 
-export function createClient(webview: Webview, api: ClientApi): ServerApi {
+export function createClient(webview: Webview, api: ClientApiMethods): ServerApi {
   return createThreadFromWebview(webview, {
     expose: {
       navigate: api.navigate,

ee/tabby-ui/app/(home)/components/animation-wrapper.tsx

@@ -3,7 +3,7 @@ import { motion, Transition, UseInViewOptions, Variants } from 'framer-motion'
 
 const cardTransition: Transition = {
   ease: 'easeOut',
-  duration: 0.2
+  duration: 0.1
 }
 
 function getCardVariants(delay?: number): Variants {
@@ -18,7 +18,7 @@ function getCardVariants(delay?: number): Variants {
       y: 0,
       transition: {
         ...cardTransition,
-        delay: 0.3 + (delay || 0)
+        delay: 0.2 + (delay || 0)
       }
     }
   }

ee/tabby-ui/app/(home)/components/completion-charts.tsx

@@ -158,7 +158,7 @@ export function CompletionCharts({
     <div className="flex w-full flex-col items-center justify-center space-y-5 md:flex-row md:space-x-4 md:space-y-0 xl:justify-start">
       <AnimationWrapper
         viewport={{
-          margin: '-140px 0px 0px 0px'
+          amount: 0.1
         }}
         delay={0.15}
         className="flex-1 self-stretch"
@@ -199,7 +199,7 @@ export function CompletionCharts({
 
       <AnimationWrapper
         viewport={{
-          margin: '-140px 0px 0px 0px'
+          amount: 0.1
         }}
         delay={0.2}
         className="flex-1 self-stretch"
@@ -250,7 +250,7 @@ export function CompletionCharts({
       </AnimationWrapper>
       <AnimationWrapper
         viewport={{
-          margin: '-140px 0px 0px 0px'
+          amount: 0.1
         }}
         delay={0.25}
         className="flex-1 self-stretch"

ee/tabby-ui/app/(home)/components/stats.tsx

@@ -170,7 +170,7 @@ export default function Stats() {
     <>
       <AnimationWrapper
         viewport={{
-          margin: '-140px 0px 0px 0px'
+          amount: 0.1
         }}
         style={{ width: '100%' }}
         delay={0.1}

ee/tabby-ui/app/(home)/components/thread-feeds.tsx

@@ -16,11 +16,14 @@ import {
 } from '@/lib/stores/answer-engine-store'
 import { contextInfoQuery, listThreadMessages } from '@/lib/tabby/query'
 import { cn, getTitleFromMessages } from '@/lib/utils'
+import { getPaginationItem } from '@/lib/utils/pagination'
 import { IconFiles, IconSpinner } from '@/components/ui/icons'
 import {
   Pagination,
   PaginationContent,
+  PaginationEllipsis,
   PaginationItem,
+  PaginationLink,
   PaginationNext,
   PaginationPrevious
 } from '@/components/ui/pagination'
@@ -30,8 +33,6 @@ import LoadingWrapper from '@/components/loading-wrapper'
 import { Mention } from '@/components/mention-tag'
 import { UserAvatar } from '@/components/user-avatar'
 
-import { AnimationWrapper } from './animation-wrapper'
-
 interface ThreadFeedsProps {
   className?: string
   onNavigateToThread: (params: { pageNo: number }) => void
@@ -49,7 +50,7 @@ export const ThreadFeedsContext = createContext<ThreadFeedsContextValue>(
   {} as ThreadFeedsContextValue
 )
 
-const PAGE_SIZE = 8
+const PAGE_SIZE = 25
 
 const listThreads = graphql(/* GraphQL */ `
   query ListThreads(
@@ -112,17 +113,27 @@ export function ThreadFeeds({
   const pageCount = Math.ceil((threadCount || 0) / PAGE_SIZE)
   const showPagination =
     pageCount > 1 || (pageCount === 1 && pageInfo?.hasPreviousPage)
+  const paginationPages = getPaginationItem(threadCount || 0, page, PAGE_SIZE)
 
   // threads for current page
   const threads = useMemo(() => {
     const _threads = data?.threads?.edges
     if (!_threads?.length) return []
 
+    if (fetching && page >= 2) {
+      // if fetching next page, keep previous page
+      const previousPage = _threads
+        .slice()
+        .reverse()
+        .slice((page - 2) * PAGE_SIZE, (page - 1) * PAGE_SIZE)
+      return previousPage || []
+    }
+
     return _threads
       .slice()
       .reverse()
       .slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
-  }, [data?.threads?.edges, page])
+  }, [data?.threads?.edges, page, fetching])
 
   const loadMore = () => {
     if (threads.length) {
@@ -155,35 +166,36 @@ export function ThreadFeeds({
       }}
     >
       <div className={cn('w-full', className)}>
-        <AnimationWrapper style={{ width: '100%' }} viewport={{ once: true }}>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{
+            once: true
+          }}
+          transition={{
+            ease: 'easeOut',
+            delay: 0.3
+          }}
+        >
           <LoadingWrapper
             loading={fetching || fetchingUsers}
             fallback={
               <div className="flex justify-center">
                 <IconSpinner className="h-8 w-8" />
               </div>
             }
+            delay={800}
           >
             <div className="mb-2.5 w-full text-lg font-semibold">
               Recent Activities
             </div>
             <Separator className="mb-4 w-full" />
-            <div className="relative flex min-h-[43rem] flex-col gap-3 text-sm">
+            <div className="relative flex flex-col gap-3 text-sm">
               {threads.map(t => {
                 return <ThreadItem data={t} key={t.node.id} />
               })}
-              {!threads.length && fetching && (
-                <div className="flex h-[40.25rem] items-center justify-center">
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{
-                      delay: 0.3
-                    }}
-                  >
-                    <IconSpinner className="h-8 w-8" />
-                  </motion.div>
-                </div>
+              {fetching && (
+                <div className="absolute inset-0 bottom-10 z-10 flex items-center justify-center backdrop-blur-sm" />
               )}
               {showPagination && (
                 <Pagination className={cn('flex items-center justify-end')}>
@@ -202,6 +214,29 @@ export function ThreadFeeds({
                         }}
                       />
                     </PaginationItem>
+                    {paginationPages.map((item, index) => {
+                      return (
+                        <PaginationItem
+                          key={`${item}-${index}`}
+                          onClick={() => {
+                            if (typeof item === 'number') {
+                              setPage(item)
+                            }
+                          }}
+                        >
+                          {typeof item === 'number' ? (
+                            <PaginationLink
+                              className="cursor-pointer"
+                              isActive={item === page}
+                            >
+                              {item}
+                            </PaginationLink>
+                          ) : (
+                            <PaginationEllipsis />
+                          )}
+                        </PaginationItem>
+                      )
+                    })}
                     <PaginationItem>
                       <PaginationNext
                         disabled={isNextPageDisabled}
@@ -221,7 +256,7 @@ export function ThreadFeeds({
               )}
             </div>
           </LoadingWrapper>
-        </AnimationWrapper>
+        </motion.div>
       </div>
     </ThreadFeedsContext.Provider>
   )

ee/tabby-ui/app/(home)/page.tsx

@@ -37,6 +37,8 @@ import { AnimationWrapper } from './components/animation-wrapper'
 import Stats from './components/stats'
 import { ThreadFeeds } from './components/thread-feeds'
 
+// const ThreadFeeds = lazy(() => import('./components/thread-feeds').then(module => ({ default: module.ThreadFeeds })))
+
 function MainPanel() {
   const resettingScroller = useRef(false)
   const scroller = useRef<HTMLDivElement>(null)
@@ -122,7 +124,7 @@ function MainPanel() {
           <div className="mx-auto flex w-full flex-col items-center gap-6 px-10 lg:-mt-[2vh] lg:max-w-4xl lg:px-0">
             <AnimationWrapper
               viewport={{
-                margin: '-70px 0px 0px 0px'
+                amount: 0.1
               }}
             >
               <Image
@@ -137,7 +139,9 @@ function MainPanel() {
             </AnimationWrapper>
             {isChatEnabled && (
               <AnimationWrapper
-                viewport={{ margin: '-140px 0px 0px 0px' }}
+                viewport={{
+                  amount: 0.1
+                }}
                 style={{ width: '100%' }}
                 delay={0.05}
               >

ee/tabby-ui/components/quick-nav-pagination.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
+import { getPaginationItem } from '@/lib/utils/pagination'
 import {
   Pagination,
   PaginationContent,
@@ -30,45 +31,8 @@ interface QuickNavPaginationProps {
   onChange?: (page: number, pageSize: number) => void
 }
 
-const dotts = '...'
-
 const PAGE_SIZE_OPTIONS = ['5', '10', '20', '30', '50']
 
-const getPages = (length: number, inc: number = 1) =>
-  Array.from({ length }, (_, i) => i + inc)
-
-// Reference: https://github.com/vercel/examples/blob/main/solutions/pagination-with-ssg/hooks/usePagination.ts
-const getPaginationItem = (
-  totalItems: number,
-  currentPage: number,
-  itemsPerPage: number
-) => {
-  const totalPages = Math.ceil(totalItems / itemsPerPage)
-
-  // -> 1 2 3 4 5
-  if (totalPages <= 5) {
-    return getPages(totalPages)
-  }
-  // -> 1 2 3 4 ... 10
-  if (currentPage <= 3) {
-    return [1, 2, 3, 4, dotts, totalPages]
-  }
-  // -> 1 ... 4 5 6 ... 10
-  if (currentPage < totalPages - 2) {
-    return [
-      1,
-      dotts,
-      currentPage - 1,
-      currentPage,
-      currentPage + 1,
-      dotts,
-      totalPages
-    ]
-  }
-  // -> 1 ... 7 8 9 10
-  return [1, dotts, ...getPages(4, totalPages - 3)]
-}
-
 export const QuickNavPagination: React.FC<QuickNavPaginationProps> = ({
   className,
   page: propsPage,