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

fix: load model error component (#4604)

Browse Source 
* fix: load model error should using error component

* chore: fix linter issue
This commit is contained in:
Faisal Amir 2025-02-07 22:18:21 +07:00 committed by GitHub
parent a70735b8a5
commit 9837d09756
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,13 @@ import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
const ErrorMessage = ({
message,
errorComponent,
}: {
message?: ThreadMessage
errorComponent?: React.ReactNode
}) => {
const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
const setMainState = useSetAtom(mainViewStateAtom)
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
@ -50,7 +56,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
const getErrorTitle = () => {
const engine = getEngine()
switch (message.metadata?.error_code) {
switch (message?.metadata?.error_code) {
case ErrorCode.InvalidApiKey:
case ErrorCode.AuthenticationError:
return (
@ -77,7 +83,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
data-testid="passthrough-error-message"
className="first-letter:uppercase"
>
{message.content[0]?.text?.value === 'Failed to fetch' &&
{message?.content[0]?.text?.value === 'Failed to fetch' &&
engine &&
engine?.name !== InferenceEngine.cortex_llamacpp ? (
<span>
@ -103,7 +109,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
<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}
key={message?.id}
>
<div className="flex justify-between border-b border-inherit px-4 py-2">
<h6 className="flex items-center gap-x-1 font-semibold text-[hsla(var(--destructive-bg))]">
@ -147,7 +153,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
className="font-serif text-xs leading-relaxed text-[hsla(var(--text-secondary))]"
ref={errorDivRef}
>
{getErrorTitle()}
{errorComponent ? errorComponent : getErrorTitle()}
</div>
</div>
</div>

92
web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx
View File

@ -1,6 +1,7 @@
import { EngineManager, InferenceEngine } from '@janhq/core'
import { useAtomValue, useSetAtom } from 'jotai'
import ErrorMessage from '@/containers/ErrorMessage'
import ModalTroubleShooting, {
modalTroubleShootingAtom,
} from '@/containers/ModalTroubleShoot'
@ -20,62 +21,43 @@ const LoadModelError = () => {
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
const activeAssistant = useAtomValue(activeAssistantAtom)
const ErrorMessage = () => {
if (
typeof loadModelError?.includes === 'function' &&
loadModelError.includes('EXTENSION_IS_NOT_INSTALLED')
) {
return (
<p>
Model is currently unavailable. Please switch to a different model or
install the{' '}
<span
className="cursor-pointer font-medium text-[hsla(var(--app-link))]"
onClick={() => {
setMainState(MainViewState.Settings)
if (activeAssistant?.model.engine) {
const engine = EngineManager.instance().get(
InferenceEngine.cortex
)
engine?.name && setSelectedSettingScreen(engine.name)
}
}}
>
{loadModelError.split('::')[1] ?? ''}
</span>{' '}
to continue using it.
</p>
)
} else {
return (
<div className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]">
{loadModelError && (
<p className="first-letter:uppercase">{loadModelError}</p>
)}
<p>
{`Something's wrong.`}&nbsp;Access&nbsp;
<span
className="cursor-pointer text-[hsla(var(--app-link))]"
onClick={() => setModalTroubleShooting(true)}
>
troubleshooting assistance
</span>
&nbsp;now.
</p>
</div>
)
}
}
return (
<div className="flex flex-1">
<div className="flex w-full flex-col items-center text-center font-medium">
<p className="w-[90%]">
<ErrorMessage />
</p>
<ModalTroubleShooting />
</div>
</div>
<ErrorMessage
errorComponent={
<div>
{typeof loadModelError?.includes === 'function' &&
loadModelError.includes('EXTENSION_IS_NOT_INSTALLED') ? (
<>
<p>
Model is currently unavailable. Please switch to a different
model or install the{' '}
<span
className="cursor-pointer font-medium text-[hsla(var(--app-link))]"
onClick={() => {
setMainState(MainViewState.Settings)
if (activeAssistant?.model.engine) {
const engine = EngineManager.instance().get(
InferenceEngine.cortex
)
engine?.name && setSelectedSettingScreen(engine.name)
}
}}
>
{loadModelError.split('::')[1] ?? ''}
</span>{' '}
to continue using it.
</p>
</>
) : (
<>
{loadModelError && (
<p className="first-letter:uppercase">{loadModelError}</p>
)}
</>
)}
</div>
}
/>
)
}
export default LoadModelError