From 6b592db0875deaac9b32d8d9204bbfeb4580a874 Mon Sep 17 00:00:00 2001 From: BetaHuhn Date: Mon, 4 Sep 2023 19:01:40 +0200 Subject: [PATCH] update homepage to show prompts --- src/components/App.tsx | 2 +- src/components/Layout.tsx | 15 ++- src/components/Welcome.tsx | 87 +++++++++++++++++ src/routes/IndexRoute.tsx | 195 +++++++++++++++++++++---------------- 4 files changed, 212 insertions(+), 87 deletions(-) create mode 100644 src/components/Welcome.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index da31ff0..e3b7eb0 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -23,7 +23,7 @@ export function App() { const [colorScheme, setColorScheme] = useLocalStorage({ key: "mantine-color-scheme", defaultValue: prefersDark ? "dark" : "light", - getInitialValueInEffect: true, + getInitialValueInEffect: false, }); const toggleColorScheme = (value?: ColorScheme) => diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 552d74f..c12a604 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -80,8 +80,21 @@ export function Layout() { useEffect(() => { const dataFetch = async () => { const item = await detaDB.chats.get(chatId!); + const fetchedChat = item as unknown as Chat - setChat(item as unknown as Chat); + setChat(fetchedChat); + + if (fetchedChat.private && !incognitoMode) { + setIncognitoMode(true) + if (colorScheme === 'light') { + toggleColorScheme() + } + } else if (!(fetchedChat.private ?? false) && incognitoMode) { + setIncognitoMode(false) + if (colorScheme === 'dark') { + toggleColorScheme() + } + } }; if (chatId) { diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx new file mode 100644 index 0000000..fa83ec1 --- /dev/null +++ b/src/components/Welcome.tsx @@ -0,0 +1,87 @@ +import { Container, Badge, SimpleGrid, ThemeIcon, Flex, Button, Text, useMantineTheme } from "@mantine/core"; +import { + IconCurrencyDollar, + IconKey, + IconLock, + IconNorthStar, + } from "@tabler/icons-react"; + +import { CreateChatButton } from "./CreateChatButton"; +import { Logo } from "./Logo"; +import { SettingsModal } from "./SettingsModal"; +import { useIncognitoMode, useSettings } from "../hooks/contexts"; + +const features = [ + { + icon: IconCurrencyDollar, + title: "Free and open source", + description: + "This app is provided for free and the source code is available on GitHub.", + }, + { + icon: IconLock, + title: "Privacy focused", + description: + "No tracking, no cookies, no bullshit. All your data is stored locally.", + }, + { + icon: IconNorthStar, + title: "Best experience", + description: + "Crafted with love and care to provide the best experience possible.", + }, + ]; + +export function Welcome () { + const { settings } = useSettings() + const theme = useMantineTheme() + const { incognitoMode } = useIncognitoMode() + + return ( + + GPT-4 Ready + + + + + Not just another ChatGPT user-interface! + + + {features.map((feature) => ( +
+ + + + + {feature.title} + + + {feature.description} + +
+ ))} + + + {settings?.openAiApiKey && ( + + {incognitoMode ? "Create a New Private Chat" : "Create a New Chat"} + + )} + + + + + + ) +} \ No newline at end of file diff --git a/src/routes/IndexRoute.tsx b/src/routes/IndexRoute.tsx index 1f143e2..15c24bd 100644 --- a/src/routes/IndexRoute.tsx +++ b/src/routes/IndexRoute.tsx @@ -1,100 +1,125 @@ -import { - Badge, - Button, - Center, - Container, - Flex, - SimpleGrid, - Text, - ThemeIcon, - useMantineTheme, -} from "@mantine/core"; -import { - IconCurrencyDollar, - IconKey, - IconLock, - IconNorthStar, -} from "@tabler/icons-react"; +import { Container, SimpleGrid, Flex, Button, Text, useMantineTheme, Center, Box, Tooltip, ActionIcon, Card } from "@mantine/core"; +import { useChats, useIncognitoMode, usePrompts, useSettings } from "../hooks/contexts"; +import { Welcome } from "../components/Welcome"; import { Logo } from "../components/Logo"; -import { SettingsModal } from "../components/SettingsModal"; -import { useIncognitoMode, useSettings } from "../hooks/contexts"; import { CreateChatButton } from "../components/CreateChatButton"; +import { SettingsModal } from "../components/SettingsModal"; +import { IconKey, IconPlayerPlay } from "@tabler/icons-react"; +import { notifications } from "@mantine/notifications"; +import { Chat, detaDB, generateKey } from "../db"; +import { useNavigate } from "@tanstack/react-location"; + export function IndexRoute() { const { settings } = useSettings() const theme = useMantineTheme() const { incognitoMode } = useIncognitoMode() + const navigate = useNavigate(); + + const { setChats } = useChats() + const { prompts } = usePrompts() return ( <>
- - GPT-4 Ready - - - - - Not just another ChatGPT user-interface! - - - {features.map((feature) => ( -
- - - - - {feature.title} - - - {feature.description} - -
- ))} - - - {settings?.openAiApiKey && ( - - {incognitoMode ? "Create a New Private Chat" : "Create a New Chat"} - - )} - - - - - + {prompts && prompts.length > 0 ? ( + + + + + + Not just another ChatGPT user-interface! + + + {prompts.map((prompt) => ( + + + + {prompt.title} + + + {prompt.content || prompt.writingCharacter || prompt.writingTone || prompt.writingFormat || prompt.writingStyle || "No Instructions"} + + + + + { + 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: prompt.title ? `New ${prompt.title} Chat` : "New Chat", + prompt: prompt.key, + writingInstructions: prompt.content, + writingCharacter: prompt.writingCharacter, + writingTone: prompt.writingTone, + writingStyle: prompt.writingStyle, + writingFormat: prompt.writingFormat, + totalTokens: 0, + createdAt: new Date().toISOString(), + }, generateKey()) + + const chat = item as unknown as Chat + setChats(current => ([...(current || []), chat])) + + navigate({ to: `/chats/${chat.key}` }); + }} + > + + + + + ))} + + + + {settings?.openAiApiKey && ( + + {incognitoMode ? "Create a New Private Chat" : "Create a New Chat"} + + )} + + + + + + ) : ( + + )}
); } - -const features = [ - { - icon: IconCurrencyDollar, - title: "Free and open source", - description: - "This app is provided for free and the source code is available on GitHub.", - }, - { - icon: IconLock, - title: "Privacy focused", - description: - "No tracking, no cookies, no bullshit. All your data is stored locally.", - }, - { - icon: IconNorthStar, - title: "Best experience", - description: - "Crafted with love and care to provide the best experience possible.", - }, -];