display model option as dropdown

app/public/lang/en-us.json

@@ -1,4 +1,5 @@
 {
+  "+G35mR": "Open sidebar",
   "/OKZrc": "Find your API key here.",
   "3T9nRn": "Your API key is stored only on this device and never transmitted to anyone except OpenAI.",
   "47FYwb": "Cancel",
@@ -7,16 +8,18 @@
   "A4iXFN": "Temperature: {temperature, number, ::.0}",
   "BdPrnc": "Chat with GPT - Unofficial ChatGPT app",
   "BwIZY+": "System Prompt",
+  "ECx3EW": "Chat with GPT",
   "ExZfjk": "Sign in <h>to sync</h>",
   "HIqSlE": "Preview voice",
+  "HyS0qp": "Close sidebar",
   "J3ca41": "Play",
   "KKa5Br": "Give ChatGPT a realisic human voice by connecting your ElevenLabs account (preview the available voices below). <a>Click here to sign up.</a>",
   "KbaJTs": "Loading audio...",
   "L5s+z7": "OpenAI API key usage is billed at a pay-as-you-go rate, separate from your ChatGPT subscription.",
+  "NRJ4IQ": "Note: GPT-4 will only work if your OpenAI account has been granted access to the new model. <a>Request access here.</a>",
   "O83lC6": "Enter a message here...",
   "OKhRC6": "Share",
   "Q97T+z": "Paste your API key here",
-  "SRsuWF": "Close navigation",
   "UT7Nkj": "New Chat",
   "Ua8luY": "Hello, how can I help you today?",
   "VL24Xt": "Search your chats",
@@ -27,9 +30,9 @@
   "jtu3jt": "You can find your API key by clicking your avatar or initials in the top right of the ElevenLabs website, then clicking Profile. Your API key is stored only on this device and never transmitted to anyone except ElevenLabs.",
   "mhtiX2": "Customize system prompt",
   "mnJYBQ": "Voice",
-  "oM3yjO": "Open navigation",
   "p556q3": "Copied",
   "q/uwLT": "Stop",
+  "rhSI1/": "Model",
   "role-chatgpt": "ChatGPT",
   "role-system": "System",
   "role-user": "You",

app/src/components/settings/options.tsx

@@ -1,6 +1,6 @@
 import SettingsTab from "./tab";
 import SettingsOption from "./option";
-import { Button, Slider, Textarea } from "@mantine/core";
+import { Button, Select, Slider, Textarea } from "@mantine/core";
 import { useCallback, useMemo } from "react";
 import { defaultSystemPrompt, defaultModel } from "../../openai";
 import { useAppDispatch, useAppSelector } from "../../store";
@@ -18,7 +18,7 @@ export default function GenerationOptionsTab(props: any) {
 
     const dispatch = useAppDispatch();
     const onSystemPromptChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => dispatch(setSystemPrompt(event.target.value)), [dispatch]);
-    const onModelChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => dispatch(setModel(event.target.value)), [dispatch]);
+    const onModelChange = useCallback((value: string) => dispatch(setModel(value)), [dispatch]);
     const onResetSystemPrompt = useCallback(() => dispatch(resetSystemPrompt()), [dispatch]);
     const onResetModel = useCallback(() => dispatch(resetModel()), [dispatch]);
     const onTemperatureChange = useCallback((value: number) => dispatch(setTemperature(value)), [dispatch]);
@@ -51,16 +51,19 @@ export default function GenerationOptionsTab(props: any) {
     const modelOption = useMemo(() => (
         <SettingsOption heading={intl.formatMessage({ defaultMessage: "Model" })}
                         focused={option === 'model'}>
-            <Textarea
+            <Select
                 value={model || defaultModel}
-                onChange={onModelChange}
+                data={[
-                minRows={1}
+                    { label: "GPT 3.5 Turbo (default)", value: "gpt-3.5-turbo" },
-                maxRows={1}
+                    { label: "GPT 4 (requires invite)", value: "gpt-4" },
-                autosize />
+                ]}
-            <p style={{ marginBottom: '0.7rem' }}>
+                onChange={onModelChange} />
-                <FormattedMessage defaultMessage="The model name. You can find model names here: https://platform.openai.com/docs/models/overview"
+            {model === 'gpt-4' && (
-                    values={{ code: chunk => <code style={{ whiteSpace: 'nowrap' }}>{chunk}</code> }} />
+                <p style={{ marginBottom: '0.7rem' }}>
-            </p>
+                    <FormattedMessage defaultMessage="Note: GPT-4 will only work if your OpenAI account has been granted access to the new model. <a>Request access here.</a>"
+                        values={{ a: chunk => <a href="https://openai.com/waitlist/gpt-4-api" target="_blank" rel="noreferer">{chunk}</a> }} />
+                </p>
+            )}
             {resettableModel && <Button size="xs" compact variant="light" onClick={onResetModel}>
                 <FormattedMessage defaultMessage="Reset to default" />
             </Button>}