From dfb4495e4de5b2a9b670ff2534e2e2d33ede7365 Mon Sep 17 00:00:00 2001
From: wwayne <wayne.wang0821@gmail.com>
Date: Thu, 6 Jun 2024 16:40:58 +0800
Subject: [PATCH] update

---
 ee/tabby-ui/app/(home)/page.tsx              |  37 ++++
 ee/tabby-ui/app/globals.css                  |   4 +
 ee/tabby-ui/app/search/components/search.tsx | 214 +++++++------------
 ee/tabby-ui/components/textarea-search.tsx   |  81 +++++++
 ee/tabby-ui/components/ui/icons.tsx          |  11 +-
 ee/tabby-ui/lib/constants/index.ts           |   3 +-
 6 files changed, 215 insertions(+), 135 deletions(-)
 create mode 100644 ee/tabby-ui/components/textarea-search.tsx

diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
index 44bd48d79e94..1881aa6e4daa 100644
--- 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,6 +161,7 @@ function IDELink({
 }
 
 function MainPanel() {
+  const [searchFlag] = useEnableSearch()
   const { data: healthInfo } = useHealth()
   const [{ data }] = useMe()
   const isChatEnabled = useIsChatEnabled()
@@ -168,6 +176,12 @@ function MainPanel() {
     await signOut()
     setSignOutLoading(false)
   }
+
+  const onSearch = (question: string) => {
+    sessionStorage.setItem(SESSION_STORAGE_KEY.SEARCH_INITIAL_MSG, question)
+    window.open('/search')
+  }
+
   return (
     <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">
@@ -210,6 +224,29 @@ function MainPanel() {
             <MenuLink href="/files" icon={<IconCode />} target="_blank">
               Code Browser
             </MenuLink>
+            {searchFlag.value && isChatEnabled && (
+              <Dialog>
+                <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
index a8bfbe91edde..bf209eb9a159 100644
--- 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.tsx b/ee/tabby-ui/app/search/components/search.tsx
index 77f278f27cf0..b0d222a2c089 100644
--- a/ee/tabby-ui/app/search/components/search.tsx
+++ b/ee/tabby-ui/app/search/components/search.tsx
@@ -5,11 +5,12 @@ import Image from 'next/image'
 import logoUrl from '@/assets/tabby.png'
 import { Message } from 'ai'
 import { nanoid } from 'nanoid'
-import TextareaAutosize from 'react-textarea-autosize'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
+import { SESSION_STORAGE_KEY } from '@/lib/constants'
 import { useEnableSearch } from '@/lib/experiment-flags'
+import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
 import fetcher from '@/lib/tabby/fetcher'
 import { AnswerRequest } from '@/lib/types'
 import { cn } from '@/lib/utils'
@@ -21,7 +22,6 @@ import {
   HoverCardTrigger
 } from '@/components/ui/hover-card'
 import {
-  IconArrowRight,
   IconBlocks,
   IconChevronRight,
   IconLayers,
@@ -37,7 +37,6 @@ import {
   SheetContent,
   SheetDescription,
   SheetHeader,
-  SheetTitle,
   SheetTrigger
 } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -46,6 +45,7 @@ import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
 import { useTabbyAnswer } from '@/components/chat/use-tabby-answer'
 import { CopyButton } from '@/components/copy-button'
 import { MemoizedReactMarkdown } from '@/components/markdown'
+import TextAreaSearch from '@/components/textarea-search'
 
 import './search.css'
 
@@ -88,6 +88,7 @@ const tabbyFetcher = ((url: string, init?: RequestInit) => {
 }) as typeof fetch
 
 export function Search() {
+  const isChatEnabled = useIsChatEnabled()
   const [searchFlag] = useEnableSearch()
   const [conversation, setConversation] = useState<ConversationMessage[]>([])
 
@@ -101,6 +102,16 @@ export function Search() {
     fetcher: tabbyFetcher
   })
 
+  useEffect(() => {
+    const initialQuestion = sessionStorage.getItem(
+      SESSION_STORAGE_KEY.SEARCH_INITIAL_MSG
+    )
+    if (initialQuestion) {
+      onSubmitSearch(initialQuestion)
+      sessionStorage.removeItem(SESSION_STORAGE_KEY.SEARCH_INITIAL_MSG)
+    }
+  }, [])
+
   useEffect(() => {
     if (title) return
     document.title = title
@@ -211,7 +222,7 @@ export function Search() {
     triggerRequest(answerRequest)
   }
 
-  if (!searchFlag.value) {
+  if (!searchFlag.value || !isChatEnabled) {
     return <></>
   }
 
@@ -273,27 +284,22 @@ export function Search() {
           className={cn(
             'fixed left-1/2 flex flex-col items-center transition-all md:-ml-[24rem] md:w-[48rem] md:p-6',
             {
-              'bottom-2/3': noConversation,
+              'bottom-1/2 -mt-48': noConversation,
               'bottom-0 min-h-[6rem]': !noConversation
             }
           )}
         >
           {noConversation && (
             <>
-              <Image
-                src={logoUrl}
-                alt="logo"
-                width={42}
-                className="dark:hidden"
-              />
+              <Image src={logoUrl} alt="logo" width={42} />
               <h4 className="mb-6 scroll-m-20 text-xl font-semibold tracking-tight text-secondary-foreground">
-                Your private search engine (TODO)
+                The Private Search Assistant
               </h4>
             </>
           )}
           {!isLoading && (
             <div className="relative z-20 w-full">
-              <SearchArea />
+              <TextAreaSearch onSearch={onSubmitSearch} />
             </div>
           )}
           <Button
@@ -320,73 +326,6 @@ export function Search() {
   )
 }
 
-function SearchArea() {
-  const { onSubmitSearch } = useContext(SearchContext)
-  const [isShow, setIsShow] = useState(false)
-  const [isFocus, setIsFocus] = useState(false)
-  const [value, setValue] = useState('short introduce of transformer in llm')
-
-  useEffect(() => {
-    // Ensure the textarea height remains consistent during rendering
-    setIsShow(true)
-  }, [])
-
-  const onSearchKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) return e.preventDefault()
-  }
-
-  const onSearchKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      return search()
-    }
-  }
-
-  const search = () => {
-    if (!value) return
-    onSubmitSearch(value)
-    setValue('')
-  }
-
-  return (
-    <div
-      className={cn(
-        'flex w-full items-center rounded-lg border border-muted-foreground bg-background transition-all hover:border-muted-foreground/60',
-        {
-          '!border-primary': isFocus
-        }
-      )}
-    >
-      <TextareaAutosize
-        className={cn(
-          'flex-1 resize-none rounded-lg !border-none bg-transparent px-4 py-3 !shadow-none !outline-none !ring-0 !ring-offset-0',
-          {
-            '!h-[48px]': !isShow
-          }
-        )}
-        placeholder="Ask anything"
-        maxRows={5}
-        onKeyDown={onSearchKeyDown}
-        onKeyUp={onSearchKeyUp}
-        onFocus={() => setIsFocus(true)}
-        onBlur={() => setIsFocus(false)}
-        onChange={e => setValue(e.target.value)}
-        value={value}
-      />
-      <div
-        className={cn(
-          'mr-3 flex items-center rounded-lg bg-muted p-1 text-muted-foreground transition-all',
-          {
-            '!bg-primary !text-primary-foreground': value.length > 0
-          }
-        )}
-        onClick={search}
-      >
-        <IconArrowRight className="h-3.5 w-3.5" />
-      </div>
-    </div>
-  )
-}
-
 function AnswerBlock({
   question,
   answer,
@@ -444,7 +383,7 @@ function AnswerBlock({
                             const { hostname } = new URL(source.link)
                             return (
                               <SiteFavicon
-                                key={idx}
+                                key={hostname + idx}
                                 hostname={hostname}
                                 className="mr-1"
                               />
@@ -455,7 +394,6 @@ function AnswerBlock({
                   </SheetTrigger>
                   <SheetContent className="flex !max-w-3xl flex-col">
                     <SheetHeader>
-                      <SheetTitle>{question}</SheetTitle>
                       <SheetDescription>
                         {answer.relevant_documents.length} resources
                       </SheetDescription>
@@ -466,7 +404,7 @@ function AnswerBlock({
                           <SourceBlock
                             source={source}
                             index={index + 1}
-                            key={index}
+                            key={source.link + index}
                           />
                         ))}
                       </div>
@@ -612,58 +550,68 @@ function MessageMarkdown({
           }
 
           if (children.length) {
-            const content = children as string[]
-            const contentStr = content.join('')
-            const citationMatchRegex = /\[\[?citation:\s*\d+\]?\]/g
-            const textList = contentStr.split(citationMatchRegex)
-            const citationList = contentStr.match(citationMatchRegex)
             return (
-              <div className="mb-2 leading-relaxed last:mb-0">
-                {textList.map((text, index) => {
-                  const citation = citationList?.[index]
-                  const citationNumberMatch = citation?.match(/\d+/)
-                  const citationIndex = citationNumberMatch
-                    ? parseInt(citationNumberMatch[0], 10)
-                    : null
-                  const source =
-                    citationIndex !== null ? sources?.[citationIndex - 1] : null
-                  const sourceUrl = source ? new URL(source.link) : null
-                  return (
-                    <span key={index}>
-                      {text && <span>{text}</span>}
-                      {source && (
-                        <HoverCard>
-                          <HoverCardTrigger>
-                            <span
-                              className="relative -top-2 inline-block h-4 w-4 cursor-pointer rounded-full bg-muted text-center text-xs"
-                              onClick={() => window.open(source.link)}
-                            >
-                              {citationIndex}
+              <div className="mb-2 inline-block leading-relaxed last:mb-0">
+                {children.map((childrenItem, index) => {
+                  if (typeof childrenItem === 'string') {
+                    const citationMatchRegex = /\[\[?citation:\s*\d+\]?\]/g
+                    const textList = childrenItem.split(citationMatchRegex)
+                    const citationList = childrenItem.match(citationMatchRegex)
+                    return (
+                      <span key={index}>
+                        {textList.map((text, index) => {
+                          const citation = citationList?.[index]
+                          const citationNumberMatch = citation?.match(/\d+/)
+                          const citationIndex = citationNumberMatch
+                            ? parseInt(citationNumberMatch[0], 10)
+                            : null
+                          const source =
+                            citationIndex !== null
+                              ? sources?.[citationIndex - 1]
+                              : null
+                          const sourceUrl = source ? new URL(source.link) : null
+                          return (
+                            <span key={index}>
+                              {text && <span>{text}</span>}
+                              {source && (
+                                <HoverCard>
+                                  <HoverCardTrigger>
+                                    <span
+                                      className="relative -top-2 inline-block h-4 w-4 cursor-pointer rounded-full bg-muted text-center text-xs"
+                                      onClick={() => window.open(source.link)}
+                                    >
+                                      {citationIndex}
+                                    </span>
+                                  </HoverCardTrigger>
+                                  <HoverCardContent className="w-96 text-sm">
+                                    <div className="flex w-full flex-col gap-y-1">
+                                      <div className="m-0 flex items-center space-x-1 text-xs leading-none text-muted-foreground">
+                                        <SiteFavicon
+                                          hostname={sourceUrl!.hostname}
+                                          className="m-0 mr-1 leading-none"
+                                        />
+                                        <p className="m-0 leading-none">
+                                          {sourceUrl!.hostname}
+                                        </p>
+                                      </div>
+                                      <p className="m-0 font-bold leading-none">
+                                        {source.title}
+                                      </p>
+                                      <p className="m-0 leading-none">
+                                        {source.snippet}
+                                      </p>
+                                    </div>
+                                  </HoverCardContent>
+                                </HoverCard>
+                              )}
                             </span>
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-96 text-sm">
-                            <div className="flex w-full flex-col gap-y-1">
-                              <div className="m-0 flex items-center space-x-1 text-xs leading-none text-muted-foreground">
-                                <SiteFavicon
-                                  hostname={sourceUrl!.hostname}
-                                  className="mr-1"
-                                />
-                                <p className="m-0 leading-none">
-                                  {sourceUrl!.hostname}
-                                </p>
-                              </div>
-                              <p className="m-0 font-bold leading-none">
-                                {source.title}
-                              </p>
-                              <p className="m-0 leading-none">
-                                {source.snippet}
-                              </p>
-                            </div>
-                          </HoverCardContent>
-                        </HoverCard>
-                      )}
-                    </span>
-                  )
+                          )
+                        })}
+                      </span>
+                    )
+                  }
+
+                  return <span key={index}>{childrenItem}</span>
                 })}
               </div>
             )
diff --git a/ee/tabby-ui/components/textarea-search.tsx b/ee/tabby-ui/components/textarea-search.tsx
new file mode 100644
index 000000000000..c172512f75d4
--- /dev/null
+++ b/ee/tabby-ui/components/textarea-search.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
+
+import { cn } from '@/lib/utils'
+
+import { IconArrowRight } from './ui/icons'
+
+export default function TextAreaSearch({
+  onSearch,
+  className
+}: {
+  onSearch: (value: string) => void
+  className?: string
+}) {
+  const [isShow, setIsShow] = useState(false)
+  const [isFocus, setIsFocus] = useState(false)
+  const [value, setValue] = useState('')
+
+  useEffect(() => {
+    // Ensure the textarea height remains consistent during rendering
+    setIsShow(true)
+  }, [])
+
+  const onSearchKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) return e.preventDefault()
+  }
+
+  const onSearchKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      return search()
+    }
+  }
+
+  const search = () => {
+    if (!value) return
+    onSearch(value)
+    setValue('')
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex w-full items-center rounded-lg border border-muted-foreground bg-background transition-all hover:border-muted-foreground/60',
+        {
+          '!border-primary': isFocus
+        },
+        className
+      )}
+    >
+      <TextareaAutosize
+        className={cn(
+          'flex-1 resize-none rounded-lg !border-none bg-transparent px-4 py-3 !shadow-none !outline-none !ring-0 !ring-offset-0',
+          {
+            '!h-[48px]': !isShow
+          }
+        )}
+        placeholder="Ask anything"
+        maxRows={5}
+        onKeyDown={onSearchKeyDown}
+        onKeyUp={onSearchKeyUp}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={e => setValue(e.target.value)}
+        value={value}
+      />
+      <div
+        className={cn(
+          'mr-3 flex items-center rounded-lg bg-muted p-1 text-muted-foreground transition-all',
+          {
+            '!bg-primary !text-primary-foreground': value.length > 0
+          }
+        )}
+        onClick={search}
+      >
+        <IconArrowRight className="h-3.5 w-3.5" />
+      </div>
+    </div>
+  )
+}
diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
index 18ba0c88b665..96195dd7fd65 100644
--- a/ee/tabby-ui/components/ui/icons.tsx
+++ b/ee/tabby-ui/components/ui/icons.tsx
@@ -9,6 +9,7 @@ import {
   GitFork,
   Layers2,
   Mail,
+  Search,
   Sparkles,
   Star
 } from 'lucide-react'
@@ -1480,6 +1481,13 @@ function IconSparkles({
   return <Sparkles className={cn('h4 w-4', className)} {...props} />
 }
 
+function IconSearch({
+  className,
+  ...props
+}: React.ComponentProps<typeof Search>) {
+  return <Search className={cn('h4 w-4', className)} {...props} />
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1558,5 +1566,6 @@ export {
   IconVSCode,
   IconJetBrains,
   IconLayers,
-  IconSparkles
+  IconSparkles,
+  IconSearch
 }
diff --git a/ee/tabby-ui/lib/constants/index.ts b/ee/tabby-ui/lib/constants/index.ts
index 7806dd822185..e74797c71689 100644
--- a/ee/tabby-ui/lib/constants/index.ts
+++ b/ee/tabby-ui/lib/constants/index.ts
@@ -3,5 +3,6 @@ export const PLACEHOLDER_EMAIL_FORM = 'name@yourcompany.com'
 export const DEFAULT_PAGE_SIZE = 20
 
 export const SESSION_STORAGE_KEY = {
-  DEMO_AUTO_LOGIN: '_tabby_demo_autologin'
+  DEMO_AUTO_LOGIN: '_tabby_demo_autologin',
+  SEARCH_INITIAL_MSG: '_tabby_search_initial_msg'
 }