Add GPT-4 support (#25)

* mobile ui updates

* fixes sidebar btn

* return if null

* mobile input blur

* handle mobile enter key

* new convo name

* new delete mechanism

* test height

* revert

* change padding

* remove overflow

* check relative

* padding

* done

* retry

* test

* test

* should work now

* test

* test

* more

* max h

* revert

* done

components/Chat/Chat.tsx

@@ -1,21 +1,21 @@
-import { Message, OpenAIModel, OpenAIModelNames } from "@/types";
+import { Conversation, Message, OpenAIModel } from "@/types";
 import { FC, useEffect, useRef } from "react";
 import { ChatInput } from "./ChatInput";
 import { ChatLoader } from "./ChatLoader";
 import { ChatMessage } from "./ChatMessage";
 import { ModelSelect } from "./ModelSelect";
 
 interface Props {
- model: OpenAIModel;
- messages: Message[];
+ conversation: Conversation;
+ models: OpenAIModel[];
  messageIsStreaming: boolean;
  loading: boolean;
  lightMode: "light" | "dark";
  onSend: (message: Message) => void;
- onSelect: (model: OpenAIModel) => void;
+ onModelChange: (conversation: Conversation, model: OpenAIModel) => void;
 }
 
-export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading, lightMode, onSend, onSelect }) => {
+export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, loading, lightMode, onSend, onModelChange }) => {
  const messagesEndRef = useRef<HTMLDivElement>(null);
 
  const scrollToBottom = () => {
@@ -24,27 +24,28 @@ export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading,
 
  useEffect(() => {
  scrollToBottom();
- }, [messages]);
+ }, [conversation.messages]);
 
  return (
  <div className="flex-1 overflow-scroll dark:bg-[#343541]">
  <div>
- {messages.length === 0 ? (
+ {conversation.messages.length === 0 ? (
  <>
  <div className="flex justify-center pt-8">
  <ModelSelect
- model={model}
- onSelect={onSelect}
+ model={conversation.model}
+ models={models}
+ onModelChange={(model) => onModelChange(conversation, model)}
  />
  </div>
 
- <div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">Chatbot UI</div>
+ <div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">{loading ? "Loading..." : "Chatbot UI"}</div>
  </>
  ) : (
  <>
- <div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
+ <div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {conversation.model.name}</div>
 
- {messages.map((message, index) => (
+ {conversation.messages.map((message, index) => (
  <ChatMessage
  key={index}
  message={message}

components/Chat/ModelSelect.tsx

@@ -1,27 +1,30 @@
-import { OpenAIModel, OpenAIModelNames } from "@/types";
+import { OpenAIModel } from "@/types";
 import { FC } from "react";
 
 interface Props {
  model: OpenAIModel;
- onSelect: (model: OpenAIModel) => void;
+ models: OpenAIModel[];
+ onModelChange: (model: OpenAIModel) => void;
 }
 
-export const ModelSelect: FC<Props> = ({ model, onSelect }) => {
+export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
  return (
  <div className="flex flex-col">
  <label className="text-left mb-2 dark:text-neutral-400 text-neutral-700">Model</label>
  <select
  className="w-[300px] p-3 dark:text-white dark:bg-[#343541] border border-neutral-500 rounded-lg appearance-none focus:shadow-outline text-neutral-900 cursor-pointer"
  placeholder="Select a model"
- value={model}
- onChange={(e) => onSelect(e.target.value as OpenAIModel)}
+ value={model.id}
+ onChange={(e) => {
+ onModelChange(models.find((model) => model.id === e.target.value) as OpenAIModel);
+ }}
  >
- {Object.entries(OpenAIModelNames).map(([value, name]) => (
+ {models.map((model) => (
  <option
- key={value}
- value={value}
+ key={model.id}
+ value={model.id}
  >
- {name}
+ {model.name}
  </option>
  ))}
  </select>

pages/api/chat.ts

@@ -1,5 +1,5 @@
 import { Message, OpenAIModel } from "@/types";
-import { OpenAIStream } from "@/utils";
+import { OpenAIStream } from "@/utils/server";
 
 export const config = {
  runtime: "edge"
@@ -23,7 +23,7 @@ const handler = async (req: Request): Promise<Response> => {
  break;
  }
  charCount += message.content.length;
- messagesToSend = [message, ...messagesToSend]
+ messagesToSend = [message, ...messagesToSend];
  }
 
  const stream = await OpenAIStream(model, key, messagesToSend);

pages/api/models.ts

@@ -0,0 +1,46 @@
+import { OpenAIModel, OpenAIModelID, OpenAIModels } from "@/types";
+
+export const config = {
+ runtime: "edge"
+};
+
+const handler = async (req: Request): Promise<Response> => {
+ try {
+ const { key } = (await req.json()) as {
+ key: string;
+ };
+
+ const response = await fetch("https://api.openai.com/v1/models", {
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${key ? key : process.env.OPENAI_API_KEY}`
+ }
+ });
+
+ if (response.status !== 200) {
+ throw new Error("OpenAI API returned an error");
+ }
+
+ const json = await response.json();
+
+ const models: OpenAIModel[] = json.data
+ .map((model: any) => {
+ for (const [key, value] of Object.entries(OpenAIModelID)) {
+ if (value === model.id) {
+ return {
+ id: model.id,
+ name: OpenAIModels[value].name
+ };
+ }
+ }
+ })
+ .filter(Boolean);
+
+ return new Response(JSON.stringify(models), { status: 200 });
+ } catch (error) {
+ console.error(error);
+ return new Response("Error", { status: 500 });
+ }
+};
+
+export default handler;

pages/index.tsx

@@ -1,7 +1,8 @@
 import { Chat } from "@/components/Chat/Chat";
 import { Navbar } from "@/components/Mobile/Navbar";
 import { Sidebar } from "@/components/Sidebar/Sidebar";
-import { Conversation, Message, OpenAIModel } from "@/types";
+import { Conversation, Message, OpenAIModel, OpenAIModelID, OpenAIModels } from "@/types";
+import { cleanConversationHistory, cleanSelectedConversation } from "@/utils/app";
 import { IconArrowBarLeft, IconArrowBarRight } from "@tabler/icons-react";
 import Head from "next/head";
 import { useEffect, useState } from "react";
@@ -10,7 +11,7 @@ export default function Home() {
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [selectedConversation, setSelectedConversation] = useState<Conversation>();
  const [loading, setLoading] = useState<boolean>(false);
- const [model, setModel] = useState<OpenAIModel>(OpenAIModel.GPT_3_5);
+ const [models, setModels] = useState<OpenAIModel[]>([]);
  const [lightMode, setLightMode] = useState<"dark" | "light">("dark");
  const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
  const [showSidebar, setShowSidebar] = useState<boolean>(true);
@@ -33,7 +34,7 @@ export default function Home() {
  "Content-Type": "application/json"
  },
  body: JSON.stringify({
- model,
+ model: updatedConversation.model,
  messages: updatedConversation.messages,
  key: apiKey
  })
@@ -47,6 +48,8 @@ export default function Home() {
  const data = response.body;
 
  if (!data) {
+ setLoading(false);
+ setMessageIsStreaming(false);
  return;
  }
 
@@ -144,13 +147,35 @@ export default function Home() {
  localStorage.setItem("selectedConversation", JSON.stringify(updatedConversation));
  };
 
+ const handleChangeModel = (conversation: Conversation, model: OpenAIModel) => {
+ const updatedConversation = {
+ ...conversation,
+ model
+ };
+
+ const updatedConversations = conversations.map((c) => {
+ if (c.id === updatedConversation.id) {
+ return updatedConversation;
+ }
+
+ return c;
+ });
+
+ setConversations(updatedConversations);
+ localStorage.setItem("conversationHistory", JSON.stringify(updatedConversations));
+
+ setSelectedConversation(updatedConversation);
+ localStorage.setItem("selectedConversation", JSON.stringify(updatedConversation));
+ };
+
  const handleNewConversation = () => {
  const lastConversation = conversations[conversations.length - 1];
 
  const newConversation: Conversation = {
  id: lastConversation ? lastConversation.id + 1 : 1,
  name: `Conversation ${lastConversation ? lastConversation.id + 1 : 1}`,
- messages: []
+ messages: [],
+ model: OpenAIModels[OpenAIModelID.GPT_3_5]
  };
 
  const updatedConversations = [...conversations, newConversation];
@@ -160,7 +185,6 @@ export default function Home() {
  setSelectedConversation(newConversation);
  localStorage.setItem("selectedConversation", JSON.stringify(newConversation));
 
- setModel(OpenAIModel.GPT_3_5);
  setLoading(false);
  };
 
@@ -181,7 +205,8 @@ export default function Home() {
  setSelectedConversation({
  id: 1,
  name: "New conversation",
- messages: []
+ messages: [],
+ model: OpenAIModels[OpenAIModelID.GPT_3_5]
  });
  localStorage.removeItem("selectedConversation");
  }
@@ -192,6 +217,27 @@ export default function Home() {
  localStorage.setItem("apiKey", apiKey);
  };
 
+ const fetchModels = async () => {
+ setLoading(true);
+
+ const response = await fetch("/api/models", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ key: apiKey
+ })
+ });
+ const data = await response.json();
+
+ if (data) {
+ setModels(data);
+ }
+
+ setLoading(false);
+ };
+
  useEffect(() => {
  const theme = localStorage.getItem("theme");
  if (theme) {
@@ -208,21 +254,27 @@ export default function Home() {
  }
 
  const conversationHistory = localStorage.getItem("conversationHistory");
-
  if (conversationHistory) {
- setConversations(JSON.parse(conversationHistory));
+ const parsedConversationHistory: Conversation[] = JSON.parse(conversationHistory);
+ const cleanedConversationHistory = cleanConversationHistory(parsedConversationHistory);
+ setConversations(cleanedConversationHistory);
  }
 
  const selectedConversation = localStorage.getItem("selectedConversation");
  if (selectedConversation) {
- setSelectedConversation(JSON.parse(selectedConversation));
+ const parsedSelectedConversation: Conversation = JSON.parse(selectedConversation);
+ const cleanedSelectedConversation = cleanSelectedConversation(parsedSelectedConversation);
+ setSelectedConversation(cleanedSelectedConversation);
  } else {
  setSelectedConversation({
  id: 1,
  name: "New conversation",
- messages: []
+ messages: [],
+ model: OpenAIModels[OpenAIModelID.GPT_3_5]
  });
  }
+
+ fetchModels();
  }, []);
 
  return (
@@ -242,7 +294,6 @@ export default function Home() {
  href="/favicon.ico"
  />
  </Head>
-
  {selectedConversation && (
  <div className={`flex flex-col h-screen w-screen text-white ${lightMode}`}>
  <div className="sm:hidden w-full fixed top-0">
@@ -283,13 +334,13 @@ export default function Home() {
  )}
 
  <Chat
+ conversation={selectedConversation}
  messageIsStreaming={messageIsStreaming}
- model={model}
- messages={selectedConversation.messages}
+ models={models}
  loading={loading}
  lightMode={lightMode}
  onSend={handleSend}
- onSelect={setModel}
+ onModelChange={handleChangeModel}
  />
  </div>
  </div>

types/index.ts

@@ -1,13 +1,22 @@
-export enum OpenAIModel {
+export interface OpenAIModel {
+ id: string;
+ name: string;
+}
+
+export enum OpenAIModelID {
  GPT_3_5 = "gpt-3.5-turbo",
- GPT_3_5_LEGACY = "gpt-3.5-turbo-0301"
- // GPT_4 = "gpt-4"
+ GPT_4 = "gpt-4"
 }
 
-export const OpenAIModelNames: Record<OpenAIModel, string> = {
- [OpenAIModel.GPT_3_5]: "Default (GPT-3.5)",
- [OpenAIModel.GPT_3_5_LEGACY]: "Legacy (GPT-3.5)"
- // [OpenAIModel.GPT_4]: "GPT-4"
+export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = {
+ [OpenAIModelID.GPT_3_5]: {
+ id: OpenAIModelID.GPT_3_5,
+ name: "Default (GPT-3.5)"
+ },
+ [OpenAIModelID.GPT_4]: {
+ id: OpenAIModelID.GPT_4,
+ name: "GPT-4"
+ }
 };
 
 export interface Message {
@@ -21,4 +30,13 @@ export interface Conversation {
  id: number;
  name: string;
  messages: Message[];
+ model: OpenAIModel;
+}
+
+// keep track of local storage schema
+export interface LocalStorage {
+ apiKey: string;
+ conversationHistory: Conversation[];
+ selectedConversation: Conversation;
+ theme: "light" | "dark";
 }