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 (
+ }
+ onClick={handleCreate}
+ {...props}
+ >
+ {props.children}
+
+ )
+}
\ 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() {
{tab === "Chats" && (
- }
- 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 });
- }}
- >
+
{incognitoMode ? "New Incognito Chat" : "New Chat"}
-
+
)}
{tab === "Prompts" && }
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() {
))}
-
- {config.allowSettingsModal && (
+
+ {settings?.openAiApiKey && (
+
+ Create a New Chat
+
+ )}
- )}
- {config.showDownloadLink && !window.todesktop && (
- }
- >
- Download Desktop App
-
- )}
-
+
>