├── .gitignore
├── banner.png
├── src
    ├── assets
    │   └── favicon.png
    ├── hooks
    │   ├── useApiKey.ts
    │   └── useChatId.ts
    ├── index.tsx
    ├── styles
    │   └── markdown.scss
    ├── components
    │   ├── ScrollIntoView.tsx
    │   ├── DeleteAllDataModal.tsx
    │   ├── DeleteChatsModal.tsx
    │   ├── CharacterCard.tsx
    │   ├── MainLink.tsx
    │   ├── Chats.tsx
    │   ├── EditChatModal.tsx
    │   ├── DeletePromptModal.tsx
    │   ├── DeleteChatModal.tsx
    │   ├── EditPromptModal.tsx
    │   ├── CreatePromptModal.tsx
    │   ├── App.tsx
    │   ├── MessageItem.tsx
    │   ├── SettingsModal.tsx
    │   ├── Prompts.tsx
    │   ├── DatabaseModal.tsx
    │   ├── Logo.tsx
    │   └── Layout.tsx
    ├── index.html
    ├── utils
    │   ├── openai.ts
    │   └── constants.ts
    ├── db
    │   └── index.ts
    └── routes
    │   ├── IndexRoute.tsx
    │   └── ChatRoute.tsx
├── tsconfig.json
├── Dockerfile
├── docker
    └── default.conf.template
├── .github
    └── workflows
    │   └── docker.yml
├── package.json
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.parcel-cache
3 | /dist
4 | notes.txt
5 | 


--------------------------------------------------------------------------------
/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adaptive/chatpad/main/banner.png


--------------------------------------------------------------------------------
/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adaptive/chatpad/main/src/assets/favicon.png


--------------------------------------------------------------------------------
/src/hooks/useApiKey.ts:
--------------------------------------------------------------------------------
1 | import { useLocalStorage } from "@mantine/hooks";
2 | 
3 | export function useApiKey() {
4 |   return useLocalStorage({
5 |     key: "openai-key",
6 |     defaultValue: "",
7 |   });
8 | }
9 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from "react-dom/client";
2 | import { App } from "./components/App";
3 | 
4 | const container = document.getElementById("app");
5 | const root = createRoot(container!);
6 | root.render(<App />);
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["src/**/*"],
 3 |   "compilerOptions": {
 4 |     "jsx": "react-jsx",
 5 |     "esModuleInterop": true,
 6 |     "lib": ["es2018", "dom"],
 7 |     "strict": true,
 8 |     "skipLibCheck": true
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/hooks/useChatId.ts:
--------------------------------------------------------------------------------
1 | import { useMatchRoute } from "@tanstack/react-location";
2 | 
3 | export function useChatId() {
4 |   const matchRoute = useMatchRoute();
5 |   const match = matchRoute({ to: "/chats/:chatId" });
6 |   return match?.chatId;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/styles/markdown.scss:
--------------------------------------------------------------------------------
 1 | .markdown {
 2 |   pre, p, ul, ol, blockquote {
 3 |     &:first-child {
 4 |       margin-top: 0;
 5 |     }
 6 |     &:last-child {
 7 |       margin-bottom: 0;
 8 |     }
 9 |   }
10 |   ul {
11 |     padding-left: 20px;
12 |   }
13 |   li {
14 |     padding-left: 4px;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/ScrollIntoView.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from "react";
 2 | 
 3 | export function ScrollIntoView({ children }: { children: ReactNode }) {
 4 |   return (
 5 |     <div
 6 |       ref={(node) => {
 7 |         if (!node) return;
 8 |         node.scrollIntoView({ behavior: "smooth" });
 9 |       }}
10 |     >
11 |       {children}
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM nginx:alpine
 2 | 
 3 | # Copy the nginx configuration
 4 | COPY ./docker/default.conf.template /etc/nginx/templates/default.conf.template
 5 | 
 6 | # Copy the built react application to the nginx folder
 7 | COPY ./dist /usr/share/nginx/html
 8 | 
 9 | # Required NGINX env variables
10 | ENV NGINX_ENVSUBST_OUTPUT_DIR=/etc/nginx/conf.d
11 | 
12 | # Default env variables
13 | ENV PORT=80
14 | ENV HOST=0.0.0.0
15 | 


--------------------------------------------------------------------------------
/docker/default.conf.template:
--------------------------------------------------------------------------------
 1 | server {
 2 |   listen $PORT;
 3 | 
 4 |   root /usr/share/nginx/html;
 5 |   index index.html;
 6 | 
 7 |   server_tokens off;
 8 |   server_name _;
 9 | 
10 |   gzip on;
11 |   gzip_disable "msie6";
12 | 
13 |   gzip_vary on;
14 |   gzip_proxied any;
15 |   gzip_comp_level 6;
16 |   gzip_buffers 16 8k;
17 |   gzip_http_version 1.1;
18 |   gzip_min_length 0;
19 |   gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
20 | 
21 |   location / {
22 |     try_files $uri /index.html;
23 |   }
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Chatpad AI</title>
 6 |     <meta
 7 |       name="description"
 8 |       content="A free, open-source, and slick UI for ChatGPT"
 9 |     />
10 |     <meta
11 |       name="viewport"
12 |       content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, interactive-widget=resizes-content"
13 |     />
14 |     <link rel="icon" href="./assets/favicon.png" />
15 |     <style>
16 |       .app-region-drag {
17 |         -webkit-app-region: drag;
18 |       }
19 |       .app-region-no-drag {
20 |         -webkit-app-region: no-drag;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="app"></div>
26 |     <script type="module" src="index.tsx"></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/src/utils/openai.ts:
--------------------------------------------------------------------------------
 1 | import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
 2 | import { db } from "../db";
 3 | import { defaultModel } from "./constants";
 4 | 
 5 | function getClient(apiKey: string) {
 6 |   const configuration = new Configuration({
 7 |     apiKey,
 8 |   });
 9 |   return new OpenAIApi(configuration);
10 | }
11 | 
12 | export async function createChatCompletion(
13 |   apiKey: string,
14 |   messages: ChatCompletionRequestMessage[]
15 | ) {
16 |   const settings = await db.settings.get("general");
17 |   const model = settings?.openAiModel ?? defaultModel;
18 | 
19 |   const client = getClient(apiKey);
20 |   return client.createChatCompletion({
21 |     model,
22 |     stream: false,
23 |     messages,
24 |   });
25 | }
26 | 
27 | export async function checkOpenAIKey(apiKey: string) {
28 |   return createChatCompletion(apiKey, [
29 |     {
30 |       role: "user",
31 |       content: "hello",
32 |     },
33 |   ]);
34 | }
35 | 


--------------------------------------------------------------------------------
/.github/workflows/docker.yml:
--------------------------------------------------------------------------------
 1 | name: ci-docker
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - "main"
 7 | 
 8 |   workflow_dispatch:
 9 | 
10 | jobs:
11 |   docker:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - name: Checkout
15 |         uses: actions/checkout@v3
16 |       - name: Setup Node.js
17 |         uses: actions/setup-node@v3
18 |         with:
19 |           node-version: 16
20 |           cache: 'npm'
21 |       - run: npm ci
22 |       - run: npm run build
23 |       - name: Setup QEMU
24 |         uses: docker/setup-qemu-action@v2
25 |       - name: Setup Docker Buildx
26 |         uses: docker/setup-buildx-action@v2
27 |       - name: Login to Github Container Registry
28 |         uses: docker/login-action@v2
29 |         with:
30 |           registry: ghcr.io
31 |           username: ${{ github.repository_owner }}
32 |           password: ${{ secrets.CR_PAT }}
33 |       - name: Build and push
34 |         uses: docker/build-push-action@v4
35 |         with:
36 |           context: .
37 |           push: true
38 |           platforms: linux/amd64,linux/arm64
39 |           tags: ghcr.io/${{ github.repository }}:${{ github.sha }}, ghcr.io/${{ github.repository }}:latest
40 | 


--------------------------------------------------------------------------------
/src/db/index.ts:
--------------------------------------------------------------------------------
 1 | import Dexie, { Table } from "dexie";
 2 | import "dexie-export-import";
 3 | 
 4 | export interface Chat {
 5 |   id: string;
 6 |   description: string;
 7 |   totalTokens: number;
 8 |   createdAt: Date;
 9 | }
10 | 
11 | export interface Message {
12 |   id: string;
13 |   chatId: string;
14 |   role: "system" | "assistant" | "user";
15 |   content: string;
16 |   createdAt: Date;
17 | }
18 | 
19 | export interface Prompt {
20 |   id: string;
21 |   title: string;
22 |   content: string;
23 |   createdAt: Date;
24 | }
25 | 
26 | export interface Settings {
27 |   id: "general";
28 |   openAiApiKey?: string;
29 |   openAiModel?: string;
30 | }
31 | 
32 | export class Database extends Dexie {
33 |   chats!: Table<Chat>;
34 |   messages!: Table<Message>;
35 |   prompts!: Table<Prompt>;
36 |   settings!: Table<Settings>;
37 | 
38 |   constructor() {
39 |     super("chatpad");
40 |     this.version(2).stores({
41 |       chats: "id, createdAt",
42 |       messages: "id, chatId, createdAt",
43 |       prompts: "id, createdAt",
44 |       settings: "id",
45 |     });
46 | 
47 |     this.on("populate", async () => {
48 |       db.settings.add({
49 |         id: "general",
50 |       });
51 |     });
52 |   }
53 | }
54 | 
55 | export const db = new Database();
56 | 


--------------------------------------------------------------------------------
/src/components/DeleteAllDataModal.tsx:
--------------------------------------------------------------------------------
 1 | import { Button, Modal, Stack, Text } from "@mantine/core";
 2 | import { useDisclosure } from "@mantine/hooks";
 3 | import { IconTrash } from "@tabler/icons-react";
 4 | import { db } from "../db";
 5 | 
 6 | export function DeleteAllDataModal({ onOpen }: { onOpen: () => void }) {
 7 |   const [opened, { open, close }] = useDisclosure(false, { onOpen });
 8 | 
 9 |   return (
10 |     <>
11 |       <Button
12 |         onClick={open}
13 |         variant="outline"
14 |         color="red"
15 |         leftIcon={<IconTrash size={20} />}
16 |       >
17 |         Delete All Data
18 |       </Button>
19 |       <Modal
20 |         opened={opened}
21 |         onClose={close}
22 |         title="Delete All Data"
23 |         size="md"
24 |         withinPortal
25 |       >
26 |         <Stack>
27 |           <Text size="sm">Are you sure you want to delete your data?</Text>
28 |           <Button
29 |             onClick={async () => {
30 |               await db.delete();
31 |               localStorage.clear();
32 |               window.location.assign("/");
33 |             }}
34 |             color="red"
35 |           >
36 |             Delete
37 |           </Button>
38 |         </Stack>
39 |       </Modal>
40 |     </>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/DeleteChatsModal.tsx:
--------------------------------------------------------------------------------
 1 | import { Button, Modal, Stack, Text } from "@mantine/core";
 2 | import { useDisclosure } from "@mantine/hooks";
 3 | import { IconTrash } from "@tabler/icons-react";
 4 | import { db } from "../db";
 5 | 
 6 | export function DeleteChatsModal({ onOpen }: { onOpen: () => void }) {
 7 |   const [opened, { open, close }] = useDisclosure(false, { onOpen });
 8 | 
 9 |   return (
10 |     <>
11 |       <Button
12 |         onClick={open}
13 |         variant="outline"
14 |         color="red"
15 |         leftIcon={<IconTrash size={20} />}
16 |       >
17 |         Delete Chats
18 |       </Button>
19 |       <Modal
20 |         opened={opened}
21 |         onClose={close}
22 |         title="Delete Chats"
23 |         size="md"
24 |         withinPortal
25 |       >
26 |         <Stack>
27 |           <Text size="sm">Are you sure you want to delete your chats?</Text>
28 |           <Button
29 |             onClick={async () => {
30 |               await db.chats.clear();
31 |               await db.messages.clear();
32 |               localStorage.clear();
33 |               window.location.assign("/");
34 |             }}
35 |             color="red"
36 |           >
37 |             Delete
38 |           </Button>
39 |         </Stack>
40 |       </Modal>
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/CharacterCard.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, Grid, Group, Text } from "@mantine/core";
 2 | 
 3 | const CharacterCard = ({
 4 |   character,
 5 |   onClick,
 6 |   selectedIndex,
 7 |   i,
 8 | }: {
 9 |   character: { name: string; description: string };
10 |   onClick: any;
11 |   selectedIndex: number;
12 |   i: number;
13 | }) => {
14 |   const isActive = selectedIndex === i;
15 |   return (
16 |     <Grid.Col xs={6} md={4}>
17 |       <Card
18 |         withBorder
19 |         component="a"
20 |         onClick={onClick}
21 |         sx={(theme) => ({
22 |           cursor: "pointer",
23 |           height: "100%",
24 |           borderColor: isActive
25 |             ? `${theme.colors.blue["5"]} !important`
26 |             : undefined,
27 |           borderRadius: theme.radius.md,
28 |           padding: theme.spacing.lg,
29 |           // boxShadow: theme.shadows.xs,
30 |           ":hover": {
31 |             borderColor: `${theme.colors.blue["5"]} !important`,
32 |           },
33 |         })}
34 |       >
35 |         <Group position="apart" mb="xs">
36 |           <Text weight={500}>{character.name}</Text>
37 |         </Group>
38 | 
39 |         <Text size="sm" color="dimmed">
40 |           {character.description}
41 |         </Text>
42 |       </Card>
43 |     </Grid.Col>
44 |   );
45 | };
46 | 
47 | export default CharacterCard;
48 | 


--------------------------------------------------------------------------------
/src/components/MainLink.tsx:
--------------------------------------------------------------------------------
 1 | import { Group, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
 2 | import { useLiveQuery } from "dexie-react-hooks";
 3 | import { Chat, db } from "../db";
 4 | 
 5 | interface MainLinkProps {
 6 |   icon: React.ReactNode;
 7 |   color: string;
 8 |   label: string;
 9 |   chat: Chat;
10 | }
11 | 
12 | export function MainLink({ icon, color, label, chat }: MainLinkProps) {
13 |   const firstMessage = useLiveQuery(async () => {
14 |     return (await db.messages.orderBy("createdAt").toArray()).filter(
15 |       (m) => m.chatId === chat.id
16 |     )[0];
17 |   }, [chat]);
18 | 
19 |   return (
20 |     <UnstyledButton
21 |       sx={(theme) => ({
22 |         // display: "block",
23 |         width: "100%",
24 |         padding: theme.spacing.xs,
25 |         borderRadius: theme.radius.sm,
26 |         color:
27 |           theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
28 |       })}
29 |     >
30 |       <Group>
31 |         <ThemeIcon color={color} variant="light">
32 |           {icon}
33 |         </ThemeIcon>
34 |         <Text
35 |           size="sm"
36 |           style={{
37 |             textOverflow: "ellipsis",
38 |             whiteSpace: "nowrap",
39 |             overflow: "hidden",
40 |             flex: 1,
41 |             width: 0,
42 |           }}
43 |         >
44 |           {label} <br />
45 |           {firstMessage?.content}
46 |         </Text>
47 |       </Group>
48 |     </UnstyledButton>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chatpad",
 3 |   "private": true,
 4 |   "source": "src/index.html",
 5 |   "browserslist": "> 0.5%, last 2 versions, not dead",
 6 |   "scripts": {
 7 |     "start": "parcel",
 8 |     "build": "parcel build"
 9 |   },
10 |   "devDependencies": {
11 |     "@parcel/transformer-sass": "^2.8.3",
12 |     "@types/downloadjs": "^1.4.3",
13 |     "@types/lodash": "^4.14.191",
14 |     "@types/react": "^18.0.28",
15 |     "@types/react-dom": "^18.0.11",
16 |     "buffer": "^5.7.1",
17 |     "parcel": "^2.8.3",
18 |     "process": "^0.11.10"
19 |   },
20 |   "dependencies": {
21 |     "@emotion/react": "^11.10.6",
22 |     "@emotion/server": "^11.10.0",
23 |     "@mantine/core": "^6.0.1",
24 |     "@mantine/hooks": "^6.0.1",
25 |     "@mantine/next": "^6.0.1",
26 |     "@mantine/notifications": "^6.0.1",
27 |     "@tabler/icons-react": "^2.9.0",
28 |     "@tanstack/react-location": "^3.7.4",
29 |     "@types/node": "18.15.0",
30 |     "@types/react": "18.0.28",
31 |     "@types/react-dom": "18.0.11",
32 |     "dexie": "^3.2.3",
33 |     "dexie-export-import": "^4.0.6",
34 |     "dexie-react-hooks": "^1.1.3",
35 |     "downloadjs": "^1.4.7",
36 |     "eslint": "8.36.0",
37 |     "eslint-config-next": "13.2.4",
38 |     "lodash": "^4.17.21",
39 |     "nanoid": "^4.0.1",
40 |     "next": "13.2.4",
41 |     "openai": "^3.2.1",
42 |     "react": "^18.2.0",
43 |     "react-dom": "^18.2.0",
44 |     "react-icons": "^4.8.0",
45 |     "react-markdown": "^8.0.6",
46 |     "remark-gfm": "^3.0.1",
47 |     "typescript": "4.9.5"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/Chats.tsx:
--------------------------------------------------------------------------------
 1 | import { ActionIcon, Flex, Menu } from "@mantine/core";
 2 | import { IconDotsVertical, IconMessages } from "@tabler/icons-react";
 3 | import { Link } from "@tanstack/react-location";
 4 | import { useLiveQuery } from "dexie-react-hooks";
 5 | import { useMemo } from "react";
 6 | import { db } from "../db";
 7 | import { useChatId } from "../hooks/useChatId";
 8 | import { DeleteChatModal } from "./DeleteChatModal";
 9 | import { EditChatModal } from "./EditChatModal";
10 | import { MainLink } from "./MainLink";
11 | 
12 | export function Chats({ search }: { search: string }) {
13 |   const chatId = useChatId();
14 |   const chats = useLiveQuery(() =>
15 |     db.chats.orderBy("createdAt").reverse().toArray()
16 |   );
17 |   const filteredChats = useMemo(
18 |     () =>
19 |       (chats ?? []).filter((chat) => {
20 |         if (!search) return true;
21 |         return chat.description.toLowerCase().includes(search);
22 |       }),
23 |     [chats, search]
24 |   );
25 | 
26 |   return (
27 |     <>
28 |       {filteredChats.map((chat) => (
29 |         <Flex
30 |           key={chat.id}
31 |           className={chatId === chat.id ? "active" : undefined}
32 |           sx={(theme) => ({
33 |             marginTop: 1,
34 |             "&:hover, &.active": {
35 |               backgroundColor:
36 |                 theme.colorScheme === "dark"
37 |                   ? theme.colors.dark[6]
38 |                   : theme.colors.gray[1],
39 |             },
40 |           })}
41 |         >
42 |           <Link to={`/chats/${chat.id}`} style={{ flex: 1 }}>
43 |             <MainLink
44 |               icon={<IconMessages size="1rem" />}
45 |               color="teal"
46 |               chat={chat}
47 |               label={chat.description}
48 |             />
49 |           </Link>
50 |           <Menu shadow="md" width={200} keepMounted>
51 |             <Menu.Target>
52 |               <ActionIcon sx={{ height: "auto" }}>
53 |                 <IconDotsVertical size={20} />
54 |               </ActionIcon>
55 |             </Menu.Target>
56 |             <Menu.Dropdown>
57 |               <EditChatModal chat={chat}>
58 |                 <Menu.Item>Edit</Menu.Item>
59 |               </EditChatModal>
60 |               <DeleteChatModal chat={chat}>
61 |                 <Menu.Item>Delete</Menu.Item>
62 |               </DeleteChatModal>
63 |             </Menu.Dropdown>
64 |           </Menu>
65 |         </Flex>
66 |       ))}
67 |     </>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/EditChatModal.tsx:
--------------------------------------------------------------------------------
 1 | import { Button, Modal, Stack, TextInput } from "@mantine/core";
 2 | import { useDisclosure } from "@mantine/hooks";
 3 | import { notifications } from "@mantine/notifications";
 4 | import { cloneElement, ReactElement, useEffect, useState } from "react";
 5 | import { Chat, db } from "../db";
 6 | 
 7 | export function EditChatModal({
 8 |   chat,
 9 |   children,
10 | }: {
11 |   chat: Chat;
12 |   children: ReactElement;
13 | }) {
14 |   const [opened, { open, close }] = useDisclosure(false);
15 |   const [submitting, setSubmitting] = useState(false);
16 | 
17 |   const [value, setValue] = useState("");
18 |   useEffect(() => {
19 |     setValue(chat?.description ?? "");
20 |   }, [chat]);
21 | 
22 |   return (
23 |     <>
24 |       {cloneElement(children, { onClick: open })}
25 |       <Modal opened={opened} onClose={close} title="Edit Chat" withinPortal>
26 |         <form
27 |           onSubmit={async (event) => {
28 |             try {
29 |               setSubmitting(true);
30 |               event.preventDefault();
31 |               await db.chats.where({ id: chat.id }).modify((chat) => {
32 |                 chat.description = value;
33 |               });
34 |               notifications.show({
35 |                 title: "Saved",
36 |                 message: "",
37 |               });
38 |               close();
39 |             } catch (error: any) {
40 |               if (error.toJSON().message === "Network Error") {
41 |                 notifications.show({
42 |                   title: "Error",
43 |                   color: "red",
44 |                   message: "No internet connection.",
45 |                 });
46 |               }
47 |               const message = error.response?.data?.error?.message;
48 |               if (message) {
49 |                 notifications.show({
50 |                   title: "Error",
51 |                   color: "red",
52 |                   message,
53 |                 });
54 |               }
55 |             } finally {
56 |               setSubmitting(false);
57 |             }
58 |           }}
59 |         >
60 |           <Stack>
61 |             <TextInput
62 |               label="Name"
63 |               value={value}
64 |               onChange={(event) => setValue(event.currentTarget.value)}
65 |               formNoValidate
66 |               data-autofocus
67 |             />
68 |             <Button type="submit" loading={submitting}>
69 |               Save
70 |             </Button>
71 |           </Stack>
72 |         </form>
73 |       </Modal>
74 |     </>
75 |   );
76 | }
77 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Chatpad AI](./banner.png)
 2 | 
 3 | <h1 align="center">Chatpad AI</h1>
 4 | <h2 align="center">Premium quality UI for ChatGPT</h2>
 5 | <!-- <p align="center"><a href="https://chatpad.ai">Web App</a> & <a href="https://download.chatpad.ai">Desktop App</a></p> -->
 6 | <p align="center"><a href="https://chatpad.ai">Web App</a> & <a href="https://dl.todesktop.com/230313oyppkw40a">Desktop App</a></p>
 7 | 
 8 | Recently, there has been a surge of UIs for ChatGPT, making it the new "to-do app" that everyone wants to try their hand at. Chatpad sets itself apart with a broader vision - to become the ultimate interface for ChatGPT users.
 9 | 
10 | ### ⚡️ Free and open source
11 | 
12 | This app is provided for free and the source code is available on GitHub.
13 | 
14 | ### 🔒 Privacy focused
15 | 
16 | No tracking, no cookies, no bullshit. All your data is stored locally.
17 | 
18 | ### ✨ Best experience
19 | 
20 | Crafted with love and care to provide the best experience possible.
21 | 
22 | ---
23 | 
24 | ## Self-host using Docker
25 | 
26 | ```
27 | docker run --name chatpad -d -p 1234:80 ghcr.io/deiucanta/chatpad:latest
28 | ```
29 | 
30 | ## One click Deployments
31 | 
32 | <!-- Easypanel -->
33 | [![Deploy on Easypanel](https://easypanel.io/img/deploy-on-easypanel-40.svg)](https://easypanel.io/docs/templates/chatpad)
34 | 
35 | <!-- Netlify -->
36 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/deiucanta/chatpad)
37 | 
38 | <!-- Vercel -->
39 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdeiucanta%2Fchatpad&project-name=chatpad&repository-name=chatpad-vercel&demo-title=Chatpad&demo-description=The%20Official%20Chatpad%20Website&demo-url=https%3A%2F%2Fchatpad.ai&demo-image=https%3A%2F%2Fraw.githubusercontent.com%2Fdeiucanta%2Fchatpad%2Fmain%2Fbanner.png)
40 | 
41 | <!-- Railway -->
42 | [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/Ak6DUw?referralCode=9M8r62)
43 | 
44 | 
45 | 
46 | 
47 | ## Give Feedback
48 | 
49 | If you have any feature requests or bug reports, go to [feedback.chatpad.ai](https://feedback.chatpad.ai).
50 | 
51 | ## Contribute
52 | 
53 | This is a React.js application. Clone the project, run `npm i` and `npm start` and you're good to go.
54 | 
55 | ## Credits
56 | 
57 | - [ToDesktop](https://todesktop.com) - A simple way to make your web app into a beautiful desktop app
58 | - [DexieJS](https://dexie.org) - A Minimalistic Wrapper for IndexedDB
59 | - [Mantine](https://mantine.dev) - A fully featured React component library
60 | 


--------------------------------------------------------------------------------
/src/components/DeletePromptModal.tsx:
--------------------------------------------------------------------------------
 1 | import { ActionIcon, Button, Modal, Stack, Text, Tooltip } from "@mantine/core";
 2 | import { useDisclosure } from "@mantine/hooks";
 3 | import { notifications } from "@mantine/notifications";
 4 | import { IconTrash } from "@tabler/icons-react";
 5 | import { useNavigate } from "@tanstack/react-location";
 6 | import { useEffect, useState } from "react";
 7 | import { db, Prompt } from "../db";
 8 | import { useApiKey } from "../hooks/useApiKey";
 9 | import { useChatId } from "../hooks/useChatId";
10 | 
11 | export function DeletePromptModal({ prompt }: { prompt: Prompt }) {
12 |   const [opened, { open, close }] = useDisclosure(false);
13 |   const [submitting, setSubmitting] = useState(false);
14 | 
15 |   const [key, setKey] = useApiKey();
16 | 
17 |   const [value, setValue] = useState("");
18 |   useEffect(() => {
19 |     setValue(key);
20 |   }, [key]);
21 |   const chatId = useChatId();
22 |   const navigate = useNavigate();
23 | 
24 |   return (
25 |     <>
26 |       <Modal opened={opened} onClose={close} title="Delete Prompt" size="md">
27 |         <form
28 |           onSubmit={async (event) => {
29 |             try {
30 |               setSubmitting(true);
31 |               event.preventDefault();
32 |               await db.prompts.where({ id: prompt.id }).delete();
33 |               close();
34 | 
35 |               notifications.show({
36 |                 title: "Deleted",
37 |                 message: "Chat deleted.",
38 |               });
39 |             } catch (error: any) {
40 |               if (error.toJSON().message === "Network Error") {
41 |                 notifications.show({
42 |                   title: "Error",
43 |                   color: "red",
44 |                   message: "No internet connection.",
45 |                 });
46 |               } else {
47 |                 notifications.show({
48 |                   title: "Error",
49 |                   color: "red",
50 |                   message:
51 |                     "Can't remove chat. Please refresh the page and try again.",
52 |                 });
53 |               }
54 |             } finally {
55 |               setSubmitting(false);
56 |             }
57 |           }}
58 |         >
59 |           <Stack>
60 |             <Text size="sm">Are you sure you want to delete this prompt?</Text>
61 |             <Button type="submit" color="red" loading={submitting}>
62 |               Delete
63 |             </Button>
64 |           </Stack>
65 |         </form>
66 |       </Modal>
67 |       <Tooltip label="Delete Prompt">
68 |         <ActionIcon color="red" size="lg" onClick={open}>
69 |           <IconTrash size={20} />
70 |         </ActionIcon>
71 |       </Tooltip>
72 |     </>
73 |   );
74 | }
75 | 


--------------------------------------------------------------------------------
/src/components/DeleteChatModal.tsx:
--------------------------------------------------------------------------------
 1 | import { Button, Modal, Stack, Text } from "@mantine/core";
 2 | import { useDisclosure } from "@mantine/hooks";
 3 | import { notifications } from "@mantine/notifications";
 4 | import { useNavigate } from "@tanstack/react-location";
 5 | import { cloneElement, ReactElement, useEffect, useState } from "react";
 6 | import { Chat, db } from "../db";
 7 | import { useApiKey } from "../hooks/useApiKey";
 8 | import { useChatId } from "../hooks/useChatId";
 9 | 
10 | export function DeleteChatModal({
11 |   chat,
12 |   children,
13 | }: {
14 |   chat: Chat;
15 |   children: ReactElement;
16 | }) {
17 |   const [opened, { open, close }] = useDisclosure(false);
18 |   const [submitting, setSubmitting] = useState(false);
19 | 
20 |   const [key, setKey] = useApiKey();
21 | 
22 |   const [value, setValue] = useState("");
23 |   useEffect(() => {
24 |     setValue(key);
25 |   }, [key]);
26 |   const chatId = useChatId();
27 |   const navigate = useNavigate();
28 | 
29 |   return (
30 |     <>
31 |       {cloneElement(children, { onClick: open })}
32 |       <Modal opened={opened} onClose={close} title="Delete Chat">
33 |         <form
34 |           onSubmit={async (event) => {
35 |             try {
36 |               setSubmitting(true);
37 |               event.preventDefault();
38 |               await db.chats.where({ id: chat.id }).delete();
39 |               await db.messages.where({ chatId: chat.id }).delete();
40 |               if (chatId === chat.id) {
41 |                 navigate({ to: `/` });
42 |               }
43 |               close();
44 | 
45 |               notifications.show({
46 |                 title: "Deleted",
47 |                 message: "Chat deleted.",
48 |               });
49 |             } catch (error: any) {
50 |               if (error.toJSON().message === "Network Error") {
51 |                 notifications.show({
52 |                   title: "Error",
53 |                   color: "red",
54 |                   message: "No internet connection.",
55 |                 });
56 |               } else {
57 |                 notifications.show({
58 |                   title: "Error",
59 |                   color: "red",
60 |                   message:
61 |                     "Can't remove chat. Please refresh the page and try again.",
62 |                 });
63 |               }
64 |             } finally {
65 |               setSubmitting(false);
66 |             }
67 |           }}
68 |         >
69 |           <Stack>
70 |             <Text size="sm">Are you sure you want to delete this chat?</Text>
71 |             <Button type="submit" color="red" loading={submitting}>
72 |               Delete
73 |             </Button>
74 |           </Stack>
75 |         </form>
76 |       </Modal>
77 |     </>
78 |   );
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/EditPromptModal.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ActionIcon,
 3 |   Button,
 4 |   Modal,
 5 |   Stack,
 6 |   Textarea,
 7 |   TextInput,
 8 |   Tooltip,
 9 | } from "@mantine/core";
10 | import { useDisclosure } from "@mantine/hooks";
11 | import { notifications } from "@mantine/notifications";
12 | import { IconPencil } from "@tabler/icons-react";
13 | import { useEffect, useState } from "react";
14 | import { db, Prompt } from "../db";
15 | 
16 | export function EditPromptModal({ prompt }: { prompt: Prompt }) {
17 |   const [opened, { open, close }] = useDisclosure(false);
18 |   const [submitting, setSubmitting] = useState(false);
19 | 
20 |   const [value, setValue] = useState("");
21 |   const [title, setTitle] = useState("");
22 |   useEffect(() => {
23 |     setValue(prompt?.content ?? "");
24 |     setTitle(prompt?.title ?? "");
25 |   }, [prompt]);
26 | 
27 |   return (
28 |     <>
29 |       <Modal opened={opened} onClose={close} title="Edit Prompt" size="lg">
30 |         <form
31 |           onSubmit={async (event) => {
32 |             try {
33 |               setSubmitting(true);
34 |               event.preventDefault();
35 |               await db.prompts.where({ id: prompt.id }).modify((chat) => {
36 |                 chat.title = title;
37 |                 chat.content = value;
38 |               });
39 |               notifications.show({
40 |                 title: "Saved",
41 |                 message: "Prompt updated",
42 |               });
43 |             } catch (error: any) {
44 |               if (error.toJSON().message === "Network Error") {
45 |                 notifications.show({
46 |                   title: "Error",
47 |                   color: "red",
48 |                   message: "No internet connection.",
49 |                 });
50 |               }
51 |               const message = error.response?.data?.error?.message;
52 |               if (message) {
53 |                 notifications.show({
54 |                   title: "Error",
55 |                   color: "red",
56 |                   message,
57 |                 });
58 |               }
59 |             } finally {
60 |               setSubmitting(false);
61 |             }
62 |           }}
63 |         >
64 |           <Stack>
65 |             <TextInput
66 |               label="Title"
67 |               value={title}
68 |               onChange={(event) => setTitle(event.currentTarget.value)}
69 |               formNoValidate
70 |               data-autofocus
71 |             />
72 |             <Textarea
73 |               label="Content"
74 |               autosize
75 |               minRows={5}
76 |               maxRows={10}
77 |               value={value}
78 |               onChange={(event) => setValue(event.currentTarget.value)}
79 |             />
80 |             <Button type="submit" loading={submitting}>
81 |               Save
82 |             </Button>
83 |           </Stack>
84 |         </form>
85 |       </Modal>
86 |       <Tooltip label="Edit Prompt">
87 |         <ActionIcon size="lg" onClick={open}>
88 |           <IconPencil size={20} />
89 |         </ActionIcon>
90 |       </Tooltip>
91 |     </>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/routes/IndexRoute.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Badge,
  3 |   Button,
  4 |   Center,
  5 |   Container,
  6 |   Group,
  7 |   SimpleGrid,
  8 |   Text,
  9 |   ThemeIcon,
 10 | } from "@mantine/core";
 11 | import {
 12 |   IconCloudDownload,
 13 |   IconCurrencyDollar,
 14 |   IconKey,
 15 |   IconLock,
 16 |   IconNorthStar,
 17 | } from "@tabler/icons-react";
 18 | import { useLiveQuery } from "dexie-react-hooks";
 19 | import { Logo } from "../components/Logo";
 20 | import { SettingsModal } from "../components/SettingsModal";
 21 | import { db } from "../db";
 22 | 
 23 | export function IndexRoute() {
 24 |   const settings = useLiveQuery(() => db.settings.get("general"));
 25 |   const { openAiApiKey } = settings ?? {};
 26 | 
 27 |   return (
 28 |     <>
 29 |       <Center py="xl" sx={{ height: "100%" }}>
 30 |         <Container size="sm">
 31 |           <Badge mb="lg">GPT-4 Ready</Badge>
 32 |           <Text>
 33 |             <Logo style={{ maxWidth: 240 }} />
 34 |           </Text>
 35 |           <Text mt={4} size="xl">
 36 |             Not just another ChatGPT user-interface!
 37 |           </Text>
 38 |           <SimpleGrid
 39 |             mt={50}
 40 |             cols={3}
 41 |             spacing={30}
 42 |             breakpoints={[{ maxWidth: "md", cols: 1 }]}
 43 |           >
 44 |             {features.map((feature) => (
 45 |               <div key={feature.title}>
 46 |                 <ThemeIcon variant="outline" size={50} radius={50}>
 47 |                   <feature.icon size={26} stroke={1.5} />
 48 |                 </ThemeIcon>
 49 |                 <Text mt="sm" mb={7}>
 50 |                   {feature.title}
 51 |                 </Text>
 52 |                 <Text size="sm" color="dimmed" sx={{ lineHeight: 1.6 }}>
 53 |                   {feature.description}
 54 |                 </Text>
 55 |               </div>
 56 |             ))}
 57 |           </SimpleGrid>
 58 |           <Group mt={50}>
 59 |             <SettingsModal>
 60 |               <Button
 61 |                 size="md"
 62 |                 variant={openAiApiKey ? "light" : "filled"}
 63 |                 leftIcon={<IconKey size={20} />}
 64 |               >
 65 |                 {openAiApiKey ? "Change OpenAI Key" : "Enter OpenAI Key"}
 66 |               </Button>
 67 |             </SettingsModal>
 68 |             {!window.todesktop && (
 69 |               <Button
 70 |                 component="a"
 71 |                 href="https://dl.todesktop.com/230313oyppkw40a"
 72 |                 // href="https://download.chatpad.ai/"
 73 |                 size="md"
 74 |                 variant="outline"
 75 |                 leftIcon={<IconCloudDownload size={20} />}
 76 |               >
 77 |                 Download Desktop App
 78 |               </Button>
 79 |             )}
 80 |           </Group>
 81 |         </Container>
 82 |       </Center>
 83 |     </>
 84 |   );
 85 | }
 86 | 
 87 | const features = [
 88 |   {
 89 |     icon: IconCurrencyDollar,
 90 |     title: "Free and open source",
 91 |     description:
 92 |       "This app is provided for free and the source code is available on GitHub.",
 93 |   },
 94 |   {
 95 |     icon: IconLock,
 96 |     title: "Privacy focused",
 97 |     description:
 98 |       "No tracking, no cookies, no bullshit. All your data is stored locally.",
 99 |   },
100 |   {
101 |     icon: IconNorthStar,
102 |     title: "Best experience",
103 |     description:
104 |       "Crafted with love and care to provide the best experience possible.",
105 |   },
106 | ];
107 | 


--------------------------------------------------------------------------------
/src/components/CreatePromptModal.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ActionIcon,
  3 |   Button,
  4 |   Modal,
  5 |   Stack,
  6 |   Textarea,
  7 |   TextInput,
  8 |   Tooltip,
  9 | } from "@mantine/core";
 10 | import { useDisclosure } from "@mantine/hooks";
 11 | import { notifications } from "@mantine/notifications";
 12 | import { IconPlaylistAdd, IconPlus } from "@tabler/icons-react";
 13 | import { nanoid } from "nanoid";
 14 | import { useEffect, useState } from "react";
 15 | import { db } from "../db";
 16 | 
 17 | export function CreatePromptModal({ content }: { content?: string }) {
 18 |   const [opened, { open, close }] = useDisclosure(false);
 19 |   const [submitting, setSubmitting] = useState(false);
 20 | 
 21 |   const [value, setValue] = useState("");
 22 |   const [title, setTitle] = useState("");
 23 |   useEffect(() => {
 24 |     setValue(content ?? "");
 25 |   }, [content]);
 26 | 
 27 |   return (
 28 |     <>
 29 |       {content ? (
 30 |         <Tooltip label="Save Prompt" position="left">
 31 |           <ActionIcon onClick={open}>
 32 |             <IconPlaylistAdd opacity={0.5} size={20} />
 33 |           </ActionIcon>
 34 |         </Tooltip>
 35 |       ) : (
 36 |         <Button fullWidth onClick={open} leftIcon={<IconPlus size={20} />}>
 37 |           New Prompt
 38 |         </Button>
 39 |       )}
 40 |       <Modal opened={opened} onClose={close} title="Create Prompt" size="lg">
 41 |         <form
 42 |           onSubmit={async (event) => {
 43 |             try {
 44 |               setSubmitting(true);
 45 |               event.preventDefault();
 46 |               const id = nanoid();
 47 |               db.prompts.add({
 48 |                 id,
 49 |                 title,
 50 |                 content: value,
 51 |                 createdAt: new Date(),
 52 |               });
 53 |               notifications.show({
 54 |                 title: "Saved",
 55 |                 message: "Prompt created",
 56 |               });
 57 |               close();
 58 |             } catch (error: any) {
 59 |               if (error.toJSON().message === "Network Error") {
 60 |                 notifications.show({
 61 |                   title: "Error",
 62 |                   color: "red",
 63 |                   message: "No internet connection.",
 64 |                 });
 65 |               }
 66 |               const message = error.response?.data?.error?.message;
 67 |               if (message) {
 68 |                 notifications.show({
 69 |                   title: "Error",
 70 |                   color: "red",
 71 |                   message,
 72 |                 });
 73 |               }
 74 |             } finally {
 75 |               setSubmitting(false);
 76 |             }
 77 |           }}
 78 |         >
 79 |           <Stack>
 80 |             <TextInput
 81 |               label="Title"
 82 |               value={title}
 83 |               onChange={(event) => setTitle(event.currentTarget.value)}
 84 |               formNoValidate
 85 |               data-autofocus
 86 |             />
 87 |             <Textarea
 88 |               placeholder="Content"
 89 |               autosize
 90 |               minRows={5}
 91 |               maxRows={10}
 92 |               value={value}
 93 |               onChange={(event) => setValue(event.currentTarget.value)}
 94 |             />
 95 |             <Button type="submit" loading={submitting}>
 96 |               Save
 97 |             </Button>
 98 |           </Stack>
 99 |         </form>
100 |       </Modal>
101 |     </>
102 |   );
103 | }
104 | 


--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ColorScheme,
  3 |   ColorSchemeProvider,
  4 |   MantineProvider,
  5 | } from "@mantine/core";
  6 | import { useHotkeys, useLocalStorage } from "@mantine/hooks";
  7 | import { Notifications } from "@mantine/notifications";
  8 | import {
  9 |   createHashHistory,
 10 |   ReactLocation,
 11 |   Router,
 12 | } from "@tanstack/react-location";
 13 | import { ChatRoute } from "../routes/ChatRoute";
 14 | import { IndexRoute } from "../routes/IndexRoute";
 15 | import { Layout } from "./Layout";
 16 | 
 17 | const history = createHashHistory();
 18 | const location = new ReactLocation({ history });
 19 | 
 20 | export function App() {
 21 |   const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 22 | 
 23 |   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
 24 |     key: "mantine-color-scheme",
 25 |     defaultValue: prefersDark ? "dark" : "light",
 26 |     getInitialValueInEffect: true,
 27 |   });
 28 | 
 29 |   const toggleColorScheme = (value?: ColorScheme) =>
 30 |     setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
 31 | 
 32 |   useHotkeys([["mod+J", () => toggleColorScheme()]]);
 33 | 
 34 |   return (
 35 |     <Router
 36 |       location={location}
 37 |       routes={[
 38 |         { path: "/", element: <IndexRoute /> },
 39 |         { path: "/chats/:chatId", element: <ChatRoute /> },
 40 |       ]}
 41 |     >
 42 |       <ColorSchemeProvider
 43 |         colorScheme={colorScheme}
 44 |         toggleColorScheme={toggleColorScheme}
 45 |       >
 46 |         <MantineProvider
 47 |           withGlobalStyles
 48 |           withNormalizeCSS
 49 |           withCSSVariables
 50 |           theme={{
 51 |             colorScheme,
 52 |             primaryColor: "teal",
 53 |             globalStyles: (theme) => ({
 54 |               body: {
 55 |                 backgroundColor:
 56 |                   theme.colorScheme === "dark"
 57 |                     ? theme.colors.dark[9]
 58 |                     : theme.colors.gray[0],
 59 |               },
 60 |             }),
 61 |             components: {
 62 |               Modal: {
 63 |                 defaultProps: {
 64 |                   padding: "xl",
 65 |                 },
 66 |                 styles: {
 67 |                   title: {
 68 |                     fontSize: "1.2rem",
 69 |                     fontWeight: 600,
 70 |                   },
 71 |                 },
 72 |               },
 73 |               ModalRoot: {
 74 |                 defaultProps: {
 75 |                   centered: true,
 76 |                 },
 77 |               },
 78 |               Overlay: {
 79 |                 defaultProps: {
 80 |                   opacity: 0.6,
 81 |                   blur: 6,
 82 |                 },
 83 |               },
 84 |               // Input: {
 85 |               //   defaultProps: {
 86 |               //     variant: "filled",
 87 |               //   },
 88 |               // },
 89 |               InputWrapper: {
 90 |                 styles: {
 91 |                   label: {
 92 |                     marginBottom: 4,
 93 |                   },
 94 |                 },
 95 |               },
 96 |               Code: {
 97 |                 styles: (theme) => ({
 98 |                   root: {
 99 |                     fontSize: theme.fontSizes.sm,
100 |                     backgroundColor:
101 |                       theme.colorScheme == "dark"
102 |                         ? theme.colors.dark[7]
103 |                         : theme.colors.gray[1],
104 |                   },
105 |                 }),
106 |               },
107 |             },
108 |           }}
109 |         >
110 |           <Layout />
111 |           <Notifications />
112 |         </MantineProvider>
113 |       </ColorSchemeProvider>
114 |     </Router>
115 |   );
116 | }
117 | 


--------------------------------------------------------------------------------
/src/components/MessageItem.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ActionIcon,
  3 |   Box,
  4 |   Card,
  5 |   Code,
  6 |   CopyButton,
  7 |   Flex,
  8 |   Table,
  9 |   Text,
 10 |   ThemeIcon,
 11 |   Tooltip,
 12 | } from "@mantine/core";
 13 | import { useClipboard } from "@mantine/hooks";
 14 | import { IconCopy, IconUser } from "@tabler/icons-react";
 15 | import { useMemo } from "react";
 16 | import ReactMarkdown from "react-markdown";
 17 | import remarkGfm from "remark-gfm";
 18 | import { Message } from "../db";
 19 | import "../styles/markdown.scss";
 20 | import { CreatePromptModal } from "./CreatePromptModal";
 21 | import { LogoIcon } from "./Logo";
 22 | import { ScrollIntoView } from "./ScrollIntoView";
 23 | 
 24 | export function MessageItem({ message }: { message: Message }) {
 25 |   const clipboard = useClipboard({ timeout: 500 });
 26 |   const wordCount = useMemo(() => {
 27 |     var matches = message.content.match(/[\w\d\’\'-\(\)]+/gi);
 28 |     return matches ? matches.length : 0;
 29 |   }, [message.content]);
 30 | 
 31 |   return (
 32 |     <ScrollIntoView>
 33 |       <Card withBorder>
 34 |         <Flex gap="sm">
 35 |           {message.role === "user" && (
 36 |             <ThemeIcon color="gray" size="lg">
 37 |               <IconUser size={20} />
 38 |             </ThemeIcon>
 39 |           )}
 40 |           {message.role === "assistant" && <LogoIcon style={{ height: 32 }} />}
 41 |           <Box sx={{ flex: 1, width: 0 }} className="markdown">
 42 |             <ReactMarkdown
 43 |               children={message.content}
 44 |               remarkPlugins={[remarkGfm]}
 45 |               components={{
 46 |                 table: ({ node, ...props }) => (
 47 |                   <Table verticalSpacing="sm" highlightOnHover {...props} />
 48 |                 ),
 49 |                 code: ({ node, inline, ...props }) =>
 50 |                   inline ? (
 51 |                     <Code {...props} />
 52 |                   ) : (
 53 |                     <Box sx={{ position: "relative" }}>
 54 |                       <Code block {...props} />
 55 |                       <CopyButton value={String(props.children)}>
 56 |                         {({ copied, copy }) => (
 57 |                           <Tooltip
 58 |                             label={copied ? "Copied" : "Copy"}
 59 |                             position="left"
 60 |                           >
 61 |                             <ActionIcon
 62 |                               sx={{ position: "absolute", top: 4, right: 4 }}
 63 |                               onClick={copy}
 64 |                             >
 65 |                               <IconCopy opacity={0.4} size={20} />
 66 |                             </ActionIcon>
 67 |                           </Tooltip>
 68 |                         )}
 69 |                       </CopyButton>
 70 |                     </Box>
 71 |                   ),
 72 |               }}
 73 |             />
 74 |             {message.role === "assistant" && (
 75 |               <Box>
 76 |                 <Text size="sm" color="dimmed">
 77 |                   {wordCount} words
 78 |                 </Text>
 79 |               </Box>
 80 |             )}
 81 |           </Box>
 82 |           <Box>
 83 |             <CreatePromptModal content={message.content} />
 84 |             <CopyButton value={message.content}>
 85 |               {({ copied, copy }) => (
 86 |                 <Tooltip label={copied ? "Copied" : "Copy"} position="left">
 87 |                   <ActionIcon onClick={copy}>
 88 |                     <IconCopy opacity={0.5} size={20} />
 89 |                   </ActionIcon>
 90 |                 </Tooltip>
 91 |               )}
 92 |             </CopyButton>
 93 |             {/* <Tooltip label={`${wordCount} words`} position="left">
 94 |               <ActionIcon>
 95 |                 <IconInfoCircle opacity={0.5} size={20} />
 96 |               </ActionIcon>
 97 |             </Tooltip> */}
 98 |           </Box>
 99 |         </Flex>
100 |       </Card>
101 |     </ScrollIntoView>
102 |   );
103 | }
104 | 


--------------------------------------------------------------------------------
/src/components/SettingsModal.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Alert,
  3 |   Anchor,
  4 |   Button,
  5 |   Flex,
  6 |   List,
  7 |   Modal,
  8 |   PasswordInput,
  9 |   Select,
 10 |   Stack,
 11 |   Text,
 12 | } from "@mantine/core";
 13 | import { useDisclosure } from "@mantine/hooks";
 14 | import { notifications } from "@mantine/notifications";
 15 | import { useLiveQuery } from "dexie-react-hooks";
 16 | import { cloneElement, ReactElement, useEffect, useState } from "react";
 17 | import { db } from "../db";
 18 | import { availableModels, defaultModel } from "../utils/constants";
 19 | import { checkOpenAIKey } from "../utils/openai";
 20 | 
 21 | export function SettingsModal({ children }: { children: ReactElement }) {
 22 |   const [opened, { open, close }] = useDisclosure(false);
 23 |   const [submitting, setSubmitting] = useState(false);
 24 | 
 25 |   const [value, setValue] = useState("");
 26 |   const [model, setModel] = useState(defaultModel);
 27 | 
 28 |   const settings = useLiveQuery(async () => {
 29 |     return db.settings.where({ id: "general" }).first();
 30 |   });
 31 | 
 32 |   useEffect(() => {
 33 |     if (settings?.openAiApiKey) {
 34 |       setValue(settings.openAiApiKey);
 35 |     }
 36 |     if (settings?.openAiModel) {
 37 |       setModel(settings.openAiModel);
 38 |     }
 39 |   }, [settings]);
 40 | 
 41 |   return (
 42 |     <>
 43 |       {cloneElement(children, { onClick: open })}
 44 |       <Modal opened={opened} onClose={close} title="Settings" size="lg">
 45 |         <Stack>
 46 |           <form
 47 |             onSubmit={async (event) => {
 48 |               try {
 49 |                 setSubmitting(true);
 50 |                 event.preventDefault();
 51 |                 await checkOpenAIKey(value);
 52 |                 await db.settings.where({ id: "general" }).modify((apiKey) => {
 53 |                   apiKey.openAiApiKey = value;
 54 |                   console.log(apiKey);
 55 |                 });
 56 |                 notifications.show({
 57 |                   title: "Saved",
 58 |                   message: "Your OpenAI Key has been saved.",
 59 |                 });
 60 |               } catch (error: any) {
 61 |                 if (error.toJSON().message === "Network Error") {
 62 |                   notifications.show({
 63 |                     title: "Error",
 64 |                     color: "red",
 65 |                     message: "No internet connection.",
 66 |                   });
 67 |                 }
 68 |                 const message = error.response?.data?.error?.message;
 69 |                 if (message) {
 70 |                   notifications.show({
 71 |                     title: "Error",
 72 |                     color: "red",
 73 |                     message,
 74 |                   });
 75 |                 }
 76 |               } finally {
 77 |                 setSubmitting(false);
 78 |               }
 79 |             }}
 80 |           >
 81 |             <Flex gap="xs" align="end">
 82 |               <PasswordInput
 83 |                 label="OpenAI API Key"
 84 |                 placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
 85 |                 sx={{ flex: 1 }}
 86 |                 value={value}
 87 |                 onChange={(event) => setValue(event.currentTarget.value)}
 88 |                 formNoValidate
 89 |               />
 90 |               <Button type="submit" loading={submitting}>
 91 |                 Save
 92 |               </Button>
 93 |             </Flex>
 94 |           </form>
 95 |           <List withPadding>
 96 |             <List.Item>
 97 |               <Text size="sm">
 98 |                 <Anchor
 99 |                   href="https://platform.openai.com/account/api-keys"
100 |                   target="_blank"
101 |                 >
102 |                   Get your OpenAI API key
103 |                 </Anchor>
104 |               </Text>
105 |             </List.Item>
106 |             <List.Item>
107 |               <Text size="sm" color="dimmed">
108 |                 The API Key is stored locally on your browser and never sent
109 |                 anywhere else.
110 |               </Text>
111 |             </List.Item>
112 |           </List>
113 |           <Select
114 |             label="OpenAI Model"
115 |             value={model}
116 |             onChange={(value) => {
117 |               db.settings.update("general", {
118 |                 openAiModel: value ?? undefined,
119 |               });
120 |             }}
121 |             withinPortal
122 |             data={availableModels}
123 |           />
124 |           <Alert color="orange" title="Warning">
125 |             The displayed cost was not updated yet to reflect the costs for each
126 |             model. Right now it will always show the cost for GPT-3.5.
127 |           </Alert>
128 |         </Stack>
129 |       </Modal>
130 |     </>
131 |   );
132 | }
133 | 


--------------------------------------------------------------------------------
/src/components/Prompts.tsx:
--------------------------------------------------------------------------------
  1 | import { ActionIcon, Box, Flex, Group, Text, Tooltip } from "@mantine/core";
  2 | import { IconPlayerPlay } from "@tabler/icons-react";
  3 | import { useNavigate } from "@tanstack/react-location";
  4 | import { useLiveQuery } from "dexie-react-hooks";
  5 | import { nanoid } from "nanoid";
  6 | import { useMemo } from "react";
  7 | import { db } from "../db";
  8 | import { createChatCompletion } from "../utils/openai";
  9 | import { DeletePromptModal } from "./DeletePromptModal";
 10 | import { EditPromptModal } from "./EditPromptModal";
 11 | 
 12 | export function Prompts({
 13 |   onPlay,
 14 |   search,
 15 | }: {
 16 |   onPlay: () => void;
 17 |   search: string;
 18 | }) {
 19 |   const navigate = useNavigate();
 20 |   const prompts = useLiveQuery(() =>
 21 |     db.prompts.orderBy("createdAt").reverse().toArray()
 22 |   );
 23 |   const filteredPrompts = useMemo(
 24 |     () =>
 25 |       (prompts ?? []).filter((prompt) => {
 26 |         if (!search) return true;
 27 |         return (
 28 |           prompt.title.toLowerCase().includes(search) ||
 29 |           prompt.content.toLowerCase().includes(search)
 30 |         );
 31 |       }),
 32 |     [prompts, search]
 33 |   );
 34 |   const apiKey = useLiveQuery(async () => {
 35 |     return (await db.settings.where({ id: "general" }).first())?.openAiApiKey;
 36 |   });
 37 | 
 38 |   return (
 39 |     <>
 40 |       {filteredPrompts.map((prompt) => (
 41 |         <Flex
 42 |           key={prompt.id}
 43 |           sx={(theme) => ({
 44 |             marginTop: 1,
 45 |             padding: theme.spacing.xs,
 46 |             "&:hover": {
 47 |               backgroundColor:
 48 |                 theme.colorScheme === "dark"
 49 |                   ? theme.colors.dark[6]
 50 |                   : theme.colors.gray[1],
 51 |             },
 52 |           })}
 53 |         >
 54 |           <Box
 55 |             sx={(theme) => ({
 56 |               flexGrow: 1,
 57 |               width: 0,
 58 |               fontSize: theme.fontSizes.sm,
 59 |             })}
 60 |           >
 61 |             <Text
 62 |               weight={500}
 63 |               sx={{
 64 |                 textOverflow: "ellipsis",
 65 |                 whiteSpace: "nowrap",
 66 |                 overflow: "hidden",
 67 |               }}
 68 |             >
 69 |               {prompt.title}
 70 |             </Text>
 71 |             <Text
 72 |               color="dimmed"
 73 |               sx={{
 74 |                 textOverflow: "ellipsis",
 75 |                 whiteSpace: "nowrap",
 76 |                 overflow: "hidden",
 77 |               }}
 78 |             >
 79 |               {prompt.content}
 80 |             </Text>
 81 |           </Box>
 82 |           <Group spacing="none">
 83 |             <Tooltip label="New Chat From Prompt">
 84 |               <ActionIcon
 85 |                 size="lg"
 86 |                 onClick={async () => {
 87 |                   if (!apiKey) return;
 88 |                   const id = nanoid();
 89 |                   await db.chats.add({
 90 |                     id,
 91 |                     description: "New Chat",
 92 |                     totalTokens: 0,
 93 |                     createdAt: new Date(),
 94 |                   });
 95 |                   await db.messages.add({
 96 |                     id: nanoid(),
 97 |                     chatId: id,
 98 |                     content: prompt.content,
 99 |                     role: "user",
100 |                     createdAt: new Date(),
101 |                   });
102 |                   navigate({ to: `/chats/${id}` });
103 |                   onPlay();
104 | 
105 |                   const result = await createChatCompletion(apiKey, [
106 |                     {
107 |                       role: "system",
108 |                       content:
109 |                         "You are ChatGPT, a large language model trained by OpenAI.",
110 |                     },
111 |                     { role: "user", content: prompt.content },
112 |                   ]);
113 | 
114 |                   const resultDescription =
115 |                     result.data.choices[0].message?.content;
116 |                   await db.messages.add({
117 |                     id: nanoid(),
118 |                     chatId: id,
119 |                     content: resultDescription ?? "unknown reponse",
120 |                     role: "assistant",
121 |                     createdAt: new Date(),
122 |                   });
123 | 
124 |                   if (result.data.usage) {
125 |                     await db.chats.where({ id: id }).modify((chat) => {
126 |                       if (chat.totalTokens) {
127 |                         chat.totalTokens += result.data.usage!.total_tokens;
128 |                       } else {
129 |                         chat.totalTokens = result.data.usage!.total_tokens;
130 |                       }
131 |                     });
132 |                   }
133 |                 }}
134 |               >
135 |                 <IconPlayerPlay size={20} />
136 |               </ActionIcon>
137 |             </Tooltip>
138 |             <EditPromptModal prompt={prompt} />
139 |             <DeletePromptModal prompt={prompt} />
140 |           </Group>
141 |         </Flex>
142 |       ))}
143 |     </>
144 |   );
145 | }
146 | 


--------------------------------------------------------------------------------
/src/components/DatabaseModal.tsx:
--------------------------------------------------------------------------------
  1 | import { Button, Card, Flex, Group, Modal, Stack, Text } from "@mantine/core";
  2 | import { useDisclosure } from "@mantine/hooks";
  3 | import { notifications } from "@mantine/notifications";
  4 | import { IconDatabaseExport, IconDatabaseImport } from "@tabler/icons-react";
  5 | import { useLiveQuery } from "dexie-react-hooks";
  6 | import download from "downloadjs";
  7 | import { cloneElement, ReactElement } from "react";
  8 | import { db } from "../db";
  9 | import { DeleteAllDataModal } from "./DeleteAllDataModal";
 10 | import { DeleteChatsModal } from "./DeleteChatsModal";
 11 | 
 12 | export function DatabaseModal({ children }: { children: ReactElement }) {
 13 |   const [opened, { open, close }] = useDisclosure(false);
 14 |   const chatsCount = useLiveQuery(async () => {
 15 |     return (await db.chats.toArray()).length;
 16 |   }, []);
 17 |   const messagesCount = useLiveQuery(async () => {
 18 |     return (await db.messages.toArray()).length;
 19 |   }, []);
 20 |   const promptsCount = useLiveQuery(async () => {
 21 |     return (await db.prompts.toArray()).length;
 22 |   });
 23 | 
 24 |   return (
 25 |     <>
 26 |       {cloneElement(children, { onClick: open })}
 27 |       <Modal
 28 |         opened={opened}
 29 |         onClose={close}
 30 |         title="Database"
 31 |         size="lg"
 32 |         withinPortal
 33 |         keepMounted
 34 |       >
 35 |         <Stack>
 36 |           <Flex>
 37 |             <Card withBorder sx={{ flex: 1 }}>
 38 |               <Text size="xl" align="center">
 39 |                 {chatsCount}
 40 |               </Text>
 41 |               <Text
 42 |                 size="xs"
 43 |                 color="dimmed"
 44 |                 align="center"
 45 |                 tt="uppercase"
 46 |                 fw={700}
 47 |               >
 48 |                 Chats
 49 |               </Text>
 50 |             </Card>
 51 |             <Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
 52 |               <Text size="xl" align="center">
 53 |                 {messagesCount}
 54 |               </Text>
 55 |               <Text
 56 |                 size="xs"
 57 |                 color="dimmed"
 58 |                 align="center"
 59 |                 tt="uppercase"
 60 |                 fw={700}
 61 |               >
 62 |                 Messages
 63 |               </Text>
 64 |             </Card>
 65 |             <Card withBorder sx={{ flex: 1, marginLeft: -1 }}>
 66 |               <Text size="xl" align="center">
 67 |                 {promptsCount}
 68 |               </Text>
 69 |               <Text
 70 |                 size="xs"
 71 |                 color="dimmed"
 72 |                 align="center"
 73 |                 tt="uppercase"
 74 |                 fw={700}
 75 |               >
 76 |                 Prompts
 77 |               </Text>
 78 |             </Card>
 79 |           </Flex>
 80 |           <Group>
 81 |             <Button
 82 |               variant="default"
 83 |               leftIcon={<IconDatabaseExport size={20} />}
 84 |               onClick={async () => {
 85 |                 const blob = await db.export();
 86 |                 download(
 87 |                   blob,
 88 |                   `chatpad-export-${new Date().toLocaleString()}.json`,
 89 |                   "application/json"
 90 |                 );
 91 |                 notifications.show({
 92 |                   title: "Exporting Data",
 93 |                   message: "Your data is being exported.",
 94 |                 });
 95 |               }}
 96 |             >
 97 |               Export Data
 98 |             </Button>
 99 |             <input
100 |               id="file-upload-btn"
101 |               type="file"
102 |               onChange={async (e) => {
103 |                 const file = e.currentTarget.files?.[0];
104 |                 if (!file) return;
105 |                 db.import(file, {
106 |                   acceptNameDiff: true,
107 |                   overwriteValues: true,
108 |                   acceptMissingTables: true,
109 |                   clearTablesBeforeImport: true,
110 |                 })
111 |                   .then(() => {
112 |                     notifications.show({
113 |                       title: "Importing data",
114 |                       message: "Your data is being imported.",
115 |                     });
116 |                   })
117 |                   .catch((error) => {
118 |                     notifications.show({
119 |                       title: "Error",
120 |                       color: "red",
121 |                       message: "The file you selected is invalid",
122 |                     });
123 |                   });
124 |               }}
125 |               accept="application/json"
126 |               hidden
127 |             />
128 |             <Button
129 |               component="label"
130 |               htmlFor="file-upload-btn"
131 |               variant="default"
132 |               leftIcon={<IconDatabaseImport size={20} />}
133 |             >
134 |               Import Data
135 |             </Button>
136 |           </Group>
137 |           <Group>
138 |             <DeleteChatsModal onOpen={close} />
139 |             <DeleteAllDataModal onOpen={close} />
140 |           </Group>
141 |         </Stack>
142 |       </Modal>
143 |     </>
144 |   );
145 | }
146 | 


--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
  1 | export const defaultModel = "gpt-3.5-turbo";
  2 | 
  3 | export const availableModels = [
  4 |   {
  5 |     value: "gpt-3.5-turbo",
  6 |     label: "GPT-3.5-TURBO (Default ChatGPT)",
  7 |   },
  8 |   { value: "gpt-3.5-turbo-0301", label: "GPT-3.5-TURBO-0301" },
  9 |   { value: "gpt-4", label: "GPT-4 (Limited Beta)" },
 10 |   { value: "gpt-4-0314", label: "GPT-4-0314 (Limited Beta)" },
 11 |   { value: "gpt-4-32k", label: "GPT-4-32K (Limited Beta)" },
 12 |   {
 13 |     value: "gpt-4-32k-0314",
 14 |     label: "GPT-4-32K-0314 (Limited Beta)",
 15 |   },
 16 | ];
 17 | 
 18 | export const writingCharacters = [
 19 |   {
 20 |     label: "Standup Comedian",
 21 |     value:
 22 |       "A performer who entertains audiences by telling jokes and humorous stories.",
 23 |   },
 24 |   {
 25 |     label: "Life Coach",
 26 |     value:
 27 |       "A professional who helps individuals identify and achieve their personal and professional goals.",
 28 |   },
 29 |   {
 30 |     label: "Career Counselor",
 31 |     value:
 32 |       "A professional who helps individuals explore and choose careers, develop job search strategies, and improve job performance.",
 33 |   },
 34 |   {
 35 |     label: "Nutritionist",
 36 |     value:
 37 |       "A health professional who specializes in the study of nutrition and its effects on the body.",
 38 |   },
 39 |   {
 40 |     label: "Product Manager",
 41 |     value:
 42 |       "A professional who oversees the development and marketing of a company's products.",
 43 |   },
 44 |   {
 45 |     label: "Personal Trainer",
 46 |     value:
 47 |       "A fitness professional who works with individuals to develop personalized exercise programs and improve their overall health and fitness.",
 48 |   },
 49 |   {
 50 |     label: "Life Hacker",
 51 |     value:
 52 |       "A person who uses unconventional methods to solve problems and increase productivity in everyday life.",
 53 |   },
 54 |   {
 55 |     label: "Travel Advisor",
 56 |     value:
 57 |       "A professional who helps individuals plan and book travel arrangements.",
 58 |   },
 59 |   {
 60 |     label: "Mindfulness Coach",
 61 |     value:
 62 |       "A professional who helps individuals develop mindfulness practices to reduce stress and improve well-being.",
 63 |   },
 64 |   {
 65 |     label: "Financial Advisor",
 66 |     value:
 67 |       "A professional who provides guidance and advice on financial planning, investment strategies, and retirement planning.",
 68 |   },
 69 |   {
 70 |     label: "Language Tutor",
 71 |     value:
 72 |       "A teacher who helps individuals learn and improve their language skills.",
 73 |   },
 74 |   {
 75 |     label: "Travel Guide",
 76 |     value:
 77 |       "A professional who leads tours and provides information about local attractions and culture.",
 78 |   },
 79 |   {
 80 |     label: "Marketing Expert",
 81 |     value:
 82 |       "A professional who develops and implements marketing strategies to promote products and services.",
 83 |   },
 84 |   {
 85 |     label: "Software Developer",
 86 |     value:
 87 |       "A professional who designs, develops, and maintains software applications and systems.",
 88 |   },
 89 |   {
 90 |     label: "Dating Coach",
 91 |     value:
 92 |       "A professional who helps individuals improve their dating and relationship skills.",
 93 |   },
 94 |   {
 95 |     label: "DIY Expert",
 96 |     value:
 97 |       "A person who is skilled at completing a wide range of do-it-yourself projects around the home.",
 98 |   },
 99 |   {
100 |     label: "Journalist",
101 |     value:
102 |       "A professional who investigates and reports on current events and news stories.",
103 |   },
104 |   {
105 |     label: "Tech Writer",
106 |     value:
107 |       "A professional who writes about technology and related topics for a variety of audiences.",
108 |   },
109 |   {
110 |     label: "Professional Chef",
111 |     value:
112 |       "A skilled culinary professional who prepares meals and manages kitchen operations.",
113 |   },
114 |   {
115 |     label: "Professional Salesperson",
116 |     value:
117 |       "A professional who sells products and services to businesses and consumers.",
118 |   },
119 |   {
120 |     label: "Startup Tech Lawyer",
121 |     value:
122 |       "A legal professional who specializes in providing legal advice and services to startup technology companies.",
123 |   },
124 |   {
125 |     label: "Graphic Designer",
126 |     value:
127 |       "A professional who designs visual materials such as logos, brochures, and websites.",
128 |   },
129 |   {
130 |     label: "Academic Researcher",
131 |     value:
132 |       "A professional who conducts research and produces scholarly work in a particular academic field.",
133 |   },
134 |   {
135 |     label: "Customer Support Agent",
136 |     value:
137 |       "A professional who provides assistance and support to customers who have questions or problems with a company's products or services.",
138 |   },
139 |   {
140 |     label: "HR Consultant",
141 |     value:
142 |       "A professional who provides guidance and advice to organizations on human resource management and strategy",
143 |   },
144 | ];
145 | 
146 | export const writingTones = [
147 |   "Assertive",
148 |   "Authoritative",
149 |   "Casual",
150 |   "Confident",
151 |   "Condescending",
152 |   "Conversational",
153 |   "Diplomatic",
154 |   "Direct",
155 |   "Eloquent",
156 |   "Formal",
157 |   "Friendly",
158 |   "Humorous",
159 |   "Informative",
160 |   "Inspiring",
161 |   "Intense",
162 |   "Irritable",
163 |   "Joking",
164 |   "Polite",
165 |   "Sarcastic",
166 |   "Sincere",
167 |   "Soothing",
168 |   "Stern",
169 |   "Sympathetic",
170 |   "Tactful",
171 |   "Witty",
172 | ];
173 | 
174 | export const writingStyles = [
175 |   "Academic",
176 |   "Analytical",
177 |   "Argumentative",
178 |   "Conversational",
179 |   "Creative",
180 |   "Critical",
181 |   "Descriptive",
182 |   "Explanatory",
183 |   "Informative",
184 |   "Instructive",
185 |   "Investigative",
186 |   "Journalistic",
187 |   "Metaphorical",
188 |   "Narrative",
189 |   "Persuasive",
190 |   "Poetic",
191 |   "Satirical",
192 |   "Technical",
193 | ];
194 | 
195 | export const writingFormats = [
196 |   { value: "Answer as concise as possible", label: "Concise" },
197 |   { value: "Think step-by-step", label: "Step-by-step" },
198 |   { value: "Answer in painstakingly detail", label: "Extreme Detail" },
199 |   { value: "Explain like I'm five", label: "Explain Like I'm Five" },
200 | ];
201 | 


--------------------------------------------------------------------------------
/src/components/Logo.tsx:
--------------------------------------------------------------------------------
 1 | export function LogoText(props: JSX.IntrinsicElements["svg"]) {
 2 |   return (
 3 |     <svg
 4 |       fill="none"
 5 |       xmlns="http://www.w3.org/2000/svg"
 6 |       viewBox="0 0 485 93"
 7 |       {...props}
 8 |     >
 9 |       <path
10 |         d="M.93 36.03c0-6.27 1.4-11.87 4.2-16.8a30.2 30.2 0 0 1 11.6-11.6 32.88 32.88 0 0 1 16.53-4.2c7.12 0 13.36 1.82 18.72 5.48a28.6 28.6 0 0 1 11.23 15.16h-14.7a15.16 15.16 0 0 0-6.21-6.85 17.84 17.84 0 0 0-9.13-2.28c-3.72 0-7.04.88-9.96 2.64a17.85 17.85 0 0 0-6.76 7.31c-1.58 3.17-2.37 6.88-2.37 11.14 0 4.2.79 7.92 2.37 11.15a18.5 18.5 0 0 0 6.76 7.4 19.39 19.39 0 0 0 9.96 2.55c3.47 0 6.51-.76 9.13-2.28a15.71 15.71 0 0 0 6.21-6.94h14.7c-2.13 6.51-5.87 11.6-11.23 15.25-5.3 3.6-11.54 5.39-18.72 5.39-6.1 0-11.6-1.37-16.53-4.11a31.18 31.18 0 0 1-11.6-11.6C2.33 47.9.93 42.3.93 36.04Zm98.05-19.36c3.83 0 7.24.85 10.23 2.56a16.7 16.7 0 0 1 6.94 7.4c1.7 3.22 2.56 7.12 2.56 11.69V68h-12.79V40.05c0-4.02-1-7.1-3.01-9.22-2.01-2.2-4.75-3.3-8.22-3.3-3.54 0-6.34 1.1-8.4 3.3-2.02 2.13-3.02 5.2-3.02 9.22V68H70.48V.41h12.79v23.3a16.3 16.3 0 0 1 6.58-5.12 21.33 21.33 0 0 1 9.13-1.92Zm24.94 25.85c0-5.12 1.01-9.65 3.02-13.61 2.07-3.96 4.84-7 8.31-9.13a22.37 22.37 0 0 1 11.78-3.2c3.78 0 7.06.76 9.87 2.28a19.99 19.99 0 0 1 6.85 5.76V17.4h12.87V68h-12.87v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.89 20.89 0 0 1-9.96 2.28c-4.26 0-8.16-1.1-11.69-3.29a23.53 23.53 0 0 1-8.31-9.22 30.45 30.45 0 0 1-3.02-13.8Zm39.83.18c0-3.1-.61-5.75-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83c-2.37 0-4.57.58-6.58 1.74a13.4 13.4 0 0 0-4.93 5.11 15.93 15.93 0 0 0-1.82 7.86 17 17 0 0 0 1.82 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.38 0 4.6-.58 6.67-1.74a13.29 13.29 0 0 0 4.93-5.11 16.68 16.68 0 0 0 1.83-8.04Zm36.6-14.8v24.48c0 1.7.4 2.96 1.18 3.75.86.73 2.26 1.1 4.2 1.1h5.94V68h-8.03c-10.78 0-16.17-5.24-16.17-15.7V27.9h-6.03V17.4h6.03V4.9h12.88v12.5h11.32v10.5h-11.32ZM230 24.7a19.1 19.1 0 0 1 6.76-5.75 20.56 20.56 0 0 1 9.96-2.37 21.9 21.9 0 0 1 20 12.33c2.07 3.9 3.1 8.43 3.1 13.6 0 5.18-1.03 9.78-3.1 13.8a22.62 22.62 0 0 1-8.31 9.22 21.44 21.44 0 0 1-11.7 3.3c-3.7 0-7-.77-9.86-2.3a21.2 21.2 0 0 1-6.85-5.75v31.33h-12.78v-74.7H230v7.3Zm26.76 17.82c0-3.05-.64-5.66-1.91-7.86a12.95 12.95 0 0 0-18.08-5.02 13.3 13.3 0 0 0-4.94 5.11A16.46 16.46 0 0 0 230 42.7c0 3.05.61 5.7 1.83 7.95a14.01 14.01 0 0 0 4.93 5.2 13.28 13.28 0 0 0 6.58 1.74 13.13 13.13 0 0 0 11.5-7.03 16.03 16.03 0 0 0 1.92-8.04Zm15.41 0c0-5.12 1-9.65 3.02-13.61 2.07-3.96 4.84-7 8.3-9.13a22.37 22.37 0 0 1 11.8-3.2c3.77 0 7.05.76 9.85 2.28a19.99 19.99 0 0 1 6.86 5.76V17.4h12.87V68H312v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.89 20.89 0 0 1-9.95 2.28c-4.26 0-8.16-1.1-11.7-3.29a23.53 23.53 0 0 1-8.3-9.22 30.45 30.45 0 0 1-3.02-13.8Zm39.82.18c0-3.1-.6-5.75-1.82-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83c-2.38 0-4.57.58-6.58 1.74a13.4 13.4 0 0 0-4.93 5.11 15.93 15.93 0 0 0-1.82 7.86 17 17 0 0 0 1.82 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.37 0 4.6-.58 6.67-1.74a13.29 13.29 0 0 0 4.93-5.11 16.68 16.68 0 0 0 1.82-8.04Zm18.43-.18c0-5.12 1-9.65 3.01-13.61 2.07-3.96 4.88-7 8.4-9.13a22.37 22.37 0 0 1 11.79-3.2c3.29 0 6.42.73 9.4 2.2a18.42 18.42 0 0 1 7.13 5.65V.41h12.97V68h-12.97v-7.49a17.3 17.3 0 0 1-6.67 6.03 20.89 20.89 0 0 1-9.95 2.28c-4.26 0-8.16-1.1-11.7-3.29a23.29 23.29 0 0 1-8.4-9.22c-2-4.02-3.01-8.62-3.01-13.8Zm39.82.18c0-3.1-.6-5.75-1.82-7.95a12.5 12.5 0 0 0-4.94-5.11 12.93 12.93 0 0 0-6.66-1.83c-2.38 0-4.57.58-6.58 1.74a13.3 13.3 0 0 0-4.93 5.11 15.93 15.93 0 0 0-1.83 7.86 17 17 0 0 0 1.83 8.04 14.01 14.01 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.37 0 4.6-.58 6.66-1.74a13.29 13.29 0 0 0 4.94-5.11 16.67 16.67 0 0 0 1.82-8.04Zm78.91 13.15h-25.39L419.56 68h-13.42l22.92-63.84h14.89L466.87 68h-13.51l-4.2-12.15Zm-3.47-10.23-9.22-26.67-9.22 26.67h18.44Zm38.9-41.37V68h-12.8V4.25h12.8Z"
11 |         fill="currentColor"
12 |       />
13 |     </svg>
14 |   );
15 | }
16 | 
17 | export function Logo(props: JSX.IntrinsicElements["svg"]) {
18 |   return (
19 |     <svg
20 |       fill="none"
21 |       xmlns="http://www.w3.org/2000/svg"
22 |       viewBox="0 0 630 117"
23 |       {...props}
24 |     >
25 |       <path
26 |         fillRule="evenodd"
27 |         clipRule="evenodd"
28 |         d="M117 26.7A26.7 26.7 0 0 0 90.3 0H27.09A26.7 26.7 0 0 0 .38 26.7v63.23a26.7 26.7 0 0 0 26.7 26.7h66.74a23.18 23.18 0 0 0 23.19-23.19V26.7ZM35.5 70.26V11.24h-8.42A15.46 15.46 0 0 0 11.62 26.7v43.56h23.89ZM11.63 81.5h59.02v23.89H27.08a15.46 15.46 0 0 1-15.46-15.46V81.5Zm94.14-46.37H46.74V11.24h43.57c8.53 0 15.45 6.92 15.45 15.46v8.43Zm-23.88 70.25V46.37h23.88v47.07c0 6.6-5.34 11.95-11.94 11.95H81.88Z"
29 |         fill="url(#a)"
30 |       />
31 |       <path
32 |         d="M146 58.62c0-6.27 1.4-11.87 4.2-16.8 2.86-5 6.73-8.86 11.6-11.6a32.88 32.88 0 0 1 16.53-4.2c7.13 0 13.37 1.82 18.72 5.47a28.72 28.72 0 0 1 11.24 15.17h-14.7a15.16 15.16 0 0 0-6.22-6.85 17.84 17.84 0 0 0-9.13-2.29c-3.71 0-7.03.88-9.96 2.65a17.86 17.86 0 0 0-6.75 7.3c-1.59 3.17-2.38 6.89-2.38 11.15a25 25 0 0 0 2.38 11.14 18.5 18.5 0 0 0 6.75 7.4 19.39 19.39 0 0 0 9.96 2.56c3.47 0 6.52-.76 9.13-2.29a15.72 15.72 0 0 0 6.22-6.94h14.7c-2.13 6.52-5.88 11.6-11.23 15.26-5.3 3.59-11.54 5.38-18.73 5.38-6.09 0-11.6-1.37-16.53-4.1a31.19 31.19 0 0 1-11.6-11.6c-2.8-4.94-4.2-10.54-4.2-16.81Zm98.05-19.36c3.84 0 7.25.85 10.23 2.55a16.71 16.71 0 0 1 6.94 7.4c1.7 3.23 2.56 7.13 2.56 11.7v29.68H251V62.64c0-4.02-1.01-7.1-3.02-9.23-2-2.19-4.75-3.28-8.22-3.28-3.53 0-6.33 1.1-8.4 3.28-2.01 2.14-3.02 5.21-3.02 9.23v27.95h-12.78V23h12.78v23.29a16.3 16.3 0 0 1 6.58-5.11 21.34 21.34 0 0 1 9.13-1.92ZM269 65.1c0-5.11 1-9.65 3.01-13.6 2.07-3.96 4.84-7 8.31-9.14a22.36 22.36 0 0 1 11.79-3.2c3.77 0 7.06.77 9.86 2.29a20 20 0 0 1 6.85 5.75V40h12.88v50.6h-12.88v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.88 20.88 0 0 1-9.95 2.28c-4.27 0-8.16-1.1-11.7-3.29a23.52 23.52 0 0 1-8.3-9.22C270 74.88 269 70.28 269 65.1Zm39.82.19c0-3.1-.6-5.76-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83 12.92 12.92 0 0 0-11.5 6.85 15.93 15.93 0 0 0-1.83 7.85 17 17 0 0 0 1.83 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.57 1.83c2.38 0 4.6-.57 6.67-1.73a13.29 13.29 0 0 0 4.93-5.12 16.67 16.67 0 0 0 1.83-8.03Zm36.6-14.79v24.47c0 1.7.4 2.95 1.19 3.74.85.73 2.25 1.1 4.2 1.1h5.94v10.78h-8.04c-10.78 0-16.17-5.24-16.17-15.71V50.49h-6.03V40h6.03V27.48h12.88v12.5h11.33V50.5h-11.33Zm29.66-3.2a19.1 19.1 0 0 1 6.76-5.76 20.56 20.56 0 0 1 9.95-2.37 21.9 21.9 0 0 1 20 12.33c2.07 3.9 3.1 8.43 3.1 13.6 0 5.18-1.03 9.78-3.1 13.8-2 3.95-4.78 7.03-8.3 9.22a21.44 21.44 0 0 1-11.7 3.29c-3.71 0-7-.76-9.86-2.28a21.2 21.2 0 0 1-6.85-5.76v31.33h-12.79V39.99h12.79v7.3Zm26.76 17.8c0-3.04-.64-5.66-1.92-7.85a12.95 12.95 0 0 0-18.08-5.02 13.3 13.3 0 0 0-4.94 5.11 16.46 16.46 0 0 0-1.82 7.95c0 3.04.6 5.69 1.82 7.94a14.01 14.01 0 0 0 4.94 5.2 13.28 13.28 0 0 0 6.57 1.74 13.13 13.13 0 0 0 11.5-7.03 16.03 16.03 0 0 0 1.93-8.04Zm15.41 0c0-5.11 1-9.65 3.01-13.6 2.07-3.96 4.84-7 8.31-9.14a22.36 22.36 0 0 1 11.79-3.2c3.77 0 7.06.77 9.86 2.29a20 20 0 0 1 6.85 5.75V40h12.88v50.6h-12.88v-7.4a19.32 19.32 0 0 1-6.85 5.94 20.88 20.88 0 0 1-9.96 2.28c-4.26 0-8.15-1.1-11.69-3.29a23.52 23.52 0 0 1-8.3-9.22c-2.02-4.02-3.02-8.62-3.02-13.8Zm39.82.19c0-3.1-.6-5.76-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83 12.92 12.92 0 0 0-11.5 6.85 15.93 15.93 0 0 0-1.83 7.85 17 17 0 0 0 1.83 8.04 14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.57 1.83c2.38 0 4.6-.57 6.67-1.73a13.29 13.29 0 0 0 4.93-5.12 16.67 16.67 0 0 0 1.83-8.03Zm18.43-.19c0-5.11 1-9.65 3-13.6 2.08-3.96 4.88-7 8.41-9.14a22.36 22.36 0 0 1 11.78-3.2c3.3 0 6.43.74 9.41 2.2a18.43 18.43 0 0 1 7.13 5.66V23h12.96v67.59h-12.97v-7.5a17.36 17.36 0 0 1-6.66 6.04 20.89 20.89 0 0 1-9.96 2.28c-4.26 0-8.16-1.1-11.69-3.29a23.28 23.28 0 0 1-8.4-9.22c-2.01-4.02-3.01-8.62-3.01-13.8Zm39.82.19c0-3.1-.61-5.76-1.83-7.95a12.5 12.5 0 0 0-4.93-5.11 12.93 12.93 0 0 0-6.67-1.83c-2.37 0-4.57.58-6.58 1.74-2 1.15-3.65 2.86-4.93 5.11a15.94 15.94 0 0 0-1.82 7.85c0 3.05.6 5.73 1.82 8.04a14.03 14.03 0 0 0 4.93 5.2 12.77 12.77 0 0 0 6.58 1.83c2.38 0 4.6-.57 6.67-1.73a13.29 13.29 0 0 0 4.93-5.12 16.68 16.68 0 0 0 1.83-8.03Zm78.91 13.15h-25.4l-4.2 12.15h-13.42l22.93-63.85h14.88l22.93 63.85h-13.52l-4.2-12.15Zm-3.47-10.23-9.23-26.67-9.22 26.67h18.45Zm38.89-41.37v63.75h-12.79V26.84h12.8Z"
33 |         fill="currentColor"
34 |       />
35 |       <defs>
36 |         <linearGradient
37 |           id="a"
38 |           x1={59}
39 |           y1={-12.54}
40 |           x2={59}
41 |           y2={116.46}
42 |           gradientUnits="userSpaceOnUse"
43 |         >
44 |           <stop stopColor="#41E094" />
45 |           <stop offset={1} stopColor="#27B882" />
46 |         </linearGradient>
47 |       </defs>
48 |     </svg>
49 |   );
50 | }
51 | 
52 | export function LogoIcon(props: JSX.IntrinsicElements["svg"]) {
53 |   return (
54 |     <svg
55 |       fill="none"
56 |       xmlns="http://www.w3.org/2000/svg"
57 |       viewBox="0 0 118 117"
58 |       {...props}
59 |     >
60 |       <path
61 |         fillRule="evenodd"
62 |         clipRule="evenodd"
63 |         d="M117 26.7A26.7 26.7 0 0 0 90.3 0H27.09A26.7 26.7 0 0 0 .38 26.7v63.23a26.7 26.7 0 0 0 26.7 26.7h66.74a23.18 23.18 0 0 0 23.19-23.19V26.7ZM35.5 70.26V11.24h-8.42A15.46 15.46 0 0 0 11.62 26.7v43.56h23.89ZM11.63 81.5h59.02v23.89H27.08a15.46 15.46 0 0 1-15.46-15.46V81.5Zm94.14-46.37H46.74V11.24h43.57c8.53 0 15.45 6.92 15.45 15.46v8.43Zm-23.88 70.25V46.37h23.88v47.07c0 6.6-5.34 11.95-11.94 11.95H81.88Z"
64 |         fill="url(#a)"
65 |       />
66 |       <defs>
67 |         <linearGradient
68 |           id="a"
69 |           x1={59}
70 |           y1={-12.54}
71 |           x2={59}
72 |           y2={116.46}
73 |           gradientUnits="userSpaceOnUse"
74 |         >
75 |           <stop stopColor="#41E094" />
76 |           <stop offset={1} stopColor="#27B882" />
77 |         </linearGradient>
78 |       </defs>
79 |     </svg>
80 |   );
81 | }
82 | 


--------------------------------------------------------------------------------
/src/components/Layout.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ActionIcon,
  3 |   AppShell,
  4 |   Box,
  5 |   Burger,
  6 |   Button,
  7 |   Center,
  8 |   Header,
  9 |   MediaQuery,
 10 |   Navbar,
 11 |   rem,
 12 |   ScrollArea,
 13 |   SegmentedControl,
 14 |   TextInput,
 15 |   Tooltip,
 16 |   useMantineColorScheme,
 17 |   useMantineTheme,
 18 | } from "@mantine/core";
 19 | import {
 20 |   IconBrandGithub,
 21 |   IconBrandTwitter,
 22 |   IconDatabase,
 23 |   IconMessage,
 24 |   IconMoonStars,
 25 |   IconPlus,
 26 |   IconSearch,
 27 |   IconSettings,
 28 |   IconSunHigh,
 29 |   IconX,
 30 | } from "@tabler/icons-react";
 31 | import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-location";
 32 | import { useLiveQuery } from "dexie-react-hooks";
 33 | import { nanoid } from "nanoid";
 34 | import { useEffect, useState } from "react";
 35 | import { db } from "../db";
 36 | import { useChatId } from "../hooks/useChatId";
 37 | import { Chats } from "./Chats";
 38 | import { CreatePromptModal } from "./CreatePromptModal";
 39 | import { DatabaseModal } from "./DatabaseModal";
 40 | import { LogoText } from "./Logo";
 41 | import { Prompts } from "./Prompts";
 42 | import { SettingsModal } from "./SettingsModal";
 43 | 
 44 | declare global {
 45 |   interface Window {
 46 |     todesktop?: any;
 47 |   }
 48 | }
 49 | 
 50 | export function Layout() {
 51 |   const theme = useMantineTheme();
 52 |   const [opened, setOpened] = useState(false);
 53 |   const [tab, setTab] = useState<"Chats" | "Prompts">("Chats");
 54 |   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 55 |   const navigate = useNavigate();
 56 |   const router = useRouter();
 57 | 
 58 |   const [search, setSearch] = useState("");
 59 |   const chatId = useChatId();
 60 |   const chat = useLiveQuery(async () => {
 61 |     if (!chatId) return null;
 62 |     return db.chats.get(chatId);
 63 |   }, [chatId]);
 64 | 
 65 |   const border = `${rem(1)} solid ${
 66 |     theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]
 67 |   }`;
 68 | 
 69 |   useEffect(() => {
 70 |     setOpened(false);
 71 |   }, [router.state.location]);
 72 | 
 73 |   return (
 74 |     <AppShell
 75 |       className={`${colorScheme}-theme`}
 76 |       navbarOffsetBreakpoint="sm"
 77 |       navbar={
 78 |         <Navbar width={{ md: 300 }} hiddenBreakpoint="md" hidden={!opened}>
 79 |           <Navbar.Section className="app-region-drag">
 80 |             <Box
 81 |               style={{
 82 |                 height: 60,
 83 |                 display: "flex",
 84 |                 alignItems: "center",
 85 |                 justifyContent: "center",
 86 |                 borderBottom: border,
 87 |               }}
 88 |             >
 89 |               <Link
 90 |                 to="/"
 91 |                 className="app-region-no-drag"
 92 |                 style={{ marginTop: 10, padding: 4 }}
 93 |               >
 94 |                 <LogoText
 95 |                   style={{
 96 |                     height: 22,
 97 |                     color: "#27B882",
 98 |                     display: "block",
 99 |                   }}
100 |                 />
101 |               </Link>
102 |               <MediaQuery largerThan="md" styles={{ display: "none" }}>
103 |                 <Burger
104 |                   opened={opened}
105 |                   onClick={() => setOpened((o) => !o)}
106 |                   size="sm"
107 |                   color={theme.colors.gray[6]}
108 |                   className="app-region-no-drag"
109 |                   sx={{ position: "fixed", right: 16 }}
110 |                 />
111 |               </MediaQuery>
112 |             </Box>
113 |           </Navbar.Section>
114 |           <Navbar.Section
115 |             sx={(theme) => ({
116 |               padding: rem(4),
117 |               background:
118 |                 theme.colorScheme === "dark"
119 |                   ? theme.colors.dark[8]
120 |                   : theme.colors.gray[1],
121 |               borderBottom: border,
122 |             })}
123 |           >
124 |             <SegmentedControl
125 |               fullWidth
126 |               value={tab}
127 |               onChange={(value) => setTab(value as typeof tab)}
128 |               data={["Chats", "Prompts"]}
129 |             />
130 |             <Box sx={{ padding: 4 }}>
131 |               {tab === "Chats" && (
132 |                 <Button
133 |                   fullWidth
134 |                   leftIcon={<IconPlus size={20} />}
135 |                   onClick={() => {
136 |                     const id = nanoid();
137 |                     db.chats.add({
138 |                       id,
139 |                       description: "New Chat",
140 |                       totalTokens: 0,
141 |                       createdAt: new Date(),
142 |                     });
143 |                     navigate({ to: `/chats/${id}` });
144 |                   }}
145 |                 >
146 |                   New Chat
147 |                 </Button>
148 |               )}
149 |               {tab === "Prompts" && <CreatePromptModal />}
150 |             </Box>
151 |           </Navbar.Section>
152 |           <Navbar.Section
153 |             sx={(theme) => ({
154 |               padding: rem(4),
155 |               background:
156 |                 theme.colorScheme === "dark"
157 |                   ? theme.colors.dark[7]
158 |                   : theme.white,
159 |               borderBottom: border,
160 |             })}
161 |           >
162 |             <TextInput
163 |               variant="unstyled"
164 |               radius={0}
165 |               placeholder="Search"
166 |               value={search}
167 |               onChange={(event) =>
168 |                 setSearch(event.currentTarget.value.toLowerCase())
169 |               }
170 |               sx={{ paddingInline: 4 }}
171 |               icon={<IconSearch opacity={0.8} size={20} />}
172 |               rightSection={
173 |                 !!search && (
174 |                   <ActionIcon onClick={() => setSearch("")}>
175 |                     <IconX opacity={0.5} size={20} />{" "}
176 |                   </ActionIcon>
177 |                 )
178 |               }
179 |             />
180 |           </Navbar.Section>
181 |           <Navbar.Section grow component={ScrollArea}>
182 |             {tab === "Chats" && <Chats search={search} />}
183 |             {tab === "Prompts" && (
184 |               <Prompts search={search} onPlay={() => setTab("Chats")} />
185 |             )}
186 |           </Navbar.Section>
187 |           <Navbar.Section sx={{ borderTop: border }} p="xs">
188 |             <Center>
189 |               <Tooltip
190 |                 label={colorScheme === "dark" ? "Light Mode" : "Dark Mode"}
191 |               >
192 |                 <ActionIcon
193 |                   sx={{ flex: 1 }}
194 |                   size="xl"
195 |                   onClick={() => toggleColorScheme()}
196 |                 >
197 |                   {colorScheme === "dark" ? (
198 |                     <IconSunHigh size={20} />
199 |                   ) : (
200 |                     <IconMoonStars size={20} />
201 |                   )}
202 |                 </ActionIcon>
203 |               </Tooltip>
204 |               <SettingsModal>
205 |                 <Tooltip label="Settings">
206 |                   <ActionIcon sx={{ flex: 1 }} size="xl">
207 |                     <IconSettings size={20} />
208 |                   </ActionIcon>
209 |                 </Tooltip>
210 |               </SettingsModal>
211 |               <DatabaseModal>
212 |                 <Tooltip label="Database">
213 |                   <ActionIcon sx={{ flex: 1 }} size="xl">
214 |                     <IconDatabase size={20} />
215 |                   </ActionIcon>
216 |                 </Tooltip>
217 |               </DatabaseModal>
218 |               <Tooltip label="Source Code">
219 |                 <ActionIcon
220 |                   component="a"
221 |                   href="https://github.com/deiucanta/chatpad"
222 |                   target="_blank"
223 |                   sx={{ flex: 1 }}
224 |                   size="xl"
225 |                 >
226 |                   <IconBrandGithub size={20} />
227 |                 </ActionIcon>
228 |               </Tooltip>
229 |               <Tooltip label="Follow on Twitter">
230 |                 <ActionIcon
231 |                   component="a"
232 |                   href="https://twitter.com/deiucanta"
233 |                   target="_blank"
234 |                   sx={{ flex: 1 }}
235 |                   size="xl"
236 |                 >
237 |                   <IconBrandTwitter size={20} />
238 |                 </ActionIcon>
239 |               </Tooltip>
240 |               <Tooltip label="Give Feedback">
241 |                 <ActionIcon
242 |                   component="a"
243 |                   href="https://feedback.chatpad.ai"
244 |                   onClick={(event) => {
245 |                     if (window.todesktop) {
246 |                       event.preventDefault();
247 |                       window.todesktop.contents.openUrlInBrowser(
248 |                         "https://feedback.chatpad.ai"
249 |                       );
250 |                     }
251 |                   }}
252 |                   target="_blank"
253 |                   sx={{ flex: 1 }}
254 |                   size="xl"
255 |                 >
256 |                   <IconMessage size={20} />
257 |                 </ActionIcon>
258 |               </Tooltip>
259 |             </Center>
260 |           </Navbar.Section>
261 |         </Navbar>
262 |       }
263 |       header={
264 |         chat ? (
265 |           <Header height={60} p="xs" className="app-region-drag">
266 |             <div
267 |               style={{
268 |                 display: "flex",
269 |                 alignItems: "center",
270 |                 justifyContent: "center",
271 |                 height: "100%",
272 |               }}
273 |             >
274 |               {`${chat.description} - ${chat.totalTokens ?? 0} tokens ~ $${(
275 |                 ((chat.totalTokens ?? 0) * 0.002) /
276 |                 1000
277 |               ).toFixed(5)}`}
278 |             </div>
279 |           </Header>
280 |         ) : undefined
281 |       }
282 |       layout="alt"
283 |       padding={0}
284 |     >
285 |       <MediaQuery largerThan="md" styles={{ display: "none" }}>
286 |         <Burger
287 |           opened={opened}
288 |           onClick={() => setOpened((o) => !o)}
289 |           size="sm"
290 |           color={theme.colors.gray[6]}
291 |           className="app-region-no-drag"
292 |           sx={{ position: "fixed", top: 16, right: 16, zIndex: 100 }}
293 |         />
294 |       </MediaQuery>
295 |       <Outlet />
296 |     </AppShell>
297 |   );
298 | }
299 | 


--------------------------------------------------------------------------------
/src/routes/ChatRoute.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Box,
  3 |   Button,
  4 |   Card,
  5 |   Container,
  6 |   Flex,
  7 |   MediaQuery,
  8 |   Select,
  9 |   SimpleGrid,
 10 |   Skeleton,
 11 |   Stack,
 12 |   Textarea,
 13 | } from "@mantine/core";
 14 | import { notifications } from "@mantine/notifications";
 15 | import { useLiveQuery } from "dexie-react-hooks";
 16 | import { findLast } from "lodash";
 17 | import { nanoid } from "nanoid";
 18 | import { useState } from "react";
 19 | import { AiOutlineSend } from "react-icons/ai";
 20 | import { MessageItem } from "../components/MessageItem";
 21 | import { db } from "../db";
 22 | import { useChatId } from "../hooks/useChatId";
 23 | import {
 24 |   writingCharacters,
 25 |   writingFormats,
 26 |   writingStyles,
 27 |   writingTones,
 28 | } from "../utils/constants";
 29 | import { createChatCompletion } from "../utils/openai";
 30 | 
 31 | export function ChatRoute() {
 32 |   const chatId = useChatId();
 33 |   const apiKey = useLiveQuery(async () => {
 34 |     return (await db.settings.where({ id: "general" }).first())?.openAiApiKey;
 35 |   });
 36 |   const messages = useLiveQuery(() => {
 37 |     if (!chatId) return [];
 38 |     return db.messages.where("chatId").equals(chatId).sortBy("createdAt");
 39 |   }, [chatId]);
 40 |   const [content, setContent] = useState("");
 41 |   const [submitting, setSubmitting] = useState(false);
 42 | 
 43 |   const chat = useLiveQuery(async () => {
 44 |     if (!chatId) return null;
 45 |     return db.chats.get(chatId);
 46 |   }, [chatId]);
 47 | 
 48 |   const [writingCharacter, setWritingCharacter] = useState<string | null>(null);
 49 |   const [writingTone, setWritingTone] = useState<string | null>(null);
 50 |   const [writingStyle, setWritingStyle] = useState<string | null>(null);
 51 |   const [writingFormat, setWritingFormat] = useState<string | null>(null);
 52 | 
 53 |   const getSystemMessage = () => {
 54 |     const message: string[] = [];
 55 |     if (writingCharacter) message.push(`You are ${writingCharacter}.`);
 56 |     if (writingTone) message.push(`Respond in ${writingTone} tone.`);
 57 |     if (writingStyle) message.push(`Respond in ${writingStyle} style.`);
 58 |     if (writingFormat) message.push(writingFormat);
 59 |     if (message.length === 0)
 60 |       message.push(
 61 |         "You are ChatGPT, a large language model trained by OpenAI."
 62 |       );
 63 |     return message.join(" ");
 64 |   };
 65 | 
 66 |   const submit = async () => {
 67 |     if (submitting) return;
 68 | 
 69 |     if (!chatId) {
 70 |       notifications.show({
 71 |         title: "Error",
 72 |         color: "red",
 73 |         message: "chatId is not defined. Please create a chat to get started.",
 74 |       });
 75 |       return;
 76 |     }
 77 | 
 78 |     if (!apiKey) {
 79 |       notifications.show({
 80 |         title: "Error",
 81 |         color: "red",
 82 |         message: "OpenAI API Key is not defined. Please set your API Key",
 83 |       });
 84 |       return;
 85 |     }
 86 | 
 87 |     try {
 88 |       setSubmitting(true);
 89 | 
 90 |       await db.messages.add({
 91 |         id: nanoid(),
 92 |         chatId,
 93 |         content,
 94 |         role: "user",
 95 |         createdAt: new Date(),
 96 |       });
 97 |       setContent("");
 98 | 
 99 |       const result = await createChatCompletion(apiKey, [
100 |         {
101 |           role: "system",
102 |           content: getSystemMessage(),
103 |         },
104 |         ...(messages ?? []).map((message) => ({
105 |           role: message.role,
106 |           content: message.content,
107 |         })),
108 |         { role: "user", content },
109 |       ]);
110 | 
111 |       const assistantMessage = result.data.choices[0].message?.content;
112 |       if (result.data.usage) {
113 |         await db.chats.where({ id: chatId }).modify((chat) => {
114 |           if (chat.totalTokens) {
115 |             chat.totalTokens += result.data.usage!.total_tokens;
116 |           } else {
117 |             chat.totalTokens = result.data.usage!.total_tokens;
118 |           }
119 |         });
120 |       }
121 |       setSubmitting(false);
122 | 
123 |       await db.messages.add({
124 |         id: nanoid(),
125 |         chatId,
126 |         content: assistantMessage ?? "unknown reponse",
127 |         role: "assistant",
128 |         createdAt: new Date(),
129 |       });
130 | 
131 |       if (chat?.description === "New Chat") {
132 |         const messages = await db.messages
133 |           .where({ chatId })
134 |           .sortBy("createdAt");
135 |         const createChatDescription = await createChatCompletion(apiKey, [
136 |           {
137 |             role: "system",
138 |             content: getSystemMessage(),
139 |           },
140 |           ...(messages ?? []).map((message) => ({
141 |             role: message.role,
142 |             content: message.content,
143 |           })),
144 |           {
145 |             role: "user",
146 |             content:
147 |               "What would be a short and relevant title for this chat ? You must strictly answer with only the title, no other text is allowed.",
148 |           },
149 |         ]);
150 |         const chatDescription =
151 |           createChatDescription.data.choices[0].message?.content;
152 | 
153 |         if (createChatDescription.data.usage) {
154 |           await db.chats.where({ id: chatId }).modify((chat) => {
155 |             chat.description = chatDescription ?? "New Chat";
156 |             if (chat.totalTokens) {
157 |               chat.totalTokens +=
158 |                 createChatDescription.data.usage!.total_tokens;
159 |             } else {
160 |               chat.totalTokens = createChatDescription.data.usage!.total_tokens;
161 |             }
162 |           });
163 |         }
164 |       }
165 |     } catch (error: any) {
166 |       if (error.toJSON().message === "Network Error") {
167 |         notifications.show({
168 |           title: "Error",
169 |           color: "red",
170 |           message: "No internet connection.",
171 |         });
172 |       }
173 |       const message = error.response?.data?.error?.message;
174 |       if (message) {
175 |         notifications.show({
176 |           title: "Error",
177 |           color: "red",
178 |           message,
179 |         });
180 |       }
181 |     } finally {
182 |       setSubmitting(false);
183 |     }
184 |   };
185 | 
186 |   if (!chatId) return null;
187 | 
188 |   return (
189 |     <>
190 |       <Container pt="xl" pb={100}>
191 |         <Stack spacing="xs">
192 |           {messages?.map((message) => (
193 |             <MessageItem key={message.id} message={message} />
194 |           ))}
195 |         </Stack>
196 |         {submitting && (
197 |           <Card withBorder mt="xs">
198 |             <Skeleton height={8} radius="xl" />
199 |             <Skeleton height={8} mt={6} radius="xl" />
200 |             <Skeleton height={8} mt={6} radius="xl" />
201 |             <Skeleton height={8} mt={6} radius="xl" />
202 |             <Skeleton height={8} mt={6} width="70%" radius="xl" />
203 |           </Card>
204 |         )}
205 |       </Container>
206 |       <Box
207 |         py="lg"
208 |         sx={(theme) => ({
209 |           position: "fixed",
210 |           bottom: 0,
211 |           left: 0,
212 |           right: 0,
213 |           [`@media (min-width: ${theme.breakpoints.md})`]: {
214 |             left: 300,
215 |           },
216 |           backgroundColor:
217 |             theme.colorScheme === "dark"
218 |               ? theme.colors.dark[9]
219 |               : theme.colors.gray[0],
220 |         })}
221 |       >
222 |         <Container>
223 |           {messages?.length === 0 && (
224 |             <SimpleGrid
225 |               mb="sm"
226 |               spacing="xs"
227 |               breakpoints={[
228 |                 { minWidth: "sm", cols: 4 },
229 |                 { maxWidth: "sm", cols: 2 },
230 |               ]}
231 |             >
232 |               <Select
233 |                 value={writingCharacter}
234 |                 onChange={setWritingCharacter}
235 |                 data={writingCharacters}
236 |                 placeholder="Character"
237 |                 variant="filled"
238 |                 searchable
239 |                 clearable
240 |                 sx={{ flex: 1 }}
241 |               />
242 |               <Select
243 |                 value={writingTone}
244 |                 onChange={setWritingTone}
245 |                 data={writingTones}
246 |                 placeholder="Tone"
247 |                 variant="filled"
248 |                 searchable
249 |                 clearable
250 |                 sx={{ flex: 1 }}
251 |               />
252 |               <Select
253 |                 value={writingStyle}
254 |                 onChange={setWritingStyle}
255 |                 data={writingStyles}
256 |                 placeholder="Style"
257 |                 variant="filled"
258 |                 searchable
259 |                 clearable
260 |                 sx={{ flex: 1 }}
261 |               />
262 |               <Select
263 |                 value={writingFormat}
264 |                 onChange={setWritingFormat}
265 |                 data={writingFormats}
266 |                 placeholder="Format"
267 |                 variant="filled"
268 |                 searchable
269 |                 clearable
270 |                 sx={{ flex: 1 }}
271 |               />
272 |             </SimpleGrid>
273 |           )}
274 |           <Flex gap="sm">
275 |             <Textarea
276 |               key={chatId}
277 |               sx={{ flex: 1 }}
278 |               placeholder="Your message here..."
279 |               autosize
280 |               autoFocus
281 |               disabled={submitting}
282 |               minRows={1}
283 |               maxRows={5}
284 |               value={content}
285 |               onChange={(event) => setContent(event.currentTarget.value)}
286 |               onKeyDown={async (event) => {
287 |                 if (event.code === "Enter" && !event.shiftKey) {
288 |                   event.preventDefault();
289 |                   submit();
290 |                 }
291 |                 if (event.code === "ArrowUp") {
292 |                   const { selectionStart, selectionEnd } = event.currentTarget;
293 |                   if (selectionStart !== selectionEnd) return;
294 |                   if (selectionStart !== 0) return;
295 |                   event.preventDefault();
296 |                   const nextUserMessage = findLast(
297 |                     messages,
298 |                     (message) => message.role === "user"
299 |                   );
300 |                   setContent(nextUserMessage?.content ?? "");
301 |                 }
302 |                 if (event.code === "ArrowDown") {
303 |                   const { selectionStart, selectionEnd } = event.currentTarget;
304 |                   if (selectionStart !== selectionEnd) return;
305 |                   if (selectionStart !== event.currentTarget.value.length)
306 |                     return;
307 |                   event.preventDefault();
308 |                   const lastUserMessage = findLast(
309 |                     messages,
310 |                     (message) => message.role === "user"
311 |                   );
312 |                   if (lastUserMessage?.content === content) {
313 |                     setContent("");
314 |                   }
315 |                 }
316 |               }}
317 |             />
318 |             <MediaQuery largerThan="sm" styles={{ display: "none" }}>
319 |               <Button
320 |                 h="auto"
321 |                 onClick={() => {
322 |                   submit();
323 |                 }}
324 |               >
325 |                 <AiOutlineSend />
326 |               </Button>
327 |             </MediaQuery>
328 |           </Flex>
329 |         </Container>
330 |       </Box>
331 |     </>
332 |   );
333 | }
334 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU AFFERO GENERAL PUBLIC LICENSE
  2 |                        Version 3, 19 November 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU Affero General Public License is a free, copyleft license for
 11 | software and other kinds of works, specifically designed to ensure
 12 | cooperation with the community in the case of network server software.
 13 | 
 14 |   The licenses for most software and other practical works are designed
 15 | to take away your freedom to share and change the works.  By contrast,
 16 | our General Public Licenses are intended to guarantee your freedom to
 17 | share and change all versions of a program--to make sure it remains free
 18 | software for all its users.
 19 | 
 20 |   When we speak of free software, we are referring to freedom, not
 21 | price.  Our General Public Licenses are designed to make sure that you
 22 | have the freedom to distribute copies of free software (and charge for
 23 | them if you wish), that you receive source code or can get it if you
 24 | want it, that you can change the software or use pieces of it in new
 25 | free programs, and that you know you can do these things.
 26 | 
 27 |   Developers that use our General Public Licenses protect your rights
 28 | with two steps: (1) assert copyright on the software, and (2) offer
 29 | you this License which gives you legal permission to copy, distribute
 30 | and/or modify the software.
 31 | 
 32 |   A secondary benefit of defending all users' freedom is that
 33 | improvements made in alternate versions of the program, if they
 34 | receive widespread use, become available for other developers to
 35 | incorporate.  Many developers of free software are heartened and
 36 | encouraged by the resulting cooperation.  However, in the case of
 37 | software used on network servers, this result may fail to come about.
 38 | The GNU General Public License permits making a modified version and
 39 | letting the public access it on a server without ever releasing its
 40 | source code to the public.
 41 | 
 42 |   The GNU Affero General Public License is designed specifically to
 43 | ensure that, in such cases, the modified source code becomes available
 44 | to the community.  It requires the operator of a network server to
 45 | provide the source code of the modified version running there to the
 46 | users of that server.  Therefore, public use of a modified version, on
 47 | a publicly accessible server, gives the public access to the source
 48 | code of the modified version.
 49 | 
 50 |   An older license, called the Affero General Public License and
 51 | published by Affero, was designed to accomplish similar goals.  This is
 52 | a different license, not a version of the Affero GPL, but Affero has
 53 | released a new version of the Affero GPL which permits relicensing under
 54 | this license.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                        TERMS AND CONDITIONS
 60 | 
 61 |   0. Definitions.
 62 | 
 63 |   "This License" refers to version 3 of the GNU Affero General Public License.
 64 | 
 65 |   "Copyright" also means copyright-like laws that apply to other kinds of
 66 | works, such as semiconductor masks.
 67 | 
 68 |   "The Program" refers to any copyrightable work licensed under this
 69 | License.  Each licensee is addressed as "you".  "Licensees" and
 70 | "recipients" may be individuals or organizations.
 71 | 
 72 |   To "modify" a work means to copy from or adapt all or part of the work
 73 | in a fashion requiring copyright permission, other than the making of an
 74 | exact copy.  The resulting work is called a "modified version" of the
 75 | earlier work or a work "based on" the earlier work.
 76 | 
 77 |   A "covered work" means either the unmodified Program or a work based
 78 | on the Program.
 79 | 
 80 |   To "propagate" a work means to do anything with it that, without
 81 | permission, would make you directly or secondarily liable for
 82 | infringement under applicable copyright law, except executing it on a
 83 | computer or modifying a private copy.  Propagation includes copying,
 84 | distribution (with or without modification), making available to the
 85 | public, and in some countries other activities as well.
 86 | 
 87 |   To "convey" a work means any kind of propagation that enables other
 88 | parties to make or receive copies.  Mere interaction with a user through
 89 | a computer network, with no transfer of a copy, is not conveying.
 90 | 
 91 |   An interactive user interface displays "Appropriate Legal Notices"
 92 | to the extent that it includes a convenient and prominently visible
 93 | feature that (1) displays an appropriate copyright notice, and (2)
 94 | tells the user that there is no warranty for the work (except to the
 95 | extent that warranties are provided), that licensees may convey the
 96 | work under this License, and how to view a copy of this License.  If
 97 | the interface presents a list of user commands or options, such as a
 98 | menu, a prominent item in the list meets this criterion.
 99 | 
100 |   1. Source Code.
101 | 
102 |   The "source code" for a work means the preferred form of the work
103 | for making modifications to it.  "Object code" means any non-source
104 | form of a work.
105 | 
106 |   A "Standard Interface" means an interface that either is an official
107 | standard defined by a recognized standards body, or, in the case of
108 | interfaces specified for a particular programming language, one that
109 | is widely used among developers working in that language.
110 | 
111 |   The "System Libraries" of an executable work include anything, other
112 | than the work as a whole, that (a) is included in the normal form of
113 | packaging a Major Component, but which is not part of that Major
114 | Component, and (b) serves only to enable use of the work with that
115 | Major Component, or to implement a Standard Interface for which an
116 | implementation is available to the public in source code form.  A
117 | "Major Component", in this context, means a major essential component
118 | (kernel, window system, and so on) of the specific operating system
119 | (if any) on which the executable work runs, or a compiler used to
120 | produce the work, or an object code interpreter used to run it.
121 | 
122 |   The "Corresponding Source" for a work in object code form means all
123 | the source code needed to generate, install, and (for an executable
124 | work) run the object code and to modify the work, including scripts to
125 | control those activities.  However, it does not include the work's
126 | System Libraries, or general-purpose tools or generally available free
127 | programs which are used unmodified in performing those activities but
128 | which are not part of the work.  For example, Corresponding Source
129 | includes interface definition files associated with source files for
130 | the work, and the source code for shared libraries and dynamically
131 | linked subprograms that the work is specifically designed to require,
132 | such as by intimate data communication or control flow between those
133 | subprograms and other parts of the work.
134 | 
135 |   The Corresponding Source need not include anything that users
136 | can regenerate automatically from other parts of the Corresponding
137 | Source.
138 | 
139 |   The Corresponding Source for a work in source code form is that
140 | same work.
141 | 
142 |   2. Basic Permissions.
143 | 
144 |   All rights granted under this License are granted for the term of
145 | copyright on the Program, and are irrevocable provided the stated
146 | conditions are met.  This License explicitly affirms your unlimited
147 | permission to run the unmodified Program.  The output from running a
148 | covered work is covered by this License only if the output, given its
149 | content, constitutes a covered work.  This License acknowledges your
150 | rights of fair use or other equivalent, as provided by copyright law.
151 | 
152 |   You may make, run and propagate covered works that you do not
153 | convey, without conditions so long as your license otherwise remains
154 | in force.  You may convey covered works to others for the sole purpose
155 | of having them make modifications exclusively for you, or provide you
156 | with facilities for running those works, provided that you comply with
157 | the terms of this License in conveying all material for which you do
158 | not control copyright.  Those thus making or running the covered works
159 | for you must do so exclusively on your behalf, under your direction
160 | and control, on terms that prohibit them from making any copies of
161 | your copyrighted material outside their relationship with you.
162 | 
163 |   Conveying under any other circumstances is permitted solely under
164 | the conditions stated below.  Sublicensing is not allowed; section 10
165 | makes it unnecessary.
166 | 
167 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
168 | 
169 |   No covered work shall be deemed part of an effective technological
170 | measure under any applicable law fulfilling obligations under article
171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
172 | similar laws prohibiting or restricting circumvention of such
173 | measures.
174 | 
175 |   When you convey a covered work, you waive any legal power to forbid
176 | circumvention of technological measures to the extent such circumvention
177 | is effected by exercising rights under this License with respect to
178 | the covered work, and you disclaim any intention to limit operation or
179 | modification of the work as a means of enforcing, against the work's
180 | users, your or third parties' legal rights to forbid circumvention of
181 | technological measures.
182 | 
183 |   4. Conveying Verbatim Copies.
184 | 
185 |   You may convey verbatim copies of the Program's source code as you
186 | receive it, in any medium, provided that you conspicuously and
187 | appropriately publish on each copy an appropriate copyright notice;
188 | keep intact all notices stating that this License and any
189 | non-permissive terms added in accord with section 7 apply to the code;
190 | keep intact all notices of the absence of any warranty; and give all
191 | recipients a copy of this License along with the Program.
192 | 
193 |   You may charge any price or no price for each copy that you convey,
194 | and you may offer support or warranty protection for a fee.
195 | 
196 |   5. Conveying Modified Source Versions.
197 | 
198 |   You may convey a work based on the Program, or the modifications to
199 | produce it from the Program, in the form of source code under the
200 | terms of section 4, provided that you also meet all of these conditions:
201 | 
202 |     a) The work must carry prominent notices stating that you modified
203 |     it, and giving a relevant date.
204 | 
205 |     b) The work must carry prominent notices stating that it is
206 |     released under this License and any conditions added under section
207 |     7.  This requirement modifies the requirement in section 4 to
208 |     "keep intact all notices".
209 | 
210 |     c) You must license the entire work, as a whole, under this
211 |     License to anyone who comes into possession of a copy.  This
212 |     License will therefore apply, along with any applicable section 7
213 |     additional terms, to the whole of the work, and all its parts,
214 |     regardless of how they are packaged.  This License gives no
215 |     permission to license the work in any other way, but it does not
216 |     invalidate such permission if you have separately received it.
217 | 
218 |     d) If the work has interactive user interfaces, each must display
219 |     Appropriate Legal Notices; however, if the Program has interactive
220 |     interfaces that do not display Appropriate Legal Notices, your
221 |     work need not make them do so.
222 | 
223 |   A compilation of a covered work with other separate and independent
224 | works, which are not by their nature extensions of the covered work,
225 | and which are not combined with it such as to form a larger program,
226 | in or on a volume of a storage or distribution medium, is called an
227 | "aggregate" if the compilation and its resulting copyright are not
228 | used to limit the access or legal rights of the compilation's users
229 | beyond what the individual works permit.  Inclusion of a covered work
230 | in an aggregate does not cause this License to apply to the other
231 | parts of the aggregate.
232 | 
233 |   6. Conveying Non-Source Forms.
234 | 
235 |   You may convey a covered work in object code form under the terms
236 | of sections 4 and 5, provided that you also convey the
237 | machine-readable Corresponding Source under the terms of this License,
238 | in one of these ways:
239 | 
240 |     a) Convey the object code in, or embodied in, a physical product
241 |     (including a physical distribution medium), accompanied by the
242 |     Corresponding Source fixed on a durable physical medium
243 |     customarily used for software interchange.
244 | 
245 |     b) Convey the object code in, or embodied in, a physical product
246 |     (including a physical distribution medium), accompanied by a
247 |     written offer, valid for at least three years and valid for as
248 |     long as you offer spare parts or customer support for that product
249 |     model, to give anyone who possesses the object code either (1) a
250 |     copy of the Corresponding Source for all the software in the
251 |     product that is covered by this License, on a durable physical
252 |     medium customarily used for software interchange, for a price no
253 |     more than your reasonable cost of physically performing this
254 |     conveying of source, or (2) access to copy the
255 |     Corresponding Source from a network server at no charge.
256 | 
257 |     c) Convey individual copies of the object code with a copy of the
258 |     written offer to provide the Corresponding Source.  This
259 |     alternative is allowed only occasionally and noncommercially, and
260 |     only if you received the object code with such an offer, in accord
261 |     with subsection 6b.
262 | 
263 |     d) Convey the object code by offering access from a designated
264 |     place (gratis or for a charge), and offer equivalent access to the
265 |     Corresponding Source in the same way through the same place at no
266 |     further charge.  You need not require recipients to copy the
267 |     Corresponding Source along with the object code.  If the place to
268 |     copy the object code is a network server, the Corresponding Source
269 |     may be on a different server (operated by you or a third party)
270 |     that supports equivalent copying facilities, provided you maintain
271 |     clear directions next to the object code saying where to find the
272 |     Corresponding Source.  Regardless of what server hosts the
273 |     Corresponding Source, you remain obligated to ensure that it is
274 |     available for as long as needed to satisfy these requirements.
275 | 
276 |     e) Convey the object code using peer-to-peer transmission, provided
277 |     you inform other peers where the object code and Corresponding
278 |     Source of the work are being offered to the general public at no
279 |     charge under subsection 6d.
280 | 
281 |   A separable portion of the object code, whose source code is excluded
282 | from the Corresponding Source as a System Library, need not be
283 | included in conveying the object code work.
284 | 
285 |   A "User Product" is either (1) a "consumer product", which means any
286 | tangible personal property which is normally used for personal, family,
287 | or household purposes, or (2) anything designed or sold for incorporation
288 | into a dwelling.  In determining whether a product is a consumer product,
289 | doubtful cases shall be resolved in favor of coverage.  For a particular
290 | product received by a particular user, "normally used" refers to a
291 | typical or common use of that class of product, regardless of the status
292 | of the particular user or of the way in which the particular user
293 | actually uses, or expects or is expected to use, the product.  A product
294 | is a consumer product regardless of whether the product has substantial
295 | commercial, industrial or non-consumer uses, unless such uses represent
296 | the only significant mode of use of the product.
297 | 
298 |   "Installation Information" for a User Product means any methods,
299 | procedures, authorization keys, or other information required to install
300 | and execute modified versions of a covered work in that User Product from
301 | a modified version of its Corresponding Source.  The information must
302 | suffice to ensure that the continued functioning of the modified object
303 | code is in no case prevented or interfered with solely because
304 | modification has been made.
305 | 
306 |   If you convey an object code work under this section in, or with, or
307 | specifically for use in, a User Product, and the conveying occurs as
308 | part of a transaction in which the right of possession and use of the
309 | User Product is transferred to the recipient in perpetuity or for a
310 | fixed term (regardless of how the transaction is characterized), the
311 | Corresponding Source conveyed under this section must be accompanied
312 | by the Installation Information.  But this requirement does not apply
313 | if neither you nor any third party retains the ability to install
314 | modified object code on the User Product (for example, the work has
315 | been installed in ROM).
316 | 
317 |   The requirement to provide Installation Information does not include a
318 | requirement to continue to provide support service, warranty, or updates
319 | for a work that has been modified or installed by the recipient, or for
320 | the User Product in which it has been modified or installed.  Access to a
321 | network may be denied when the modification itself materially and
322 | adversely affects the operation of the network or violates the rules and
323 | protocols for communication across the network.
324 | 
325 |   Corresponding Source conveyed, and Installation Information provided,
326 | in accord with this section must be in a format that is publicly
327 | documented (and with an implementation available to the public in
328 | source code form), and must require no special password or key for
329 | unpacking, reading or copying.
330 | 
331 |   7. Additional Terms.
332 | 
333 |   "Additional permissions" are terms that supplement the terms of this
334 | License by making exceptions from one or more of its conditions.
335 | Additional permissions that are applicable to the entire Program shall
336 | be treated as though they were included in this License, to the extent
337 | that they are valid under applicable law.  If additional permissions
338 | apply only to part of the Program, that part may be used separately
339 | under those permissions, but the entire Program remains governed by
340 | this License without regard to the additional permissions.
341 | 
342 |   When you convey a copy of a covered work, you may at your option
343 | remove any additional permissions from that copy, or from any part of
344 | it.  (Additional permissions may be written to require their own
345 | removal in certain cases when you modify the work.)  You may place
346 | additional permissions on material, added by you to a covered work,
347 | for which you have or can give appropriate copyright permission.
348 | 
349 |   Notwithstanding any other provision of this License, for material you
350 | add to a covered work, you may (if authorized by the copyright holders of
351 | that material) supplement the terms of this License with terms:
352 | 
353 |     a) Disclaiming warranty or limiting liability differently from the
354 |     terms of sections 15 and 16 of this License; or
355 | 
356 |     b) Requiring preservation of specified reasonable legal notices or
357 |     author attributions in that material or in the Appropriate Legal
358 |     Notices displayed by works containing it; or
359 | 
360 |     c) Prohibiting misrepresentation of the origin of that material, or
361 |     requiring that modified versions of such material be marked in
362 |     reasonable ways as different from the original version; or
363 | 
364 |     d) Limiting the use for publicity purposes of names of licensors or
365 |     authors of the material; or
366 | 
367 |     e) Declining to grant rights under trademark law for use of some
368 |     trade names, trademarks, or service marks; or
369 | 
370 |     f) Requiring indemnification of licensors and authors of that
371 |     material by anyone who conveys the material (or modified versions of
372 |     it) with contractual assumptions of liability to the recipient, for
373 |     any liability that these contractual assumptions directly impose on
374 |     those licensors and authors.
375 | 
376 |   All other non-permissive additional terms are considered "further
377 | restrictions" within the meaning of section 10.  If the Program as you
378 | received it, or any part of it, contains a notice stating that it is
379 | governed by this License along with a term that is a further
380 | restriction, you may remove that term.  If a license document contains
381 | a further restriction but permits relicensing or conveying under this
382 | License, you may add to a covered work material governed by the terms
383 | of that license document, provided that the further restriction does
384 | not survive such relicensing or conveying.
385 | 
386 |   If you add terms to a covered work in accord with this section, you
387 | must place, in the relevant source files, a statement of the
388 | additional terms that apply to those files, or a notice indicating
389 | where to find the applicable terms.
390 | 
391 |   Additional terms, permissive or non-permissive, may be stated in the
392 | form of a separately written license, or stated as exceptions;
393 | the above requirements apply either way.
394 | 
395 |   8. Termination.
396 | 
397 |   You may not propagate or modify a covered work except as expressly
398 | provided under this License.  Any attempt otherwise to propagate or
399 | modify it is void, and will automatically terminate your rights under
400 | this License (including any patent licenses granted under the third
401 | paragraph of section 11).
402 | 
403 |   However, if you cease all violation of this License, then your
404 | license from a particular copyright holder is reinstated (a)
405 | provisionally, unless and until the copyright holder explicitly and
406 | finally terminates your license, and (b) permanently, if the copyright
407 | holder fails to notify you of the violation by some reasonable means
408 | prior to 60 days after the cessation.
409 | 
410 |   Moreover, your license from a particular copyright holder is
411 | reinstated permanently if the copyright holder notifies you of the
412 | violation by some reasonable means, this is the first time you have
413 | received notice of violation of this License (for any work) from that
414 | copyright holder, and you cure the violation prior to 30 days after
415 | your receipt of the notice.
416 | 
417 |   Termination of your rights under this section does not terminate the
418 | licenses of parties who have received copies or rights from you under
419 | this License.  If your rights have been terminated and not permanently
420 | reinstated, you do not qualify to receive new licenses for the same
421 | material under section 10.
422 | 
423 |   9. Acceptance Not Required for Having Copies.
424 | 
425 |   You are not required to accept this License in order to receive or
426 | run a copy of the Program.  Ancillary propagation of a covered work
427 | occurring solely as a consequence of using peer-to-peer transmission
428 | to receive a copy likewise does not require acceptance.  However,
429 | nothing other than this License grants you permission to propagate or
430 | modify any covered work.  These actions infringe copyright if you do
431 | not accept this License.  Therefore, by modifying or propagating a
432 | covered work, you indicate your acceptance of this License to do so.
433 | 
434 |   10. Automatic Licensing of Downstream Recipients.
435 | 
436 |   Each time you convey a covered work, the recipient automatically
437 | receives a license from the original licensors, to run, modify and
438 | propagate that work, subject to this License.  You are not responsible
439 | for enforcing compliance by third parties with this License.
440 | 
441 |   An "entity transaction" is a transaction transferring control of an
442 | organization, or substantially all assets of one, or subdividing an
443 | organization, or merging organizations.  If propagation of a covered
444 | work results from an entity transaction, each party to that
445 | transaction who receives a copy of the work also receives whatever
446 | licenses to the work the party's predecessor in interest had or could
447 | give under the previous paragraph, plus a right to possession of the
448 | Corresponding Source of the work from the predecessor in interest, if
449 | the predecessor has it or can get it with reasonable efforts.
450 | 
451 |   You may not impose any further restrictions on the exercise of the
452 | rights granted or affirmed under this License.  For example, you may
453 | not impose a license fee, royalty, or other charge for exercise of
454 | rights granted under this License, and you may not initiate litigation
455 | (including a cross-claim or counterclaim in a lawsuit) alleging that
456 | any patent claim is infringed by making, using, selling, offering for
457 | sale, or importing the Program or any portion of it.
458 | 
459 |   11. Patents.
460 | 
461 |   A "contributor" is a copyright holder who authorizes use under this
462 | License of the Program or a work on which the Program is based.  The
463 | work thus licensed is called the contributor's "contributor version".
464 | 
465 |   A contributor's "essential patent claims" are all patent claims
466 | owned or controlled by the contributor, whether already acquired or
467 | hereafter acquired, that would be infringed by some manner, permitted
468 | by this License, of making, using, or selling its contributor version,
469 | but do not include claims that would be infringed only as a
470 | consequence of further modification of the contributor version.  For
471 | purposes of this definition, "control" includes the right to grant
472 | patent sublicenses in a manner consistent with the requirements of
473 | this License.
474 | 
475 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
476 | patent license under the contributor's essential patent claims, to
477 | make, use, sell, offer for sale, import and otherwise run, modify and
478 | propagate the contents of its contributor version.
479 | 
480 |   In the following three paragraphs, a "patent license" is any express
481 | agreement or commitment, however denominated, not to enforce a patent
482 | (such as an express permission to practice a patent or covenant not to
483 | sue for patent infringement).  To "grant" such a patent license to a
484 | party means to make such an agreement or commitment not to enforce a
485 | patent against the party.
486 | 
487 |   If you convey a covered work, knowingly relying on a patent license,
488 | and the Corresponding Source of the work is not available for anyone
489 | to copy, free of charge and under the terms of this License, through a
490 | publicly available network server or other readily accessible means,
491 | then you must either (1) cause the Corresponding Source to be so
492 | available, or (2) arrange to deprive yourself of the benefit of the
493 | patent license for this particular work, or (3) arrange, in a manner
494 | consistent with the requirements of this License, to extend the patent
495 | license to downstream recipients.  "Knowingly relying" means you have
496 | actual knowledge that, but for the patent license, your conveying the
497 | covered work in a country, or your recipient's use of the covered work
498 | in a country, would infringe one or more identifiable patents in that
499 | country that you have reason to believe are valid.
500 | 
501 |   If, pursuant to or in connection with a single transaction or
502 | arrangement, you convey, or propagate by procuring conveyance of, a
503 | covered work, and grant a patent license to some of the parties
504 | receiving the covered work authorizing them to use, propagate, modify
505 | or convey a specific copy of the covered work, then the patent license
506 | you grant is automatically extended to all recipients of the covered
507 | work and works based on it.
508 | 
509 |   A patent license is "discriminatory" if it does not include within
510 | the scope of its coverage, prohibits the exercise of, or is
511 | conditioned on the non-exercise of one or more of the rights that are
512 | specifically granted under this License.  You may not convey a covered
513 | work if you are a party to an arrangement with a third party that is
514 | in the business of distributing software, under which you make payment
515 | to the third party based on the extent of your activity of conveying
516 | the work, and under which the third party grants, to any of the
517 | parties who would receive the covered work from you, a discriminatory
518 | patent license (a) in connection with copies of the covered work
519 | conveyed by you (or copies made from those copies), or (b) primarily
520 | for and in connection with specific products or compilations that
521 | contain the covered work, unless you entered into that arrangement,
522 | or that patent license was granted, prior to 28 March 2007.
523 | 
524 |   Nothing in this License shall be construed as excluding or limiting
525 | any implied license or other defenses to infringement that may
526 | otherwise be available to you under applicable patent law.
527 | 
528 |   12. No Surrender of Others' Freedom.
529 | 
530 |   If conditions are imposed on you (whether by court order, agreement or
531 | otherwise) that contradict the conditions of this License, they do not
532 | excuse you from the conditions of this License.  If you cannot convey a
533 | covered work so as to satisfy simultaneously your obligations under this
534 | License and any other pertinent obligations, then as a consequence you may
535 | not convey it at all.  For example, if you agree to terms that obligate you
536 | to collect a royalty for further conveying from those to whom you convey
537 | the Program, the only way you could satisfy both those terms and this
538 | License would be to refrain entirely from conveying the Program.
539 | 
540 |   13. Remote Network Interaction; Use with the GNU General Public License.
541 | 
542 |   Notwithstanding any other provision of this License, if you modify the
543 | Program, your modified version must prominently offer all users
544 | interacting with it remotely through a computer network (if your version
545 | supports such interaction) an opportunity to receive the Corresponding
546 | Source of your version by providing access to the Corresponding Source
547 | from a network server at no charge, through some standard or customary
548 | means of facilitating copying of software.  This Corresponding Source
549 | shall include the Corresponding Source for any work covered by version 3
550 | of the GNU General Public License that is incorporated pursuant to the
551 | following paragraph.
552 | 
553 |   Notwithstanding any other provision of this License, you have
554 | permission to link or combine any covered work with a work licensed
555 | under version 3 of the GNU General Public License into a single
556 | combined work, and to convey the resulting work.  The terms of this
557 | License will continue to apply to the part which is the covered work,
558 | but the work with which it is combined will remain governed by version
559 | 3 of the GNU General Public License.
560 | 
561 |   14. Revised Versions of this License.
562 | 
563 |   The Free Software Foundation may publish revised and/or new versions of
564 | the GNU Affero General Public License from time to time.  Such new versions
565 | will be similar in spirit to the present version, but may differ in detail to
566 | address new problems or concerns.
567 | 
568 |   Each version is given a distinguishing version number.  If the
569 | Program specifies that a certain numbered version of the GNU Affero General
570 | Public License "or any later version" applies to it, you have the
571 | option of following the terms and conditions either of that numbered
572 | version or of any later version published by the Free Software
573 | Foundation.  If the Program does not specify a version number of the
574 | GNU Affero General Public License, you may choose any version ever published
575 | by the Free Software Foundation.
576 | 
577 |   If the Program specifies that a proxy can decide which future
578 | versions of the GNU Affero General Public License can be used, that proxy's
579 | public statement of acceptance of a version permanently authorizes you
580 | to choose that version for the Program.
581 | 
582 |   Later license versions may give you additional or different
583 | permissions.  However, no additional obligations are imposed on any
584 | author or copyright holder as a result of your choosing to follow a
585 | later version.
586 | 
587 |   15. Disclaimer of Warranty.
588 | 
589 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
590 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
594 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
595 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
597 | 
598 |   16. Limitation of Liability.
599 | 
600 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
608 | SUCH DAMAGES.
609 | 
610 |   17. Interpretation of Sections 15 and 16.
611 | 
612 |   If the disclaimer of warranty and limitation of liability provided
613 | above cannot be given local legal effect according to their terms,
614 | reviewing courts shall apply local law that most closely approximates
615 | an absolute waiver of all civil liability in connection with the
616 | Program, unless a warranty or assumption of liability accompanies a
617 | copy of the Program in return for a fee.
618 | 
619 |                      END OF TERMS AND CONDITIONS
620 | 
621 |             How to Apply These Terms to Your New Programs
622 | 
623 |   If you develop a new program, and you want it to be of the greatest
624 | possible use to the public, the best way to achieve this is to make it
625 | free software which everyone can redistribute and change under these terms.
626 | 
627 |   To do so, attach the following notices to the program.  It is safest
628 | to attach them to the start of each source file to most effectively
629 | state the exclusion of warranty; and each file should have at least
630 | the "copyright" line and a pointer to where the full notice is found.
631 | 
632 |     <one line to give the program's name and a brief idea of what it does.>
633 |     Copyright (C) <year>  <name of author>
634 | 
635 |     This program is free software: you can redistribute it and/or modify
636 |     it under the terms of the GNU Affero General Public License as published by
637 |     the Free Software Foundation, either version 3 of the License, or
638 |     (at your option) any later version.
639 | 
640 |     This program is distributed in the hope that it will be useful,
641 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
642 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
643 |     GNU Affero General Public License for more details.
644 | 
645 |     You should have received a copy of the GNU Affero General Public License
646 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
647 | 
648 | Also add information on how to contact you by electronic and paper mail.
649 | 
650 |   If your software can interact with users remotely through a computer
651 | network, you should also make sure that it provides a way for users to
652 | get its source.  For example, if your program is a web application, its
653 | interface could display a "Source" link that leads users to an archive
654 | of the code.  There are many ways you could offer source, and different
655 | solutions will be better for different programs; see section 13 for the
656 | specific requirements.
657 | 
658 |   You should also get your employer (if you work as a programmer) or school,
659 | if any, to sign a "copyright disclaimer" for the program, if necessary.
660 | For more information on this, and how to apply and follow the GNU AGPL, see
661 | <https://www.gnu.org/licenses/>.


--------------------------------------------------------------------------------