add gpt-4 support

src/components/SettingsModal.tsx

@@ -1,9 +1,11 @@
 import {
+  Alert,
   Anchor,
   Button,
-  Group,
+  Flex,
   List,
   Modal,
+  Select,
   Stack,
   Text,
   TextInput,
@@ -13,6 +15,7 @@ import { notifications } from "@mantine/notifications";
 import { useLiveQuery } from "dexie-react-hooks";
 import { cloneElement, ReactElement, useEffect, useState } from "react";
 import { db } from "../db";
+import { availableModels, defaultModel } from "../utils/constants";
 import { checkOpenAIKey } from "../utils/openai";
 
 export function SettingsModal({ children }: { children: ReactElement }) {
@@ -20,14 +23,20 @@ export function SettingsModal({ children }: { children: ReactElement }) {
   const [submitting, setSubmitting] = useState(false);
 
   const [value, setValue] = useState("");
+  const [model, setModel] = useState(defaultModel);
 
-  const apiKey = useLiveQuery(async () => {
-    return (await db.settings.where({ id: "general" }).toArray())[0];
+  const settings = useLiveQuery(async () => {
+    return db.settings.where({ id: "general" }).first();
   });
+
   useEffect(() => {
-    if (!apiKey?.openAiApiKey) return;
-    setValue(apiKey.openAiApiKey);
-  }, [apiKey]);
+    if (settings?.openAiApiKey) {
+      setValue(settings.openAiApiKey);
+    }
+    if (settings?.openAiModel) {
+      setModel(settings.openAiModel);
+    }
+  }, [settings]);
 
   return (
     <>
@@ -69,7 +78,7 @@ export function SettingsModal({ children }: { children: ReactElement }) {
               }
             }}
           >
-            <Group align="end">
+            <Flex gap="xs" align="end">
               <TextInput
                 label="OpenAI API Key"
                 placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
@@ -81,7 +90,7 @@ export function SettingsModal({ children }: { children: ReactElement }) {
               <Button type="submit" loading={submitting}>
                 Save
               </Button>
-            </Group>
+            </Flex>
           </form>
           <List withPadding>
             <List.Item>
@@ -101,6 +110,21 @@ export function SettingsModal({ children }: { children: ReactElement }) {
               </Text>
             </List.Item>
           </List>
+          <Select
+            label="OpenAI Model"
+            value={model}
+            onChange={(value) => {
+              db.settings.update("general", {
+                openAiModel: value ?? undefined,
+              });
+            }}
+            withinPortal
+            data={availableModels}
+          />
+          <Alert color="orange" title="Warning">
+            The displayed cost was not updated yet to reflect the costs for each
+            model. Right now it will always show the cost for GPT-3.5.
+          </Alert>
         </Stack>
       </Modal>
     </>

src/db/index.ts

@@ -26,6 +26,7 @@ export interface Prompt {
 export interface Settings {
   id: "general";
   openAiApiKey?: string;
+  openAiModel?: string;
 }
 
 export class Database extends Dexie {

src/routes/ChatRoute.tsx

@@ -168,12 +168,13 @@ export function ChatRoute() {
           color: "red",
           message: "No internet connection.",
         });
-      } else {
+      }
+      const message = error.response?.data?.error?.message;
+      if (message) {
         notifications.show({
           title: "Error",
           color: "red",
-          message:
-            "You OpenAI API Key is not active or has expired. Please set a new API Key",
+          message,
         });
       }
     } finally {

src/routes/IndexRoute.tsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   Center,
   Container,
@@ -27,6 +28,7 @@ export function IndexRoute() {
     <>
       <Center py="xl" sx={{ height: "100%" }}>
         <Container size="sm">
+          <Badge mb="lg">GPT-4 Ready</Badge>
           <Text>
             <Logo style={{ maxWidth: 240 }} />
           </Text>

src/utils/constants.ts

@@ -1,3 +1,20 @@
+export const defaultModel = "gpt-3.5-turbo";
+
+export const availableModels = [
+  {
+    value: "gpt-3.5-turbo",
+    label: "GPT-3.5-TURBO (Default ChatGPT)",
+  },
+  { value: "gpt-3.5-turbo-0301", label: "GPT-3.5-TURBO-0301" },
+  { value: "gpt-4", label: "GPT-4 (Limited Beta)" },
+  { value: "gpt-4-0314", label: "GPT-4-0314 (Limited Beta)" },
+  { value: "gpt-4-32k", label: "GPT-4-32K (Limited Beta)" },
+  {
+    value: "gpt-4-32k-0314",
+    label: "GPT-4-32K-0314 (Limited Beta)",
+  },
+];
+
 export const writingCharacters = [
   {
     label: "Standup Comedian",

src/utils/openai.ts

@@ -1,4 +1,6 @@
 import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
+import { db } from "../db";
+import { defaultModel } from "./constants";
 
 function getClient(apiKey: string) {
   const configuration = new Configuration({
@@ -11,9 +13,12 @@ export async function createChatCompletion(
   apiKey: string,
   messages: ChatCompletionRequestMessage[]
 ) {
+  const settings = await db.settings.get("general");
+  const model = settings?.openAiModel ?? defaultModel;
+
   const client = getClient(apiKey);
   return client.createChatCompletion({
-    model: "gpt-3.5-turbo",
+    model,
     stream: false,
     messages,
   });