114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { createFileRoute, useSearch } from '@tanstack/react-router'
|
|
import ChatInput from '@/containers/ChatInput'
|
|
import HeaderPage from '@/containers/HeaderPage'
|
|
import { useTranslation } from '@/i18n/react-i18next-compat'
|
|
import { useTools } from '@/hooks/useTools'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
import { useModelProvider } from '@/hooks/useModelProvider'
|
|
import SetupScreen from '@/containers/SetupScreen'
|
|
import { route } from '@/constants/routes'
|
|
|
|
type SearchParams = {
|
|
model?: {
|
|
id: string
|
|
provider: string
|
|
}
|
|
}
|
|
import DropdownAssistant from '@/containers/DropdownAssistant'
|
|
import { useEffect } from 'react'
|
|
import { useThreads } from '@/hooks/useThreads'
|
|
import { useMobileScreen } from '@/hooks/useMediaQuery'
|
|
import { PlatformFeatures } from '@/lib/platform/const'
|
|
import { PlatformFeature } from '@/lib/platform/types'
|
|
|
|
export const Route = createFileRoute(route.home as any)({
|
|
component: Index,
|
|
validateSearch: (search: Record<string, unknown>): SearchParams => ({
|
|
model: search.model as SearchParams['model'],
|
|
}),
|
|
})
|
|
|
|
function Index() {
|
|
const { t } = useTranslation()
|
|
const { providers } = useModelProvider()
|
|
const search = useSearch({ from: route.home as any })
|
|
const selectedModel = search.model
|
|
const { setCurrentThreadId } = useThreads()
|
|
const isMobile = useMobileScreen()
|
|
useTools()
|
|
|
|
// Conditional to check if there are any valid providers
|
|
// required min 1 api_key or 1 model in llama.cpp or jan provider
|
|
const hasValidProviders = providers.some(
|
|
(provider) =>
|
|
provider.api_key?.length ||
|
|
(provider.provider === 'llamacpp' && provider.models.length) ||
|
|
(provider.provider === 'jan' && provider.models.length)
|
|
)
|
|
|
|
useEffect(() => {
|
|
setCurrentThreadId(undefined)
|
|
}, [setCurrentThreadId])
|
|
|
|
if (!hasValidProviders) {
|
|
return <SetupScreen />
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full flex-col justify-center pb-[calc(env(safe-area-inset-bottom)+env(safe-area-inset-top))]">
|
|
<HeaderPage>
|
|
{PlatformFeatures[PlatformFeature.ASSISTANTS] && <DropdownAssistant />}
|
|
</HeaderPage>
|
|
<div
|
|
className={cn(
|
|
'h-full overflow-y-auto flex flex-col gap-2 justify-center px-3 sm:px-4 md:px-8 py-4 md:py-0'
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'mx-auto',
|
|
// Full width on mobile, constrained on desktop
|
|
isMobile ? 'w-full max-w-full' : 'w-full md:w-4/6'
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'text-center',
|
|
// Adjust spacing for mobile
|
|
isMobile ? 'mb-6' : 'mb-8'
|
|
)}
|
|
>
|
|
<h1
|
|
className={cn(
|
|
'font-editorialnew text-main-view-fg',
|
|
// Responsive title size
|
|
isMobile ? 'text-2xl sm:text-3xl' : 'text-4xl'
|
|
)}
|
|
>
|
|
{t('chat:welcome')}
|
|
</h1>
|
|
<p
|
|
className={cn(
|
|
'text-main-view-fg/70 mt-2',
|
|
// Responsive description size
|
|
isMobile ? 'text-base' : 'text-lg'
|
|
)}
|
|
>
|
|
{t('chat:description')}
|
|
</p>
|
|
</div>
|
|
<div className="flex-1 shrink-0">
|
|
<ChatInput
|
|
showSpeedToken={false}
|
|
model={selectedModel}
|
|
initialMessage={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|