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

🖌️ 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>
<head>
<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="apple-mobile-web-app-capable" content="yes">
<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') },
})}
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=" "
/>
<label
@ -69,7 +69,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
maxLength: { value: 128, message: localize('com_auth_password_max_length') },
})}
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=" "
/>
<label

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

@ -64,7 +64,7 @@ const Registration: React.FC = () => {
validation,
)}
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=" "
data-testid={id}
></input>

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

@ -103,7 +103,7 @@ function RequestPasswordReset() {
},
})}
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=" "
></input>
<label

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

@ -115,7 +115,7 @@ function ResetPassword() {
},
})}
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=" "
></input>
<label
@ -149,7 +149,7 @@ function ResetPassword() {
value === password || localize('com_auth_password_not_match'),
})}
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=" "
></input>
<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="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
files={files}
setFiles={setFiles}

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

@ -1,6 +1,6 @@
export default function DragDropOverlay() {
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
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 132 108"

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

@ -56,14 +56,14 @@ export default function OptionsPopover({
<div
className={cn(
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]',
)}
>
<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
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}
>
<Save className="mr-1 w-[14px]" />
@ -73,7 +73,7 @@ export default function OptionsPopover({
<Button
type="button"
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,
)}
onClick={closePopover}

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

@ -79,7 +79,7 @@ export default function PopoverButtons({
type="button"
className={cn(
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 ?? '',
)}
onClick={button.handler}

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

@ -1,12 +1,19 @@
import { SendIcon } from '~/components/svg';
import { cn } from '~/utils';
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
import { useLocalize } from '~/hooks';
export default function SendButton({ text, disabled }) {
const localize = useLocalize();
return (
<TooltipProvider delayDuration={250}>
<Tooltip>
<TooltipTrigger asChild>
<button
disabled={!text || disabled}
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"
type="submit"
@ -15,5 +22,11 @@ export default function SendButton({ text, disabled }) {
<SendIcon size={24} />
</span>
</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">
<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"
onClick={(e) => {
setShowStopButton(false);
@ -16,7 +16,7 @@ export default function StopButton({ stop, setShowStopButton }) {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
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"
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',
selected ? 'visible' : '',
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) => {

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

@ -43,7 +43,7 @@ const EndpointsMenu: FC = () => {
<Content
side="bottom"
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} />
</Content>

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

@ -92,7 +92,7 @@ const EditPresetDialog = ({
</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">
<EndpointSettings
conversation={preset}
@ -106,12 +106,15 @@ const EditPresetDialog = ({
}
buttons={
<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')}
</DialogButton>
<DialogClose
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')}
</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 DialogTemplate from '~/components/ui/DialogTemplate';
import { getPresetTitle, getEndpointField } from '~/utils';
import { Dialog, DialogTrigger } from '~/components/ui/';
import { Dialog, DialogTrigger, Label } from '~/components/ui/';
import { MenuSeparator, MenuItem } from '../UI';
import { icons } from '../Endpoints/Icons';
import { useLocalize } from '~/hooks';
@ -55,21 +55,32 @@ const PresetItems: FC<{
<DialogTrigger asChild>
<label
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" />
{localize('com_ui_clear')} {localize('com_ui_all')}
</label>
</DialogTrigger>
<DialogTemplate
showCloseButton={false}
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={{
selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_clear'),
}}
className="max-w-[500px]"
/>
<FileUpload onFileSelected={onFileSelected} />
</Dialog>
@ -124,7 +135,7 @@ const PresetItems: FC<{
>
<div className="flex h-full items-center justify-end gap-1">
<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) => {
e.preventDefault();
e.stopPropagation();
@ -134,7 +145,7 @@ const PresetItems: FC<{
<PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
</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) => {
e.preventDefault();
e.stopPropagation();
@ -144,7 +155,7 @@ const PresetItems: FC<{
<EditIcon />
</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) => {
e.preventDefault();
e.stopPropagation();

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

@ -29,7 +29,7 @@ const PresetsMenu: FC = () => {
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',
'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"
data-testid="presets-button"
@ -52,7 +52,7 @@ const PresetsMenu: FC = () => {
<Content
side="bottom"
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
presets={presets}

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

@ -4,7 +4,7 @@ const MenuSeparator: FC = () => (
<div
role="separator"
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 (
<Dialog.Root>
<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>
<button type="button" aria-haspopup="dialog" aria-expanded="false">
<LazyLoadImage

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

@ -21,7 +21,7 @@ export const ErrorMessage = ({ text }: TText) => {
}
return (
<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} />
</div>
</Container>
@ -59,7 +59,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
className={cn(
showCursor && !!text?.length ? 'result-streaming' : '',
'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 ? (

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

@ -48,7 +48,7 @@ export default function Part({
// Access the value property
return (
<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
text={part[ContentTypes.TEXT].value}
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">
<button
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',
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}
type="button"
@ -69,7 +69,7 @@ export default function HoverButtons({
</button>
<button
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' : '',
)}
onClick={() => copyToClipboard(setIsCopied)}
@ -82,7 +82,7 @@ export default function HoverButtons({
</button>
{regenerateEnabled ? (
<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}
type="button"
title={localize('com_ui_regenerate')}
@ -92,7 +92,7 @@ export default function HoverButtons({
) : null}
{continueSupported ? (
<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}
type="button"
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">
{(_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
</div>
) : (
@ -59,7 +59,7 @@ export default function MessagesView({
</>
)}
<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}
/>
</div>

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

@ -106,12 +106,12 @@ export default function Conversation({ conversation, retainView }) {
const aProps = {
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) {
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 (
@ -149,7 +149,7 @@ export default function Conversation({ conversation, retainView }) {
/>
</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>
);

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

@ -9,7 +9,7 @@ import { useUpdateConversationMutation } from '~/data-provider';
import { MinimalIcon } from '~/components/Endpoints';
import { NotificationSeverity } from '~/common';
import { useToastContext } from '~/Providers';
import DeleteButton from './NewDeleteButton';
import DeleteButton from './DeleteButton';
import { getEndpointField } from '~/utils';
import RenameButton from './RenameButton';
import store from '~/store';
@ -103,6 +103,9 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
error: false,
className: 'mr-0',
isCreatedByUser: false,
chatGptLabel: undefined,
modelLabel: undefined,
jailbreak: undefined,
});
const handleKeyDown = (e: KeyEvent) => {
@ -112,7 +115,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
};
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' : ''
}`,
};
@ -123,7 +126,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
if (!activeConvo) {
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 (
@ -153,11 +156,11 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
{activeConvo ? (
<div
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 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 ? (
<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 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>
);

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

@ -38,9 +38,12 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
return (
<Dialog>
<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>
<DialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_conversation')}
className="max-w-[450px]"
main={
@ -56,7 +59,8 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
}
selection={{
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'),
}}
/>

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,
}: RenameButtonProps): ReactElement {
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) {
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 Conversation } from './Conversation';
export { default as DeleteButton } from './DeleteButton';
export { default as RenameButton } from './RenameButton';
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">
<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}
>
<Save className="mr-1 w-[14px]" />
@ -55,7 +55,7 @@ export default function EndpointOptionsPopover({
<Button
type="button"
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,
)}
onClick={closePopover}

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

@ -4,7 +4,7 @@ import {
AzureMinimalIcon,
OpenAIMinimalIcon,
LightningIcon,
PluginMinimalIcon,
MinimalPlugin,
BingAIMinimalIcon,
GoogleMinimalIcon,
CustomMinimalIcon,
@ -29,7 +29,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
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.anthropic]: {
icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />,
@ -66,13 +66,13 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
height: size,
}}
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 || '',
)}
>
{icon}
{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>
)}

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

@ -66,7 +66,7 @@ export default function PopoverButtons({
type="button"
className={cn(
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 ?? '',
)}
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}>
<DialogTemplate
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={
<div className="flex w-full flex-col 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"
className={cn(
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,
)}
/>
@ -73,7 +74,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
}
selection={{
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'),
}}
/>

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">
<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}
>
<Minus className="w-[16px]" />
</Button>
<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}
>
<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 PopoverButtons } from './PopoverButtons';
export { default as EndpointSettings } from './EndpointSettings';
export { default as EditPresetDialog } from './EditPresetDialog';
export { default as SaveAsPresetDialog } from './SaveAsPresetDialog';
export { default as EndpointOptionsDialog } from './EndpointOptionsDialog';
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
value={value}
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' : '',
)}
id={endpoint}

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

@ -7,7 +7,7 @@ import {
useCreatePresetMutation,
useGetEndpointsQuery,
} from 'librechat-data-provider/react-query';
import { Icon, EditPresetDialog } from '~/components/Endpoints';
import { Icon } from '~/components/Endpoints';
import EndpointItems from './EndpointItems';
import PresetItems from './PresetItems';
import FileUpload from './FileUpload';
@ -37,8 +37,6 @@ export default function NewConversationMenu() {
const [menuOpen, setMenuOpen] = useState(false);
const [showPresets, setShowPresets] = useState(true);
const [showEndpoints, setShowEndpoints] = useState(true);
const [presetModalVisible, setPresetModalVisible] = useState(false);
const [preset, setPreset] = useState(false);
const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
const [messages, setMessages] = useRecoilState(store.messages);
@ -130,11 +128,6 @@ export default function NewConversationMenu() {
newConversation({}, newPreset);
};
const onChangePreset = (preset) => {
setPresetModalVisible(true);
setPreset(preset);
};
const clearAllPresets = () => {
deletePresetsMutation.mutate({ arg: {} });
};
@ -158,7 +151,7 @@ export default function NewConversationMenu() {
};
return (
<TooltipProvider delayDuration={300}>
<TooltipProvider delayDuration={250}>
<Tooltip>
<Dialog className="z-[100]">
<DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
@ -180,7 +173,7 @@ export default function NewConversationMenu() {
{localize('com_endpoint_open_menu')}
</TooltipContent>
<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()}
side="top"
>
@ -226,7 +219,7 @@ export default function NewConversationMenu() {
<DialogTrigger asChild>
<label
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" />
{localize('com_ui_clear')} {localize('com_ui_all')}
@ -257,7 +250,6 @@ export default function NewConversationMenu() {
<PresetItems
presets={presets}
onSelect={onSelectPreset}
onChangePreset={onChangePreset}
onDeletePreset={onDeletePreset}
/>
) : (
@ -268,11 +260,6 @@ export default function NewConversationMenu() {
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<EditPresetDialog
open={presetModalVisible}
onOpenChange={setPresetModalVisible}
preset={preset}
/>
</Dialog>
</Tooltip>
</TooltipProvider>

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

@ -66,7 +66,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
<label
htmlFor={`file-upload-${id}`}
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,
containerClassName,
)}

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

@ -67,7 +67,7 @@ export default function PresetItem({
<DropdownMenuRadioItem
/* @ts-ignore, value can be an object as well */
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">
{icon}

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

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

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

@ -188,7 +188,7 @@ const SetKeyDialog = ({
}
selection={{
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'),
}}
leftButtons={

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

@ -69,7 +69,7 @@ export default function SubmitButton({
if (isSubmitting && isSmallScreen) {
return (
<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 />
</div>
</button>
@ -93,7 +93,7 @@ export default function SubmitButton({
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"
>
<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">
<Settings className="mr-1 inline-block h-auto w-[18px]" />
{localize('com_endpoint_config_key_name_placeholder')}
@ -107,7 +107,7 @@ export default function SubmitButton({
);
} else {
return (
<TooltipProvider delayDuration={50}>
<TooltipProvider delayDuration={250}>
<Tooltip>
<TooltipTrigger asChild>
<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)]"
style={{
background: `linear-gradient(to bottom,
${isDark ? 'rgba(52, 53, 65, 0)' : 'rgba(255, 255, 255, 0)'},
${isDark ? 'rgba(52, 53, 65, 0.08)' : 'rgba(255, 255, 255, 0.08)'},
${isDark ? 'rgba(52, 53, 65, 0.38)' : 'rgba(255, 255, 255, 0.38)'},
${isDark ? 'rgba(52, 53, 65, 1)' : 'rgba(255, 255, 255, 1)'},
${isDark ? '#343541' : '#ffffff'})`,
${isDark ? 'rgba(23, 23, 23, 0)' : 'rgba(255, 255, 255, 0)'},
${isDark ? 'rgba(23, 23, 23, 0.08)' : 'rgba(255, 255, 255, 0.08)'},
${isDark ? 'rgba(23, 23, 23, 0.38)' : 'rgba(255, 255, 255, 0.38)'},
${isDark ? 'rgba(23, 23, 23, 1)' : 'rgba(255, 255, 255, 1)'},
${isDark ? '#171717' : '#ffffff'})`,
}}
>
<OptionsBar />
@ -165,8 +165,8 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
className={cn(
'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)]',
'dark:border-gray-900/50 dark:text-white',
disabled ? 'bg-gray-100 dark:bg-gray-900' : 'bg-white dark:bg-gray-700',
'dark:border-gray-800/50 dark:text-white',
disabled ? 'bg-gray-200 dark:bg-gray-800' : 'bg-white dark:bg-gray-700',
)}
>
<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 [isCopied, setIsCopied] = useState(false);
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>
{plugin ? (
<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;
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} />
<div className={cn(classProp, 'overflow-y-auto p-4')}>
<code

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

@ -18,7 +18,7 @@ const ErrorMessage = ({ text }: TText) => {
}
return (
<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} />
</div>
</Container>
@ -31,7 +31,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
<div
className={cn(
'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 ? (

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

@ -86,7 +86,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
<div
className={cn(
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>
@ -94,7 +94,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
<div>{generateStatus()}</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">
<ChevronDownIcon {...iconProps} />
</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">
<button
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',
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}
type="button"
@ -65,7 +65,7 @@ export default function HoverButtons({
</button>
<button
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',
)}
onClick={() => copyToClipboard(setIsCopied)}
@ -78,7 +78,7 @@ export default function HoverButtons({
</button>
{regenerateEnabled ? (
<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}
type="button"
title={localize('com_ui_regenerate')}
@ -88,7 +88,7 @@ export default function HoverButtons({
) : null}
{continueSupported ? (
<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}
type="button"
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 =
'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
? '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 = {
className: cn(commonClasses, uniqueClasses),

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

@ -90,7 +90,7 @@ const MessageHeader = ({ isSearchView = false }) => {
<>
<div
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',
'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 />
</div>
) : _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
</div>
) : (
@ -114,7 +114,7 @@ export default function Messages({ isSearchView = false }) {
</>
)}
<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}
/>
</div>

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

@ -435,7 +435,7 @@ export default function ExportModal({ open, onOpenChange, conversation }) {
<>
<DialogButton
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')}
</DialogButton>

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

@ -9,7 +9,7 @@ const Logout = forwardRef(() => {
return (
<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()}
>
<LogOutIcon />

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

@ -15,11 +15,11 @@ export default function MobileNav({
const { title = 'New Chat' } = conversation || {};
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
type="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)}
>
<span className="sr-only">{localize('com_nav_open_sidebar')}</span>
@ -44,7 +44,7 @@ export default function MobileNav({
</h1>
<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()}
>
<svg

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

@ -110,11 +110,11 @@ export default function Nav({ navVisible, setNavVisible }) {
};
return (
<TooltipProvider delayDuration={150}>
<TooltipProvider delayDuration={250}>
<Tooltip>
<div
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={{
width: navVisible ? navWidth : '0px',

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

@ -60,14 +60,14 @@ function NavLinks() {
{({ open }) => (
<>
{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}`}
</div>
)}
<Menu.Button
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]',
open ? '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-gray-100 dark:bg-gray-700' : '',
)}
data-testid="nav-user"
>
@ -90,7 +90,7 @@ function NavLinks() {
</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' }}
>
{user?.name || localize('com_nav_user')}
@ -106,22 +106,24 @@ function NavLinks() {
leaveFrom="translate-y-0 opacity-100"
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">
<NavLink
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',
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50',
'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-black dark:text-white'
: 'cursor-not-allowed text-black/50 dark:text-white/50',
)}
svg={() => <Download size={16} />}
text={localize('com_nav_export_conversation')}
clickHandler={clickHandler}
/>
</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">
<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" />}
text="My Files"
clickHandler={() => setShowFiles(true)}
@ -130,7 +132,7 @@ function NavLinks() {
{startupConfig?.helpAndFaqURL !== '/' && (
<Menu.Item as="div">
<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 />}
text={localize('com_nav_help_faq')}
clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')}
@ -139,13 +141,13 @@ function NavLinks() {
)}
<Menu.Item as="div">
<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" />}
text={localize('com_nav_settings')}
clickHandler={() => setShowSettings(true)}
/>
</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">
<Logout />
</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 { NewChatIcon } from '~/components/svg';
import { getEndpointField } from '~/utils';
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
export default function NewChat({
toggleNav,
@ -42,16 +43,18 @@ export default function NewChat({
};
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' }}>
<a
href="/"
data-testid="nav-new-chat-button"
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="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 &&
Icon &&
Icon({
@ -68,14 +71,21 @@ export default function NewChat({
</div>
<div className="flex gap-3">
<span className="flex items-center" data-state="closed">
<TooltipTrigger asChild>
<button type="button" className="text-token-text-primary">
<NewChatIcon className="h-[18px] w-[18px]" />
</button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={20}>
{localize('com_ui_new_chat')}
</TooltipContent>
</span>
</div>
</a>
</div>
{subHeaders ? subHeaders : null}
</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 (
<div
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" />}
<input

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

@ -14,18 +14,10 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className={cn('shadow-2xl dark:bg-gray-900 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%)',
}}
className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]')}
>
<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')}
</DialogTitle>
</DialogHeader>
@ -41,66 +33,62 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
aria-orientation="vertical"
className={cn(
'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' }}
>
<Tabs.Trigger
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
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
? '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-200',
isSmallScreen ? '' : 'dark:bg-gray-800',
)}
value={SettingsTabValues.GENERAL}
style={{ userSelect: 'none' }}
>
<GearIcon />
{localize('com_nav_setting_general')}
</Tabs.Trigger>
<Tabs.Trigger
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
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
? '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-200',
isSmallScreen ? '' : 'dark:bg-gray-800',
)}
value={SettingsTabValues.BETA}
style={{ userSelect: 'none' }}
>
<ExperimentIcon />
{localize('com_nav_setting_beta')}
</Tabs.Trigger>
<Tabs.Trigger
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
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
? '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-200',
isSmallScreen ? '' : 'dark:bg-gray-800',
)}
value={SettingsTabValues.DATA}
style={{ userSelect: 'none' }}
>
<DataIcon />
{localize('com_nav_setting_data')}
</Tabs.Trigger>
<Tabs.Trigger
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
? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
? '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-200',
isSmallScreen ? '' : 'dark:bg-gray-800',
)}
value={SettingsTabValues.ACCOUNT}
style={{ userSelect: 'none' }}
>
<UserIcon />
{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"
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">
<Avatar />
</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>
<label
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" />
<span>{localize('com_nav_change_picture')}</span>
@ -98,11 +98,11 @@ function Avatar() {
<Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
<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' }}
>
<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')}
</DialogTitle>
</DialogHeader>

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

@ -11,7 +11,7 @@ function Beta() {
role="tabpanel"
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">
<ModularChat />
</div>

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

@ -72,7 +72,7 @@ function Data() {
role="tabpanel"
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">
<RevokeKeysButton all={true} />
</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]"
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">
<ThemeSelector theme={theme} onChange={changeTheme} />
</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 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`}
style={{ userSelect: 'none' }}
>
<svg
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-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`}
style={{ userSelect: 'none' }}
onClick={() => onChangePage(page)}
>
{page}
@ -71,6 +73,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
? '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'
}`}
style={{ userSelect: 'none' }}
>
Next
<svg

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

@ -123,17 +123,17 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
className="relative z-[102]"
>
{/* 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 */}
<div className="fixed inset-0 flex items-center justify-center p-4">
<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' }}
>
<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="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')}
</Dialog.Title>
</div>
@ -145,7 +145,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
setIsOpen(false);
setCurrentPage(1);
}}
className="inline-block text-gray-500 hover:text-gray-100"
className="inline-block text-gray-500 hover:text-gray-200"
tabIndex={0}
>
<X />
@ -178,7 +178,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
value={searchValue}
onChange={handleSearch}
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

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

@ -21,7 +21,7 @@ function PluginStoreItem({ plugin, onInstall, onUninstall, isInstalled }: TPlugi
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="h-[70px] w-[70px] shrink-0">
<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 */}
<div className="mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse">
<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 () => {
const result = await trigger(undefined, { shouldFocus: true });
setValue('saved_auth_fields', result);

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

@ -107,7 +107,7 @@ export default function ActionsPanel({
<button
type="button"
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={() => {
if (!assistant_id) {
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
type="button"
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">
{localize('com_assistants_add_tools')}
@ -409,7 +409,7 @@ export default function AssistantPanel({
}
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">
{localize('com_assistants_add_actions')}
@ -440,7 +440,7 @@ export default function AssistantPanel({
)}
{/* Submit 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"
>
{create.isLoading || update.isLoading ? (

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

@ -166,14 +166,14 @@ export default function AssistantSelect({
emptyTitle={true}
containerClassName="flex-grow"
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(
'text-md font-semibold text-gray-900 dark:text-white',
value === '' ? 'text-gray-500' : '',
)}
className={cn(
'mt-1 rounded-md dark:border-gray-700 dark:bg-black',
'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',
'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-gray-400',
)}
renderOption={() => (
<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>
<button
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,
)}
type="button"
@ -103,7 +103,7 @@ export default function ContextButton({
<Popover.Content
side="top"
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' }}
sideOffset={8}
tabIndex={-1}

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

@ -98,12 +98,12 @@ export function AvatarMenu({
return (
<Popover.Portal>
<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}
>
<div
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}
data-orientation="vertical"
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
key={header.id}
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
? 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'
? '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',
)}
>

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

@ -172,7 +172,7 @@ export default function SidePanel({
localStorage.setItem('react-resizable-panels:collapsed', 'true');
}}
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]',
minSize === 0 ? 'min-w-0' : '',
)}
@ -180,12 +180,12 @@ export default function SidePanel({
{keyProvided && (
<div
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',
)}
>
<Switcher isCollapsed={isCollapsed} />
<Separator className="bg-gray-100/50" />
<Separator className="bg-gray-100/50 dark:bg-gray-600" />
</div>
)}

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

@ -59,7 +59,7 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
isCollapsed
? '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')}
>
@ -72,16 +72,20 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''}
/>
</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 ??
localize('com_sidepanel_select_assistant')}
</span>
</SelectValue>
</SelectTrigger>
<SelectContent className="bg-white">
<SelectContent className="bg-white dark:bg-gray-800">
{assistants.map((assistant) => (
<SelectItem key={assistant.id} value={assistant.id}>
<div className="[&_svg]:text-foreground flex items-center justify-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 ">
<SelectItem
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 ">
<Icon
isCreatedByUser={false}

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

@ -20,7 +20,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
};
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="h-[70px] w-[70px] shrink-0">
<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]"
>
{/* 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 */}
<div className="fixed inset-0 flex items-center justify-center p-4">
<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' }}
>
<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);
setCurrentPage(1);
}}
className="inline-block text-gray-500 hover:text-gray-100"
className="inline-block text-gray-500 hover:text-gray-200"
tabIndex={0}
>
<X />
@ -196,8 +196,8 @@ function ToolSelectDialog({
type="text"
value={searchValue}
onChange={handleSearch}
placeholder={localize('com_nav_tool_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"
placeholder={localize('com_nav_plugin_search')}
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

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 OpenAIMinimalIcon } from './OpenAIMinimalIcon';
export { default as ChatGPTMinimalIcon } from './ChatGPTMinimalIcon';
export { default as PluginMinimalIcon } from './PluginMinimalIcon';
export { default as BingAIMinimalIcon } from './BingAIMinimalIcon';
export { default as PaLMinimalIcon } from './PaLMinimalIcon';
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
ref={ref}
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,
)}
{...props}
@ -113,7 +113,7 @@ const AlertDialogCancel = React.forwardRef<
<AlertDialogPrimitive.Cancel
ref={ref}
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,
)}
{...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';
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: {
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',
outline:
'bg-transparent border border-slate-200 hover:bg-gray-100 dark:border-slate-700 dark:text-slate-100',
subtle: 'bg-gray-100 text-slate-900 hover:bg-gray-200 dark:bg-gray-900 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-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100',
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',
link: 'bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover: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-gray-900 dark:text-gray-100 hover:bg-transparent dark:hover:bg-transparent',
},
size: {
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 { X } from 'lucide-react';
import { cn } from '~/utils';
import { useMediaQuery } from '~/hooks';
const Dialog = DialogPrimitive.Root;
@ -27,7 +28,7 @@ const DialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
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 ?? '',
)}
{...props}
@ -38,15 +39,21 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
>(({ className, children = true, ...props }, ref) => {
const isSmallScreen = useMediaQuery('(max-width: 768px)');
return (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
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',
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 ?? '',
)}
{...props}
@ -58,7 +65,8 @@ const DialogContent = React.forwardRef<
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
);
});
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@ -114,7 +122,7 @@ const DialogClose = React.forwardRef<
<DialogPrimitive.Close
ref={ref}
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 ?? '',
)}
{...props}
@ -130,7 +138,7 @@ const DialogButton = React.forwardRef<
ref={ref}
variant="outline"
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 ?? '',
)}
{...props}

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

@ -25,25 +25,36 @@ type DialogTemplateProps = {
selection?: SelectionProps;
className?: string;
headerClassName?: string;
showCloseButton?: boolean;
};
const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
const localize = useLocalize();
const { title, description, main, buttons, leftButtons, selection, className, headerClassName } =
props;
const {
title,
description,
main,
buttons,
leftButtons,
selection,
className,
headerClassName,
showCloseButton,
} = props;
const { selectHandler, selectClasses, selectText } = selection || {};
const Cancel = localize('com_ui_cancel');
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 (
<DialogContent
showCloseButton={showCloseButton}
ref={ref}
className={cn('shadow-2xl dark:bg-gray-900', className || '')}
className={cn('shadow-2xl dark:bg-gray-800', className || '')}
onClick={(e) => e.stopPropagation()}
>
<DialogHeader className={cn('sm:pb-2', headerClassName ?? '')}>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
<DialogHeader className={cn('sm:pb-7', headerClassName ?? '')}>
<DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
{title}
</DialogTitle>
{description && (
@ -55,15 +66,17 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
<div className="px-6">{main ? main : null}</div>
<DialogFooter>
<div>{leftButtons ? leftButtons : null}</div>
<div className="flex h-auto gap-2">
<DialogClose className="dark:hover:gray-400 border-gray-700">{Cancel}</DialogClose>
<div className="flex h-auto gap-3">
<DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
{Cancel}
</DialogClose>
{buttons ? buttons : null}
{selection ? (
<DialogClose
onClick={selectHandler}
className={`${
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}
</DialogClose>

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

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

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

@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
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,
)}
{...props}

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

@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
return (
<input
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 ?? '',
)}
ref={ref}

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

@ -17,7 +17,7 @@ const InputNumber = React.forwardRef<
return (
<RCInputNumber
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 ?? '',
)}
ref={ref}

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

@ -26,7 +26,7 @@ export default function Landing() {
return (
<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
id="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">
<button
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; →
</button>
<button
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; →
</button>
<button
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; →
</button>
@ -108,7 +108,7 @@ export default function Landing() {
</div>
)}
{!!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>
);

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={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' : '',
)}
>
@ -147,7 +147,7 @@ function MultiSelectDropDown({
<Listbox.Option
key={i}
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">
{!option.isButton && (
@ -168,19 +168,19 @@ function MultiSelectDropDown({
)}
<span
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' : '',
)}
>
{option.name}
</span>
{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 />
</span>
)}
{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 />
</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={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' : '',
)}
>
@ -106,7 +106,7 @@ function MultiSelectPop({
<Content
side="bottom"
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) => {
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}
</h2>
<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}
</p>
</button>

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

@ -19,7 +19,8 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
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,
)}
{...props}
@ -68,7 +69,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
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'
? '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}
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',
'rounded-lg hover:bg-gray-100/50',
'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
className,
)}
{...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={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' : '',
currentValueClass ?? '',
)}
@ -122,7 +122,7 @@ function SelectDropDown({
>
<Listbox.Options
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 ?? '',
)}
>
@ -131,7 +131,7 @@ function SelectDropDown({
key={'listbox-render-option'}
value={null}
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 ?? '',
)}
>
@ -155,14 +155,14 @@ function SelectDropDown({
key={i}
value={currentValue}
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 ?? '',
)}
>
<span className="flex items-center gap-1.5 truncate">
<span
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' : '',
iconSide === 'left' ? 'ml-4' : '',
)}
@ -172,7 +172,7 @@ function SelectDropDown({
{currentValue === activeValue && (
<span
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',
)}
>

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

@ -61,7 +61,7 @@ function SelectDropDownPop({
<span className="inline-flex w-full ">
<span
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' : '',
'min-w-[75px] font-normal',
)}
@ -95,7 +95,7 @@ function SelectDropDownPop({
<Content
side="bottom"
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) => {
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 ?? '')}
{...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.Track>
<SliderPrimitive.Thumb
@ -25,7 +25,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
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>
),

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

@ -9,7 +9,7 @@ const Switch = React.forwardRef<
>(({ className = '', ...props }, ref) => (
<SwitchPrimitives.Root
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,
)}
{...props}
@ -17,7 +17,7 @@ const Switch = React.forwardRef<
>
<SwitchPrimitives.Thumb
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>

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

@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List
ref={ref}
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,
)}
{...props}
@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
>(({ className = '', ...props }, ref) => (
<TabsPrimitive.Trigger
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,
)}
{...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">
<span className="text-sm text-gray-700 dark:text-gray-400">
{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')}{' '}
<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')}
</span>
</a>
</span>
<button
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 />
{localize('com_ui_hide_prompt_templates')}
@ -38,7 +38,7 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
{localize('com_ui_dan')}
</h2>
<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')}
</p>
</button>
@ -47,14 +47,14 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
<div className="xs:mt-0 mt-2 inline-flex">
<button
// 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' }}
>
{localize('com_ui_prev')}
</button>
<button
// 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' }}
>
{localize('com_ui_next')}

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

@ -25,11 +25,12 @@ const TooltipContent = React.forwardRef<
<TooltipPortal forceMount={forceMount}>
<TooltipPrimitive.Content
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,
)}
ref={ref}
{...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">
{children}

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

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

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