NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show current model in dropdown

Browse Source
This commit is contained in:
zaidmukaddam 2024-08-10 22:31:34 +05:30
parent de612e56f6
commit 58fad556f6
1 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/page.tsx
View File

@ -98,15 +98,24 @@ export default function Home() {
]; ];
const handleModelChange = (value: string) => { const handleModelChange = (value: string) => {
if (value !== selectedModel) {
if (hasSubmitted) { if (hasSubmitted) {
setNewSelectedModel(value); setNewSelectedModel(value);
setShowConfirmModal(true); setShowConfirmModal(true);
} else { } else {
setSelectedModel(value); setSelectedModel(value);
reload({
body: {
model: value === 'Speed' ? 'gpt-4o-mini' : value === 'Quality (GPT)' ? 'gpt-4o' : 'claude-3-5-sonnet-20240620',
},
});
} }
}
setIsModelSelectorOpen(false);
}; };
const handleConfirmModelChange = () => { const handleConfirmModelChange = () => {
if (newSelectedModel !== selectedModel) {
setSelectedModel(newSelectedModel); setSelectedModel(newSelectedModel);
setShowConfirmModal(false); setShowConfirmModal(false);
setSuggestedQuestions([]); setSuggestedQuestions([]);
@ -115,23 +124,35 @@ export default function Home() {
model: newSelectedModel === 'Speed' ? 'gpt-4o-mini' : newSelectedModel === 'Quality (GPT)' ? 'gpt-4o' : 'claude-3-5-sonnet-20240620', model: newSelectedModel === 'Speed' ? 'gpt-4o-mini' : newSelectedModel === 'Quality (GPT)' ? 'gpt-4o' : 'claude-3-5-sonnet-20240620',
}, },
}); });
} else {
setShowConfirmModal(false);
}
}; };
interface ModelSelectorProps { interface ModelSelectorProps {
selectedModel: string; selectedModel: string;
onModelSelect: (model: string) => void; onModelSelect: (model: string) => void;
isDisabled: boolean;
} }
function ModelSelector({ selectedModel, onModelSelect }: ModelSelectorProps) { function ModelSelector({ selectedModel, onModelSelect, isDisabled }: ModelSelectorProps) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => {
if (!isDisabled) {
setIsOpen(!isOpen);
}
};
return ( return (
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}> <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
variant="outline" variant="outline"
className={`flex items-center p-0 px-2 rounded-full ${selectedModel.includes('Quality') ? 'bg-purple-500 hover:bg-purple-400 !disabled:bg-purple-600 disabled:!opacity-85' : 'bg-green-500 hover:bg-green-400 disabled:!bg-green-600 disabled:!opacity-85'} text-white hover:text-white`} className={`flex items-center p-0 px-2 rounded-full ${selectedModel.includes('Quality') ? 'bg-purple-500 hover:bg-purple-400 !disabled:bg-purple-600 disabled:!opacity-85' : 'bg-green-500 hover:bg-green-400 disabled:!bg-green-600 disabled:!opacity-85'
disabled={isLoading} } text-white hover:text-white`}
disabled={isDisabled}
onClick={handleToggle}
> >
{selectedModel === 'Speed' && <FastForward className="w-5 h-5 mr-2" />} {selectedModel === 'Speed' && <FastForward className="w-5 h-5 mr-2" />}
{selectedModel.includes('Quality') && <Sparkles className="w-5 h-5 mr-2" />} {selectedModel.includes('Quality') && <Sparkles className="w-5 h-5 mr-2" />}
@ -139,18 +160,25 @@ export default function Home() {
<ChevronDown className={`w-5 h-5 ml-2 transform transition-transform ${isOpen ? 'rotate-180' : ''}`} /> <ChevronDown className={`w-5 h-5 ml-2 transform transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className='mr-2'> <DropdownMenuContent className="w-64 p-1">
{models.map((model) => ( {models.map((model) => (
<DropdownMenuItem <DropdownMenuItem
key={model.name} key={model.name}
onSelect={() => onModelSelect(model.name)} onSelect={() => onModelSelect(model.name)}
className="flex items-center p-2 !font-sans" className={`flex items-start p-3 !font-sans rounded-md ${selectedModel === model.name ? 'bg-muted' : ''}`}
> >
<model.icon className={`w-5 h-5 mr-3 ${model.name.includes('Quality') ? 'text-purple-500' : 'text-green-500'}`} /> <model.icon className={`w-5 h-5 mr-3 mt-0.5 flex-shrink-0 ${model.name.includes('Quality') ? 'text-purple-500' : 'text-green-500'}`} />
<div> <div className="flex-grow">
<div className="font-semibold">{model.name}</div> <div className="font-semibold flex items-center justify-between">
<div className="text-sm text-gray-500">{model.description}</div> {model.name}
<div className="text-xs text-gray-400">{model.details}</div> {selectedModel === model.name && (
<span className="text-xs text-white px-2 py-0.5 rounded-full bg-black">
Active
</span>
)}
</div>
<div className="text-sm text-gray-500 mt-0.5">{model.description}</div>
<div className="text-xs text-gray-400 mt-0.5">{model.details}</div>
</div> </div>
</DropdownMenuItem> </DropdownMenuItem>
))} ))}
@ -159,6 +187,7 @@ export default function Home() {
); );
} }
const renderToolInvocation = (toolInvocation: ToolInvocation, index: number) => { const renderToolInvocation = (toolInvocation: ToolInvocation, index: number) => {
const args = JSON.parse(JSON.stringify(toolInvocation.args)); const args = JSON.parse(JSON.stringify(toolInvocation.args));
const result = 'result' in toolInvocation ? JSON.parse(JSON.stringify(toolInvocation.result)) : null; const result = 'result' in toolInvocation ? JSON.parse(JSON.stringify(toolInvocation.result)) : null;
@ -515,7 +544,11 @@ export default function Home() {
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.4 }} transition={{ duration: 0.5, delay: 0.4 }}
> >
<ModelSelector selectedModel={selectedModel} onModelSelect={handleModelChange} /> <ModelSelector
selectedModel={selectedModel}
onModelSelect={handleModelChange}
isDisabled={isLoading}
/>
</motion.div> </motion.div>
</div> </div>
</motion.div> </motion.div>