feat: Add support for OpenRouter and Gemini models

src/Pages/MainPage.jsx

@@ -18,6 +18,8 @@ export default function MainPage() {
       content: "Hi there, User can i help you with anything?",
     },
   ]);
+  const [selectedModel, setSelectedModel] = useState("cosmos");
+  const [apiKey, setApiKey] = useState("");
   const chatContainerRef = useRef(null);
   useEffect(() => {
     if (chatContainerRef.current) {
@@ -30,7 +32,10 @@ export default function MainPage() {
   return (
     <>
       <div className="h-screen w-full bg-black parent flex flex-col">
-        <Navbar />
+        <Navbar
+          modelState={[selectedModel, setSelectedModel]}
+          keyState={[apiKey, setApiKey]}
+        />
         <Chats
           state={[messages, setMessages]}
           firstMessage={firstMessage}
@@ -42,6 +47,8 @@ export default function MainPage() {
           setFirstMessage={setFirstMessage}
           setIsLoad={setIsLoad}
           btnState={[btnAvailable, setBtnAvailable]}
+          model={selectedModel}
+          apiKey={apiKey}
         />
       </div>
     </>

src/components/Input.jsx

@@ -3,7 +3,15 @@ import { useEffect, useState } from "react";
 import { useRef } from "react";
 import sound from "../assets/done.wav";
 import axios from "axios";
-export default function input({ state, setFirstMessage, setIsLoad, btnState }) {
+
+export default function Input({
+  state,
+  setFirstMessage,
+  setIsLoad,
+  btnState,
+  model,
+  apiKey,
+}) {
   const [btnAvailable, setBtnAvailable] = btnState;
   const [messages, setMessages] = state;
   const [inputValue, setInputValue] = useState("");
@@ -24,17 +32,64 @@ export default function input({ state, setFirstMessage, setIsLoad, btnState }) {
       setBtnAvailable(false);
 
       try {
-        const response = await axios.post(
-          "https://api.pawan.krd/cosmosrp/v1",
-          {
-            model: "cosmosrp",
-            messages: newMessage,
-          },
-          {
-            headers: { "Content-Type": "application/json" },
-          }
-        );
-        const data = response.data.choices[0].message.content;
+        let response;
+        switch (model) {
+          case "cosmos":
+            response = await axios.post(
+              "https://api.pawan.krd/cosmosrp/v1",
+              {
+                model: "cosmosrp",
+                messages: newMessage,
+              },
+              {
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+            break;
+          case "openrouter":
+            response = await axios.post(
+              "https://openrouter.ai/api/v1/chat/completions",
+              {
+                model: "gryphe/mythomax-l2-13b",
+                messages: newMessage,
+              },
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                  Authorization: `Bearer ${apiKey}`,
+                },
+              }
+            );
+            break;
+          case "gemini":
+            response = await axios.post(
+              "https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent",
+              {
+                contents: newMessage
+                  .slice(1)
+                  .map(({ role: a, content: b, ...rest }) => ({
+                    role: a == "assistant" ? "model" : "user",
+                    parts: [{ text: b }],
+                  })),
+              },
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                params: {
+                  key: apiKey,
+                },
+              }
+            );
+            break;
+          default:
+            throw new Error("Invalid model selected");
+        }
+
+        const data =
+          model == "gemini"
+            ? response.data.candidates[0].content.parts[0].text
+            : response.data.choices[0].message.content;
         setMessages([...newMessage, { role: "assistant", content: data }]);
       } catch (error) {
         console.log(error);
@@ -47,6 +102,7 @@ export default function input({ state, setFirstMessage, setIsLoad, btnState }) {
       }
     }
   }
+
   return (
     <div className="mx-[0px] lg:mx-[450px] px-[20px] py-[30px]">
       <div className="border border-secondary-250 flex flex-row rounded-full p-2 px-[20px] bg-secondary-100 opacity-80">

src/components/Navbar.jsx

@@ -1,8 +1,30 @@
 import Logo from "./Logo";
-export default function Navbar() {
+
+export default function Navbar({ modelState, keyState }) {
+  const [selectedModel, setSelectedModel] = modelState;
+  const [apiKey, setApiKey] = keyState;
+
   return (
-    <div className="py-[20px] border-b border-secondary-100">
+    <div className="py-[20px] border-b border-secondary-100 flex justify-between items-center px-4">
       <Logo type="text" />
+      <div className="flex items-center space-x-4">
+        <select
+          value={selectedModel}
+          onChange={(e) => setSelectedModel(e.target.value)}
+          className="bg-secondary-100 text-white p-2 rounded-md"
+        >
+          <option value="cosmos">Cosmos</option>
+          <option value="openrouter">OpenRouter</option>
+          <option value="gemini">Gemini</option>
+        </select>
+        <input
+          type="password"
+          placeholder="API Key"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          className="bg-secondary-100 text-white p-2 rounded-md"
+        />
+      </div>
     </div>
   );
 }