feat: i18n language support, settings menu, loading screen

Fixes animalnots#7

README.md

@@ -112,9 +112,13 @@ At `ChatGPTFreeApp`, we strive to provide you with useful and amazing features a
 
 If you have enjoyed using our app, we kindly ask you to give this project a ⭐️. Your endorsement means a lot to us and encourages us to work harder towards delivering the best possible experience.
 
-If you would like to support the team, consider buying us a coffee by clicking on the button below. Every contribution, no matter how small, helps us to maintain and improve our service.
+If you would like to support the team, consider sponsoring us through one of the methods below. Every contribution, no matter how small, helps us to maintain and improve our service.
 
-[![support](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/freechatgpt)
+| Payment Method | Link                                                                                   |
+| -------------- | -------------------------------------------------------------------------------------- |
+| KoFi           | [![support](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/freechatgpt) |
+| Alipay (Ayaka) | <img src="https://ayaka14732.github.io/sponsor/alipay.jpg" width=150 />                |
+| Wechat (Ayaka) | <img src="https://ayaka14732.github.io/sponsor/wechat.png" width=150 />                |
 
 Thank you for being a part of our community, and we look forward to serving you better in the future.
 

package.json

@@ -10,9 +10,13 @@
   },
   "dependencies": {
     "html2canvas": "^1.4.1",
+    "i18next": "^22.4.11",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
     "jspdf": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
     "react-markdown": "^8.0.5",
     "react-scroll-to-bottom": "^4.2.0",
     "rehype-highlight": "^6.0.0",

public/locales/en/about.json

@@ -0,0 +1,22 @@
+{
+  "description": "Free ChatGPT is an amazing open-source web app that allows you to play with OpenAI's ChatGPT API for free!",
+  "discordServer": {
+    "title": "Discord Server",
+    "paragraph1": "We invite you to join our Discord community! Our Discord server is a great place to exchange ChatGPT ideas and tips, and submit feature requests for Free ChatGPT. You'll have the opportunity to interact with the developers behind Free ChatGPT as well as other AI enthusiasts who share your passion.",
+    "paragraph2": "To join our server, simply click on the following link: <0>https://discord.gg/g3Qnwy4V6A</0>. We can't wait to see you there!"
+  },
+  "privacyStatement": {
+    "title": "Privacy Statement",
+    "paragraph1": "We highly value your privacy and are committed to safeguarding the privacy of our users. We do not collect or store any text you enter or receive from the OpenAI server in any form. Our source code is available for your inspection to verify this statement.",
+    "paragraph2": "We prioritise the security of your API key and handle it with utmost care. If you use your own API key, your key is exclusively stored on your browser and never shared with any third-party entity. It is solely used for the intended purpose of accessing the OpenAI API and not for any other unauthorised use."
+  },
+  "support": {
+    "title": "Support",
+    "paragraph1": "At Free ChatGPT, we strive to provide you with useful and amazing features around the clock. And just like any project, your support and motivation will be instrumental in helping us keep moving forward!",
+    "paragraph2": "If you have enjoyed using our app, we kindly ask you to give this <0>project</0> a ⭐️. Your endorsement means a lot to us and encourages us to work harder towards delivering the best possible experience.",
+    "paragraph3": "If you would like to support the team, consider sponsoring us through one of the methods below. Every contribution, no matter how small, helps us to maintain and improve our service.",
+    "paragraph4": "Thank you for being a part of our community, and we look forward to serving you better in the future.",
+    "alipay": "Alipay",
+    "wechatPay": "WeChat Pay"
+  }
+}

public/locales/en/api.json

@@ -0,0 +1,13 @@
+{
+  "securityMessage": "We prioritise the security of your API key and handle it with utmost care. Your key is exclusively stored on your browser and never shared with any third-party entity. It is solely used for the intended purpose of accessing the OpenAI API and not for any other unauthorised use.",
+  "apiEndpoint": {
+    "option": "Use free API endpoint",
+    "inputLabel": "Free API Endpoint",
+    "description": "Use free API endpoint from <0>Ayaka</0>: https://chatgpt-api.shn.hk/v1/ or enter your own API endpoint"
+  },
+  "apiKey": {
+    "option": "Use your own API key",
+    "howTo": "Get your personal API key <0>here</0>",
+    "inputLabel": "API Key"
+  }
+}

public/locales/en/main.json

@@ -0,0 +1,25 @@
+{
+  "save": "Save",
+  "saveAndSubmit": "Save & Submit",
+  "cancel": "Cancel",
+  "confirm": "Confirm",
+  "warning": "Warning",
+  "clearMessageWarning": "Please be advised that by submitting this message, all subsequent messages will be deleted!",
+  "clearConversationWarning": "Please be advised that by confirming this action, all messages will be deleted!",
+  "clearConversation": "Clear Conversation",
+  "import": "Import",
+  "export": "Export",
+  "author": "Made by Jing Hua",
+  "about": "About",
+  "api": "API",
+  "personal": "Personal",
+  "free": "Free",
+  "downloadChat": "Download Chat",
+  "user": "User",
+  "assistant": "Assistant",
+  "system": "System",
+  "newChat": "New Chat",
+  "lightMode": "Light Mode",
+  "darkMode": "Dark Mode",
+  "setting": "Settings"
+}

public/locales/en/model.json

@@ -0,0 +1,13 @@
+{
+  "configuration": "Configuration",
+  "model": "Model",
+  "default": "Default",
+  "temperature": {
+    "label": "Temperature",
+    "description": "What sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic (Default: 1)"
+  },
+  "presencePenalty": {
+    "label": "Presence Penalty",
+    "description": "Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics. (Default: 0)"
+  }
+}

public/locales/zh-CN/about.json

@@ -0,0 +1,22 @@
+{
+  "description": "Free ChatGPT 是一个神奇的开源 Web 应用，允许您免费使用 OpenAI 的 ChatGPT API 进行对话！",
+  "discordServer": {
+    "title": "Discord 服务器",
+    "paragraph1": "我们邀请您加入我们的 Discord 社区！我们的 Discord 服务器是一个很好的地方，可以交流 ChatGPT 的想法和技巧，并提交 Free ChatGPT 的功能请求。您将有机会与 Free ChatGPT 的开发人员以及其他分享您热情的人工智能爱好者互动。",
+    "paragraph2": "要加入我们的服务器，只需单击以下链接：<0>https://discord.gg/g3Qnwy4V6A</0>。我们迫不及待地想见到您！"
+  },
+  "privacyStatement": {
+    "title": "隐私声明",
+    "paragraph1": "我们非常重视您的隐私，并致力于保护用户的隐私。我们不会以任何形式收集或存储您输入或从 OpenAI 服务器接收的任何文本。我们的源代码可以供您检查，以验证此声明。",
+    "paragraph2": "我们高度优先考虑您的 API 密钥的安全，并非常小心地处理它。如果您使用自己的 API 密钥，您的密钥将专门存储在您的浏览器中，并且永远不会与任何第三方实体共享。它仅用于访问 OpenAI API 的预期用途，而不会用于任何其他未经授权的用途。"
+  },
+  "support": {
+    "title": "支持",
+    "paragraph1": "在 Free ChatGPT，我们致力于为您提供实用和惊人的功能。就像任何项目一样，您的支持和激励将对我们在保持前进方面起到至关重要的作用！",
+    "paragraph2": "如果您喜欢使用我们的应用程序，我们恳请您给这个<0>项目</0>一个 ⭐️。您的认可对我们意义重大，鼓励我们更加努力，以提供最佳的体验。",
+    "paragraph3": "如果您想支持我们的团队，请考虑通过以下方法之一赞助我们。每一份贡献，无论多小，都有助于我们维护和改善我们的服务。",
+    "paragraph4": "感谢您成为我们社区的一员，我们期待着在未来为您提供更好的服务。",
+    "alipay": "支付宝",
+    "wechatPay": "微信支付"
+  }
+}

public/locales/zh-CN/api.json

@@ -0,0 +1,13 @@
+{
+  "securityMessage": "我们高度优先考虑您的 API 密钥的安全，并非常小心地处理它。您的密钥将专门存储在您的浏览器中，并且永远不会与任何第三方实体共享。它仅用于访问 OpenAI API 的预期用途，而不是用于任何其他未经授权的用途。",
+  "apiEndpoint": {
+    "option": "使用免费的 API 端点",
+    "inputLabel": "免费的 API 端点",
+    "description": "使用 <0>Ayaka</0> 提供的免费 API 端点：https://chatgpt-api.shn.hk/v1/，或输入您自己的 API 端点"
+  },
+  "apiKey": {
+    "option": "使用自己的 API 密钥",
+    "howTo": "在<0>这里</0>获取您的个人 API 密钥",
+    "inputLabel": "API 密钥"
+  }
+}

public/locales/zh-CN/main.json

@@ -0,0 +1,25 @@
+{
+  "save": "保存",
+  "saveAndSubmit": "保存并提交",
+  "cancel": "取消",
+  "confirm": "确认",
+  "warning": "警告",
+  "clearMessageWarning": "请注意，通过提交此消息，所有后续消息都将被删除！",
+  "clearConversationWarning": "请注意，确认此操作将删除所有消息！",
+  "clearConversation": "清除对话",
+  "import": "导入",
+  "export": "导出",
+  "author": "由 Jing Hua 制作",
+  "about": "关于",
+  "api": "API",
+  "personal": "个人",
+  "free": "免费",
+  "downloadChat": "下载聊天记录",
+  "user": "用户",
+  "assistant": "助手",
+  "system": "系统",
+  "newChat": "新聊天",
+  "lightMode": "亮色模式",
+  "darkMode": "黑暗模式",
+  "setting": "设置"
+}

public/locales/zh-CN/model.json

@@ -0,0 +1,13 @@
+{
+  "configuration": "配置",
+  "model": "模型",
+  "default": "默认",
+  "temperature": {
+    "label": "采样温度",
+    "description": "使用何种采样温度，值在 0 到 2 之间。较高的数值如 0.8 会使输出更加随机，而较低的数值如 0.2 会使输出更加集中和确定。(默认: 1)"
+  },
+  "presencePenalty": {
+    "label": "存在惩罚",
+    "description": "数值在 -2.0 到 2.0 之间。正值会根据新 token 是否已经出现在文本中来惩罚它们，增加模型谈论新话题的可能性。 (默认: 0)"
+  }
+}

src/App.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, Suspense } from 'react';
 import useStore from '@store/store';
 
-import Chat from './components/Chat';
-import Menu from './components/Menu';
+import Chat from '@components/Chat';
+import Menu from '@components/Menu';
+import LoadingScreen from '@components/LoadingScreen';
 
 import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
 import { ChatInterface } from '@type/chat';
@@ -65,10 +66,12 @@ function App() {
   }, []);
 
   return (
-    <div className='overflow-hidden w-full h-full relative'>
-      <Menu />
-      <Chat />
-    </div>
+    <Suspense fallback={<LoadingScreen />}>
+      <div className='overflow-hidden w-full h-full relative'>
+        <Menu />
+        <Chat />
+      </div>
+    </Suspense>
   );
 }
 

src/assets/icons/SettingIcon.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
-const SettingIcon = () => {
+const SettingIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='white'
+      viewBox='0 0 512 512'
+      {...props}
+    >
       <path d='M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-30.9 28.1c-7.7 7.1-11.4 17.5-10.9 27.9c.1 2.9 .2 5.8 .2 8.8s-.1 5.9-.2 8.8c-.5 10.5 3.1 20.9 10.9 27.9l30.9 28.1c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-39.7-12.6c-10-3.2-20.8-1.1-29.7 4.6c-4.9 3.1-9.9 6.1-15.1 8.7c-9.3 4.8-16.5 13.2-18.8 23.4l-8.9 40.7c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-8.9-40.7c-2.2-10.2-9.5-18.6-18.8-23.4c-5.2-2.7-10.2-5.6-15.1-8.7c-8.8-5.7-19.7-7.8-29.7-4.6L69.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l30.9-28.1c7.7-7.1 11.4-17.5 10.9-27.9c-.1-2.9-.2-5.8-.2-8.8s.1-5.9 .2-8.8c.5-10.5-3.1-20.9-10.9-27.9L8.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l39.7 12.6c10 3.2 20.8 1.1 29.7-4.6c4.9-3.1 9.9-6.1 15.1-8.7c9.3-4.8 16.5-13.2 18.8-23.4l8.9-40.7c2-9.1 9-16.3 18.2-17.8C213.3 1.2 227.5 0 242 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l8.9 40.7c2.2 10.2 9.4 18.6 18.8 23.4c5.2 2.7 10.2 5.6 15.1 8.7c8.8 5.7 19.7 7.7 29.7 4.6l39.7-12.6c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM242 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z' />
     </svg>
   );

src/assets/icons/SpinnerIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const SpinnerIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 100 101'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
+        fill='currentColor'
+      />
+      <path
+        d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
+        fill='currentFill'
+      />
+    </svg>
+  );
+};
+
+export default SpinnerIcon;