feat(ui): add new search page to support chat search functionality (#…

…2144) * feat(ui): searching function * wip * rendering * trigger request ux * copy and regenerate * experiment flag & textare height * [autofix.ci] apply automated fixes * update source & related ux * citation * update * update * update * cleaning fixme * update * update * update dialog component * update --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · Jun 7, 2024 · 042adfd · 042adfd
1 parent 676fc51
commit 042adfd
Show file tree

Hide file tree

Showing 17 changed files with 1,041 additions and 55 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx b/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx
@@ -1,11 +1,15 @@
 'use client'
 
-import { useEnableCodeBrowserQuickActionBar } from '@/lib/experiment-flags'
+import {
+  useEnableCodeBrowserQuickActionBar,
+  useEnableSearch
+} from '@/lib/experiment-flags'
 import { Switch } from '@/components/ui/switch'
 
 export default function FeatureList() {
   const [quickActionBar, toggleQuickActionBar] =
     useEnableCodeBrowserQuickActionBar()
+  const [search, toggleSearch] = useEnableSearch()
   return (
     <>
       {!quickActionBar.loading && (
@@ -24,6 +28,17 @@ export default function FeatureList() {
           />
         </div>
       )}
+      {!search.loading && (
+        <div className="flex items-center space-x-4 rounded-md border p-4">
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">{search.title}</p>
+            <p className="text-sm text-muted-foreground">
+              {search.description}
+            </p>
+          </div>
+          <Switch checked={search.value} onCheckedChange={toggleSearch} />
+        </div>
+      )}
     </>
   )
 }
diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
@@ -1,10 +1,14 @@
 'use client'
 
 import { useState } from 'react'
+import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
+import logoUrl from '@/assets/tabby.png'
 import { noop } from 'lodash-es'
 
+import { SESSION_STORAGE_KEY } from '@/lib/constants'
+import { useEnableSearch } from '@/lib/experiment-flags'
 import { graphql } from '@/lib/gql/generates'
 import { useHealth } from '@/lib/hooks/use-health'
 import { useMe } from '@/lib/hooks/use-me'
@@ -14,6 +18,7 @@ import { useSignOut } from '@/lib/tabby/auth'
 import { useMutation } from '@/lib/tabby/gql'
 import { Button } from '@/components/ui/button'
 import { CardContent, CardFooter } from '@/components/ui/card'
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import {
   IconChat,
   IconCode,
@@ -22,6 +27,7 @@ import {
   IconLogout,
   IconMail,
   IconRotate,
+  IconSearch,
   IconSpinner,
   IconUser,
   IconVSCode
@@ -36,6 +42,7 @@ import {
 } from '@/components/ui/tooltip'
 import { CopyButton } from '@/components/copy-button'
 import SlackDialog from '@/components/slack-dialog'
+import TextAreaSearch from '@/components/textarea-search'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { UserAvatar } from '@/components/user-avatar'
 
@@ -154,11 +161,13 @@ function IDELink({
 }
 
 function MainPanel() {
+  const [searchFlag] = useEnableSearch()
   const { data: healthInfo } = useHealth()
   const [{ data }] = useMe()
   const isChatEnabled = useIsChatEnabled()
   const signOut = useSignOut()
   const [signOutLoading, setSignOutLoading] = useState(false)
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
 
   if (!healthInfo || !data?.me) return <></>
 
@@ -168,8 +177,15 @@ function MainPanel() {
     await signOut()
     setSignOutLoading(false)
   }
+
+  const onSearch = (question: string) => {
+    sessionStorage.setItem(SESSION_STORAGE_KEY.SEARCH_INITIAL_MSG, question)
+    window.open('/search')
+    setIsSearchOpen(false)
+  }
+
   return (
-    <div className="flex flex-1 justify-center lg:mt-[10vh]">
+    <div className="lg:mt-[10vh]">
       <div className="mx-auto flex w-screen flex-col px-5 py-20 lg:w-auto lg:flex-row lg:justify-center lg:gap-x-10 lg:px-0 lg:py-10">
         <div className="relative mb-5 flex flex-col rounded-lg pb-4 lg:mb-0 lg:mt-12 lg:w-64">
           <UserAvatar className="h-20 w-20 border-4 border-background" />
@@ -210,6 +226,29 @@ function MainPanel() {
             <MenuLink href="/files" icon={<IconCode />} target="_blank">
               Code Browser
             </MenuLink>
+            {searchFlag.value && isChatEnabled && (
+              <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
+                <DialogTrigger>
+                  <div className="flex items-center gap-2">
+                    <div className="text-muted-foreground">
+                      <IconSearch />
+                    </div>
+                    <div className="flex cursor-pointer items-center gap-1 text-sm transition-opacity hover:opacity-50">
+                      Search
+                    </div>
+                  </div>
+                </DialogTrigger>
+                <DialogContent className="dialog-without-close-btn -mt-48 border-none bg-transparent shadow-none sm:max-w-xl">
+                  <div className="flex flex-col items-center">
+                    <Image src={logoUrl} alt="logo" width={42} />
+                    <h4 className="mb-6 scroll-m-20 text-xl font-semibold tracking-tight text-secondary-foreground">
+                      The Private Search Assistant
+                    </h4>
+                    <TextAreaSearch onSearch={onSearch} />
+                  </div>
+                </DialogContent>
+              </Dialog>
+            )}
             <MenuLink icon={<IconLogout />} onClick={handleSignOut}>
               <span>Sign out</span>
               {signOutLoading && <IconSpinner className="ml-1" />}

diff --git a/ee/tabby-ui/app/globals.css b/ee/tabby-ui/app/globals.css
@@ -91,3 +91,7 @@
 .prose-full-width {
   max-width: none !important;
 }
+
+.dialog-without-close-btn > button {
+  display: none;
+}
diff --git a/ee/tabby-ui/app/search/components/search.css b/ee/tabby-ui/app/search/components/search.css
@@ -0,0 +1,18 @@
+@keyframes sparkle {
+  0% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scaleX(-1);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.sparkle-animation {
+  animation: sparkle 2s infinite;
+}