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

Revert feat: temporary remove dark mode (#2221)

Browse Source 
* Revert "feat: temporary remove dark mode :(  (#2168)"

This reverts commit 222b4ad897c275dab0eaec3c8a8472bf3df7afc4.

* fix: revert darkmode and fix darkmode for import model

* fix: prettier format import model

---------

Co-authored-by: Louis <louis@jan.ai>
This commit is contained in:
Faisal Amir 2024-03-04 14:46:10 +07:00 committed by GitHub
parent 612128361f
commit 635435fbb8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
52 changed files with 298 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
uikit/src/button/styles.scss
View File

@ -5,11 +5,11 @@
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
&-primary {
@apply bg-blue-600 text-white hover:bg-blue-600/90;
@apply bg-primary hover:bg-primary/90 text-white;
}
&-secondary-blue {
@apply bg-blue-200 text-blue-600 hover:bg-blue-300/50;
@apply bg-blue-200 text-blue-600 hover:bg-blue-300/50 dark:hover:bg-blue-200/80;
}
&-danger {
@ -17,7 +17,7 @@
}
&-secondary-danger {
@apply bg-red-200 text-red-600 hover:bg-red-300/50;
@apply bg-red-200 text-red-600 hover:bg-red-300/50 dark:hover:bg-red-200/80;
}
&-outline {
@ -66,7 +66,7 @@
[type='reset'],
[type='submit'] {
&.btn-primary {
@apply bg-blue-600 hover:bg-blue-600/90;
@apply bg-primary hover:bg-primary/90;
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
}
&.btn-secondary {

2
uikit/src/checkbox/styles.scss
View File

@ -1,5 +1,5 @@
.checkbox {
@apply border-border h-5 w-5 flex-shrink-0 rounded-md border data-[state=checked]:bg-blue-600 data-[state=checked]:text-white;
@apply border-border data-[state=checked]:bg-primary h-5 w-5 flex-shrink-0 rounded-md border data-[state=checked]:text-white;
&--icon {
@apply h-4 w-4;

2
uikit/src/input/styles.scss
View File

@ -1,6 +1,6 @@
.input {
@apply border-border placeholder:text-muted-foreground flex h-9 w-full rounded-lg border bg-transparent px-3 py-1 transition-colors;
@apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
@apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
@apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
@apply file:border-0 file:bg-transparent file:font-medium;
}

65
uikit/src/main.scss
View File

@ -42,10 +42,69 @@
--danger: 346.8 77.2% 49.8%;
--danger-foreground: 355.7 100% 97.3%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 20 14.3% 4.1%;
.primary-blue {
--primary: 221 83% 53%;
--primary-foreground: 210 40% 98%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
}
.primary-green {
--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
}
.primary-purple {
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
}
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--danger: 346.8 77.2% 49.8%;
--danger-foreground: 355.7 100% 97.3%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--ring: 35.5 91.7% 32.9%;
.primary-blue {
--primary: 221 83% 53%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 12 6.5% 15.1%;
--secondary-foreground: 60 9.1% 97.8%;
}
.primary-green {
--primary: 142.1 70.6% 45.3%;
--primary-foreground: 144.9 80.4% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
}
.primary-purple {
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
}
}

4
uikit/src/progress/styles.scss
View File

@ -1,7 +1,7 @@
.progress {
@apply relative h-4 w-full overflow-hidden rounded-full bg-gray-100;
@apply bg-secondary relative h-4 w-full overflow-hidden rounded-full;
&-indicator {
@apply h-full w-full flex-1 bg-blue-600 transition-all;
@apply bg-primary h-full w-full flex-1 transition-all;
}
}

2
uikit/src/select/styles.scss
View File

@ -1,6 +1,6 @@
.select {
@apply placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed [&>span]:line-clamp-1;
@apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
@apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
@apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
&-caret {

4
uikit/src/slider/styles.scss
View File

@ -2,7 +2,7 @@
@apply relative flex w-full touch-none select-none items-center;
&-track {
@apply relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-200;
@apply relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800;
[data-disabled] {
@apply cursor-not-allowed opacity-50;
}
@ -13,6 +13,6 @@
}
&-thumb {
@apply bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border border-blue-600/50 shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50;
@apply border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50;
}
}

2
uikit/src/switch/styles.scss
View File

@ -1,7 +1,7 @@
.switch {
@apply inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent;
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
@apply data-[state=unchecked]:bg-input data-[state=checked]:bg-blue-600;
@apply data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
@apply disabled:cursor-not-allowed disabled:opacity-50;
&-toggle {

4
uikit/src/tooltip/styles.scss
View File

@ -1,6 +1,6 @@
.tooltip {
@apply z-50 overflow-hidden rounded-md bg-gray-950 px-2 py-1.5 text-xs font-medium text-gray-200 shadow-md;
@apply dark:bg-input dark:text-foreground z-50 overflow-hidden rounded-md bg-gray-950 px-2 py-1.5 text-xs font-medium text-gray-200 shadow-md;
&-arrow {
@apply fill-gray-950;
@apply dark:fill-input fill-gray-950;
}
}

2
web/app/layout.tsx
View File

@ -15,7 +15,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="en" suppressHydrationWarning>
<body className="bg-white font-sans text-sm antialiased">
<body className="bg-white font-sans text-sm antialiased dark:bg-background">
<div className="title-bar" />
<Providers>{children}</Providers>
</body>

14
web/containers/CardSidebar/index.tsx
View File

@ -45,7 +45,7 @@ export default function CardSidebar({
return (
<div
className={twMerge(
'flex w-full flex-col border-t border-border bg-zinc-100',
'flex w-full flex-col border-t border-border bg-zinc-100 dark:bg-zinc-900',
asChild ? 'rounded-lg border' : 'border-t'
)}
>
@ -61,7 +61,7 @@ export default function CardSidebar({
if (!children) return
setShow(!show)
}}
className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 py-2 pr-2"
className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 py-2 pr-2 dark:bg-zinc-900"
>
<ChevronDownIcon
className={twMerge(
@ -79,7 +79,7 @@ export default function CardSidebar({
{!hideMoreVerticalAction && (
<div
ref={setToggle}
className="cursor-pointer rounded-lg bg-zinc-100 p-2 px-3"
className="cursor-pointer rounded-lg bg-zinc-100 p-2 px-3 dark:bg-zinc-900"
onClick={() => setMore(!more)}
>
<MoreVerticalIcon className="h-5 w-5" />
@ -114,7 +114,7 @@ export default function CardSidebar({
<>
{title === 'Model' ? (
<div className="flex flex-col">
<span className="font-medium text-black">
<span className="font-medium text-black dark:text-muted-foreground">
{openFileTitle()}
</span>
<span className="mt-1 text-muted-foreground">
@ -122,7 +122,7 @@ export default function CardSidebar({
</span>
</div>
) : (
<span className="text-bold text-black">
<span className="text-bold text-black dark:text-muted-foreground">
{openFileTitle()}
</span>
)}
@ -141,7 +141,7 @@ export default function CardSidebar({
/>
<>
<div className="flex flex-col">
<span className="line-clamp-1 font-medium text-black">
<span className="line-clamp-1 font-medium text-black dark:text-muted-foreground">
Edit Global Defaults for{' '}
<span
className="font-bold"
@ -175,7 +175,7 @@ export default function CardSidebar({
{show && (
<div
className={twMerge(
'flex flex-col gap-2 bg-white px-2',
'flex flex-col gap-2 bg-white px-2 dark:bg-background',
asChild && 'rounded-b-lg'
)}
>

6
web/containers/Checkbox/index.tsx
View File

@ -34,10 +34,12 @@ const Checkbox: React.FC<Props> = ({
return (
<div className="flex justify-between">
<div className="mb-1 flex items-center gap-x-2">
<p className="text-sm font-semibold text-zinc-500">{title}</p>
<p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
{title}
</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0" />
<InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">

10
web/containers/DropdownListSidebar/index.tsx
View File

@ -203,14 +203,15 @@ const DropdownListSidebar = ({
isTabActive === 1 && '[&_.select-scroll-down-button]:hidden'
)}
>
<div className="relative px-2 py-2">
<ul className="inline-flex w-full space-x-2 rounded-lg bg-zinc-100 px-1">
<div className="relative px-2 py-2 dark:bg-secondary/50">
<ul className="inline-flex w-full space-x-2 rounded-lg bg-zinc-100 px-1 dark:bg-secondary">
{engineOptions.map((name, i) => {
return (
<li
className={twMerge(
'relative my-1 flex w-full cursor-pointer items-center justify-center space-x-2 px-2 py-2',
isTabActive === i && 'rounded-md bg-background'
isTabActive === i &&
'rounded-md bg-background dark:bg-white'
)}
key={i}
onClick={() => setIsTabActive(i)}
@ -229,7 +230,8 @@ const DropdownListSidebar = ({
<span
className={twMerge(
'relative z-50 font-medium text-muted-foreground',
isTabActive === i && 'font-bold text-foreground'
isTabActive === i &&
'font-bold text-foreground dark:text-black'
)}
>
{name}

2
web/containers/GPUDriverPromptModal/index.tsx
View File

@ -60,7 +60,7 @@ const GPUDriverPrompt: React.FC = () => {
id="default-checkbox"
type="checkbox"
onChange={onDoNotShowAgainChange}
className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500"
className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
/>
<span>Don&apos;t show again</span>
</div>

2
web/containers/Layout/BottomBar/DownloadingState/index.tsx
View File

@ -47,7 +47,7 @@ export default function DownloadingState() {
</span>
</Button>
<span
className="absolute left-0 h-full rounded-md rounded-l-md bg-blue-500/20"
className="absolute left-0 h-full rounded-md rounded-l-md bg-primary/20"
style={{
width: `${totalPercentage}%`,
}}

6
web/containers/Layout/BottomBar/ImportingModelState/index.tsx
View File

@ -38,17 +38,17 @@ const ImportingModelState: React.FC = () => {
className="flex cursor-pointer flex-row items-center space-x-2"
onClick={onClick}
>
<p className="text-xs font-semibold text-[#09090B]">
<p className="text-xs font-semibold text-muted-foreground">
Importing model ({finishedImportModelCount}/{importingModels.length}
)
</p>
<div className="flex flex-row items-center justify-center space-x-2 rounded-md bg-[#F4F4F5] px-2 py-[2px]">
<div className="flex flex-row items-center justify-center space-x-2 rounded-md bg-secondary px-2 py-[2px]">
<Progress
className="h-2 w-24"
value={transferredSize / totalSize}
/>
<span className="text-xs font-bold text-blue-600">
<span className="text-xs font-bold text-muted-foreground">
{progress.toFixed(2)}%
</span>
</div>

6
web/containers/Layout/Ribbon/index.tsx
View File

@ -45,7 +45,7 @@ export default function RibbonNav() {
size={20}
className={twMerge(
'flex-shrink-0 text-muted-foreground',
serverEnabled && 'text-gray-300'
serverEnabled && 'text-gray-300 dark:text-gray-700'
)}
/>
),
@ -114,7 +114,7 @@ export default function RibbonNav() {
</div>
{isActive && (
<m.div
className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200"
className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200 dark:bg-secondary"
layoutId="active-state-primary"
/>
)}
@ -166,7 +166,7 @@ export default function RibbonNav() {
</div>
{isActive && (
<m.div
className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200"
className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200 dark:bg-secondary"
layoutId="active-state-secondary"
/>
)}

6
web/containers/Layout/TopBar/index.tsx
View File

@ -159,7 +159,7 @@ const TopBar = () => {
size={16}
className="text-muted-foreground"
/>
<span className="font-medium text-black ">
<span className="font-medium text-black dark:text-muted-foreground">
{openFileTitle()}
</span>
</div>
@ -175,7 +175,7 @@ const TopBar = () => {
className="mt-0.5 flex-shrink-0 text-muted-foreground"
/>
<div className="flex flex-col">
<span className="font-medium text-black ">
<span className="font-medium text-black dark:text-muted-foreground">
Edit Threads Settings
</span>
<span className="mt-1 text-muted-foreground">
@ -204,7 +204,7 @@ const TopBar = () => {
className="text-muted-foreground"
/>
<div className="flex flex-col">
<span className="font-medium text-black ">
<span className="font-medium text-black dark:text-muted-foreground">
{openFileTitle()}
</span>
</div>

12
web/containers/Loader/index.tsx
View File

@ -7,12 +7,12 @@ export default function Loader({ description }: Props) {
<div className="space-y-16">
<div className="loader">
<div className="loader-inner">
<label className="h-2 w-2 rounded-full bg-blue-500" />
<label className="h-2 w-2 rounded-full bg-blue-500" />
<label className="h-2 w-2 rounded-full bg-blue-500" />
<label className="h-2 w-2 rounded-full bg-blue-500" />
<label className="h-2 w-2 rounded-full bg-blue-500" />
<label className="h-2 w-2 rounded-full bg-blue-500" />
<label className="h-2 w-2 rounded-full bg-primary" />
<label className="h-2 w-2 rounded-full bg-primary" />
<label className="h-2 w-2 rounded-full bg-primary" />
<label className="h-2 w-2 rounded-full bg-primary" />
<label className="h-2 w-2 rounded-full bg-primary" />
<label className="h-2 w-2 rounded-full bg-primary" />
</div>
</div>
<p className="font-medium text-muted-foreground">{description}</p>

2
web/containers/ModalTroubleShoot/AppLogs.tsx
View File

@ -28,7 +28,7 @@ const AppLogs = () => {
<div className="absolute -top-11 right-2">
<Button
themes="outline"
className="bg-white"
className="bg-white dark:bg-secondary/50"
onClick={() => {
clipboard.copy(logs.slice(-50) ?? '')
}}

2
web/containers/ModalTroubleShoot/DeviceSpecs.tsx
View File

@ -16,7 +16,7 @@ const DeviceSpecs = () => {
<div className="absolute -top-11 right-2">
<Button
themes="outline"
className="bg-white"
className="bg-white dark:bg-secondary/50"
onClick={() => {
clipboard.copy(userAgent ?? '')
}}

13
web/containers/ModalTroubleShoot/index.tsx
View File

@ -38,7 +38,7 @@ const ModalTroubleShooting: React.FC = () => {
<a
href="https://jan.ai/guides/troubleshooting"
target="_blank"
className="text-blue-600 hover:underline"
className="text-blue-600 hover:underline dark:text-blue-300"
>
troubleshooting guide
</a>
@ -65,7 +65,7 @@ const ModalTroubleShooting: React.FC = () => {
<a
href="https://discord.gg/AsJ8krTT3N"
target="_blank"
className="text-blue-600 hover:underline"
className="text-blue-600 hover:underline dark:text-blue-300"
>
Discord
</a>
@ -77,8 +77,8 @@ const ModalTroubleShooting: React.FC = () => {
<div className="flex flex-col pt-4">
{/* TODO @faisal replace this once we have better tabs component UI */}
<div className="relative bg-zinc-100 px-4 py-2">
<ul className="inline-flex space-x-2 rounded-lg bg-zinc-200 px-1">
<div className="relative bg-zinc-100 px-4 py-2 dark:bg-secondary/50">
<ul className="inline-flex space-x-2 rounded-lg bg-zinc-200 px-1 dark:bg-secondary">
{logOption.map((name, i) => {
return (
<li
@ -89,14 +89,15 @@ const ModalTroubleShooting: React.FC = () => {
<span
className={twMerge(
'relative z-50 font-medium text-muted-foreground',
isTabActive === i && 'font-bold text-foreground'
isTabActive === i &&
'font-bold text-foreground dark:text-black'
)}
>
{name}
</span>
{isTabActive === i && (
<m.div
className="absolute left-0 top-1 h-[calc(100%-8px)] w-full rounded-md bg-background"
className="absolute left-0 top-1 h-[calc(100%-8px)] w-full rounded-md bg-background dark:bg-white"
layoutId="log-state-active"
/>
)}

6
web/containers/ModelConfigInput/index.tsx
View File

@ -30,10 +30,12 @@ const ModelConfigInput: React.FC<Props> = ({
return (
<div className="flex flex-col">
<div className="mb-2 flex items-center gap-x-2">
<p className="text-sm font-semibold text-zinc-500">{title}</p>
<p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
{title}
</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0" />
<InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">

2
web/containers/OpenAiKeyInput/index.tsx
View File

@ -33,7 +33,7 @@ const OpenAiKeyInput: React.FC = () => {
<div className="my-4">
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
>
API Key
</label>

10
web/containers/Providers/Theme.tsx
View File

@ -6,9 +6,17 @@ import { ThemeProvider } from 'next-themes'
import { motion as m } from 'framer-motion'
import { useBodyClass } from '@/hooks/useBodyClass'
import { useUserConfigs } from '@/hooks/useUserConfigs'
export default function ThemeWrapper({ children }: PropsWithChildren) {
const [config] = useUserConfigs()
useBodyClass(config.primaryColor || 'primary-yellow')
return (
<ThemeProvider attribute="class" forcedTheme="light">
<ThemeProvider attribute="class" enableSystem>
<m.div
initial={{ opacity: 0, y: -10 }}
animate={{

2
web/containers/ServerLogs/index.tsx
View File

@ -57,7 +57,7 @@ const ServerLogs = (props: ServerLogsProps) => {
<div className="absolute -top-11 right-2">
<Button
themes="outline"
className="bg-white"
className="bg-white dark:bg-secondary/50"
onClick={() => {
clipboard.copy(logs.slice(-100) ?? '')
}}

6
web/containers/SliderRightPanel/index.tsx
View File

@ -42,10 +42,12 @@ const SliderRightPanel: React.FC<Props> = ({
return (
<div className="flex flex-col">
<div className="mb-3 flex items-center gap-x-2">
<p className="text-sm font-semibold text-zinc-500">{title}</p>
<p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
{title}
</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0" />
<InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">

12
web/containers/Toast/index.tsx
View File

@ -108,11 +108,11 @@ export function toaster(props: Props) {
return (
<div
className={twMerge(
'unset-drag relative flex animate-enter items-center gap-x-4 rounded-lg bg-foreground px-4 py-2 text-white',
'unset-drag dark:bg-zinc-white relative flex animate-enter items-center gap-x-4 rounded-lg bg-foreground px-4 py-2 text-white dark:border dark:border-border',
t.visible ? 'animate-enter' : 'animate-leave'
)}
>
<div className="flex items-start gap-x-3">
<div className="flex items-start gap-x-3 dark:text-black">
<div className="mt-1">{renderIcon(type)}</div>
<div className="pr-4">
<h1 className="font-bold">{title}</h1>
@ -120,7 +120,7 @@ export function toaster(props: Props) {
</div>
<XIcon
size={24}
className="absolute right-2 top-2 w-4 cursor-pointer"
className="absolute right-2 top-2 w-4 cursor-pointer dark:text-black"
onClick={() => toast.dismiss(t.id)}
/>
</div>
@ -138,16 +138,16 @@ export function snackbar(props: Props) {
return (
<div
className={twMerge(
'unset-drag relative bottom-2 flex animate-enter items-center gap-x-4 rounded-lg bg-foreground px-4 py-2 text-white',
'unset-drag dark:bg-zinc-white relative bottom-2 flex animate-enter items-center gap-x-4 rounded-lg bg-foreground px-4 py-2 text-white dark:border dark:border-border',
t.visible ? 'animate-enter' : 'animate-leave'
)}
>
<div className="flex items-start gap-x-3">
<div className="flex items-start gap-x-3 dark:text-black">
<div>{renderIcon(type)}</div>
<p className="pr-4">{description}</p>
<XIcon
size={24}
className="absolute right-2 top-1/2 w-4 -translate-y-1/2 cursor-pointer"
className="absolute right-2 top-1/2 w-4 -translate-y-1/2 cursor-pointer dark:text-black"
onClick={() => toast.dismiss(t.id)}
/>
</div>

11
web/hooks/useUserConfigs.ts Normal file
View File

@ -0,0 +1,11 @@
import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'
export const userConfigs = atomWithStorage<UserConfig>('config', {
gettingStartedShow: true,
primaryColor: 'primary-blue',
})
export function useUserConfigs() {
return useAtom(userConfigs)
}

4
web/screens/Chat/CleanThreadModal/index.tsx
View File

@ -34,7 +34,9 @@ const CleanThreadModal: React.FC<Props> = ({ threadId }) => {
<ModalTrigger asChild onClick={(e) => e.stopPropagation()}>
<div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
<Paintbrush size={16} className="text-muted-foreground" />
<span className="text-bold text-black">Clean thread</span>
<span className="text-bold text-black dark:text-muted-foreground">
Clean thread
</span>
</div>
</ModalTrigger>
<ModalPortal />

6
web/screens/Chat/DeleteThreadModal/index.tsx
View File

@ -33,8 +33,10 @@ const DeleteThreadModal: React.FC<Props> = ({ threadId }) => {
<Modal>
<ModalTrigger asChild onClick={(e) => e.stopPropagation()}>
<div className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary">
<Trash2Icon size={16} className="text-red-600" />
<span className="text-bold text-red-600">Delete thread</span>
<Trash2Icon size={16} className="text-red-600 dark:text-red-300" />
<span className="text-bold text-red-600 dark:text-red-300">
Delete thread
</span>
</div>
</ModalTrigger>
<ModalPortal />

4
web/screens/Chat/ErrorMessage/index.tsx
View File

@ -54,7 +54,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
Port 3928 is currently unavailable. Check for conflicting apps,
or access&nbsp;
<span
className="cursor-pointer text-blue-600"
className="cursor-pointer text-primary dark:text-blue-400"
onClick={() => setModalTroubleShooting(true)}
>
troubleshooting assistance
@ -72,7 +72,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
<p>
Jan’s in beta. Access&nbsp;
<span
className="cursor-pointer text-blue-600"
className="cursor-pointer text-primary dark:text-blue-400"
onClick={() => setModalTroubleShooting(true)}
>
troubleshooting assistance

20
web/screens/Chat/Sidebar/index.tsx
View File

@ -69,7 +69,7 @@ const Sidebar: React.FC = () => {
return (
<div
className={twMerge(
'h-full flex-shrink-0 overflow-x-hidden border-l border-border bg-background pb-6 transition-all duration-100',
'h-full flex-shrink-0 overflow-x-hidden border-l border-border bg-background pb-6 transition-all duration-100 dark:bg-background/20',
showing
? 'w-80 translate-x-0 opacity-100'
: 'w-0 translate-x-full opacity-0'
@ -85,7 +85,7 @@ const Sidebar: React.FC = () => {
<div>
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
>
Title
</label>
@ -104,7 +104,7 @@ const Sidebar: React.FC = () => {
<div className="flex flex-col">
<label
id="thread-title"
className="mb-2 inline-block font-bold text-zinc-500"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Threads ID
</label>
@ -125,7 +125,7 @@ const Sidebar: React.FC = () => {
<div>
<label
id="thread-title"
className="mb-2 inline-block font-bold text-zinc-500"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Instructions
</label>
@ -201,14 +201,14 @@ const Sidebar: React.FC = () => {
<div className="flex items-center justify-between">
<label
id="retrieval"
className="inline-flex items-center font-bold text-zinc-500"
className="inline-flex items-center font-bold text-zinc-500 dark:text-gray-300"
>
Retrieval
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0 text-black"
className="ml-2 flex-shrink-0 text-black dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
@ -267,7 +267,7 @@ const Sidebar: React.FC = () => {
<div className="item-center mb-2 flex">
<label
id="embedding-model"
className="inline-flex font-bold text-zinc-500"
className="inline-flex font-bold text-zinc-500 dark:text-gray-300"
>
Embedding Model
</label>
@ -275,7 +275,7 @@ const Sidebar: React.FC = () => {
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0"
className="ml-2 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
@ -307,7 +307,7 @@ const Sidebar: React.FC = () => {
<div className="mb-2 flex items-center">
<label
id="vector-database"
className="inline-block font-bold text-zinc-500"
className="inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Vector Database
</label>
@ -315,7 +315,7 @@ const Sidebar: React.FC = () => {
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0"
className="ml-2 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>

8
web/screens/Chat/ThreadList/index.tsx
View File

@ -79,7 +79,7 @@ export default function ThreadList() {
<div
key={thread.id}
className={twMerge(
`group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-gray-100`
`group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-gray-100 hover:dark:bg-secondary/50`
)}
onClick={() => {
onThreadClick(thread)
@ -90,7 +90,7 @@ export default function ThreadList() {
{thread.updated && displayDate(thread.updated)}
</p>
<h2 className="line-clamp-1 font-bold">{thread.title}</h2>
<p className="mt-1 line-clamp-1 text-xs text-gray-700 group-hover/message:max-w-[160px]">
<p className="mt-1 line-clamp-1 text-xs text-gray-700 group-hover/message:max-w-[160px] dark:text-gray-300">
{threadStates[thread.id]?.lastMessage
? threadStates[thread.id]?.lastMessage
: 'No new message'}
@ -98,7 +98,7 @@ export default function ThreadList() {
</div>
<div
className={twMerge(
`group/icon invisible absolute bottom-2 right-2 z-20 rounded-lg p-1 text-muted-foreground hover:bg-gray-200 group-hover/message:visible`
`group/icon invisible absolute bottom-2 right-2 z-20 rounded-lg p-1 text-muted-foreground hover:bg-gray-200 group-hover/message:visible hover:dark:bg-secondary`
)}
>
<MoreVerticalIcon />
@ -109,7 +109,7 @@ export default function ThreadList() {
</div>
{activeThreadId === thread.id && (
<m.div
className="absolute inset-0 left-0 h-full w-full rounded-lg bg-gray-100 p-4"
className="absolute inset-0 left-0 h-full w-full rounded-lg bg-gray-100 p-4 dark:bg-secondary/50"
layoutId="active-thread"
/>
)}

2
web/screens/ExploreModels/HuggingFaceSearchModal/index.tsx
View File

@ -26,7 +26,7 @@ export const HuggingFaceSearchModal = () => {
</div>
<Input
placeholder="e.g. username/repo-name"
className="bg-white"
className="bg-white dark:bg-background"
onChange={(e) => {
setRepoID(e.target.value)
}}

4
web/screens/ExploreModels/index.tsx
View File

@ -90,13 +90,13 @@ const ExploreModelsScreen = () => {
/>
<Input
placeholder="Search models"
className="bg-white pl-9"
className="bg-white pl-9 dark:bg-background"
onChange={(e) => setsearchValue(e.target.value)}
/>
</div>
<Button
themes="outline"
className="gap-2 bg-white"
className="gap-2 bg-white dark:bg-secondary"
onClick={onImportModelClick}
>
<UploadIcon size={16} />

26
web/screens/LocalServer/index.tsx
View File

@ -179,7 +179,7 @@ const LocalServerScreen = () => {
<TooltipTrigger asChild>
<div className="space-y-4 p-4">
<div>
<p className="mb-2 block text-sm font-semibold text-zinc-500 ">
<p className="mb-2 block text-sm font-semibold text-zinc-500 dark:text-gray-300">
Server Options
</p>
<div className="flex w-full flex-shrink-0 items-center gap-x-2">
@ -229,12 +229,15 @@ const LocalServerScreen = () => {
<div>
<label
id="cors"
className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500"
className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
>
Cross-Origin-Resource-Sharing (CORS)
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="mt-0.5 flex-shrink-0" />
<InfoIcon
size={16}
className="mt-0.5 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
@ -261,12 +264,15 @@ const LocalServerScreen = () => {
<div>
<label
id="verbose"
className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500"
className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
>
Verbose Server Logs
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="mt-0.5 flex-shrink-0" />
<InfoIcon
size={16}
className="mt-0.5 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
@ -307,13 +313,13 @@ const LocalServerScreen = () => {
{/* Middle Bar */}
<ScrollToBottom className="relative flex h-full w-full flex-col overflow-auto bg-background">
<div className="sticky top-0 flex items-center justify-between bg-zinc-100 px-4 py-2">
<div className="sticky top-0 flex items-center justify-between bg-zinc-100 px-4 py-2 dark:bg-zinc-600">
<h2 className="font-bold">Server Logs</h2>
<div className="space-x-2">
<Button
size="sm"
themes="outline"
className="bg-white"
className="bg-white dark:bg-secondary"
onClick={() => openServerLog()}
>
<CodeIcon size={16} className="mr-2" />
@ -322,7 +328,7 @@ const LocalServerScreen = () => {
<Button
size="sm"
themes="outline"
className="bg-white"
className="bg-white dark:bg-secondary"
onClick={() => clearServerLog()}
>
<Paintbrush size={16} className="mr-2" />
@ -378,7 +384,7 @@ const LocalServerScreen = () => {
{/* Right bar */}
<div
className={twMerge(
'h-full flex-shrink-0 overflow-x-hidden border-l border-border bg-background transition-all duration-100',
'h-full flex-shrink-0 overflow-x-hidden border-l border-border bg-background transition-all duration-100 dark:bg-background/20',
showRightSideBar
? 'w-80 translate-x-0 opacity-100'
: 'w-0 translate-x-full opacity-0'
@ -414,7 +420,7 @@ const LocalServerScreen = () => {
<span>
Model failed to start. Access{' '}
<span
className="cursor-pointer text-blue-600"
className="cursor-pointer text-primary dark:text-blue-400"
onClick={() => setModalTroubleShooting(true)}
>
troubleshooting assistance

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

@ -280,7 +280,7 @@ const Advanced = () => {
disabled={gpuList.length === 0 || !gpuEnabled}
value={selectedGpu.join()}
>
<SelectTrigger className="w-[340px] bg-white">
<SelectTrigger className="w-[340px] bg-white dark:bg-gray-500">
<SelectValue placeholder={gpuSelectionPlaceHolder}>
<span className="line-clamp-1 w-full pr-8">
{selectedGpu.join()}

57
web/screens/Settings/Appearance/TogglePrimary.tsx Normal file
View File

@ -0,0 +1,57 @@
import { motion as m } from 'framer-motion'
import { twMerge } from 'tailwind-merge'
import { useUserConfigs } from '@/hooks/useUserConfigs'
type PrimaryColorOption = {
value: PrimaryColor
class: string
}
const primaryColorOptions: PrimaryColorOption[] = [
{
value: 'primary-blue',
class: 'bg-blue-500',
},
{
value: 'primary-purple',
class: 'bg-purple-500',
},
{
value: 'primary-green',
class: 'bg-green-500',
},
]
export default function TogglePrimary() {
const [config, setUserConfig] = useUserConfigs()
const handleChangeAccent = (primaryColor: PrimaryColor) => {
setUserConfig({ ...config, primaryColor })
}
return (
<div className="flex items-center">
{primaryColorOptions.map((option, i) => {
const isActive = config.primaryColor === option.value
return (
<div
className="relative flex h-6 w-6 items-center justify-center"
key={i}
>
<button
className={twMerge('h-3.5 w-3.5 rounded-full', option.class)}
onClick={() => handleChangeAccent(option.value)}
/>
{isActive ? (
<m.div
className="absolute inset-0 h-full w-full rounded-full border border-primary/50 bg-primary/20"
layoutId="active-primary-menu"
/>
) : null}
</div>
)
})}
</div>
)
}

2
web/screens/Settings/Appearance/ToggleTheme.tsx
View File

@ -28,7 +28,7 @@ export default function ToggleTheme() {
</button>
{isActive ? (
<m.div
className="absolute inset-0 h-full w-full rounded-md border border-primary/50 bg-blue-500/20"
className="absolute inset-0 h-full w-full rounded-md border border-primary/50 bg-primary/20"
layoutId="active-theme-menu"
/>
) : null}

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

@ -1,3 +1,4 @@
import ToggleAccent from '@/screens/Settings/Appearance/TogglePrimary'
import ToggleTheme from '@/screens/Settings/Appearance/ToggleTheme'
export default function AppearanceOptions() {
@ -21,6 +22,7 @@ export default function AppearanceOptions() {
Choose the primary accent color used throughout the app.
</p>
</div>
<ToggleAccent />
</div>
</div>
)

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

@ -131,7 +131,7 @@ const EditModelInfoModal: React.FC = () => {
<ModalTitle>Edit Model Information</ModalTitle>
</ModalHeader>
<div className="flex flex-row space-x-4 rounded-xl border p-4">
<div className="flex flex-row space-x-4 rounded-xl border border-border p-4">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-400">
<Paperclip color="#fff" />
</div>

2
web/screens/Settings/ImportModelOptionModal/ImportModelOptionSelection.tsx
View File

@ -16,7 +16,7 @@ const ImportModelOptionSelection: React.FC<Props> = ({
onClick={() => setSelectedOptionType(option.type)}
>
<div className="flex h-5 w-5 items-center justify-center rounded-full border border-[#2563EB]">
{checked && <div className="h-2 w-2 rounded-full bg-blue-500" />}
{checked && <div className="h-2 w-2 rounded-full bg-primary" />}
</div>
<div className="ml-2 flex-1">

8
web/screens/Settings/ImportSuccessIcon/index.tsx
View File

@ -29,8 +29,8 @@ const ImportSuccessIcon: React.FC<Props> = ({ onEditModelClick }) => {
}
const SuccessIcon: React.FC = React.memo(() => (
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500">
<Check color="#FFF" />
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
<Check size={20} />
</div>
))
@ -41,10 +41,10 @@ const EditIcon: React.FC<Props> = React.memo(({ onEditModelClick }) => {
return (
<div
className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-gray-100"
className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-secondary"
onClick={onClick}
>
<Pencil />
<Pencil size={20} />
</div>
)
})

6
web/screens/Settings/ImportingModelModal/ImportingModelItem.tsx
View File

@ -37,11 +37,11 @@ const ImportingModelItem: React.FC<Props> = ({ model }) => {
}, [model.status, model.size])
return (
<div className="flex w-full flex-row items-center space-x-3 rounded-lg border px-4 py-3">
<p className="line-clamp-1 flex-1 font-semibold text-[#09090B]">
<div className="flex w-full flex-row items-center space-x-3 rounded-lg border border-border px-4 py-3">
<p className="line-clamp-1 flex-1 font-semibold text-muted-foreground">
{model.name}
</p>
<p className="text-[#71717A]">{displayStatus}</p>
<p className="text-muted-foreground">{displayStatus}</p>
{model.status === 'IMPORTED' && (
<ImportSuccessIcon onEditModelClick={onEditModelInfoClick} />

8
web/screens/Settings/ImportingModelModal/index.tsx
View File

@ -62,7 +62,9 @@ const ImportingModelModal: React.FC = () => {
Importing model ({finishedImportModel}/{importingModels.length})
</ModalTitle>
<div className="flex flex-row items-center space-x-2">
<label className="text-xs text-[#71717A]">{modelFolder}</label>
<label className="text-xs text-muted-foreground">
{modelFolder}
</label>
<Button
themes="ghost"
className="text-blue-500"
@ -78,9 +80,9 @@ const ImportingModelModal: React.FC = () => {
<ImportingModelItem key={model.importId} model={model} />
))}
</div>
<ModalFooter className="mx-[-16px] mb-[-16px] flex flex-row rounded-b-lg bg-[#F4F4F5] px-2 py-2 ">
<ModalFooter className="mx-[-16px] mb-[-16px] flex flex-row rounded-b-lg bg-[#F4F4F5] px-2 py-2 dark:bg-secondary ">
<AlertCircle size={20} />
<p className="text-sm font-semibold text-[#71717A]">
<p className="text-sm font-semibold text-muted-foreground">
Own your model configurations, use at your own risk.
Misconfigurations may result in lower quality or unexpected outputs.{' '}
</p>

6
web/screens/Settings/Models/Row.tsx
View File

@ -152,7 +152,7 @@ export default function RowModel(props: RowModelProps) {
) : (
<PlayIcon size={16} className="text-muted-foreground" />
)}
<span className="text-bold capitalize text-black">
<span className="text-bold capitalize text-black dark:text-muted-foreground">
{isActiveModel ? stateModel.state : 'Start'}
&nbsp;Model
</span>
@ -189,7 +189,9 @@ export default function RowModel(props: RowModelProps) {
}}
>
<Trash2Icon size={16} className="text-muted-foreground" />
<span className="text-bold text-black">Delete Model</span>
<span className="text-bold text-black dark:text-muted-foreground">
Delete Model
</span>
</div>
</div>
)}

12
web/screens/Settings/SelectingModelModal/index.tsx
View File

@ -101,9 +101,11 @@ const SelectingModelModal: React.FC = () => {
onDrop: onDropModels,
})
const borderColor = isDragActive ? 'border-primary' : 'border-[#F4F4F5]'
const textColor = isDragActive ? 'text-blue-600' : 'text-[#71717A]'
const dragAndDropBgColor = isDragActive ? 'bg-[#EFF6FF]' : 'bg-white'
const borderColor = isDragActive ? 'border-primary' : 'border-border'
const textColor = isDragActive ? 'text-primary' : 'text-muted-foreground'
const dragAndDropBgColor = isDragActive
? 'bg-[#EFF6FF] dark:bg-blue-50/10'
: 'bg-background'
return (
<Modal
@ -116,7 +118,7 @@ const SelectingModelModal: React.FC = () => {
<ModalHeader>
<ModalTitle>Import Model</ModalTitle>
<p className="text-sm font-medium text-[#71717A]">
<p className="text-sm font-medium text-muted-foreground">
Import any model file (GGUF) or folder. Your imported model will be
private to you.
</p>
@ -133,7 +135,7 @@ const SelectingModelModal: React.FC = () => {
</div>
<div className="mt-4">
<span className="text-sm font-bold text-blue-600">
<span className="text-sm font-bold text-primary">
Click to upload
</span>
<span className={`text-sm ${textColor} font-medium`}>

3
web/screens/Settings/SettingMenu/index.tsx
View File

@ -15,6 +15,7 @@ const SettingMenu: React.FC<Props> = ({ activeMenu, onMenuClick }) => {
useEffect(() => {
setMenus([
'My Models',
'My Settings',
'Advanced Settings',
...(window.electronAPI ? ['Extensions'] : []),
])
@ -38,7 +39,7 @@ const SettingMenu: React.FC<Props> = ({ activeMenu, onMenuClick }) => {
{isActive && (
<m.div
className="absolute inset-0 -left-3 h-full w-[calc(100%+24px)] rounded-md bg-gray-200"
className="absolute inset-0 -left-3 h-full w-[calc(100%+24px)] rounded-md bg-primary/50"
layoutId="active-static-menu"
/>
)}

5
web/screens/Settings/index.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import Advanced from '@/screens/Settings/Advanced'
import AppearanceOptions from '@/screens/Settings/Appearance'
import ExtensionCatalog from '@/screens/Settings/CoreExtensions'
import Models from '@/screens/Settings/Models'
@ -14,6 +14,9 @@ const handleShowOptions = (menu: string) => {
case 'Extensions':
return <ExtensionCatalog />
case 'My Settings':
return <AppearanceOptions />
case 'Advanced Settings':
return <Advanced />

4
web/styles/components/message.scss
View File

@ -1,5 +1,5 @@
.message {
@apply text-black;
@apply text-black dark:text-gray-300;
white-space: pre-line;
ul,
@ -10,7 +10,7 @@
}
a {
@apply text-blue-600;
@apply text-blue-600 dark:text-blue-300;
&:hover {
@apply underline;
}

6
web/types/appearance.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
type PrimaryColor = 'primary-blue' | 'primary-green' | 'primary-purple'
type UserConfig = {
gettingStartedShow?: boolean
primaryColor?: PrimaryColor
}