🧭 fix: Add Base Path Support for Login/Register and Image Paths (#10116)

* fix: add basePath pattern to support login/register and image paths

* Fix linter errors

* refactor: Update import statements for getBasePath and isEnabled, and add path utility functions with tests

- Refactored imports in addImages.js and StableDiffusion.js to use getBasePath from '@librechat/api'.
- Consolidated isEnabled and getBasePath imports in validateImageRequest.js.
- Introduced new path utility functions in path.ts and corresponding unit tests in path.spec.ts to validate base path extraction logic.

* fix: Update domain server base URL in MarkdownComponents and refactor authentication redirection logic

- Changed the domain server base URL in MarkdownComponents.tsx to use the API base URL.
- Refactored the useAuthRedirect hook to utilize React Router's navigate for redirection instead of window.location, ensuring a smoother SPA experience.
- Added unit tests for the useAuthRedirect hook to verify authentication redirection behavior.

* test: Mock isEnabled in validateImages.spec.js for improved test isolation

- Updated validateImages.spec.js to mock the isEnabled function from @librechat/api, ensuring that tests can run independently of the actual implementation.
- Cleared the DOMAIN_CLIENT environment variable before tests to avoid interference with basePath resolution.

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Auth/Login.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ErrorTypes } from 'librechat-data-provider';
+import { ErrorTypes, registerPage } from 'librechat-data-provider';
 import { OpenIDIcon, useToastContext } from '@librechat/client';
 import { useOutletContext, useSearchParams } from 'react-router-dom';
 import type { TLoginLayoutContext } from '~/common';
@@ -104,7 +104,7 @@ function Login() {
           {' '}
           {localize('com_auth_no_account')}{' '}
           <a
-            href="/register"
+            href={registerPage()}
             className="inline-flex p-1 text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
           >
             {localize('com_auth_sign_up')}

client/src/components/Auth/Registration.tsx

@@ -4,6 +4,7 @@ import { Turnstile } from '@marsidev/react-turnstile';
 import { ThemeContext, Spinner, Button, isDark } from '@librechat/client';
 import { useNavigate, useOutletContext, useLocation } from 'react-router-dom';
 import { useRegisterUserMutation } from 'librechat-data-provider/react-query';
+import { loginPage } from 'librechat-data-provider';
 import type { TRegisterUser, TError } from 'librechat-data-provider';
 import type { TLoginLayoutContext } from '~/common';
 import { useLocalize, TranslationKeys } from '~/hooks';
@@ -213,7 +214,7 @@ const Registration: React.FC = () => {
           <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
             {localize('com_auth_already_have_account')}{' '}
             <a
-              href="/login"
+              href={loginPage()}
               aria-label="Login"
               className="inline-flex p-1 text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
             >

client/src/components/Auth/RequestPasswordReset.tsx

@@ -3,6 +3,7 @@ import { useState, ReactNode } from 'react';
 import { Spinner, Button } from '@librechat/client';
 import { useOutletContext } from 'react-router-dom';
 import { useRequestPasswordResetMutation } from 'librechat-data-provider/react-query';
+import { loginPage } from 'librechat-data-provider';
 import type { TRequestPasswordReset, TRequestPasswordResetResponse } from 'librechat-data-provider';
 import type { TLoginLayoutContext } from '~/common';
 import type { FC } from 'react';
@@ -26,7 +27,7 @@ const ResetPasswordBodyText = () => {
       <p>{localize('com_auth_reset_password_if_email_exists')}</p>
       <a
         className="inline-flex text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
-        href="/login"
+        href={loginPage()}
       >
         {localize('com_auth_back_to_login')}
       </a>
@@ -134,7 +135,7 @@ function RequestPasswordReset() {
           {isLoading ? <Spinner /> : localize('com_auth_continue')}
         </Button>
         <a
-          href="/login"
+          href={loginPage()}
           className="block text-center text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
         >
           {localize('com_auth_back_to_login')}

client/src/components/Chat/Messages/Content/Image.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useMemo } from 'react';
 import { Skeleton } from '@librechat/client';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { apiBaseUrl } from 'librechat-data-provider';
 import { cn, scaleImage } from '~/utils';
 import DialogImage from './DialogImage';
 
@@ -36,6 +37,24 @@ const Image = ({
 
   const handleImageLoad = () => setIsLoaded(true);
 
+  // Fix image path to include base path for subdirectory deployments
+  const absoluteImageUrl = useMemo(() => {
+    if (!imagePath) return imagePath;
+
+    // If it's already an absolute URL or doesn't start with /images/, return as is
+    if (
+      imagePath.startsWith('http') ||
+      imagePath.startsWith('data:') ||
+      !imagePath.startsWith('/images/')
+    ) {
+      return imagePath;
+    }
+
+    // Get the base URL and prepend it to the image path
+    const baseURL = apiBaseUrl();
+    return `${baseURL}${imagePath}`;
+  }, [imagePath]);
+
   const { width: scaledWidth, height: scaledHeight } = useMemo(
     () =>
       scaleImage({
@@ -48,7 +67,7 @@ const Image = ({
 
   const downloadImage = async () => {
     try {
-      const response = await fetch(imagePath);
+      const response = await fetch(absoluteImageUrl);
       if (!response.ok) {
         throw new Error(`Failed to fetch image: ${response.status}`);
       }
@@ -67,7 +86,7 @@ const Image = ({
     } catch (error) {
       console.error('Download failed:', error);
       const link = document.createElement('a');
-      link.href = imagePath;
+      link.href = absoluteImageUrl;
       link.download = altText || 'image.png';
       document.body.appendChild(link);
       link.click();
@@ -97,7 +116,7 @@ const Image = ({
               'opacity-100 transition-opacity duration-100',
               isLoaded ? 'opacity-100' : 'opacity-0',
             )}
-            src={imagePath}
+            src={absoluteImageUrl}
             style={{
               width: `${scaledWidth}`,
               height: 'auto',
@@ -117,7 +136,7 @@ const Image = ({
           <DialogImage
             isOpen={isOpen}
             onOpenChange={setIsOpen}
-            src={imagePath}
+            src={absoluteImageUrl}
             downloadImage={downloadImage}
             args={args}
           />

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -14,7 +14,7 @@ import { ArtifactProvider, CodeBlockProvider } from '~/Providers';
 import MarkdownErrorBoundary from './MarkdownErrorBoundary';
 import { langSubset, preprocessLaTeX } from '~/utils';
 import { unicodeCitation } from '~/components/Web';
-import { code, a, p } from './MarkdownComponents';
+import { code, a, p, img } from './MarkdownComponents';
 import store from '~/store';
 
 type TContentProps = {
@@ -81,6 +81,7 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
                 code,
                 a,
                 p,
+                img,
                 artifact: Artifact,
                 citation: Citation,
                 'highlighted-text': HighlightedText,

client/src/components/Chat/Messages/Content/MarkdownComponents.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo, useRef, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useToastContext } from '@librechat/client';
-import { PermissionTypes, Permissions, dataService } from 'librechat-data-provider';
+import { PermissionTypes, Permissions, apiBaseUrl } from 'librechat-data-provider';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import useHasAccess from '~/hooks/Roles/useHasAccess';
 import { useFileDownload } from '~/data-provider';
@@ -135,7 +135,7 @@ export const a: React.ElementType = memo(({ href, children }: TAnchorProps) => {
   props.onClick = handleDownload;
   props.target = '_blank';
 
-  const domainServerBaseUrl = dataService.getDomainServerBaseUrl();
+  const domainServerBaseUrl = `${apiBaseUrl()}/api`;
 
   return (
     <a
@@ -158,3 +158,31 @@ type TParagraphProps = {
 export const p: React.ElementType = memo(({ children }: TParagraphProps) => {
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
+
+type TImageProps = {
+  src?: string;
+  alt?: string;
+  title?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const img: React.ElementType = memo(({ src, alt, title, className, style }: TImageProps) => {
+  // Get the base URL from the API endpoints
+  const baseURL = apiBaseUrl();
+
+  // If src starts with /images/, prepend the base URL
+  const fixedSrc = useMemo(() => {
+    if (!src) return src;
+
+    // If it's already an absolute URL or doesn't start with /images/, return as is
+    if (src.startsWith('http') || src.startsWith('data:') || !src.startsWith('/images/')) {
+      return src;
+    }
+
+    // Prepend base URL to the image path
+    return `${baseURL}${src}`;
+  }, [src, baseURL]);
+
+  return <img src={fixedSrc} alt={alt} title={title} className={className} style={style} />;
+});

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -6,7 +6,7 @@ import supersub from 'remark-supersub';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import type { PluggableList } from 'unified';
-import { code, codeNoExecution, a, p } from './MarkdownComponents';
+import { code, codeNoExecution, a, p, img } from './MarkdownComponents';
 import { CodeBlockProvider, ArtifactProvider } from '~/Providers';
 import MarkdownErrorBoundary from './MarkdownErrorBoundary';
 import { langSubset } from '~/utils';
@@ -44,6 +44,7 @@ const MarkdownLite = memo(
                   code: codeExecution ? code : codeNoExecution,
                   a,
                   p,
+                  img,
                 } as {
                   [nodeType: string]: React.ElementType;
                 }