From 8af5e8050f587fcfa66e7ea45ac752ae6cbbd5da Mon Sep 17 00:00:00 2001
From: Kare-Udon <52364111+Kare-Udon@users.noreply.github.com>
Date: Sun, 6 Aug 2023 07:35:42 +0000
Subject: [PATCH] Feat: model quick switch button Add a switch button in
 ChatPage for quick switching between GPT-3.5-Turbo & GPT-4. Only appears when
 creating a new chat.

---
 src/routes/ChatRoute.tsx | 60 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/routes/ChatRoute.tsx b/src/routes/ChatRoute.tsx
index 193168d..8d52d84 100644
--- a/src/routes/ChatRoute.tsx
+++ b/src/routes/ChatRoute.tsx
@@ -4,17 +4,19 @@ import {
   Card,
   Container,
   Flex,
+  Group,
   MediaQuery,
   Select,
   SimpleGrid,
   Skeleton,
   Stack,
+  SegmentedControl,
   Textarea,
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useLiveQuery } from "dexie-react-hooks";
 import { nanoid } from "nanoid";
-import { KeyboardEvent, useState, type ChangeEvent } from "react";
+import { KeyboardEvent, useState, type ChangeEvent, useEffect } from "react";
 import { AiOutlineSend } from "react-icons/ai";
 import { MessageItem } from "../components/MessageItem";
 import { db } from "../db";
@@ -66,6 +68,16 @@ export function ChatRoute() {
     return message.join(" ");
   };
 
+  const settings = useLiveQuery(async () => {
+    return db.settings.where({ id: "general" }).first();
+  });
+  const [model, setModel] = useState(config.defaultModel);
+  useEffect(() => {
+    if (settings?.openAiModel) {
+      setModel(settings.openAiModel);
+    }
+  });
+
   const submit = async () => {
     if (submitting) return;
 
@@ -250,6 +262,52 @@ export function ChatRoute() {
               : theme.colors.gray[0],
         })}
       >
+        {messages?.length === 0 &&
+          <Group position="center" my={40}>
+            <SegmentedControl
+              value={model}
+              fullWidth
+              size="md"
+              sx={(theme) => ({
+                [`@media (min-width: ${theme.breakpoints.md})`]: {
+                  width: '30%',
+                },
+              })}
+              data={[
+                { label: 'GPT-3.5', value: 'gpt-3.5-turbo' },
+                { label: 'GPT-4', value: 'gpt-4' }
+              ]}
+              onChange={async (value: 'gpt-3.5-turbo' | 'gpt-4') => {
+                const model = value;
+                try {
+                  await db.settings.update("general", {
+                    openAiModel: model ?? undefined,
+                  });
+                  notifications.show({
+                    title: "Saved",
+                    message: "Your OpenAI Model has been saved.",
+                  });
+                } catch (error: any) {
+                  if (error.toJSON().message === "Network Error") {
+                    notifications.show({
+                      title: "Error",
+                      color: "red",
+                      message: "No internet connection.",
+                    });
+                  }
+                  const message = error.response?.data?.error?.message;
+                  if (message) {
+                    notifications.show({
+                      title: "Error",
+                      color: "red",
+                      message,
+                    });
+                  }
+                }
+              }}
+            />
+          </Group>
+        }
         <Container>
           {messages?.length === 0 && (
             <SimpleGrid