update strings

app/public/lang/en-us.json

@@ -1,31 +1,47 @@
 {
   "+G35mR": "Open sidebar",
   "/OKZrc": "Find your API key here.",
+  "0vL5u1": "Create an account",
+  "1W07dM": "No chats yet.",
+  "2GFjIN": "Enter your password",
   "3T9nRn": "Your API key is stored only on this device and never transmitted to anyone except OpenAI.",
+  "3kbIhS": "Untitled",
   "47FYwb": "Cancel",
+  "4I+enA": "GPT 4 (requires invite)",
   "4l6vz1": "Copy",
+  "5sg7KC": "Password",
   "6PgVSe": "Regenerate",
+  "8HJxXG": "Sign up",
   "A4iXFN": "Temperature: {temperature, number, ::.0}",
+  "AfTuRr": "User settings",
   "BdPrnc": "Chat with GPT - Unofficial ChatGPT app",
   "BwIZY+": "System Prompt",
+  "CJwO9s": "GPT 3.5 Turbo (default)",
   "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>",
+  "KMq1sg": "Or create an account",
   "KbaJTs": "Loading audio...",
   "L5s+z7": "OpenAI API key usage is billed at a pay-as-you-go rate, separate from your ChatGPT subscription.",
+  "MI5gZ+": "Download SVG",
   "NRJ4IQ": "Note: GPT-4 will only work if your OpenAI account has been granted access to the new model. <a>Request access here.</a>",
+  "NgCT/u": "Enter your email address",
   "O83lC6": "Enter a message here...",
   "OKhRC6": "Share",
   "Q97T+z": "Paste your API key here",
+  "SQJto2": "Sign in",
   "UT7Nkj": "New Chat",
   "Ua8luY": "Hello, how can I help you today?",
   "VL24Xt": "Search your chats",
   "X0ha1a": "Save changes",
   "Xzm66E": "Connect your OpenAI account to get started",
+  "b/VC/6": "Or sign in to an existing account",
   "c60o5M": "Your OpenAI API Key",
+  "ghuZox": "Save and Close",
+  "hJZwTS": "Email address",
   "jkpK/t": "Your ElevenLabs Text-to-Speech API Key (optional)",
   "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",
@@ -37,8 +53,9 @@
   "role-system": "System",
   "role-user": "You",
   "role-user-formal": "User",
+  "rvqkVI": "Chat History",
   "sPtnbA": "The System Prompt is shown to ChatGPT by the &quot;System&quot; before your first message. The <code>'{{ datetime }}'</code> tag is automatically replaced by the current date and time.",
   "ss6kle": "Reset to default",
   "tZdXp/": "The temperature parameter controls the randomness of the AI's responses. Lower values will make the AI more predictable, while higher values will make it more creative.",
   "wEQDC6": "Edit"
-}
+}

app/src/components/auth/modals.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { Button, Modal, PasswordInput, TextInput } from "@mantine/core";
 import { useCallback, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { closeModals, openLoginModal, openSignupModal, selectModal } from "../../store/ui";
 
@@ -35,6 +36,7 @@ const Container = styled.form`
 export function LoginModal(props: any) {
     const modal = useAppSelector(selectModal);
     const dispatch = useAppDispatch();
+    const intl = useIntl();
 
     const onClose = useCallback(() => dispatch(closeModals()), [dispatch]);
     const onCreateAccountClick = useCallback(() => dispatch(openSignupModal()), [dispatch]);
@@ -42,24 +44,26 @@ export function LoginModal(props: any) {
     return <Modal opened={modal === 'login'} onClose={onClose} withCloseButton={false}>
         <Container action="/chatapi/login" method="post">
             <h2>
-                Sign in
+                <FormattedMessage defaultMessage={"Sign in"} />
             </h2>
             <input type="hidden" name="redirect_url" value={window.location.href} />
-            <TextInput label="Email address"
+            <TextInput
+                label={intl.formatMessage({ defaultMessage: "Email address" })}
                 name="username"
-                placeholder="Enter your email address"
+                placeholder={intl.formatMessage({ defaultMessage: "Enter your email address" })}
                 type="email"
                 required />
-            <PasswordInput label="Password"
+            <PasswordInput
+                label={intl.formatMessage({ defaultMessage: "Password" })}
                 name="password"
-                placeholder="Enter your password"
+                placeholder={intl.formatMessage({ defaultMessage: "Enter your password" })}
                 maxLength={500}
                 required />
             <Button fullWidth type="submit">
-                Sign in
+                <FormattedMessage defaultMessage={"Sign in"} />
             </Button>
             <Button fullWidth variant="subtle" onClick={onCreateAccountClick}>
-                Or create an account
+                <FormattedMessage defaultMessage={"Or create an account"} />
             </Button>
         </Container>
     </Modal>
@@ -68,6 +72,7 @@ export function LoginModal(props: any) {
 export function CreateAccountModal(props: any) {
     const modal = useAppSelector(selectModal);
     const dispatch = useAppDispatch();
+    const intl = useIntl();
 
     const onClose = useCallback(() => dispatch(closeModals()), [dispatch]);
     const onSignInClick = useCallback(() => dispatch(openLoginModal()), [dispatch]);
@@ -75,25 +80,27 @@ export function CreateAccountModal(props: any) {
     return <Modal opened={modal === 'signup'} onClose={onClose} withCloseButton={false}>
         <Container action="/chatapi/register" method="post">
             <h2>
-                Create an account
+                <FormattedMessage defaultMessage={"Create an account"} />
             </h2>
             <input type="hidden" name="redirect_url" value={window.location.href} />
-            <TextInput label="Email address"
+            <TextInput
+                label={intl.formatMessage({ defaultMessage: "Email address" })}
                 name="username"
-                placeholder="Enter your email address"
+                placeholder={intl.formatMessage({ defaultMessage: "Enter your email address" })}
                 type="email"
                 required />
-            <PasswordInput label="Password"
+            <PasswordInput
+                label={intl.formatMessage({ defaultMessage: "Password" })}
                 name="password"
-                placeholder="Enter your password"
+                placeholder={intl.formatMessage({ defaultMessage: "Enter your password" })}
                 minLength={6}
                 maxLength={500}
                 required />
             <Button fullWidth type="submit">
-                Sign up
+                <FormattedMessage defaultMessage={"Sign up"} />
             </Button>
             <Button fullWidth variant="subtle" onClick={onSignInClick}>
-                Or sign in to an existing account
+                <FormattedMessage defaultMessage={"Or sign in to an existing account"} />
             </Button>
         </Container>
     </Modal>

app/src/components/pages/about.tsx

@@ -1,79 +0,0 @@
-import styled from "@emotion/styled";
-import { Markdown } from "../markdown";
-import { Page } from "../page";
-
-const title = "Learn about Chat with GPT";
-
-const content = `
-# About Chat with GPT
-
-Chat with GPT is an open-source, unofficial ChatGPT app with extra features and more ways to customize your experience.
-
-ChatGPT is an AI assistant developed by OpenAI. It's designed to understand natural language and generate human-like responses to a wide range of questions and prompts. ChatGPT has been trained on a massive dataset of text from the internet, which allows it to draw on a vast amount of knowledge and information to answer questions and engage in conversation. ChatGPT is constantly being improved. Feel free to ask it anything!
-
-[Join the Discord.](https://discord.gg/mS5QvKykvv)
-
-## Features
-
-- 🚀 **Fast** response times.
-- 🔎 **Search** through your past chat conversations.
-- 📄 View and customize the System Prompt - the **secret prompt** the system shows the AI before your messages.
-- 🌡 Adjust the **creativity and randomness** of responses by setting the Temperature setting. Higher temperature means more creativity.
-- 💬 Give ChatGPT AI a **realistic human voice** by connecting your ElevenLabs text-to-speech account.
-- ✉ **Share** your favorite chat sessions online using public share URLs.
-- 📋 Easily **copy-and-paste** ChatGPT messages.
-- 🖼 **Full markdown support** including code, tables, and math.
-- 🫰 Pay for only what you use with the ChatGPT API.
-
-## Bring your own API keys
-
-### OpenAI
-
-To get started with Chat with GPT, you will need to add your OpenAI API key on the settings screen. Click "Connect your OpenAI account to get started" on the home page to begin. Once you have added your API key, you can start chatting with ChatGPT.
-
-Your API key is stored only on your device and is never transmitted to anyone except OpenAI. Please note that OpenAI API key usage is billed at a pay-as-you-go rate, separate from your ChatGPT subscription.
-
-### ElevenLabs
-
-To use the realistic AI text-to-speech feature, you will need to add your ElevenLabs API key by clicking "Play" next to any message.
-
-Your API key is stored only on your device and never transmitted to anyone except ElevenLabs.
-
-## Roadmap
-
-- Edit messages (coming soon)
-- Regenerate messages (coming soon)
-- [Suggest feature ideas on the Discord](https://discord.gg/mS5QvKykvv)
-`;
-
-const Container = styled.div`
-    flex-grow: 1;
-    overflow-y: auto;
-    padding-top: 2rem;
-    padding-bottom: 3rem;
-
-    .inner {
-        max-width: 50rem;
-        margin-left: auto;
-        margin-right: auto;
-        font-weight: "Work Sans", sans-serif;
-
-        * {
-            color: white !important;
-        }
-
-        h1, h2 {
-            border-bottom: thin solid rgba(255, 255, 255, 0.2);
-            padding-bottom: 1rem;
-            margin-bottom: 1rem;
-        }
-    }
-`;
-
-export default function AboutPage(props: any) {
-    return <Page id={'about'} headerProps={{ title }}>
-        <Container>
-            <Markdown content={content} className='inner' />
-        </Container>
-    </Page>;
-}

app/src/components/settings/index.tsx

@@ -7,6 +7,7 @@ import GenerationOptionsTab from './options';
 import { useAppDispatch, useAppSelector } from '../../store';
 import { closeSettingsUI, selectSettingsTab, setTab } from '../../store/settings-ui';
 import SpeechOptionsTab from './speech';
+import { FormattedMessage } from 'react-intl';
 
 const Container = styled.div`
     padding: .4rem 1rem 1rem 1rem;
@@ -102,7 +103,7 @@ export default function SettingsDrawer(props: SettingsDrawerProps) {
                 </Tabs>
                 <div id="save">
                     <Button variant="light" fullWidth size="md" onClick={close}>
-                        Save and Close
+                        <FormattedMessage defaultMessage={"Save and Close"} />
                     </Button>
                 </div>
             </Container>

app/src/components/settings/options.tsx

@@ -54,8 +54,14 @@ export default function GenerationOptionsTab(props: any) {
             <Select
                 value={model || defaultModel}
                 data={[
-                    { label: "GPT 3.5 Turbo (default)", value: "gpt-3.5-turbo" },
+                    {
-                    { label: "GPT 4 (requires invite)", value: "gpt-4" },
+                        label: intl.formatMessage({ defaultMessage: "GPT 3.5 Turbo (default)" }),
+                        value: "gpt-3.5-turbo",
+                    },
+                    {
+                        label: intl.formatMessage({ defaultMessage: "GPT 4 (requires invite)" }),
+                        value: "gpt-4",
+                    },
                 ]}
                 onChange={onModelChange} />
             {model === 'gpt-4' && (

app/src/components/sidebar/index.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { ActionIcon, Avatar, Burger, Button, Menu } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { useCallback, useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { backend } from '../../backend';
 import { useAppContext } from '../../context';
 import { useAppDispatch, useAppSelector } from '../../store';
@@ -115,7 +115,7 @@ export default function Sidebar(props: {
     const elem = useMemo(() => (
         <Container className={"sidebar " + (sidebarOpen ? 'opened' : 'closed')} ref={ref}>
             <div className="sidebar-header">
-                <h2>Chat History</h2>
+                <h2><FormattedMessage defaultMessage={"Chat History"} /></h2>
                 <Burger opened={sidebarOpen} onClick={onBurgerClick} aria-label={burgerLabel} transitionDuration={0} />
             </div>
             <div className="sidebar-content">
@@ -141,12 +141,12 @@ export default function Sidebar(props: {
                         <Menu.Item onClick={() => {
                             dispatch(setTab('user'));
                         }} icon={<i className="fas fa-gear" />}>
-                            User settings
+                            <FormattedMessage defaultMessage={"User settings"} />
                         </Menu.Item>
                         {/*
                         <Menu.Divider />
                         <Menu.Item color="red" onClick={() => backend.current?.logout()} icon={<i className="fas fa-sign-out-alt" />}>
-                            Sign out
+                            <FormattedMessage defaultMessage={"Sign out"} />
                         </Menu.Item>
                         */}
                     </Menu.Dropdown>

app/src/components/sidebar/recent-chats.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { useCallback, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { useAppContext } from '../../context';
 import { useAppDispatch } from '../../store';
@@ -83,12 +84,12 @@ export default function RecentChats(props: any) {
                                   onClick={onClick}
                                   data-chat-id={c.chatID}
                                   className={c.chatID === currentChatID ? 'selected' : ''}>
-                        <strong>{c.title || 'Untitled'}</strong>
+                        <strong>{c.title || <FormattedMessage defaultMessage={"Untitled"} />}</strong>
                     </ChatListItem>
                 ))}
             </ChatList>}
             {recentChats.length === 0 && <Empty>
-                No chats yet.
+                <FormattedMessage defaultMessage={"No chats yet."} />
             </Empty>}
         </Container>
     );

app/src/index.tsx

@@ -6,13 +6,12 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { PersistGate } from 'redux-persist/integration/react';
-
-import AboutPage from './components/pages/about';
-import ChatPage from './components/pages/chat';
-import LandingPage from './components/pages/landing';
 import { AppContextProvider } from './context';
 import store, { persistor } from './store';
 
+import ChatPage from './components/pages/chat';
+import LandingPage from './components/pages/landing';
+
 import './backend';
 import './index.scss';
 
@@ -41,12 +40,6 @@ const router = createBrowserRouter([
             <ChatPage share={true} />
         </AppContextProvider>,
     },
-    {
-        path: "/about",
-        element: <AppContextProvider>
-            <AboutPage />
-        </AppContextProvider>,
-    },
 ]);
 
 const root = ReactDOM.createRoot(