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

🖌️ style: Improve Dark Theme Accessibility (#2125)

Browse source 
* style: all landing page components

* chore: converted all slate to gray, since slate doesnt work

* style: assistant panel

* style: basic UI components, userprovided, preset

* style: update in multiple components

* fix(PluginStoreDialog): justify-center

* fixed some minor Ui styles

* style(MultiSearch): update dark bg

* style: update Convo styling

* style: lower textarea max height slightly

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Marco Beretta 2024-03-21 14:02:00 +01:00 • committed by GitHub
parent e95c0aaaed
commit 30f6d90cfe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
59 changed files with 170 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -81,7 +81,7 @@ const ChatForm = ({ index = 0 }) => {
> >
<div className="relative flex h-full flex-1 items-stretch md:flex-col"> <div className="relative flex h-full flex-1 items-stretch md:flex-col">
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<div className="[&:has(textarea:focus)]:border-token-border-xheavy dark:border-token-border-medium border-token-border-medium bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:text-white [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]"> <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-medium bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:border-gray-600 dark:text-white [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] dark:[&:has(textarea:focus)]:border-gray-500">
<FileRow <FileRow
files={files} files={files}
setFiles={setFiles} setFiles={setFiles}
@ -121,7 +121,7 @@ const ChatForm = ({ index = 0 }) => {
: 'pl-3 md:pl-4', : 'pl-3 md:pl-4',
'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 md:pr-12 ', 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 md:pr-12 ',
removeFocusOutlines, removeFocusOutlines,
'max-h-[65vh] md:max-h-[85vh]', 'max-h-[65vh] md:max-h-[75vh]',
)} )}
/> />
)} )}

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

@ -27,7 +27,7 @@ export default function Files({ open, onOpenChange }) {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className={cn('overflow-x-auto shadow-2xl dark:bg-gray-900 dark:text-white')}> <DialogContent className={cn('overflow-x-auto shadow-2xl dark:bg-gray-700 dark:text-white')}>
<DialogHeader> <DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200"> <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
{localize('com_nav_my_files')} {localize('com_nav_my_files')}

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

@ -143,7 +143,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
return ( return (
<TableHead <TableHead
key={header.id} key={header.id}
className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100 sm:px-4 sm:py-2" className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-700 dark:text-gray-100 sm:px-4 sm:py-2"
style={style} style={style}
> >
{header.isPlaceholder {header.isPlaceholder

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

@ -81,8 +81,8 @@ export default function OptionsBar() {
type="button" type="button"
className={cn( className={cn(
cardStyle, cardStyle,
'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',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20', 'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
)} )}
onClick={triggerAdvancedMode} onClick={triggerAdvancedMode}
> >

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

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

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

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

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

@ -101,7 +101,7 @@ const MenuItem: FC<MenuItemProps> = ({
<> <>
<div <div
role="menuitem" role="menuitem"
className="group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 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 max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600"
tabIndex={-1} tabIndex={-1}
{...rest} {...rest}
onClick={() => onSelectEndpoint(endpoint)} onClick={() => onSelectEndpoint(endpoint)}
@ -132,7 +132,7 @@ const MenuItem: FC<MenuItemProps> = ({
'invisible flex gap-x-1 group-hover:visible', 'invisible flex gap-x-1 group-hover:visible',
selected ? 'visible' : '', selected ? 'visible' : '',
expiryTime expiryTime
? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-800' ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-600'
: '', : '',
)} )}
onClick={(e) => { onClick={(e) => {

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

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

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

@ -53,7 +53,7 @@ const EditPresetDialog = ({
main={ main={
<div className="flex w-full flex-col items-center gap-2 md:h-[530px]"> <div className="flex w-full flex-col items-center gap-2 md:h-[530px]">
<div className="grid w-full"> <div className="grid w-full">
<div className="col-span-4 flex items-start md:flex-row justify-start flex-col gap-6 pb-4"> <div className="col-span-4 flex flex-col items-start justify-start gap-6 pb-4 md:flex-row">
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<Label htmlFor="preset-name" className="mb-1 text-left text-sm font-medium"> <Label htmlFor="preset-name" className="mb-1 text-left text-sm font-medium">
{localize('com_endpoint_preset_name')} {localize('com_endpoint_preset_name')}
@ -90,13 +90,13 @@ const EditPresetDialog = ({
{'ㅤ'} {'ㅤ'}
</Label> </Label>
<PopoverButtons <PopoverButtons
buttonClass="ml-0 w-full dark:bg-gray-700 dark:hover:bg-gray-800 p-2 h-[40px] justify-center mt-0" buttonClass="ml-0 w-full border border-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 h-[40px] justify-center mt-0"
iconClass="hidden lg:block w-4" iconClass="hidden lg:block w-4 "
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="my-4 w-full border-t border-gray-300 dark:border-gray-700" /> <div className="my-4 w-full border-t border-gray-300 dark:border-gray-600" />
<div className="w-full p-0"> <div className="w-full p-0">
<EndpointSettings <EndpointSettings
conversation={preset} conversation={preset}
@ -112,7 +112,7 @@ const EditPresetDialog = ({
<div className="mb-6 md:mb-2"> <div className="mb-6 md:mb-2">
<DialogButton <DialogButton
onClick={exportPreset} onClick={exportPreset}
className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-600" className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
> >
{localize('com_endpoint_export')} {localize('com_endpoint_export')}
</DialogButton> </DialogButton>

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

@ -55,7 +55,7 @@ const PresetItems: FC<{
<DialogTrigger asChild> <DialogTrigger asChild>
<label <label
htmlFor="file-upload" htmlFor="file-upload"
className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500 dark:hover:text-red-700" 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-700 dark:hover:text-green-500 dark:hover:text-red-700"
> >
<svg <svg
width="24" width="24"
@ -87,7 +87,7 @@ const PresetItems: FC<{
} }
selection={{ selection={{
selectHandler: clearAllPresets, selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white', selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-600 text-white',
selectText: localize('com_ui_clear'), selectText: localize('com_ui_clear'),
}} }}
/> />
@ -143,7 +143,7 @@ const PresetItems: FC<{
> >
<div className="flex h-full items-center justify-end gap-1"> <div className="flex h-full items-center justify-end gap-1">
<button <button
className="m-0 h-full rounded-md p-2 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 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -153,7 +153,7 @@ const PresetItems: FC<{
<PinIcon unpin={defaultPreset?.presetId === preset.presetId} /> <PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
</button> </button>
<button <button
className="m-0 h-full rounded-md p-2 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 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -163,7 +163,7 @@ const PresetItems: FC<{
<EditIcon /> <EditIcon />
</button> </button>
<button <button
className="m-0 h-full rounded-md p-2 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 text-gray-400 hover:text-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

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

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

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

@ -34,7 +34,7 @@ const MenuItem: FC<MenuItemProps> = ({
<div <div
role="menuitem" role="menuitem"
className={cn( className={cn(
'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]', 'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]',
className ?? '', className ?? '',
)} )}
tabIndex={-1} tabIndex={-1}

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

@ -4,7 +4,7 @@ export default function TitleButton({ primaryText = '', secondaryText = '' }) {
return ( return (
<Trigger asChild> <Trigger asChild>
<div <div
className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20" className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700"
// type="button" // type="button"
> >
<div> <div>

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

@ -120,7 +120,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
const aProps = { const aProps = {
className: className:
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2', 'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-200 dark:bg-gray-700 py-2 px-2',
}; };
if (!activeConvo) { if (!activeConvo) {
@ -155,7 +155,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
{activeConvo ? ( {activeConvo ? (
<div <div
className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${ className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
!renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-800' : '' !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-700' : ''
}`} }`}
></div> ></div>
) : ( ) : (
@ -172,7 +172,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
/> />
</div> </div>
) : ( ) : (
<div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-900 dark:group-hover:from-gray-800" /> <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-750 dark:group-hover:from-gray-800" />
)} )}
</a> </a>
); );

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

@ -1,5 +1,5 @@
import type { MouseEvent, ReactElement } from 'react'; import type { MouseEvent, ReactElement } from 'react';
import { RenameIcon, CheckMark } from '~/components/svg'; import { EditIcon, CheckMark } from '~/components/svg';
interface RenameButtonProps { interface RenameButtonProps {
renaming: boolean; renaming: boolean;
@ -23,7 +23,7 @@ export default function RenameButton({
} }
return ( return (
<button {...classProp} onClick={handler}> <button {...classProp} onClick={handler}>
{renaming ? <CheckMark /> : <RenameIcon />} {renaming ? <CheckMark /> : <EditIcon />}
</button> </button>
); );
} }

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

@ -42,7 +42,7 @@ export default function EndpointOptionsPopover({
'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]', 'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]',
)} )}
> >
<div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60"> <div className="flex w-full items-center bg-gray-100 px-2 py-2 dark:bg-gray-800/60">
<Button <Button
type="button" type="button"
className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-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" 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"

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

@ -50,7 +50,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate <DialogTemplate
title={localize('com_endpoint_save_as_preset')} title={localize('com_endpoint_save_as_preset')}
className="w-11/12 sm:w-2/4" className="w-11/12 sm:w-1/4"
showCloseButton={false} showCloseButton={false}
main={ main={
<div className="flex w-full flex-col items-center gap-2"> <div className="flex w-full flex-col items-center gap-2">

2
client/src/components/Endpoints/Settings/Assistants.tsx
View file

@ -149,7 +149,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
placeholder={localize('com_endpoint_prompt_prefix_assistants_placeholder')} placeholder={localize('com_endpoint_prompt_prefix_assistants_placeholder')}
className={cn( className={cn(
defaultTextProps, defaultTextProps,
'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
'flex max-h-[240px] min-h-[80px] w-full resize-none px-3 py-2 ', 'flex max-h-[240px] min-h-[80px] w-full resize-none px-3 py-2 ',
)} )}
/> />
@ -167,7 +166,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
placeholder={localize('com_endpoint_instructions_assistants_placeholder')} placeholder={localize('com_endpoint_instructions_assistants_placeholder')}
className={cn( className={cn(
defaultTextProps, defaultTextProps,
'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
'flex max-h-[240px] min-h-[80px] w-full resize-none px-3 py-2 ', 'flex max-h-[240px] min-h-[80px] w-full resize-none px-3 py-2 ',
)} )}
/> />

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

@ -98,7 +98,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
placeholder={localize('com_endpoint_openai_custom_name_placeholder')} placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
className={cn( className={cn(
defaultTextProps, defaultTextProps,
'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
'flex h-10 max-h-10 w-full resize-none px-3 py-2', 'flex h-10 max-h-10 w-full resize-none px-3 py-2',
removeFocusOutlines, removeFocusOutlines,
)} )}
@ -117,7 +116,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')} placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
className={cn( className={cn(
defaultTextProps, defaultTextProps,
'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ', 'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
)} )}
/> />
@ -301,7 +299,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
className={cn( className={cn(
defaultTextProps, defaultTextProps,
optionText, optionText,
'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:border-slate-700', 'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:border-gray-700',
'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-gray-200', 'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-gray-200',
)} )}
/> />

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

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

4
client/src/components/Input/ModelSelect/BingAI.tsx
View file

@ -42,7 +42,7 @@ export default function BingAI({
showLabel={false} showLabel={false}
className={cn( className={cn(
cardStyle, cardStyle,
'z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-600', 'z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-gray-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-600',
showBingToneSetting ? 'hidden' : '', showBingToneSetting ? 'hidden' : '',
)} )}
/> />
@ -50,7 +50,7 @@ export default function BingAI({
value={toneStyle ?? 'creative'} value={toneStyle ?? 'creative'}
className={cn( className={cn(
cardStyle, cardStyle,
'z-50 flex h-[40px] flex-none items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-700', 'z-50 flex h-[40px] flex-none items-center justify-center px-0 hover:bg-gray-50 dark:hover:bg-gray-700',
)} )}
onValueChange={(value) => setOption('toneStyle')(value.toLowerCase())} onValueChange={(value) => setOption('toneStyle')(value.toLowerCase())}
> >

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

@ -36,7 +36,7 @@ const GoogleConfig = ({ userKey, setUserKey }: Pick<TConfigProps, 'userKey' | 's
<FileUpload <FileUpload
id={AuthKeys.GOOGLE_SERVICE_KEY} id={AuthKeys.GOOGLE_SERVICE_KEY}
className="w-full" className="w-full"
containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-400" containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-600"
text={localize('com_endpoint_config_key_import_json_key')} text={localize('com_endpoint_config_key_import_json_key')}
successText={localize('com_endpoint_config_key_import_json_key_success')} successText={localize('com_endpoint_config_key_import_json_key_success')}
invalidText={localize('com_endpoint_config_key_import_json_key_invalid')} invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}

4
client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
View file

@ -1,6 +1,6 @@
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import type { ChangeEvent, FC, Ref } from 'react'; import type { ChangeEvent, FC, Ref } from 'react';
import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/'; import { cn, defaultTextPropsLabel, removeFocusOutlines, defaultTextProps } from '~/utils/';
import { Input, Label } from '~/components/ui'; import { Input, Label } from '~/components/ui';
import { useLocalize } from '~/hooks'; import { useLocalize } from '~/hooks';
@ -37,7 +37,7 @@ const InputWithLabel: FC<InputWithLabelProps> = forwardRef((props, ref) => {
ref={ref} ref={ref}
placeholder={`${localize('com_endpoint_config_value')} ${label}`} placeholder={`${localize('com_endpoint_config_value')} ${label}`}
className={cn( className={cn(
defaultTextPropsLabel, defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2', 'flex h-10 max-h-10 w-full resize-none px-3 py-2',
removeFocusOutlines, removeFocusOutlines,
inputClassName, inputClassName,

31
client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
View file

@ -42,6 +42,7 @@ const OpenAIConfig = ({
/> />
)} )}
/> />
<div className="mt-3"></div>
<Controller <Controller
name="azureOpenAIApiInstanceName" name="azureOpenAIApiInstanceName"
control={control} control={control}
@ -54,6 +55,7 @@ const OpenAIConfig = ({
/> />
)} )}
/> />
<div className="mt-3"></div>
<Controller <Controller
name="azureOpenAIApiDeploymentName" name="azureOpenAIApiDeploymentName"
control={control} control={control}
@ -66,6 +68,7 @@ const OpenAIConfig = ({
/> />
)} )}
/> />
<div className="mt-3"></div>
<Controller <Controller
name="azureOpenAIApiVersion" name="azureOpenAIApiVersion"
control={control} control={control}
@ -81,19 +84,21 @@ const OpenAIConfig = ({
</> </>
)} )}
{userProvideURL && ( {userProvideURL && (
<Controller <div className="mt-3">
name="baseURL" <Controller
control={control} name="baseURL"
render={({ field }) => ( control={control}
<InputWithLabel render={({ field }) => (
id="baseURL" <InputWithLabel
{...field} id="baseURL"
label={'API Base URL'} {...field}
subLabel={'(Optional)'} label={'API Base URL'}
labelClassName="mb-1" subLabel={'(Optional)'}
/> labelClassName="mb-1"
)} />
/> )}
/>
</div>
)} )}
</form> </form>
); );

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

@ -125,7 +125,7 @@ const Nav = ({ navVisible, setNavVisible }) => {
<Tooltip> <Tooltip>
<div <div
className={ className={
'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-900 md:max-w-[260px]' 'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-750 md:max-w-[260px]'
} }
style={{ style={{
width: navVisible ? navWidth : '0px', width: navVisible ? navWidth : '0px',
@ -165,12 +165,11 @@ const Nav = ({ navVisible, setNavVisible }) => {
moveToTop={moveToTop} moveToTop={moveToTop}
toggleNav={itemToggleNav} toggleNav={itemToggleNav}
/> />
<Spinner {(isFetchingNextPage || showLoading) && (
className={cn( <Spinner
'm-1 mx-auto mb-4 h-4 w-4', className={cn('m-1 mx-auto mb-4 h-4 w-4 text-black dark:text-white')}
isFetchingNextPage || showLoading ? 'opacity-1' : 'opacity-0', />
)} )}
/>
</div> </div>
<NavLinks /> <NavLinks />
</nav> </nav>

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

@ -66,12 +66,12 @@ function NavLinks() {
)} )}
<Menu.Button <Menu.Button
className={cn( className={cn(
'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-3 text-sm rounded-md px-3 py-3 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700', 'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex h-11 w-full items-center gap-2 rounded-lg px-3 py-3 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
open ? 'bg-gray-100 dark:bg-gray-700' : '', open ? 'bg-gray-100 dark:bg-gray-700' : '',
)} )}
data-testid="nav-user" data-testid="nav-user"
> >
<div className="-ml-0.9 -mt-0.8 h-5 w-5 flex-shrink-0"> <div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0">
<div className="relative flex"> <div className="relative flex">
{!user?.avatar && !user?.username ? ( {!user?.avatar && !user?.username ? (
<div <div
@ -81,7 +81,7 @@ function NavLinks() {
height: '20px', height: '20px',
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px', boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
}} }}
className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white" className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 text-white"
> >
<UserIcon /> <UserIcon />
</div> </div>
@ -91,7 +91,7 @@ function NavLinks() {
</div> </div>
</div> </div>
<div <div
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-black dark:text-white" className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
style={{ marginTop: '0', marginLeft: '0' }} style={{ marginTop: '0', marginLeft: '0' }}
> >
{user?.name || localize('com_nav_user')} {user?.name || localize('com_nav_user')}

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

@ -38,13 +38,13 @@ export default function NewChat({
return ( return (
<TooltipProvider delayDuration={250}> <TooltipProvider delayDuration={250}>
<Tooltip> <Tooltip>
<div className="sticky left-0 right-0 top-0 z-20 bg-gray-50 pt-3.5 dark:bg-gray-900"> <div className="sticky left-0 right-0 top-0 z-20 bg-gray-50 pt-3.5 dark:bg-gray-750">
<div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}> <div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}>
<a <a
href="/" href="/"
data-testid="nav-new-chat-button" data-testid="nav-new-chat-button"
onClick={clickHandler} onClick={clickHandler}
className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-200 dark:hover:bg-gray-800" className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<div className="h-7 w-7 flex-shrink-0"> <div className="h-7 w-7 flex-shrink-0">
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white"> <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white">

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

@ -15,7 +15,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent <DialogContent
className={cn( className={cn(
'shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]', 'shadow-2xl md:min-h-[373px] md:w-[680px]',
isSmallScreen ? 'top-20 -translate-y-0' : '', isSmallScreen ? 'top-20 -translate-y-0' : '',
)} )}
> >
@ -36,17 +36,17 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
aria-orientation="vertical" aria-orientation="vertical"
className={cn( className={cn(
'min-w-auto -ml-[8px] flex flex-shrink-0 flex-col', 'min-w-auto -ml-[8px] flex flex-shrink-0 flex-col',
isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-800/30' : '', isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-700' : '',
)} )}
style={{ outline: 'none' }} style={{ outline: 'none' }}
> >
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750', '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-600',
isSmallScreen isSmallScreen
? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-200', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen ? '' : 'dark:bg-gray-800', isSmallScreen ? '' : 'dark:bg-gray-700',
)} )}
value={SettingsTabValues.GENERAL} value={SettingsTabValues.GENERAL}
style={{ userSelect: 'none' }} style={{ userSelect: 'none' }}
@ -56,11 +56,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750', '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-600',
isSmallScreen isSmallScreen
? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-200', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen ? '' : 'dark:bg-gray-800', isSmallScreen ? '' : 'dark:bg-gray-700',
)} )}
value={SettingsTabValues.BETA} value={SettingsTabValues.BETA}
style={{ userSelect: 'none' }} style={{ userSelect: 'none' }}
@ -70,11 +70,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750', '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-600',
isSmallScreen isSmallScreen
? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-200', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen ? '' : 'dark:bg-gray-800', isSmallScreen ? '' : 'dark:bg-gray-700',
)} )}
value={SettingsTabValues.DATA} value={SettingsTabValues.DATA}
style={{ userSelect: 'none' }} style={{ userSelect: 'none' }}
@ -84,11 +84,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className={cn( className={cn(
'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750', '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-600',
isSmallScreen isSmallScreen
? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white' ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: 'bg-white radix-state-active:bg-gray-200', : 'bg-white radix-state-active:bg-gray-200',
isSmallScreen ? '' : 'dark:bg-gray-800', isSmallScreen ? '' : 'dark:bg-gray-700',
)} )}
value={SettingsTabValues.ACCOUNT} value={SettingsTabValues.ACCOUNT}
style={{ userSelect: 'none' }} style={{ userSelect: 'none' }}

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

@ -81,7 +81,7 @@ function Avatar() {
<span>{localize('com_nav_profile_picture')}</span> <span>{localize('com_nav_profile_picture')}</span>
<label <label
htmlFor={'file-upload-avatar'} htmlFor={'file-upload-avatar'}
className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 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-600 dark:hover:text-green-500"
> >
<FileImage className="mr-1 flex w-[22px] items-center stroke-1" /> <FileImage className="mr-1 flex w-[22px] items-center stroke-1" />
<span>{localize('com_nav_change_picture')}</span> <span>{localize('com_nav_change_picture')}</span>
@ -98,7 +98,7 @@ function Avatar() {
<Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}> <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
<DialogContent <DialogContent
className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:h-[350px] md:w-[450px] ')} className={cn('shadow-2xl dark:bg-gray-700 dark:text-white md:h-[350px] md:w-[450px] ')}
style={{ borderRadius: '12px' }} style={{ borderRadius: '12px' }}
> >
<DialogHeader> <DialogHeader>
@ -123,7 +123,7 @@ function Avatar() {
)} )}
<button <button
className={cn( className={cn(
'mt-4 rounded px-4 py-2 text-white hover:bg-green-600 hover:text-gray-200', 'mt-4 rounded px-4 py-2 text-white transition-colors hover:bg-green-600 hover:text-gray-200',
isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500', isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500',
)} )}
onClick={handleUpload} onClick={handleUpload}

4
client/src/components/Plugins/Store/PluginAuthForm.tsx
View file

@ -38,7 +38,7 @@ function PluginAuthForm({ plugin, onSubmit, isAssistantTool }: TPluginAuthFormPr
<div key={`${authField}-${i}`} className="flex w-full flex-col gap-1"> <div key={`${authField}-${i}`} className="flex w-full flex-col gap-1">
<label <label
htmlFor={authField} htmlFor={authField}
className="mb-1 text-left text-sm font-medium text-slate-700/70 dark:text-slate-50/70" className="mb-1 text-left text-sm font-medium text-gray-700/70 dark:text-gray-50/70"
> >
{config.label} {config.label}
</label> </label>
@ -59,7 +59,7 @@ function PluginAuthForm({ plugin, onSubmit, isAssistantTool }: TPluginAuthFormPr
message: `${config.label} must be at least 10 characters long`, message: `${config.label} must be at least 10 characters long`,
}, },
})} })}
className="flex h-10 max-h-10 w-full resize-none rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm text-gray-700 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-slate-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0" className="flex h-10 max-h-10 w-full resize-none rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm text-gray-700 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-gray-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
/> />
</HoverCardTrigger> </HoverCardTrigger>
<PluginTooltip content={config.description} position="right" /> <PluginTooltip content={config.description} position="right" />

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

@ -125,9 +125,9 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
{/* The backdrop, rendered as a fixed sibling to the panel container */} {/* The backdrop, rendered as a fixed sibling to the panel container */}
<div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" /> <div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />
{/* Full-screen container to center the panel */} {/* Full-screen container to center the panel */}
<div className="fixed inset-0 flex p-4"> <div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel <Dialog.Panel
className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-800 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-700 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
style={{ minHeight: '610px' }} style={{ minHeight: '610px' }}
> >
<div className="flex items-center justify-between border-b-[1px] border-black/10 p-6 pb-4 dark:border-white/10"> <div className="flex items-center justify-between border-b-[1px] border-black/10 p-6 pb-4 dark:border-white/10">
@ -172,17 +172,17 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
<div className="p-4 sm:p-6 sm:pt-4"> <div className="p-4 sm:p-6 sm:pt-4">
<div className="mt-4 flex flex-col gap-4"> <div className="mt-4 flex flex-col gap-4">
<div className="flex items-center"> <div className="flex items-center">
<div class="relative flex items-center"> <div className="relative flex items-center">
<Search className="h-6 w-6 text-gray-500 absolute left-2" /> <Search className="absolute left-2 h-6 w-6 text-gray-500" />
<input <input
type="text" type="text"
value={searchValue} value={searchValue}
onChange={handleSearch} onChange={handleSearch}
placeholder={localize('com_nav_plugin_search')} placeholder={localize('com_nav_plugin_search')}
className="dark:focus:ring-offset-slate-900 rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-800 focus:dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0 flex pl-10 pr-2 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0" className="flex rounded-md border border-gray-200 bg-transparent py-2 pl-10 pr-2 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-gray-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-500 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-500 dark:focus:ring-offset-0 dark:focus:ring-offset-gray-900"
/> />
</div>
</div> </div>
</div>
<div <div
ref={gridRef} ref={gridRef}
className="grid grid-cols-1 grid-rows-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" className="grid grid-cols-1 grid-rows-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"

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

@ -21,7 +21,7 @@ function PluginStoreItem({ plugin, onInstall, onUninstall, isInstalled }: TPlugi
return ( return (
<> <>
<div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-800"> <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-gray-500 dark:bg-gray-700">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="h-[70px] w-[70px] shrink-0"> <div className="h-[70px] w-[70px] shrink-0">
<div className="relative h-full w-full"> <div className="relative h-full w-full">
@ -62,7 +62,7 @@ function PluginStoreItem({ plugin, onInstall, onUninstall, isInstalled }: TPlugi
)} )}
</div> </div>
</div> </div>
<div className="line-clamp-3 h-[60px] text-sm text-slate-700/70 dark:text-slate-50/70"> <div className="line-clamp-3 h-[60px] text-sm text-gray-700/70 dark:text-gray-50/70">
{plugin.description} {plugin.description}
</div> </div>
</div> </div>

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

@ -22,7 +22,7 @@ export default function ActionsAuth({
aria-describedby="radix-:rf7:" aria-describedby="radix-:rf7:"
aria-labelledby="radix-:rf6:" aria-labelledby="radix-:rf6:"
data-state="open" data-state="open"
className="left-1/2 col-auto col-start-2 row-auto row-start-2 w-full max-w-md -translate-x-1/2 rounded-xl bg-white pb-0 text-left shadow-xl transition-all dark:bg-gray-900 dark:text-gray-100" className="left-1/2 col-auto col-start-2 row-auto row-start-2 w-full max-w-md -translate-x-1/2 rounded-xl bg-white pb-0 text-left shadow-xl transition-all dark:bg-gray-700 dark:text-gray-100"
tabIndex={-1} tabIndex={-1}
style={{ pointerEvents: 'auto' }} style={{ pointerEvents: 'auto' }}
> >
@ -61,7 +61,7 @@ export default function ActionsAuth({
role="radio" role="radio"
value={AuthTypeEnum.None} value={AuthTypeEnum.None}
id=":rf8:" id=":rf8:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={-1} tabIndex={-1}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -76,7 +76,7 @@ export default function ActionsAuth({
role="radio" role="radio"
value={AuthTypeEnum.ServiceHttp} value={AuthTypeEnum.ServiceHttp}
id=":rfa:" id=":rfa:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={0} tabIndex={0}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -92,7 +92,7 @@ export default function ActionsAuth({
disabled={true} disabled={true}
value={AuthTypeEnum.OAuth} value={AuthTypeEnum.OAuth}
id=":rfc:" id=":rfc:"
className="mr-1 flex h-5 w-5 cursor-not-allowed items-center justify-center rounded-full border border-gray-500 bg-gray-300 dark:border-gray-600 dark:bg-gray-900" className="mr-1 flex h-5 w-5 cursor-not-allowed items-center justify-center rounded-full border border-gray-500 bg-gray-300 dark:border-gray-600 dark:bg-gray-700"
tabIndex={-1} tabIndex={-1}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -135,7 +135,7 @@ const ApiKey = () => {
placeholder="<HIDDEN>" placeholder="<HIDDEN>"
type="password" type="password"
autoComplete="off" autoComplete="off"
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800" className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-600"
{...register('api_key', { required: type === AuthTypeEnum.ServiceHttp })} {...register('api_key', { required: type === AuthTypeEnum.ServiceHttp })}
/> />
<label className="mb-1 block text-sm font-medium">Auth Type</label> <label className="mb-1 block text-sm font-medium">Auth Type</label>
@ -157,7 +157,7 @@ const ApiKey = () => {
role="radio" role="radio"
value={AuthorizationTypeEnum.Basic} value={AuthorizationTypeEnum.Basic}
id=":rfu:" id=":rfu:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={-1} tabIndex={-1}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -172,7 +172,7 @@ const ApiKey = () => {
role="radio" role="radio"
value={AuthorizationTypeEnum.Bearer} value={AuthorizationTypeEnum.Bearer}
id=":rg0:" id=":rg0:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={-1} tabIndex={-1}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -187,7 +187,7 @@ const ApiKey = () => {
role="radio" role="radio"
value={AuthorizationTypeEnum.Custom} value={AuthorizationTypeEnum.Custom}
id=":rg2:" id=":rg2:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={0} tabIndex={0}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -200,7 +200,7 @@ const ApiKey = () => {
<div className="mt-2"> <div className="mt-2">
<label className="mb-1 block text-sm font-medium">Custom Header Name</label> <label className="mb-1 block text-sm font-medium">Custom Header Name</label>
<input <input
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800" className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-600"
placeholder="X-Api-Key" placeholder="X-Api-Key"
{...register('custom_auth_header', { {...register('custom_auth_header', {
required: authorization_type === AuthorizationTypeEnum.Custom, required: authorization_type === AuthorizationTypeEnum.Custom,
@ -267,7 +267,7 @@ const OAuth = () => {
role="radio" role="radio"
value={TokenExchangeMethodEnum.DefaultPost} value={TokenExchangeMethodEnum.DefaultPost}
id=":rj1:" id=":rj1:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-700 dark:bg-gray-700"
tabIndex={-1} tabIndex={-1}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@ -282,7 +282,7 @@ const OAuth = () => {
role="radio" role="radio"
value={TokenExchangeMethodEnum.BasicAuthHeader} value={TokenExchangeMethodEnum.BasicAuthHeader}
id=":rj3:" id=":rj3:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700" className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-700 dark:bg-gray-700"
tabIndex={-1} tabIndex={-1}
> >
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator> <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>

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

@ -229,7 +229,7 @@ export default function ActionsInput({
<label className="text-token-text-primary block font-medium">Privacy policy</label> <label className="text-token-text-primary block font-medium">Privacy policy</label>
</span> </span>
</div> </div>
<div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:bg-gray-700 dark:focus-within:border-white dark:focus-within:ring-white"> <div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:focus-within:border-gray-500 dark:focus-within:ring-gray-500">
<label <label
htmlFor="privacyPolicyUrl" htmlFor="privacyPolicyUrl"
className="block text-xs font-medium text-gray-900 dark:text-gray-100" className="block text-xs font-medium text-gray-900 dark:text-gray-100"

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

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

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

@ -105,7 +105,7 @@ export default function ContextButton({
<Popover.Content <Popover.Content
side="top" side="top"
role="menu" role="menu"
className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-900 dark:bg-gray-900" 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-850"
style={{ outline: 'none', pointerEvents: 'auto' }} style={{ outline: 'none', pointerEvents: 'auto' }}
sideOffset={8} sideOffset={8}
tabIndex={-1} tabIndex={-1}

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

@ -98,7 +98,7 @@ export function AvatarMenu({
return ( return (
<Popover.Portal> <Popover.Portal>
<Popover.Content <Popover.Content
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 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-850 dark:text-white"
sideOffset={5} sideOffset={5}
> >
<div <div

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

@ -77,7 +77,7 @@ export default function PanelFileCell({ row }: { row: Row<TFile> }) {
return ( return (
<div <div
onClick={handleFileClick} onClick={handleFileClick}
className="flex cursor-pointer gap-2 rounded-md dark:hover:bg-gray-900" className="flex cursor-pointer gap-2 rounded-md dark:hover:bg-gray-700"
> >
<ImagePreview <ImagePreview
url={file.filepath} url={file.filepath}

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

@ -75,8 +75,8 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
variant === 'default' variant === 'default'
? 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white' ? 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white'
: '', : '',
'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', 'hover:bg-gray-50 data-[state=open]:bg-gray-50 data-[state=open]:text-black dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-700 dark:data-[state=open]:text-white',
'w-full justify-start rounded-md border dark:border-gray-600', 'w-full justify-start rounded-md border dark:border-gray-700',
)} )}
> >
<link.icon className="mr-2 h-4 w-4" /> <link.icon className="mr-2 h-4 w-4" />

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

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

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

@ -59,7 +59,7 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
isCollapsed isCollapsed
? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden' ? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden'
: '', : '',
'bg-white text-black hover:bg-gray-50 dark:bg-gray-900 dark:text-white', 'bg-white text-black hover:bg-gray-50 dark:bg-gray-850 dark:text-white',
)} )}
aria-label={localize('com_sidepanel_select_assistant')} aria-label={localize('com_sidepanel_select_assistant')}
> >

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

@ -61,7 +61,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
)} )}
</div> </div>
</div> </div>
<div className="line-clamp-3 h-[60px] text-sm text-slate-700/70 dark:text-slate-50/70"> <div className="line-clamp-3 h-[60px] text-sm text-gray-700/70 dark:text-gray-50/70">
{tool.description} {tool.description}
</div> </div>
</div> </div>

2
client/src/components/svg/EditIcon.tsx
View file

@ -1,5 +1,3 @@
import React from 'react';
export default function EditIcon() { export default function EditIcon() {
return ( return (
<svg <svg

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

@ -22,7 +22,6 @@ export { default as OpenIDIcon } from './OpenIDIcon';
export { default as GithubIcon } from './GithubIcon'; export { default as GithubIcon } from './GithubIcon';
export { default as DiscordIcon } from './DiscordIcon'; export { default as DiscordIcon } from './DiscordIcon';
export { default as AnthropicIcon } from './AnthropicIcon'; export { default as AnthropicIcon } from './AnthropicIcon';
export { default as RenameIcon } from './RenameIcon';
export { default as SendIcon } from './SendIcon'; export { default as SendIcon } from './SendIcon';
export { default as LinkIcon } from './LinkIcon'; export { default as LinkIcon } from './LinkIcon';
export { default as DotsIcon } from './DotsIcon'; export { default as DotsIcon } from './DotsIcon';

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

@ -45,7 +45,7 @@ const AlertDialogContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
'fixed z-50 grid w-full max-w-lg scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full', 'fixed z-50 grid w-full max-w-lg scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
'dark:bg-slate-900', 'dark:bg-gray-900',
className, className,
)} )}
{...props} {...props}
@ -73,7 +73,7 @@ const AlertDialogTitle = React.forwardRef<
>(({ className = '', ...props }, ref) => ( >(({ className = '', ...props }, ref) => (
<AlertDialogPrimitive.Title <AlertDialogPrimitive.Title
ref={ref} ref={ref}
className={cn('text-lg font-semibold text-slate-900', 'dark:text-slate-50', className)} className={cn('text-lg font-semibold text-gray-900', 'dark:text-gray-50', className)}
{...props} {...props}
/> />
)); ));
@ -85,7 +85,7 @@ const AlertDialogDescription = React.forwardRef<
>(({ className = '', ...props }, ref) => ( >(({ className = '', ...props }, ref) => (
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
ref={ref} ref={ref}
className={cn('text-sm text-slate-500', 'dark:text-slate-400', className)} className={cn('text-sm text-gray-500', 'dark:text-gray-400', className)}
{...props} {...props}
/> />
)); ));
@ -98,7 +98,7 @@ const AlertDialogAction = React.forwardRef<
<AlertDialogPrimitive.Action <AlertDialogPrimitive.Action
ref={ref} ref={ref}
className={cn( className={cn(
'inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-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', 'inline-flex h-10 items-center justify-center rounded-md bg-gray-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-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-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
className, className,
)} )}
{...props} {...props}
@ -113,7 +113,7 @@ const AlertDialogCancel = React.forwardRef<
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
ref={ref} ref={ref}
className={cn( className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 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-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
className, className,
)} )}
{...props} {...props}

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

@ -4,11 +4,11 @@ import { VariantProps, cva } from 'class-variance-authority';
import { cn } from '../../utils'; import { cn } from '../../utils';
const buttonVariants = cva( const buttonVariants = cva(
'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none 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', 'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none dark:hover:bg-gray-700 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-700',
{ {
variants: { variants: {
variant: { variant: {
default: 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-50 dark:text-gray-900', default: 'bg-gray-750 text-white hover:bg-gray-800 dark:bg-gray-50 dark:text-gray-900',
destructive: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600', destructive: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600',
outline: outline:
'bg-transparent border border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100', 'bg-transparent border border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100',

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

@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 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', 'peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
className, className,
)} )}
{...props} {...props}

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

@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg', 'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
'dark:bg-slate-900', 'dark:bg-gray-700',
isSmallScreen isSmallScreen
? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-white pb-6' ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-white pb-6'
: '', : '',
@ -59,7 +59,7 @@ const DialogContent = React.forwardRef<
{...props} {...props}
> >
{children} {children}
<DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800"> <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 dark:data-[state=open]:bg-gray-800">
<X className="h-5 w-5 text-black dark:text-white" /> <X className="h-5 w-5 text-black dark:text-white" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
@ -72,7 +72,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div <div
className={cn( className={cn(
'flex flex-col space-y-2 border-b border-black/10 dark:border-white/10 p-6 pb-4 text-left', 'flex flex-col space-y-2 border-b border-black/10 p-6 pb-4 text-left dark:border-white/10',
className ?? '', className ?? '',
)} )}
{...props} {...props}
@ -82,10 +82,7 @@ DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div <div
className={cn( className={cn('flex flex-row justify-between space-x-2 px-6 py-4', className ?? '')}
'flex px-6 py-4 flex-row justify-between space-x-2',
className ?? '',
)}
{...props} {...props}
/> />
); );
@ -97,7 +94,7 @@ const DialogTitle = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<DialogPrimitive.Title <DialogPrimitive.Title
ref={ref} ref={ref}
className={cn('text-lg font-semibold text-slate-900', 'dark:text-slate-50', className ?? '')} className={cn('text-lg font-semibold text-gray-900', 'dark:text-gray-50', className ?? '')}
{...props} {...props}
/> />
)); ));
@ -109,7 +106,7 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<DialogPrimitive.Description <DialogPrimitive.Description
ref={ref} ref={ref}
className={cn('text-sm text-slate-500', 'dark:text-slate-400', className ?? '')} className={cn('text-sm text-gray-500', 'dark:text-gray-400', className ?? '')}
{...props} {...props}
/> />
)); ));
@ -122,7 +119,7 @@ const DialogClose = React.forwardRef<
<DialogPrimitive.Close <DialogPrimitive.Close
ref={ref} ref={ref}
className={cn( className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 sm:mt-0', 'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 sm:mt-0',
className ?? '', className ?? '',
)} )}
{...props} {...props}
@ -138,7 +135,7 @@ const DialogButton = React.forwardRef<
ref={ref} ref={ref}
variant="outline" variant="outline"
className={cn( className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 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-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
className ?? '', className ?? '',
)} )}
{...props} {...props}

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

@ -50,7 +50,7 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
<DialogContent <DialogContent
showCloseButton={showCloseButton} showCloseButton={showCloseButton}
ref={ref} ref={ref}
className={cn('shadow-2xl dark:bg-gray-800', className || '')} className={cn('shadow-2xl dark:bg-gray-700', className || '')}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<DialogHeader className={cn(headerClassName ?? '')}> <DialogHeader className={cn(headerClassName ?? '')}>
@ -67,7 +67,7 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
<DialogFooter> <DialogFooter>
<div>{leftButtons ? leftButtons : null}</div> <div>{leftButtons ? leftButtons : null}</div>
<div className="flex h-auto gap-3"> <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"> <DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600">
{Cancel} {Cancel}
</DialogClose> </DialogClose>
{buttons ? buttons : null} {buttons ? buttons : null}

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

@ -41,7 +41,7 @@ const Dropdown: FC<DropdownProps> = ({
<Listbox.Button <Listbox.Button
data-testid={testId} data-testid={testId}
className={cn( className={cn(
'relative inline-flex items-center justify-between rounded-md border-gray-300 bg-white py-2 pl-3 pr-8 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700', 'relative inline-flex items-center justify-between rounded-md border-gray-300 bg-white py-2 pl-3 pr-8 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 ',
'w-auto', 'w-auto',
className, className,
)} )}
@ -61,13 +61,13 @@ const Dropdown: FC<DropdownProps> = ({
stroke="currentColor" stroke="currentColor"
className="h-4 w-5 rotate-0 transform text-gray-400 transition-transform duration-300 ease-in-out" className="h-4 w-5 rotate-0 transform text-gray-400 transition-transform duration-300 ease-in-out"
> >
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</span> </span>
</Listbox.Button> </Listbox.Button>
<Listbox.Options <Listbox.Options
className={cn( className={cn(
'absolute z-50 mt-1 max-h-[40vh] overflow-auto rounded-md border-gray-300 bg-white text-gray-700 shadow-lg transition-opacity hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700', 'absolute z-50 mt-1 max-h-[40vh] overflow-auto rounded-md border-gray-300 bg-white text-gray-700 shadow-lg transition-opacity hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
className, className,
)} )}
style={{ width: width ? `${width}px` : 'auto' }} style={{ width: width ? `${width}px` : 'auto' }}
@ -77,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
key={index} key={index}
value={typeof item === 'string' ? item : item.value} value={typeof item === 'string' ? item : item.value}
className={cn( className={cn(
'relative cursor-pointer select-none border-gray-300 bg-white py-1 pl-3 pr-6 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700', 'relative cursor-pointer select-none border-gray-300 bg-white py-1 pl-3 pr-6 text-gray-700 hover:bg-gray-50 dark:border-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
)} )}
style={{ width: width ? `${width}px` : 'auto' }} style={{ width: width ? `${width}px` : 'auto' }}
data-theme={typeof item === 'string' ? item : (item as OptionType).value} data-theme={typeof item === 'string' ? item : (item as OptionType).value}

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

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

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

@ -21,7 +21,7 @@ export default function MultiSearch({
); );
return ( return (
<div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-gradient-to-b from-white from-65% to-transparent px-2 px-3 py-2 text-black transition-colors duration-300 focus:bg-gradient-to-b focus:from-white focus:to-white/50 dark:from-gray-800 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20"> <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-gradient-to-b from-white from-65% to-transparent px-2 px-3 py-2 text-black transition-colors duration-300 focus:bg-gradient-to-b focus:from-white focus:to-white/50 dark:from-gray-700 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20">
<Search className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" /> <Search className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" />
<input <input
type="text" type="text"

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

@ -49,9 +49,9 @@ function MultiSelectPop({
<button <button
data-testid="select-dropdown-button" data-testid="select-dropdown-button"
className={cn( className={cn(
'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm', 'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm',
'pointer-cursor font-normal', 'pointer-cursor font-normal',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20', 'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
)} )}
> >
{' '} {' '}
@ -113,7 +113,7 @@ function MultiSelectPop({
side="bottom" side="bottom"
align="center" align="center"
className={cn( className={cn(
'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', '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-700 dark:text-white',
hasSearchRender && 'relative', hasSearchRender && 'relative',
)} )}
> >

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

@ -74,7 +74,7 @@ function SelectDropDown({
<Listbox.Button <Listbox.Button
data-testid="select-dropdown-button" data-testid="select-dropdown-button"
className={cn( className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm', 'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700 sm:text-sm',
className ?? '', className ?? '',
)} )}
> >
@ -130,7 +130,7 @@ function SelectDropDown({
> >
<Listbox.Options <Listbox.Options
className={cn( className={cn(
'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:border-gray-600 dark:bg-gray-800 dark:ring-white/20 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:border-gray-600 dark:bg-gray-700 dark:ring-white/20 md:w-[100%]',
optionsListClass ?? '', optionsListClass ?? '',
)} )}
> >

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

@ -58,8 +58,8 @@ function SelectDropDownPop({
<button <button
data-testid="select-dropdown-button" data-testid="select-dropdown-button"
className={cn( className={cn(
'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm', 'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20', 'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
)} )}
> >
{' '} {' '}
@ -104,7 +104,7 @@ function SelectDropDownPop({
side="bottom" side="bottom"
align="start" align="start"
className={cn( className={cn(
'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]', '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-700 dark:text-white lg:max-h-[52vh]',
hasSearchRender && 'relative', hasSearchRender && 'relative',
)} )}
> >

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

@ -11,7 +11,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return ( return (
<textarea <textarea
className={cn( className={cn(
'flex h-20 w-full resize-none 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 h-20 w-full resize-none rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
className, className,
)} )}
ref={ref} ref={ref}

10
client/src/style.css
View file

@ -1049,9 +1049,9 @@ button {
} }
.dark .btn-secondary:hover { .dark .btn-secondary:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
border-color: rgba(68, 68, 68, var(--tw-border-opacity)); border-color: rgba(8, 82, 78, var(--tw-border-opacity));
color: rgba(255, 255, 240, var(--tw-text-opacity)); color: rgba(255, 255, 240, var(--tw-text-opacity));
background-color: rgba(47, 47, 47, var(--tw-bg-opacity)); background-color: rgba(8, 82, 78, var(--tw-bg-opacity));
} }
.btn-neutral { .btn-neutral {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
@ -1072,12 +1072,12 @@ button {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
--tw-text-opacity: 1; --tw-text-opacity: 1;
background-color: transparent; background-color: transparent;
border-color: rgba(68, 68, 68, var(--tw-border-opacity)); border-color: rgba(66, 66, 66, var(--tw-border-opacity));
color: rgba(255, 255, 240, var(--tw-text-opacity)); color: rgba(255, 255, 240, var(--tw-text-opacity));
} }
.dark .btn-neutral:hover { .dark .btn-neutral:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgba(47, 47, 47, var(--tw-bg-opacity)); background-color: rgba(66, 66, 66, var(--tw-bg-opacity));
} }
.btn-small { .btn-small {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@ -1658,7 +1658,7 @@ button.scroll-convo {
--gray-300:#cdcdcd; --gray-300:#cdcdcd;
--gray-400:#999696; --gray-400:#999696;
--gray-500:#686262; --gray-500:#686262;
--gray-600:#3d3d3f; --gray-600:#424242;
--gray-700:#262626; --gray-700:#262626;
--gray-750:#333333; --gray-750:#333333;
--gray-800:#171717; --gray-800:#171717;

4
client/src/utils/index.ts
View file

@ -50,10 +50,10 @@ export const removeFocusOutlines =
'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'; 'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
export const cardStyle = export const cardStyle =
'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-slate-50 dark:border-gray-600 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-slate-50 dark:data-[state=open]:bg-gray-700'; 'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-gray-50 dark:data-[state=open]:bg-gray-700';
export const defaultTextProps = export const defaultTextProps =
'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-600 dark:focus:outline-none'; 'rounded-md border border-gray-200 focus:border-gray-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:bg-gray-600 dark:focus:border-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:outline-none';
export const optionText = export const optionText =
'p-0 shadow-none text-right pr-1 h-8 border-transparent hover:bg-gray-800/10 dark:hover:bg-white/10 dark:focus:bg-white/10 transition-colors'; 'p-0 shadow-none text-right pr-1 h-8 border-transparent hover:bg-gray-800/10 dark:hover:bg-white/10 dark:focus:bg-white/10 transition-colors';

9
client/tailwind.config.cjs
View file

@ -43,11 +43,12 @@ module.exports = {
200: '#e3e3e3', 200: '#e3e3e3',
300: '#cdcdcd', 300: '#cdcdcd',
400: '#999696', 400: '#999696',
500: '#686262', 500: '#595959',
600: '#3d3d3f', 600: '#424242',
700: '#262626', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover 700: '#2f2f2f', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
750: '#333333', 750: '#171717',
800: '#212121', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90 800: '#212121', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
850: '#171717',
900: '#0d0d0d', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover 900: '#0d0d0d', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
}, },
green: { green: {