💄 style: The error details of the connectivity check lead to a layout problem #9872

EldestBard · 2025-10-25T07:19:25Z

💻 Change Type

🔗 Related Issue

🔀 Description of Change

This PR introduces a maxWidth to the Error component within the ProviderChecker and add warp on Highlighter. This ensures that long error messages wrap correctly and do not overflow, improving the overall layout and user experience when connection or configuration issues arise.

🧪 How to Test

Tested locally
Added/updated tests
No tests needed

To test:

Navigate to Settings -> Language Model.
Select a provider that is incorrectly configured (e.g., enter a wrong API key or endpoint).
Trigger the checker.
Observe that the displayed error message is properly constrained within the component's bounds.

📸 Screenshots / Videos

📝 Additional Information

This is a minor UI fix to enhance the robustness of the provider settings interface.

Summary by Sourcery

Improve the ProviderChecker UI by adding width constraints and wrapping for error messages to avoid layout issues when displaying long error details.

Bug Fixes:

Constrain the error details container width and enable text wrapping to prevent layout overflow during connectivity checks.

Enhancements:

Add a maxWidth style to the Error component and enable Highlighter wrapping for long error messages in the ProviderChecker.

vercel · 2025-10-25T07:19:29Z

Someone is attempting to deploy a commit to the LobeHub Community Team on Vercel.

A member of the Team first needs to authorize it.

sourcery-ai · 2025-10-25T07:19:31Z

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

This PR addresses layout overflow by constraining the error display container’s width and enabling text wrapping for long JSON error messages in the Highlighter component.

Class diagram for updated Error and Highlighter components

classDiagram
  class Error {
    +error: ChatMessageError
    +providerName: string
    +maxWidth: 600px
  }
  class Highlighter {
    +actionIconSize: string
    +language: string
    +variant: string
    +wrap: boolean
  }
  Error --> Highlighter : uses

File-Level Changes

Change	Details	Files
Limit the width of the error display container	Add maxWidth: 600 to Flexbox style Retain full width via width: '100%'	`src/app/[variants]/(main)/settings/provider/features/ProviderConfig/Checker.tsx`
Enable text wrapping in Highlighter	Introduce wrap={true} prop on Highlighter Adjust JSX formatting to include the new prop	`src/app/[variants]/(main)/settings/provider/features/ProviderConfig/Checker.tsx`

Possibly linked issues

When configuring AI service providers, expanding error details in 'connectivity check' causes incomplete information display and UI layout issues #9869: The PR adds maxWidth and wrap to error display components, resolving the UI overflow caused by long error messages in the connectivity check as described in the issue.

Tips and commands

Interacting with Sourcery

Trigger a new review: Comment @sourcery-ai review on the pull request.
Continue discussions: Reply directly to Sourcery's review comments.
Generate a GitHub issue from a review comment: Ask Sourcery to create an
issue from a review comment by replying to it. You can also reply to a
review comment with @sourcery-ai issue to create an issue from it.
Generate a pull request title: Write @sourcery-ai anywhere in the pull
request title to generate a title at any time. You can also comment
@sourcery-ai title on the pull request to (re-)generate the title at any time.
Generate a pull request summary: Write @sourcery-ai summary anywhere in
the pull request body to generate a PR summary at any time exactly where you
want it. You can also comment @sourcery-ai summary on the pull request to
(re-)generate the summary at any time.
Generate reviewer's guide: Comment @sourcery-ai guide on the pull
request to (re-)generate the reviewer's guide at any time.
Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
pull request to resolve all Sourcery comments. Useful if you've already
addressed all the comments and don't want to see them anymore.
Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
request to dismiss all existing Sourcery reviews. Especially useful if you
want to start fresh with a new review - don't forget to comment
@sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

Enable or disable review features such as the Sourcery-generated pull request
summary, the reviewer's guide, and others.
Change the review language.
Add, remove or edit custom review instructions.
Adjust other review settings.

Getting Help

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

gru-agent · 2025-10-25T07:19:37Z

TestGru Assignment

Summary

Link	CommitId	Status	Reason
Detail	`ac6a6f1`	🚫 Skipped	No files need to be tested {"src/app/[variants]/(main)/settings/provider/features/ProviderConfig/Checker.tsx":"File path does not match include patterns."}

History Assignment

Tip

You can @gru-agent and leave your feedback. TestGru will make adjustments based on your input

lobehubbot · 2025-10-25T07:19:39Z

👍 @EldestBard

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.

sourcery-ai

Hey there - I've reviewed your changes and they look great!

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

arvinxx · 2025-10-26T03:32:52Z

What is the difference between Before and After?

This comment was translated by Claude.

Original Content

Before 和 After 的区别是什么

EldestBard · 2025-10-26T11:22:03Z

Before:

After:

cc @arvinxx

codecov · 2025-10-27T09:13:20Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.49%. Comparing base (26533b4) to head (ac6a6f1).
⚠️ Report is 29 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##             main    #9872     +/-   ##
=========================================
  Coverage   84.49%   84.49%             
=========================================
  Files         946      946             
  Lines       64890    64890             
  Branches     7985     9389   +1404     
=========================================
  Hits        54829    54829             
  Misses      10061    10061

Flag	Coverage Δ
app	`80.06% <ø> (ø)`
database	`98.40% <ø> (ø)`
packages/agent-runtime	`98.37% <ø> (ø)`
packages/context-engine	`93.58% <ø> (ø)`
packages/electron-server-ipc	`93.76% <ø> (ø)`
packages/file-loaders	`92.21% <ø> (ø)`
packages/model-bank	`100.00% <ø> (ø)`
packages/model-runtime	`92.16% <ø> (ø)`
packages/prompts	`77.21% <ø> (ø)`
packages/python-interpreter	`96.50% <ø> (ø)`
packages/utils	`94.50% <ø> (ø)`
packages/web-crawler	`97.07% <ø> (ø)`

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

Components	Coverage Δ
Store	`74.40% <ø> (ø)`
Services	`61.69% <ø> (ø)`
Server	`77.39% <ø> (ø)`
Libs	`50.82% <ø> (ø)`
Utils	`75.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.

lobehubbot · 2025-10-27T09:20:58Z

❤️ Great PR @EldestBard ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.

### [Version 1.142.4](v1.142.3...v1.142.4) <sup>Released on **2025-10-27**</sup> #### 💄 Styles - **misc**: Pre render ModelSwitchPanel, The error details of the connectivity check lead to a layout problem. <br/> <details> <summary><kbd>Improvements and Fixes</kbd></summary> #### Styles * **misc**: Pre render ModelSwitchPanel, closes [#9499](#9499) ([840382b](840382b)) * **misc**: The error details of the connectivity check lead to a layout problem, closes [#9872](#9872) ([ea42e60](ea42e60)) </details> <div align="right"> [![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) </div>

lobehubbot · 2025-10-27T09:36:27Z

🎉 This PR is included in version 1.142.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

daryl saxton added 2 commits October 25, 2025 14:53

give ProviderChecker's Error component a maxWidth

26f17ff

add warp property to Highlighter

ac6a6f1

dosubot bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Oct 25, 2025

dosubot bot added the 💄 Design Design and style issues label Oct 25, 2025

sourcery-ai bot reviewed Oct 25, 2025

View reviewed changes

arvinxx changed the title ~~🐛 fix: The error details of the connectivity check lead to a layout problem.~~ 💄 style: The error details of the connectivity check lead to a layout problem. Oct 27, 2025

arvinxx changed the title ~~💄 style: The error details of the connectivity check lead to a layout problem.~~ 💄 style: The error details of the connectivity check lead to a layout problem Oct 27, 2025

arvinxx merged commit ea42e60 into lobehub:main Oct 27, 2025
41 of 45 checks passed

lobehubbot added the released label Oct 27, 2025

Uh oh!

Uh oh!

💄 style: The error details of the connectivity check lead to a layout problem #9872

💄 style: The error details of the connectivity check lead to a layout problem #9872

Conversation

EldestBard commented Oct 25, 2025 • edited by arvinxx Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💻 Change Type

🔗 Related Issue

🔀 Description of Change

🧪 How to Test

📸 Screenshots / Videos

📝 Additional Information

Summary by Sourcery

Uh oh!

vercel bot commented Oct 25, 2025

Uh oh!

sourcery-ai bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer's Guide

Class diagram for updated Error and Highlighter components

File-Level Changes

Possibly linked issues

Interacting with Sourcery

Customizing Your Experience

Getting Help

Uh oh!

gru-agent bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TestGru Assignment

Summary

Uh oh!

lobehubbot commented Oct 25, 2025

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

arvinxx commented Oct 26, 2025 • edited by lobehubbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EldestBard commented Oct 26, 2025

Uh oh!

codecov bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

lobehubbot commented Oct 27, 2025

Uh oh!

lobehubbot commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

EldestBard commented Oct 25, 2025 •

edited by arvinxx

Loading

sourcery-ai bot commented Oct 25, 2025 •

edited

Loading

gru-agent bot commented Oct 25, 2025 •

edited

Loading

arvinxx commented Oct 26, 2025 •

edited by lobehubbot

Loading

codecov bot commented Oct 27, 2025 •

edited

Loading