Skip to content

♻️ refactor: use @lobehub/ui built-in HtmlPreview instead of custom component#14703

Merged
arvinxx merged 6 commits into
canaryfrom
feat/html-preview-lobe-ui
May 12, 2026
Merged

♻️ refactor: use @lobehub/ui built-in HtmlPreview instead of custom component#14703
arvinxx merged 6 commits into
canaryfrom
feat/html-preview-lobe-ui

Conversation

@arvinxx

@arvinxx arvinxx commented May 12, 2026

Copy link
Copy Markdown
Member

Summary

Replace the custom HtmlPreviewAction with lobe-ui's built-in HtmlPreview component (available since v5.10.4).

Changes

  • Upgrade @lobehub/ui from ^5.10.1 to ^5.10.4
  • Remove HtmlPreviewAction.tsx - lobe-ui's built-in HtmlPreview handles inline preview + Expand button
  • Replace componentProps.highlight.actionsRender hack with clean enableHtmlPreview: true
  • Wire lobe-ui's HtmlPreview.onExpand callback to the existing HtmlPreviewDrawer for full-screen viewing

Architecture

Before (custom):
CodeBlock -> Highlighter actionsRender -> HtmlPreviewAction(Eye) -> HtmlPreviewDrawer(iframe)

After (lobe-ui built-in):
CodeBlock -> lobe-ui HtmlPreview (inline iframe + Preview/Source toggle + Expand) -> onExpand -> HtmlPreviewDrawer (full-screen Drawer)

Benefits

  • Inline HTML preview directly in chat - no extra click needed
  • Streaming-aware iframe mounting (defer/live/auto modes)
  • Auto-detection of HTML documents vs fragments
  • Built-in Copy / Download / Expand / Preview-Source toggle
  • Reduced maintenance - 60 lines removed

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Sorry, we are unable to review this pull request

The GitHub API does not allow us to fetch diffs exceeding 300 files, and this pull request has 610

@vercel

vercel Bot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
lobehub Ready Ready Preview, Comment May 12, 2026 4:54pm

Request Review

@dosubot dosubot Bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label May 12, 2026
@codecov

codecov Bot commented May 12, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.13%. Comparing base (a5ea379) to head (33f2b52).
⚠️ Report is 4 commits behind head on canary.

Additional details and impacted files
@@             Coverage Diff             @@
##           canary   #14703       +/-   ##
===========================================
- Coverage   81.92%   66.13%   -15.79%     
===========================================
  Files         672     2913     +2241     
  Lines       45022   255801   +210779     
  Branches     6707    31129    +24422     
===========================================
+ Hits        36883   169184   +132301     
- Misses       7986    86464    +78478     
  Partials      153      153               
Flag Coverage Δ
app 60.55% <ø> (?)
database 91.83% <ø> (?)
packages/agent-runtime 80.48% <ø> (ø)
packages/builtin-tool-lobe-agent 83.41% <ø> (ø)
packages/context-engine 83.99% <ø> (ø)
packages/conversation-flow 92.43% <ø> (ø)
packages/file-loaders 87.60% <ø> (ø)
packages/memory-user-memory 74.74% <ø> (ø)
packages/model-bank 99.94% <ø> (ø)
packages/model-runtime 83.72% <ø> (ø)
packages/prompts 70.39% <ø> (ø)
packages/python-interpreter 92.90% <ø> (ø)
packages/ssrf-safe-fetch 0.00% <ø> (ø)
packages/types 5.44% <ø> (ø)
packages/utils 88.02% <ø> (ø)
packages/web-crawler 87.74% <ø> (ø)

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

Components Coverage Δ
Store 66.95% <ø> (∅)
Services 54.16% <ø> (∅)
Server 71.40% <ø> (∅)
Libs 56.16% <ø> (∅)
Utils 82.65% <ø> (-10.82%) ⬇️
🚀 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.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 69bd419d8d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +75 to +80
if (extension && !isReadableFileType(extension)) {
return buildErrorResult(
filePath,
`Error: Unsupported binary file type: .${extension}. Use a different tool (e.g., 'runCommand' with file/hexdump/strings) to inspect binary files.`,
);
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow text files outside the extension whitelist

For local readFile, this new early return rejects any file whose extension is not in isReadableFileType before the binary sniffer or loadFile can inspect it. That regresses common plaintext project files such as Cargo.lock, Gemfile.lock, .proto, or .graphql: they now return “Unsupported binary file type” even though they are safe text and previously fell through to the text loader. Consider sniffing first and only refusing files that actually look binary, or broadening the text allowlist substantially.

Useful? React with 👍 / 👎.

@arvinxx arvinxx changed the base branch from main to canary May 12, 2026 05:20
@dosubot dosubot Bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XXL This PR changes 1000+ lines, ignoring generated files. labels May 12, 2026
@arvinxx arvinxx force-pushed the feat/html-preview-lobe-ui branch from 69bd419 to 15099bd Compare May 12, 2026 09:53
@dosubot dosubot Bot added size:M This PR changes 30-99 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels May 12, 2026
arvinxx and others added 4 commits May 13, 2026 00:16
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
confirmDone signals the terminal transition (task marked complete),
not just dismissing the brief, so 已阅 loses the semantic distinction
from `confirm`. Use 确认完成 to match the EN intent ("Confirm complete").

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…omponent

- Upgrade @lobehub/ui from ^5.10.1 to ^5.10.4
- Replace custom HtmlPreviewAction with lobe-ui's enableHtmlPreview
- Wire lobe-ui's onExpand callback to existing HtmlPreviewDrawer
- Remove HtmlPreviewAction.tsx (no longer needed)
- Keep HtmlPreviewDrawer for the expanded full-screen view
arvinxx and others added 2 commits May 13, 2026 00:41
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@dosubot dosubot Bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels May 12, 2026
@arvinxx arvinxx merged commit 4ffce4f into canary May 12, 2026
49 of 50 checks passed
@arvinxx arvinxx deleted the feat/html-preview-lobe-ui branch May 12, 2026 17:08
arvinxx added a commit that referenced this pull request May 12, 2026
…nent (#14703)

* 💄 style(home,i18n): use 已阅 for brief confirm/confirmDone in zh-CN

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* 🐛 fix(home): use 确认完成 for brief.action.confirmDone in zh-CN

confirmDone signals the terminal transition (task marked complete),
not just dismissing the brief, so 已阅 loses the semantic distinction
from `confirm`. Use 确认完成 to match the EN intent ("Confirm complete").

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* ♻️ refactor: use @lobehub/ui built-in HtmlPreview instead of custom component

- Upgrade @lobehub/ui from ^5.10.1 to ^5.10.4
- Replace custom HtmlPreviewAction with lobe-ui's enableHtmlPreview
- Wire lobe-ui's onExpand callback to existing HtmlPreviewDrawer
- Remove HtmlPreviewAction.tsx (no longer needed)
- Keep HtmlPreviewDrawer for the expanded full-screen view

* 🐛 fix(task): sync useMarkdown destructuring with assistant MessageContent

* 🐛 fix(task): correct mangled search.X JSX expressions in MessageContent

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* 💄 style(review): move revert icon to right edge of file row

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
lezi-fun pushed a commit to lezi-fun/lobehub that referenced this pull request May 13, 2026
…nent (lobehub#14703)

* 💄 style(home,i18n): use 已阅 for brief confirm/confirmDone in zh-CN

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* 🐛 fix(home): use 确认完成 for brief.action.confirmDone in zh-CN

confirmDone signals the terminal transition (task marked complete),
not just dismissing the brief, so 已阅 loses the semantic distinction
from `confirm`. Use 确认完成 to match the EN intent ("Confirm complete").

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* ♻️ refactor: use @lobehub/ui built-in HtmlPreview instead of custom component

- Upgrade @lobehub/ui from ^5.10.1 to ^5.10.4
- Replace custom HtmlPreviewAction with lobe-ui's enableHtmlPreview
- Wire lobe-ui's onExpand callback to existing HtmlPreviewDrawer
- Remove HtmlPreviewAction.tsx (no longer needed)
- Keep HtmlPreviewDrawer for the expanded full-screen view

* 🐛 fix(task): sync useMarkdown destructuring with assistant MessageContent

* 🐛 fix(task): correct mangled search.X JSX expressions in MessageContent

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* 💄 style(review): move revert icon to right edge of file row

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
arvinxx added a commit that referenced this pull request May 15, 2026
…#14811)

PR #14703 wired @lobehub/ui's `enableHtmlPreview` into the Assistant
useMarkdown but missed the AssistantGroup path, so any full HTML
document the LLM emits in a grouped step rendered as a plain code
block instead of an iframe preview.

Extract the shared markdown wiring (components, plugins, animated,
HtmlPreviewDrawer) into useChatMarkdown so both paths use the same
configuration and the next markdown feature won't drift between them.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant