Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Standardize inline error messages (#4530)

Browse Source
This commit is contained in:
Faisal Amir 2025-01-28 21:45:46 +07:00 committed by GitHub
parent c46e30d001
commit 261b44d906
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/containers/ErrorMessage/index.test.tsx
View File

@ -69,7 +69,7 @@ describe('ErrorMessage Component', () => {
render(<ErrorMessage message={message} />)
expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument()
expect(screen.getByText('Troubleshooting')).toBeInTheDocument()
})
it('opens troubleshooting modal when link is clicked', () => {
@ -84,7 +84,7 @@ describe('ErrorMessage Component', () => {
render(<ErrorMessage message={message} />)
fireEvent.click(screen.getByText('troubleshooting assistance'))
fireEvent.click(screen.getByText('Troubleshooting'))
expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true)
})
})

93
web/containers/ErrorMessage/index.tsx
View File

@ -1,3 +1,5 @@
import { useRef, useState } from 'react'
import {
EngineManager,
ErrorCode,
@ -7,6 +9,8 @@ import {
import { useAtomValue, useSetAtom } from 'jotai'
import { CheckIcon, ClipboardIcon, SearchCodeIcon } from 'lucide-react'
import AutoLink from '@/containers/AutoLink'
import ModalTroubleShooting, {
modalTroubleShootingAtom,
@ -24,30 +28,25 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
const setMainState = useSetAtom(mainViewStateAtom)
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
const activeAssistant = useAtomValue(activeAssistantAtom)
const defaultDesc = () => {
return (
<>
<p>
{`Something's wrong.`} Access&nbsp;
<span
className="cursor-pointer text-[hsla(var(--app-link))] underline"
onClick={() => setModalTroubleShooting(true)}
>
troubleshooting assistance
</span>
&nbsp;now.
</p>
<ModalTroubleShooting />
</>
)
}
const errorDivRef = useRef<HTMLDivElement>(null)
const [copied, setCopied] = useState(false)
const getEngine = () => {
const engineName = activeAssistant?.model?.engine
return engineName ? EngineManager.instance().get(engineName) : null
}
const handleCopy = () => {
if (errorDivRef.current) {
const errorText = errorDivRef.current.innerText
if (errorText) {
navigator.clipboard.writeText(errorText)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
}
}
const getErrorTitle = () => {
const engine = getEngine()
@ -69,9 +68,9 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
</button>{' '}
and try again.
</span>
{defaultDesc()}
</>
)
default:
return (
<p
@ -90,7 +89,6 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
{message?.content[0]?.text?.value && (
<AutoLink text={message?.content[0]?.text?.value} />
)}
{defaultDesc()}
</>
)}
</p>
@ -99,15 +97,54 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
}
return (
<div className="mx-auto my-6 max-w-[700px]">
{!!message.metadata?.error && (
<div
key={message.id}
className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]"
>
{getErrorTitle()}
<div className="mx-auto my-6 max-w-[700px] px-4">
<div
className="mx-auto max-w-[400px] rounded-lg border border-[hsla(var(--app-border))]"
key={message.id}
>
<div className="flex justify-between border-b border-inherit px-4 py-2">
<h6 className="text-[hsla(var(--destructive-bg))]">Error</h6>
<div className="flex gap-x-4 text-xs">
<div>
<span
className="flex cursor-pointer items-center gap-x-1 text-[hsla(var(--app-link))]"
onClick={() => setModalTroubleShooting(true)}
>
<SearchCodeIcon size={14} className="text-inherit" />
Troubleshooting
</span>
<ModalTroubleShooting />
</div>
<div
className="flex cursor-pointer items-center gap-x-1 text-[hsla(var(--text-secondary))]"
onClick={handleCopy}
>
{copied ? (
<>
<CheckIcon
size={14}
className="text-[hsla(var(--success-bg))]"
/>
Copied
</>
) : (
<>
<ClipboardIcon size={14} className="text-inherit" />
Copy
</>
)}
</div>
</div>
</div>
)}
<div className="max-h-[80px] w-full overflow-x-auto p-4 py-2">
<div
className="text-xs leading-relaxed text-[hsla(var(--text-secondary))]"
ref={errorDivRef}
>
{getErrorTitle()}
</div>
</div>
</div>
</div>
)
}