From 6dd387db2b5b9890f19d0c3505cf9cb770fd492f Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 13 Aug 2024 09:32:59 +0700
Subject: [PATCH] chore: minor ui improvement (#3352)

---
 .../components/DetailModelGroup.tsx           |  6 +-
 .../components/HubScreenFilter/index.tsx      | 16 ++---
 .../components/HuggingFaceModelCard.tsx       |  2 +-
 .../Advanced/components/DataMigration.tsx     | 60 +++++++++++++------
 web/screens/Settings/Appearance/index.tsx     |  6 +-
 web/screens/Settings/EngineSetting/index.tsx  |  2 -
 web/screens/Settings/Hotkeys/index.tsx        |  4 +-
 .../Settings/MyModels/ModelItem/index.tsx     |  2 +-
 web/screens/Settings/MyModels/index.tsx       |  4 +-
 .../components/CopyOverInstruction.tsx        |  2 +-
 .../AssistantSettingContainer/index.tsx       |  4 +-
 11 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/web/screens/HubScreen2/components/DetailModelGroup.tsx b/web/screens/HubScreen2/components/DetailModelGroup.tsx
index 5fbc2d136..9c86ab1f6 100644
--- a/web/screens/HubScreen2/components/DetailModelGroup.tsx
+++ b/web/screens/HubScreen2/components/DetailModelGroup.tsx
@@ -85,7 +85,11 @@ const DetailModelGroup: React.FC<Props> = ({ category, onBackClicked }) => {
           <div className="w-full md:w-1/2">
             <Input
               prefixIcon={<Search size={16} />}
-              placeholder="Search"
+              placeholder={
+                category === 'HuggingFace'
+                  ? 'Search or paste Hugging Face URL'
+                  : 'Search'
+              }
               value={filter}
               onChange={onFilterChange}
             />
diff --git a/web/screens/HubScreen2/components/HubScreenFilter/index.tsx b/web/screens/HubScreen2/components/HubScreenFilter/index.tsx
index 0148bb01e..90a811c79 100644
--- a/web/screens/HubScreen2/components/HubScreenFilter/index.tsx
+++ b/web/screens/HubScreen2/components/HubScreenFilter/index.tsx
@@ -1,7 +1,5 @@
 import { Fragment } from 'react'
 
-import Image from 'next/image'
-
 import BlankState from '@/containers/BlankState'
 
 import useModelHub from '@/hooks/useModelHub'
@@ -24,11 +22,11 @@ const HubScreenFilter: React.FC<Props> = ({ queryText }) => {
   const huggingFaceModels = data.modelCategories.get('HuggingFace') ?? []
   const remoteModels: HfModelEntry[] = []
 
-  Object.entries(data.modelCategories).forEach(([key, value]) => {
+  for (const [key, value] of data.modelCategories) {
     if (key !== 'HuggingFace' && key !== 'BuiltInModels') {
       remoteModels.push(...value)
     }
-  })
+  }
 
   const filteredBuiltInModels = builtInModels.filter((model) => {
     return model.name.toLowerCase().includes(queryText.toLowerCase())
@@ -57,19 +55,13 @@ const HubScreenFilter: React.FC<Props> = ({ queryText }) => {
           <BlankState title="No search results found" />
         </div>
       ) : (
-        <div className="mx-auto mt-6 flex h-full w-full max-w-[650px] flex-col gap-6 py-6">
+        <div className="mx-auto mt-6 flex h-full w-full max-w-[650px] flex-col gap-4 py-4">
           {isOnDevice && (
             <Fragment>
               <div className="mt-4 flex items-center gap-2 first:mt-0">
-                <Image
-                  width={24}
-                  height={24}
-                  src="icons/app_icon.svg"
-                  alt="Built-In Models"
-                />
                 <h1 className="text-lg font-semibold">On-Device Models</h1>
               </div>
-              <div className="w-full">
+              <div className="-mt-2 w-full">
                 {filteredBuiltInModels.map((hfModelEntry) => (
                   <BuiltInModelCard key={hfModelEntry.id} {...hfModelEntry} />
                 ))}
diff --git a/web/screens/HubScreen2/components/HuggingFaceModelCard.tsx b/web/screens/HubScreen2/components/HuggingFaceModelCard.tsx
index fb9747889..87b16c840 100644
--- a/web/screens/HubScreen2/components/HuggingFaceModelCard.tsx
+++ b/web/screens/HubScreen2/components/HuggingFaceModelCard.tsx
@@ -55,7 +55,7 @@ const HuggingFaceModelCard: React.FC<HfModelEntry> = ({
       </div>
       <div className="pointer-events-auto flex flex-col items-end gap-2">
         <DownloadContainer modelHandle={name} />
-        <span className="flex items-center gap-1 text-sm font-medium leading-3">
+        <span className="flex items-center gap-1 text-sm font-medium leading-3 text-[hsla(var(--text-secondary))]">
           {addThousandSeparator(downloads)}
           <CloudDownload size={14} />
         </span>
diff --git a/web/screens/Settings/Advanced/components/DataMigration.tsx b/web/screens/Settings/Advanced/components/DataMigration.tsx
index 1fdcc975a..1647074ed 100644
--- a/web/screens/Settings/Advanced/components/DataMigration.tsx
+++ b/web/screens/Settings/Advanced/components/DataMigration.tsx
@@ -40,27 +40,51 @@ const DataMigration: React.FC = () => {
   }, [threads, deleteThread])
 
   return (
-    <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-      <div className="space-y-1">
-        <div className="flex gap-x-2">
-          <h6 className="font-semibold capitalize">
-            Migrate data from old version of Jan app
-          </h6>
+    <>
+      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+        <div className="space-y-1">
+          <div className="flex gap-x-2">
+            <h6 className="font-semibold capitalize">
+              Data Migration from Older Versions
+            </h6>
+          </div>
+          <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+            From version 0.6, Jan uses Cortex as its core engine. Without
+            migration, your previous threads and models may be inaccessible.
+            Migrate your data to maintain access in the latest version.
+          </p>
+        </div>
+        <div className="flex flex-shrink-0 flex-row gap-x-2">
+          <Button
+            theme="primary"
+            onClick={onStartMigrationClick}
+            variant="soft"
+          >
+            Migrate Now
+          </Button>
         </div>
-        <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-          Migrate multiple times can cause duplicate threads, please consider
-          using the remove threads button to clean up existing threads data
-        </p>
       </div>
-      <div className="flex flex-shrink-0 flex-row gap-x-2">
-        <Button theme="primary" onClick={onStartMigrationClick}>
-          Start migration
-        </Button>
-        <Button theme="destructive" onClick={onCleanUpDataClick}>
-          Remove threads and messages
-        </Button>
+      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+        <div className="space-y-1">
+          <div className="flex gap-x-2">
+            <h6 className="font-semibold capitalize">Delete All Threads</h6>
+          </div>
+          <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+            Multiple migrations may create duplicate threads. Use this button to
+            clean up if needed.
+          </p>
+        </div>
+        <div className="flex flex-shrink-0 flex-row gap-x-2">
+          <Button
+            theme="destructive"
+            onClick={onCleanUpDataClick}
+            variant="soft"
+          >
+            Remove All Threads
+          </Button>
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
index 22bb8d8be..a6571be99 100644
--- a/web/screens/Settings/Appearance/index.tsx
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -52,7 +52,7 @@ export default function AppearanceOptions() {
             <h6 className="font-semibold capitalize">Appearance</h6>
           </div>
           <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Select a color theme
+            Select a color theme.
           </p>
         </div>
         <Select
@@ -68,7 +68,7 @@ export default function AppearanceOptions() {
               <h6 className="font-semibold capitalize">Interface theme</h6>
             </div>
             <p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-              Translucent option is only available for some theme
+              Translucent option is only available for some theme.
             </p>
           </div>
           <div className="flex items-center gap-x-2">
@@ -97,7 +97,7 @@ export default function AppearanceOptions() {
             <h6 className="font-semibold capitalize">Spell Check</h6>
           </div>
           <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Toggle to disable spell checking.
+            Toggle to enable or disable spell checking.
           </p>
         </div>
         <div className="flex-shrink-0">
diff --git a/web/screens/Settings/EngineSetting/index.tsx b/web/screens/Settings/EngineSetting/index.tsx
index 55ef1fbef..9ae8298c7 100644
--- a/web/screens/Settings/EngineSetting/index.tsx
+++ b/web/screens/Settings/EngineSetting/index.tsx
@@ -4,7 +4,6 @@ import {
   ScrollArea,
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
@@ -46,7 +45,6 @@ const EngineSetting: React.FC = () => {
     <ScrollArea className="h-full w-full">
       <div className="p-4">
         <Table>
-          <TableCaption className="text-xl font-bold">Engines</TableCaption>
           <TableHeader>
             <TableRow>
               <TableHead>Engine name</TableHead>
diff --git a/web/screens/Settings/Hotkeys/index.tsx b/web/screens/Settings/Hotkeys/index.tsx
index aa79ae11e..3a416e7ce 100644
--- a/web/screens/Settings/Hotkeys/index.tsx
+++ b/web/screens/Settings/Hotkeys/index.tsx
@@ -23,11 +23,11 @@ const availableHotkeys = [
   },
   {
     combination: 'Enter',
-    description: 'Send a message',
+    description: 'Send a message (in input field)',
   },
   {
     combination: 'Shift Enter',
-    description: 'Insert new line in input box',
+    description: 'Insert a new line (in input field)',
   },
   {
     combination: 'Arrow Up',
diff --git a/web/screens/Settings/MyModels/ModelItem/index.tsx b/web/screens/Settings/MyModels/ModelItem/index.tsx
index 5314ba96e..021b2e3fb 100644
--- a/web/screens/Settings/MyModels/ModelItem/index.tsx
+++ b/web/screens/Settings/MyModels/ModelItem/index.tsx
@@ -194,7 +194,7 @@ const ModelItem: React.FC<Props> = ({ model }) => {
               {model.model}
             </h6>
             {model.engine === 'cortex.llamacpp' && (
-              <div className="flex gap-x-8">
+              <div className="flex justify-end gap-x-8 text-right">
                 <p
                   className="line-clamp-1 max-w-[120px] text-[hsla(var(--text-secondary))] xl:max-w-none"
                   title={model.model}
diff --git a/web/screens/Settings/MyModels/index.tsx b/web/screens/Settings/MyModels/index.tsx
index 0392fc504..060875256 100644
--- a/web/screens/Settings/MyModels/index.tsx
+++ b/web/screens/Settings/MyModels/index.tsx
@@ -6,7 +6,7 @@ import { LlmEngines } from '@janhq/core'
 import { Button, ScrollArea } from '@janhq/joi'
 
 import { useAtomValue, useSetAtom } from 'jotai'
-import { ImportIcon, UploadCloudIcon } from 'lucide-react'
+import { UploadIcon, UploadCloudIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -87,7 +87,7 @@ const MyModels = () => {
               theme="ghost"
               onClick={onImportModelClick}
             >
-              <ImportIcon size={16} className="mr-2" />
+              <UploadIcon size={16} className="mr-2" />
               <p>Import Model</p>
             </Button>
           </div>
diff --git a/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction.tsx b/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction.tsx
index ef426687b..3af98fee6 100644
--- a/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction.tsx
+++ b/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction.tsx
@@ -24,7 +24,7 @@ const CopyOverInstruction: React.FC = () => {
   )
 
   return (
-    <div className="flex w-full flex-row items-center justify-center gap-x-2">
+    <div className="mt-2 flex w-full flex-row items-center justify-center gap-x-2">
       <h6 className="flex-1 font-medium">Save instructions for new threads</h6>
       <Switch
         checked={copyOverInstructionEnabled}
diff --git a/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/index.tsx b/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/index.tsx
index ca1951f6c..f45bab4ee 100644
--- a/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/index.tsx
+++ b/web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/index.tsx
@@ -40,7 +40,7 @@ const AssistantSettingContainer: React.FC = () => {
   )
 
   return (
-    <div className="flex flex-col space-y-4 p-4">
+    <div className="flex flex-col p-4">
       <label
         id="assistant-instructions"
         className="mb-2 inline-block font-bold"
@@ -50,7 +50,7 @@ const AssistantSettingContainer: React.FC = () => {
       <TextArea
         rows={5}
         id="assistant-instructions"
-        placeholder="Eg. You are a helpful assistant."
+        placeholder="e.g., You are a helpful assistant."
         value={instructions}
         onChange={onInstructionChanged}
       />