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

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

@ -1,3 +1,5 @@
import { useRef, useState } from 'react'
import { import {
EngineManager, EngineManager,
ErrorCode, ErrorCode,
@ -7,6 +9,8 @@ import {
import { useAtomValue, useSetAtom } from 'jotai' import { useAtomValue, useSetAtom } from 'jotai'
import { CheckIcon, ClipboardIcon, SearchCodeIcon } from 'lucide-react'
import AutoLink from '@/containers/AutoLink' import AutoLink from '@/containers/AutoLink'
import ModalTroubleShooting, { import ModalTroubleShooting, {
modalTroubleShootingAtom, modalTroubleShootingAtom,
@ -24,30 +28,25 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
const setMainState = useSetAtom(mainViewStateAtom) const setMainState = useSetAtom(mainViewStateAtom)
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom) const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
const activeAssistant = useAtomValue(activeAssistantAtom) const activeAssistant = useAtomValue(activeAssistantAtom)
const errorDivRef = useRef<HTMLDivElement>(null)
const defaultDesc = () => { const [copied, setCopied] = useState(false)
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 getEngine = () => { const getEngine = () => {
const engineName = activeAssistant?.model?.engine const engineName = activeAssistant?.model?.engine
return engineName ? EngineManager.instance().get(engineName) : null 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 getErrorTitle = () => {
const engine = getEngine() const engine = getEngine()
@ -69,9 +68,9 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
</button>{' '} </button>{' '}
and try again. and try again.
</span> </span>
{defaultDesc()}
</> </>
) )
default: default:
return ( return (
<p <p
@ -90,7 +89,6 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
{message?.content[0]?.text?.value && ( {message?.content[0]?.text?.value && (
<AutoLink text={message?.content[0]?.text?.value} /> <AutoLink text={message?.content[0]?.text?.value} />
)} )}
{defaultDesc()}
</> </>
)} )}
</p> </p>
@ -99,15 +97,54 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
} }
return ( return (
<div className="mx-auto my-6 max-w-[700px]"> <div className="mx-auto my-6 max-w-[700px] px-4">
{!!message.metadata?.error && ( <div
<div className="mx-auto max-w-[400px] rounded-lg border border-[hsla(var(--app-border))]"
key={message.id} key={message.id}
className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]" >
> <div className="flex justify-between border-b border-inherit px-4 py-2">
{getErrorTitle()} <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>
)} <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> </div>
) )
} }