🧭 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>
2025-12-21 19:00:13 +01:00 · 2025-11-21 11:25:14 -05:00 · 2025-11-21 11:25:14 -05:00 · 7aa8d49f3a
commit 7aa8d49f3a
parent ef3bf0a932
21 changed files with 717 additions and 30 deletions
--- a/api/app/clients/output_parsers/addImages.spec.js
+++ b/api/app/clients/output_parsers/addImages.spec.js
@ -74,7 +74,7 @@ describe('addImages', () => {

  it('should append correctly from a real scenario', () => {
    responseMessage.text =
-      'Here is the generated image based on your request. It depicts a surreal landscape filled with floating musical notes. The style is impressionistic, with vibrant sunset hues dominating the scene. At the center, there\'s a silhouette of a grand piano, adding a dreamy emotion to the overall image. This could serve as a unique and creative music album cover. Would you like to make any changes or generate another image?';
+      "Here is the generated image based on your request. It depicts a surreal landscape filled with floating musical notes. The style is impressionistic, with vibrant sunset hues dominating the scene. At the center, there's a silhouette of a grand piano, adding a dreamy emotion to the overall image. This could serve as a unique and creative music album cover. Would you like to make any changes or generate another image?";
    const originalText = responseMessage.text;
    const imageMarkdown = '![generated image](/images/img-RnVWaYo2Yg4x3e0isICiMuf5.png)';
    intermediateSteps.push({ observation: imageMarkdown });
@ -139,4 +139,108 @@ describe('addImages', () => {
    addImages(intermediateSteps, responseMessage);
    expect(responseMessage.text).toBe('\n![image1](/images/image1.png)');
  });
+
+  describe('basePath functionality', () => {
+    let originalDomainClient;
+
+    beforeEach(() => {
+      originalDomainClient = process.env.DOMAIN_CLIENT;
+    });
+
+    afterEach(() => {
+      process.env.DOMAIN_CLIENT = originalDomainClient;
+    });
+
+    it('should prepend base path to image URLs when DOMAIN_CLIENT is set', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      intermediateSteps.push({ observation: '![desc](/images/test.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](/librechat/images/test.png)');
+    });
+
+    it('should not prepend base path when image URL already has base path', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      intermediateSteps.push({ observation: '![desc](/librechat/images/test.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](/librechat/images/test.png)');
+    });
+
+    it('should correct erroneous URLs with base path', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      responseMessage.text = '![desc](sandbox:/images/test.png)';
+      intermediateSteps.push({ observation: '![desc](/images/test.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('![desc](/librechat/images/test.png)');
+    });
+
+    it('should handle empty base path (root deployment)', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/';
+      intermediateSteps.push({ observation: '![desc](/images/test.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](/images/test.png)');
+    });
+
+    it('should handle missing DOMAIN_CLIENT', () => {
+      delete process.env.DOMAIN_CLIENT;
+      intermediateSteps.push({ observation: '![desc](/images/test.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](/images/test.png)');
+    });
+
+    it('should handle observation without image path match', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      intermediateSteps.push({ observation: '![desc](not-an-image-path)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](not-an-image-path)');
+    });
+
+    it('should handle nested subdirectories in base path', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/apps/librechat';
+      intermediateSteps.push({ observation: '![desc](/images/test.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](/apps/librechat/images/test.png)');
+    });
+
+    it('should handle multiple observations with mixed base path scenarios', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      intermediateSteps.push({ observation: '![desc1](/images/test1.png)' });
+      intermediateSteps.push({ observation: '![desc2](/librechat/images/test2.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe(
+        '\n![desc1](/librechat/images/test1.png)\n![desc2](/librechat/images/test2.png)',
+      );
+    });
+
+    it('should handle complex markdown with base path', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      const complexMarkdown = `
+        # Document Title
+        ![image1](/images/image1.png)
+        Some text between images
+        ![image2](/images/image2.png)
+      `;
+      intermediateSteps.push({ observation: complexMarkdown });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![image1](/librechat/images/image1.png)');
+    });
+
+    it('should handle URLs that are already absolute', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      intermediateSteps.push({ observation: '![desc](https://example.com/image.png)' });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe('\n![desc](https://example.com/image.png)');
+    });
+
+    it('should handle data URLs', () => {
+      process.env.DOMAIN_CLIENT = 'http://localhost:3080/librechat';
+      intermediateSteps.push({
+        observation:
+          '![desc](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==)',
+      });
+      addImages(intermediateSteps, responseMessage);
+      expect(responseMessage.text).toBe(
+        '\n![desc](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==)',
+      );
+    });
+  });
 });