From 1d4a0546dd317e2c3e71d514dcef2d67285d618d Mon Sep 17 00:00:00 2001
From: Tristan Chin <23557893+maxijonson@users.noreply.github.com>
Date: Fri, 19 May 2023 00:20:20 -0400
Subject: [PATCH] Add ability to save contexts and prompts (#17)

---
 packages/web/package.json                     |   1 +
 packages/web/src/components/ContextInput.tsx  |  82 +++++++++--
 packages/web/src/components/Message.tsx       | 106 ++++++++-----
 packages/web/src/components/Prompt.tsx        | 139 +++++++++++++-----
 .../src/components/SavePromptModalBody.tsx    |  81 ++++++++++
 .../src/components/SavedPromptsModalBody.tsx  |  64 ++++++++
 .../web/src/components/TippedActionIcon.tsx   |  11 +-
 .../web/src/contexts/PersistenceContext.ts    |  12 ++
 .../providers/PersistenceProvider.tsx         | 101 +++++++++++--
 packages/web/src/entities/persistence.ts      |  10 ++
 .../web/src/entities/persistenceContext.ts    |   8 +
 .../web/src/entities/persistencePrompt.ts     |   8 +
 12 files changed, 526 insertions(+), 97 deletions(-)
 create mode 100644 packages/web/src/components/SavePromptModalBody.tsx
 create mode 100644 packages/web/src/components/SavedPromptsModalBody.tsx
 create mode 100644 packages/web/src/entities/persistenceContext.ts
 create mode 100644 packages/web/src/entities/persistencePrompt.ts

diff --git a/packages/web/package.json b/packages/web/package.json
index 6f5ceb9..be7c5df 100644
--- a/packages/web/package.json
+++ b/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"
diff --git a/packages/web/src/components/ContextInput.tsx b/packages/web/src/components/ContextInput.tsx
index b618b66..ccc8429 100644
--- a/packages/web/src/components/ContextInput.tsx
+++ b/packages/web/src/components/ContextInput.tsx
@@ -1,4 +1,10 @@
-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;
@@ -6,14 +12,72 @@ interface ContextInputProps {
 }
 
 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>
+        </>
     );
 };
diff --git a/packages/web/src/components/Message.tsx b/packages/web/src/components/Message.tsx
index ec92ea3..78bea91 100644
--- a/packages/web/src/components/Message.tsx
+++ b/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>
+        </>
     );
 };
diff --git a/packages/web/src/components/Prompt.tsx b/packages/web/src/components/Prompt.tsx
index 0bd7bc1..ab60177 100644
--- a/packages/web/src/components/Prompt.tsx
+++ b/packages/web/src/components/Prompt.tsx
@@ -1,4 +1,11 @@
-import { ActionIcon, Container, Group, Loader, Textarea } from "@mantine/core";
+import {
+    Container,
+    Group,
+    Loader,
+    Modal,
+    ScrollArea,
+    Textarea,
+} from "@mantine/core";
 import { useForm } from "@mantine/form";
 import useConversationManager from "../hooks/useConversationManager";
 import { notifications } from "@mantine/notifications";
@@ -6,12 +13,16 @@ import React from "react";
 import PromptUsage from "./PromptUsage";
 import {
     useClickOutside,
+    useDisclosure,
     useFocusReturn,
     useFocusWithin,
     useMergedRef,
     useOs,
 } from "@mantine/hooks";
-import { BiPaperPlane } from "react-icons/bi";
+import { BiFolder, BiPaperPlane } from "react-icons/bi";
+import TippedActionIcon from "./TippedActionIcon";
+import SavedPromptsModalBody from "./SavedPromptsModalBody";
+import usePersistence from "../hooks/usePersistence";
 
 export default () => {
     const { activeConversation: conversation, showUsage } =
@@ -23,6 +34,15 @@ export default () => {
     });
     const [isStreaming, setIsStreaming] = React.useState(false);
 
+    const {
+        persistence: { prompts },
+    } = usePersistence();
+    const [
+        showSavedPromptsModal,
+        { open: openSavedPromptsModal, close: closeSavedPromptsModal },
+    ] = useDisclosure(false);
+    const actionsRef = React.useRef<HTMLDivElement>(null);
+
     const [shouldReturnFocus, setShouldReturnFocus] = React.useState(false);
     const { ref: focusWithinRef, focused } = useFocusWithin({
         onFocus: () => setShouldReturnFocus(true),
@@ -78,44 +98,83 @@ export default () => {
     if (!conversation) return <Loader />;
 
     return (
-        <Container w="100%">
-            <Group>
-                <form
-                    onSubmit={handleSubmit}
-                    style={{ flexGrow: 1 }}
-                    ref={formRef}
-                >
-                    <Textarea
-                        {...form.getInputProps("prompt")}
-                        ref={textAreaRefs}
-                        disabled={isStreaming}
-                        autosize
-                        minRows={1}
-                        maxRows={8}
-                        w="100%"
-                        placeholder="Ask away..."
-                        rightSection={
-                            <ActionIcon
-                                onClick={() => formRef.current?.requestSubmit()}
-                            >
-                                <BiPaperPlane />
-                            </ActionIcon>
-                        }
-                        onKeyDown={(e) => {
-                            if (e.key === "Enter" && !e.shiftKey) {
-                                e.preventDefault();
-                                formRef.current?.requestSubmit();
+        <>
+            <Container w="100%">
+                <Group>
+                    <form
+                        onSubmit={handleSubmit}
+                        style={{ flexGrow: 1 }}
+                        ref={formRef}
+                    >
+                        <Textarea
+                            {...form.getInputProps("prompt")}
+                            ref={textAreaRefs}
+                            disabled={isStreaming}
+                            autosize
+                            minRows={1}
+                            maxRows={8}
+                            w="100%"
+                            placeholder="Ask away..."
+                            rightSection={
+                                <Group
+                                    ref={actionsRef}
+                                    noWrap
+                                    spacing="xs"
+                                    pr="xs"
+                                >
+                                    {prompts.length > 0 && (
+                                        <TippedActionIcon
+                                            variant="transparent"
+                                            tip="Saved Prompts"
+                                            onClick={openSavedPromptsModal}
+                                        >
+                                            <BiFolder />
+                                        </TippedActionIcon>
+                                    )}
+                                    <TippedActionIcon
+                                        variant="transparent"
+                                        tip="Send"
+                                        onClick={() =>
+                                            formRef.current?.requestSubmit()
+                                        }
+                                    >
+                                        <BiPaperPlane />
+                                    </TippedActionIcon>
+                                </Group>
                             }
-                        }}
-                    />
-                </form>
-                {showUsage && (
-                    <PromptUsage
-                        conversation={conversation}
-                        prompt={form.values.prompt}
-                    />
-                )}
-            </Group>
-        </Container>
+                            rightSectionWidth={actionsRef.current?.clientWidth}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter" && !e.shiftKey) {
+                                    e.preventDefault();
+                                    formRef.current?.requestSubmit();
+                                }
+                            }}
+                        />
+                    </form>
+                    {showUsage && (
+                        <PromptUsage
+                            conversation={conversation}
+                            prompt={form.values.prompt}
+                        />
+                    )}
+                </Group>
+            </Container>
+            <Modal
+                opened={showSavedPromptsModal}
+                onClose={closeSavedPromptsModal}
+                title="Saved Prompts"
+                centered
+                scrollAreaComponent={ScrollArea.Autosize}
+                size="lg"
+            >
+                <SavedPromptsModalBody
+                    mode="prompt"
+                    close={closeSavedPromptsModal}
+                    onSelect={(value) => {
+                        form.setFieldValue("prompt", value);
+                    }}
+                />
+            </Modal>
+        </>
     );
 };
diff --git a/packages/web/src/components/SavePromptModalBody.tsx b/packages/web/src/components/SavePromptModalBody.tsx
new file mode 100644
index 0000000..f5bc342
--- /dev/null
+++ b/packages/web/src/components/SavePromptModalBody.tsx
@@ -0,0 +1,81 @@
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import usePersistence from "../hooks/usePersistence";
+import { persistenceContextSchema } from "../entities/persistenceContext";
+import { z } from "zod";
+import { persistencePromptSchema } from "../entities/persistencePrompt";
+
+interface SaveContextModalBodyProps {
+    value: string;
+    close: () => void;
+    mode: "context" | "prompt";
+}
+
+export default ({ value, close, mode }: SaveContextModalBodyProps) => {
+    const {
+        saveContext,
+        savePrompt,
+        persistence: { contexts, prompts },
+    } = usePersistence();
+
+    const save = mode === "context" ? saveContext : savePrompt;
+    const items = mode === "context" ? contexts : prompts;
+    const schema =
+        mode === "context" ? persistenceContextSchema : persistencePromptSchema;
+
+    const form = useForm({
+        initialValues: {
+            name: "",
+        },
+        validate: zodResolver(
+            z.object({
+                name: schema.shape.name.and(
+                    z
+                        .string()
+                        .refine(
+                            (n) =>
+                                !items.find(
+                                    (c) =>
+                                        c.name.toLowerCase() === n.toLowerCase()
+                                ),
+                            {
+                                message: "Name already exists",
+                            }
+                        )
+                ),
+            })
+        ),
+    });
+
+    const onSubmit = form.onSubmit((values) => {
+        save({
+            name: values.name,
+            value,
+        });
+        close();
+    });
+
+    return (
+        <form
+            onSubmit={(e) => {
+                e.stopPropagation();
+                onSubmit(e);
+            }}
+        >
+            <Stack>
+                <TextInput
+                    {...form.getInputProps("name")}
+                    label="Name"
+                    placeholder={value}
+                    data-autofocus
+                />
+                <Group position="right">
+                    <Button onClick={close} variant="outline">
+                        Cancel
+                    </Button>
+                    <Button type="submit">Save</Button>
+                </Group>
+            </Stack>
+        </form>
+    );
+};
diff --git a/packages/web/src/components/SavedPromptsModalBody.tsx b/packages/web/src/components/SavedPromptsModalBody.tsx
new file mode 100644
index 0000000..9513762
--- /dev/null
+++ b/packages/web/src/components/SavedPromptsModalBody.tsx
@@ -0,0 +1,64 @@
+import { Accordion, Box, Stack } from "@mantine/core";
+import usePersistence from "../hooks/usePersistence";
+import TippedActionIcon from "./TippedActionIcon";
+import { BiImport, BiTrash } from "react-icons/bi";
+import React from "react";
+
+interface SavedContextsModalBodyProps {
+    onSelect: (value: string) => void;
+    close: () => void;
+    mode: "context" | "prompt";
+}
+
+export default ({ close, onSelect, mode }: SavedContextsModalBodyProps) => {
+    const {
+        removeContext,
+        removePrompt,
+        persistence: { contexts, prompts },
+    } = usePersistence();
+
+    const remove = mode === "context" ? removeContext : removePrompt;
+    const items = mode === "context" ? contexts : prompts;
+
+    React.useEffect(() => {
+        if (items.length === 0) {
+            close();
+        }
+    }, [close, items.length]);
+
+    return (
+        <Stack>
+            <Accordion chevronPosition="left" variant="contained">
+                {items.map((item) => (
+                    <Accordion.Item key={item.name} value={item.name}>
+                        <Box
+                            sx={{ display: "flex", alignItems: "center" }}
+                            pr="xs"
+                        >
+                            <Accordion.Control>{item.name}</Accordion.Control>
+                            <TippedActionIcon
+                                position="left"
+                                tip="Delete"
+                                color="red"
+                                onClick={() => remove(item.name)}
+                            >
+                                <BiTrash />
+                            </TippedActionIcon>
+                            <TippedActionIcon
+                                position="left"
+                                tip="Use"
+                                onClick={() => {
+                                    onSelect(item.value);
+                                    close();
+                                }}
+                            >
+                                <BiImport />
+                            </TippedActionIcon>
+                        </Box>
+                        <Accordion.Panel>{item.value}</Accordion.Panel>
+                    </Accordion.Item>
+                ))}
+            </Accordion>
+        </Stack>
+    );
+};
diff --git a/packages/web/src/components/TippedActionIcon.tsx b/packages/web/src/components/TippedActionIcon.tsx
index d5d7268..0645c70 100644
--- a/packages/web/src/components/TippedActionIcon.tsx
+++ b/packages/web/src/components/TippedActionIcon.tsx
@@ -5,6 +5,7 @@ import {
     Tooltip,
     Variants,
 } from "@mantine/core";
+import { FloatingPosition } from "@mantine/core/lib/Floating";
 import { MouseEventHandler } from "react";
 
 interface TippedActionIconProps {
@@ -22,6 +23,7 @@ interface TippedActionIconProps {
     >;
     color?: MantineColor;
     size?: MantineNumberSize;
+    position?: FloatingPosition;
 }
 
 export default ({
@@ -31,9 +33,16 @@ export default ({
     variant,
     color,
     size,
+    position,
 }: TippedActionIconProps) => {
     return (
-        <Tooltip label={tip} withArrow openDelay={1000} hidden={!tip}>
+        <Tooltip
+            label={tip}
+            withArrow
+            openDelay={1000}
+            hidden={!tip}
+            position={position}
+        >
             <ActionIcon
                 variant={variant}
                 color={color}
diff --git a/packages/web/src/contexts/PersistenceContext.ts b/packages/web/src/contexts/PersistenceContext.ts
index 6d82eff..15ce4ab 100644
--- a/packages/web/src/contexts/PersistenceContext.ts
+++ b/packages/web/src/contexts/PersistenceContext.ts
@@ -1,6 +1,8 @@
 import React from "react";
 import makeNotImplemented from "../utils/makeNotImplemented";
 import { Persistence } from "../entities/persistence";
+import { PersistenceContext as PersistenceContextEntity } from "../entities/persistenceContext";
+import { PersistencePrompt } from "../entities/persistencePrompt";
 
 export interface PersistenceContextValue {
     persistence: Persistence;
@@ -8,15 +10,25 @@ export interface PersistenceContextValue {
     persistedConversationIds: string[];
     isLoading: boolean;
     hasInit: boolean;
+    saveContext: (context: PersistenceContextEntity) => void;
+    savePrompt: (prompt: PersistencePrompt) => void;
+    removeContext: (contextName: string) => void;
+    removePrompt: (promptName: string) => void;
 }
 
 const notImplemented = makeNotImplemented("PersistenceContext");
 export const PersistenceContext = React.createContext<PersistenceContextValue>({
     persistence: {
         conversations: [],
+        contexts: [],
+        prompts: [],
     },
     addPersistedConversationId: notImplemented,
     persistedConversationIds: [],
     isLoading: false,
     hasInit: true,
+    saveContext: notImplemented,
+    savePrompt: notImplemented,
+    removeContext: notImplemented,
+    removePrompt: notImplemented,
 });
diff --git a/packages/web/src/contexts/providers/PersistenceProvider.tsx b/packages/web/src/contexts/providers/PersistenceProvider.tsx
index 0333ee4..bb2f994 100644
--- a/packages/web/src/contexts/providers/PersistenceProvider.tsx
+++ b/packages/web/src/contexts/providers/PersistenceProvider.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-    PersistenceContext,
+    PersistenceContext as PersistenceContextComponent,
     PersistenceContextValue,
 } from "../PersistenceContext";
 import useStorage from "../../hooks/useStorage";
@@ -8,6 +8,8 @@ import useConversationManager from "../../hooks/useConversationManager";
 import { Persistence, persistenceSchema } from "../../entities/persistence";
 import { PersistenceConversation } from "../../entities/persistenceConversation";
 import { Conversation, Message } from "gpt-turbo";
+import { PersistenceContext } from "../../entities/persistenceContext";
+import { PersistencePrompt } from "../../entities/persistencePrompt";
 
 interface PersistenceProviderProps {
     children?: React.ReactNode;
@@ -29,6 +31,8 @@ export default ({ children }: PersistenceProviderProps) => {
         "gpt-turbo-persistence",
         {
             conversations: [],
+            contexts: [],
+            prompts: [],
         },
         persistenceSchema
     );
@@ -47,7 +51,7 @@ export default ({ children }: PersistenceProviderProps) => {
         });
     }, []);
 
-    const save = React.useCallback(() => {
+    const saveConversations = React.useCallback(() => {
         const persistedConversations: PersistenceConversation[] = conversations
             .filter(
                 (conversation) =>
@@ -59,9 +63,10 @@ export default ({ children }: PersistenceProviderProps) => {
                 name: getConversationName(conversation.id),
             }));
 
-        setPersistence({
+        setPersistence((current) => ({
+            ...current,
             conversations: persistedConversations,
-        });
+        }));
     }, [
         conversations,
         getConversationName,
@@ -69,6 +74,64 @@ export default ({ children }: PersistenceProviderProps) => {
         setPersistence,
     ]);
 
+    const saveContext = React.useCallback(
+        (context: PersistenceContext) => {
+            setPersistence((current) => {
+                if (current.contexts.includes(context)) {
+                    return current;
+                }
+                return persistenceSchema.parse({
+                    ...current,
+                    contexts: [...current.contexts, context],
+                });
+            });
+        },
+        [setPersistence]
+    );
+
+    const savePrompt = React.useCallback(
+        (prompt: PersistencePrompt) => {
+            setPersistence((current) => {
+                if (current.prompts.includes(prompt)) {
+                    return current;
+                }
+                return persistenceSchema.parse({
+                    ...current,
+                    prompts: [...current.prompts, prompt],
+                });
+            });
+        },
+        [setPersistence]
+    );
+
+    const removeContext = React.useCallback(
+        (contextName: string) => {
+            setPersistence((current) =>
+                persistenceSchema.parse({
+                    ...current,
+                    contexts: current.contexts.filter(
+                        (c) => c.name !== contextName
+                    ),
+                })
+            );
+        },
+        [setPersistence]
+    );
+
+    const removePrompt = React.useCallback(
+        (promptName: string) => {
+            setPersistence((current) =>
+                persistenceSchema.parse({
+                    ...current,
+                    prompts: current.prompts.filter(
+                        (p) => p.name !== promptName
+                    ),
+                })
+            );
+        },
+        [setPersistence]
+    );
+
     const providerValue = React.useMemo<PersistenceContextValue>(
         () => ({
             persistence,
@@ -76,6 +139,10 @@ export default ({ children }: PersistenceProviderProps) => {
             persistedConversationIds,
             isLoading,
             hasInit,
+            saveContext,
+            savePrompt,
+            removeContext,
+            removePrompt,
         }),
         [
             addPersistedConversationId,
@@ -83,6 +150,10 @@ export default ({ children }: PersistenceProviderProps) => {
             isLoading,
             persistedConversationIds,
             persistence,
+            removeContext,
+            removePrompt,
+            saveContext,
+            savePrompt,
         ]
     );
 
@@ -125,7 +196,7 @@ export default ({ children }: PersistenceProviderProps) => {
     React.useEffect(() => {
         if (isLoading || !hasInit) return;
 
-        save();
+        saveConversations();
 
         const offs = conversations
             .filter((conversation) =>
@@ -137,14 +208,14 @@ export default ({ children }: PersistenceProviderProps) => {
                 const attachMessageListeners = () => (message: Message) => {
                     messageOffs.push(
                         message.onMessageStreamingStop(() => {
-                            save();
+                            saveConversations();
                         })
                     );
 
                     messageOffs.push(
                         message.onMessageUpdate((_, m) => {
                             if (m.isStreaming) return;
-                            save();
+                            saveConversations();
                         })
                     );
                 };
@@ -153,13 +224,13 @@ export default ({ children }: PersistenceProviderProps) => {
 
                 const offMessageAdded = conversation.onMessageAdded(
                     (message) => {
-                        save();
+                        saveConversations();
                         attachMessageListeners()(message);
                     }
                 );
 
                 const offMessageRemoved = conversation.onMessageRemoved(() => {
-                    save();
+                    saveConversations();
                 });
 
                 return () => {
@@ -172,11 +243,17 @@ export default ({ children }: PersistenceProviderProps) => {
         return () => {
             offs.forEach((off) => off());
         };
-    }, [conversations, hasInit, isLoading, persistedConversationIds, save]);
+    }, [
+        conversations,
+        hasInit,
+        isLoading,
+        persistedConversationIds,
+        saveConversations,
+    ]);
 
     return (
-        <PersistenceContext.Provider value={providerValue}>
+        <PersistenceContextComponent.Provider value={providerValue}>
             {children}
-        </PersistenceContext.Provider>
+        </PersistenceContextComponent.Provider>
     );
 };
diff --git a/packages/web/src/entities/persistence.ts b/packages/web/src/entities/persistence.ts
index 23580d8..3f2c7c7 100644
--- a/packages/web/src/entities/persistence.ts
+++ b/packages/web/src/entities/persistence.ts
@@ -1,8 +1,18 @@
 import { z } from "zod";
 import { persistenceConversationSchema } from "./persistenceConversation";
+import { persistenceContextSchema } from "./persistenceContext";
+import { persistencePromptSchema } from "./persistencePrompt";
 
 export const persistenceSchema = z.object({
     conversations: z.array(persistenceConversationSchema),
+    contexts: z.array(persistenceContextSchema).refine((contexts) => {
+        const names = contexts.map((c) => c.name.toLowerCase());
+        return names.length === new Set(names).size;
+    }, "Context names must be unique"),
+    prompts: z.array(persistencePromptSchema).refine((prompts) => {
+        const names = prompts.map((p) => p.name.toLowerCase());
+        return names.length === new Set(names).size;
+    }, "Prompt names must be unique"),
 });
 
 export type Persistence = z.infer<typeof persistenceSchema>;
diff --git a/packages/web/src/entities/persistenceContext.ts b/packages/web/src/entities/persistenceContext.ts
new file mode 100644
index 0000000..c2a8026
--- /dev/null
+++ b/packages/web/src/entities/persistenceContext.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const persistenceContextSchema = z.object({
+    name: z.string().max(50).min(1),
+    value: z.string(),
+});
+
+export type PersistenceContext = z.infer<typeof persistenceContextSchema>;
diff --git a/packages/web/src/entities/persistencePrompt.ts b/packages/web/src/entities/persistencePrompt.ts
new file mode 100644
index 0000000..e4a38b0
--- /dev/null
+++ b/packages/web/src/entities/persistencePrompt.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const persistencePromptSchema = z.object({
+    name: z.string().max(50).min(1),
+    value: z.string(),
+});
+
+export type PersistencePrompt = z.infer<typeof persistencePromptSchema>;