From 7578c405ccd15bfb86b179bf3a872b1188237b6e Mon Sep 17 00:00:00 2001
From: Tristan Chin <23557893+maxijonson@users.noreply.github.com>
Date: Mon, 1 May 2023 23:03:32 -0400
Subject: [PATCH] [web] Advanced Conversation Parameters and [lib] Proxy fix
 (#14)

---
 .../src/schemas/conversationConfig.schema.ts  |   7 +-
 .../lib/src/utils/createChatCompletion.ts     |   6 +-
 packages/lib/src/utils/createModeration.ts    |   6 +-
 packages/lib/src/utils/getRequestHeaders.ts   |   6 +-
 packages/lib/src/utils/getRequestUrl.ts       |  16 +-
 packages/lib/src/utils/types.ts               |   2 +-
 .../src/components/AddConversationForm.tsx    | 190 +--------------
 packages/web/src/components/ApiKeyInput.tsx   |  27 +++
 packages/web/src/components/AppNavbar.tsx     |   4 +-
 packages/web/src/components/ContextInput.tsx  |  19 ++
 .../web/src/components/ConversationForm.tsx   | 216 ++++++++++++++++++
 .../src/components/DisableModerationInput.tsx |  39 ++++
 packages/web/src/components/DryInput.tsx      |  24 ++
 packages/web/src/components/HeadersInput.tsx  | 136 +++++++++++
 .../web/src/components/LogitBiasInput.tsx     | 155 +++++++++++++
 .../web/src/components/ModelSelectInput.tsx   |  67 ++++++
 .../src/components/OptionalNumberInput.tsx    |  44 ++++
 packages/web/src/components/ProxyInput.tsx    |  96 ++++++++
 packages/web/src/components/SaveInput.tsx     |  17 ++
 packages/web/src/components/Settings.tsx      | 132 -----------
 packages/web/src/components/SettingsForm.tsx  |  23 ++
 packages/web/src/components/StopInput.tsx     |  46 ++++
 packages/web/src/components/StreamInput.tsx   |  17 ++
 .../contexts/ConversationManagerContext.ts    |   9 +-
 packages/web/src/contexts/SettingsContext.ts  |  27 ++-
 .../providers/ConversationManagerProvider.tsx |  13 +-
 .../contexts/providers/SettingsProvider.tsx   |  12 +-
 packages/web/src/entities/settings.ts         |  38 ++-
 packages/web/src/hooks/useStorage.tsx         |   6 +-
 29 files changed, 1038 insertions(+), 362 deletions(-)
 create mode 100644 packages/web/src/components/ApiKeyInput.tsx
 create mode 100644 packages/web/src/components/ContextInput.tsx
 create mode 100644 packages/web/src/components/ConversationForm.tsx
 create mode 100644 packages/web/src/components/DisableModerationInput.tsx
 create mode 100644 packages/web/src/components/DryInput.tsx
 create mode 100644 packages/web/src/components/HeadersInput.tsx
 create mode 100644 packages/web/src/components/LogitBiasInput.tsx
 create mode 100644 packages/web/src/components/ModelSelectInput.tsx
 create mode 100644 packages/web/src/components/OptionalNumberInput.tsx
 create mode 100644 packages/web/src/components/ProxyInput.tsx
 create mode 100644 packages/web/src/components/SaveInput.tsx
 delete mode 100644 packages/web/src/components/Settings.tsx
 create mode 100644 packages/web/src/components/SettingsForm.tsx
 create mode 100644 packages/web/src/components/StopInput.tsx
 create mode 100644 packages/web/src/components/StreamInput.tsx

diff --git a/packages/lib/src/schemas/conversationConfig.schema.ts b/packages/lib/src/schemas/conversationConfig.schema.ts
index 073b50a..351affa 100644
--- a/packages/lib/src/schemas/conversationConfig.schema.ts
+++ b/packages/lib/src/schemas/conversationConfig.schema.ts
@@ -16,7 +16,12 @@ export const conversationConfigSchema = z.object({
     max_tokens: z.number().optional(),
     presence_penalty: z.number().optional(),
     frequency_penalty: z.number().optional(),
-    logit_bias: z.record(z.number(), z.number()).optional(),
+    logit_bias: z
+        .record(
+            z.string().refine((val) => !isNaN(Number(val))),
+            z.number()
+        )
+        .optional(),
     user: z.string().optional(),
 });
 
diff --git a/packages/lib/src/utils/createChatCompletion.ts b/packages/lib/src/utils/createChatCompletion.ts
index be44dce..f5f8968 100644
--- a/packages/lib/src/utils/createChatCompletion.ts
+++ b/packages/lib/src/utils/createChatCompletion.ts
@@ -20,11 +20,7 @@ export default async <T extends CreateChatCompletionRequest>(
 ): Promise<
     T["stream"] extends true ? ReadableStream : CreateChatCompletionResponse
 > => {
-    const headers: Record<string, string> = getRequestHeaders(
-        apiKey,
-        optHeaders,
-        proxy
-    );
+    const headers = getRequestHeaders(apiKey, optHeaders, proxy);
     const url = getRequestUrl(ENDPOINT_CHATCOMPLETION, proxy);
 
     const response = await fetch(url, {
diff --git a/packages/lib/src/utils/createModeration.ts b/packages/lib/src/utils/createModeration.ts
index 2b250a9..9955bde 100644
--- a/packages/lib/src/utils/createModeration.ts
+++ b/packages/lib/src/utils/createModeration.ts
@@ -18,11 +18,7 @@ export default async (
     { apiKey, input }: CreateModerationRequest,
     { headers: optHeaders = {}, proxy }: RequestOptions
 ): Promise<CreateModerationResponse> => {
-    const headers: Record<string, string> = getRequestHeaders(
-        apiKey,
-        optHeaders,
-        proxy
-    );
+    const headers = getRequestHeaders(apiKey, optHeaders, proxy);
     const url = getRequestUrl(ENDPOINT_MODERATION, proxy);
 
     const response = await fetch(url, {
diff --git a/packages/lib/src/utils/getRequestHeaders.ts b/packages/lib/src/utils/getRequestHeaders.ts
index 6c80046..cae4f59 100644
--- a/packages/lib/src/utils/getRequestHeaders.ts
+++ b/packages/lib/src/utils/getRequestHeaders.ts
@@ -9,17 +9,17 @@ export default (
     optHeaders: Record<string, string> = {},
     proxy?: RequestOptionsProxy
 ) => {
-    const headers: Record<string, string> = {
+    const headers = new Headers({
         ...optHeaders,
         "Content-Type": "application/json",
         Authorization: `Bearer ${apiKey}`,
-    };
+    });
 
     if (proxy && proxy.auth) {
         const auth = base64Encode(
             `${proxy.auth.username}:${proxy.auth.password}`
         );
-        headers["Proxy-Authorization"] = `Basic ${auth}`;
+        headers.set("Proxy-Authorization", `Basic ${auth}`);
     }
 
     return headers;
diff --git a/packages/lib/src/utils/getRequestUrl.ts b/packages/lib/src/utils/getRequestUrl.ts
index 9c5a6fa..0f34e9e 100644
--- a/packages/lib/src/utils/getRequestUrl.ts
+++ b/packages/lib/src/utils/getRequestUrl.ts
@@ -4,13 +4,15 @@ import { RequestOptionsProxy } from "./types.js";
  * Returns the URL object for a request, taking into account a proxy.
  */
 export default (targetUrl: string, proxy?: RequestOptionsProxy) => {
-    let url = new URL(targetUrl);
-    if (proxy) {
-        url = new URL(
-            url.pathname,
-            `${proxy.protocol || "http"}://${proxy.host}:${proxy.port || 80}`
-        );
+    if (!proxy) return new URL(targetUrl);
+
+    const protocol = proxy.protocol || "http";
+    const host = proxy.host;
+    const port = proxy.port || (protocol === "https" ? 443 : 80);
+
+    if (!host) {
+        throw new Error("Proxy host is required.");
     }
 
-    return url;
+    return new URL(`${protocol}://${host}:${port}/${targetUrl}`);
 };
diff --git a/packages/lib/src/utils/types.ts b/packages/lib/src/utils/types.ts
index de8a797..b472ff0 100644
--- a/packages/lib/src/utils/types.ts
+++ b/packages/lib/src/utils/types.ts
@@ -59,7 +59,7 @@ export interface RequestOptionsProxy {
     /**
      * The port number of the proxy server.
      *
-     * @default 80
+     * @default 80 for HTTP, 443 for HTTPS
      */
     port?: number;
 
diff --git a/packages/web/src/components/AddConversationForm.tsx b/packages/web/src/components/AddConversationForm.tsx
index 63db714..fc2b4ba 100644
--- a/packages/web/src/components/AddConversationForm.tsx
+++ b/packages/web/src/components/AddConversationForm.tsx
@@ -1,188 +1,22 @@
-import { useForm } from "@mantine/form";
 import useConversationManager from "../hooks/useConversationManager";
-import {
-    Group,
-    PasswordInput,
-    Select,
-    Stack,
-    Text,
-    Switch,
-    Input,
-    SegmentedControl,
-    Button,
-    Textarea,
-    Tooltip,
-    Anchor,
-    useMantineTheme,
-} from "@mantine/core";
 import React from "react";
-import useSettings from "../hooks/useSettings";
 import usePersistence from "../hooks/usePersistence";
-
-export const ModelSelectItem = React.forwardRef<
-    HTMLDivElement,
-    { label: string; value: string; selected: boolean }
->(({ label, value, ...restProps }, ref) => {
-    const theme = useMantineTheme();
-    const { selected } = restProps;
-
-    const subColor = (() => {
-        const dark = theme.colorScheme === "dark";
-
-        if (dark && selected) {
-            return theme.colors.gray[4];
-        } else if (dark && !selected) {
-            return theme.colors.gray[6];
-        } else if (selected) {
-            return theme.colors.gray[3];
-        } else {
-            return theme.colors.gray[6];
-        }
-    })();
-
-    return (
-        <Stack ref={ref} spacing={0} p="xs" {...restProps}>
-            <Text>{label}</Text>
-            <Text size="xs" color={subColor}>
-                {value}
-            </Text>
-        </Stack>
-    );
-});
+import ConversationForm, { ConversationFormValues } from "./ConversationForm";
 
 export default () => {
     const { addConversation, setActiveConversation } = useConversationManager();
     const { addPersistedConversationId } = usePersistence();
-    const { settings } = useSettings();
-    const form = useForm({
-        initialValues: {
-            apiKey: settings.apiKey,
-            model: settings.model,
-            context: settings.context,
-            dry: settings.dry,
-            disableModeration: settings.disableModeration,
-            stream: settings.stream,
-            save: settings.save,
-        },
-        transformValues: (values) => ({
-            ...values,
-            disableModeration: (values.disableModeration === "soft"
-                ? "soft"
-                : values.disableModeration === "off") as boolean | "soft",
-            dry: !values.apiKey || values.dry,
-        }),
-    });
-    const [modelOptions, setModelOptions] = React.useState([
-        { label: "GPT 3.5", value: "gpt-3.5-turbo" },
-        { label: "GPT 4", value: "gpt-4" },
-        { label: "GPT 4 (32k)", value: "gpt-4-32k" },
-    ]);
-
-    const handleSubmit = form.onSubmit(({ save, ...values }) => {
-        const newConversation = addConversation(values);
-        setActiveConversation(newConversation.id, true);
-        if (save) {
-            addPersistedConversationId(newConversation.id);
-        }
-    });
 
-    return (
-        <form onSubmit={handleSubmit}>
-            <Stack>
-                <PasswordInput
-                    {...form.getInputProps("apiKey")}
-                    label="OpenAI API Key"
-                    description={
-                        <Text>
-                            You can find yours{" "}
-                            <Anchor
-                                href="https://platform.openai.com/account/api-keys"
-                                target="_blank"
-                            >
-                                here
-                            </Anchor>
-                        </Text>
-                    }
-                />
-                <Group>
-                    <Select
-                        {...form.getInputProps("model")}
-                        label="Model"
-                        searchable
-                        creatable
-                        itemComponent={ModelSelectItem}
-                        data={modelOptions}
-                        getCreateLabel={(query) => query}
-                        onCreate={(query) => {
-                            const item = { value: query, label: query };
-                            setModelOptions((current) => [...current, item]);
-                            return item;
-                        }}
-                        sx={{ flexGrow: 1 }}
-                    />
-                    <Group position="center" sx={{ flexGrow: 1 }}>
-                        <Input.Wrapper label="Moderation">
-                            <div>
-                                <SegmentedControl
-                                    {...form.getInputProps("disableModeration")}
-                                    color="blue"
-                                    data={[
-                                        { label: "On", value: "on" },
-                                        { label: "Soft", value: "soft" },
-                                        { label: "Off", value: "off" },
-                                    ]}
-                                />
-                            </div>
-                        </Input.Wrapper>
-                    </Group>
-                    <Group position="center" noWrap sx={{ flexGrow: 1 }}>
-                        <Tooltip
-                            label="Dry mode is enabled when no API key is specified"
-                            disabled={!!form.values.apiKey}
-                        >
-                            <Input.Wrapper label="Dry">
-                                <Switch
-                                    {...form.getInputProps("dry")}
-                                    checked={
-                                        !form.values.apiKey || form.values.dry
-                                    }
-                                    readOnly={!form.values.apiKey}
-                                />
-                            </Input.Wrapper>
-                        </Tooltip>
-                        <Input.Wrapper label="Stream">
-                            <Switch
-                                {...form.getInputProps("stream", {
-                                    type: "checkbox",
-                                })}
-                            />
-                        </Input.Wrapper>
-                        <Input.Wrapper label="Save">
-                            <Switch
-                                {...form.getInputProps("save", {
-                                    type: "checkbox",
-                                })}
-                            />
-                        </Input.Wrapper>
-                    </Group>
-                </Group>
-                <Textarea
-                    {...form.getInputProps("context")}
-                    autosize
-                    minRows={3}
-                    maxRows={5}
-                    label="Context"
-                />
-                <Button type="submit">Start</Button>
-                {form.values.save && (
-                    <Text size="xs" italic align="center">
-                        This conversation will be saved to your browser's local
-                        storage, along with your API key, if specified. Make
-                        sure that you trust the device you are using and that
-                        you are not using a shared device.
-                    </Text>
-                )}
-            </Stack>
-        </form>
+    const onSubmit = React.useCallback(
+        ({ save, headers, proxy, ...values }: ConversationFormValues) => {
+            const newConversation = addConversation(values, { headers, proxy });
+            setActiveConversation(newConversation.id, true);
+            if (save) {
+                addPersistedConversationId(newConversation.id);
+            }
+        },
+        [addConversation, addPersistedConversationId, setActiveConversation]
     );
+
+    return <ConversationForm onSubmit={onSubmit} />;
 };
diff --git a/packages/web/src/components/ApiKeyInput.tsx b/packages/web/src/components/ApiKeyInput.tsx
new file mode 100644
index 0000000..510e454
--- /dev/null
+++ b/packages/web/src/components/ApiKeyInput.tsx
@@ -0,0 +1,27 @@
+import { PasswordInput, Anchor, Text } from "@mantine/core";
+
+interface ApiKeyInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export default ({ value, onChange }: ApiKeyInputProps) => {
+    return (
+        <PasswordInput
+            value={value || ""}
+            onChange={(event) => onChange(event.currentTarget.value)}
+            label="OpenAI API Key"
+            description={
+                <Text>
+                    You can find yours{" "}
+                    <Anchor
+                        href="https://platform.openai.com/account/api-keys"
+                        target="_blank"
+                    >
+                        here
+                    </Anchor>
+                </Text>
+            }
+        />
+    );
+};
diff --git a/packages/web/src/components/AppNavbar.tsx b/packages/web/src/components/AppNavbar.tsx
index f8c2185..eb8e73a 100644
--- a/packages/web/src/components/AppNavbar.tsx
+++ b/packages/web/src/components/AppNavbar.tsx
@@ -23,7 +23,7 @@ import {
 } from "react-icons/bi";
 import TippedActionIcon from "./TippedActionIcon";
 import { openModal } from "@mantine/modals";
-import Settings from "./Settings";
+import SettingsForm from "./SettingsForm";
 import NavbarConversation from "./NavbarConversation";
 import React from "react";
 import Usage from "./Usage";
@@ -110,7 +110,7 @@ export default () => {
                             tip="Settings"
                             onClick={() =>
                                 openModal({
-                                    children: <Settings />,
+                                    children: <SettingsForm />,
                                     centered: true,
                                     size: "lg",
                                     title: "Settings",
diff --git a/packages/web/src/components/ContextInput.tsx b/packages/web/src/components/ContextInput.tsx
new file mode 100644
index 0000000..b618b66
--- /dev/null
+++ b/packages/web/src/components/ContextInput.tsx
@@ -0,0 +1,19 @@
+import { Textarea } from "@mantine/core";
+
+interface ContextInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export default ({ value, onChange }: ContextInputProps) => {
+    return (
+        <Textarea
+            value={value}
+            onChange={(event) => onChange(event.currentTarget.value)}
+            autosize
+            minRows={3}
+            maxRows={5}
+            label="Context"
+        />
+    );
+};
diff --git a/packages/web/src/components/ConversationForm.tsx b/packages/web/src/components/ConversationForm.tsx
new file mode 100644
index 0000000..6751c77
--- /dev/null
+++ b/packages/web/src/components/ConversationForm.tsx
@@ -0,0 +1,216 @@
+import React from "react";
+import { useForm } from "@mantine/form";
+import {
+    Group,
+    Stack,
+    Text,
+    Button,
+    Divider,
+    Collapse,
+    TextInput,
+    Grid,
+} from "@mantine/core";
+import useSettings from "../hooks/useSettings";
+import ModelSelectInput from "./ModelSelectInput";
+import DisableModerationInput from "./DisableModerationInput";
+import { CreateChatCompletionRequest, RequestOptionsProxy } from "gpt-turbo";
+import ApiKeyInput from "./ApiKeyInput";
+import DryInput from "./DryInput";
+import StreamInput from "./StreamInput";
+import SaveInput from "./SaveInput";
+import ContextInput from "./ContextInput";
+import OptionalNumberInput from "./OptionalNumberInput";
+import StopInput from "./StopInput";
+import LogitBiasInput from "./LogitBiasInput";
+import HeadersInput from "./HeadersInput";
+import ProxyInput from "./ProxyInput";
+
+export interface ConversationFormValues {
+    save: boolean;
+
+    apiKey: string;
+    model: string;
+    context: string;
+    dry: boolean;
+    disableModeration: boolean | "soft";
+    stream: boolean;
+
+    temperature: CreateChatCompletionRequest["temperature"];
+    top_p: CreateChatCompletionRequest["top_p"];
+    frequency_penalty: CreateChatCompletionRequest["frequency_penalty"];
+    presence_penalty: CreateChatCompletionRequest["presence_penalty"];
+    stop: CreateChatCompletionRequest["stop"];
+    max_tokens: CreateChatCompletionRequest["max_tokens"];
+    logit_bias: CreateChatCompletionRequest["logit_bias"];
+    user: CreateChatCompletionRequest["user"];
+
+    headers: Record<string, string> | undefined;
+    proxy: RequestOptionsProxy | undefined;
+}
+
+interface ConversationFormProps {
+    onSubmit: (values: ConversationFormValues) => void;
+}
+
+export default ({ onSubmit }: ConversationFormProps) => {
+    const { settings } = useSettings();
+    const form = useForm({
+        initialValues: {
+            save: settings.save,
+
+            apiKey: settings.apiKey,
+            model: settings.model,
+            context: settings.context,
+            dry: settings.dry,
+            disableModeration: settings.disableModeration,
+            stream: settings.stream,
+
+            temperature: settings.temperature,
+            top_p: settings.top_p,
+            frequency_penalty: settings.frequency_penalty,
+            presence_penalty: settings.presence_penalty,
+            stop: settings.stop,
+            max_tokens: settings.max_tokens,
+            logit_bias: settings.logit_bias,
+            user: settings.user,
+
+            headers: settings.headers,
+            proxy: settings.proxy,
+        },
+        transformValues: (values): ConversationFormValues => ({
+            ...values,
+            user: values.user === "" ? undefined : values.user,
+            dry: !values.apiKey || values.dry,
+        }),
+    });
+    const [showAdvanced, setShowAdvanced] = React.useState(false);
+    const [showRequest, setShowRequest] = React.useState(false);
+
+    const handleSubmit = form.onSubmit((values) => {
+        onSubmit(values);
+    });
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Stack>
+                <ApiKeyInput {...form.getInputProps("apiKey")} />
+                <Group>
+                    <ModelSelectInput {...form.getInputProps("model")} />
+                    <Group position="center" sx={{ flexGrow: 1 }}>
+                        <DisableModerationInput
+                            {...form.getInputProps("disableModeration")}
+                        />
+                    </Group>
+                    <Group position="center" noWrap sx={{ flexGrow: 1 }}>
+                        <DryInput
+                            {...form.getInputProps("dry")}
+                            value={!form.values.apiKey || form.values.dry}
+                            readOnly={!form.values.apiKey}
+                        />
+                        <StreamInput {...form.getInputProps("stream")} />
+                        <SaveInput {...form.getInputProps("save")} />
+                    </Group>
+                </Group>
+                <ContextInput {...form.getInputProps("context")} />
+                <Divider
+                    labelPosition="center"
+                    label={
+                        <Button
+                            variant="subtle"
+                            onClick={() => {
+                                setShowAdvanced(!showAdvanced);
+                                setShowRequest(false);
+                            }}
+                            w={200}
+                        >
+                            {showAdvanced ? "Hide" : "Show"} Advanced Settings
+                        </Button>
+                    }
+                />
+                <Collapse in={showAdvanced}>
+                    <Grid align="end">
+                        <Grid.Col span={4}>
+                            <OptionalNumberInput
+                                {...form.getInputProps("max_tokens")}
+                                label="Max Tokens"
+                                step={1}
+                                precision={0}
+                                min={1}
+                                max={Infinity}
+                            />
+                        </Grid.Col>
+                        <Grid.Col span={4}>
+                            <TextInput
+                                {...form.getInputProps("user")}
+                                value={form.values.user || ""}
+                                label="User"
+                            />
+                        </Grid.Col>
+                        <Grid.Col span={4}>
+                            <OptionalNumberInput
+                                {...form.getInputProps("temperature")}
+                                label="Temperature"
+                                max={2}
+                            />
+                        </Grid.Col>
+                    </Grid>
+                    <Grid align="end">
+                        <Grid.Col span={4}>
+                            <OptionalNumberInput
+                                {...form.getInputProps("frequency_penalty")}
+                                label="Frequency Penalty"
+                                min={-2}
+                                max={2}
+                            />
+                        </Grid.Col>
+                        <Grid.Col span={4}>
+                            <OptionalNumberInput
+                                {...form.getInputProps("presence_penalty")}
+                                label="Presence Penalty"
+                                min={-2}
+                                max={2}
+                            />
+                        </Grid.Col>
+                        <Grid.Col span={4}>
+                            <OptionalNumberInput
+                                {...form.getInputProps("top_p")}
+                                label="Top P"
+                            />
+                        </Grid.Col>
+                    </Grid>
+                    <StopInput {...form.getInputProps("stop")} />
+                    <LogitBiasInput {...form.getInputProps("logit_bias")} />
+                </Collapse>
+                <Divider
+                    mt={0}
+                    labelPosition="center"
+                    label={
+                        <Button
+                            variant="subtle"
+                            onClick={() => {
+                                setShowRequest(!showRequest);
+                                setShowAdvanced(false);
+                            }}
+                            w={200}
+                        >
+                            {showRequest ? "Hide" : "Show"} Request Settings
+                        </Button>
+                    }
+                />
+                <Collapse in={showRequest}>
+                    <ProxyInput {...form.getInputProps("proxy")} />
+                    <HeadersInput {...form.getInputProps("headers")} />
+                </Collapse>
+                <Button type="submit">Submit</Button>
+                {form.values.save && (
+                    <Text size="xs" italic align="center">
+                        This conversation will be saved to your browser's local
+                        storage, along with your API key, if specified. Make
+                        sure that you trust the device you are using and that
+                        you are not using a shared device.
+                    </Text>
+                )}
+            </Stack>
+        </form>
+    );
+};
diff --git a/packages/web/src/components/DisableModerationInput.tsx b/packages/web/src/components/DisableModerationInput.tsx
new file mode 100644
index 0000000..3058206
--- /dev/null
+++ b/packages/web/src/components/DisableModerationInput.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Input, SegmentedControl } from "@mantine/core";
+
+interface DisableModerationInputProps {
+    value: boolean | "soft";
+    onChange: (value: boolean | "soft") => void;
+}
+
+export default (props: DisableModerationInputProps) => {
+    const onChange = React.useCallback(
+        (value: string) => {
+            if (value === "soft") return props.onChange("soft");
+            props.onChange(value === "off");
+        },
+        [props]
+    );
+
+    const value = React.useMemo(() => {
+        if (props.value === "soft") return "soft";
+        return props.value ? "off" : "on";
+    }, [props.value]);
+
+    return (
+        <Input.Wrapper label="Moderation">
+            <div>
+                <SegmentedControl
+                    value={value}
+                    onChange={onChange}
+                    color="blue"
+                    data={[
+                        { label: "On", value: "on" },
+                        { label: "Soft", value: "soft" },
+                        { label: "Off", value: "off" },
+                    ]}
+                />
+            </div>
+        </Input.Wrapper>
+    );
+};
diff --git a/packages/web/src/components/DryInput.tsx b/packages/web/src/components/DryInput.tsx
new file mode 100644
index 0000000..2fabe76
--- /dev/null
+++ b/packages/web/src/components/DryInput.tsx
@@ -0,0 +1,24 @@
+import { Tooltip, Input, Switch } from "@mantine/core";
+
+interface DryInputProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    readOnly?: boolean;
+}
+
+export default ({ value, onChange, readOnly }: DryInputProps) => {
+    return (
+        <Tooltip
+            label="Dry mode is enabled when no API key is specified"
+            disabled={!readOnly}
+        >
+            <Input.Wrapper label="Dry">
+                <Switch
+                    onChange={(event) => onChange(event.currentTarget.checked)}
+                    checked={value}
+                    readOnly={readOnly}
+                />
+            </Input.Wrapper>
+        </Tooltip>
+    );
+};
diff --git a/packages/web/src/components/HeadersInput.tsx b/packages/web/src/components/HeadersInput.tsx
new file mode 100644
index 0000000..24a155f
--- /dev/null
+++ b/packages/web/src/components/HeadersInput.tsx
@@ -0,0 +1,136 @@
+import {
+    ActionIcon,
+    Card,
+    Group,
+    Input,
+    Stack,
+    TextInput,
+} from "@mantine/core";
+import { useListState } from "@mantine/hooks";
+import React from "react";
+import { BsPlus, BsTrash } from "react-icons/bs";
+
+interface HeadersInputProps {
+    value: Record<string, string> | undefined;
+    onChange: (value: Record<string, string> | undefined) => void;
+}
+
+interface Header {
+    header: string | "";
+    value: string | "";
+}
+
+const getInitialHeaders = (
+    value: Record<string, string> | undefined
+): Header[] => {
+    if (!value) return [{ header: "", value: "" }];
+
+    const entries = Object.entries(value);
+    if (entries.length === 0) return [{ header: "", value: "" }];
+
+    return entries
+        .map(([header, v]) => ({
+            header,
+            value: v,
+        }))
+        .filter(({ header, value: v }) => !!header && !!v);
+};
+
+const getValueFromHeaders = (value: Header[]) => {
+    const headers = value.filter(({ header, value: v }) => !!header && !!v);
+
+    if (headers.length === 0) return undefined;
+
+    return headers.reduce((acc, { header, value: v }) => {
+        acc[header] = v;
+        return acc;
+    }, {} as Record<string, string>);
+};
+
+export default ({ value, onChange }: HeadersInputProps) => {
+    const [headers, handlers] = useListState<Header>(getInitialHeaders(value));
+
+    const setHeader = React.useCallback(
+        (index: number, header: string | "") => {
+            handlers.setItem(index, {
+                header,
+                value: headers[index].value,
+            });
+        },
+        [handlers, headers]
+    );
+
+    const setValue = React.useCallback(
+        (index: number, value: string | "") => {
+            handlers.setItem(index, {
+                header: headers[index].header,
+                value,
+            });
+        },
+        [handlers, headers]
+    );
+
+    const removeItem = React.useCallback(
+        (index: number) => {
+            handlers.remove(index);
+        },
+        [handlers]
+    );
+
+    React.useEffect(() => {
+        const next = getValueFromHeaders(headers);
+        if (JSON.stringify(next) !== JSON.stringify(value)) {
+            onChange(next);
+        }
+    }, [onChange, headers, value]);
+
+    return (
+        <Input.Wrapper
+            label="Headers"
+            description="The 'Proxy-Authorization' header is automatically added for the proxy, with the base64 value of 'username:password'"
+        >
+            <Card withBorder mt="xs" p="xs">
+                <Stack mt="xs" w="100%">
+                    {headers.map(({ header, value }, index) => (
+                        <Group key={index} noWrap>
+                            <TextInput
+                                value={header}
+                                onChange={(event) =>
+                                    setHeader(index, event.currentTarget.value)
+                                }
+                                placeholder="Header"
+                                style={{ flexGrow: 1 }}
+                            />
+                            <TextInput
+                                value={value}
+                                onChange={(event) =>
+                                    setValue(index, event.currentTarget.value)
+                                }
+                                placeholder="Value"
+                                style={{ flexGrow: 1 }}
+                            />
+                            <ActionIcon
+                                color="red"
+                                onClick={() => removeItem(index)}
+                            >
+                                <BsTrash />
+                            </ActionIcon>
+                        </Group>
+                    ))}
+                </Stack>
+                <Group position="center" mt="md">
+                    <ActionIcon
+                        variant="outline"
+                        color="blue"
+                        onClick={() =>
+                            handlers.append({ header: "", value: "" })
+                        }
+                        title="Add Header"
+                    >
+                        <BsPlus />
+                    </ActionIcon>
+                </Group>
+            </Card>
+        </Input.Wrapper>
+    );
+};
diff --git a/packages/web/src/components/LogitBiasInput.tsx b/packages/web/src/components/LogitBiasInput.tsx
new file mode 100644
index 0000000..8d337b6
--- /dev/null
+++ b/packages/web/src/components/LogitBiasInput.tsx
@@ -0,0 +1,155 @@
+import {
+    ActionIcon,
+    Anchor,
+    Card,
+    Group,
+    Input,
+    NumberInput,
+    Stack,
+    Text,
+} from "@mantine/core";
+import { useListState } from "@mantine/hooks";
+import React from "react";
+import { BsPlus, BsTrash } from "react-icons/bs";
+
+interface LogitBiasInputProps {
+    value: Record<string, number> | undefined;
+    onChange: (value: Record<string, number> | undefined) => void;
+}
+
+interface LogitBias {
+    token: number | "";
+    probability: number | "";
+}
+
+const getInitialTokens = (
+    value: Record<string, number> | undefined
+): LogitBias[] => {
+    if (!value) return [{ token: "", probability: "" }];
+
+    const entries = Object.entries(value);
+    if (entries.length === 0) return [{ token: "", probability: "" }];
+
+    return entries
+        .map(([token, probability]) => ({
+            token: Number(token),
+            probability: Number(probability),
+        }))
+        .filter(
+            ({ token, probability }) => !isNaN(token) && !isNaN(probability)
+        );
+};
+
+const getValueFromTokens = (value: LogitBias[]) => {
+    const tokens = value.filter(
+        ({ token, probability }) =>
+            token !== "" &&
+            probability !== "" &&
+            !isNaN(token) &&
+            !isNaN(probability)
+    );
+
+    if (tokens.length === 0) return undefined;
+
+    return tokens.reduce((acc, { token, probability }) => {
+        acc[token] = Number(probability);
+        return acc;
+    }, {} as Record<string, number>);
+};
+
+export default ({ value, onChange }: LogitBiasInputProps) => {
+    const [tokens, handlers] = useListState<LogitBias>(getInitialTokens(value));
+
+    const setToken = React.useCallback(
+        (index: number, tokenId: number | "") => {
+            handlers.setItem(index, {
+                token: tokenId,
+                probability: tokens[index].probability,
+            });
+        },
+        [handlers, tokens]
+    );
+
+    const setProbability = React.useCallback(
+        (index: number, probability: number | "") => {
+            handlers.setItem(index, {
+                token: tokens[index].token,
+                probability,
+            });
+        },
+        [handlers, tokens]
+    );
+
+    const removeItem = React.useCallback(
+        (index: number) => {
+            handlers.remove(index);
+        },
+        [handlers]
+    );
+
+    React.useEffect(() => {
+        const next = getValueFromTokens(tokens);
+        if (JSON.stringify(next) !== JSON.stringify(value)) {
+            onChange(next);
+        }
+    }, [onChange, tokens, value]);
+
+    return (
+        <Input.Wrapper
+            label="Logit Bias"
+            description={
+                <Text>
+                    See{" "}
+                    <Anchor href="https://platform.openai.com/tokenizer">
+                        OpenAI's Tokenizer
+                    </Anchor>{" "}
+                    for token IDs.
+                </Text>
+            }
+        >
+            <Card withBorder p="xs">
+                <Stack>
+                    {tokens.map(({ token, probability }, index) => (
+                        <Group key={index} noWrap>
+                            <NumberInput
+                                value={token}
+                                onChange={(value) => setToken(index, value)}
+                                placeholder="Token ID"
+                                min={0}
+                                style={{ flexGrow: 1 }}
+                            />
+                            <NumberInput
+                                value={probability}
+                                onChange={(value) =>
+                                    setProbability(index, value)
+                                }
+                                placeholder="Probability"
+                                min={-100}
+                                max={100}
+                                style={{ flexGrow: 1 }}
+                            />
+                            <ActionIcon
+                                color="red"
+                                onClick={() => removeItem(index)}
+                            >
+                                <BsTrash />
+                            </ActionIcon>
+                        </Group>
+                    ))}
+                </Stack>
+                <Group position="center" mt="md">
+                    <ActionIcon
+                        variant="outline"
+                        color="blue"
+                        onClick={() =>
+                            handlers.append({ token: "", probability: "" })
+                        }
+                        title="Add token"
+                    >
+                        <BsPlus />
+                    </ActionIcon>
+                </Group>
+            </Card>
+        </Input.Wrapper>
+    );
+};
diff --git a/packages/web/src/components/ModelSelectInput.tsx b/packages/web/src/components/ModelSelectInput.tsx
new file mode 100644
index 0000000..e5be837
--- /dev/null
+++ b/packages/web/src/components/ModelSelectInput.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Select, Stack, Text, useMantineTheme } from "@mantine/core";
+
+interface ModelSelectInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+const ModelSelectItem = React.forwardRef<
+    HTMLDivElement,
+    { label: string; value: string; selected: boolean }
+>(({ label, value, ...restProps }, ref) => {
+    const theme = useMantineTheme();
+    const { selected } = restProps;
+
+    const subColor = (() => {
+        const dark = theme.colorScheme === "dark";
+
+        if (dark && selected) {
+            return theme.colors.gray[4];
+        } else if (dark && !selected) {
+            return theme.colors.gray[6];
+        } else if (selected) {
+            return theme.colors.gray[3];
+        } else {
+            return theme.colors.gray[6];
+        }
+    })();
+
+    return (
+        <Stack ref={ref} spacing={0} p="xs" {...restProps}>
+            <Text>{label}</Text>
+            <Text size="xs" color={subColor}>
+                {value}
+            </Text>
+        </Stack>
+    );
+});
+
+export default ({ value, onChange }: ModelSelectInputProps) => {
+    const [modelOptions, setModelOptions] = React.useState([
+        { label: "GPT 3.5", value: "gpt-3.5-turbo" },
+        { label: "GPT 4", value: "gpt-4" },
+        { label: "GPT 4 (32k)", value: "gpt-4-32k" },
+    ]);
+
+    const onCreate = React.useCallback((value: string) => {
+        const item = { value, label: value };
+        setModelOptions((current) => [...current, item]);
+        return item;
+    }, []);
+
+    return (
+        <Select
+            value={value}
+            onChange={onChange}
+            label="Model"
+            searchable
+            creatable
+            itemComponent={ModelSelectItem}
+            data={modelOptions}
+            getCreateLabel={(value) => `Create "${value}"`}
+            onCreate={onCreate}
+            sx={{ flexGrow: 1 }}
+        />
+    );
+};
diff --git a/packages/web/src/components/OptionalNumberInput.tsx b/packages/web/src/components/OptionalNumberInput.tsx
new file mode 100644
index 0000000..08c31ba
--- /dev/null
+++ b/packages/web/src/components/OptionalNumberInput.tsx
@@ -0,0 +1,44 @@
+import { NumberInput } from "@mantine/core";
+import React from "react";
+
+interface OptionalNumberInputProps {
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    label: string;
+    precision?: number;
+    min?: number;
+    step?: number;
+    max?: number;
+}
+
+export default ({
+    value,
+    onChange,
+    label,
+    precision = 2,
+    min = 0,
+    step = 0.05,
+    max = 1,
+}: OptionalNumberInputProps) => {
+    const handleChange = React.useCallback(
+        (v: number | "") => {
+            if (v === "") {
+                onChange(undefined);
+            } else {
+                onChange(v);
+            }
+        },
+        [onChange]
+    );
+    return (
+        <NumberInput
+            value={value}
+            onChange={handleChange}
+            label={label}
+            precision={precision}
+            min={min}
+            step={step}
+            max={max}
+        />
+    );
+};
diff --git a/packages/web/src/components/ProxyInput.tsx b/packages/web/src/components/ProxyInput.tsx
new file mode 100644
index 0000000..ab7369f
--- /dev/null
+++ b/packages/web/src/components/ProxyInput.tsx
@@ -0,0 +1,96 @@
+import {
+    Card,
+    Grid,
+    Group,
+    Input,
+    NumberInput,
+    PasswordInput,
+    Select,
+    Stack,
+    TextInput,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { RequestOptionsProxy } from "gpt-turbo";
+import React from "react";
+
+interface ProxyInputProps {
+    value: RequestOptionsProxy | undefined;
+    onChange: (value: RequestOptionsProxy | undefined) => void;
+}
+
+export default ({ value, onChange }: ProxyInputProps) => {
+    const form = useForm({
+        initialValues: {
+            host: value?.host ?? "",
+            port: value?.port,
+            protocol: value?.protocol,
+            username: value?.auth?.username ?? "",
+            password: value?.auth?.password ?? "",
+        },
+    });
+
+    React.useEffect(() => {
+        const { host, port, protocol, username, password } = form.values;
+        const next: RequestOptionsProxy | undefined = host
+            ? {
+                  host,
+                  port,
+                  protocol,
+                  auth:
+                      username && password ? { username, password } : undefined,
+              }
+            : undefined;
+
+        if (JSON.stringify(next) !== JSON.stringify(value)) {
+            if (!host) {
+                onChange(undefined);
+            } else {
+                onChange(next);
+            }
+        }
+    }, [form.values, onChange, value]);
+
+    return (
+        <Input.Wrapper
+            label="Proxy"
+            description="Host is required to enable proxy. Other fields are optional, but username and password are both required if proxy requires authentication."
+        >
+            <Card withBorder p="xs" mt="xs">
+                <Stack>
+                    <TextInput {...form.getInputProps("host")} label="Host" />
+                    <Group>
+                        <NumberInput
+                            {...form.getInputProps("port")}
+                            label="Port"
+                            min={1}
+                            max={65535}
+                            sx={{ flexGrow: 1 }}
+                        />
+                        <Select
+                            {...form.getInputProps("protocol")}
+                            data={["http", "https"]}
+                            label="Protocol"
+                            sx={{ flexGrow: 1 }}
+                        />
+                    </Group>
+                    <Grid>
+                        <Grid.Col sm={6} xs={12}>
+                            <TextInput
+                                {...form.getInputProps("username")}
+                                label="Username"
+                                sx={{ flexGrow: 1 }}
+                            />
+                        </Grid.Col>
+                        <Grid.Col sm={6} xs={12}>
+                            <PasswordInput
+                                {...form.getInputProps("password")}
+                                label="Password"
+                                sx={{ flexGrow: 1 }}
+                            />
+                        </Grid.Col>
+                    </Grid>
+                </Stack>
+            </Card>
+        </Input.Wrapper>
+    );
+};
diff --git a/packages/web/src/components/SaveInput.tsx b/packages/web/src/components/SaveInput.tsx
new file mode 100644
index 0000000..a428f7d
--- /dev/null
+++ b/packages/web/src/components/SaveInput.tsx
@@ -0,0 +1,17 @@
+import { Input, Switch } from "@mantine/core";
+
+interface SaveInputProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+export default ({ value, onChange }: SaveInputProps) => {
+    return (
+        <Input.Wrapper label="Save">
+            <Switch
+                onChange={(event) => onChange(event.currentTarget.checked)}
+                checked={value}
+            />
+        </Input.Wrapper>
+    );
+};
diff --git a/packages/web/src/components/Settings.tsx b/packages/web/src/components/Settings.tsx
deleted file mode 100644
index 9884703..0000000
--- a/packages/web/src/components/Settings.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import {
-    Button,
-    Container,
-    Group,
-    Input,
-    PasswordInput,
-    SegmentedControl,
-    Select,
-    Stack,
-    Switch,
-    Text,
-    Textarea,
-    Tooltip,
-} from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { closeAllModals } from "@mantine/modals";
-import React from "react";
-import useSettings from "../hooks/useSettings";
-import { ModelSelectItem } from "./AddConversationForm";
-
-export default () => {
-    const { setSettings, settings } = useSettings();
-    const form = useForm({
-        initialValues: {
-            ...settings,
-        },
-    });
-    const [modelOptions, setModelOptions] = React.useState([
-        { label: "GPT 3.5", value: "gpt-3.5-turbo" },
-        { label: "GPT 4", value: "gpt-4" },
-        { label: "GPT 4 (32k)", value: "gpt-4-32k" },
-    ]);
-    const handleSubmit = form.onSubmit((values) => {
-        setSettings(values);
-        closeAllModals();
-    });
-
-    return (
-        <Container>
-            <form onSubmit={handleSubmit}>
-                <Stack>
-                    <PasswordInput
-                        {...form.getInputProps("apiKey")}
-                        label="OpenAI API Key"
-                    />
-                    <Group>
-                        <Select
-                            {...form.getInputProps("model")}
-                            label="Model"
-                            searchable
-                            creatable
-                            itemComponent={ModelSelectItem}
-                            data={modelOptions}
-                            getCreateLabel={(query) => query}
-                            onCreate={(query) => {
-                                const item = { value: query, label: query };
-                                setModelOptions((current) => [
-                                    ...current,
-                                    item,
-                                ]);
-                                return item;
-                            }}
-                            sx={{ flexGrow: 1 }}
-                        />
-                        <Group position="center" sx={{ flexGrow: 1 }}>
-                            <Input.Wrapper label="Moderation">
-                                <div>
-                                    <SegmentedControl
-                                        {...form.getInputProps(
-                                            "disableModeration"
-                                        )}
-                                        color="blue"
-                                        data={[
-                                            { label: "On", value: "on" },
-                                            { label: "Soft", value: "soft" },
-                                            { label: "Off", value: "off" },
-                                        ]}
-                                    />
-                                </div>
-                            </Input.Wrapper>
-                        </Group>
-                        <Group position="center" noWrap sx={{ flexGrow: 1 }}>
-                            <Tooltip
-                                label="Dry mode is enabled when no API key is specified"
-                                disabled={!!form.values.apiKey}
-                            >
-                                <Input.Wrapper label="Dry">
-                                    <Switch
-                                        {...form.getInputProps("dry")}
-                                        checked={
-                                            !form.values.apiKey ||
-                                            form.values.dry
-                                        }
-                                        readOnly={!form.values.apiKey}
-                                    />
-                                </Input.Wrapper>
-                            </Tooltip>
-                            <Input.Wrapper label="Stream">
-                                <Switch
-                                    {...form.getInputProps("stream", {
-                                        type: "checkbox",
-                                    })}
-                                />
-                            </Input.Wrapper>
-                            <Input.Wrapper label="Save">
-                                <Switch
-                                    {...form.getInputProps("save", {
-                                        type: "checkbox",
-                                    })}
-                                />
-                            </Input.Wrapper>
-                        </Group>
-                    </Group>
-                    <Textarea
-                        {...form.getInputProps("context")}
-                        autosize
-                        minRows={3}
-                        maxRows={5}
-                        label="Context"
-                    />
-                    <Button type="submit">Save</Button>
-                    <Text size="xs" italic align="center">
-                        These settings will be saved to your browser's local
-                        storage, including your API key, if specified. Make sure
-                        that you trust the device you are using and that you are
-                        not using a shared device.
-                    </Text>
-                </Stack>
-            </form>
-        </Container>
-    );
-};
diff --git a/packages/web/src/components/SettingsForm.tsx b/packages/web/src/components/SettingsForm.tsx
new file mode 100644
index 0000000..cc3350d
--- /dev/null
+++ b/packages/web/src/components/SettingsForm.tsx
@@ -0,0 +1,23 @@
+import { Container } from "@mantine/core";
+import { closeAllModals } from "@mantine/modals";
+import React from "react";
+import useSettings from "../hooks/useSettings";
+import ConversationForm, { ConversationFormValues } from "./ConversationForm";
+
+export default () => {
+    const { setSettings } = useSettings();
+
+    const onSubmit = React.useCallback(
+        (values: ConversationFormValues) => {
+            setSettings(values);
+            closeAllModals();
+        },
+        [setSettings]
+    );
+
+    return (
+        <Container>
+            <ConversationForm onSubmit={onSubmit} />
+        </Container>
+    );
+};
diff --git a/packages/web/src/components/StopInput.tsx b/packages/web/src/components/StopInput.tsx
new file mode 100644
index 0000000..58ef651
--- /dev/null
+++ b/packages/web/src/components/StopInput.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MultiSelect } from "@mantine/core";
+
+interface StopInputProps {
+    value: string | string[] | null | undefined;
+    onChange: (value: string[] | undefined) => void;
+}
+
+export default ({ value, onChange }: StopInputProps) => {
+    const [data, setData] = React.useState([".", "6.", "11.", "Human:"]);
+
+    const inputValue = (() => {
+        if (!value) return [];
+        if (typeof value === "string") return [value];
+        return value;
+    })();
+
+    const handleChange = React.useCallback(
+        (v: string[]) => {
+            if (v.length === 0) {
+                onChange(undefined);
+            } else {
+                onChange(v);
+            }
+        },
+        [onChange]
+    );
+
+    return (
+        <MultiSelect
+            data={data}
+            onChange={handleChange}
+            maxSelectedValues={4}
+            value={inputValue}
+            label="Stop"
+            searchable
+            creatable
+            getCreateLabel={(value) => `Add "${value}"`}
+            placeholder="Up to 4 stop sequences"
+            onCreate={(value) => {
+                setData((current) => [...current, value]);
+                return value;
+            }}
+        />
+    );
+};
diff --git a/packages/web/src/components/StreamInput.tsx b/packages/web/src/components/StreamInput.tsx
new file mode 100644
index 0000000..c23d87f
--- /dev/null
+++ b/packages/web/src/components/StreamInput.tsx
@@ -0,0 +1,17 @@
+import { Input, Switch } from "@mantine/core";
+
+interface StreamInputProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+export default ({ value, onChange }: StreamInputProps) => {
+    return (
+        <Input.Wrapper label="Stream">
+            <Switch
+                onChange={(event) => onChange(event.currentTarget.checked)}
+                checked={value}
+            />
+        </Input.Wrapper>
+    );
+};
diff --git a/packages/web/src/contexts/ConversationManagerContext.ts b/packages/web/src/contexts/ConversationManagerContext.ts
index fd68ee2..56294d4 100644
--- a/packages/web/src/contexts/ConversationManagerContext.ts
+++ b/packages/web/src/contexts/ConversationManagerContext.ts
@@ -1,4 +1,8 @@
-import { Conversation, ConversationConfigParameters } from "gpt-turbo";
+import {
+    Conversation,
+    ConversationConfigParameters,
+    RequestOptions,
+} from "gpt-turbo";
 import React from "react";
 import makeNotImplemented from "../utils/makeNotImplemented";
 
@@ -8,7 +12,8 @@ export interface ConversationManagerContextValue {
     activeConversation: Conversation | null;
     showUsage: boolean;
     addConversation: (
-        conversationConfig: ConversationConfigParameters | Conversation
+        conversationConfig: ConversationConfigParameters | Conversation,
+        requestOptions?: RequestOptions
     ) => Conversation;
     removeConversation: (id: string) => void;
     removeAllConversations: () => void;
diff --git a/packages/web/src/contexts/SettingsContext.ts b/packages/web/src/contexts/SettingsContext.ts
index cab3314..5c22bf1 100644
--- a/packages/web/src/contexts/SettingsContext.ts
+++ b/packages/web/src/contexts/SettingsContext.ts
@@ -1,4 +1,10 @@
-import { DEFAULT_CONTEXT, DEFAULT_DRY, DEFAULT_MODEL } from "gpt-turbo";
+import {
+    DEFAULT_CONTEXT,
+    DEFAULT_DISABLEMODERATION,
+    DEFAULT_DRY,
+    DEFAULT_MODEL,
+    DEFAULT_STREAM,
+} from "gpt-turbo";
 import React from "react";
 import makeNotImplemented from "../utils/makeNotImplemented";
 import { Settings } from "../entities/settings";
@@ -12,13 +18,26 @@ export interface SettingsContextValue {
 const notImplemented = makeNotImplemented("SettingsContext");
 export const SettingsContext = React.createContext<SettingsContextValue>({
     settings: {
+        save: false,
+
         apiKey: "",
         model: DEFAULT_MODEL,
         context: DEFAULT_CONTEXT,
         dry: DEFAULT_DRY,
-        disableModeration: "on",
-        stream: true,
-        save: false,
+        disableModeration: DEFAULT_DISABLEMODERATION,
+        stream: DEFAULT_STREAM,
+
+        temperature: 1,
+        top_p: 1,
+        frequency_penalty: 0,
+        presence_penalty: 0,
+        stop: null,
+        max_tokens: Infinity,
+        logit_bias: undefined,
+        user: "",
+
+        headers: undefined,
+        proxy: undefined,
     },
     setSettings: notImplemented,
     areSettingsLoaded: false,
diff --git a/packages/web/src/contexts/providers/ConversationManagerProvider.tsx b/packages/web/src/contexts/providers/ConversationManagerProvider.tsx
index 9354f66..79a2990 100644
--- a/packages/web/src/contexts/providers/ConversationManagerProvider.tsx
+++ b/packages/web/src/contexts/providers/ConversationManagerProvider.tsx
@@ -1,5 +1,9 @@
 import React from "react";
-import { Conversation, ConversationConfigParameters } from "gpt-turbo";
+import {
+    Conversation,
+    ConversationConfigParameters,
+    RequestOptions,
+} from "gpt-turbo";
 import {
     ConversationManagerContext,
     ConversationManagerContextValue,
@@ -26,11 +30,14 @@ export default ({ children }: ConversationManagerProviderProps) => {
     );
 
     const addConversation = React.useCallback(
-        (conversation: ConversationConfigParameters | Conversation) => {
+        (
+            conversation: ConversationConfigParameters | Conversation,
+            requestOptions?: RequestOptions
+        ) => {
             const newConversation =
                 conversation instanceof Conversation
                     ? conversation
-                    : new Conversation(conversation);
+                    : new Conversation(conversation, requestOptions);
             setConversations((c) => [...c, newConversation]);
             return newConversation;
         },
diff --git a/packages/web/src/contexts/providers/SettingsProvider.tsx b/packages/web/src/contexts/providers/SettingsProvider.tsx
index dbc5fde..346e181 100644
--- a/packages/web/src/contexts/providers/SettingsProvider.tsx
+++ b/packages/web/src/contexts/providers/SettingsProvider.tsx
@@ -1,6 +1,4 @@
 import React from "react";
-import { DEFAULT_CONTEXT, DEFAULT_DRY, DEFAULT_MODEL } from "gpt-turbo";
-
 import { SettingsContext, SettingsContextValue } from "../SettingsContext";
 import useStorage from "../../hooks/useStorage";
 import { Settings, settingsSchema } from "../../entities/settings";
@@ -16,15 +14,7 @@ export default ({ children }: SettingsProviderProps) => {
         isValueLoaded: areSettingsLoaded,
     } = useStorage<Settings>(
         "gpt-turbo-settings",
-        {
-            apiKey: "",
-            model: DEFAULT_MODEL,
-            context: DEFAULT_CONTEXT,
-            dry: DEFAULT_DRY,
-            disableModeration: "on",
-            stream: true,
-            save: false,
-        },
+        settingsSchema.parse({}),
         settingsSchema
     );
 
diff --git a/packages/web/src/entities/settings.ts b/packages/web/src/entities/settings.ts
index ea2123a..a428a2e 100644
--- a/packages/web/src/entities/settings.ts
+++ b/packages/web/src/entities/settings.ts
@@ -1,13 +1,37 @@
+import {
+    conversationConfigSchema,
+    conversationSchema,
+    DEFAULT_CONTEXT,
+    DEFAULT_DISABLEMODERATION,
+    DEFAULT_DRY,
+    DEFAULT_MODEL,
+    DEFAULT_STREAM,
+} from "gpt-turbo";
 import { z } from "zod";
 
 export const settingsSchema = z.object({
-    apiKey: z.string(),
-    model: z.string(),
-    context: z.string(),
-    dry: z.boolean(),
-    disableModeration: z.boolean().or(z.enum(["on", "soft", "off"])),
-    stream: z.boolean(),
-    save: z.boolean(),
+    save: z.boolean().default(false),
+
+    apiKey: conversationConfigSchema.shape.apiKey.default(""),
+    model: conversationConfigSchema.shape.model.default(DEFAULT_MODEL),
+    context: conversationConfigSchema.shape.context.default(DEFAULT_CONTEXT),
+    dry: conversationConfigSchema.shape.dry.default(DEFAULT_DRY),
+    disableModeration: conversationConfigSchema.shape.disableModeration.default(
+        DEFAULT_DISABLEMODERATION
+    ),
+    stream: conversationConfigSchema.shape.stream.default(DEFAULT_STREAM),
+
+    temperature: conversationConfigSchema.shape.temperature,
+    top_p: conversationConfigSchema.shape.top_p,
+    frequency_penalty: conversationConfigSchema.shape.frequency_penalty,
+    presence_penalty: conversationConfigSchema.shape.presence_penalty,
+    stop: conversationConfigSchema.shape.stop,
+    max_tokens: conversationConfigSchema.shape.max_tokens,
+    logit_bias: conversationConfigSchema.shape.logit_bias,
+    user: conversationConfigSchema.shape.user,
+
+    headers: conversationSchema.shape.requestOptions.unwrap().shape.headers,
+    proxy: conversationSchema.shape.requestOptions.unwrap().shape.proxy,
 });
 
 export type Settings = z.infer<typeof settingsSchema>;
diff --git a/packages/web/src/hooks/useStorage.tsx b/packages/web/src/hooks/useStorage.tsx
index fc4f714..91b03b3 100644
--- a/packages/web/src/hooks/useStorage.tsx
+++ b/packages/web/src/hooks/useStorage.tsx
@@ -6,7 +6,11 @@ import { ZodType } from "zod";
 
 const warns = new Set<string>();
 
-export default <T,>(key: string, defaultValue: T, schema?: ZodType<T>) => {
+export default <T,>(
+    key: string,
+    defaultValue: T,
+    schema?: ZodType<T, any, any>
+) => {
     const [valueCheck] = useLocalStorage<T>({
         key: key,
     });