Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

🖌️ style: Update Light/Dark UI Themes (#1754)

Browse source 
* BIG UI UPDATE

* fix: search bar, dialog template, new chat icon, convo icon and delete/rename button

* moved some color config and a lot of files

* small text fixes and tailwind config refactor

* Update localization and UI styles

* Update styles and add user-select:none to Tooltip component

* Update mobile.css styles for navigation mask and background color

* Update component imports and styles

* Update DeleteButton imports and references

* Update UI components

* Update tooltip delay duration

* Fix styling and update text in various components

* fixed assistant style

* minor style fixes

* revert: removed CreationHeader & CreationPanel

* style: match new styling for SidePanel

* style: match bg-gray-800 to ChatGPT (#212121)

* style: remove slate for gray where applicable to match new light theme

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Marco Beretta 2024-03-06 18:05:43 +01:00 • committed by GitHub
parent 2733c5ebe7
commit 911babd3e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
108 changed files with 438 additions and 524 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/index.html
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="theme-color" content="#343541"> <meta name="theme-color" content="#171717">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>LibreChat</title> <title>LibreChat</title>

4
client/src/components/Auth/LoginForm.tsx
View file

@ -44,7 +44,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') }, pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') },
})} })}
aria-invalid={!!errors.email} aria-invalid={!!errors.email}
className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500" className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" " placeholder=" "
/> />
<label <label
@ -69,7 +69,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
maxLength: { value: 128, message: localize('com_auth_password_max_length') }, maxLength: { value: 128, message: localize('com_auth_password_max_length') },
})} })}
aria-invalid={!!errors.password} aria-invalid={!!errors.password}
className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500" className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" " placeholder=" "
/> />
<label <label

2
client/src/components/Auth/Registration.tsx
View file

@ -64,7 +64,7 @@ const Registration: React.FC = () => {
validation, validation,
)} )}
aria-invalid={!!errors[id]} aria-invalid={!!errors[id]}
className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500" className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" " placeholder=" "
data-testid={id} data-testid={id}
></input> ></input>

2
client/src/components/Auth/RequestPasswordReset.tsx
View file

@ -103,7 +103,7 @@ function RequestPasswordReset() {
}, },
})} })}
aria-invalid={!!errors.email} aria-invalid={!!errors.email}
className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500" className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" " placeholder=" "
></input> ></input>
<label <label

4
client/src/components/Auth/ResetPassword.tsx
View file

@ -115,7 +115,7 @@ function ResetPassword() {
}, },
})} })}
aria-invalid={!!errors.password} aria-invalid={!!errors.password}
className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500" className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" " placeholder=" "
></input> ></input>
<label <label
@ -149,7 +149,7 @@ function ResetPassword() {
value === password || localize('com_auth_password_not_match'), value === password || localize('com_auth_password_not_match'),
})} })}
aria-invalid={!!errors.confirm_password} aria-invalid={!!errors.confirm_password}
className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500" className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
placeholder=" " placeholder=" "
></input> ></input>
<label <label

2
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -43,7 +43,7 @@ export default function ChatForm({ index = 0 }) {
> >
<div className="relative flex h-full flex-1 items-stretch md:flex-col"> <div className="relative flex h-full flex-1 items-stretch md:flex-col">
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(52,53,65,0.95)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]"> <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(23,23,23,1)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,0.1)]">
<FileRow <FileRow
files={files} files={files}
setFiles={setFiles} setFiles={setFiles}

2
client/src/components/Chat/Input/Files/DragDropOverlay.tsx
View file

@ -1,6 +1,6 @@
export default function DragDropOverlay() { export default function DragDropOverlay() {
return ( return (
<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-100 opacity-80 dark:bg-gray-800 dark:text-gray-100"> <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-200 opacity-80 dark:bg-gray-800 dark:text-gray-200">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 132 108" viewBox="0 0 132 108"

8
client/src/components/Chat/Input/OptionsPopover.tsx
View file

@ -56,14 +56,14 @@ export default function OptionsPopover({
<div <div
className={cn( className={cn(
cardStyle, cardStyle,
'dark:bg-gray-900', 'dark:bg-gray-800',
'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]', 'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]',
)} )}
> >
<div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60"> <div className="flex w-full items-center bg-gray-50 px-2 py-2 dark:bg-gray-800/60">
<Button <Button
type="button" type="button"
className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0" className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700"
onClick={saveAsPreset} onClick={saveAsPreset}
> >
<Save className="mr-1 w-[14px]" /> <Save className="mr-1 w-[14px]" />
@ -73,7 +73,7 @@ export default function OptionsPopover({
<Button <Button
type="button" type="button"
className={cn( className={cn(
'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white', 'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
removeFocusOutlines, removeFocusOutlines,
)} )}
onClick={closePopover} onClick={closePopover}

2
client/src/components/Chat/Input/PopoverButtons.tsx
View file

@ -79,7 +79,7 @@ export default function PopoverButtons({
type="button" type="button"
className={cn( className={cn(
button.buttonClass, button.buttonClass,
'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0', 'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
buttonClass ?? '', buttonClass ?? '',
)} )}
onClick={button.handler} onClick={button.handler}

15
client/src/components/Chat/Input/SendButton.tsx
View file

@ -1,12 +1,19 @@
import { SendIcon } from '~/components/svg'; import { SendIcon } from '~/components/svg';
import { cn } from '~/utils'; import { cn } from '~/utils';
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
import { useLocalize } from '~/hooks';
export default function SendButton({ text, disabled }) { export default function SendButton({ text, disabled }) {
const localize = useLocalize();
return ( return (
<TooltipProvider delayDuration={250}>
<Tooltip>
<TooltipTrigger asChild>
<button <button
disabled={!text || disabled} disabled={!text || disabled}
className={cn( className={cn(
'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:hover:bg-gray-900 dark:disabled:bg-white dark:disabled:hover:bg-transparent md:bottom-3 md:right-3', 'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3',
)} )}
data-testid="send-button" data-testid="send-button"
type="submit" type="submit"
@ -15,5 +22,11 @@ export default function SendButton({ text, disabled }) {
<SendIcon size={24} /> <SendIcon size={24} />
</span> </span>
</button> </button>
</TooltipTrigger>
<TooltipContent side="top" sideOffset={10}>
{localize('com_nav_send_message')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
); );
} }

4
client/src/components/Chat/Input/StopButton.tsx
View file

@ -5,7 +5,7 @@ export default function StopButton({ stop, setShowStopButton }) {
<div className="flex h-full flex-row items-center justify-center gap-3"> <div className="flex h-full flex-row items-center justify-center gap-3">
<button <button
type="button" type="button"
className="border-gizmo-gray-950 rounded-full border-2 p-1 dark:border-gray-200" className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"
aria-label="Stop generating" aria-label="Stop generating"
onClick={(e) => { onClick={(e) => {
setShowStopButton(false); setShowStopButton(false);
@ -16,7 +16,7 @@ export default function StopButton({ stop, setShowStopButton }) {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="currentColor" fill="currentColor"
className="text-gizmo-gray-950 h-2 w-2 dark:text-gray-200" className="text-gizmo-gray-900 h-2 w-2 dark:text-gray-200"
height="16" height="16"
width="16" width="16"
> >

2
client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
View file

@ -132,7 +132,7 @@ const MenuItem: FC<MenuItemProps> = ({
'invisible flex gap-x-1 group-hover:visible', 'invisible flex gap-x-1 group-hover:visible',
selected ? 'visible' : '', selected ? 'visible' : '',
expiryTime expiryTime
? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-900' ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-800'
: '', : '',
)} )}
onClick={(e) => { onClick={(e) => {

2
client/src/components/Chat/Menus/EndpointsMenu.tsx
View file

@ -43,7 +43,7 @@ const EndpointsMenu: FC = () => {
<Content <Content
side="bottom" side="bottom"
align="start" align="start"
className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white lg:max-h-[75vh]" className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[75vh]"
> >
<EndpointItems endpoints={endpoints} selected={endpoint} /> <EndpointItems endpoints={endpoints} selected={endpoint} />
</Content> </Content>

9
client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
View file

@ -92,7 +92,7 @@ const EditPresetDialog = ({
</div> </div>
</div> </div>
</div> </div>
<div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" /> <div className="my-4 w-full border-t border-gray-300 dark:border-gray-700" />
<div className="w-full p-0"> <div className="w-full p-0">
<EndpointSettings <EndpointSettings
conversation={preset} conversation={preset}
@ -106,12 +106,15 @@ const EditPresetDialog = ({
} }
buttons={ buttons={
<div className="mb-6 md:mb-2"> <div className="mb-6 md:mb-2">
<DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700"> <DialogButton
onClick={exportPreset}
className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-600"
>
{localize('com_endpoint_export')} {localize('com_endpoint_export')}
</DialogButton> </DialogButton>
<DialogClose <DialogClose
onClick={submitPreset} onClick={submitPreset}
className="dark:hover:gray-400 ml-2 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800" className="ml-2 bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
> >
{localize('com_ui_save')} {localize('com_ui_save')}
</DialogClose> </DialogClose>

25
client/src/components/Chat/Menus/Presets/PresetItems.tsx
View file

@ -9,7 +9,7 @@ import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
import { PinIcon, EditIcon, TrashIcon } from '~/components/svg'; import { PinIcon, EditIcon, TrashIcon } from '~/components/svg';
import DialogTemplate from '~/components/ui/DialogTemplate'; import DialogTemplate from '~/components/ui/DialogTemplate';
import { getPresetTitle, getEndpointField } from '~/utils'; import { getPresetTitle, getEndpointField } from '~/utils';
import { Dialog, DialogTrigger } from '~/components/ui/'; import { Dialog, DialogTrigger, Label } from '~/components/ui/';
import { MenuSeparator, MenuItem } from '../UI'; import { MenuSeparator, MenuItem } from '../UI';
import { icons } from '../Endpoints/Icons'; import { icons } from '../Endpoints/Icons';
import { useLocalize } from '~/hooks'; import { useLocalize } from '~/hooks';
@ -55,21 +55,32 @@ const PresetItems: FC<{
<DialogTrigger asChild> <DialogTrigger asChild>
<label <label
htmlFor="file-upload" htmlFor="file-upload"
className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500" className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
> >
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" /> <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
{localize('com_ui_clear')} {localize('com_ui_all')} {localize('com_ui_clear')} {localize('com_ui_all')}
</label> </label>
</DialogTrigger> </DialogTrigger>
<DialogTemplate <DialogTemplate
showCloseButton={false}
title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`} title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
description={localize('com_endpoint_presets_clear_warning')} className="max-w-[450px]"
main={
<>
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
{localize('com_endpoint_presets_clear_warning')}
</Label>
</div>
</div>
</>
}
selection={{ selection={{
selectHandler: clearAllPresets, selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white', selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_clear'), selectText: localize('com_ui_clear'),
}} }}
className="max-w-[500px]"
/> />
<FileUpload onFileSelected={onFileSelected} /> <FileUpload onFileSelected={onFileSelected} />
</Dialog> </Dialog>
@ -124,7 +135,7 @@ const PresetItems: FC<{
> >
<div className="flex h-full items-center justify-end gap-1"> <div className="flex h-full items-center justify-end gap-1">
<button <button
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible" className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -134,7 +145,7 @@ const PresetItems: FC<{
<PinIcon unpin={defaultPreset?.presetId === preset.presetId} /> <PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
</button> </button>
<button <button
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible" className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -144,7 +155,7 @@ const PresetItems: FC<{
<EditIcon /> <EditIcon />
</button> </button>
<button <button
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible" className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

4
client/src/components/Chat/Menus/PresetsMenu.tsx
View file

@ -29,7 +29,7 @@ const PresetsMenu: FC = () => {
className={cn( className={cn(
'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm', 'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20', 'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0', 'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
)} )}
id="presets-button" id="presets-button"
data-testid="presets-button" data-testid="presets-button"
@ -52,7 +52,7 @@ const PresetsMenu: FC = () => {
<Content <Content
side="bottom" side="bottom"
align="center" align="center"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white md:min-w-[400px]" className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white md:min-w-[400px]"
> >
<PresetItems <PresetItems
presets={presets} presets={presets}

2
client/src/components/Chat/Menus/UI/MenuSeparator.tsx
View file

@ -4,7 +4,7 @@ const MenuSeparator: FC = () => (
<div <div
role="separator" role="separator"
aria-orientation="horizontal" aria-orientation="horizontal"
className="my-1.5 border-b bg-gray-100 dark:border-gray-700" className="my-1.5 border-b bg-gray-200 dark:border-gray-700"
/> />
); );

2
client/src/components/Chat/Messages/Content/Image.tsx
View file

@ -49,7 +49,7 @@ const Image = ({
return ( return (
<Dialog.Root> <Dialog.Root>
<div className=""> <div className="">
<div className="relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400"> <div className="relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button type="button" aria-haspopup="dialog" aria-expanded="false"> <button type="button" aria-haspopup="dialog" aria-expanded="false">
<LazyLoadImage <LazyLoadImage

4
client/src/components/Chat/Messages/Content/MessageContent.tsx
View file

@ -21,7 +21,7 @@ export const ErrorMessage = ({ text }: TText) => {
} }
return ( return (
<Container> <Container>
<div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100"> <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
<Error text={text} /> <Error text={text} />
</div> </div>
</Container> </Container>
@ -59,7 +59,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
className={cn( className={cn(
showCursor && !!text?.length ? 'result-streaming' : '', showCursor && !!text?.length ? 'result-streaming' : '',
'markdown prose dark:prose-invert light w-full break-words', 'markdown prose dark:prose-invert light w-full break-words',
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70', isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
)} )}
> >
{!isCreatedByUser ? ( {!isCreatedByUser ? (

2
client/src/components/Chat/Messages/Content/Part.tsx
View file

@ -48,7 +48,7 @@ export default function Part({
// Access the value property // Access the value property
return ( return (
<Container> <Container>
<div className="markdown prose dark:prose-invert light my-1 w-full break-words dark:text-gray-70"> <div className="markdown prose dark:prose-invert light dark:text-gray-70 my-1 w-full break-words">
<DisplayMessage <DisplayMessage
text={part[ContentTypes.TEXT].value} text={part[ContentTypes.TEXT].value}
isCreatedByUser={message.isCreatedByUser} isCreatedByUser={message.isCreatedByUser}

10
client/src/components/Chat/Messages/HoverButtons.tsx
View file

@ -55,10 +55,10 @@ export default function HoverButtons({
<div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start"> <div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
<button <button
className={cn( className={cn(
'hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
isCreatedByUser ? '' : 'active', isCreatedByUser ? '' : 'active',
hideEditButton ? 'opacity-0' : '', hideEditButton ? 'opacity-0' : '',
isEditing ? 'active bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '', isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
)} )}
onClick={onEdit} onClick={onEdit}
type="button" type="button"
@ -69,7 +69,7 @@ export default function HoverButtons({
</button> </button>
<button <button
className={cn( className={cn(
'ml-0 flex items-center gap-1.5 rounded-md p-1 pl-0 text-xs hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'ml-0 flex items-center gap-1.5 rounded-md p-1 pl-0 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '', isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={() => copyToClipboard(setIsCopied)} onClick={() => copyToClipboard(setIsCopied)}
@ -82,7 +82,7 @@ export default function HoverButtons({
</button> </button>
{regenerateEnabled ? ( {regenerateEnabled ? (
<button <button
className="hover-button active rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible" className="hover-button active rounded-md p-1 pl-0 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible"
onClick={regenerate} onClick={regenerate}
type="button" type="button"
title={localize('com_ui_regenerate')} title={localize('com_ui_regenerate')}
@ -92,7 +92,7 @@ export default function HoverButtons({
) : null} ) : null}
{continueSupported ? ( {continueSupported ? (
<button <button
className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible " className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
onClick={handleContinue} onClick={handleContinue}
type="button" type="button"
title={localize('com_ui_continue')} title={localize('com_ui_continue')}

4
client/src/components/Chat/Messages/MessagesView.tsx
View file

@ -41,7 +41,7 @@ export default function MessagesView({
> >
<div className="flex flex-col pb-9 text-sm dark:bg-transparent"> <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
{(_messagesTree && _messagesTree?.length == 0) || _messagesTree === null ? ( {(_messagesTree && _messagesTree?.length == 0) || _messagesTree === null ? (
<div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300"> <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
Nothing found Nothing found
</div> </div>
) : ( ) : (
@ -59,7 +59,7 @@ export default function MessagesView({
</> </>
)} )}
<div <div
className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-900/50" className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50"
ref={messagesEndRef} ref={messagesEndRef}
/> />
</div> </div>

6
client/src/components/Conversations/Conversation.jsx
View file

@ -106,12 +106,12 @@ export default function Conversation({ conversation, retainView }) {
const aProps = { const aProps = {
className: className:
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800', 'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-300 dark:bg-gray-800 py-3 px-3 pr-14',
}; };
if (currentConversation?.conversationId !== conversationId) { if (currentConversation?.conversationId !== conversationId) {
aProps.className = aProps.className =
'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-900 hover:pr-4'; 'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-200 dark:hover:bg-gray-800 hover:pr-4';
} }
return ( return (
@ -149,7 +149,7 @@ export default function Conversation({ conversation, retainView }) {
/> />
</div> </div>
) : ( ) : (
<div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-black group-hover:from-gray-900" /> <div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-gray-50 group-hover:from-gray-50 dark:from-gray-900 dark:group-hover:from-gray-800" />
)} )}
</a> </a>
); );

15
client/src/components/Conversations/Convo.tsx
View file

@ -9,7 +9,7 @@ import { useUpdateConversationMutation } from '~/data-provider';
import { MinimalIcon } from '~/components/Endpoints'; import { MinimalIcon } from '~/components/Endpoints';
import { NotificationSeverity } from '~/common'; import { NotificationSeverity } from '~/common';
import { useToastContext } from '~/Providers'; import { useToastContext } from '~/Providers';
import DeleteButton from './NewDeleteButton'; import DeleteButton from './DeleteButton';
import { getEndpointField } from '~/utils'; import { getEndpointField } from '~/utils';
import RenameButton from './RenameButton'; import RenameButton from './RenameButton';
import store from '~/store'; import store from '~/store';
@ -103,6 +103,9 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
error: false, error: false,
className: 'mr-0', className: 'mr-0',
isCreatedByUser: false, isCreatedByUser: false,
chatGptLabel: undefined,
modelLabel: undefined,
jailbreak: undefined,
}); });
const handleKeyDown = (e: KeyEvent) => { const handleKeyDown = (e: KeyEvent) => {
@ -112,7 +115,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
}; };
const aProps = { const aProps = {
className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-800 py-2 px-2 ${ className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2 ${
renaming ? 'pr-14' : '' renaming ? 'pr-14' : ''
}`, }`,
}; };
@ -123,7 +126,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
if (!activeConvo) { if (!activeConvo) {
aProps.className = aProps.className =
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-900'; 'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-200 dark:hover:bg-gray-800';
} }
return ( return (
@ -153,11 +156,11 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
{activeConvo ? ( {activeConvo ? (
<div <div
className={`absolute bottom-0 right-1 top-0 w-20 bg-gradient-to-l ${ className={`absolute bottom-0 right-1 top-0 w-20 bg-gradient-to-l ${
!renaming ? 'from-gray-800 from-60% to-transparent' : '' !renaming ? 'from-gray-100 from-60% to-transparent dark:from-gray-800' : ''
}`} }`}
></div> ></div>
) : ( ) : (
<div className="from--gray-900 absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div> <div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:w-1 group-hover:from-60% dark:from-gray-900"></div>
)} )}
{activeConvo ? ( {activeConvo ? (
<div className="visible absolute right-1 z-10 flex text-gray-400"> <div className="visible absolute right-1 z-10 flex text-gray-400">
@ -170,7 +173,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
/> />
</div> </div>
) : ( ) : (
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-black from-0% to-transparent group-hover:from-gray-900" /> <div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-50 dark:from-gray-900 dark:group-hover:from-gray-900" />
)} )}
</a> </a>
); );

8
client/src/components/Conversations/DeleteButton.tsx
View file

@ -38,9 +38,12 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button> <button className="p-1 hover:text-black dark:hover:text-white">
{renaming ? <CrossIcon /> : <TrashIcon />}
</button>
</DialogTrigger> </DialogTrigger>
<DialogTemplate <DialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_conversation')} title={localize('com_ui_delete_conversation')}
className="max-w-[450px]" className="max-w-[450px]"
main={ main={
@ -56,7 +59,8 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
} }
selection={{ selection={{
selectHandler: confirmDelete, selectHandler: confirmDelete,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white', selectClasses:
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_delete'), selectText: localize('com_ui_delete'),
}} }}
/> />

66
client/src/components/Conversations/NewDeleteButton.tsx
View file

@ -1,66 +0,0 @@
import { useParams } from 'react-router-dom';
import { QueryKeys } from 'librechat-data-provider';
import { useQueryClient } from '@tanstack/react-query';
import type { TMessage } from 'librechat-data-provider';
import { useLocalize, useConversations, useNewConvo } from '~/hooks';
import { useDeleteConversationMutation } from '~/data-provider';
import { Dialog, DialogTrigger, Label } from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { TrashIcon, CrossIcon } from '~/components/svg';
export default function DeleteButton({ conversationId, renaming, retainView, title }) {
const localize = useLocalize();
const queryClient = useQueryClient();
// TODO: useNewConvo uses indices so we need to update global index state on every switch to Convo
const { newConversation } = useNewConvo();
const { refreshConversations } = useConversations();
const { conversationId: currentConvoId } = useParams();
const deleteConvoMutation = useDeleteConversationMutation();
const confirmDelete = () => {
const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
const thread_id = messages?.[messages?.length - 1]?.thread_id;
deleteConvoMutation.mutate(
{ conversationId, thread_id, source: 'button' },
{
onSuccess: () => {
if (currentConvoId == conversationId) {
newConversation();
}
refreshConversations();
retainView();
},
},
);
};
return (
<Dialog>
<DialogTrigger asChild>
<button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button>
</DialogTrigger>
<DialogTemplate
title={localize('com_ui_delete_conversation')}
className="max-w-[450px]"
main={
<>
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
{localize('com_ui_delete_conversation_confirm')} <strong>{title}</strong>
</Label>
</div>
</div>
</>
}
selection={{
selectHandler: confirmDelete,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</Dialog>
);
}

4
client/src/components/Conversations/RenameButton.tsx
View file

@ -15,7 +15,9 @@ export default function RenameButton({
twcss, twcss,
}: RenameButtonProps): ReactElement { }: RenameButtonProps): ReactElement {
const handler = renaming ? onRename : renameHandler; const handler = renaming ? onRename : renameHandler;
const classProp: { className?: string } = { className: 'p-1 hover:text-white' }; const classProp: { className?: string } = {
className: 'p-1 hover:text-black dark:hover:text-white',
};
if (twcss) { if (twcss) {
classProp.className = twcss; classProp.className = twcss;
} }

1
client/src/components/Conversations/index.ts
View file

@ -1,5 +1,4 @@
export { default as Pages } from './Pages'; export { default as Pages } from './Pages';
export { default as Conversation } from './Conversation'; export { default as Conversation } from './Conversation';
export { default as DeleteButton } from './DeleteButton';
export { default as RenameButton } from './RenameButton'; export { default as RenameButton } from './RenameButton';
export { default as Conversations } from './Conversations'; export { default as Conversations } from './Conversations';

4
client/src/components/Endpoints/EndpointOptionsPopover.tsx
View file

@ -45,7 +45,7 @@ export default function EndpointOptionsPopover({
<div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60"> <div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
<Button <Button
type="button" type="button"
className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0" className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
onClick={saveAsPreset} onClick={saveAsPreset}
> >
<Save className="mr-1 w-[14px]" /> <Save className="mr-1 w-[14px]" />
@ -55,7 +55,7 @@ export default function EndpointOptionsPopover({
<Button <Button
type="button" type="button"
className={cn( className={cn(
'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white', 'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
removeFocusOutlines, removeFocusOutlines,
)} )}
onClick={closePopover} onClick={closePopover}

8
client/src/components/Endpoints/MinimalIcon.tsx
View file

@ -4,7 +4,7 @@ import {
AzureMinimalIcon, AzureMinimalIcon,
OpenAIMinimalIcon, OpenAIMinimalIcon,
LightningIcon, LightningIcon,
PluginMinimalIcon, MinimalPlugin,
BingAIMinimalIcon, BingAIMinimalIcon,
GoogleMinimalIcon, GoogleMinimalIcon,
CustomMinimalIcon, CustomMinimalIcon,
@ -29,7 +29,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
name: props.chatGptLabel || 'ChatGPT', name: props.chatGptLabel || 'ChatGPT',
}, },
[EModelEndpoint.openAI]: { icon: <OpenAIMinimalIcon />, name: props.chatGptLabel || 'ChatGPT' }, [EModelEndpoint.openAI]: { icon: <OpenAIMinimalIcon />, name: props.chatGptLabel || 'ChatGPT' },
[EModelEndpoint.gptPlugins]: { icon: <PluginMinimalIcon />, name: 'Plugins' }, [EModelEndpoint.gptPlugins]: { icon: <MinimalPlugin />, name: 'Plugins' },
[EModelEndpoint.google]: { icon: <GoogleMinimalIcon />, name: props.modelLabel || 'Google' }, [EModelEndpoint.google]: { icon: <GoogleMinimalIcon />, name: props.modelLabel || 'Google' },
[EModelEndpoint.anthropic]: { [EModelEndpoint.anthropic]: {
icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />, icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />,
@ -66,13 +66,13 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
height: size, height: size,
}} }}
className={cn( className={cn(
'relative flex items-center justify-center rounded-sm text-white', 'relative flex items-center justify-center rounded-sm text-black dark:text-white',
props.className || '', props.className || '',
)} )}
> >
{icon} {icon}
{error && ( {error && (
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white"> <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-black dark:text-white">
! !
</span> </span>
)} )}

2
client/src/components/Endpoints/PopoverButtons.tsx
View file

@ -66,7 +66,7 @@ export default function PopoverButtons({
type="button" type="button"
className={cn( className={cn(
button.buttonClass, button.buttonClass,
'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0', 'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
buttonClass ?? '', buttonClass ?? '',
)} )}
onClick={button.handler} onClick={button.handler}

7
client/src/components/Endpoints/SaveAsPresetDialog.tsx
View file

@ -50,7 +50,8 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate <DialogTemplate
title={localize('com_endpoint_save_as_preset')} title={localize('com_endpoint_save_as_preset')}
className="w-full sm:w-1/4" className="w-11/12 sm:w-1/4"
showCloseButton={false}
main={ main={
<div className="flex w-full flex-col items-center gap-2"> <div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2"> <div className="grid w-full items-center gap-2">
@ -64,7 +65,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
placeholder="Set a custom name for this preset" placeholder="Set a custom name for this preset"
className={cn( className={cn(
defaultTextPropsLabel, defaultTextPropsLabel,
'flex h-10 max-h-10 w-full resize-none px-3 py-2', 'flex h-10 max-h-10 w-full resize-none border-gray-100 px-3 py-2 dark:border-gray-600',
removeFocusOutlines, removeFocusOutlines,
)} )}
/> />
@ -73,7 +74,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
} }
selection={{ selection={{
selectHandler: submitPreset, selectHandler: submitPreset,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white', selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
selectText: localize('com_ui_save'), selectText: localize('com_ui_save'),
}} }}
/> />

4
client/src/components/Endpoints/Settings/Examples.tsx
View file

@ -78,14 +78,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
<div className="flex justify-center"> <div className="flex justify-center">
<Button <Button
type="button" type="button"
className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0" className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
onClick={removeExample} onClick={removeExample}
> >
<Minus className="w-[16px]" /> <Minus className="w-[16px]" />
</Button> </Button>
<Button <Button
type="button" type="button"
className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0" className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
onClick={addExample} onClick={addExample}
> >
<Plus className="w-[16px]" /> <Plus className="w-[16px]" />

1
client/src/components/Endpoints/index.ts
View file

@ -2,7 +2,6 @@ export { default as Icon } from './Icon';
export { default as MinimalIcon } from './MinimalIcon'; export { default as MinimalIcon } from './MinimalIcon';
export { default as PopoverButtons } from './PopoverButtons'; export { default as PopoverButtons } from './PopoverButtons';
export { default as EndpointSettings } from './EndpointSettings'; export { default as EndpointSettings } from './EndpointSettings';
export { default as EditPresetDialog } from './EditPresetDialog';
export { default as SaveAsPresetDialog } from './SaveAsPresetDialog'; export { default as SaveAsPresetDialog } from './SaveAsPresetDialog';
export { default as EndpointOptionsDialog } from './EndpointOptionsDialog'; export { default as EndpointOptionsDialog } from './EndpointOptionsDialog';
export { default as EndpointOptionsPopover } from './EndpointOptionsPopover'; export { default as EndpointOptionsPopover } from './EndpointOptionsPopover';

2
client/src/components/Input/EndpointMenu/EndpointItem.tsx
View file

@ -42,7 +42,7 @@ export default function ModelItem({
<DropdownMenuRadioItem <DropdownMenuRadioItem
value={value} value={value}
className={cn( className={cn(
'group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800', 'group dark:font-semibold dark:text-gray-200 dark:hover:bg-gray-800',
isSelected ? 'active bg-gray-50 dark:bg-gray-800' : '', isSelected ? 'active bg-gray-50 dark:bg-gray-800' : '',
)} )}
id={endpoint} id={endpoint}

21
client/src/components/Input/EndpointMenu/EndpointMenu.jsx
View file

@ -7,7 +7,7 @@ import {
useCreatePresetMutation, useCreatePresetMutation,
useGetEndpointsQuery, useGetEndpointsQuery,
} from 'librechat-data-provider/react-query'; } from 'librechat-data-provider/react-query';
import { Icon, EditPresetDialog } from '~/components/Endpoints'; import { Icon } from '~/components/Endpoints';
import EndpointItems from './EndpointItems'; import EndpointItems from './EndpointItems';
import PresetItems from './PresetItems'; import PresetItems from './PresetItems';
import FileUpload from './FileUpload'; import FileUpload from './FileUpload';
@ -37,8 +37,6 @@ export default function NewConversationMenu() {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const [showPresets, setShowPresets] = useState(true); const [showPresets, setShowPresets] = useState(true);
const [showEndpoints, setShowEndpoints] = useState(true); const [showEndpoints, setShowEndpoints] = useState(true);
const [presetModalVisible, setPresetModalVisible] = useState(false);
const [preset, setPreset] = useState(false);
const [conversation, setConversation] = useRecoilState(store.conversation) ?? {}; const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
const [messages, setMessages] = useRecoilState(store.messages); const [messages, setMessages] = useRecoilState(store.messages);
@ -130,11 +128,6 @@ export default function NewConversationMenu() {
newConversation({}, newPreset); newConversation({}, newPreset);
}; };
const onChangePreset = (preset) => {
setPresetModalVisible(true);
setPreset(preset);
};
const clearAllPresets = () => { const clearAllPresets = () => {
deletePresetsMutation.mutate({ arg: {} }); deletePresetsMutation.mutate({ arg: {} });
}; };
@ -158,7 +151,7 @@ export default function NewConversationMenu() {
}; };
return ( return (
<TooltipProvider delayDuration={300}> <TooltipProvider delayDuration={250}>
<Tooltip> <Tooltip>
<Dialog className="z-[100]"> <Dialog className="z-[100]">
<DropdownMenu open={menuOpen} onOpenChange={onOpenChange}> <DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
@ -180,7 +173,7 @@ export default function NewConversationMenu() {
{localize('com_endpoint_open_menu')} {localize('com_endpoint_open_menu')}
</TooltipContent> </TooltipContent>
<DropdownMenuContent <DropdownMenuContent
className="z-[100] w-[375px] dark:bg-gray-900 md:w-96" className="z-[100] w-[375px] dark:bg-gray-800 md:w-96"
onCloseAutoFocus={(event) => event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()}
side="top" side="top"
> >
@ -226,7 +219,7 @@ export default function NewConversationMenu() {
<DialogTrigger asChild> <DialogTrigger asChild>
<label <label
htmlFor="file-upload" htmlFor="file-upload"
className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500" className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
> >
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" /> <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
{localize('com_ui_clear')} {localize('com_ui_all')} {localize('com_ui_clear')} {localize('com_ui_all')}
@ -257,7 +250,6 @@ export default function NewConversationMenu() {
<PresetItems <PresetItems
presets={presets} presets={presets}
onSelect={onSelectPreset} onSelect={onSelectPreset}
onChangePreset={onChangePreset}
onDeletePreset={onDeletePreset} onDeletePreset={onDeletePreset}
/> />
) : ( ) : (
@ -268,11 +260,6 @@ export default function NewConversationMenu() {
</DropdownMenuRadioGroup> </DropdownMenuRadioGroup>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<EditPresetDialog
open={presetModalVisible}
onOpenChange={setPresetModalVisible}
preset={preset}
/>
</Dialog> </Dialog>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>

2
client/src/components/Input/EndpointMenu/FileUpload.tsx
View file

@ -66,7 +66,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
<label <label
htmlFor={`file-upload-${id}`} htmlFor={`file-upload-${id}`}
className={cn( className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500', 'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
statusColor, statusColor,
containerClassName, containerClassName,
)} )}

2
client/src/components/Input/EndpointMenu/PresetItem.tsx
View file

@ -67,7 +67,7 @@ export default function PresetItem({
<DropdownMenuRadioItem <DropdownMenuRadioItem
/* @ts-ignore, value can be an object as well */ /* @ts-ignore, value can be an object as well */
value={value} value={value}
className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800 sm:h-auto" className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-200 dark:hover:bg-gray-800 sm:h-auto"
> >
<div className="flex items-center justify-start"> <div className="flex items-center justify-start">
{icon} {icon}

8
client/src/components/Input/SetKeyDialog/HelpText.tsx
View file

@ -6,7 +6,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
const localize = useLocalize(); const localize = useLocalize();
const textMap = { const textMap = {
[EModelEndpoint.bingAI]: ( [EModelEndpoint.bingAI]: (
<small className="break-all text-gray-600"> <small className="break-all text-gray-500">
{localize('com_endpoint_config_key_get_edge_key')}{' '} {localize('com_endpoint_config_key_get_edge_key')}{' '}
<a <a
target="_blank" target="_blank"
@ -30,7 +30,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
</small> </small>
), ),
[EModelEndpoint.chatGPTBrowser]: ( [EModelEndpoint.chatGPTBrowser]: (
<small className="break-all text-gray-600"> <small className="break-all text-gray-500">
{localize('com_endpoint_config_key_chatgpt')}{' '} {localize('com_endpoint_config_key_chatgpt')}{' '}
<a <a
target="_blank" target="_blank"
@ -56,7 +56,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
), ),
[EModelEndpoint.google]: ( [EModelEndpoint.google]: (
<> <>
<small className="break-all text-gray-600"> <small className="break-all text-gray-500">
{localize('com_endpoint_config_google_service_key')} {localize('com_endpoint_config_google_service_key')}
{': '} {': '}
{localize('com_endpoint_config_key_google_need_to')}{' '} {localize('com_endpoint_config_key_google_need_to')}{' '}
@ -80,7 +80,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
{'. '} {'. '}
{localize('com_endpoint_config_key_google_vertex_api_role')} {localize('com_endpoint_config_key_google_vertex_api_role')}
</small> </small>
<small className="break-all text-gray-600"> <small className="break-all text-gray-500">
{localize('com_endpoint_config_google_api_key')} {localize('com_endpoint_config_google_api_key')}
{': '} {': '}
{localize('com_endpoint_config_google_api_info')}{' '} {localize('com_endpoint_config_google_api_info')}{' '}

2
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
View file

@ -188,7 +188,7 @@ const SetKeyDialog = ({
} }
selection={{ selection={{
selectHandler: submit, selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white', selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
selectText: localize('com_ui_submit'), selectText: localize('com_ui_submit'),
}} }}
leftButtons={ leftButtons={

6
client/src/components/Input/SubmitButton.tsx
View file

@ -69,7 +69,7 @@ export default function SubmitButton({
if (isSubmitting && isSmallScreen) { if (isSubmitting && isSmallScreen) {
return ( return (
<button onClick={handleStopGenerating} type="button"> <button onClick={handleStopGenerating} type="button">
<div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent"> <div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-200 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-800 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
<StopGeneratingIcon /> <StopGeneratingIcon />
</div> </div>
</button> </button>
@ -93,7 +93,7 @@ export default function SubmitButton({
type="button" type="button"
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500" className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500"
> >
<div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent"> <div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-200 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-800 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
<div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2"> <div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
<Settings className="mr-1 inline-block h-auto w-[18px]" /> <Settings className="mr-1 inline-block h-auto w-[18px]" />
{localize('com_endpoint_config_key_name_placeholder')} {localize('com_endpoint_config_key_name_placeholder')}
@ -107,7 +107,7 @@ export default function SubmitButton({
); );
} else { } else {
return ( return (
<TooltipProvider delayDuration={50}> <TooltipProvider delayDuration={250}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <button

14
client/src/components/Input/TextChat.tsx
View file

@ -150,11 +150,11 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
className="no-gradient-sm fixed bottom-0 left-0 w-full pt-6 sm:bg-gradient-to-b md:absolute md:w-[calc(100%-.5rem)]" className="no-gradient-sm fixed bottom-0 left-0 w-full pt-6 sm:bg-gradient-to-b md:absolute md:w-[calc(100%-.5rem)]"
style={{ style={{
background: `linear-gradient(to bottom, background: `linear-gradient(to bottom,
${isDark ? 'rgba(52, 53, 65, 0)' : 'rgba(255, 255, 255, 0)'}, ${isDark ? 'rgba(23, 23, 23, 0)' : 'rgba(255, 255, 255, 0)'},
${isDark ? 'rgba(52, 53, 65, 0.08)' : 'rgba(255, 255, 255, 0.08)'}, ${isDark ? 'rgba(23, 23, 23, 0.08)' : 'rgba(255, 255, 255, 0.08)'},
${isDark ? 'rgba(52, 53, 65, 0.38)' : 'rgba(255, 255, 255, 0.38)'}, ${isDark ? 'rgba(23, 23, 23, 0.38)' : 'rgba(255, 255, 255, 0.38)'},
${isDark ? 'rgba(52, 53, 65, 1)' : 'rgba(255, 255, 255, 1)'}, ${isDark ? 'rgba(23, 23, 23, 1)' : 'rgba(255, 255, 255, 1)'},
${isDark ? '#343541' : '#ffffff'})`, ${isDark ? '#171717' : '#ffffff'})`,
}} }}
> >
<OptionsBar /> <OptionsBar />
@ -165,8 +165,8 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
className={cn( className={cn(
'relative flex flex-grow flex-row rounded-xl border border-black/10 py-[10px] md:py-4 md:pl-4', 'relative flex flex-grow flex-row rounded-xl border border-black/10 py-[10px] md:py-4 md:pl-4',
'shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]', 'shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]',
'dark:border-gray-900/50 dark:text-white', 'dark:border-gray-800/50 dark:text-white',
disabled ? 'bg-gray-100 dark:bg-gray-900' : 'bg-white dark:bg-gray-700', disabled ? 'bg-gray-200 dark:bg-gray-800' : 'bg-white dark:bg-gray-700',
)} )}
> >
<EndpointMenu /> <EndpointMenu />

4
client/src/components/Messages/Content/CodeBlock.tsx
View file

@ -20,7 +20,7 @@ type CodeBlockProps = Pick<CodeBarProps, 'lang' | 'plugin' | 'error'> & {
const CodeBar: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, error, plugin = null }) => { const CodeBar: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, error, plugin = null }) => {
const [isCopied, setIsCopied] = useState(false); const [isCopied, setIsCopied] = useState(false);
return ( return (
<div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200 dark:bg-gray-900"> <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-700 px-4 py-2 font-sans text-xs text-gray-200 dark:bg-gray-700">
<span className="">{lang}</span> <span className="">{lang}</span>
{plugin ? ( {plugin ? (
<InfoIcon className="ml-auto flex h-4 w-4 gap-2 text-white/50" /> <InfoIcon className="ml-auto flex h-4 w-4 gap-2 text-white/50" />
@ -67,7 +67,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
const language = plugin || error ? 'json' : lang; const language = plugin || error ? 'json' : lang;
return ( return (
<div className="w-full rounded-md bg-black text-xs text-white/80"> <div className="w-full rounded-md bg-gray-900 text-xs text-white/80">
<CodeBar lang={lang} codeRef={codeRef} plugin={!!plugin} error={error} /> <CodeBar lang={lang} codeRef={codeRef} plugin={!!plugin} error={error} />
<div className={cn(classProp, 'overflow-y-auto p-4')}> <div className={cn(classProp, 'overflow-y-auto p-4')}>
<code <code

4
client/src/components/Messages/Content/MessageContent.tsx
View file

@ -18,7 +18,7 @@ const ErrorMessage = ({ text }: TText) => {
} }
return ( return (
<Container> <Container>
<div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100"> <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
<Error text={text} /> <Error text={text} />
</div> </div>
</Container> </Container>
@ -31,7 +31,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
<div <div
className={cn( className={cn(
'markdown prose dark:prose-invert light w-full break-words', 'markdown prose dark:prose-invert light w-full break-words',
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70', isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
)} )}
> >
{!isCreatedByUser ? ( {!isCreatedByUser ? (

4
client/src/components/Messages/Content/Plugin.tsx
View file

@ -86,7 +86,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
<div <div
className={cn( className={cn(
plugin.loading ? 'bg-green-100' : 'bg-gray-20', plugin.loading ? 'bg-green-100' : 'bg-gray-20',
'my-1 flex items-center rounded p-3 text-xs text-gray-900', 'my-1 flex items-center rounded p-3 text-xs text-gray-800',
)} )}
> >
<div> <div>
@ -94,7 +94,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
<div>{generateStatus()}</div> <div>{generateStatus()}</div>
</div> </div>
</div> </div>
{plugin.loading && <Spinner className="ml-1" />} {plugin.loading && <Spinner className="ml-1 text-black" />}
<Disclosure.Button className="ml-12 flex items-center gap-2"> <Disclosure.Button className="ml-12 flex items-center gap-2">
<ChevronDownIcon {...iconProps} /> <ChevronDownIcon {...iconProps} />
</Disclosure.Button> </Disclosure.Button>

10
client/src/components/Messages/HoverButtons.tsx
View file

@ -51,10 +51,10 @@ export default function HoverButtons({
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2"> <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
<button <button
className={cn( className={cn(
'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible', 'hover-button rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
isCreatedByUser ? '' : 'active', isCreatedByUser ? '' : 'active',
hideEditButton ? 'opacity-0' : '', hideEditButton ? 'opacity-0' : '',
isEditing ? 'active bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '', isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
)} )}
onClick={onEdit} onClick={onEdit}
type="button" type="button"
@ -65,7 +65,7 @@ export default function HoverButtons({
</button> </button>
<button <button
className={cn( className={cn(
'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible', 'hover-button rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
isCreatedByUser ? '' : 'active', isCreatedByUser ? '' : 'active',
)} )}
onClick={() => copyToClipboard(setIsCopied)} onClick={() => copyToClipboard(setIsCopied)}
@ -78,7 +78,7 @@ export default function HoverButtons({
</button> </button>
{regenerateEnabled ? ( {regenerateEnabled ? (
<button <button
className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible" className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
onClick={regenerate} onClick={regenerate}
type="button" type="button"
title={localize('com_ui_regenerate')} title={localize('com_ui_regenerate')}
@ -88,7 +88,7 @@ export default function HoverButtons({
) : null} ) : null}
{continueSupported ? ( {continueSupported ? (
<button <button
className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible " className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
onClick={handleContinue} onClick={handleContinue}
type="button" type="button"
title={localize('com_ui_continue')} title={localize('com_ui_continue')}

4
client/src/components/Messages/Message.tsx
View file

@ -88,10 +88,10 @@ export default function Message(props: TMessageProps) {
}; };
const commonClasses = const commonClasses =
'w-full border-b text-gray-800 group border-black/10 dark:border-gray-900/50 dark:text-gray-100'; 'w-full border-b text-gray-800 group border-black/10 dark:border-gray-800/50 dark:text-gray-200';
const uniqueClasses = isCreatedByUser const uniqueClasses = isCreatedByUser
? 'bg-white dark:bg-gray-800 dark:text-gray-20' ? 'bg-white dark:bg-gray-800 dark:text-gray-20'
: 'bg-gray-50 dark:bg-gray-1000 dark:text-gray-70'; : 'bg-gray-50 dark:bg-gray-700 dark:text-gray-100';
const messageProps = { const messageProps = {
className: cn(commonClasses, uniqueClasses), className: cn(commonClasses, uniqueClasses),

2
client/src/components/Messages/MessageHeader.tsx
View file

@ -90,7 +90,7 @@ const MessageHeader = ({ isSearchView = false }) => {
<> <>
<div <div
className={cn( className={cn(
'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700', 'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-800/50 dark:bg-gray-800 dark:hover:bg-gray-700',
isNotClickable ? '' : 'cursor-pointer', isNotClickable ? '' : 'cursor-pointer',
'sticky top-0 z-10', 'sticky top-0 z-10',
)} )}

4
client/src/components/Messages/Messages.tsx
View file

@ -84,7 +84,7 @@ export default function Messages({ isSearchView = false }) {
<Spinner /> <Spinner />
</div> </div>
) : _messagesTree?.length == 0 && isSearchView ? ( ) : _messagesTree?.length == 0 && isSearchView ? (
<div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300"> <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
Nothing found Nothing found
</div> </div>
) : ( ) : (
@ -114,7 +114,7 @@ export default function Messages({ isSearchView = false }) {
</> </>
)} )}
<div <div
className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-900/50" className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50"
ref={messagesEndRef} ref={messagesEndRef}
/> />
</div> </div>

2
client/src/components/Nav/ExportConversation/ExportModal.jsx
View file

@ -435,7 +435,7 @@ export default function ExportModal({ open, onOpenChange, conversation }) {
<> <>
<DialogButton <DialogButton
onClick={exportConversation} onClick={exportConversation}
className="dark:hover:gray-400 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800" className="dark:hover:gray-400 border-gray-700 bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
> >
{localize('com_endpoint_export')} {localize('com_endpoint_export')}
</DialogButton> </DialogButton>

2
client/src/components/Nav/Logout.tsx
View file

@ -9,7 +9,7 @@ const Logout = forwardRef(() => {
return ( return (
<button <button
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700" className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
onClick={() => logout()} onClick={() => logout()}
> >
<LogOutIcon /> <LogOutIcon />

6
client/src/components/Nav/MobileNav.tsx
View file

@ -15,11 +15,11 @@ export default function MobileNav({
const { title = 'New Chat' } = conversation || {}; const { title = 'New Chat' } = conversation || {};
return ( return (
<div className="text-token-primary border-token-border-medium bg-token-surface-primary dark:bg-token-surface-secondary sticky top-0 z-10 flex min-h-[40px] items-center border-b dark:text-white md:hidden"> <div className="text-token-primary border-token-border-medium bg-token-surface-primary sticky top-0 z-10 flex min-h-[40px] items-center border-b bg-white dark:bg-gray-800 dark:text-white md:hidden">
<button <button
type="button" type="button"
data-testid="mobile-header-new-chat-button" data-testid="mobile-header-new-chat-button"
className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white" className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
onClick={() => setNavVisible((prev) => !prev)} onClick={() => setNavVisible((prev) => !prev)}
> >
<span className="sr-only">{localize('com_nav_open_sidebar')}</span> <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
@ -44,7 +44,7 @@ export default function MobileNav({
</h1> </h1>
<button <button
type="button" type="button"
className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white" className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
onClick={() => newConversation()} onClick={() => newConversation()}
> >
<svg <svg

4
client/src/components/Nav/Nav.tsx
View file

@ -110,11 +110,11 @@ export default function Nav({ navVisible, setNavVisible }) {
}; };
return ( return (
<TooltipProvider delayDuration={150}> <TooltipProvider delayDuration={250}>
<Tooltip> <Tooltip>
<div <div
className={ className={
'nav active dark max-w-[320px] flex-shrink-0 overflow-x-hidden bg-black md:max-w-[260px]' 'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-900 md:max-w-[260px]'
} }
style={{ style={{
width: navVisible ? navWidth : '0px', width: navVisible ? navWidth : '0px',

26
client/src/components/Nav/NavLinks.tsx
View file

@ -60,14 +60,14 @@ function NavLinks() {
{({ open }) => ( {({ open }) => (
<> <>
{startupConfig?.checkBalance && balanceQuery.data && ( {startupConfig?.checkBalance && balanceQuery.data && (
<div className="m-1 ml-3 whitespace-nowrap text-left text-sm text-gray-100"> <div className="m-1 ml-3 whitespace-nowrap text-left text-sm text-black dark:text-gray-200">
{`Balance: ${balanceQuery.data}`} {`Balance: ${balanceQuery.data}`}
</div> </div>
)} )}
<Menu.Button <Menu.Button
className={cn( className={cn(
'group-ui-open:bg-[#202123] duration-350 mt-text-sm mb-1 flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-[#202123]', 'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
open ? 'bg-[#202123]' : '', open ? 'bg-gray-100 dark:bg-gray-700' : '',
)} )}
data-testid="nav-user" data-testid="nav-user"
> >
@ -90,7 +90,7 @@ function NavLinks() {
</div> </div>
</div> </div>
<div <div
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-white" className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
style={{ marginTop: '-4px', marginLeft: '2px' }} style={{ marginTop: '-4px', marginLeft: '2px' }}
> >
{user?.name || localize('com_nav_user')} {user?.name || localize('com_nav_user')}
@ -106,22 +106,24 @@ function NavLinks() {
leaveFrom="translate-y-0 opacity-100" leaveFrom="translate-y-0 opacity-100"
leaveTo="translate-y-2 opacity-0" leaveTo="translate-y-2 opacity-0"
> >
<Menu.Items className="absolute bottom-full left-0 z-20 mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-[#202123] py-1.5 opacity-100 outline-none"> <Menu.Items className="absolute bottom-full left-0 z-20 mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-white py-1.5 opacity-100 outline-none dark:bg-gray-800">
<Menu.Item as="div"> <Menu.Item as="div">
<NavLink <NavLink
className={cn( className={cn(
'flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700', 'flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50', exportable
? 'cursor-pointer text-black dark:text-white'
: 'cursor-not-allowed text-black/50 dark:text-white/50',
)} )}
svg={() => <Download size={16} />} svg={() => <Download size={16} />}
text={localize('com_nav_export_conversation')} text={localize('com_nav_export_conversation')}
clickHandler={clickHandler} clickHandler={clickHandler}
/> />
</Menu.Item> </Menu.Item>
<div className="my-1 h-px bg-white/20" role="none" /> <div className="my-1 h-px bg-black/20 dark:bg-white/20" role="none" />
<Menu.Item as="div"> <Menu.Item as="div">
<NavLink <NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700" className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
svg={() => <FileText className="icon-md" />} svg={() => <FileText className="icon-md" />}
text="My Files" text="My Files"
clickHandler={() => setShowFiles(true)} clickHandler={() => setShowFiles(true)}
@ -130,7 +132,7 @@ function NavLinks() {
{startupConfig?.helpAndFaqURL !== '/' && ( {startupConfig?.helpAndFaqURL !== '/' && (
<Menu.Item as="div"> <Menu.Item as="div">
<NavLink <NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700" className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
svg={() => <LinkIcon />} svg={() => <LinkIcon />}
text={localize('com_nav_help_faq')} text={localize('com_nav_help_faq')}
clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')} clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')}
@ -139,13 +141,13 @@ function NavLinks() {
)} )}
<Menu.Item as="div"> <Menu.Item as="div">
<NavLink <NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700" className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
svg={() => <GearIcon className="icon-md" />} svg={() => <GearIcon className="icon-md" />}
text={localize('com_nav_settings')} text={localize('com_nav_settings')}
clickHandler={() => setShowSettings(true)} clickHandler={() => setShowSettings(true)}
/> />
</Menu.Item> </Menu.Item>
<div className="my-1 h-px bg-white/20" role="none" /> <div className="my-1 h-px bg-black/20 bg-white/20" role="none" />
<Menu.Item as="div"> <Menu.Item as="div">
<Logout /> <Logout />
</Menu.Item> </Menu.Item>

16
client/src/components/Nav/NewChat.tsx
View file

@ -10,6 +10,7 @@ import {
import { icons } from '~/components/Chat/Menus/Endpoints/Icons'; import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
import { NewChatIcon } from '~/components/svg'; import { NewChatIcon } from '~/components/svg';
import { getEndpointField } from '~/utils'; import { getEndpointField } from '~/utils';
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
export default function NewChat({ export default function NewChat({
toggleNav, toggleNav,
@ -42,16 +43,18 @@ export default function NewChat({
}; };
return ( return (
<div className="sticky left-0 right-0 top-0 z-20 bg-black pt-3.5"> <TooltipProvider delayDuration={250}>
<Tooltip>
<div className="sticky left-0 right-0 top-0 z-20 bg-gray-50 pt-3.5 dark:bg-gray-900">
<div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}> <div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}>
<a <a
href="/" href="/"
data-testid="nav-new-chat-button" data-testid="nav-new-chat-button"
onClick={clickHandler} onClick={clickHandler}
className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-900" className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-200 dark:hover:bg-gray-800"
> >
<div className="h-7 w-7 flex-shrink-0"> <div className="h-7 w-7 flex-shrink-0">
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black"> <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white">
{endpoint && {endpoint &&
Icon && Icon &&
Icon({ Icon({
@ -68,14 +71,21 @@ export default function NewChat({
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<span className="flex items-center" data-state="closed"> <span className="flex items-center" data-state="closed">
<TooltipTrigger asChild>
<button type="button" className="text-token-text-primary"> <button type="button" className="text-token-text-primary">
<NewChatIcon className="h-[18px] w-[18px]" /> <NewChatIcon className="h-[18px] w-[18px]" />
</button> </button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={20}>
{localize('com_ui_new_chat')}
</TooltipContent>
</span> </span>
</div> </div>
</a> </a>
</div> </div>
{subHeaders ? subHeaders : null} {subHeaders ? subHeaders : null}
</div> </div>
</Tooltip>
</TooltipProvider>
); );
} }

2
client/src/components/Nav/SearchBar.tsx
View file

@ -44,7 +44,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
return ( return (
<div <div
ref={ref} ref={ref}
className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-black px-2 px-3 py-2 text-white transition-colors duration-200 hover:bg-gray-900 focus:bg-gray-900" className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-gray-50 px-2 px-3 py-2 text-black transition-colors duration-200 hover:bg-gray-200 focus:bg-gray-800 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
> >
{<Search className="absolute left-3 h-4 w-4" />} {<Search className="absolute left-3 h-4 w-4" />}
<input <input

58
client/src/components/Nav/Settings.tsx
View file

@ -14,18 +14,10 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent <DialogContent
className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:min-h-[373px] md:w-[680px]')} className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]')}
style={{
borderRadius: '12px',
position: 'fixed',
margin: 'auto',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}}
> >
<DialogHeader> <DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200"> <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
{localize('com_nav_settings')} {localize('com_nav_settings')}
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
@ -41,66 +33,62 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
aria-orientation="vertical" aria-orientation="vertical"
className={cn( className={cn(
'min-w-auto -ml-[8px] flex flex-shrink-0 flex-col', 'min-w-auto -ml-[8px] flex flex-shrink-0 flex-col',
isSmallScreen ? 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30' : '', isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-800/30' : '',
)} )}
style={{ outline: 'none' }} style={{ outline: 'none' }}
> >
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800', 'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
isSmallScreen isSmallScreen
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen isSmallScreen ? '' : 'dark:bg-gray-800',
? ''
: 'dark:bg-gray-900',
)} )}
value={SettingsTabValues.GENERAL} value={SettingsTabValues.GENERAL}
style={{ userSelect: 'none' }}
> >
<GearIcon /> <GearIcon />
{localize('com_nav_setting_general')} {localize('com_nav_setting_general')}
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800', 'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
isSmallScreen isSmallScreen
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen isSmallScreen ? '' : 'dark:bg-gray-800',
? ''
: 'dark:bg-gray-900',
)} )}
value={SettingsTabValues.BETA} value={SettingsTabValues.BETA}
style={{ userSelect: 'none' }}
> >
<ExperimentIcon /> <ExperimentIcon />
{localize('com_nav_setting_beta')} {localize('com_nav_setting_beta')}
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800', 'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
isSmallScreen isSmallScreen
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen isSmallScreen ? '' : 'dark:bg-gray-800',
? ''
: 'dark:bg-gray-900',
)} )}
value={SettingsTabValues.DATA} value={SettingsTabValues.DATA}
style={{ userSelect: 'none' }}
> >
<DataIcon /> <DataIcon />
{localize('com_nav_setting_data')} {localize('com_nav_setting_data')}
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800', 'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
isSmallScreen isSmallScreen
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen isSmallScreen ? '' : 'dark:bg-gray-800',
? ''
: 'dark:bg-gray-900',
)} )}
value={SettingsTabValues.ACCOUNT} value={SettingsTabValues.ACCOUNT}
style={{ userSelect: 'none' }}
> >
<UserIcon /> <UserIcon />
{localize('com_nav_setting_account')} {localize('com_nav_setting_account')}

2
client/src/components/Nav/SettingsTabs/Account/Account.tsx
View file

@ -24,7 +24,7 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
role="tabpanel" role="tabpanel"
className="w-full md:min-h-[300px]" className="w-full md:min-h-[300px]"
> >
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300"> <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700"> <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<Avatar /> <Avatar />
</div> </div>

6
client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
View file

@ -81,7 +81,7 @@ function Avatar() {
<span>{localize('com_nav_profile_picture')}</span> <span>{localize('com_nav_profile_picture')}</span>
<label <label
htmlFor={'file-upload-avatar'} htmlFor={'file-upload-avatar'}
className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-800 dark:hover:text-green-500" className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-800 dark:hover:text-green-500"
> >
<FileImage className="mr-1 flex w-[22px] items-center stroke-1" /> <FileImage className="mr-1 flex w-[22px] items-center stroke-1" />
<span>{localize('com_nav_change_picture')}</span> <span>{localize('com_nav_change_picture')}</span>
@ -98,11 +98,11 @@ function Avatar() {
<Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}> <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
<DialogContent <DialogContent
className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:h-[350px] md:w-[450px] ')} className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:h-[350px] md:w-[450px] ')}
style={{ borderRadius: '12px' }} style={{ borderRadius: '12px' }}
> >
<DialogHeader> <DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200"> <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
{localize('com_ui_preview')} {localize('com_ui_preview')}
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>

2
client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
View file

@ -11,7 +11,7 @@ function Beta() {
role="tabpanel" role="tabpanel"
className="w-full md:min-h-[300px]" className="w-full md:min-h-[300px]"
> >
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300"> <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700"> <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<ModularChat /> <ModularChat />
</div> </div>

2
client/src/components/Nav/SettingsTabs/Data/Data.tsx
View file

@ -72,7 +72,7 @@ function Data() {
role="tabpanel" role="tabpanel"
className="w-full md:min-h-[300px]" className="w-full md:min-h-[300px]"
> >
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300"> <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700"> <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<RevokeKeysButton all={true} /> <RevokeKeysButton all={true} />
</div> </div>

2
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -174,7 +174,7 @@ function General() {
className="w-full md:min-h-[300px]" className="w-full md:min-h-[300px]"
ref={contentRef} ref={contentRef}
> >
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300"> <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700"> <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<ThemeSelector theme={theme} onChange={changeTheme} /> <ThemeSelector theme={theme} onChange={changeTheme} />
</div> </div>

3
client/src/components/Plugins/Store/PluginPagination.tsx
View file

@ -31,6 +31,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
? 'text-black/70 opacity-50 dark:text-white/70' ? 'text-black/70 opacity-50 dark:text-white/70'
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50' : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`} }`}
style={{ userSelect: 'none' }}
> >
<svg <svg
stroke="currentColor" stroke="currentColor"
@ -57,6 +58,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600' ? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600'
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50' : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`} }`}
style={{ userSelect: 'none' }}
onClick={() => onChangePage(page)} onClick={() => onChangePage(page)}
> >
{page} {page}
@ -71,6 +73,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
? 'text-black/70 opacity-50 dark:text-white/70' ? 'text-black/70 opacity-50 dark:text-white/70'
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50' : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`} }`}
style={{ userSelect: 'none' }}
> >
Next Next
<svg <svg

12
client/src/components/Plugins/Store/PluginStoreDialog.tsx
View file

@ -123,17 +123,17 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
className="relative z-[102]" className="relative z-[102]"
> >
{/* The backdrop, rendered as a fixed sibling to the panel container */} {/* The backdrop, rendered as a fixed sibling to the panel container */}
<div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" /> <div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />
{/* Full-screen container to center the panel */} {/* Full-screen container to center the panel */}
<div className="fixed inset-0 flex items-center justify-center p-4"> <div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel <Dialog.Panel
className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl dark:bg-gray-900" className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-800 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
style={{ minHeight: '610px' }} style={{ minHeight: '610px' }}
> >
<div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 sm:p-6 dark:border-white/10"> <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
<div className="flex items-center"> <div className="flex items-center">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<Dialog.Title className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200"> <Dialog.Title className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
{localize('com_nav_plugin_store')} {localize('com_nav_plugin_store')}
</Dialog.Title> </Dialog.Title>
</div> </div>
@ -145,7 +145,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
setIsOpen(false); setIsOpen(false);
setCurrentPage(1); setCurrentPage(1);
}} }}
className="inline-block text-gray-500 hover:text-gray-100" className="inline-block text-gray-500 hover:text-gray-200"
tabIndex={0} tabIndex={0}
> >
<X /> <X />
@ -178,7 +178,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
value={searchValue} value={searchValue}
onChange={handleSearch} onChange={handleSearch}
placeholder={localize('com_nav_plugin_search')} placeholder={localize('com_nav_plugin_search')}
className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200" className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
/> />
</div> </div>
<div <div

2
client/src/components/Plugins/Store/PluginStoreItem.tsx
View file

@ -21,7 +21,7 @@ function PluginStoreItem({ plugin, onInstall, onUninstall, isInstalled }: TPlugi
return ( return (
<> <>
<div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-900"> <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-800">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="h-[70px] w-[70px] shrink-0"> <div className="h-[70px] w-[70px] shrink-0">
<div className="relative h-full w-full"> <div className="relative h-full w-full">

2
client/src/components/SidePanel/Builder/ActionsAuth.tsx
View file

@ -106,7 +106,7 @@ export default function ActionsAuth({
{/* Cancel/Save */} {/* Cancel/Save */}
<div className="mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse"> <div className="mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse">
<button <button
className="btn btn-dark relative" className="btn relative bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
onClick={async () => { onClick={async () => {
const result = await trigger(undefined, { shouldFocus: true }); const result = await trigger(undefined, { shouldFocus: true });
setValue('saved_auth_fields', result); setValue('saved_auth_fields', result);

2
client/src/components/SidePanel/Builder/ActionsPanel.tsx
View file

@ -107,7 +107,7 @@ export default function ActionsPanel({
<button <button
type="button" type="button"
disabled={!assistant_id || !action.action_id} disabled={!assistant_id || !action.action_id}
className="btn btn-neutral relative text-red-500" className="btn relative bg-transparent text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
onClick={() => { onClick={() => {
if (!assistant_id) { if (!assistant_id) {
return prompt('No assistant_id found, is the assistant created?'); return prompt('No assistant_id found, is the assistant created?');

6
client/src/components/SidePanel/Builder/AssistantPanel.tsx
View file

@ -391,7 +391,7 @@ export default function AssistantPanel({
<button <button
type="button" type="button"
onClick={() => setShowToolDialog(true)} onClick={() => setShowToolDialog(true)}
className="btn btn-neutral border-token-border-light relative mx-1 mt-2 h-8 rounded-lg font-medium" className="btn border-token-border-light relative mx-1 mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
> >
<div className="flex w-full items-center justify-center gap-2"> <div className="flex w-full items-center justify-center gap-2">
{localize('com_assistants_add_tools')} {localize('com_assistants_add_tools')}
@ -409,7 +409,7 @@ export default function AssistantPanel({
} }
setActivePanel(Panel.actions); setActivePanel(Panel.actions);
}} }}
className="btn btn-neutral border-token-border-light relative mt-2 h-8 rounded-lg font-medium" className="btn border-token-border-light relative mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
> >
<div className="flex w-full items-center justify-center gap-2"> <div className="flex w-full items-center justify-center gap-2">
{localize('com_assistants_add_actions')} {localize('com_assistants_add_actions')}
@ -440,7 +440,7 @@ export default function AssistantPanel({
)} )}
{/* Submit Button */} {/* Submit Button */}
<button <button
className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500" className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
type="submit" type="submit"
> >
{create.isLoading || update.isLoading ? ( {create.isLoading || update.isLoading ? (

6
client/src/components/SidePanel/Builder/AssistantSelect.tsx
View file

@ -166,14 +166,14 @@ export default function AssistantSelect({
emptyTitle={true} emptyTitle={true}
containerClassName="flex-grow" containerClassName="flex-grow"
optionsClass="hover:bg-gray-20/50 dark:border-gray-700" optionsClass="hover:bg-gray-20/50 dark:border-gray-700"
optionsListClass="rounded-lg shadow-lg dark:bg-black dark:border-gray-700 dark:last:border" optionsListClass="rounded-lg shadow-lg dark:bg-gray-900 dark:border-gray-700 dark:last:border"
currentValueClass={cn( currentValueClass={cn(
'text-md font-semibold text-gray-900 dark:text-white', 'text-md font-semibold text-gray-900 dark:text-white',
value === '' ? 'text-gray-500' : '', value === '' ? 'text-gray-500' : '',
)} )}
className={cn( className={cn(
'mt-1 rounded-md dark:border-gray-700 dark:bg-black', 'mt-1 rounded-md dark:border-gray-700 dark:bg-gray-900',
'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-green-500', 'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-gray-400',
)} )}
renderOption={() => ( renderOption={() => (
<span className="flex items-center gap-1.5 truncate"> <span className="flex items-center gap-1.5 truncate">

4
client/src/components/SidePanel/Builder/ContextButton.tsx
View file

@ -65,7 +65,7 @@ export default function ContextButton({
<Popover.Trigger asChild> <Popover.Trigger asChild>
<button <button
className={cn( className={cn(
'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium', 'btn border-token-border-light relative h-9 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800',
removeFocusOutlines, removeFocusOutlines,
)} )}
type="button" type="button"
@ -103,7 +103,7 @@ export default function ContextButton({
<Popover.Content <Popover.Content
side="top" side="top"
role="menu" role="menu"
className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-black" className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-900 dark:bg-gray-900"
style={{ outline: 'none', pointerEvents: 'auto' }} style={{ outline: 'none', pointerEvents: 'auto' }}
sideOffset={8} sideOffset={8}
tabIndex={-1} tabIndex={-1}

4
client/src/components/SidePanel/Builder/Images.tsx
View file

@ -98,12 +98,12 @@ export function AvatarMenu({
return ( return (
<Popover.Portal> <Popover.Portal>
<Popover.Content <Popover.Content
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-black dark:text-white" className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
sideOffset={5} sideOffset={5}
> >
<div <div
role="menuitem" role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5" className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
tabIndex={-1} tabIndex={-1}
data-orientation="vertical" data-orientation="vertical"
onClick={onItemClick} onClick={onItemClick}

2
client/src/components/SidePanel/Files/PanelTable.tsx
View file

@ -88,7 +88,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
<TableHead <TableHead
key={header.id} key={header.id}
style={{ width: index === 0 ? '75%' : '25%' }} style={{ width: index === 0 ? '75%' : '25%' }}
className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-black dark:text-gray-100" className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-100"
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null

2
client/src/components/SidePanel/Nav.tsx
View file

@ -75,7 +75,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
variant === 'default' variant === 'default'
? 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white' ? 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white'
: '', : '',
'data-[state=open]:bg-gray-900 data-[state=open]:text-white dark:data-[state=open]:bg-gray-800', 'hover:bg-gray-50 data-[state=open]:bg-gray-50 data-[state=open]:text-black dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-white',
'w-full justify-start rounded-md border dark:border-gray-600', 'w-full justify-start rounded-md border dark:border-gray-600',
)} )}
> >

6
client/src/components/SidePanel/SidePanel.tsx
View file

@ -172,7 +172,7 @@ export default function SidePanel({
localStorage.setItem('react-resizable-panels:collapsed', 'true'); localStorage.setItem('react-resizable-panels:collapsed', 'true');
}} }}
className={cn( className={cn(
'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-black', 'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-900',
isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]', isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
minSize === 0 ? 'min-w-0' : '', minSize === 0 ? 'min-w-0' : '',
)} )}
@ -180,12 +180,12 @@ export default function SidePanel({
{keyProvided && ( {keyProvided && (
<div <div
className={cn( className={cn(
'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-black', 'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-gray-900',
isCollapsed ? 'h-[52px]' : 'px-2', isCollapsed ? 'h-[52px]' : 'px-2',
)} )}
> >
<Switcher isCollapsed={isCollapsed} /> <Switcher isCollapsed={isCollapsed} />
<Separator className="bg-gray-100/50" /> <Separator className="bg-gray-100/50 dark:bg-gray-600" />
</div> </div>
)} )}

14
client/src/components/SidePanel/Switcher.tsx
View file

@ -59,7 +59,7 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
isCollapsed isCollapsed
? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden' ? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden'
: '', : '',
'bg-white', 'bg-white text-black hover:bg-gray-50 dark:bg-gray-900 dark:text-white',
)} )}
aria-label={localize('com_sidepanel_select_assistant')} aria-label={localize('com_sidepanel_select_assistant')}
> >
@ -72,16 +72,20 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''} iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''}
/> />
</div> </div>
<span className={cn('ml-2', isCollapsed ? 'hidden' : '')}> <span className={cn('ml-2', isCollapsed ? 'hidden' : '')} style={{ userSelect: 'none' }}>
{assistants.find((assistant) => assistant.id === selectedAssistant)?.name ?? {assistants.find((assistant) => assistant.id === selectedAssistant)?.name ??
localize('com_sidepanel_select_assistant')} localize('com_sidepanel_select_assistant')}
</span> </span>
</SelectValue> </SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent className="bg-white"> <SelectContent className="bg-white dark:bg-gray-800">
{assistants.map((assistant) => ( {assistants.map((assistant) => (
<SelectItem key={assistant.id} value={assistant.id}> <SelectItem
<div className="[&_svg]:text-foreground flex items-center justify-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 "> key={assistant.id}
value={assistant.id}
className="hover:bg-gray-50 dark:text-white"
>
<div className="[&_svg]:text-foreground flex items-center justify-center gap-3 dark:text-white [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0">
<div className="assistant-item overflow-hidden rounded-full "> <div className="assistant-item overflow-hidden rounded-full ">
<Icon <Icon
isCreatedByUser={false} isCreatedByUser={false}

2
client/src/components/Tools/ToolItem.tsx
View file

@ -20,7 +20,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
}; };
return ( return (
<div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-900"> <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-800">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="h-[70px] w-[70px] shrink-0"> <div className="h-[70px] w-[70px] shrink-0">
<div className="relative h-full w-full"> <div className="relative h-full w-full">

10
client/src/components/Tools/ToolSelectDialog.tsx
View file

@ -138,11 +138,11 @@ function ToolSelectDialog({
className="relative z-[102]" className="relative z-[102]"
> >
{/* The backdrop, rendered as a fixed sibling to the panel container */} {/* The backdrop, rendered as a fixed sibling to the panel container */}
<div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" /> <div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />
{/* Full-screen container to center the panel */} {/* Full-screen container to center the panel */}
<div className="fixed inset-0 flex items-center justify-center p-4"> <div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel <Dialog.Panel
className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-900 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl" className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-800 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
style={{ minHeight: '610px' }} style={{ minHeight: '610px' }}
> >
<div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6"> <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
@ -163,7 +163,7 @@ function ToolSelectDialog({
setIsOpen(false); setIsOpen(false);
setCurrentPage(1); setCurrentPage(1);
}} }}
className="inline-block text-gray-500 hover:text-gray-100" className="inline-block text-gray-500 hover:text-gray-200"
tabIndex={0} tabIndex={0}
> >
<X /> <X />
@ -196,8 +196,8 @@ function ToolSelectDialog({
type="text" type="text"
value={searchValue} value={searchValue}
onChange={handleSearch} onChange={handleSearch}
placeholder={localize('com_nav_tool_search')} placeholder={localize('com_nav_plugin_search')}
className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200" className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
/> />
</div> </div>
<div <div

21
client/src/components/svg/PluginMinimalIcon.tsx
View file

@ -1,21 +0,0 @@
import React from 'react';
export default function PluginMinimalIcon() {
return (
<svg
stroke="currentColor"
fill="none"
strokeWidth="1"
viewBox="0 0 16 16"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13.164.98a.7.7 0 0 0-1.328 0l-.478 1.435a.7.7 0 0 1-.443.443l-1.436.478a.7.7 0 0 0 0 1.328l1.436.479a.7.7 0 0 1 .443.442l.478 1.436a.7.7 0 0 0 1.328 0l.478-1.436a.7.7 0 0 1 .443-.443l1.436-.478a.7.7 0 0 0 0-1.328l-1.436-.478a.7.7 0 0 1-.443-.443L13.164.979Z" />
<path d="M13.237 10.534c-.228-.245-.513-.46-.847-.46a.823.823 0 0 0-.828.849c.04 1.04.128 2.067.263 3.08a.619.619 0 0 1-.528.695c-.872.121-1.748.208-2.626.262a.8.8 0 0 1-.845-.805c0-.325.21-.602.45-.82.235-.215.375-.488.375-.787 0-.683-.738-1.237-1.65-1.237-.911 0-1.65.554-1.65 1.237 0 .294.137.563.364.775.245.229.461.513.461.848a.823.823 0 0 1-.85.829 33.809 33.809 0 0 1-3.266-.278.619.619 0 0 1-.532-.532 34.099 34.099 0 0 1-.278-3.267.823.823 0 0 1 .83-.85c.333 0 .619.216.846.461.212.228.482.364.776.364.683 0 1.237-.738 1.237-1.65 0-.91-.554-1.65-1.237-1.65-.299 0-.572.142-.786.376-.219.24-.496.45-.821.45a.8.8 0 0 1-.805-.845c.054-.885.142-1.76.262-2.626a.619.619 0 0 1 .695-.528c1.022.136 2.05.224 3.08.263a.822.822 0 0 0 .85-.828c0-.334-.217-.62-.462-.847-.227-.212-.363-.482-.363-.776C5.352 1.554 6.09 1 7.002 1c.91 0 1.649.554 1.649 1.237 0 .173-.012.327-.029.473C8.258 3 8 3.41 8 4c0 1.5 1.667 1.833 2.5 2 .167.833.5 2.5 2 2.5.732 0 1.186-.397 1.479-.9l.034-.001c.683 0 1.237.738 1.237 1.65 0 .911-.554 1.65-1.237 1.65-.294 0-.564-.137-.776-.364Z" />
</svg>
);
}

1
client/src/components/svg/index.ts
View file

@ -34,7 +34,6 @@ export { default as MinimalPlugin } from './MinimalPlugin';
export { default as AzureMinimalIcon } from './AzureMinimalIcon'; export { default as AzureMinimalIcon } from './AzureMinimalIcon';
export { default as OpenAIMinimalIcon } from './OpenAIMinimalIcon'; export { default as OpenAIMinimalIcon } from './OpenAIMinimalIcon';
export { default as ChatGPTMinimalIcon } from './ChatGPTMinimalIcon'; export { default as ChatGPTMinimalIcon } from './ChatGPTMinimalIcon';
export { default as PluginMinimalIcon } from './PluginMinimalIcon';
export { default as BingAIMinimalIcon } from './BingAIMinimalIcon'; export { default as BingAIMinimalIcon } from './BingAIMinimalIcon';
export { default as PaLMinimalIcon } from './PaLMinimalIcon'; export { default as PaLMinimalIcon } from './PaLMinimalIcon';
export { default as PaLMIcon } from './PaLMIcon'; export { default as PaLMIcon } from './PaLMIcon';

4
client/src/components/ui/AlertDialog.tsx
View file

@ -98,7 +98,7 @@ const AlertDialogAction = React.forwardRef<
<AlertDialogPrimitive.Action <AlertDialogPrimitive.Action
ref={ref} ref={ref}
className={cn( className={cn(
'inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900', 'inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-gray-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
className, className,
)} )}
{...props} {...props}
@ -113,7 +113,7 @@ const AlertDialogCancel = React.forwardRef<
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
ref={ref} ref={ref}
className={cn( className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0', 'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
className, className,
)} )}
{...props} {...props}

12
client/src/components/ui/Button.tsx
View file

@ -4,18 +4,18 @@ import { VariantProps, cva } from 'class-variance-authority';
import { cn } from '../../utils'; import { cn } from '../../utils';
const buttonVariants = cva( const buttonVariants = cva(
'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-gray-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-800', 'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none dark:hover:bg-gray-800 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-800',
{ {
variants: { variants: {
variant: { variant: {
default: 'bg-gray-900 text-white hover:bg-gray-900 dark:bg-gray-50 dark:text-slate-900', default: 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-50 dark:text-gray-900',
destructive: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600', destructive: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600',
outline: outline:
'bg-transparent border border-slate-200 hover:bg-gray-100 dark:border-slate-700 dark:text-slate-100', 'bg-transparent border border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100',
subtle: 'bg-gray-100 text-slate-900 hover:bg-gray-200 dark:bg-gray-900 dark:text-slate-100', subtle: 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100',
ghost: ghost:
'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent', 'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-100 dark:hover:text-gray-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
link: 'bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent', link: 'bg-transparent underline-offset-4 hover:underline text-gray-900 dark:text-gray-100 hover:bg-transparent dark:hover:bg-transparent',
}, },
size: { size: {
default: 'h-10 py-2 px-4', default: 'h-10 py-2 px-4',

22
client/src/components/ui/Dialog.tsx
View file

@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Button } from '../ui/Button'; import { Button } from '../ui/Button';
import { X } from 'lucide-react'; import { X } from 'lucide-react';
import { cn } from '~/utils'; import { cn } from '~/utils';
import { useMediaQuery } from '~/hooks';
const Dialog = DialogPrimitive.Root; const Dialog = DialogPrimitive.Root;
@ -27,7 +28,7 @@ const DialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
className={cn( className={cn(
'fixed inset-0 z-[999] bg-gray-500/90 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in dark:bg-gray-800/90', 'fixed inset-0 z-[999] bg-gray-600/65 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in dark:bg-black/80',
className ?? '', className ?? '',
)} )}
{...props} {...props}
@ -38,15 +39,21 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef< const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>, React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
>(({ className, children, ...props }, ref) => ( >(({ className, children = true, ...props }, ref) => {
const isSmallScreen = useMediaQuery('(max-width: 768px)');
return (
<DialogPortal> <DialogPortal>
<DialogOverlay /> <DialogOverlay />
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0', 'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
'dark:bg-slate-900', 'dark:bg-slate-900',
isSmallScreen
? 'fixed left-1/2 top-24 z-[999] m-auto grid w-11/12 -translate-x-1/2 gap-4 rounded-xl bg-white pb-6'
: '',
className ?? '', className ?? '',
)} )}
{...props} {...props}
@ -58,7 +65,8 @@ const DialogContent = React.forwardRef<
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPortal> </DialogPortal>
)); );
});
DialogContent.displayName = DialogPrimitive.Content.displayName; DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@ -114,7 +122,7 @@ const DialogClose = React.forwardRef<
<DialogPrimitive.Close <DialogPrimitive.Close
ref={ref} ref={ref}
className={cn( className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0', 'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 sm:mt-0',
className ?? '', className ?? '',
)} )}
{...props} {...props}
@ -130,7 +138,7 @@ const DialogButton = React.forwardRef<
ref={ref} ref={ref}
variant="outline" variant="outline"
className={cn( className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0', 'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
className ?? '', className ?? '',
)} )}
{...props} {...props}

31
client/src/components/ui/DialogTemplate.tsx
View file

@ -25,25 +25,36 @@ type DialogTemplateProps = {
selection?: SelectionProps; selection?: SelectionProps;
className?: string; className?: string;
headerClassName?: string; headerClassName?: string;
showCloseButton?: boolean;
}; };
const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => { const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
const localize = useLocalize(); const localize = useLocalize();
const { title, description, main, buttons, leftButtons, selection, className, headerClassName } = const {
props; title,
description,
main,
buttons,
leftButtons,
selection,
className,
headerClassName,
showCloseButton,
} = props;
const { selectHandler, selectClasses, selectText } = selection || {}; const { selectHandler, selectClasses, selectText } = selection || {};
const Cancel = localize('com_ui_cancel'); const Cancel = localize('com_ui_cancel');
const defaultSelect = const defaultSelect =
'bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900'; 'bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-200';
return ( return (
<DialogContent <DialogContent
showCloseButton={showCloseButton}
ref={ref} ref={ref}
className={cn('shadow-2xl dark:bg-gray-900', className || '')} className={cn('shadow-2xl dark:bg-gray-800', className || '')}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<DialogHeader className={cn('sm:pb-2', headerClassName ?? '')}> <DialogHeader className={cn('sm:pb-7', headerClassName ?? '')}>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200"> <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
{title} {title}
</DialogTitle> </DialogTitle>
{description && ( {description && (
@ -55,15 +66,17 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
<div className="px-6">{main ? main : null}</div> <div className="px-6">{main ? main : null}</div>
<DialogFooter> <DialogFooter>
<div>{leftButtons ? leftButtons : null}</div> <div>{leftButtons ? leftButtons : null}</div>
<div className="flex h-auto gap-2"> <div className="flex h-auto gap-3">
<DialogClose className="dark:hover:gray-400 border-gray-700">{Cancel}</DialogClose> <DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
{Cancel}
</DialogClose>
{buttons ? buttons : null} {buttons ? buttons : null}
{selection ? ( {selection ? (
<DialogClose <DialogClose
onClick={selectHandler} onClick={selectHandler}
className={`${ className={`${
selectClasses || defaultSelect selectClasses || defaultSelect
} inline-flex h-10 items-center justify-center rounded-md border-none px-4 py-2 text-sm font-semibold`} } inline-flex h-10 items-center justify-center rounded-lg border-none px-4 py-2 text-sm`}
> >
{selectText} {selectText}
</DialogClose> </DialogClose>

4
client/src/components/ui/Dropdown.tsx
View file

@ -31,8 +31,8 @@ const Dropdown: FC<DropdownProps> = ({
const [selectedValue, setSelectedValue] = useState(initialValue); const [selectedValue, setSelectedValue] = useState(initialValue);
const themeStyles = { const themeStyles = {
light: 'bg-white text-gray-700 hover:bg-gray-200 border-gray-300', light: 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300',
dark: 'bg-[#202123] text-white hover:bg-[#323236] border-gray-600', dark: 'bg-gray-800 text-white hover:bg-gray-700 border-gray-600',
}; };
const isSystemDark = const isSystemDark =

2
client/src/components/ui/HoverCard.tsx
View file

@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
align={align} align={align}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
'z-50 w-64 rounded-md border border-gray-100 bg-white p-4 shadow-md outline-none animate-in fade-in-0 dark:border-gray-800 dark:bg-gray-800', 'z-50 w-64 rounded-md border border-gray-200 bg-white p-4 shadow-md outline-none animate-in fade-in-0 dark:border-gray-800 dark:bg-gray-800',
className, className,
)} )}
{...props} {...props}

2
client/src/components/ui/Input.tsx
View file

@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
return ( return (
<input <input
className={cn( className={cn(
'flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900', 'dark:border-gray-00 flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-50',
className ?? '', className ?? '',
)} )}
ref={ref} ref={ref}

2
client/src/components/ui/InputNumber.tsx
View file

@ -17,7 +17,7 @@ const InputNumber = React.forwardRef<
return ( return (
<RCInputNumber <RCInputNumber
className={cn( className={cn(
'flex max-h-5 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900', 'flex max-h-5 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50',
className ?? '', className ?? '',
)} )}
ref={ref} ref={ref}

10
client/src/components/ui/Landing.tsx
View file

@ -26,7 +26,7 @@ export default function Landing() {
return ( return (
<div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800"> <div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
<div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl"> <div className="w-full px-6 text-gray-800 dark:text-gray-200 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
<h1 <h1
id="landing-title" id="landing-title"
data-testid="landing-title" data-testid="landing-title"
@ -43,19 +43,19 @@ export default function Landing() {
<ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md"> <ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
<button <button
onClick={clickHandler} onClick={clickHandler}
className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900" className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-600"
> >
&quot;{localize('com_ui_example_quantum_computing')}&quot; → &quot;{localize('com_ui_example_quantum_computing')}&quot; →
</button> </button>
<button <button
onClick={clickHandler} onClick={clickHandler}
className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900" className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-600"
> >
&quot;{localize('com_ui_example_10_year_old_b_day')}&quot; → &quot;{localize('com_ui_example_10_year_old_b_day')}&quot; →
</button> </button>
<button <button
onClick={clickHandler} onClick={clickHandler}
className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900" className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-600"
> >
&quot;{localize('com_ui_example_http_in_js')}&quot; → &quot;{localize('com_ui_example_http_in_js')}&quot; →
</button> </button>
@ -108,7 +108,7 @@ export default function Landing() {
</div> </div>
)} )}
{!!showingTemplates && <Templates showTemplates={showTemplates}/>} */} {!!showingTemplates && <Templates showTemplates={showTemplates}/>} */}
{/* <div className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48" /> */} {/* <div className="group h-32 w-full flex-shrink-0 dark:border-gray-800/50 dark:bg-gray-800 md:h-48" /> */}
</div> </div>
</div> </div>
); );

10
client/src/components/ui/MultiSelectDropDown.tsx
View file

@ -77,7 +77,7 @@ function MultiSelectDropDown({
<span className="inline-flex w-full truncate" id={excludeIds[2]}> <span className="inline-flex w-full truncate" id={excludeIds[2]}>
<span <span
className={cn( className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white', 'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
!showLabel ? 'text-xs' : '', !showLabel ? 'text-xs' : '',
)} )}
> >
@ -147,7 +147,7 @@ function MultiSelectDropDown({
<Listbox.Option <Listbox.Option
key={i} key={i}
value={option[optionValueKey]} value={option[optionValueKey]}
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700" className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
> >
<span className="flex items-center gap-1.5 truncate"> <span className="flex items-center gap-1.5 truncate">
{!option.isButton && ( {!option.isButton && (
@ -168,19 +168,19 @@ function MultiSelectDropDown({
)} )}
<span <span
className={cn( className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100', 'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
selected ? 'font-semibold' : '', selected ? 'font-semibold' : '',
)} )}
> >
{option.name} {option.name}
</span> </span>
{option.isButton && ( {option.isButton && (
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100"> <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
<ArrowRight /> <ArrowRight />
</span> </span>
)} )}
{selected && !option.isButton && ( {selected && !option.isButton && (
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100"> <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
<CheckMark /> <CheckMark />
</span> </span>
)} )}

4
client/src/components/ui/MultiSelectPop.tsx
View file

@ -55,7 +55,7 @@ function MultiSelectPop({
<span className="inline-flex" id={excludeIds[2]}> <span className="inline-flex" id={excludeIds[2]}>
<span <span
className={cn( className={cn(
'flex h-6 items-center gap-1 text-sm text-gray-900 dark:text-white', 'flex h-6 items-center gap-1 text-sm text-gray-800 dark:text-white',
!showLabel ? 'text-xs' : '', !showLabel ? 'text-xs' : '',
)} )}
> >
@ -106,7 +106,7 @@ function MultiSelectPop({
<Content <Content
side="bottom" side="bottom"
align="center" align="center"
className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white" className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white"
> >
{availableValues.map((option) => { {availableValues.map((option) => {
if (!option) { if (!option) {

2
client/src/components/ui/Prompt.tsx
View file

@ -12,7 +12,7 @@ export default function Prompt({ title, prompt }: { title: string; prompt: strin
{title} {title}
</h2> </h2>
<button> <button>
<p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"> <p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-800">
{prompt} {prompt}
</p> </p>
</button> </button>

7
client/src/components/ui/Select.tsx
View file

@ -19,7 +19,8 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', 'border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 [&>span]:line-clamp-1',
'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
className, className,
)} )}
{...props} {...props}
@ -68,7 +69,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content <SelectPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-600',
position === 'popper' position === 'popper'
? 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1' ? 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
: '', : '',
@ -114,7 +115,7 @@ const SelectItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'rounded-lg hover:bg-gray-100/50', 'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
className, className,
)} )}
{...props} {...props}

12
client/src/components/ui/SelectDropDown.tsx
View file

@ -83,7 +83,7 @@ function SelectDropDown({
<span className="inline-flex w-full truncate"> <span className="inline-flex w-full truncate">
<span <span
className={cn( className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white', 'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
!showLabel ? 'text-xs' : '', !showLabel ? 'text-xs' : '',
currentValueClass ?? '', currentValueClass ?? '',
)} )}
@ -122,7 +122,7 @@ function SelectDropDown({
> >
<Listbox.Options <Listbox.Options
className={cn( className={cn(
'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs border ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]', 'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-base text-xs ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
optionsListClass ?? '', optionsListClass ?? '',
)} )}
> >
@ -131,7 +131,7 @@ function SelectDropDown({
key={'listbox-render-option'} key={'listbox-render-option'}
value={null} value={null}
className={cn( className={cn(
'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700', 'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
optionsClass ?? '', optionsClass ?? '',
)} )}
> >
@ -155,14 +155,14 @@ function SelectDropDown({
key={i} key={i}
value={currentValue} value={currentValue}
className={cn( className={cn(
'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700', 'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
optionsClass ?? '', optionsClass ?? '',
)} )}
> >
<span className="flex items-center gap-1.5 truncate"> <span className="flex items-center gap-1.5 truncate">
<span <span
className={cn( className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100', 'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
option === value ? 'font-semibold' : '', option === value ? 'font-semibold' : '',
iconSide === 'left' ? 'ml-4' : '', iconSide === 'left' ? 'ml-4' : '',
)} )}
@ -172,7 +172,7 @@ function SelectDropDown({
{currentValue === activeValue && ( {currentValue === activeValue && (
<span <span
className={cn( className={cn(
'absolute inset-y-0 flex items-center text-gray-800 dark:text-gray-100', 'absolute inset-y-0 flex items-center text-gray-800 dark:text-gray-200',
iconSide === 'left' ? 'left-0 pl-2' : 'right-0 pr-3', iconSide === 'left' ? 'left-0 pl-2' : 'right-0 pr-3',
)} )}
> >

4
client/src/components/ui/SelectDropDownPop.tsx
View file

@ -61,7 +61,7 @@ function SelectDropDownPop({
<span className="inline-flex w-full "> <span className="inline-flex w-full ">
<span <span
className={cn( className={cn(
'flex h-6 items-center gap-1 text-sm text-gray-900 dark:text-white', 'flex h-6 items-center gap-1 text-sm text-gray-800 dark:text-white',
!showLabel ? 'text-xs' : '', !showLabel ? 'text-xs' : '',
'min-w-[75px] font-normal', 'min-w-[75px] font-normal',
)} )}
@ -95,7 +95,7 @@ function SelectDropDownPop({
<Content <Content
side="bottom" side="bottom"
align="start" align="start"
className="mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white lg:max-h-[52vh]" className="mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[52vh]"
> >
{availableValues.map((option) => { {availableValues.map((option) => {
return ( return (

4
client/src/components/ui/Slider.tsx
View file

@ -15,7 +15,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
className={cn('relative flex w-full touch-none select-none items-center', className ?? '')} className={cn('relative flex w-full touch-none select-none items-center', className ?? '')}
{...props} {...props}
> >
<SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-100 dark:bg-gray-900"> <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
<SliderPrimitive.Range className="absolute h-full bg-gray-400 dark:bg-gray-400" /> <SliderPrimitive.Range className="absolute h-full bg-gray-400 dark:bg-gray-400" />
</SliderPrimitive.Track> </SliderPrimitive.Track>
<SliderPrimitive.Thumb <SliderPrimitive.Thumb
@ -25,7 +25,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
return; return;
}) })
} }
className="cursor-pointer block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900" className="block h-4 w-4 cursor-pointer rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-200 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800"
/> />
</SliderPrimitive.Root> </SliderPrimitive.Root>
), ),

4
client/src/components/ui/Switch.tsx
View file

@ -9,7 +9,7 @@ const Switch = React.forwardRef<
>(({ className = '', ...props }, ref) => ( >(({ className = '', ...props }, ref) => (
<SwitchPrimitives.Root <SwitchPrimitives.Root
className={cn( className={cn(
'focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-gray-200', 'focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-[19.2px] w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-200',
className, className,
)} )}
{...props} {...props}
@ -17,7 +17,7 @@ const Switch = React.forwardRef<
> >
<SwitchPrimitives.Thumb <SwitchPrimitives.Thumb
className={cn( className={cn(
'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0', 'pointer-events-none block h-4 w-4 -translate-x-0.5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0',
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>

4
client/src/components/ui/Tabs.tsx
View file

@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List <TabsPrimitive.List
ref={ref} ref={ref}
className={cn( className={cn(
'inline-flex items-center justify-center rounded-md bg-gray-100 p-1 dark:bg-gray-800', 'inline-flex items-center justify-center rounded-md bg-gray-200 p-1 dark:bg-gray-800',
className, className,
)} )}
{...props} {...props}
@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
>(({ className = '', ...props }, ref) => ( >(({ className = '', ...props }, ref) => (
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
className={cn( className={cn(
'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-gray-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100', 'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-gray-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-800 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-200',
className, className,
)} )}
{...props} {...props}

12
client/src/components/ui/Templates.tsx
View file

@ -15,17 +15,17 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
<div className="flex flex-1 flex-col items-center gap-3.5"> <div className="flex flex-1 flex-col items-center gap-3.5">
<span className="text-sm text-gray-700 dark:text-gray-400"> <span className="text-sm text-gray-700 dark:text-gray-400">
{localize('com_ui_showing')}{' '} {localize('com_ui_showing')}{' '}
<span className="font-semibold text-gray-900 dark:text-white">1</span>{' '} <span className="font-semibold text-gray-800 dark:text-white">1</span>{' '}
{localize('com_ui_of')}{' '} {localize('com_ui_of')}{' '}
<a id="prompt-link"> <a id="prompt-link">
<span className="font-semibold text-gray-900 dark:text-white"> <span className="font-semibold text-gray-800 dark:text-white">
1 {localize('com_ui_entries')} 1 {localize('com_ui_entries')}
</span> </span>
</a> </a>
</span> </span>
<button <button
onClick={showTemplates} onClick={showTemplates}
className="btn btn-neutral justify-center gap-2 border-0 md:border" className="btn justify-center gap-2 border-0 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 md:border"
> >
<ChatIcon /> <ChatIcon />
{localize('com_ui_hide_prompt_templates')} {localize('com_ui_hide_prompt_templates')}
@ -38,7 +38,7 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
{localize('com_ui_dan')} {localize('com_ui_dan')}
</h2> </h2>
<button> <button>
<p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"> <p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-800">
{localize('com_ui_dan_template')} {localize('com_ui_dan_template')}
</p> </p>
</button> </button>
@ -47,14 +47,14 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
<div className="xs:mt-0 mt-2 inline-flex"> <div className="xs:mt-0 mt-2 inline-flex">
<button <button
// onclick="prevPromptTemplatesPage()" // onclick="prevPromptTemplatesPage()"
className="bg-gray-100 px-4 py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white" className="bg-gray-200 px-4 py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
style={{ borderRadius: '6px 0 0 6px' }} style={{ borderRadius: '6px 0 0 6px' }}
> >
{localize('com_ui_prev')} {localize('com_ui_prev')}
</button> </button>
<button <button
// onclick="nextPromptTemplatesPage()" // onclick="nextPromptTemplatesPage()"
className="border-0 border-l border-gray-500 bg-gray-100 px-4 py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white" className="border-0 border-l border-gray-500 bg-gray-200 px-4 py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
style={{ borderRadius: '6px 0 0 6px' }} style={{ borderRadius: '6px 0 0 6px' }}
> >
{localize('com_ui_next')} {localize('com_ui_next')}

3
client/src/components/ui/Tooltip.tsx
View file

@ -25,11 +25,12 @@ const TooltipContent = React.forwardRef<
<TooltipPortal forceMount={forceMount}> <TooltipPortal forceMount={forceMount}>
<TooltipPrimitive.Content <TooltipPrimitive.Content
className={cn( className={cn(
'shadow-xs relative max-w-xs rounded-lg border border-black/10 bg-black p-1 transition-opacity', 'shadow-xs relative max-w-xs rounded-lg border border-gray-900/10 bg-gray-900 p-1 transition-opacity',
className, className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
style={{ userSelect: 'none' }}
> >
<span className="flex items-center whitespace-pre-wrap px-2 py-1 text-center text-sm font-medium normal-case text-white"> <span className="flex items-center whitespace-pre-wrap px-2 py-1 text-center text-sm font-medium normal-case text-white">
{children} {children}

2
client/src/hooks/ScreenshotContext.tsx
View file

@ -21,7 +21,7 @@ export const useScreenshot = () => {
if (theme === 'system') { if (theme === 'system') {
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
} }
const backgroundColor = isDark ? '#343541' : 'white'; const backgroundColor = isDark ? '#171717' : 'white';
const canvas = await toCanvas(node); const canvas = await toCanvas(node);
const croppedCanvas = document.createElement('canvas'); const croppedCanvas = document.createElement('canvas');
const croppedCanvasContext = croppedCanvas.getContext('2d') as CanvasRenderingContext2D; const croppedCanvasContext = croppedCanvas.getContext('2d') as CanvasRenderingContext2D;

Some files were not shown because too many files have changed in this diff Show more