[web] Add option to hide conversation import

maxijonson · Jul 18, 2023 · f770da3 · f770da3
1 parent 7f6e180
commit f770da3
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 41 deletions.
diff --git a/packages/web/src/components/AddConversation.tsx b/packages/web/src/components/AddConversation.tsx
@@ -6,7 +6,6 @@ import {
     Card,
     createStyles,
     Button,
-    Text,
     Box,
 } from "@mantine/core";
 import React from "react";
@@ -19,6 +18,7 @@ import ConversationDropzone, {
     ConversationNavbarDropzoneProps,
 } from "./inputs/ConversationDropzone";
 import { importConversations } from "../store/actions/conversations/importConversations";
+import { useAppStore } from "../store";
 
 const useStyles = createStyles((theme) => ({
     card: {
@@ -34,6 +34,9 @@ const useStyles = createStyles((theme) => ({
 }));
 
 const AddConversation = () => {
+    const showConversationImport = useAppStore(
+        (state) => state.showConversationImport
+    );
     const { classes } = useStyles();
     const dropzoneOpenRef = React.useRef<() => void>(null);
 
@@ -87,33 +90,33 @@ const AddConversation = () => {
                             <ConversationForm onSubmit={onSubmit} />
                         </Stack>
                     </Card>
-                    <Card
-                        className={classes.card}
-                        shadow="sm"
-                        padding={0}
-                        radius="md"
-                        withBorder
-                    >
-                        <ConversationDropzone
-                            onDrop={onDrop}
-                            openRef={dropzoneOpenRef}
+                    {showConversationImport && (
+                        <Card
+                            className={classes.card}
+                            shadow="sm"
+                            padding={0}
+                            radius="md"
+                            withBorder
                         >
-                            <Box p="lg">
-                                <Button
-                                    variant="light"
-                                    fullWidth
-                                    leftIcon={<BiImport />}
-                                    onClick={() => dropzoneOpenRef.current?.()}
-                                >
-                                    Import Conversation
-                                </Button>
-                                <Text size="xs" italic align="center">
-                                    Tip: You can also drag and drop the
-                                    conversation files in the sidebar!
-                                </Text>
-                            </Box>
-                        </ConversationDropzone>
-                    </Card>
+                            <ConversationDropzone
+                                onDrop={onDrop}
+                                openRef={dropzoneOpenRef}
+                            >
+                                <Box p="lg">
+                                    <Button
+                                        variant="light"
+                                        fullWidth
+                                        leftIcon={<BiImport />}
+                                        onClick={() =>
+                                            dropzoneOpenRef.current?.()
+                                        }
+                                    >
+                                        Import Conversation
+                                    </Button>
+                                </Box>
+                            </ConversationDropzone>
+                        </Card>
+                    )}
                 </Stack>
             </Center>
         </Container>

diff --git a/packages/web/src/components/AppSettings/AppSettingsDangerZone.tsx b/packages/web/src/components/AppSettings/AppSettingsDangerZone.tsx
@@ -7,27 +7,39 @@ import { resetCallableFunctionWarnings } from "../../store/actions/callableFunct
 import { resetDefaultSettings } from "../../store/actions/defaultConversationSettings/resetDefaultSettings";
 import { removeAllSavedContexts } from "../../store/actions/savedContexts/removeAllSavedContexts";
 import { removeAllSavedPrompts } from "../../store/actions/savedPrompts/removeAllSavedPrompts";
+import { useAppStore } from "../../store";
+import { shallow } from "zustand/shallow";
 
 const AppSettingsDangerZone = () => {
+    const [conversations, functions, contexts, prompts] = useAppStore(
+        (state) => [
+            state.conversations,
+            state.callableFunctions,
+            state.savedContexts,
+            state.savedPrompts,
+        ],
+        shallow
+    );
+
     const actions = React.useMemo(
         () => [
             {
-                label: "Delete conversations",
+                label: `Delete all conversations (${conversations.length})`,
                 unconfirmedLabel: "Delete",
                 action: removeAllConversations,
             },
             {
-                label: "Delete Functions",
+                label: `Delete all functions (${functions.length})`,
                 unconfirmedLabel: "Delete",
                 action: removeAllCallableFunctions,
             },
             {
-                label: "Delete Saved Contexts",
+                label: `Delete all saved contexts (${contexts.length})`,
                 unconfirmedLabel: "Delete",
                 action: removeAllSavedContexts,
             },
             {
-                label: "Delete Saved Prompts",
+                label: `Delete all saved prompts (${prompts.length})`,
                 unconfirmedLabel: "Delete",
                 action: removeAllSavedPrompts,
             },
@@ -42,7 +54,12 @@ const AppSettingsDangerZone = () => {
                 action: resetDefaultSettings,
             },
         ],
-        []
+        [
+            contexts.length,
+            conversations.length,
+            functions.length,
+            prompts.length,
+        ]
     );
 
     return (

diff --git a/packages/web/src/components/AppSettings/AppStorageUsage.tsx b/packages/web/src/components/AppSettings/AppStorageUsage.tsx
@@ -16,6 +16,7 @@ interface StorageUsage {
 }
 
 const MIN_SIZE = 100;
+const QUOTA = 5 * 1024 * 1024; // Assuming 5MB, since that's the default for most browsers
 
 const getUsageLabel = (key: string) => {
     const words = key.split(/(?=[A-Z])/);
@@ -87,34 +88,33 @@ const AppStorageUsage = () => {
     );
 
     const sections = React.useMemo(() => {
-        const quota = 5 * 1024 * 1024; // Assuming 5MB, since that's the default for most browsers
         const total = usage.reduce((acc, { size }) => acc + size, 0);
 
         return usage
             .map(({ label, size }, i) => {
                 const color = colors[i % colors.length];
 
                 return {
-                    value: (size / quota) * 100,
+                    value: (size / QUOTA) * 100,
                     color,
                     label,
                     tooltip: `${label} - ${getSizeLabel(size)}`,
                 };
             })
             .concat({
-                value: ((quota - total) / quota) * 100,
+                value: ((QUOTA - total) / QUOTA) * 100,
                 color: theme.colors.dark[2],
                 label: "Available",
-                tooltip: `Available - ${getSizeLabel(quota - total)}`,
+                tooltip: `Available - ${getSizeLabel(QUOTA - total)}`,
             });
     }, [colors, theme.colors.dark, usage]);
 
     return (
         <Box>
             <Text>Storage Usage</Text>
             <Text size="xs" color="dimmed" mb={0}>
-                This is an estimate, assuming a 5MB quota. (default for most
-                browsers).
+                This is an estimate, assuming a {getSizeLabel(QUOTA)} quota.
+                (default for most browsers)
             </Text>
             <Text size="xs" color="dimmed" mb="xs">
                 Categories under {getSizeLabel(MIN_SIZE)} are not shown.

diff --git a/packages/web/src/components/AppSettings/GeneralSettings.tsx b/packages/web/src/components/AppSettings/GeneralSettings.tsx
@@ -9,10 +9,15 @@ import {
 } from "@mantine/core";
 import { useAppStore } from "../../store";
 import { toggleShowUsage } from "../../store/actions/appSettings/toggleShowUsage";
+import { shallow } from "zustand/shallow";
+import { toggleShowConversationImport } from "../../store/actions/appSettings/toggleShowConversationImport";
 
 const GeneralSettings = () => {
     const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-    const showUsage = useAppStore((state) => state.showUsage);
+    const [showUsage, showConversationImport] = useAppStore(
+        (state) => [state.showUsage, state.showConversationImport],
+        shallow
+    );
 
     return (
         <Stack>
@@ -31,12 +36,26 @@ const GeneralSettings = () => {
             </Group>
 
             <Group position="apart" noWrap>
-                <Text>Show Usage</Text>
+                <Text>Show Conversation Usage</Text>
                 <Switch
                     checked={showUsage}
                     onChange={() => toggleShowUsage()}
                 />
             </Group>
+
+            <Group position="apart" noWrap>
+                <Stack spacing={0}>
+                    <Text>Show Conversation Import</Text>
+                    <Text size="xs" color="dimmed">
+                        You can also import conversations by dropping them onto
+                        the navbar.
+                    </Text>
+                </Stack>
+                <Switch
+                    checked={showConversationImport}
+                    onChange={() => toggleShowConversationImport()}
+                />
+            </Group>
         </Stack>
     );
 };

diff --git a/packages/web/src/components/ConversationNavbar/ConversationNavbarHeader/SettingsButton.tsx b/packages/web/src/components/ConversationNavbar/ConversationNavbarHeader/SettingsButton.tsx
@@ -14,7 +14,7 @@ const SettingsButton = () => {
         <>
             <TippedActionIcon
                 variant="outline"
-                tip="Default Conversation Settings"
+                tip="Settings"
                 onClick={openSettings}
             >
                 <BiCog />

diff --git a/packages/web/src/entities/persistenceAppSettings.ts b/packages/web/src/entities/persistenceAppSettings.ts
@@ -6,6 +6,7 @@ export const persistenceAppSettingsSchema = z.object({
         .union([z.literal("light"), z.literal("dark")])
         .default("light"),
     lastChangelog: z.string().default(""),
+    showConversationImport: z.boolean().default(true),
 });
 
 export type PersistenceAppSettings = z.infer<

diff --git a/packages/web/src/store/actions/appSettings/toggleShowConversationImport.ts b/packages/web/src/store/actions/appSettings/toggleShowConversationImport.ts
@@ -0,0 +1,11 @@
+import { createAction } from "../createAction";
+
+export const toggleShowConversationImport = createAction(
+    ({ set }, showConversationImport?: boolean) => {
+        set((state) => {
+            state.showConversationImport =
+                showConversationImport ?? !state.showConversationImport;
+        });
+    },
+    "toggleShowConversationImport"
+);
diff --git a/packages/web/src/store/persist/parsePersistedState.ts b/packages/web/src/store/persist/parsePersistedState.ts
@@ -22,6 +22,7 @@ export const parsePersistedState = async (persistedState: any) => {
     state.showUsage = appSettings.showUsage;
     state.colorScheme = appSettings.colorScheme;
     state.lastChangelog = appSettings.lastChangelog;
+    state.showConversationImport = appSettings.showConversationImport;
 
     // Callable Functions
     const { callableFunctions } = persistence;

diff --git a/packages/web/src/store/persist/partializeStore.ts b/packages/web/src/store/persist/partializeStore.ts
@@ -8,6 +8,7 @@ export const partializeStore = (state: AppState): AppPersistedState => {
         showUsage: state.showUsage,
         colorScheme: state.colorScheme,
         lastChangelog: state.lastChangelog,
+        showConversationImport: state.showConversationImport,
     });
 
     // Callable Functions

diff --git a/packages/web/src/store/slices/appSettingsSlice.ts b/packages/web/src/store/slices/appSettingsSlice.ts
@@ -5,12 +5,14 @@ export interface AppSettingsState {
     showUsage: boolean;
     colorScheme: ColorScheme;
     lastChangelog: string;
+    showConversationImport: boolean;
 }
 
 export const initialAppSettingsState: AppSettingsState = {
     showUsage: false,
     colorScheme: "light",
     lastChangelog: "",
+    showConversationImport: true,
 };
 
 export const createAppSettingsSlice: AppStateSlice<AppSettingsState> = () =>