Skip to content

Conversation

@Cristhianzl
Copy link
Member

@Cristhianzl Cristhianzl commented Jan 7, 2026

This pull request refactors how code blocks are detected and rendered in markdown content across the frontend, introducing utility functions for consistent logic and improving maintainability. It also adds comprehensive unit tests for these utilities. The main changes are as follows:

Code block detection and rendering improvements:

  • Introduced new utility functions isCodeBlock and extractLanguage in codeBlockUtils.ts to standardize detection of code blocks and extraction of language identifiers.
  • Replaced previous inline code block detection logic in ContentDisplay.tsx, edit-message.tsx, and content-view.tsx with calls to the new utility functions, simplifying the code and ensuring consistent behavior across components. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Testing:

  • Added a comprehensive test suite for isCodeBlock and extractLanguage in codeBlockUtils.test.ts, covering various edge cases and ensuring robust behavior.

Other:

  • Minor update to a regression test to ensure the OpenAI API key is filled from the environment variable.

Summary by CodeRabbit

Release Notes

  • New Features

    • Enhanced code block detection with automatic programming language identification for improved syntax highlighting across chat messages and content displays
  • Tests

    • Added comprehensive test coverage for code block detection and language extraction utilities, validating behavior across edge cases and various input scenarios

✏️ Tip: You can customize this high-level summary in your review settings.

@Cristhianzl Cristhianzl self-assigned this Jan 7, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 7, 2026

Walkthrough

This change introduces dedicated utility functions (isCodeBlock and extractLanguage) to centralize code-block detection logic and language extraction. The utilities replace ad-hoc inline detection patterns across three component files, with comprehensive test coverage added.

Changes

Cohort / File(s) Summary
Code Block Utilities
src/frontend/src/utils/codeBlockUtils.ts, src/frontend/src/utils/__tests__/codeBlockUtils.test.ts
Adds isCodeBlock(className, props, content) function to detect code blocks via language-class names, data-language attributes, or content newlines. Adds extractLanguage(className) to extract language identifiers from language-class strings. Includes comprehensive test coverage for edge cases (null/undefined props, empty strings, newlines, carriage returns, multiple languages).
Component Refactoring
src/frontend/src/components/core/chatComponents/ContentDisplay.tsx, src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/content-view.tsx, src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
Replace ad-hoc inline-code detection with isCodeBlock utility check; use extractLanguage for language determination. When code block is detected, render SimplifiedCodeTabComponent or CodeTabsComponent with extracted language; otherwise render standard <code> element. Removes prior inline-detection flags and regex-based language parsing.
Test Updates
src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
Adds step to fill API key input (popover-anchor-input-api_key) with OPENAI_API_KEY environment variable in regression test.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 6 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (6 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Test Coverage For New Implementations ✅ Passed Comprehensive test coverage for utility functions with 29 substantive test cases covering normal operations, negative cases, and edge cases.
Test Quality And Coverage ✅ Passed Test file demonstrates excellent quality with 29+ comprehensive test cases covering both positive/negative scenarios, edge cases, and proper Jest patterns.
Test File Naming And Structure ✅ Passed The pull request properly follows all test file naming and structure requirements with comprehensive test coverage for both unit and integration tests.
Excessive Mock Usage Warning ✅ Passed The test file contains zero mock usage, which is entirely appropriate for testing pure utility functions with no external dependencies.
Title check ✅ Passed The title accurately describes the main refactoring effort to extract code block detection logic into shared utilities, matching the core objective of the PR.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch cz/fix-gen-bug-3

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added the bug Something isn't working label Jan 7, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Jan 7, 2026

Frontend Unit Test Coverage Report

Coverage Summary

Lines Statements Branches Functions
Coverage: 17%
16.87% (4771/28268) 10.35% (2260/21824) 11.15% (692/6203)

Unit Test Results

Tests Skipped Failures Errors Time
1870 0 💤 0 ❌ 0 🔥 25.929s ⏱️

@codecov
Copy link

codecov bot commented Jan 7, 2026

Codecov Report

❌ Patch coverage is 36.00000% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 33.70%. Comparing base (17872f6) to head (34dd7d8).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
.../components/core/chatComponents/ContentDisplay.tsx 0.00% 8 Missing ⚠️
...s/chatView/chatMessage/components/content-view.tsx 0.00% 4 Missing ⚠️
...s/chatView/chatMessage/components/edit-message.tsx 0.00% 4 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main   #11222   +/-   ##
=======================================
  Coverage   33.69%   33.70%           
=======================================
  Files        1399     1400    +1     
  Lines       66301    66309    +8     
  Branches     9788     9785    -3     
=======================================
+ Hits        22341    22350    +9     
+ Misses      42820    42819    -1     
  Partials     1140     1140           
Flag Coverage Δ
frontend 15.54% <36.00%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
src/frontend/src/utils/codeBlockUtils.ts 100.00% <100.00%> (ø)
...s/chatView/chatMessage/components/content-view.tsx 0.00% <0.00%> (ø)
...s/chatView/chatMessage/components/edit-message.tsx 0.00% <0.00%> (ø)
.../components/core/chatComponents/ContentDisplay.tsx 0.00% <0.00%> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Jan 7, 2026
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts (1)

14-21: Environment variable may not be loaded when skip check runs.

The test.skip check at line 15 evaluates process.env.OPENAI_API_KEY before dotenv.config() is called at line 20. In non-CI local environments, this could cause the test to skip even when the key exists in .env.

Consider moving dotenv.config() before the skip check:

Proposed fix
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   test.skip(
     !process?.env?.OPENAI_API_KEY,
     "OPENAI_API_KEY required to run this test",
   );
-
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
🧹 Nitpick comments (1)
src/frontend/src/components/core/chatComponents/ContentDisplay.tsx (1)

175-189: Variable shadowing: content reused in nested scope.

The variable content at line 176 shadows the outer content parameter (of type ContentType). While this works correctly at runtime, it reduces readability and could cause confusion during maintenance.

Consider renaming to codeContent or similar:

Suggested improvement
               code: ({ node, className, children, ...props }) => {
-                const content = String(children);
-                if (isCodeBlock(className, props, content)) {
+                const codeContent = String(children);
+                if (isCodeBlock(className, props, codeContent)) {
                   return (
                     <SimplifiedCodeTabComponent
                       language={extractLanguage(className)}
-                      code={content.replace(/\n$/, "")}
+                      code={codeContent.replace(/\n$/, "")}
                     />
                   );
                 }

@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Jan 7, 2026
@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Jan 7, 2026
@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Jan 7, 2026
@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Jan 7, 2026
@Cristhianzl Cristhianzl changed the title fix: Extract code block detection into shared utilities test: Extract code block detection into shared utilities Jan 7, 2026
@github-actions github-actions bot added test Changes to tests and removed bug Something isn't working labels Jan 7, 2026
Copy link
Collaborator

@Adam-Aghili Adam-Aghili left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions github-actions bot added the lgtm This PR has been approved by a maintainer label Jan 7, 2026
@Cristhianzl Cristhianzl merged commit 7e77cd1 into main Jan 7, 2026
130 of 132 checks passed
@Cristhianzl Cristhianzl deleted the cz/fix-gen-bug-3 branch January 7, 2026 17:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer test Changes to tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants