opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-20 09:11:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: toast long error message may caused not show all (#37581)

Browse Source
This commit is contained in:
Joel 2026-06-17 17:50:13 +08:00 committed by GitHub
parent 48452aefbc
commit 1065fe519c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/dify-ui/src/toast/__tests__/index.spec.tsx
View File

@ -100,6 +100,24 @@ describe('@langgenius/dify-ui/toast', () => {
expect(document.body.querySelector('[aria-hidden="true"].i-ri-information-2-fill')).not.toBeInTheDocument()
})
it('should wrap long unbroken toast content within the card width', async () => {
const screen = await render(<ToastHost />)
const longTitle = 'operation error S3: PutObject, exceeded maximum number of attempts, 3, StatusCode: 0, RequestID: , HostID: , request send failed'
const longDescription = 'Put "https://plugin/assets/1bd032bb73218a5d141b80cab7111?x-id=PutObject": dial tcp 192.168.0.200:19000: connect: connection refused, icon small en_US failed to remap assets failed to store plugin asset'
toast.error(longTitle, {
description: longDescription,
})
await expect.element(screen.getByText(longTitle)).toBeInTheDocument()
await expect.element(screen.getByText(longDescription)).toBeInTheDocument()
const title = asHTMLElement(screen.getByText(longTitle).element())
const description = asHTMLElement(screen.getByText(longDescription).element())
expect(title.scrollWidth).toBeLessThanOrEqual(title.clientWidth)
expect(description.scrollWidth).toBeLessThanOrEqual(description.clientWidth)
})
it('should mark overflow toasts as limited when the stack exceeds the configured limit', async () => {
const screen = await render(<ToastHost limit={1} />)

6
packages/dify-ui/src/toast/index.tsx
View File

@ -176,15 +176,15 @@ function ToastCard({
<ToastIcon type={toastType} />
</div>
<div className="min-w-0 flex-1 p-1">
<div className="flex w-full items-center gap-1">
<div className="flex w-full min-w-0 items-center gap-1">
{toastItem.title != null && (
<BaseToast.Title className="system-sm-semibold wrap-break-word text-text-primary">
<BaseToast.Title className="min-w-0 flex-1 system-sm-semibold wrap-break-word [overflow-wrap:anywhere] text-text-primary">
{toastItem.title}
</BaseToast.Title>
)}
</div>
{toastItem.description != null && (
<BaseToast.Description className="mt-1 system-xs-regular wrap-break-word text-text-secondary">
<BaseToast.Description className="mt-1 min-w-0 system-xs-regular wrap-break-word [overflow-wrap:anywhere] text-text-secondary">
{toastItem.description}
</BaseToast.Description>
)}