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

🔧 chore: Update Tailwind CSS configuration and dependencies in package.json

Browse source
This commit is contained in:
Ruben Talstra 2025-02-27 13:47:39 +01:00
parent 27df7fa7c1
commit 5e6b8f979c
No known key found for this signature in database
GPG key ID: 2A5A7174A60F3BEA
145 changed files with 906 additions and 3712 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -1,5 +1,5 @@
{ {
"tailwindConfig": "./client/tailwind.config.cjs", "tailwindConfig": "./client/tailwind.config.mjs",
"printWidth": 100, "printWidth": 100,
"tabWidth": 2, "tabWidth": 2,
"useTabs": false, "useTabs": false,

22
client/package.json
View file

@ -65,7 +65,7 @@
"framer-motion": "^11.5.4", "framer-motion": "^11.5.4",
"html-to-image": "^1.11.11", "html-to-image": "^1.11.11",
"i18next": "^24.2.2", "i18next": "^24.2.2",
"i18next-browser-languagedetector": "^8.0.3", "i18next-browser-languagedetector": "^8.0.4",
"input-otp": "^1.4.2", "input-otp": "^1.4.2",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"librechat-data-provider": "*", "librechat-data-provider": "*",
@ -83,7 +83,7 @@
"react-flip-toolkit": "^7.1.0", "react-flip-toolkit": "^7.1.0",
"react-gtm-module": "^2.0.11", "react-gtm-module": "^2.0.11",
"react-hook-form": "^7.43.9", "react-hook-form": "^7.43.9",
"react-i18next": "^15.4.0", "react-i18next": "^15.4.1",
"react-lazy-load-image-component": "^1.6.0", "react-lazy-load-image-component": "^1.6.0",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1",
"react-resizable-panels": "^2.1.7", "react-resizable-panels": "^2.1.7",
@ -101,9 +101,9 @@
"remark-math": "^6.0.0", "remark-math": "^6.0.0",
"remark-supersub": "^1.0.0", "remark-supersub": "^1.0.0",
"sse.js": "^2.5.0", "sse.js": "^2.5.0",
"tailwind-merge": "^1.9.1", "tailwind-merge": "^3.0.2",
"tailwindcss-animate": "^1.0.5", "tailwindcss-animate": "^1.0.7",
"tailwindcss-radix": "^2.8.0", "tailwindcss-radix": "^4.0.2",
"zod": "^3.22.4" "zod": "^3.22.4"
}, },
"devDependencies": { "devDependencies": {
@ -121,7 +121,7 @@
"@types/node": "^20.3.0", "@types/node": "^20.3.0",
"@types/react": "^18.2.11", "@types/react": "^18.2.11",
"@types/react-dom": "^18.2.4", "@types/react-dom": "^18.2.4",
"@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"babel-plugin-replace-ts-export-assignment": "^0.0.2", "babel-plugin-replace-ts-export-assignment": "^0.0.2",
"babel-plugin-root-import": "^6.6.0", "babel-plugin-root-import": "^6.6.0",
@ -134,15 +134,13 @@
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"jest-file-loader": "^1.0.3", "jest-file-loader": "^1.0.3",
"jest-junit": "^16.0.0", "jest-junit": "^16.0.0",
"postcss": "^8.5.3", "tailwindcss": "^4.0.9",
"postcss-loader": "^8.1.1", "@tailwindcss/vite": "^4.0.9",
"postcss-preset-env": "^10.1.5", "ts-jest": "^29.2.5",
"tailwindcss": "^3.4.17",
"ts-jest": "^29.2.6",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite": "^6.1.0", "vite": "^6.1.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-node-polyfills": "^0.17.0", "vite-plugin-node-polyfills": "^0.17.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-pwa": "^0.21.1" "vite-plugin-pwa": "^0.21.1"
} }
} }

8
client/postcss.config.js
View file

@ -1,8 +0,0 @@
module.exports = {
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
tailwindcss: {},
autoprefixer: {},
}
}

2
client/src/App.jsx
View file

@ -35,7 +35,7 @@ const App = () => {
<RouterProvider router={router} /> <RouterProvider router={router} />
<ReactQueryDevtools initialIsOpen={false} position="top-right" /> <ReactQueryDevtools initialIsOpen={false} position="top-right" />
<Toast /> <Toast />
<RadixToast.Viewport className="pointer-events-none fixed inset-0 z-[1000] mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" /> <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-1000 mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
</DndProvider> </DndProvider>
</ToastProvider> </ToastProvider>
</RadixToast.Provider> </RadixToast.Provider>

4
client/src/components/Artifacts/ArtifactTabs.tsx
View file

@ -31,7 +31,7 @@ export default function ArtifactTabs({
ref={contentRef} ref={contentRef}
value="code" value="code"
id="artifacts-code" id="artifacts-code"
className={cn('flex-grow overflow-auto')} className={cn('grow overflow-auto')}
> >
<ArtifactCodeEditor <ArtifactCodeEditor
files={files} files={files}
@ -45,7 +45,7 @@ export default function ArtifactTabs({
</Tabs.Content> </Tabs.Content>
<Tabs.Content <Tabs.Content
value="preview" value="preview"
className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')} className={cn('grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
> >
<ArtifactPreview <ArtifactPreview
files={files} files={files}

2
client/src/components/Artifacts/Code.tsx
View file

@ -26,7 +26,7 @@ export const code: React.ElementType = memo(({ inline, className, children }: TC
); );
} }
return <code className={`hljs language-${lang} !whitespace-pre`}>{children}</code>; return <code className={`hljs language-${lang} whitespace-pre!`}>{children}</code>;
}); });
export const CodeMarkdown = memo( export const CodeMarkdown = memo(

6
client/src/components/Audio/Voices.tsx
View file

@ -27,7 +27,7 @@ export function EdgeVoiceDropdown() {
value={voice ?? ''} value={voice ?? ''}
options={voices} options={voices}
onChange={handleVoiceChange} onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]" sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
testId="EdgeVoiceDropdown" testId="EdgeVoiceDropdown"
/> />
</div> </div>
@ -55,7 +55,7 @@ export function BrowserVoiceDropdown() {
value={voice ?? ''} value={voice ?? ''}
options={voices} options={voices}
onChange={handleVoiceChange} onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]" sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
testId="BrowserVoiceDropdown" testId="BrowserVoiceDropdown"
/> />
</div> </div>
@ -83,7 +83,7 @@ export function ExternalVoiceDropdown() {
value={voice ?? ''} value={voice ?? ''}
options={voices} options={voices}
onChange={handleVoiceChange} onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]" sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
testId="ExternalVoiceDropdown" testId="ExternalVoiceDropdown"
/> />
</div> </div>

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

@ -74,7 +74,7 @@ function AuthLayout({
<ThemeSelector /> <ThemeSelector />
</div> </div>
<div className="flex flex-grow items-center justify-center"> <div className="flex grow items-center justify-center">
<div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg"> <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
{!hasStartupConfigError && !isFetching && ( {!hasStartupConfigError && !isFetching && (
<h1 <h1

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

@ -2,7 +2,7 @@ export const ErrorMessage = ({ children }: { children: React.ReactNode }) => (
<div <div
role="alert" role="alert"
aria-live="assertive" aria-live="assertive"
className="relative mt-6 rounded-lg border border-red-500/20 bg-red-50/50 px-6 py-4 text-red-700 shadow-sm transition-all dark:bg-red-950/30 dark:text-red-100" className="relative mt-6 rounded-lg border border-red-500/20 bg-red-50/50 px-6 py-4 text-red-700 shadow-2xs transition-all dark:bg-red-950/30 dark:text-red-100"
> >
{children} {children}
</div> </div>

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

@ -98,7 +98,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
aria-invalid={!!errors.email} aria-invalid={!!errors.email}
className=" className="
webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
" "
placeholder=" " placeholder=" "
/> />
@ -108,7 +108,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
" "
> >
{useUsernameLogin {useUsernameLogin
@ -133,7 +133,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
aria-invalid={!!errors.password} aria-invalid={!!errors.password}
className=" className="
webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
" "
placeholder=" " placeholder=" "
/> />
@ -143,7 +143,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
" "
> >
{localize('com_auth_password')} {localize('com_auth_password')}

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

@ -71,7 +71,7 @@ const Registration: React.FC = () => {
aria-invalid={!!errors[id]} aria-invalid={!!errors[id]}
className=" className="
webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
" "
placeholder=" " placeholder=" "
data-testid={id} data-testid={id}
@ -82,7 +82,7 @@ const Registration: React.FC = () => {
absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
" "
> >
{localize(label)} {localize(label)}
@ -185,7 +185,7 @@ const Registration: React.FC = () => {
aria-label="Submit registration" aria-label="Submit registration"
className=" className="
w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
" "

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

@ -10,7 +10,7 @@ import { useLocalize } from '~/hooks';
const BodyTextWrapper: FC<{ children: ReactNode }> = ({ children }) => { const BodyTextWrapper: FC<{ children: ReactNode }> = ({ children }) => {
return ( return (
<div <div
className="relative mt-6 rounded-lg border border-green-500/20 bg-green-50/50 px-6 py-4 text-green-700 shadow-sm transition-all dark:bg-green-950/30 dark:text-green-100" className="relative mt-6 rounded-lg border border-green-500/20 bg-green-50/50 px-6 py-4 text-green-700 shadow-2xs transition-all dark:bg-green-950/30 dark:text-green-100"
role="alert" role="alert"
> >
{children} {children}
@ -108,7 +108,7 @@ function RequestPasswordReset() {
className=" className="
peer w-full rounded-lg border border-gray-300 bg-transparent px-4 py-3 peer w-full rounded-lg border border-gray-300 bg-transparent px-4 py-3
text-base text-gray-900 placeholder-transparent transition-all text-base text-gray-900 placeholder-transparent transition-all
focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500 focus:outline-hidden focus:ring-2 focus:ring-green-500/20
dark:border-gray-700 dark:text-white dark:focus:border-green-500 dark:border-gray-700 dark:text-white dark:focus:border-green-500
" "
placeholder="email@example.com" placeholder="email@example.com"
@ -138,7 +138,7 @@ function RequestPasswordReset() {
disabled={!!errors.email} disabled={!!errors.email}
className=" className="
w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
" "

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

@ -43,7 +43,7 @@ function ResetPassword() {
<button <button
onClick={() => navigate('/login')} onClick={() => navigate('/login')}
aria-label={localize('com_auth_sign_in')} aria-label={localize('com_auth_sign_in')}
className="w-full transform rounded-2xl bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none" className="w-full transform rounded-2xl bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-hidden"
> >
{localize('com_auth_continue')} {localize('com_auth_continue')}
</button> </button>
@ -91,7 +91,7 @@ function ResetPassword() {
aria-invalid={!!errors.password} aria-invalid={!!errors.password}
className=" className="
webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
" "
placeholder=" " placeholder=" "
/> />
@ -101,7 +101,7 @@ function ResetPassword() {
absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
" "
> >
{localize('com_auth_password')} {localize('com_auth_password')}
@ -126,7 +126,7 @@ function ResetPassword() {
aria-invalid={!!errors.confirm_password} aria-invalid={!!errors.confirm_password}
className=" className="
webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
" "
placeholder=" " placeholder=" "
/> />
@ -136,7 +136,7 @@ function ResetPassword() {
absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
" "
> >
{localize('com_auth_password_confirm')} {localize('com_auth_password_confirm')}
@ -165,7 +165,7 @@ function ResetPassword() {
aria-label={localize('com_auth_submit_registration')} aria-label={localize('com_auth_submit_registration')}
className=" className="
w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
" "

2
client/src/components/Banners/Banner.tsx
View file

@ -29,7 +29,7 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
return ( return (
<div <div
ref={bannerRef} ref={bannerRef}
className="sticky top-0 z-20 flex items-center bg-neutral-900 from-gray-700 to-gray-900 px-2 py-1 text-slate-50 dark:bg-gradient-to-r dark:text-white md:relative" className="sticky top-0 z-20 flex items-center bg-neutral-900 from-gray-700 to-gray-900 px-2 py-1 text-slate-50 dark:bg-linear-to-r dark:text-white md:relative"
> >
<div <div
className="w-full truncate px-4 text-center text-sm" className="w-full truncate px-4 text-center text-sm"

2
client/src/components/Bookmarks/BookmarkForm.tsx
View file

@ -134,7 +134,7 @@ const BookmarkForm = ({
id="bookmark-description" id="bookmark-description"
disabled={false} disabled={false}
className={cn( className={cn(
'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none', 'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-hidden',
)} )}
/> />
</div> </div>

2
client/src/components/Bookmarks/BookmarkItem.tsx
View file

@ -46,7 +46,7 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
return ( return (
<MenuItem <MenuItem
aria-label={tag as string} aria-label={tag as string}
className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-none data-[focus]:bg-surface-secondary data-[focus]:ring-2 data-[focus]:ring-primary" className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-hidden data-focus:bg-surface-secondary data-focus:ring-2 data-focus:ring-primary"
{...rest} {...rest}
as="button" as="button"
onClick={clickHandler} onClick={clickHandler}

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

@ -26,7 +26,7 @@ export default function AddedConvo({
} }
return ( return (
<div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm"> <div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
<span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center"> <span className="mt-0 flex h-6 w-6 shrink-0 items-center justify-center">
<div className="icon-md"> <div className="icon-md">
<EndpointIcon <EndpointIcon
conversation={addedConvo} conversation={addedConvo}
@ -41,7 +41,7 @@ export default function AddedConvo({
{title} {title}
</span> </span>
<button <button
className="text-token-text-secondary flex-shrink-0" className="text-token-text-secondary shrink-0"
type="button" type="button"
aria-label="Close added conversation" aria-label="Close added conversation"
onClick={() => setAddedConvo(null)} onClick={() => setAddedConvo(null)}

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

@ -183,7 +183,7 @@ const ChatForm = ({ index = 0 }) => {
/> />
)} )}
<PromptsCommand index={index} textAreaRef={textAreaRef} submitPrompt={submitPrompt} /> <PromptsCommand index={index} textAreaRef={textAreaRef} submitPrompt={submitPrompt} />
<div className="transitional-all relative flex w-full flex-grow flex-col overflow-hidden rounded-3xl bg-surface-tertiary text-text-primary duration-200"> <div className="transitional-all relative flex w-full grow flex-col overflow-hidden rounded-3xl bg-surface-tertiary text-text-primary duration-200">
<TemporaryChat <TemporaryChat
isTemporaryChat={isTemporaryChat} isTemporaryChat={isTemporaryChat}
setIsTemporaryChat={setIsTemporaryChat} setIsTemporaryChat={setIsTemporaryChat}

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

@ -30,7 +30,7 @@ const CollapseChat = ({
onClick={() => setIsCollapsed(true)} onClick={() => setIsCollapsed(true)}
className={cn( className={cn(
'absolute right-2 top-2 z-10 size-[35px] rounded-full p-2 transition-colors', 'absolute right-2 top-2 z-10 size-[35px] rounded-full p-2 transition-colors',
'hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50', 'hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-opacity-50',
)} )}
> >
<Minimize2 className="h-full w-full" /> <Minimize2 className="h-full w-full" />

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

@ -25,7 +25,7 @@ const AttachFile = ({
aria-label={localize('com_sidepanel_attach_files')} aria-label={localize('com_sidepanel_attach_files')}
disabled={isUploadDisabled} disabled={isUploadDisabled}
className={cn( className={cn(
'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50', 'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-opacity-50',
isRTL ? 'bottom-2 right-2' : 'bottom-2 left-2', isRTL ? 'bottom-2 right-2' : 'bottom-2 left-2',
)} )}
description={localize('com_sidepanel_attach_files')} description={localize('com_sidepanel_attach_files')}

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

@ -82,7 +82,7 @@ const AttachFile = ({ isRTL, disabled, handleFileChange }: AttachFileProps) => {
id="attach-file-menu-button" id="attach-file-menu-button"
aria-label="Attach File Options" aria-label="Attach File Options"
className={cn( className={cn(
'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50', 'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-opacity-50',
isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2', isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
)} )}
> >

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

@ -1,11 +1,11 @@
export default function DragDropOverlay() { export default function DragDropOverlay() {
return ( return (
<div <div
className="bg-surface-primary/85 fixed inset-0 z-[9999] flex flex-col items-center justify-center className="bg-surface-primary/85 fixed inset-0 z-9999 flex flex-col items-center justify-center
gap-2 text-text-primary gap-2 text-text-primary
backdrop-blur-[4px] transition-all duration-200 backdrop-blur-[4px] transition-all duration-200
ease-in-out animate-in fade-in ease-in-out animate-in fade-in
zoom-in-95 hover:backdrop-blur-sm" zoom-in-95 hover:backdrop-blur-xs"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

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

@ -59,7 +59,7 @@ export function SortFilterHeader<TData, TValue>({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="start" align="start"
className="z-[1001] dark:border-gray-700 dark:bg-gray-850" className="z-1001 dark:border-gray-700 dark:bg-gray-850"
> >
<DropdownMenuItem <DropdownMenuItem
onClick={() => column.toggleSorting(false)} onClick={() => column.toggleSorting(false)}

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

@ -70,7 +70,7 @@ export default function HeaderOptions({
<Anchor> <Anchor>
<div className="my-auto lg:max-w-2xl xl:max-w-3xl"> <div className="my-auto lg:max-w-2xl xl:max-w-3xl">
<span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2"> <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
<div className="z-[61] flex w-full items-center justify-center gap-2"> <div className="z-61 flex w-full items-center justify-center gap-2">
{interfaceConfig?.modelSelect === true && !isAgentsEndpoint(endpoint) && ( {interfaceConfig?.modelSelect === true && !isAgentsEndpoint(endpoint) && (
<ModelSelect <ModelSelect
conversation={conversation} conversation={conversation}

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

@ -166,7 +166,7 @@ export default function Mention({
autoFocus autoFocus
ref={inputRef} ref={inputRef}
placeholder={localize(placeholder)} placeholder={localize(placeholder)}
className="mb-1 w-full border-0 bg-white p-2 text-sm focus:outline-none dark:bg-gray-700 dark:text-gray-200" className="mb-1 w-full border-0 bg-white p-2 text-sm focus:outline-hidden dark:bg-gray-700 dark:text-gray-200"
autoComplete="off" autoComplete="off"
value={searchValue} value={searchValue}
onKeyDown={(e) => { onKeyDown={(e) => {

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

@ -37,8 +37,8 @@ export default function MentionItem({
isActive === true ? 'bg-surface-active' : 'bg-transparent', isActive === true ? 'bg-surface-active' : 'bg-transparent',
)} )}
> >
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">{icon}</div> <div className="flex h-5 w-5 shrink-0 items-center justify-center">{icon}</div>
<div className="flex min-w-0 flex-grow items-center justify-between"> <div className="flex min-w-0 grow items-center justify-between">
<div className="truncate"> <div className="truncate">
<span className="font-medium">{name}</span> <span className="font-medium">{name}</span>
{description != null && description ? ( {description != null && description ? (
@ -47,7 +47,7 @@ export default function MentionItem({
</span> </span>
) : null} ) : null}
</div> </div>
<Clock4 size={16} className="ml-2 flex-shrink-0" /> <Clock4 size={16} className="ml-2 shrink-0" />
</div> </div>
</div> </div>
</button> </button>

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

@ -54,7 +54,7 @@ export default function OptionsPopover({
return ( return (
<Portal> <Portal>
<Content sideOffset={8} align="start" ref={popoverRef} asChild> <Content sideOffset={8} align="start" ref={popoverRef} asChild>
<div className="z-[70] flex w-screen flex-col items-center md:w-full md:px-4"> <div className="z-70 flex w-screen flex-col items-center md:w-full md:px-4">
<div <div
className={cn( className={cn(
cardStyle, cardStyle,

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

@ -203,7 +203,7 @@ function PromptsCommand({
autoFocus autoFocus
ref={inputRef} ref={inputRef}
placeholder={localize('com_ui_command_usage_placeholder')} placeholder={localize('com_ui_command_usage_placeholder')}
className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-none dark:text-gray-200" className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-hidden dark:text-gray-200"
autoComplete="off" autoComplete="off"
value={searchValue} value={searchValue}
onKeyDown={(e) => { onKeyDown={(e) => {

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

@ -16,7 +16,7 @@ export const TemporaryChat = ({ isTemporaryChat, setIsTemporaryChat }: Temporary
return ( return (
<div className="divide-token-border-light m-1.5 flex flex-col divide-y overflow-hidden rounded-b-lg rounded-t-2xl bg-surface-secondary-alt"> <div className="divide-token-border-light m-1.5 flex flex-col divide-y overflow-hidden rounded-b-lg rounded-t-2xl bg-surface-secondary-alt">
<div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm"> <div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
<span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center"> <span className="mt-0 flex h-6 w-6 shrink-0 items-center justify-center">
<div className="icon-md"> <div className="icon-md">
<MessageCircleDashed className="icon-md" aria-hidden="true" /> <MessageCircleDashed className="icon-md" aria-hidden="true" />
</div> </div>
@ -25,7 +25,7 @@ export const TemporaryChat = ({ isTemporaryChat, setIsTemporaryChat }: Temporary
{localize('com_ui_temporary_chat')} {localize('com_ui_temporary_chat')}
</span> </span>
<button <button
className="text-token-text-secondary flex-shrink-0" className="text-token-text-secondary shrink-0"
type="button" type="button"
aria-label="Close temporary chat" aria-label="Close temporary chat"
onClick={() => setIsTemporaryChat(false)} onClick={() => setIsTemporaryChat(false)}

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

@ -98,7 +98,7 @@ const MenuItem: FC<MenuItemProps> = ({
role="option" role="option"
aria-selected={selected} aria-selected={selected}
className={cn( className={cn(
'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-surface-hover', '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-surface-hover',
'radix-disabled:pointer-events-none radix-disabled:opacity-50', 'radix-disabled:pointer-events-none radix-disabled:opacity-50',
)} )}
tabIndex={0} tabIndex={0}

2
client/src/components/Chat/Menus/Models/ModelSpec.tsx
View file

@ -57,7 +57,7 @@ const MenuItem: FC<MenuItemProps> = ({
id={selected ? 'selected-llm' : undefined} id={selected ? 'selected-llm' : undefined}
role="option" role="option"
aria-selected={selected} aria-selected={selected}
className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 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 cursor-pointer gap-2 rounded px-1 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"
tabIndex={0} tabIndex={0}
{...rest} {...rest}
onClick={clickHandler} onClick={clickHandler}

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

@ -39,7 +39,7 @@ const PresetItems: FC<{
<> <>
<div <div
role="menuitem" role="menuitem"
className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]" className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 pr-3! text-sm opacity-100! focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]"
tabIndex={-1} tabIndex={-1}
> >
<div className="flex h-full grow items-center justify-end gap-2"> <div className="flex h-full grow items-center justify-end gap-2">
@ -101,7 +101,7 @@ const PresetItems: FC<{
{presets && presets.length === 0 && ( {presets && presets.length === 0 && (
<div <div
role="menuitem" role="menuitem"
className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]" className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 pr-3! text-sm opacity-100! focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]"
tabIndex={-1} tabIndex={-1}
> >
<div className="flex h-full grow items-center justify-end gap-2 text-gray-600 dark:text-gray-300"> <div className="flex h-full grow items-center justify-end gap-2 text-gray-600 dark:text-gray-300">

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

@ -38,7 +38,7 @@ const MenuItem: FC<MenuItemProps> = ({
aria-label={title} aria-label={title}
data-testid="chat-menu-item" data-testid="chat-menu-item"
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-gray-600 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={0} // Change to 0 to make it focusable tabIndex={0} // Change to 0 to make it focusable

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

@ -4,7 +4,7 @@ export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
return ( return (
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay <Dialog.Overlay
className="radix-state-open:animate-show fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80" className="radix-state-open:animate-show fixed inset-0 z-100 flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
style={{ pointerEvents: 'auto' }} style={{ pointerEvents: 'auto' }}
> >
<Dialog.Close asChild> <Dialog.Close asChild>
@ -30,7 +30,7 @@ export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
</button> </button>
</Dialog.Close> </Dialog.Close>
<Dialog.Content <Dialog.Content
className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-none" className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-hidden"
tabIndex={-1} tabIndex={-1}
style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }} style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }}
> >

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

@ -150,7 +150,7 @@ const EditMessage = ({
return ( return (
<Container message={message}> <Container message={message}>
<div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]"> <div className="bg-token-main-surface-primary relative flex w-full grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
<TextareaAutosize <TextareaAutosize
{...registerProps} {...registerProps}
ref={(e) => { ref={(e) => {

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

@ -146,7 +146,7 @@ const EditTextPart = ({
return ( return (
<Container message={message}> <Container message={message}>
<div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]"> <div className="bg-token-main-surface-primary relative flex w-full grow flex-col overflow-hidden rounded-2xl border border-border-medium text-text-primary [&:has(textarea:focus)]:border-border-heavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
<TextareaAutosize <TextareaAutosize
{...registerProps} {...registerProps}
ref={(e) => { ref={(e) => {

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

@ -42,7 +42,7 @@ const LogLink: React.FC<LogLinkProps> = ({ href, filename, children }) => {
onClick={handleDownload} onClick={handleDownload}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="!text-blue-400 visited:!text-purple-400 hover:underline" className="text-blue-400! visited:text-purple-400! hover:underline"
> >
{children} {children}
</a> </a>

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

@ -48,7 +48,7 @@ export default function ToolPopover({
<div className="mb-2 text-sm font-medium text-text-primary">{title}</div> <div className="mb-2 text-sm font-medium text-text-primary">{title}</div>
<div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs"> <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
<div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2"> <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
<code className="!whitespace-pre-wrap ">{formatText(input)}</code> <code className="whitespace-pre-wrap! ">{formatText(input)}</code>
</div> </div>
</div> </div>
{output != null && output && ( {output != null && output && (
@ -58,7 +58,7 @@ export default function ToolPopover({
</div> </div>
<div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs"> <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
<div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2"> <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
<code className="!whitespace-pre-wrap ">{formatText(output)}</code> <code className="whitespace-pre-wrap! ">{formatText(output)}</code>
</div> </div>
</div> </div>
</> </>

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

@ -71,7 +71,7 @@ export default function HoverButtons({
return ( return (
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={regenerate} onClick={regenerate}
@ -79,7 +79,7 @@ export default function HoverButtons({
title={localize('com_ui_regenerate')} title={localize('com_ui_regenerate')}
> >
<RegenerateIcon <RegenerateIcon
className="hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" className="hover:text-gray-500 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400"
size="19" size="19"
/> />
</button> </button>
@ -110,7 +110,7 @@ export default function HoverButtons({
content={message.content ?? message.text} content={message.content ?? message.text}
isLast={isLast} isLast={isLast}
className={cn( className={cn(
'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
)} )}
/> />
)} )}
@ -118,7 +118,7 @@ export default function HoverButtons({
<button <button
id={`edit-${message.messageId}`} id={`edit-${message.messageId}`}
className={cn( className={cn(
'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
isCreatedByUser ? '' : 'active', isCreatedByUser ? '' : 'active',
hideEditButton ? 'opacity-0' : '', hideEditButton ? 'opacity-0' : '',
isEditing ? 'active text-gray-700 dark:text-gray-200' : '', isEditing ? 'active text-gray-700 dark:text-gray-200' : '',
@ -134,7 +134,7 @@ export default function HoverButtons({
)} )}
<button <button
className={cn( className={cn(
'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '', isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
@ -157,14 +157,14 @@ export default function HoverButtons({
{continueSupported === true ? ( {continueSupported === true ? (
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible', 'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:invisible md:group-hover:visible',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={handleContinue} onClick={handleContinue}
type="button" type="button"
title={localize('com_ui_continue')} title={localize('com_ui_continue')}
> >
<ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" /> <ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400" />
</button> </button>
) : null} ) : null}
</div> </div>

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

@ -80,7 +80,7 @@ export default function Message(props: TMessageProps) {
> >
<div className="m-auto justify-center p-4 py-2 md:gap-6 "> <div className="m-auto justify-center p-4 py-2 md:gap-6 ">
<div className="group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5"> <div className="group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">
<div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full"> <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@ -97,7 +97,7 @@ export default function Message(props: TMessageProps) {
> >
<div className={cn('select-none font-semibold', fontSize)}>{name}</div> <div className={cn('select-none font-semibold', fontSize)}>{name}</div>
<div className="flex-col gap-1 md:gap-3"> <div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0"> <div className="flex max-w-full grow flex-col gap-0">
<ContentParts <ContentParts
isLast={isLast} isLast={isLast}
isSubmitting={isSubmitting} isSubmitting={isSubmitting}

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

@ -72,7 +72,7 @@ export default function MessagesView({
)} )}
<div <div
id="messages-end" id="messages-end"
className="group h-0 w-full flex-shrink-0" className="group h-0 w-full shrink-0"
ref={messagesEndRef} ref={messagesEndRef}
/> />
</div> </div>

2
client/src/components/Chat/Messages/MinimalHoverButtons.tsx
View file

@ -15,7 +15,7 @@ export default function MinimalHoverButtons({ message }: THoverButtons) {
return ( return (
<div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start"> <div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
<button <button
className="ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible" className="ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
onClick={() => copyToClipboard(setIsCopied)} onClick={() => copyToClipboard(setIsCopied)}
type="button" type="button"
title={ title={

2
client/src/components/Chat/Messages/MinimalMessages.tsx
View file

@ -27,7 +27,7 @@ const MinimalMessages = React.forwardRef(
> >
<div className="flex flex-col pb-9 text-sm dark:bg-transparent"> <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
{props.children} {props.children}
<div className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50" /> <div className="dark:gpt-dark-gray group h-0 w-full shrink-0 dark:border-gray-800/50" />
</div> </div>
</div> </div>
</div> </div>

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

@ -46,7 +46,7 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
<div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"> <div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent">
<div className="m-auto justify-center p-4 py-2 md:gap-6 "> <div className="m-auto justify-center p-4 py-2 md:gap-6 ">
<div className="final-completion group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5"> <div className="final-completion group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full"> <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@ -60,7 +60,7 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
> >
<div className={cn('select-none font-semibold', fontSize)}>{messageLabel}</div> <div className={cn('select-none font-semibold', fontSize)}>{messageLabel}</div>
<div className="flex-col gap-1 md:gap-3"> <div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0"> <div className="flex max-w-full grow flex-col gap-0">
<SearchContent message={message} /> <SearchContent message={message} />
</div> </div>
</div> </div>

6
client/src/components/Chat/Messages/SiblingSwitch.tsx
View file

@ -26,7 +26,7 @@ export default function SiblingSwitch({
<div className="visible flex items-center justify-center gap-1 self-center pt-0 text-xs"> <div className="visible flex items-center justify-center gap-1 self-center pt-0 text-xs">
<button <button
className={cn( className={cn(
'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
)} )}
type="button" type="button"
onClick={previous} onClick={previous}
@ -47,12 +47,12 @@ export default function SiblingSwitch({
<polyline points="15 18 9 12 15 6" /> <polyline points="15 18 9 12 15 6" />
</svg> </svg>
</button> </button>
<span className="flex-shrink-0 flex-grow tabular-nums"> <span className="shrink-0 grow tabular-nums">
{siblingIdx + 1} / {siblingCount} {siblingIdx + 1} / {siblingCount}
</span> </span>
<button <button
className={cn( className={cn(
'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
)} )}
type="button" type="button"
onClick={next} onClick={next}

6
client/src/components/Chat/Messages/ui/MessageRender.tsx
View file

@ -128,7 +128,7 @@ const MessageRender = memo(
layoutClasses, layoutClasses,
latestCardClasses, latestCardClasses,
showRenderClasses, showRenderClasses,
'message-render focus:outline-none focus:ring-2 focus:ring-border-xheavy', 'message-render focus:outline-hidden focus:ring-2 focus:ring-border-xheavy',
)} )}
onClick={clickHandler} onClick={clickHandler}
onKeyDown={(e) => { onKeyDown={(e) => {
@ -142,7 +142,7 @@ const MessageRender = memo(
{isLatestCard === true && ( {isLatestCard === true && (
<div className="absolute right-0 top-0 m-2 h-3 w-3 rounded-full bg-text-primary"></div> <div className="absolute right-0 top-0 m-2 h-3 w-3 rounded-full bg-text-primary"></div>
)} )}
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full"> <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@ -159,7 +159,7 @@ const MessageRender = memo(
> >
<h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2> <h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2>
<div className="flex-col gap-1 md:gap-3"> <div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0"> <div className="flex max-w-full grow flex-col gap-0">
<MessageContext.Provider <MessageContext.Provider
value={{ value={{
messageId: msg.messageId, messageId: msg.messageId,

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

@ -154,7 +154,7 @@ export default function Conversation({
<input <input
ref={inputRef} ref={inputRef}
type="text" type="text"
className="w-full rounded bg-transparent p-0.5 text-sm leading-tight focus-visible:outline-none" className="w-full rounded bg-transparent p-0.5 text-sm leading-tight focus-visible:outline-hidden"
value={titleInput ?? ''} value={titleInput ?? ''}
onChange={(e) => setTitleInput(e.target.value)} onChange={(e) => setTitleInput(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
@ -210,9 +210,9 @@ export default function Conversation({
{title} {title}
</div> </div>
{isActiveConvo ? ( {isActiveConvo ? (
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l" /> <div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-linear-to-l" />
) : ( ) : (
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-surface-primary-alt from-0% to-transparent group-hover:from-surface-active-alt group-hover:from-40%" /> <div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-linear-to-l from-surface-primary-alt from-0% to-transparent group-hover:from-surface-active-alt group-hover:from-40%" />
)} )}
</a> </a>
)} )}

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

@ -124,10 +124,10 @@ function ConvoOptions({
id={`conversation-menu-${conversationId}`} id={`conversation-menu-${conversationId}`}
aria-label={localize('com_nav_convo_menu_options')} aria-label={localize('com_nav_convo_menu_options')}
className={cn( className={cn(
'z-30 inline-flex h-7 w-7 items-center justify-center gap-2 rounded-md border-none p-0 text-sm font-medium ring-ring-primary transition-all duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', 'z-30 inline-flex h-7 w-7 items-center justify-center gap-2 rounded-md border-none p-0 text-sm font-medium ring-ring-primary transition-all duration-200 ease-in-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
isActiveConvo === true isActiveConvo === true
? 'opacity-100' ? 'opacity-100'
: 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[open]:opacity-100', : 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-open:opacity-100',
)} )}
> >
<Ellipsis className="icon-md text-text-secondary" aria-hidden={true} /> <Ellipsis className="icon-md text-text-secondary" aria-hidden={true} />

10
client/src/components/Conversations/Fork.tsx
View file

@ -77,7 +77,7 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
(hoverTitle != null && hoverTitle !== '') || (hoverTitle != null && hoverTitle !== '') ||
(hoverDescription != null && hoverDescription !== '')) && ( (hoverDescription != null && hoverDescription !== '')) && (
<HoverCardPortal> <HoverCardPortal>
<HoverCardContent side="right" className="z-[999] w-80 dark:bg-gray-700" sideOffset={sideOffset}> <HoverCardContent side="right" className="z-999 w-80 dark:bg-gray-700" sideOffset={sideOffset}>
<div className="space-y-2"> <div className="space-y-2">
<p className="flex flex-col gap-2 text-sm text-gray-600 dark:text-gray-300"> <p className="flex flex-col gap-2 text-sm text-gray-600 dark:text-gray-300">
{hoverInfo && hoverInfo} {hoverInfo && hoverInfo}
@ -161,8 +161,8 @@ export default function Fork({
<Popover.Trigger asChild> <Popover.Trigger asChild>
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ', 'hover-button active rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 md:invisible md:group-hover:visible ',
'data-[state=open]:active focus:opacity-100 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200', 'data-[state=open]:active focus:opacity-100 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:data-[state=open]:bg-gray-700 dark:data-[state=open]:text-gray-200',
!isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={(e) => { onClick={(e) => {
@ -180,7 +180,7 @@ export default function Fork({
type="button" type="button"
title={localize('com_ui_fork')} title={localize('com_ui_fork')}
> >
<GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" /> <GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400" />
</button> </button>
</Popover.Trigger> </Popover.Trigger>
<Popover.Portal> <Popover.Portal>
@ -203,7 +203,7 @@ export default function Fork({
<HoverCardPortal> <HoverCardPortal>
<HoverCardContent <HoverCardContent
side="right" side="right"
className="z-[999] w-80 dark:bg-gray-700" className="z-999 w-80 dark:bg-gray-700"
sideOffset={19} sideOffset={19}
> >
<div className="flex flex-col gap-2 space-y-2 text-sm text-gray-600 dark:text-gray-300"> <div className="flex flex-col gap-2 space-y-2 text-sm text-gray-600 dark:text-gray-300">

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

@ -26,8 +26,8 @@ const HoverToggle = ({
'peer items-center gap-1.5 rounded-r-lg from-gray-900 pl-2 pr-2 dark:text-white', 'peer items-center gap-1.5 rounded-r-lg from-gray-900 pl-2 pr-2 dark:text-white',
isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex', isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex',
isActiveConvo isActiveConvo
? 'from-gray-50 from-85% to-transparent group-hover:bg-gradient-to-l group-hover:from-gray-200 dark:from-gray-800 dark:group-hover:from-gray-800' ? 'from-gray-50 from-85% to-transparent group-hover:bg-linear-to-l group-hover:from-gray-200 dark:from-gray-800 dark:group-hover:from-gray-800'
: 'z-50 from-gray-50 from-0% to-transparent hover:bg-gradient-to-l hover:from-gray-200 dark:from-gray-800 dark:hover:from-gray-800', : 'z-50 from-gray-50 from-0% to-transparent hover:bg-linear-to-l hover:from-gray-200 dark:from-gray-800 dark:hover:from-gray-800',
isPopoverActive && !isActiveConvo ? 'from-gray-50 dark:from-gray-800' : '', isPopoverActive && !isActiveConvo ? 'from-gray-50 dark:from-gray-800' : '',
className, className,
)} )}

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

@ -58,8 +58,8 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
<OGDialog open={open} onOpenChange={onOpenChange}> <OGDialog open={open} onOpenChange={onOpenChange}>
<OGDialogTemplate <OGDialogTemplate
title={localize('com_endpoint_save_as_preset')} title={localize('com_endpoint_save_as_preset')}
className="z-[90] w-11/12 sm:w-1/4" className="z-90 w-11/12 sm:w-1/4"
overlayClassName="z-[80]" overlayClassName="z-80"
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/Advanced.tsx
View file

@ -292,7 +292,7 @@ export default function Settings({
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-gray-400 focus:ring-offset-2 dark:border-gray-700', 'flex rounded-md bg-transparent py-2 text-xs focus:outline-hidden 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',
)} )}
/> />

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

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

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

@ -51,7 +51,7 @@ function OptionHover({ endpoint, type, side }: TOptionHoverProps) {
} }
return ( return (
<HoverCardPortal> <HoverCardPortal>
<HoverCardContent side={side} className="z-[999] w-80"> <HoverCardContent side={side} className="z-999 w-80">
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-gray-600 dark:text-gray-300">{localize(text)}</p> <p className="text-sm text-gray-600 dark:text-gray-300">{localize(text)}</p>
</div> </div>

2
client/src/components/Files/FileList/DataTableFile.tsx
View file

@ -127,7 +127,7 @@ export default function DataTableFile<TData, TValue>({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="end" align="end"
className="z-[1001] dark:border-gray-700 dark:bg-gray-850" className="z-1001 dark:border-gray-700 dark:bg-gray-850"
> >
{table {table
.getAllColumns() .getAllColumns()

2
client/src/components/Input/Generations/Regenerate.tsx
View file

@ -8,7 +8,7 @@ export default function Regenerate({ onClick }: TGenButtonProps) {
return ( return (
<Button onClick={onClick}> <Button onClick={onClick}>
<RegenerateIcon className="h-3 w-3 flex-shrink-0 text-gray-600/90 dark:text-gray-400" /> <RegenerateIcon className="h-3 w-3 shrink-0 text-gray-600/90 dark:text-gray-400" />
{localize('com_ui_regenerate')} {localize('com_ui_regenerate')}
</Button> </Button>
); );

2
client/src/components/Input/ModelSelect/TemporaryChat.tsx
View file

@ -48,7 +48,7 @@ export const TemporaryChat = () => {
{localize('com_ui_temporary_chat')} {localize('com_ui_temporary_chat')}
</span> </span>
</div> </div>
<div className="flex flex-shrink-0 items-center"> <div className="flex shrink-0 items-center">
<Switch <Switch
id="temporary-chat-switch" id="temporary-chat-switch"
checked={isTemporary} checked={isTemporary}

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

@ -132,7 +132,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
<code <code
ref={codeRef} ref={codeRef}
className={cn( className={cn(
isNonCode ? '!whitespace-pre-wrap' : `hljs language-${language} !whitespace-pre`, isNonCode ? 'whitespace-pre-wrap!' : `hljs language-${language} whitespace-pre!`,
)} )}
> >
{codeChildren} {codeChildren}

2
client/src/components/Messages/Content/Container.tsx
View file

@ -1,6 +1,6 @@
// Container Component // Container Component
const Container = ({ children }: { children: React.ReactNode }) => ( const Container = ({ children }: { children: React.ReactNode }) => (
<div className="flex min-h-[20px] flex-grow flex-col items-start gap-4">{children}</div> <div className="flex min-h-[20px] grow flex-col items-start gap-4">{children}</div>
); );
export default Container; export default Container;

2
client/src/components/Messages/Content/ResultSwitcher.tsx
View file

@ -38,7 +38,7 @@ const ResultSwitcher: React.FC<ResultSwitcherProps> = ({
<polyline points="15 18 9 12 15 6" /> <polyline points="15 18 9 12 15 6" />
</svg> </svg>
</button> </button>
<span className="flex-shrink-0 tabular-nums"> <span className="shrink-0 tabular-nums">
{currentIndex + 1} / {totalCount} {currentIndex + 1} / {totalCount}
</span> </span>
<button <button

6
client/src/components/Messages/ContentRender.tsx
View file

@ -115,7 +115,7 @@ const ContentRender = memo(
const conditionalClasses = { const conditionalClasses = {
latestCard: isLatestCard ? 'bg-surface-secondary' : '', latestCard: isLatestCard ? 'bg-surface-secondary' : '',
cardRender: showCardRender ? 'cursor-pointer transition-colors duration-300' : '', cardRender: showCardRender ? 'cursor-pointer transition-colors duration-300' : '',
focus: 'focus:outline-none focus:ring-2 focus:ring-border-xheavy', focus: 'focus:outline-hidden focus:ring-2 focus:ring-border-xheavy',
}; };
return ( return (
@ -142,7 +142,7 @@ const ContentRender = memo(
{isLatestCard === true && ( {isLatestCard === true && (
<div className="absolute right-0 top-0 m-2 h-3 w-3 rounded-full bg-text-primary" /> <div className="absolute right-0 top-0 m-2 h-3 w-3 rounded-full bg-text-primary" />
)} )}
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full"> <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@ -159,7 +159,7 @@ const ContentRender = memo(
> >
<h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2> <h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2>
<div className="flex-col gap-1 md:gap-3"> <div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0"> <div className="flex max-w-full grow flex-col gap-0">
<ContentParts <ContentParts
edit={edit} edit={edit}
isLast={isLast} isLast={isLast}

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

@ -32,7 +32,7 @@ function AccountSettings() {
data-testid="nav-user" data-testid="nav-user"
className="mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-accent" className="mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-accent"
> >
<div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0"> <div className="-ml-0.9 -mt-0.8 h-8 w-8 shrink-0">
<div className="relative flex"> <div className="relative flex">
{name.length === 0 ? ( {name.length === 0 ? (
<div <div

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

@ -32,7 +32,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
)} )}
data-testid="bookmark-menu" data-testid="bookmark-menu"
> >
<div className="h-7 w-7 flex-shrink-0"> <div className="h-7 w-7 shrink-0">
<div className="relative flex h-full items-center justify-center rounded-full border border-border-medium bg-surface-primary-alt text-text-primary"> <div className="relative flex h-full items-center justify-center rounded-full border border-border-medium bg-surface-primary-alt text-text-primary">
{tags.length > 0 ? ( {tags.length > 0 ? (
<BookmarkFilledIcon className="h-4 w-4" aria-hidden="true" /> <BookmarkFilledIcon className="h-4 w-4" aria-hidden="true" />
@ -45,7 +45,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
{tags.length > 0 ? tags.join(', ') : localize('com_ui_bookmarks')} {tags.length > 0 ? tags.join(', ') : localize('com_ui_bookmarks')}
</div> </div>
</MenuButton> </MenuButton>
<MenuItems className="absolute left-0 top-full z-[100] mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-surface-active-alt p-1.5 shadow-lg outline-none"> <MenuItems className="absolute left-0 top-full z-100 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-surface-active-alt p-1.5 shadow-lg outline-hidden">
{data && conversation && ( {data && conversation && (
<BookmarkContext.Provider value={{ bookmarks: data.filter((tag) => tag.count > 0) }}> <BookmarkContext.Provider value={{ bookmarks: data.filter((tag) => tag.count > 0) }}>
<BookmarkNavItems <BookmarkNavItems

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

@ -119,7 +119,7 @@ const Nav = ({
<div <div
data-testid="nav" data-testid="nav"
className={ className={
'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-surface-primary-alt md:max-w-[260px]' 'nav active max-w-[320px] shrink-0 overflow-x-hidden bg-surface-primary-alt md:max-w-[260px]'
} }
style={{ style={{
width: navVisible ? navWidth : '0px', width: navVisible ? navWidth : '0px',

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

@ -35,7 +35,7 @@ const NewChatButtonIcon = ({ conversation }: { conversation: TConversation | nul
const Icon = icons[iconKey]; const Icon = icons[iconKey];
return ( return (
<div className="h-7 w-7 flex-shrink-0"> <div className="h-7 w-7 shrink-0">
{iconURL && iconURL.includes('http') ? ( {iconURL && iconURL.includes('http') ? (
<ConvoIconURL <ConvoIconURL
iconURL={iconURL} iconURL={iconURL}

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

@ -85,7 +85,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
} }
<input <input
type="text" type="text"
className="m-0 mr-0 w-full border-none bg-transparent p-0 pl-7 text-sm leading-tight placeholder-text-secondary placeholder-opacity-100 focus-visible:outline-none group-focus-within:placeholder-text-primary group-hover:placeholder-text-primary" className="m-0 mr-0 w-full border-none bg-transparent p-0 pl-7 text-sm leading-tight placeholder-text-secondary placeholder-opacity-100 focus-visible:outline-hidden group-focus-within:placeholder-text-primary group-hover:placeholder-text-primary"
value={text} value={text}
onChange={onChange} onChange={onChange}
onKeyDown={(e) => { onKeyDown={(e) => {

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

@ -126,7 +126,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</h2> </h2>
<button <button
type="button" type="button"
className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-xheavy focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-surface-primary dark:focus:ring-offset-surface-primary" className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-border-xheavy focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-surface-primary dark:focus:ring-offset-surface-primary"
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
> >
<svg <svg
@ -157,7 +157,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
<Tabs.List <Tabs.List
aria-label="Settings" aria-label="Settings"
className={cn( className={cn(
'min-w-auto max-w-auto relative -ml-[8px] flex flex-shrink-0 flex-col flex-nowrap overflow-auto sm:max-w-none', 'min-w-auto max-w-auto relative -ml-[8px] flex shrink-0 flex-col flex-nowrap overflow-auto sm:max-w-none',
isSmallScreen isSmallScreen
? 'flex-row rounded-xl bg-surface-secondary' ? 'flex-row rounded-xl bg-surface-secondary'
: 'sticky top-0 h-full', : 'sticky top-0 h-full',

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

@ -117,7 +117,7 @@ const BackupCodesItem: React.FC = () => {
}); });
document.dispatchEvent(announcement); document.dispatchEvent(announcement);
}} }}
className={`flex flex-col rounded-xl border p-4 backdrop-blur-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${ className={`flex flex-col rounded-xl border p-4 backdrop-blur-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary ${
isUsed isUsed
? 'border-red-200 bg-red-50/80 dark:border-red-800 dark:bg-red-900/20' ? 'border-red-200 bg-red-50/80 dark:border-red-800 dark:bg-red-900/20'
: 'border-green-200 bg-green-50/80 dark:border-green-800 dark:bg-green-900/20' : 'border-green-200 bg-green-50/80 dark:border-green-800 dark:bg-green-900/20'

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

@ -89,7 +89,7 @@ export default function ArchivedChatsTable() {
<div className="flex w-[410px] items-center"> <div className="flex w-[410px] items-center">
<Skeleton className="h-4" style={{ width: `${randomWidth}px` }} /> <Skeleton className="h-4" style={{ width: `${randomWidth}px` }} />
</div> </div>
<div className="flex flex-grow justify-center"> <div className="flex grow justify-center">
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28" />
</div> </div>
<div className="mr-2 flex justify-end"> <div className="mr-2 flex justify-end">

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

@ -12,7 +12,7 @@ const HoverCardSettings = ({ side, text }) => {
<CircleHelpIcon className="h-5 w-5 text-text-tertiary" />{' '} <CircleHelpIcon className="h-5 w-5 text-text-tertiary" />{' '}
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardPortal> <HoverCardPortal>
<HoverCardContent side={side} className="z-[999] w-80"> <HoverCardContent side={side} className="z-999 w-80">
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-text-secondary">{localize(text)}</p> <p className="text-sm text-text-secondary">{localize(text)}</p>
</div> </div>

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

@ -63,7 +63,7 @@ function PluginAuthForm({ plugin, onSubmit, isEntityTool }: TPluginAuthFormProps
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-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" 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-hidden placeholder:text-gray-400 focus:border-gray-400 focus:bg-gray-50 focus:outline-hidden 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 dark:focus:bg-gray-600 dark:focus:outline-hidden 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" />

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

@ -128,7 +128,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
setCurrentPage(1); setCurrentPage(1);
setSearchValue(''); setSearchValue('');
}} }}
className="relative z-[102]" className="relative z-102"
> >
{/* The backdrop, rendered as a fixed sibling to the panel container */} {/* The backdrop, rendered as a fixed sibling to the panel container */}
<div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" /> <div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />

2
client/src/components/Prompts/Groups/ChatGroupItem.tsx
View file

@ -80,7 +80,7 @@ function ChatGroupItem({
e.stopPropagation(); e.stopPropagation();
} }
}} }}
className="z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" className="z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
> >
<MenuIcon className="icon-md text-text-secondary" aria-hidden="true" /> <MenuIcon className="icon-md text-text-secondary" aria-hidden="true" />
<span className="sr-only">Open actions menu for {group.name}</span> <span className="sr-only">Open actions menu for {group.name}</span>

2
client/src/components/Prompts/Groups/CreatePromptForm.tsx
View file

@ -143,7 +143,7 @@ const CreatePromptForm = ({
<div> <div>
<TextareaAutosize <TextareaAutosize
{...field} {...field}
className="w-full rounded border border-border-medium px-2 py-1 focus:outline-none dark:bg-transparent dark:text-gray-200" className="w-full rounded border border-border-medium px-2 py-1 focus:outline-hidden dark:bg-transparent dark:text-gray-200"
minRows={6} minRows={6}
tabIndex={0} tabIndex={0}
/> />

2
client/src/components/Prompts/Groups/DashGroupItem.tsx
View file

@ -74,7 +74,7 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
return ( return (
<div <div
className={cn( className={cn(
'mx-2 my-2 flex cursor-pointer rounded-lg border border-border-light bg-surface-primary p-3 shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-secondary', 'mx-2 my-2 flex cursor-pointer rounded-lg border border-border-light bg-surface-primary p-3 shadow-2xs transition-all duration-300 ease-in-out hover:bg-surface-secondary',
params.promptId === group._id && 'bg-surface-hover', params.promptId === group._id && 'bg-surface-hover',
)} )}
onClick={handleContainerClick} onClick={handleContainerClick}

2
client/src/components/Prompts/Groups/GroupSidePanel.tsx
View file

@ -35,7 +35,7 @@ export default function GroupSidePanel({
)} )}
> >
{children} {children}
<div className="flex-grow overflow-y-auto"> <div className="grow overflow-y-auto">
<List groups={promptGroups} isChatRoute={isChatRoute} isLoading={!!groupsQuery.isLoading} /> <List groups={promptGroups} isChatRoute={isChatRoute} isLoading={!!groupsQuery.isLoading} />
</div> </div>
<PanelNavigation <PanelNavigation

2
client/src/components/Prompts/Groups/List.tsx
View file

@ -40,7 +40,7 @@ export default function List({
</Button> </Button>
</div> </div>
)} )}
<div className="flex-grow overflow-y-auto"> <div className="grow overflow-y-auto">
<div className="overflow-y-auto overflow-x-hidden"> <div className="overflow-y-auto overflow-x-hidden">
{isLoading && isChatRoute && ( {isLoading && isChatRoute && (
<Skeleton className="my-2 flex h-[84px] w-full rounded-2xl border-0 px-3 pb-4 pt-3" /> <Skeleton className="my-2 flex h-[84px] w-full rounded-2xl border-0 px-3 pb-4 pt-3" />

4
client/src/components/Prompts/PromptEditor.tsx
View file

@ -59,7 +59,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
<span className="max-w-[200px] truncate sm:max-w-none"> <span className="max-w-[200px] truncate sm:max-w-none">
{localize('com_ui_prompt_text')} {localize('com_ui_prompt_text')}
</span> </span>
<div className="flex flex-shrink-0 flex-row gap-3 sm:gap-6"> <div className="flex shrink-0 flex-row gap-3 sm:gap-6">
{editorMode === PromptsEditorMode.ADVANCED && ( {editorMode === PromptsEditorMode.ADVANCED && (
<AlwaysMakeProd className="hidden sm:flex" /> <AlwaysMakeProd className="hidden sm:flex" />
)} )}
@ -106,7 +106,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
<TextareaAutosize <TextareaAutosize
{...field} {...field}
autoFocus autoFocus
className="w-full resize-none overflow-y-auto rounded bg-transparent text-sm text-text-primary focus:outline-none sm:text-base" className="w-full resize-none overflow-y-auto rounded bg-transparent text-sm text-text-primary focus:outline-hidden sm:text-base"
minRows={3} minRows={3}
maxRows={14} maxRows={14}
onBlur={() => setIsEditing(false)} onBlur={() => setIsEditing(false)}

4
client/src/components/Prompts/PromptName.tsx
View file

@ -80,7 +80,7 @@ const PromptName: React.FC<Props> = ({ name, onSave }) => {
onClick={handleSaveClick} onClick={handleSaveClick}
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-10 flex-shrink-0" className="h-10 shrink-0"
aria-label="Save prompt name" aria-label="Save prompt name"
> >
<SaveIcon className="icon-md" /> <SaveIcon className="icon-md" />
@ -103,7 +103,7 @@ const PromptName: React.FC<Props> = ({ name, onSave }) => {
variant="ghost" variant="ghost"
size="sm" size="sm"
aria-label="Edit prompt name" aria-label="Edit prompt name"
className="h-10 flex-shrink-0" className="h-10 shrink-0"
> >
<EditIcon className="icon-md" /> <EditIcon className="icon-md" />
</Button> </Button>

2
client/src/components/Prompts/PromptVersions.tsx
View file

@ -106,7 +106,7 @@ const VersionCard = ({
'group relative w-full rounded-lg border border-border-light p-4 transition-all duration-300', 'group relative w-full rounded-lg border border-border-light p-4 transition-all duration-300',
isSelected isSelected
? 'bg-surface-hover shadow-xl' ? 'bg-surface-hover shadow-xl'
: 'bg-surface-primary shadow-sm hover:bg-surface-secondary', : 'bg-surface-primary shadow-2xs hover:bg-surface-secondary',
)} )}
onClick={onClick} onClick={onClick}
aria-selected={isSelected} aria-selected={isSelected}

2
client/src/components/Prompts/PromptsView.tsx
View file

@ -36,7 +36,7 @@ export default function PromptsView() {
return ( return (
<div className="flex h-screen w-full flex-col bg-surface-primary p-0 lg:p-2"> <div className="flex h-screen w-full flex-col bg-surface-primary p-0 lg:p-2">
<DashBreadcrumb /> <DashBreadcrumb />
<div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600"> <div className="flex w-full grow flex-row divide-x overflow-hidden dark:divide-gray-600">
<GroupSidePanel isDetailView={isDetailView} {...groupsNav}> <GroupSidePanel isDetailView={isDetailView} {...groupsNav}>
<div className="mx-2 mt-1 flex flex-row items-center justify-between"> <div className="mx-2 mt-1 flex flex-row items-center justify-between">
<FilterPrompts setName={groupsNav.setName} /> <FilterPrompts setName={groupsNav.setName} />

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

@ -50,7 +50,7 @@ export default function Message(props: TMessageProps) {
<div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"> <div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent">
<div className="m-auto justify-center p-4 py-2 md:gap-6 "> <div className="m-auto justify-center p-4 py-2 md:gap-6 ">
<div className="final-completion group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5"> <div className="final-completion group mx-auto flex flex-1 gap-3 md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
<div className="relative flex flex-shrink-0 flex-col items-end"> <div className="relative flex shrink-0 flex-col items-end">
<div> <div>
<div className="pt-0.5"> <div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full"> <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
@ -64,7 +64,7 @@ export default function Message(props: TMessageProps) {
> >
<div className={cn('select-none font-semibold', fontSize)}>{messageLabel}</div> <div className={cn('select-none font-semibold', fontSize)}>{messageLabel}</div>
<div className="flex-col gap-1 md:gap-3"> <div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0"> <div className="flex max-w-full grow flex-col gap-0">
<MessageContext.Provider <MessageContext.Provider
value={{ value={{
messageId, messageId,

2
client/src/components/Share/MessagesView.tsx
View file

@ -38,7 +38,7 @@ export default function MessagesView({
</div> </div>
</> </>
)} )}
<div className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50" /> <div className="dark:gpt-dark-gray group h-0 w-full shrink-0 dark:border-gray-800/50" />
</div> </div>
</div> </div>
</div> </div>

2
client/src/components/Share/ShareView.tsx
View file

@ -69,7 +69,7 @@ function SharedView() {
<div className="flex h-full flex-col text-text-primary" role="presentation"> <div className="flex h-full flex-col text-text-primary" role="presentation">
{content} {content}
<div className="w-full border-t-0 pl-0 pt-2 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent"> <div className="w-full border-t-0 pl-0 pt-2 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
<Footer className="fixed bottom-0 left-0 right-0 z-50 flex items-center justify-center gap-2 bg-gradient-to-t from-surface-secondary to-transparent px-2 pb-2 pt-8 text-xs text-text-secondary md:px-[60px]" /> <Footer className="fixed bottom-0 left-0 right-0 z-50 flex items-center justify-center gap-2 bg-linear-to-t from-surface-secondary to-transparent px-2 pb-2 pt-8 text-xs text-text-secondary md:px-[60px]" />
</div> </div>
</div> </div>
</div> </div>

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

@ -235,7 +235,7 @@ export default function ActionsInput({
onChange={handleInputChange} onChange={handleInputChange}
spellCheck="false" spellCheck="false"
placeholder={localize('com_ui_enter_openapi_schema')} placeholder={localize('com_ui_enter_openapi_schema')}
className="text-token-text-primary block h-96 w-full bg-transparent p-2 font-mono text-xs outline-none focus:ring-1 focus:ring-border-light" className="text-token-text-primary block h-96 w-full bg-transparent p-2 font-mono text-xs outline-hidden focus:ring-1 focus:ring-border-light"
/> />
{/* TODO: format input button */} {/* TODO: format input button */}
</div> </div>
@ -269,7 +269,7 @@ export default function ActionsInput({
<input <input
type="text" type="text"
placeholder="https://api.example-weather-app.com/privacy" placeholder="https://api.example-weather-app.com/privacy"
className="flex-1 rounded-lg bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light" className="flex-1 rounded-lg bg-transparent px-3 py-1.5 text-sm outline-hidden placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light"
/> />
</div> </div>
</div> </div>
@ -277,7 +277,7 @@ export default function ActionsInput({
<button <button
disabled={!functions || !functions.length} disabled={!functions || !functions.length}
onClick={saveAction} onClick={saveAction}
className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-none focus:ring-0 disabled:bg-green-400" className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-hidden focus:ring-0 disabled:bg-green-400"
type="button" type="button"
> >
{getButtonContent()} {getButtonContent()}

2
client/src/components/SidePanel/Agents/AgentConfig.tsx
View file

@ -321,7 +321,7 @@ export default function AgentConfig({
> >
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
{Icon && ( {Icon && (
<div className="shadow-stroke relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-white text-black dark:bg-white"> <div className="shadow-stroke relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white text-black dark:bg-white">
<Icon <Icon
className="h-2/3 w-2/3" className="h-2/3 w-2/3"
endpoint={providerValue as string} endpoint={providerValue as string}

2
client/src/components/SidePanel/Agents/AgentPanel.tsx
View file

@ -205,7 +205,7 @@ export default function AgentPanel({
<FormProvider {...methods}> <FormProvider {...methods}>
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-hidden" className="scrollbar-gutter-stable h-auto w-full shrink-0 overflow-x-hidden"
aria-label="Agent configuration form" aria-label="Agent configuration form"
> >
<div className="mx-1 mt-2 flex w-full flex-wrap gap-2"> <div className="mx-1 mt-2 flex w-full flex-wrap gap-2">

2
client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
View file

@ -75,7 +75,7 @@ const BookmarkTable = () => {
/> />
</div> </div>
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors"> <div className="rounded-lg border border-border-light bg-transparent shadow-2xs transition-colors">
<Table className="w-full table-fixed"> <Table className="w-full table-fixed">
<TableHeader> <TableHeader>
<TableRow className="border-b border-border-light"> <TableRow className="border-b border-border-light">

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

@ -16,7 +16,7 @@ export default function Action({ action, onClick }: { action: Action; onClick: (
onClick(); onClick();
} }
}} }}
className="group flex w-full rounded-lg border border-border-medium text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-text-primary" className="group flex w-full rounded-lg border border-border-medium text-sm hover:cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-text-primary"
onMouseEnter={() => setIsHovering(true)} onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
aria-label={`Action for ${action.metadata.domain}`} aria-label={`Action for ${action.metadata.domain}`}
@ -29,7 +29,7 @@ export default function Action({ action, onClick }: { action: Action; onClick: (
</div> </div>
<div <div
className={cn( className={cn(
'h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary group-focus:flex', 'h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-hidden focus:ring-2 focus:ring-text-primary group-focus:flex',
isHovering ? 'flex' : 'hidden', isHovering ? 'flex' : 'hidden',
)} )}
aria-label="Settings" aria-label="Settings"

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

@ -33,7 +33,7 @@ export default function ActionCallback({ action_id }: { action_id?: string }) {
type="text" type="text"
readOnly readOnly
value={callbackURL} value={callbackURL}
className="w-full border-0 bg-transparent px-3 py-2 pr-12 text-sm text-text-secondary-alt focus:outline-none" className="w-full border-0 bg-transparent px-3 py-2 pr-12 text-sm text-text-secondary-alt focus:outline-hidden"
style={{ direction: 'rtl' }} style={{ direction: 'rtl' }}
/> />
</div> </div>

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

@ -179,7 +179,7 @@ const ApiKey = () => {
autoComplete="new-password" autoComplete="new-password"
className={cn( className={cn(
'mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm', 'mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm',
'border-border-medium bg-surface-primary outline-none', 'border-border-medium bg-surface-primary outline-hidden',
'focus:ring-2 focus:ring-ring', 'focus:ring-2 focus:ring-ring',
)} )}
{...register('api_key', { required: type === AuthTypeEnum.ServiceHttp })} {...register('api_key', { required: type === AuthTypeEnum.ServiceHttp })}
@ -255,7 +255,7 @@ const ApiKey = () => {
<input <input
className={cn( className={cn(
'mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm', 'mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm',
'border-border-medium bg-surface-primary outline-none', 'border-border-medium bg-surface-primary outline-hidden',
'focus:ring-2 focus:ring-ring', 'focus:ring-2 focus:ring-ring',
)} )}
placeholder="X-Api-Key" placeholder="X-Api-Key"
@ -289,7 +289,7 @@ const OAuth = () => {
const inputClasses = cn( const inputClasses = cn(
'mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm', 'mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm',
'border-border-medium bg-surface-primary outline-none', 'border-border-medium bg-surface-primary outline-hidden',
'focus:ring-2 focus:ring-ring', 'focus:ring-2 focus:ring-ring',
); );

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

@ -246,7 +246,7 @@ export default function ActionsInput({
onChange={handleInputChange} onChange={handleInputChange}
spellCheck="false" spellCheck="false"
placeholder={localize('com_ui_enter_openapi_schema')} placeholder={localize('com_ui_enter_openapi_schema')}
className="text-token-text-primary block h-96 w-full bg-transparent p-2 font-mono text-xs outline-none focus:ring-1 focus:ring-border-light" className="text-token-text-primary block h-96 w-full bg-transparent p-2 font-mono text-xs outline-hidden focus:ring-1 focus:ring-border-light"
/> />
{/* TODO: format input button */} {/* TODO: format input button */}
</div> </div>
@ -280,7 +280,7 @@ export default function ActionsInput({
<input <input
type="text" type="text"
placeholder="https://api.example-weather-app.com/privacy" placeholder="https://api.example-weather-app.com/privacy"
className="flex-1 rounded-lg bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light" className="flex-1 rounded-lg bg-transparent px-3 py-1.5 text-sm outline-hidden placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light"
/> />
</div> </div>
</div> </div>
@ -288,7 +288,7 @@ export default function ActionsInput({
<button <button
disabled={!functions || !functions.length} disabled={!functions || !functions.length}
onClick={saveAction} onClick={saveAction}
className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-none focus:ring-0 disabled:bg-green-400" className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-hidden focus:ring-0 disabled:bg-green-400"
type="button" type="button"
> >
{submitContext()} {submitContext()}

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

@ -216,7 +216,7 @@ export default function AssistantPanel({
<FormProvider {...methods}> <FormProvider {...methods}>
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className="h-auto w-full flex-shrink-0 overflow-x-hidden" className="h-auto w-full shrink-0 overflow-x-hidden"
> >
<div className="flex w-full flex-wrap"> <div className="flex w-full flex-wrap">
<Controller <Controller
@ -238,7 +238,7 @@ export default function AssistantPanel({
{/* Select Button */} {/* Select Button */}
{assistant_id && ( {assistant_id && (
<button <button
className="btn btn-primary focus:shadow-outline mx-2 mt-1 h-[40px] rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-none focus:ring-0" className="btn btn-primary focus:shadow-outline mx-2 mt-1 h-[40px] rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-hidden focus:ring-0"
type="button" type="button"
disabled={!assistant_id} disabled={!assistant_id}
onClick={(e) => { onClick={(e) => {

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

@ -280,7 +280,7 @@ export default function AssistantSelect({
showAbove={false} showAbove={false}
showLabel={false} showLabel={false}
emptyTitle={true} emptyTitle={true}
containerClassName="flex-grow" containerClassName="grow"
searchClassName="dark:from-gray-850" searchClassName="dark:from-gray-850"
searchPlaceholder={localize('com_assistants_search_name')} searchPlaceholder={localize('com_assistants_search_name')}
optionsClass="hover:bg-gray-20/50 dark:border-gray-700" optionsClass="hover:bg-gray-20/50 dark:border-gray-700"

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

@ -12,7 +12,7 @@ export default function PanelFileCell({ row }: { row: Row<TFile | undefined> })
{file?.type.startsWith('image') === true ? ( {file?.type.startsWith('image') === true ? (
<ImagePreview <ImagePreview
url={file.filepath} url={file.filepath}
className="h-10 w-10 flex-shrink-0" className="h-10 w-10 shrink-0"
source={file.source} source={file.source}
alt={file.filename} alt={file.filename}
/> />

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

@ -177,7 +177,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
/> />
</div> </div>
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors"> <div className="rounded-lg border border-border-light bg-transparent shadow-2xs transition-colors">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
@ -205,7 +205,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
<TableRow <TableRow
key={row.id} key={row.id}
data-state={row.getIsSelected() && 'selected'} data-state={row.getIsSelected() && 'selected'}
className="border-b border-border-light transition-colors hover:bg-surface-secondary [&:last-child]:border-0" className="border-b border-border-light transition-colors hover:bg-surface-secondary last:border-0"
> >
{row.getVisibleCells().map((cell) => { {row.getVisibleCells().map((cell) => {
const isFilenameCell = cell.column.id === 'filename'; const isFilenameCell = cell.column.id === 'filename';

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

@ -19,13 +19,13 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
return ( return (
<div <div
data-collapsed={isCollapsed} data-collapsed={isCollapsed}
className="bg-token-sidebar-surface-primary hide-scrollbar group flex-shrink-0 overflow-x-hidden" className="bg-token-sidebar-surface-primary hide-scrollbar group shrink-0 overflow-x-hidden"
> >
<div className="h-full"> <div className="h-full">
<div className="flex h-full min-h-0 flex-col"> <div className="flex h-full min-h-0 flex-col">
<div className="flex h-full min-h-0 flex-col opacity-100 transition-opacity"> <div className="flex h-full min-h-0 flex-col opacity-100 transition-opacity">
<div className="scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20"> <div className="scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20">
<div className="flex h-full w-full flex-col gap-1 px-3 pb-3.5 group-[[data-collapsed=true]]:items-center group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2"> <div className="flex h-full w-full flex-col gap-1 px-3 pb-3.5 group-data-[collapsed=true]:items-center group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:px-2">
{links.map((link, index) => { {links.map((link, index) => {
const variant = getVariant(link); const variant = getVariant(link);
return isCollapsed ? ( return isCollapsed ? (

2
client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
View file

@ -78,7 +78,7 @@ function DynamicTextarea({
placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder} placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder}
className={cn( className={cn(
// TODO: configurable max height // TODO: configurable max height
'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg bg-surface-secondary px-3 py-2 focus:outline-none', 'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg bg-surface-secondary px-3 py-2 focus:outline-hidden',
)} )}
/> />
</HoverCardTrigger> </HoverCardTrigger>

2
client/src/components/SidePanel/Parameters/OptionHover.tsx
View file

@ -27,7 +27,7 @@ function OptionHover({
const text = langCode ? localize(description as TranslationKeys) : description; const text = langCode ? localize(description as TranslationKeys) : description;
return ( return (
<HoverCardPortal> <HoverCardPortal>
<HoverCardContent side={side} className={`z-[999] w-80 ${className}`} sideOffset={sideOffset}> <HoverCardContent side={side} className={`z-999 w-80 ${className}`} sideOffset={sideOffset}>
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-gray-600 dark:text-gray-300">{text}</p> <p className="text-sm text-gray-600 dark:text-gray-300">{text}</p>
</div> </div>

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

@ -173,7 +173,7 @@ const SidePanel = ({
{interfaceConfig.modelSelect === true && ( {interfaceConfig.modelSelect === true && (
<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-background', 'sticky left-0 right-0 top-0 z-100 flex h-[52px] flex-wrap items-center justify-center bg-background',
isCollapsed ? 'h-[52px]' : 'px-2', isCollapsed ? 'h-[52px]' : 'px-2',
)} )}
> >

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