Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: minor ui improvement (#3352)

Browse Source
This commit is contained in:
Faisal Amir 2024-08-13 09:32:59 +07:00 committed by GitHub
parent fcaf98a2fa
commit 6dd387db2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/screens/HubScreen2/components/DetailModelGroup.tsx
View File

@ -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}
/>

16
web/screens/HubScreen2/components/HubScreenFilter/index.tsx
View File

@ -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} />
))}

2
web/screens/HubScreen2/components/HuggingFaceModelCard.tsx
View File

@ -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>

40
web/screens/Settings/Advanced/components/DataMigration.tsx
View File

@ -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
Data Migration from Older Versions
</h6>
</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
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}>
Start migration
</Button>
<Button theme="destructive" onClick={onCleanUpDataClick}>
Remove threads and messages
<Button
theme="primary"
onClick={onStartMigrationClick}
variant="soft"
>
Migrate Now
</Button>
</div>
</div>
<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>
</>
)
}

6
web/screens/Settings/Appearance/index.tsx
View File

@ -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">

2
web/screens/Settings/EngineSetting/index.tsx
View File

@ -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>

4
web/screens/Settings/Hotkeys/index.tsx
View File

@ -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',

2
web/screens/Settings/MyModels/ModelItem/index.tsx
View File

@ -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}

4
web/screens/Settings/MyModels/index.tsx
View File

@ -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>

2
web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction.tsx
View File

@ -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}

4
web/screens/Thread/ThreadRightPanel/AssistantSettingContainer/index.tsx
View File

@ -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}
/>