From bf31f7b9bd0bcada4f320600553deb240574205d Mon Sep 17 00:00:00 2001
From: BetaHuhn <hello@mxis.ch>
Date: Fri, 1 Sep 2023 10:14:05 +0200
Subject: [PATCH] add create chat button to index page

---
 src/components/CreateChatButton.tsx | 46 +++++++++++++++++++++++++++++
 src/components/Layout.tsx           | 45 ++++------------------------
 src/routes/IndexRoute.tsx           | 28 ++++++------------
 3 files changed, 60 insertions(+), 59 deletions(-)
 create mode 100644 src/components/CreateChatButton.tsx

diff --git a/src/components/CreateChatButton.tsx b/src/components/CreateChatButton.tsx
new file mode 100644
index 0000000..500c42f
--- /dev/null
+++ b/src/components/CreateChatButton.tsx
@@ -0,0 +1,46 @@
+import { notifications } from "@mantine/notifications";
+import { Chat, detaDB, generateKey } from "../db";
+import { Button } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import { useChats, useSettings } from "../hooks/contexts";
+import { useNavigate } from "@tanstack/react-location";
+import { ReactNode } from "react";
+
+
+export function CreateChatButton(props: { children: ReactNode, [x:string]: any }) {
+    const navigate = useNavigate();
+    const { settings } = useSettings()
+    const { setChats }  = useChats()
+
+    const handleCreate = async () => {
+        if (!settings?.openAiApiKey) {
+            notifications.show({
+                title: "Error",
+                color: "red",
+                message: "OpenAI API Key is not defined. Please set your API Key",
+            });
+            return;
+        };
+            
+        const item = await detaDB.chats.put({
+            description: "New Chat",
+            prompt: null,
+            totalTokens: 0,
+            createdAt: new Date().toISOString(),
+        }, generateKey())
+
+        setChats(chats => ([...(chats || []), item as unknown as Chat]))
+
+        const id = item!.key as string
+        navigate({ to: `/chats/${id}`, replace: true });
+    }
+    return (
+        <Button
+            leftIcon={<IconPlus size={20} />}
+            onClick={handleCreate}
+            {...props}
+        >
+            {props.children}
+        </Button>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 109f66e..b4f1c96 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -3,7 +3,6 @@ import {
   AppShell,
   Box,
   Burger,
-  Button,
   MediaQuery,
   Navbar,
   rem,
@@ -15,16 +14,15 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import {
-  IconPlus,
   IconSearch,
   IconSettings,
   IconSpy,
   IconSpyOff,
   IconX,
 } from "@tabler/icons-react";
-import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-location";
+import { Link, Outlet, useRouter } from "@tanstack/react-location";
 import { useEffect, useState } from "react";
-import { Chat, detaDB, generateKey, Prompt, Settings } from "../db";
+import { Chat, detaDB, Prompt, Settings } from "../db";
 import { useChatId } from "../hooks/useChatId";
 import { Chats } from "./Chats";
 import { CreatePromptModal } from "./CreatePromptModal";
@@ -34,8 +32,8 @@ import { SettingsModal } from "./SettingsModal";
 import { config } from "../utils/config";
 import { ChatContext, ChatsContext, IncognitoModeContext, PromptsContext, SettingsContext } from "../hooks/contexts";
 import { ChatHeader } from "./ChatHeader";
-import { notifications } from "@mantine/notifications";
 import { useLocalStorage } from "@mantine/hooks";
+import { CreateChatButton } from "./CreateChatButton";
 
 declare global {
   interface Window {
@@ -48,7 +46,6 @@ export function Layout() {
   const [opened, setOpened] = useState(false);
   const [tab, setTab] = useState<"Chats" | "Prompts">("Chats");
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const navigate = useNavigate();
   const router = useRouter();
 
   const [search, setSearch] = useState("");
@@ -267,41 +264,9 @@ export function Layout() {
                     <Navbar.Section>
                     <Box sx={{ padding: 10 }}>
                         {tab === "Chats" && (
-                          <Button
-                            fullWidth
-                            leftIcon={<IconPlus size={20} />}
-                            onClick={async () => {
-                              if (!settings?.openAiApiKey) {
-                                notifications.show({
-                                  title: "Error",
-                                  color: "red",
-                                  message: "OpenAI API Key is not defined. Please set your API Key",
-                                });
-                                return;
-                              };
-                              
-                              const item = await detaDB.chats.put({
-                                description: "New Chat",
-                                prompt: null,
-                                totalTokens: 0,
-                                createdAt: new Date().toISOString(),
-                              }, generateKey())
-
-                              setChats(chats => ([...(chats || []), item as unknown as Chat]))
-
-                              const id = item!.key as string
-                              // const id = nanoid();
-                              // db.chats.add({
-                              //   id,
-                              //   description: "New Chat",
-                              //   totalTokens: 0,
-                              //   createdAt: new Date(),
-                              // });
-                              navigate({ to: `/chats/${id}`, replace: true });
-                            }}
-                          >
+                          <CreateChatButton fullWidth>
                             {incognitoMode ? "New Incognito Chat" : "New Chat"}
-                          </Button>
+                          </CreateChatButton>
                         )}
                         {tab === "Prompts" && <CreatePromptModal />}
                       </Box>
diff --git a/src/routes/IndexRoute.tsx b/src/routes/IndexRoute.tsx
index a739104..4d0a07c 100644
--- a/src/routes/IndexRoute.tsx
+++ b/src/routes/IndexRoute.tsx
@@ -3,14 +3,13 @@ import {
   Button,
   Center,
   Container,
-  Group,
+  Flex,
   SimpleGrid,
   Text,
   ThemeIcon,
   useMantineTheme,
 } from "@mantine/core";
 import {
-  IconCloudDownload,
   IconCurrencyDollar,
   IconKey,
   IconLock,
@@ -18,8 +17,8 @@ import {
 } from "@tabler/icons-react";
 import { Logo } from "../components/Logo";
 import { SettingsModal } from "../components/SettingsModal";
-import { config } from "../utils/config";
 import { useSettings } from "../hooks/contexts";
+import { CreateChatButton } from "../components/CreateChatButton";
 
 export function IndexRoute() {
   const { settings } = useSettings()
@@ -56,8 +55,12 @@ export function IndexRoute() {
               </div>
             ))}
           </SimpleGrid>
-          <Group mt={50}>
-            {config.allowSettingsModal && (
+          <Flex mt={50} align='center' gap='md'>
+              {settings?.openAiApiKey && (
+                <CreateChatButton size="md">
+                  Create a New Chat
+                </CreateChatButton>
+              )}
               <SettingsModal>
                 <Button
                   size="md"
@@ -67,20 +70,7 @@ export function IndexRoute() {
                   {settings?.openAiApiKey ? "Change OpenAI Key" : "Enter OpenAI Key"}
                 </Button>
               </SettingsModal>
-            )}
-            {config.showDownloadLink && !window.todesktop && (
-              <Button
-                component="a"
-                href="https://dl.todesktop.com/230313oyppkw40a"
-                // href="https://download.chatpad.ai/"
-                size="md"
-                variant="outline"
-                leftIcon={<IconCloudDownload size={20} />}
-              >
-                Download Desktop App
-              </Button>
-            )}
-          </Group>
+          </Flex>
         </Container>
       </Center>
     </>