fix: improves table formatting in the playground and adds Jest tests by deon-sanchez · Pull Request #8743 · langflow-ai/langflow

deon-sanchez · 2025-06-25T23:18:40Z

JIRA TICKET

https://datastax.jira.com/browse/LFOSS-1468?atlOrigin=eyJpIjoiNTE0N2Y4ZTMwNWNhNDcxMTg3YTQ4MDQxNzc3NmRiMGQiLCJwIjoiaiJ9

BUG

Screen.Recording.2025-06-26.at.11.32.10.AM.mov

FIX

Screen.Recording.2025-06-26.at.10.38.55.AM.mov

This pull request introduces significant changes to the Makefile structure and adds new testing configurations for the frontend. The main changes involve splitting frontend-related commands into a separate Makefile.frontend, adding Jest testing support for the frontend, and cleaning up the Makefile to improve modularity and maintainability.

Makefile Refactoring and Frontend Modularization:

Removed frontend-related targets (e.g., install_frontend, build_frontend, format_frontend, etc.) from the main Makefile and moved them into a new Makefile.frontend for better separation of concerns. The main Makefile now includes the frontend-specific makefile. [1] [2] [3] [4] [5] [6]

Frontend Testing Enhancements:

Added Jest configuration (jest.config.js) to enable unit testing for the frontend, including support for TypeScript and mocking utilities.
Updated package.json to include Jest dependencies and scripts for running tests (test, test:watch) and coverage. [1] [2] [3]
Introduced a Jest setup file (setupTests.ts) to mock browser-specific APIs (e.g., ResizeObserver, IntersectionObserver) and suppress irrelevant warnings during tests.

Codebase Cleanup and Improvements:

Removed an inline preprocessChatMessage function from edit-message.tsx and replaced it with a utility import for better reusability. [1] [2]
Removed unused imports in chat-message.tsx to clean up the code.

These changes improve the maintainability of the build system, enhance the frontend testing workflow, and clean up unused or redundant code.

Summary by CodeRabbit

New Features
- Added utility functions for processing markdown tables and chat messages, including detection, cleanup, and preprocessing of special tags.
- Introduced Jest-based unit testing support for the frontend, with new scripts and configuration.
- Centralized and expanded frontend build, development, and testing commands into a dedicated frontend Makefile.
Refactor
- Modularized frontend-related Makefile targets into a separate file for improved organization.
Tests
- Added comprehensive unit tests for markdown utility functions.
- Enhanced frontend test environment setup for consistent and reliable test execution.
Chores
- Updated frontend dependencies to support Jest testing.

- Introduced Jest configuration file to set up testing environment with TypeScript support and JSDOM. - Added setupTests.ts for global test configurations, including mocks for ResizeObserver and IntersectionObserver. - Updated package.json and package-lock.json to include Jest and related dependencies. - Implemented utility functions for processing markdown content, including handling tables and <think> tags. - Added comprehensive tests for markdown utility functions to ensure proper functionality.

- Removed frontend-related targets from the main Makefile and created a new Makefile.frontend to manage frontend-specific commands. - Updated the main Makefile to include a reference to the new frontend Makefile and added a help message for frontend commands. - This restructuring improves organization and clarity for managing backend and frontend build processes.

coderabbitai · 2025-06-25T23:18:47Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The main Makefile was refactored to delegate all frontend-related targets to a new Makefile.frontend, which now contains comprehensive frontend build, dependency, formatting, and testing commands. Jest testing support was added to the frontend via configuration, scripts, and devDependencies. New markdown utility functions and corresponding tests were introduced, and relevant imports were updated.

Changes

File(s)	Change Summary
Makefile, Makefile.frontend	Refactored: Removed frontend targets from main Makefile, added inclusion of new `Makefile.frontend` with all frontend commands.
src/frontend/package.json, src/frontend/jest.config.js, src/frontend/src/setupTests.ts	Added Jest support: configuration, setup file, and test scripts/dependencies for frontend unit testing.
src/frontend/src/utils/markdownUtils.ts	New file: Added utility functions for markdown table detection, cleanup, and chat message preprocessing.
src/frontend/src/utils/tests/markdownUtils.test.ts	New file: Added test suite for markdown utility functions.
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx	Removed unused import of `ProfileIcon`.
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx	Changed: Now imports `preprocessChatMessage` from utility module instead of defining locally.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Makefile
    participant Makefile.frontend

    User->>Makefile: make build_frontend (or other frontend target)
    Makefile->>Makefile.frontend: Delegates frontend target execution
    Makefile.frontend-->>User: Runs appropriate frontend build/test/format command

sequenceDiagram
    participant Developer
    participant Jest
    participant markdownUtils

    Developer->>Jest: Run unit tests
    Jest->>markdownUtils: Call isMarkdownTable / cleanupTableEmptyCells / preprocessChatMessage
    markdownUtils-->>Jest: Return processed results
    Jest-->>Developer: Report test results

Suggested labels

enhancement, size:M, lgtm

✨ Finishing Touches

🧪 Generate Unit Tests

Create PR with Unit Tests
Post Copyable Unit Tests in Comment
Commit Unit Tests in branch lfoss-1468

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai auto-generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/frontend/src/utils/markdownUtils.ts (2)

8-13: Consider enhancing the regex pattern for more robust table detection.

The current regex /\|.*\|.*\n\s*\|[\s\-:]+\|/m may not handle all valid markdown table formats, particularly tables with minimal content or different spacing patterns.

Consider this more comprehensive approach:

-export const isMarkdownTable = (text: string): boolean => {
-  if (!text?.trim()) return false;
-
-  // Single regex to detect markdown table with header separator
-  return /\|.*\|.*\n\s*\|[\s\-:]+\|/m.test(text);
-};
+export const isMarkdownTable = (text: string): boolean => {
+  if (!text?.trim()) return false;
+
+  const lines = text.trim().split('\n');
+  
+  // Look for at least 2 lines with pipes and a separator line
+  for (let i = 0; i < lines.length - 1; i++) {
+    if (lines[i].includes('|') && /^\s*\|[\s\-:]*\|\s*$/.test(lines[i + 1])) {
+      return true;
+    }
+  }
+  
+  return false;
+};

40-52: Consider handling edge cases in think tag replacement.

The current replacement wraps <think> tags in backticks, but this may not be ideal if the tags are already within code blocks or have nested backticks.

Consider adding more robust tag handling:

export const preprocessChatMessage = (text: string): string => {
-  // Handle <think> tags
-  let processed = text
-    .replace(/<think>/g, "`<think>`")
-    .replace(/<\/think>/g, "`</think>`");
+  // Handle <think> tags - avoid double-wrapping if already in backticks
+  let processed = text
+    .replace(/(?<!`)<think>(?!`)/g, "`<think>`")
+    .replace(/(?<!`)<\/think>(?!`)/g, "`</think>`");

  // Clean up tables if present
  if (isMarkdownTable(processed)) {
    processed = cleanupTableEmptyCells(processed);
  }

  return processed;
};

src/frontend/src/setupTests.ts (1)

33-62: Consider making console suppression more flexible.

The current implementation suppresses very specific warnings, but this approach may become brittle as React versions change or new warnings are introduced.

Consider a more flexible approach:

-beforeAll(() => {
-  console.error = (...args) => {
-    if (
-      typeof args[0] === "string" &&
-      args[0].includes("Warning: ReactDOM.render is deprecated")
-    ) {
-      return;
-    }
-    originalError.call(console, ...args);
-  };
-
-  console.warn = (...args) => {
-    if (
-      typeof args[0] === "string" &&
-      args[0].includes("componentWillReceiveProps has been renamed")
-    ) {
-      return;
-    }
-    originalWarn.call(console, ...args);
-  };
-});
+beforeAll(() => {
+  // Suppress known test environment warnings
+  const suppressedPatterns = [
+    /Warning: ReactDOM\.render is deprecated/,
+    /componentWillReceiveProps has been renamed/,
+    /componentWillUpdate has been renamed/
+  ];
+
+  console.error = (...args) => {
+    if (typeof args[0] === "string" && 
+        suppressedPatterns.some(pattern => pattern.test(args[0]))) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
+
+  console.warn = (...args) => {
+    if (typeof args[0] === "string" && 
+        suppressedPatterns.some(pattern => pattern.test(args[0]))) {
+      return;
+    }
+    originalWarn.call(console, ...args);
+  };
+});

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9a07876 and 3e8a996.

⛔ Files ignored due to path filters (1)

src/frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (9)

Makefile (4 hunks)
Makefile.frontend (1 hunks)
src/frontend/jest.config.js (1 hunks)
src/frontend/package.json (3 hunks)
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx (0 hunks)
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx (2 hunks)
src/frontend/src/setupTests.ts (1 hunks)
src/frontend/src/utils/__tests__/markdownUtils.test.ts (1 hunks)
src/frontend/src/utils/markdownUtils.ts (1 hunks)

💤 Files with no reviewable changes (1)

src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx

🧰 Additional context used

📓 Path-based instructions (6)

`src/frontend/**/*.{ts,tsx,js,jsx}`: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.

src/frontend/**/*.{ts,tsx,js,jsx}: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.

📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)