add switch mode tool

src/components/chat-view/chat-input/ModeSelect.tsx

@@ -0,0 +1,53 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { useSettings } from '../../../contexts/SettingsContext'
+import { modes } from '../../../utils/modes'
+
+export function ModeSelect() {
+	const { settings, setSettings } = useSettings()
+	const [isOpen, setIsOpen] = useState(false)
+	const [mode, setMode] = useState(settings.mode)
+
+	useEffect(() => {
+		setMode(settings.mode)
+	}, [settings.mode])
+
+
+	return (
+		<DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+			<DropdownMenu.Trigger className="infio-chat-input-model-select">
+				<div className="infio-chat-input-model-select__icon">
+					{isOpen ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+				</div>
+				<div className="infio-chat-input-model-select__model-name">
+					{modes.find((m) => m.slug === mode)?.name}
+				</div>
+			</DropdownMenu.Trigger>
+
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content
+					className="infio-popover">
+					<ul>
+						{modes.map((mode) => (
+							<DropdownMenu.Item
+								key={mode.slug}
+								onSelect={() => {
+									setMode(mode.slug)
+									setSettings({
+										...settings,
+										mode: mode.slug,
+									})
+								}}
+								asChild
+							>
+								<li>{mode.name}</li>
+							</DropdownMenu.Item>
+						))}
+					</ul>
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	)
+}

src/components/chat-view/chat-input/ModelSelect.tsx

@@ -18,15 +18,16 @@ export function ModelSelect() {
 			try {
 				const models = await GetProviderModelIds(settings.chatModelProvider)
 				setProviderModels(models)
+				setChatModelId(settings.chatModelId)
 			} catch (error) {
 				console.error('Failed to fetch provider models:', error)
 			} finally {
 				setIsLoading(false)
 			}
 		}
-		
+
 		fetchModels()
-	}, [settings.chatModelProvider])
+	}, [settings])
 
 	return (
 		<DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>

src/components/chat-view/chat-input/PromptInputWithActions.tsx

@@ -30,6 +30,7 @@ import { ImageUploadButton } from './ImageUploadButton'
 import LexicalContentEditable from './LexicalContentEditable'
 import MentionableBadge from './MentionableBadge'
 import { ModelSelect } from './ModelSelect'
+import { ModeSelect } from './ModeSelect'
 import { MentionNode } from './plugins/mention/MentionNode'
 import { NodeMutations } from './plugins/on-mutation/OnMutationPlugin'
 import { SubmitButton } from './SubmitButton'