Function Settings

frontend/src/components/Settings.tsx:74–367

({ trigger }: { trigger: JSX.Element })

}

export default function Settings({ trigger }: { trigger: JSX.Element }) {
	const { isPending, isError, error, data } = useQuery({
		queryKey: ['models'],
		queryFn: getModels
	})
	const [language, setLanguage] = useState(i18n.language)
	const [searchParams] = useSearchParams()
	const [model, setModel] = useAtom(modelAtom)
	const [systemPrompt, setSystemPrompt] = useAtom(systemPromptAtom)
	const [temperature, setTemperature] = useAtom(temperatureAtom)
	const [darkMode, setDarkMode] = useAtom(darkModeAtom)
	const [modelSupportsImages, setModelSupportsImages] = useAtom(
		modelSupportsImagesAtom
	)
	const [modelSupportsImagesOverrides, setModelSupportsImagesOverrides] =
		useAtom(modelSupportsImagesOverridesAtom)

	useEffect(() => {
		if (error) {
			console.error('Error fetching models', error)
		}
	}, [error])

	// Default to another model if no OpenAI models are available
	useEffect(() => {
		if (searchParams.get('dummy')) {
			const available = ['bad']
			setModel(
				`dummy/${available.includes(searchParams.get('dummy') ?? '') ? searchParams.get('dummy') : 'good'}`
			)
		} else if (data && data.openai.length === 0 && model.startsWith('gpt')) {
			if (data.groq.length > 0) {
				// Defaulting to the 3rd model which is currently llama3-70b
				setModel(`groq/${data.groq[2].id}`)
			} else if (data.ollama.length > 0) {
				setModel(`ollama/${data.ollama[0].model}`)
			} else if (data.litellm.length > 0) {
				setModel(`litellm/${data.litellm[0].id}`)
			}
		}
		const override = modelSupportsImagesOverrides[model]
		if (override === undefined) {
			setModelSupportsImages(
				knownImageModels.some(regex => {
					let cleanName = model
					if (cleanName.includes('/')) {
						cleanName = model.split('/').slice(1).join('/')
					}
					return regex.test(cleanName)
				})
			)
		} else {
			setModelSupportsImages(override)
		}
	}, [
		data,
		setModel,
		model,