(Feature) Vercel AI SDK (#2024)

examples/vercel-ai-sdk-chat-app/src/components/api-settings-popup.tsx

@@ -0,0 +1,91 @@
+import { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import GlobalContext from '@/contexts/GlobalContext'
+
+export default function ApiSettingsPopup(props: { isOpen: boolean, setIsOpen: Dispatch<SetStateAction<boolean>> }) {
+  const {isOpen, setIsOpen} = props
+  const [mem0ApiKey, setMem0ApiKey] = useState('')
+  const [providerApiKey, setProviderApiKey] = useState('')
+  const [provider, setProvider] = useState('OpenAI')
+  const { selectorHandler, selectedOpenAIKey, selectedMem0Key, selectedProvider } = useContext(GlobalContext);
+
+  const handleSave = () => {
+    // Here you would typically save the settings to your backend or local storage
+    selectorHandler(mem0ApiKey, providerApiKey, provider);
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    if (selectedOpenAIKey) {
+      setProviderApiKey(selectedOpenAIKey);
+    }
+    if (selectedMem0Key) {
+      setMem0ApiKey(selectedMem0Key);
+    }
+    if (selectedProvider) {
+      setProvider(selectedProvider);
+    }
+  }, [selectedOpenAIKey, selectedMem0Key, selectedProvider]);
+  
+
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>API Configuration Settings</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="mem0-api-key" className="text-right">
+                Mem0 API Key
+              </Label>
+              <Input
+                id="mem0-api-key"
+                value={mem0ApiKey}
+                onChange={(e) => setMem0ApiKey(e.target.value)}
+                className="col-span-3 rounded-3xl"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="provider-api-key" className="text-right">
+                Provider API Key
+              </Label>
+              <Input
+                id="provider-api-key"
+                value={providerApiKey}
+                onChange={(e) => setProviderApiKey(e.target.value)}
+                className="col-span-3 rounded-3xl"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="provider" className="text-right">
+                Provider
+              </Label>
+              <Select value={provider} onValueChange={setProvider}>
+                <SelectTrigger className="col-span-3 rounded-3xl">
+                  <SelectValue placeholder="Select provider" />
+                </SelectTrigger>
+                <SelectContent className='rounded-3xl'>
+                  <SelectItem value="openai" className='rounded-3xl'>OpenAI</SelectItem>
+                  <SelectItem value="anthropic" className='rounded-3xl'>Anthropic</SelectItem>
+                  <SelectItem value="cohere" className='rounded-3xl'>Cohere</SelectItem>
+                  <SelectItem value="groq" className='rounded-3xl'>Groq</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button className='rounded-3xl' variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
+            <Button className='rounded-3xl' onClick={handleSave}>Save</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}