Add ability to save contexts and prompts (#17)

packages/web/package.json

@@ -9,6 +9,7 @@
         "lint": "eslint --ext .ts,.tsx src",
         "lint:strict": "npm run lint -- --max-warnings 0",
         "lint:fix": "npm run lint -- --fix",
+        "tscheck": "tsc --noEmit",
         "build": "npm run lint:strict && rimraf dist && vite build",
         "dev": "vite",
         "preview": "npm run build && vite preview"

packages/web/src/components/ContextInput.tsx

@@ -1,19 +1,83 @@
-import { Textarea } from "@mantine/core";
+import { Modal, ScrollArea, Stack, Textarea } from "@mantine/core";
+import { BiFolder, BiSave } from "react-icons/bi";
+import TippedActionIcon from "./TippedActionIcon";
+import { useDisclosure } from "@mantine/hooks";
+import SaveContextModalBody from "./SavePromptModalBody";
+import SavedContextsModalBody from "./SavedPromptsModalBody";
+import usePersistence from "../hooks/usePersistence";
 
 interface ContextInputProps {
     value: string;
     onChange: (value: string) => void;
 }
 
 export default ({ value, onChange }: ContextInputProps) => {
+    const {
+        persistence: { contexts },
+    } = usePersistence();
+    const [
+        showSaveContextModal,
+        { open: openSaveContextModal, close: closeSaveContextModal },
+    ] = useDisclosure(false);
+    const [
+        showSavedContextsModal,
+        { open: openSavedContextsModal, close: closeSavedContextsModal },
+    ] = useDisclosure(false);
+
     return (
-        <Textarea
-            value={value}
-            onChange={(event) => onChange(event.currentTarget.value)}
-            autosize
-            minRows={3}
-            maxRows={5}
-            label="Context"
-        />
+        <>
+            <Textarea
+                value={value}
+                onChange={(event) => onChange(event.currentTarget.value)}
+                autosize
+                minRows={3}
+                maxRows={5}
+                label="Context"
+                rightSection={
+                    <Stack spacing="xs">
+                        {contexts.length > 0 && (
+                            <TippedActionIcon
+                                tip="Show Saved Contexts"
+                                onClick={openSavedContextsModal}
+                            >
+                                <BiFolder />
+                            </TippedActionIcon>
+                        )}
+                        <TippedActionIcon
+                            tip="Save context"
+                            onClick={openSaveContextModal}
+                        >
+                            <BiSave />
+                        </TippedActionIcon>
+                    </Stack>
+                }
+            />
+            <Modal
+                opened={showSaveContextModal}
+                onClose={closeSaveContextModal}
+                title="Save Context"
+                centered
+            >
+                <SaveContextModalBody
+                    mode="context"
+                    value={value}
+                    close={closeSaveContextModal}
+                />
+            </Modal>
+            <Modal
+                opened={showSavedContextsModal}
+                onClose={closeSavedContextsModal}
+                title="Saved Contexts"
+                centered
+                scrollAreaComponent={ScrollArea.Autosize}
+                size="lg"
+            >
+                <SavedContextsModalBody
+                    mode="context"
+                    onSelect={onChange}
+                    close={closeSavedContextsModal}
+                />
+            </Modal>
+        </>
     );
 };

packages/web/src/components/Message.tsx

@@ -2,6 +2,7 @@ import {
     Avatar,
     Card,
     Group,
+    Modal,
     Stack,
     Text,
     Textarea,
@@ -10,14 +11,23 @@ import {
 } from "@mantine/core";
 import { Message } from "gpt-turbo";
 import { SiOpenai } from "react-icons/si";
-import { BiCheck, BiCog, BiEdit, BiRefresh, BiUser, BiX } from "react-icons/bi";
+import {
+    BiCheck,
+    BiCog,
+    BiEdit,
+    BiRefresh,
+    BiSave,
+    BiUser,
+    BiX,
+} from "react-icons/bi";
 import React from "react";
 import TippedActionIcon from "./TippedActionIcon";
 import { useForm } from "@mantine/form";
 import useConversationManager from "../hooks/useConversationManager";
 import { notifications } from "@mantine/notifications";
 import CodeBlock, { LANGUAGES, Language } from "./CodeBlock";
-import { useMediaQuery } from "@mantine/hooks";
+import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import SavePromptModalBody from "./SavePromptModalBody";
 
 interface MessageProps {
     message: Message;
@@ -50,6 +60,10 @@ export default ({ message }: MessageProps) => {
         },
     });
     const editFormRef = React.useRef<HTMLFormElement>(null);
+    const [
+        showSavePromptModal,
+        { open: openSavePromptModal, close: closeSavePromptModal },
+    ] = useDisclosure(false);
 
     const theme = useMantineTheme();
     const isSm = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
@@ -188,41 +202,63 @@ export default ({ message }: MessageProps) => {
         }
 
         return (
-            <TippedActionIcon onClick={() => setIsEditing(true)}>
-                <BiEdit />
-            </TippedActionIcon>
+            <>
+                <TippedActionIcon onClick={() => setIsEditing(true)}>
+                    <BiEdit />
+                </TippedActionIcon>
+                <TippedActionIcon onClick={openSavePromptModal}>
+                    <BiSave />
+                </TippedActionIcon>
+            </>
         );
-    }, [form, isEditing, message.role, reprompt]);
+    }, [form, isEditing, message.role, openSavePromptModal, reprompt]);
 
     return (
-        <Group noWrap className={classes.root} spacing={isSm ? "xs" : "sm"}>
-            <div style={{ alignSelf: "start" }}>
-                <Avatar color={color} size={isSm ? "sm" : "md"}>
-                    <Sender />
-                </Avatar>
-            </div>
-            <Card shadow="sm" style={{ flexGrow: 1 }}>
-                <Stack p={0}>
-                    {isEditing ? (
-                        <form ref={editFormRef} onSubmit={onSubmit}>
-                            <Textarea
-                                {...form.getInputProps("content")}
-                                autosize
-                                minRows={1}
-                                maxRows={8}
-                                w="100%"
-                            />
-                        </form>
-                    ) : (
-                        MessageContent
-                    )}
-                </Stack>
-            </Card>
-            {
-                <Stack sx={{ alignSelf: "start" }} className="message-actions">
-                    {Actions}
-                </Stack>
-            }
-        </Group>
+        <>
+            <Group noWrap className={classes.root} spacing={isSm ? "xs" : "sm"}>
+                <div style={{ alignSelf: "start" }}>
+                    <Avatar color={color} size={isSm ? "sm" : "md"}>
+                        <Sender />
+                    </Avatar>
+                </div>
+                <Card shadow="sm" style={{ flexGrow: 1 }}>
+                    <Stack p={0}>
+                        {isEditing ? (
+                            <form ref={editFormRef} onSubmit={onSubmit}>
+                                <Textarea
+                                    {...form.getInputProps("content")}
+                                    autosize
+                                    minRows={1}
+                                    maxRows={8}
+                                    w="100%"
+                                />
+                            </form>
+                        ) : (
+                            MessageContent
+                        )}
+                    </Stack>
+                </Card>
+                {
+                    <Stack
+                        sx={{ alignSelf: "start" }}
+                        className="message-actions"
+                    >
+                        {Actions}
+                    </Stack>
+                }
+            </Group>
+            <Modal
+                opened={showSavePromptModal}
+                onClose={closeSavePromptModal}
+                title="Save Prompt"
+                centered
+            >
+                <SavePromptModalBody
+                    mode="prompt"
+                    close={closeSavePromptModal}
+                    value={message.content}
+                />
+            </Modal>
+        </>
     );
 };