[web] Move state management from Context API to Zustand 🐻 (#36)

package.json

@@ -19,5 +19,8 @@
   ],
   "devDependencies": {
     "lerna": "^7.0.2"
+  },
+  "dependencies": {
+    "immer": "^10.0.2"
   }
 }

packages/lib/src/classes/Conversation.ts

@@ -289,7 +289,7 @@ export class Conversation {
      */
     public addFunction(fn: CallableFunction | CallableFunctionModel) {
         this.functions = this.functions
-            .filter((f) => f.name === fn.name || f.id === fn.id)
+            .filter((f) => f.name !== fn.name && f.id !== fn.id)
             .concat(
                 fn instanceof CallableFunction
                     ? fn

packages/web/package.json

@@ -73,7 +73,8 @@
         "react-icons": "^4.8.0",
         "react-router-dom": "^6.13.0",
         "uuid": "^9.0.0",
-        "zod": "^3.21.4"
+        "zod": "^3.21.4",
+        "zustand": "^4.3.9"
     },
     "devDependencies": {
         "@types/react": "^18.0.26",

packages/web/src/changelog/index.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import v4_4_0 from "./v4-4-0";
+
+export type ChangelogEntrySection = {
+    label: ReactNode;
+    items: ReactNode[];
+};
+
+export type ChangelogEntry = {
+    version: string;
+    date: Date;
+    sections: ChangelogEntrySection[];
+};
+
+// First entry is the latest version
+export const changelog = [v4_4_0];

packages/web/src/changelog/v4-4-0.ts

@@ -0,0 +1,41 @@
+import { ChangelogEntry } from ".";
+import { CHANGELOG_SECTION } from "../config/constants";
+
+const v4_4_0: ChangelogEntry = {
+    version: "4.4.0 - Zustand",
+    date: new Date("july 12 2023"),
+    sections: [
+        {
+            label: CHANGELOG_SECTION.FEATURES,
+            items: [
+                "Added the ability to remove all callable functions.",
+                "Added the ability to remove all saved contexts.",
+                "Added the ability to remove all saved prompts.",
+                "Added the ability to reset default settings.",
+                "Added the ability to reset function warnings.",
+                "Added this changelog!",
+            ],
+        },
+        {
+            label: CHANGELOG_SECTION.IMPROVEMENTS,
+            items: [
+                "Revamped state management from React Context API to Zustand.",
+                "With Zustand comes a new persistence system, which will (hopefully) help with invalid saved data in the future, thanks to migrations.",
+            ],
+        },
+        {
+            label: CHANGELOG_SECTION.FIXES,
+            items: [
+                "Fixed an issue preventing from having more than 1 callable function in a conversation.",
+            ],
+        },
+        {
+            label: CHANGELOG_SECTION.REMOVALS,
+            items: [
+                "Removed the API key from saved conversations. It will be taken from your default settings instead.",
+            ],
+        },
+    ],
+};
+
+export default v4_4_0;

packages/web/src/components/About.tsx

@@ -1,10 +1,9 @@
-import { Anchor, Stack, Text, Title } from "@mantine/core";
+import { Anchor, Stack, Text } from "@mantine/core";
 import { DISCORD_SERVER_INVITE } from "../config/constants";
 
 const About = () => {
     return (
         <Stack>
-            <Title order={3}>About GPT Turbo Web</Title>
             <Text>
                 This web app was created in order to showcase what the
                 underlying{" "}

packages/web/src/components/AddConversationForm.tsx

@@ -1,14 +1,13 @@
-import useConversationManager from "../hooks/useConversationManager";
 import React from "react";
-import usePersistence from "../hooks/usePersistence";
 import ConversationForm from "./ConversationForm";
 import { ConversationFormValues } from "../contexts/ConversationFormContext";
 import useCallableFunctions from "../hooks/useCallableFunctions";
+import { addConversation } from "../store/actions/conversations/addConversation";
+import { setActiveConversation } from "../store/actions/conversations/setActiveConversation";
+import { addPersistedConversationId } from "../store/actions/persistence/addPersistedConversationId";
 
 const AddConversationForm = () => {
-    const { addConversation, setActiveConversation } = useConversationManager();
     const { getCallableFunction } = useCallableFunctions();
-    const { addPersistedConversationId } = usePersistence();
 
     const onSubmit = React.useCallback(
         ({
@@ -21,21 +20,16 @@ const AddConversationForm = () => {
             const newConversation = addConversation(values, { headers, proxy });
             setActiveConversation(newConversation.id, true);
 
-            functionIds.forEach((id) => {
-                const callableFunction = getCallableFunction(id);
+            for (const functionId of functionIds) {
+                const callableFunction = getCallableFunction(functionId);
                 newConversation.addFunction(callableFunction);
-            });
+            }
 
             if (save) {
                 addPersistedConversationId(newConversation.id);
             }
         },
-        [
-            addConversation,
-            addPersistedConversationId,
-            getCallableFunction,
-            setActiveConversation,
-        ]
+        [getCallableFunction]
     );
 
     return <ConversationForm onSubmit={onSubmit} hideAppSettings />;

packages/web/src/components/AppSettings.tsx

@@ -1,5 +1,4 @@
 import {
-    Button,
     ColorScheme,
     Divider,
     Group,
@@ -9,24 +8,14 @@ import {
     Text,
     useMantineColorScheme,
 } from "@mantine/core";
-import useConversationManager from "../hooks/useConversationManager";
-import React from "react";
 import AppStorageUsage from "./AppStorageUsage";
+import { useAppStore } from "../store";
+import { toggleShowUsage } from "../store/actions/appSettings/toggleShowUsage";
+import AppSettingsDangerZone from "./AppSettingsDangerZone";
 
 const AppSettings = () => {
     const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-    const { showUsage, setShowUsage, removeAllConversations } =
-        useConversationManager();
-    const [clearConfirm, setClearConfirm] = React.useState(false);
-
-    const handleClearConversations = React.useCallback(() => {
-        if (!clearConfirm) {
-            setClearConfirm(true);
-            return;
-        }
-        removeAllConversations();
-        setClearConfirm(false);
-    }, [clearConfirm, removeAllConversations]);
+    const showUsage = useAppStore((state) => state.showUsage);
 
     return (
         <Stack>
@@ -48,24 +37,15 @@ const AppSettings = () => {
                 <Text>Show Usage</Text>
                 <Switch
                     checked={showUsage}
-                    onChange={() => setShowUsage(!showUsage)}
+                    onChange={() => toggleShowUsage()}
                 />
             </Group>
 
             <AppStorageUsage />
 
             <Divider label="Danger Zone" labelPosition="center" color="red" />
 
-            <Group position="apart" noWrap>
-                <Text>Delete all conversations</Text>
-                <Button
-                    color="red"
-                    variant={clearConfirm ? undefined : "outline"}
-                    onClick={handleClearConversations}
-                >
-                    {clearConfirm ? "Confirm Delete?" : "Delete"}
-                </Button>
-            </Group>
+            <AppSettingsDangerZone />
         </Stack>
     );
 };

packages/web/src/components/AppSettingsDangerZone.tsx

@@ -0,0 +1,68 @@
+import { Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { removeAllCallableFunctions } from "../store/actions/callableFunctions/removeAllCallableFunctions";
+import { removeAllConversations } from "../store/actions/conversations/removeAllConversations";
+import InlineConfirmButton from "./InlineConfirmButton";
+import React from "react";
+import { resetCallableFunctionWarnings } from "../store/actions/callableFunctions/resetCallableFunctionWarnings";
+import { resetDefaultSettings } from "../store/actions/defaultConversationSettings/resetDefaultSettings";
+import { removeAllSavedContexts } from "../store/actions/savedContexts/removeAllSavedContexts";
+import { removeAllSavedPrompts } from "../store/actions/savedPrompts/removeAllSavedPrompts";
+
+const AppSettingsDangerZone = () => {
+    const actions = React.useMemo(
+        () => [
+            {
+                label: "Delete conversations",
+                unconfirmedLabel: "Delete",
+                action: removeAllConversations,
+            },
+            {
+                label: "Delete Functions",
+                unconfirmedLabel: "Delete",
+                action: removeAllCallableFunctions,
+            },
+            {
+                label: "Delete Saved Contexts",
+                unconfirmedLabel: "Delete",
+                action: removeAllSavedContexts,
+            },
+            {
+                label: "Delete Saved Prompts",
+                unconfirmedLabel: "Delete",
+                action: removeAllSavedPrompts,
+            },
+            {
+                label: "Reset Function Warnings",
+                unconfirmedLabel: "Reset",
+                action: resetCallableFunctionWarnings,
+            },
+            {
+                label: "Reset Default Settings",
+                unconfirmedLabel: "Reset",
+                action: resetDefaultSettings,
+            },
+        ],
+        []
+    );
+
+    return (
+        <Stack>
+            <SimpleGrid cols={1} breakpoints={[{ minWidth: "sm", cols: 2 }]}>
+                {actions.map(({ label, unconfirmedLabel, action }) => (
+                    <Group key={label} position="apart">
+                        <Text size="sm">{label}</Text>
+                        <InlineConfirmButton
+                            color="red"
+                            onConfirm={action}
+                            confirm={`${unconfirmedLabel}?`}
+                        >
+                            {unconfirmedLabel}
+                        </InlineConfirmButton>
+                    </Group>
+                ))}
+            </SimpleGrid>
+        </Stack>
+    );
+};
+
+export default AppSettingsDangerZone;