Skip to content

fix(ai): contain long markdown code blocks#1907

Open
openai0229 wants to merge 2 commits into
mainfrom
fix/1905-long-sql-chat-layout
Open

fix(ai): contain long markdown code blocks#1907
openai0229 wants to merge 2 commits into
mainfrom
fix/1905-long-sql-chat-layout

Conversation

@openai0229

Copy link
Copy Markdown
Contributor

Related issue

Closes #1905

Summary

  • Remove ReactMarkdown's redundant outer pre wrapper around the custom fenced-code renderer.
  • Bound ordinary fenced-code containers to the assistant response width.
  • Keep long unbroken SQL and other code lines horizontally scrollable inside the inner pre without widening the chat page.

Affected surfaces

  • Frontend / Web
  • Backend / API / Storage
  • Database plugin / Driver
  • JCEF / Desktop packaging
  • CI / Build / Release
  • Documentation only

Verification

  • Commands and results:
    • yarn eslint src/blocks/AI/index.tsx src/blocks/AI/style.ts --max-warnings=0 - passed with zero warnings.
    • yarn build:web:community - production Community Web build passed.
    • git diff --check origin/main...HEAD - passed.
  • Manual verification:
    • Used playwright-cli against the Community dev frontend with a mocked SSE response containing one 4705 px SQL line.
    • Checked 1440x900, 1024x768, and 800x700 viewports.
    • At every viewport, document scrollWidth equaled clientWidth, the code block fit the assistant container, and the inner pre retained scrollWidth > clientWidth.
    • Confirmed the assistant response contains one inner pre and no redundant direct outer pre.
  • UI evidence:

Risk and compatibility

  • Public API or stored data: N/A - frontend rendering and layout only.
  • Database or driver compatibility: N/A - no SQL execution or driver behavior changed.
  • Network, privacy, or security: N/A - no request, response, or persistence behavior changed.
  • Community / Local / Pro boundary: Community frontend only; no Enterprise repository changes are included.
  • Backward compatibility: Inline code, SQLPreview, chart fences, copy actions, and ordinary fenced-code rendering remain intact; only the redundant wrapper and overflow sizing change.

Reviewer map

  • Start here: chat2db-community-client/src/blocks/AI/index.tsx at renderMarkdown, then src/blocks/AI/style.ts at codeBlockWrap and codeBlockPre.
  • Failure condition: A long fenced-code line widens the document or assistant response instead of scrolling inside the code block, or fenced SQL/chart/ordinary code stops rendering.
  • Rollback or disable path: Revert commit 78e1beec5dd1c729460c8219cfb1609aa6c2ecf1.

Contributor declaration

  • I linked the Issue that defines this change.
  • I tested the affected behavior and reported the actual results above.
  • I did not include credentials, private data, or generated build output.
  • I disclosed substantial AI assistance below, or this PR contains no substantial AI-generated code.

AI assistance: Substantial AI assistance was used for source tracing, implementation, and Playwright verification; the resulting diff was validated with targeted ESLint, a production Community Web build, and measured browser assertions.

@openai0229

Copy link
Copy Markdown
Contributor Author

CI baseline note:

The Frontend lint, test, and build job in run 29818404687 stopped before ESLint and the Web build at Validate localization catalogs with the existing two errors:

  • es-ES/setting.ts: English source changed; update the translation and its source hash
  • ko-KR/setting.ts: English source changed; update the translation and its source hash

Current main@50302ee23f8be3855c5b154c966aad66d575931e failed in the same step with the same two messages in run 29817549352. This PR changes only src/blocks/AI/index.tsx and src/blocks/AI/style.ts; it does not touch localization catalogs or the validator.

The affected files passed targeted ESLint locally, and yarn build:web:community completed successfully. The unrelated localization baseline repair is intentionally not included in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Long SQL code blocks break the AI chat page layout

1 participant