{ } return ( - + @@ -31,7 +31,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay {!isCreatedByUser ? ( diff --git a/client/src/components/Messages/Content/Plugin.tsx b/client/src/components/Messages/Content/Plugin.tsx index 86e6b79bfe..bde259cff5 100644 --- a/client/src/components/Messages/Content/Plugin.tsx +++ b/client/src/components/Messages/Content/Plugin.tsx @@ -86,7 +86,7 @@ const Plugin: React.FC = ({ plugin }) => { @@ -94,7 +94,7 @@ const Plugin: React.FC = ({ plugin }) => { {generateStatus()} - {plugin.loading && } + {plugin.loading && } diff --git a/client/src/components/Messages/HoverButtons.tsx b/client/src/components/Messages/HoverButtons.tsx index da78371d53..6841b471a7 100644 --- a/client/src/components/Messages/HoverButtons.tsx +++ b/client/src/components/Messages/HoverButtons.tsx @@ -51,10 +51,10 @@ export default function HoverButtons({ copyToClipboard(setIsCopied)} @@ -78,7 +78,7 @@ export default function HoverButtons({ {regenerateEnabled ? ( { <> ) : _messagesTree?.length == 0 && isSearchView ? ( - + Nothing found ) : ( @@ -114,7 +114,7 @@ export default function Messages({ isSearchView = false }) { )} diff --git a/client/src/components/Nav/ExportConversation/ExportModal.jsx b/client/src/components/Nav/ExportConversation/ExportModal.jsx index d2cfb49c1e..dfb7738835 100644 --- a/client/src/components/Nav/ExportConversation/ExportModal.jsx +++ b/client/src/components/Nav/ExportConversation/ExportModal.jsx @@ -435,7 +435,7 @@ export default function ExportModal({ open, onOpenChange, conversation }) { <> {localize('com_endpoint_export')} diff --git a/client/src/components/Nav/Logout.tsx b/client/src/components/Nav/Logout.tsx index a16f4f3266..f107e7c457 100644 --- a/client/src/components/Nav/Logout.tsx +++ b/client/src/components/Nav/Logout.tsx @@ -9,7 +9,7 @@ const Logout = forwardRef(() => { return ( logout()} > diff --git a/client/src/components/Nav/MobileNav.tsx b/client/src/components/Nav/MobileNav.tsx index 847ef66a9a..b8c8fba3fc 100644 --- a/client/src/components/Nav/MobileNav.tsx +++ b/client/src/components/Nav/MobileNav.tsx @@ -15,11 +15,11 @@ export default function MobileNav({ const { title = 'New Chat' } = conversation || {}; return ( - + setNavVisible((prev) => !prev)} > {localize('com_nav_open_sidebar')} @@ -44,7 +44,7 @@ export default function MobileNav({ newConversation()} > + ( <> {startupConfig?.checkBalance && balanceQuery.data && ( - + {`Balance: ${balanceQuery.data}`} )} @@ -90,7 +90,7 @@ function NavLinks() { {user?.name || localize('com_nav_user')} @@ -106,22 +106,24 @@ function NavLinks() { leaveFrom="translate-y-0 opacity-100" leaveTo="translate-y-2 opacity-0" > - + } text={localize('com_nav_export_conversation')} clickHandler={clickHandler} /> - + } text="My Files" clickHandler={() => setShowFiles(true)} @@ -130,7 +132,7 @@ function NavLinks() { {startupConfig?.helpAndFaqURL !== '/' && ( } text={localize('com_nav_help_faq')} clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')} @@ -139,13 +141,13 @@ function NavLinks() { )} } text={localize('com_nav_settings')} clickHandler={() => setShowSettings(true)} /> - + diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx index 75a5facf08..7a17498fda 100644 --- a/client/src/components/Nav/NewChat.tsx +++ b/client/src/components/Nav/NewChat.tsx @@ -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,40 +43,49 @@ export default function NewChat({ }; return ( - - - - - - {endpoint && - Icon && - Icon({ - size: 41, - context: 'nav', - className: 'h-2/3 w-2/3', - endpoint: endpoint, - iconURL: iconURL, - })} - + + + + + + + + {endpoint && + Icon && + Icon({ + size: 41, + context: 'nav', + className: 'h-2/3 w-2/3', + endpoint: endpoint, + iconURL: iconURL, + })} + + + + {localize('com_ui_new_chat')} + + + + + + + + + + {localize('com_ui_new_chat')} + + + + - - {localize('com_ui_new_chat')} - - - - - - - - - - - {subHeaders ? subHeaders : null} - + {subHeaders ? subHeaders : null} + + + ); } diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx index 713a41cc84..24a8d1cf63 100644 --- a/client/src/components/Nav/SearchBar.tsx +++ b/client/src/components/Nav/SearchBar.tsx @@ -44,7 +44,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref) = return ( {} - + {localize('com_nav_settings')} @@ -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' }} > {localize('com_nav_setting_general')} {localize('com_nav_setting_beta')} {localize('com_nav_setting_data')} {localize('com_nav_setting_account')} diff --git a/client/src/components/Nav/SettingsTabs/Account/Account.tsx b/client/src/components/Nav/SettingsTabs/Account/Account.tsx index 6b785ccbaa..c4d7c86fa4 100644 --- a/client/src/components/Nav/SettingsTabs/Account/Account.tsx +++ b/client/src/components/Nav/SettingsTabs/Account/Account.tsx @@ -24,7 +24,7 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo role="tabpanel" className="w-full md:min-h-[300px]" > - + diff --git a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx index 0d04fa2e89..33263283eb 100644 --- a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx +++ b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx @@ -81,7 +81,7 @@ function Avatar() { {localize('com_nav_profile_picture')} {localize('com_nav_change_picture')} @@ -98,11 +98,11 @@ function Avatar() { setDialogOpen(false)}> - + {localize('com_ui_preview')} diff --git a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx index 7ea4e32a43..699def5574 100644 --- a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx +++ b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx @@ -11,7 +11,7 @@ function Beta() { role="tabpanel" className="w-full md:min-h-[300px]" > - + diff --git a/client/src/components/Nav/SettingsTabs/Data/Data.tsx b/client/src/components/Nav/SettingsTabs/Data/Data.tsx index 7d05ebe006..923843c93c 100644 --- a/client/src/components/Nav/SettingsTabs/Data/Data.tsx +++ b/client/src/components/Nav/SettingsTabs/Data/Data.tsx @@ -72,7 +72,7 @@ function Data() { role="tabpanel" className="w-full md:min-h-[300px]" > - + diff --git a/client/src/components/Nav/SettingsTabs/General/General.tsx b/client/src/components/Nav/SettingsTabs/General/General.tsx index 2e9744e994..8bff3496ac 100644 --- a/client/src/components/Nav/SettingsTabs/General/General.tsx +++ b/client/src/components/Nav/SettingsTabs/General/General.tsx @@ -174,7 +174,7 @@ function General() { className="w-full md:min-h-[300px]" ref={contentRef} > - + diff --git a/client/src/components/Plugins/Store/PluginPagination.tsx b/client/src/components/Plugins/Store/PluginPagination.tsx index f3e0be91cd..4a76e32560 100644 --- a/client/src/components/Plugins/Store/PluginPagination.tsx +++ b/client/src/components/Plugins/Store/PluginPagination.tsx @@ -31,6 +31,7 @@ const PluginPagination: React.FC = ({ ? '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' }} > = ({ ? '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 = ({ ? '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 {/* The backdrop, rendered as a fixed sibling to the panel container */} - + {/* Full-screen container to center the panel */} - + - + {localize('com_nav_plugin_store')} @@ -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} > @@ -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" /> - + diff --git a/client/src/components/SidePanel/Builder/ActionsAuth.tsx b/client/src/components/SidePanel/Builder/ActionsAuth.tsx index 14e763809f..2c0acb3c93 100644 --- a/client/src/components/SidePanel/Builder/ActionsAuth.tsx +++ b/client/src/components/SidePanel/Builder/ActionsAuth.tsx @@ -106,7 +106,7 @@ export default function ActionsAuth({ {/* Cancel/Save */} { const result = await trigger(undefined, { shouldFocus: true }); setValue('saved_auth_fields', result); diff --git a/client/src/components/SidePanel/Builder/ActionsPanel.tsx b/client/src/components/SidePanel/Builder/ActionsPanel.tsx index 1bdab64b92..509d38464d 100644 --- a/client/src/components/SidePanel/Builder/ActionsPanel.tsx +++ b/client/src/components/SidePanel/Builder/ActionsPanel.tsx @@ -107,7 +107,7 @@ export default function ActionsPanel({ { if (!assistant_id) { return prompt('No assistant_id found, is the assistant created?'); diff --git a/client/src/components/SidePanel/Builder/AssistantPanel.tsx b/client/src/components/SidePanel/Builder/AssistantPanel.tsx index 04b4a52696..d69040d5b2 100644 --- a/client/src/components/SidePanel/Builder/AssistantPanel.tsx +++ b/client/src/components/SidePanel/Builder/AssistantPanel.tsx @@ -391,7 +391,7 @@ export default function AssistantPanel({ 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" > {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" > {localize('com_assistants_add_actions')} @@ -440,7 +440,7 @@ export default function AssistantPanel({ )} {/* Submit Button */} {create.isLoading || update.isLoading ? ( diff --git a/client/src/components/SidePanel/Builder/AssistantSelect.tsx b/client/src/components/SidePanel/Builder/AssistantSelect.tsx index 6e6afebb96..fabf8d1c28 100644 --- a/client/src/components/SidePanel/Builder/AssistantSelect.tsx +++ b/client/src/components/SidePanel/Builder/AssistantSelect.tsx @@ -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={() => ( diff --git a/client/src/components/SidePanel/Builder/ContextButton.tsx b/client/src/components/SidePanel/Builder/ContextButton.tsx index d343b7059b..cadc96989c 100644 --- a/client/src/components/SidePanel/Builder/ContextButton.tsx +++ b/client/src/components/SidePanel/Builder/ContextButton.tsx @@ -65,7 +65,7 @@ export default function ContextButton({ ({ columns, data }: DataTablePro className="max-w-xs dark:border-gray-700" /> - + {table.getHeaderGroups().map((headerGroup, index) => ( @@ -88,7 +88,7 @@ export default function DataTable({ columns, data }: DataTablePro {header.isPlaceholder ? null diff --git a/client/src/components/SidePanel/Nav.tsx b/client/src/components/SidePanel/Nav.tsx index 15aea95a9e..496b3a6cfc 100644 --- a/client/src/components/SidePanel/Nav.tsx +++ b/client/src/components/SidePanel/Nav.tsx @@ -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', )} > diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx index 0d33a80bb3..a0de890147 100644 --- a/client/src/components/SidePanel/SidePanel.tsx +++ b/client/src/components/SidePanel/SidePanel.tsx @@ -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 && ( - + )} diff --git a/client/src/components/SidePanel/Switcher.tsx b/client/src/components/SidePanel/Switcher.tsx index c939d9b791..d9cdab852a 100644 --- a/client/src/components/SidePanel/Switcher.tsx +++ b/client/src/components/SidePanel/Switcher.tsx @@ -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) ?? ''} /> - + {assistants.find((assistant) => assistant.id === selectedAssistant)?.name ?? localize('com_sidepanel_select_assistant')} - + {assistants.map((assistant) => ( - - + + + diff --git a/client/src/components/Tools/ToolSelectDialog.tsx b/client/src/components/Tools/ToolSelectDialog.tsx index ee2f245b19..b40ca7ea77 100644 --- a/client/src/components/Tools/ToolSelectDialog.tsx +++ b/client/src/components/Tools/ToolSelectDialog.tsx @@ -138,11 +138,11 @@ function ToolSelectDialog({ className="relative z-[102]" > {/* The backdrop, rendered as a fixed sibling to the panel container */} - + {/* Full-screen container to center the panel */} @@ -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} > @@ -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" /> - - - - ); -} diff --git a/client/src/components/svg/index.ts b/client/src/components/svg/index.ts index 283e7012f2..b43b0e6e65 100644 --- a/client/src/components/svg/index.ts +++ b/client/src/components/svg/index.ts @@ -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'; diff --git a/client/src/components/ui/AlertDialog.tsx b/client/src/components/ui/AlertDialog.tsx index 45534a57ee..89369dbe69 100644 --- a/client/src/components/ui/AlertDialog.tsx +++ b/client/src/components/ui/AlertDialog.tsx @@ -98,7 +98,7 @@ const AlertDialogAction = React.forwardRef< (({ className, ...props }, ref) => ( , - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - - - {children} - - - Close - - - -)); + React.ComponentPropsWithoutRef & { showCloseButton?: boolean } +>(({ className, children = true, ...props }, ref) => { + const isSmallScreen = useMediaQuery('(max-width: 768px)'); + + return ( + + + + {children} + + + Close + + + + ); +}); DialogContent.displayName = DialogPrimitive.Content.displayName; const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => ( @@ -114,7 +122,7 @@ const DialogClose = React.forwardRef< ) => { 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 ( e.stopPropagation()} > - - + + {title} {description && ( @@ -55,15 +66,17 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref{main ? main : null} {leftButtons ? leftButtons : null} - - {Cancel} + + + {Cancel} + {buttons ? buttons : null} {selection ? ( {selectText} diff --git a/client/src/components/ui/Dropdown.tsx b/client/src/components/ui/Dropdown.tsx index 92d381fa95..90d5b267e7 100644 --- a/client/src/components/ui/Dropdown.tsx +++ b/client/src/components/ui/Dropdown.tsx @@ -31,8 +31,8 @@ const Dropdown: FC = ({ 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 = diff --git a/client/src/components/ui/HoverCard.tsx b/client/src/components/ui/HoverCard.tsx index a97ed7d4e8..59a6205ad3 100644 --- a/client/src/components/ui/HoverCard.tsx +++ b/client/src/components/ui/HoverCard.tsx @@ -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} diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx index 96b2d457ba..3394a7f289 100644 --- a/client/src/components/ui/Input.tsx +++ b/client/src/components/ui/Input.tsx @@ -8,7 +8,7 @@ const Input = React.forwardRef(({ className, ...pr return ( - + "{localize('com_ui_example_quantum_computing')}" → "{localize('com_ui_example_10_year_old_b_day')}" → "{localize('com_ui_example_http_in_js')}" → @@ -108,7 +108,7 @@ export default function Landing() { )} {!!showingTemplates && } */} - {/* */} + {/* */} ); diff --git a/client/src/components/ui/MultiSelectDropDown.tsx b/client/src/components/ui/MultiSelectDropDown.tsx index 29b575e022..7df6edccac 100644 --- a/client/src/components/ui/MultiSelectDropDown.tsx +++ b/client/src/components/ui/MultiSelectDropDown.tsx @@ -77,7 +77,7 @@ function MultiSelectDropDown({ @@ -147,7 +147,7 @@ function MultiSelectDropDown({ {!option.isButton && ( @@ -168,19 +168,19 @@ function MultiSelectDropDown({ )} {option.name} {option.isButton && ( - + )} {selected && !option.isButton && ( - + )} diff --git a/client/src/components/ui/MultiSelectPop.tsx b/client/src/components/ui/MultiSelectPop.tsx index e198b827b0..b83b631e32 100644 --- a/client/src/components/ui/MultiSelectPop.tsx +++ b/client/src/components/ui/MultiSelectPop.tsx @@ -55,7 +55,7 @@ function MultiSelectPop({ @@ -106,7 +106,7 @@ function MultiSelectPop({ {availableValues.map((option) => { if (!option) { diff --git a/client/src/components/ui/Prompt.tsx b/client/src/components/ui/Prompt.tsx index 457a68f190..3453ce436a 100644 --- a/client/src/components/ui/Prompt.tsx +++ b/client/src/components/ui/Prompt.tsx @@ -12,7 +12,7 @@ export default function Prompt({ title, prompt }: { title: string; prompt: strin {title} - + {prompt} diff --git a/client/src/components/ui/Select.tsx b/client/src/components/ui/Select.tsx index 6f67f40f44..79a5993947 100644 --- a/client/src/components/ui/Select.tsx +++ b/client/src/components/ui/Select.tsx @@ -19,7 +19,8 @@ const SelectTrigger = React.forwardRef< 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< @@ -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 ?? '', )} > diff --git a/client/src/components/ui/SelectDropDownPop.tsx b/client/src/components/ui/SelectDropDownPop.tsx index 51c453fa6e..88c434028e 100644 --- a/client/src/components/ui/SelectDropDownPop.tsx +++ b/client/src/components/ui/SelectDropDownPop.tsx @@ -61,7 +61,7 @@ function SelectDropDownPop({ {availableValues.map((option) => { return ( diff --git a/client/src/components/ui/Slider.tsx b/client/src/components/ui/Slider.tsx index eccdf5de1d..75baaf9acc 100644 --- a/client/src/components/ui/Slider.tsx +++ b/client/src/components/ui/Slider.tsx @@ -15,7 +15,7 @@ const Slider = React.forwardRef, S className={cn('relative flex w-full touch-none select-none items-center', className ?? '')} {...props} > - + , 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" /> ), diff --git a/client/src/components/ui/Switch.tsx b/client/src/components/ui/Switch.tsx index 02b83dd911..4110b18c53 100644 --- a/client/src/components/ui/Switch.tsx +++ b/client/src/components/ui/Switch.tsx @@ -9,7 +9,7 @@ const Switch = React.forwardRef< >(({ className = '', ...props }, ref) => ( diff --git a/client/src/components/ui/Tabs.tsx b/client/src/components/ui/Tabs.tsx index a439407e85..16a7edbbf5 100644 --- a/client/src/components/ui/Tabs.tsx +++ b/client/src/components/ui/Tabs.tsx @@ -12,7 +12,7 @@ const TabsList = React.forwardRef< (({ className = '', ...props }, ref) => ( void {localize('com_ui_showing')}{' '} - 1{' '} + 1{' '} {localize('com_ui_of')}{' '} - + 1 {localize('com_ui_entries')} {localize('com_ui_hide_prompt_templates')} @@ -38,7 +38,7 @@ export default function Templates({ showTemplates }: { showTemplates: () => void {localize('com_ui_dan')} - + {localize('com_ui_dan_template')} @@ -47,14 +47,14 @@ export default function Templates({ showTemplates }: { showTemplates: () => void {localize('com_ui_prev')} {localize('com_ui_next')} diff --git a/client/src/components/ui/Tooltip.tsx b/client/src/components/ui/Tooltip.tsx index eca048d295..d4782601d5 100644 --- a/client/src/components/ui/Tooltip.tsx +++ b/client/src/components/ui/Tooltip.tsx @@ -25,11 +25,12 @@ const TooltipContent = React.forwardRef< {children} diff --git a/client/src/hooks/ScreenshotContext.tsx b/client/src/hooks/ScreenshotContext.tsx index 77e987f165..bd841b68aa 100644 --- a/client/src/hooks/ScreenshotContext.tsx +++ b/client/src/hooks/ScreenshotContext.tsx @@ -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; diff --git a/client/src/localization/languages/Ar.tsx b/client/src/localization/languages/Ar.tsx index 2993d78176..5931396f38 100644 --- a/client/src/localization/languages/Ar.tsx +++ b/client/src/localization/languages/Ar.tsx @@ -1,7 +1,6 @@ // Arabic phrases export default { - com_ui_balance: 'الرصيد', com_ui_examples: 'أمثلة', com_ui_happy_birthday: 'إنه عيد ميلادي الأول!', com_ui_new_chat: 'دردشة جديدة', diff --git a/client/src/localization/languages/Eng.tsx b/client/src/localization/languages/Eng.tsx index d50c96dae2..e54ad02ef9 100644 --- a/client/src/localization/languages/Eng.tsx +++ b/client/src/localization/languages/Eng.tsx @@ -31,7 +31,7 @@ export default { com_ui_attach_error: 'Cannot attach file. Create or select a conversation, or try refreshing the page.', com_ui_examples: 'Examples', - com_ui_new_chat: 'New Chat', + com_ui_new_chat: 'New chat', com_ui_happy_birthday: 'It\'s my 1st birthday!', com_ui_example_quantum_computing: 'Explain quantum computing in simple terms', com_ui_example_10_year_old_b_day: 'Got any creative ideas for a 10 year old\'s birthday?', diff --git a/client/src/mobile.css b/client/src/mobile.css index 62b4c72bce..429ad7cdb6 100644 --- a/client/src/mobile.css +++ b/client/src/mobile.css @@ -25,7 +25,7 @@ } .nav-mask.active { - opacity: 1; + opacity: 0; pointer-events: auto; } @@ -41,7 +41,7 @@ right: 0; top: 0; bottom: 0; - background-color: rgba(86, 88, 105, 0.75); + background-color: rgba(7, 7, 7, 0.4); padding-left: 420px; padding-top: 12px; opacity: 0; diff --git a/client/src/style.css b/client/src/style.css index 40d960af77..41d3d9ca95 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -1045,24 +1045,6 @@ button { --tw-bg-opacity: 1; background-color: rgba(199, 210, 254, var(--tw-bg-opacity)); } -.btn-secondary:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) - var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) - var(--tw-ring-color); - --tw-ring-offset-width: 2px; - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent; - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), - var(--tw-shadow, 0 0 transparent); -} -.btn-secondary.focus-visible { - --tw-ring-opacity: 1; - --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); -} -.btn-secondary:focus-visible { - --tw-ring-opacity: 1; - --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); -} .btn-neutral { --tw-bg-opacity: 1; --tw-text-opacity: 1; @@ -1077,48 +1059,17 @@ button { --tw-bg-opacity: 1; background-color: rgba(236, 236, 241, var(--tw-bg-opacity)); } -.btn-neutral:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) - var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) - var(--tw-ring-color); - --tw-ring-offset-width: 2px; - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent; - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), - var(--tw-shadow, 0 0 transparent); -} -.btn-neutral.focus-visible { - --tw-ring-opacity: 1; - --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); -} -.btn-neutral:focus-visible { - --tw-ring-opacity: 1; - --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); -} .dark .btn-neutral { --tw-border-opacity: 1; --tw-bg-opacity: 1; --tw-text-opacity: 1; - background-color: rgba(52, 53, 65, var(--tw-bg-opacity)); - border-color: rgba(86, 88, 105, var(--tw-border-opacity)); - color: rgba(217, 217, 227, var(--tw-text-opacity)); + background-color: transparent; + border-color: rgba(38, 38, 38, var(--tw-border-opacity)); + color: rgba(255, 255, 240, var(--tw-text-opacity)); } .dark .btn-neutral:hover { --tw-bg-opacity: 1; - background-color: rgba(64, 65, 79, var(--tw-bg-opacity)); -} -.btn-dark { - --tw-border-opacity: 1; - --tw-bg-opacity: 1; - --tw-text-opacity: 1; - background-color: rgba(52, 53, 65, var(--tw-bg-opacity)); - border-color: rgba(86, 88, 105, var(--tw-border-opacity)); - border-width: 1px; - color: rgba(255, 255, 255, var(--tw-text-opacity)); -} -.btn-dark:hover { - --tw-bg-opacity: 1; - background-color: rgba(64, 65, 79, var(--tw-bg-opacity)); + background-color: rgba(23, 23, 23, var(--tw-bg-opacity)); } .btn-small { padding: 0.25rem 0.5rem; @@ -1170,7 +1121,7 @@ html { .dark body, .dark html { --tw-bg-opacity: 1; - background-color: rgba(52, 53, 65, var(--tw-bg-opacity)); + background-color: rgba(23, 23, 23, var(--tw-bg-opacity)); } #__next, @@ -1691,17 +1642,18 @@ button.scroll-convo { :root { --white:#fff; --black:#000; + --gray-200:#ececf1; --gray-50:#f7f7f8; - --gray-100:#ececf1; - --gray-200:#d9d9e3; - --gray-300:#c5c5d2; - --gray-400:#acacbe; - --gray-500:#8e8ea0; - --gray-600:#565869; - --gray-700:#40414f; - --gray-800:#343541; - --gray-900:#202123; - --gray-950:#050509; + --gray-100:#ececec; + --gray-200:#e3e3e3; + --gray-300:#cdcdcd; + --gray-400:#999696; + --gray-500:#686262; + --gray-600:#3d3d3f; + --gray-700:#262626; + --gray-750:#333333; + --gray-800:#171717; + --gray-900:#0d0d0d; --gizmo-gray-500:#999; --gizmo-gray-600:#666; --gizmo-gray-950:#0f0f0f @@ -1756,7 +1708,7 @@ html { } .text-token-text-primary { - color:#343541; + color:#171717; color:var(--text-primary) } .text-token-text-secondary { diff --git a/client/src/utils/buildTree.ts b/client/src/utils/buildTree.ts index 637801b548..a38907665b 100644 --- a/client/src/utils/buildTree.ts +++ b/client/src/utils/buildTree.ts @@ -1,9 +1,9 @@ import { TFile, TMessage } from 'librechat-data-provider'; const even = - 'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700 dark:hover:bg-gray-900 dark:hover:text-gray-200'; + 'w-full border-b border-black/10 dark:border-gray-800/50 text-gray-800 bg-white dark:text-gray-200 group dark:bg-gray-800 hover:bg-gray-200/25 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200'; const odd = - 'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000 hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200'; + 'w-full border-b border-black/10 bg-gray-50 dark:border-gray-800/50 text-gray-800 dark:text-gray-200 group bg-gray-200 dark:bg-gray-700 hover:bg-gray-200/40 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200'; export default function buildTree({ messages, diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts index 3e6c5b72c0..f5570e304c 100644 --- a/client/src/utils/index.ts +++ b/client/src/utils/index.ts @@ -53,10 +53,10 @@ 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'; 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-500 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-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0'; + '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'; export const optionText = - 'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/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'; export const defaultTextPropsLabel = - 'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] 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-400 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'; + 'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-600 dark:focus:outline-none'; diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs index d2c48aa790..222a854ee3 100644 --- a/client/tailwind.config.cjs +++ b/client/tailwind.config.cjs @@ -7,7 +7,7 @@ module.exports = { darkMode: ['class'], theme: { // colors: { - // 'gpt-dark-gray': '#343541', + // 'gpt-dark-gray': '#171717', // }, fontFamily: { sans: ['Inter', 'sans-serif'], @@ -37,19 +37,18 @@ module.exports = { }, colors: { gray: { - '20': '#ececf1', - '50': '#f7f7f8', - '70': '#d1d5db', - '100': '#d9d9e3', - '200': '#d9d9e3', // Replacing .bg-gray-200 - '300': '#c5c5d2', - '400': '#acacb1', - '500': '#8e8ea0', - '600': '#565869', - '700': '#40414f', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover - '800': '#343541', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90 - '900': '#202123', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover - '1000': '#444654', + 20: '#ececf1', + 50: '#f7f7f8', + 100: '#ececec', + 200: '#e3e3e3', + 300: '#cdcdcd', + 400: '#999696', + 500: '#686262', + 600: '#3d3d3f', + 700: '#262626', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover + 750: '#333333', + 800: '#212121', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90 + 900: '#0d0d0d', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover }, green: { 50: '#f1f9f7', diff --git a/index.html b/index.html index c0b1b0117b..b2655426dc 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + LibreChat
+
{prompt}
{localize('com_ui_dan_template')}