chore(ui): optimize answer page (#2410)

TabbyML · Jun 14, 2024 · 59c995d · 59c995d
1 parent 8cb326d
commit 59c995d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 30 deletions.
diff --git a/ee/tabby-ui/app/(home)/components/search.css b/ee/tabby-ui/app/(home)/components/search.css
@@ -1,19 +1,3 @@
-@keyframes sparkle {
-  0% {
-    transform: scaleX(1);
-  }
-  50% {
-    transform: scaleX(-1);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
-
-.sparkle-animation {
-  animation: sparkle 2s infinite;
-}
-
 .text-area-autosize::-webkit-scrollbar {
   display: none;
 }
diff --git a/ee/tabby-ui/app/(home)/components/search.tsx b/ee/tabby-ui/app/(home)/components/search.tsx
@@ -36,6 +36,7 @@ import {
   IconPlus,
   IconRefresh,
   IconSparkles,
+  IconSpinner,
   IconStop
 } from '@/components/ui/icons'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -378,6 +379,8 @@ function AnswerBlock({
     return `${content}\n\nCitations:\n${citations}`
   }
 
+  const IconAnswer = answer.isLoading ? IconSpinner : IconSparkles
+
   const totalHeightInRem = answer.relevant_documents
     ? Math.ceil(answer.relevant_documents.length / 4) *
         SOURCE_CARD_STYLE.expand +
@@ -429,9 +432,9 @@ function AnswerBlock({
       {/* Answer content */}
       <div>
         <div className="flex items-center gap-x-1.5">
-          <IconSparkles
+          <IconAnswer
             className={cn({
-              'sparkle-animation': answer.isLoading
+              'animate-spinner': answer.isLoading
             })}
           />
           <p className="text-sm font-bold leading-none">Answer</p>
@@ -525,16 +528,13 @@ function SourceCard({
           {source.snippet}
         </p>
       )}
-      <div className="flex items-center justify-between text-xs text-muted-foreground">
+      <div className="flex items-center text-xs text-muted-foreground">
         <div className="flex flex-1 items-center">
           <SiteFavicon hostname={hostname} />
-          <p className="ml-1 flex-1 overflow-hidden text-ellipsis">
+          <p className="ml-1 overflow-hidden text-ellipsis">
             {hostname.replace('www.', '').split('.')[0]}
           </p>
         </div>
-        <p className="h-4 w-4 rounded bg-primary/50 text-center text-primary-foreground">
-          {index}
-        </p>
       </div>
     </div>
   )

diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
@@ -4,8 +4,8 @@ import { useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import logoDarkUrl from '@/assets/logo-dark.png'
+import tabbyUrl from '@/assets/logo-dark.png'
 import logoUrl from '@/assets/logo.png'
-import tabbyUrl from '@/assets/tabby.png'
 import AOS from 'aos'
 import { noop } from 'lodash-es'
 import { useTheme } from 'next-themes'
@@ -42,6 +42,8 @@ import Stats from './components/stats'
 
 import 'aos/dist/aos.css'
 
+import { Separator } from '@/components/ui/separator'
+
 const resetUserAuthTokenDocument = graphql(/* GraphQL */ `
   mutation ResetUserAuthToken {
     resetUserAuthToken
@@ -241,20 +243,25 @@ function MainPanel() {
             <Image
               src={tabbyUrl}
               alt="logo"
-              width={45}
+              width={192}
+              className="my-4 invert dark:invert-0"
               data-aos="fade-down"
               data-aos-delay="150"
             />
             <p
-              className="mb-6 scroll-m-20 text-xl font-semibold tracking-tight text-secondary-foreground"
+              className="mb-6 flex scroll-m-20 items-center gap-2 text-sm tracking-tight text-secondary-foreground"
               data-aos="fade-down"
               data-aos-delay="100"
             >
-              The Private Search Assistant
+              <span>research</span>
+              <Separator orientation="vertical" className="h-[80%]" />
+              <span>develop</span>
+              <Separator orientation="vertical" className="h-[80%]" />
+              <span>debug</span>
             </p>
             {isChatEnabled && searchFlag.value && (
               <div className="w-full" data-aos="fade-down">
-                <TextAreaSearch onSearch={onSearch} isExpanded />
+                <TextAreaSearch onSearch={onSearch} />
               </div>
             )}
             <div className="mt-10 flex w-full flex-col gap-x-5 lg:flex-row">

diff --git a/ee/tabby-ui/components/textarea-search.tsx b/ee/tabby-ui/components/textarea-search.tsx
@@ -59,12 +59,12 @@ export default function TextAreaSearch({
     >
       <TextareaAutosize
         className={cn(
-          'text-area-autosize resize-none rounded-lg !border-none bg-transparent !shadow-none !outline-none !ring-0 !ring-offset-0',
+          'text-area-autosize flex-1 resize-none rounded-lg !border-none bg-transparent !shadow-none !outline-none !ring-0 !ring-offset-0',
           {
             '!h-[48px]': !isShow
           }
         )}
-        placeholder={placeholder || 'Ask anything'}
+        placeholder={placeholder || 'Ask anything...'}
         maxRows={5}
         onKeyDown={onSearchKeyDown}
         onKeyUp={onSearchKeyUp}