add api key

pages/api/chat.ts

@@ -7,9 +7,10 @@ export const config = {
 
 const handler = async (req: Request): Promise<Response> => {
   try {
-    const { model, messages } = (await req.json()) as {
+    const { model, messages, key } = (await req.json()) as {
       model: OpenAIModel;
       messages: Message[];
+      key: string;
     };
 
     const charLimit = 12000;
@@ -25,7 +26,7 @@ const handler = async (req: Request): Promise<Response> => {
       messagesToSend.push(message);
     }
 
-    const stream = await OpenAIStream(model, messagesToSend);
+    const stream = await OpenAIStream(model, key, messagesToSend);
 
     return new Response(stream);
   } catch (error) {

pages/index.tsx

@@ -13,6 +13,7 @@ export default function Home() {
   const [lightMode, setLightMode] = useState<"dark" | "light">("dark");
   const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
   const [showSidebar, setShowSidebar] = useState<boolean>(true);
+  const [apiKey, setApiKey] = useState<string>("");
 
   const handleSend = async (message: Message) => {
     if (selectedConversation) {
@@ -32,7 +33,8 @@ export default function Home() {
         },
         body: JSON.stringify({
           model,
-          messages: updatedConversation.messages
+          messages: updatedConversation.messages,
+          key: apiKey
         })
       });
 
@@ -184,12 +186,22 @@ export default function Home() {
     }
   };
 
+  const handleApiKeyChange = (apiKey: string) => {
+    setApiKey(apiKey);
+    localStorage.setItem("apiKey", apiKey);
+  };
+
   useEffect(() => {
     const theme = localStorage.getItem("theme");
     if (theme) {
       setLightMode(theme as "dark" | "light");
     }
 
+    const apiKey = localStorage.getItem("apiKey");
+    if (apiKey) {
+      setApiKey(apiKey);
+    }
+
     const conversationHistory = localStorage.getItem("conversationHistory");
 
     if (conversationHistory) {
@@ -234,12 +246,14 @@ export default function Home() {
               conversations={conversations}
               lightMode={lightMode}
               selectedConversation={selectedConversation}
+              apiKey={apiKey}
               onToggleLightMode={handleLightMode}
               onNewConversation={handleNewConversation}
               onSelectConversation={handleSelectConversation}
               onDeleteConversation={handleDeleteConversation}
               onToggleSidebar={() => setShowSidebar(!showSidebar)}
               onRenameConversation={handleRenameConversation}
+              onApiKeyChange={handleApiKeyChange}
             />
           ) : (
             <IconArrowBarRight