Merge pull request #111 from jackschedel/2.0.9

2.0.9

.eslintrc.cjs

@@ -34,6 +34,7 @@ module.exports = {
     // '@typescript-eslint/no-this-alias': 'warn',
     // '@typescript-eslint/no-unused-vars': 'warn',
     // 'no-useless-escape': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
     'react/display-name': 'off',
   },
 };

package.json

@@ -14,7 +14,7 @@
     "electron": "concurrently -k \"BROWSER=none yarn dev\" \"wait-on tcp:5173 && electron .\"",
     "pack": "yarn build && electron-builder --dir",
     "make": "yarn build && electron-builder",
-    "lint": "eslint ./src",
+    "lint": "tsc && eslint ./src",
     "errors": "eslint ./src --quiet",
     "format": "prettier --write ./"
   },

public/locales/en-US/api.json

@@ -1,12 +1,12 @@
 {
-  "securityMessage": "This key is exclusively stored in your browser (and your personal Google Drive if using Sync) and is never touched by any servers related to KoalaClient.",
+  "securityMessage": "This key is exclusively stored in your browser (and your personal Google Drive if using Sync) and is never touched by any servers related to KoalaClient. Always verify the reliability of an API endpoint before using it to protect your privacy and security.",
   "apiEndpoint": {
-    "inputLabel": "API Endpoint",
+    "inputLabel": "API Endpoints",
     "description": "When you choose an unofficial API endpoint, it functions as a proxy. A proxy works by acting as an intermediary between your device and the destination server, in this case, the OpenAI API. By doing so, it enables you to access the OpenAI API in regions where it might otherwise be restricted.",
     "warn": "Additionally, if you provide a custom API endpoint that grants free access to the OpenAI API, you can use ChatGPT without the need to supply an API key by simply leaving the API key field blank. However, it's crucial to be cautious when using third-party API endpoints, as untrustworthy ones may log your personal information in the conversations. Always verify the reliability of an API endpoint before using it to protect your privacy and security."
   },
   "apiKey": {
-    "howTo": "Get your personal API key <0>here</0>.",
+    "howTo": "Get your personal OpenAI API key <0>here</0>.",
     "inputLabel": "API Key"
   },
   "customEndpoint": "Use custom API endpoint",

src/App.tsx

@@ -12,15 +12,11 @@ import useCopyCodeBlock from '@hooks/useCopyCodeBlock';
 import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
 import useSubmit from '@hooks/useSubmit';
 import { ChatInterface } from '@type/chat';
-import { Theme } from '@type/theme';
-import ApiPopup from '@components/ApiPopup';
 import Toast from '@components/Toast';
 import isElectron, { isMac } from '@utils/electron';
 
 function App() {
   const setChats = useStore((state) => state.setChats);
-  const setTheme = useStore((state) => state.setTheme);
-  const setApiKey = useStore((state) => state.setApiKey);
   const currentChatIndex = useStore((state) => state.currentChatIndex);
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
   const setHideSideMenu = useStore((state) => state.setHideSideMenu);
@@ -116,7 +112,6 @@ function App() {
     // ctrl+p - New chat from clipboard (insta-generate)
     if (e.ctrlKey && e.key === 'p') {
       e.preventDefault();
-      console.log('test');
       addChat();
       pasteSubmit();
     }
@@ -164,20 +159,6 @@ function App() {
   useEffect(() => {
     // legacy local storage
     const oldChats = localStorage.getItem('chats');
-    const apiKey = localStorage.getItem('apiKey');
-    const theme = localStorage.getItem('theme');
-
-    if (apiKey) {
-      // legacy local storage
-      setApiKey(apiKey);
-      localStorage.removeItem('apiKey');
-    }
-
-    if (theme) {
-      // legacy local storage
-      setTheme(theme as Theme);
-      localStorage.removeItem('theme');
-    }
 
     if (oldChats) {
       // legacy local storage
@@ -233,7 +214,6 @@ function App() {
     >
       <Menu />
       <Chat />
-      <ApiPopup />
       <Toast />
     </div>
   );

src/api/api.ts

@@ -1,14 +1,14 @@
 import { ShareGPTSubmitBodyInterface } from '@type/api';
-import { ConfigInterface, MessageInterface } from '@type/chat';
+import { ConfigInterface, MessageInterface, ModelDefinition } from '@type/chat';
 import { isAzureEndpoint, uuidv4 } from '@utils/api';
 
 export const getChatCompletion = async (
   endpoint: string,
   messages: MessageInterface[],
   config: ConfigInterface,
+  modelDef: ModelDefinition,
   apiKey?: string,
-  customHeaders?: Record<string, string>,
-  isTitleGen: boolean = false
+  customHeaders?: Record<string, string>
 ) => {
   const headers: HeadersInit = {
     'Content-Type': 'application/json',
@@ -19,17 +19,11 @@ export const getChatCompletion = async (
   if (isAzureEndpoint(endpoint) && apiKey) {
     headers['api-key'] = apiKey;
 
-    const model = isTitleGen
-      ? 'gpt-35-turbo'
-      : config.model === 'gpt-3.5-turbo'
-        ? 'gpt-35-turbo'
-        : config.model === 'gpt-3.5-turbo-16k'
-          ? 'gpt-35-turbo-16k'
-          : config.model;
+    const modelName = modelDef.name;
 
     const apiVersion = '2023-03-15-preview';
 
-    const path = `openai/deployments/${model}/chat/completions?api-version=${apiVersion}`;
+    const path = `openai/deployments/${modelName}/chat/completions?api-version=${apiVersion}`;
 
     if (!endpoint.endsWith(path)) {
       if (!endpoint.endsWith('/')) {
@@ -39,16 +33,11 @@ export const getChatCompletion = async (
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  delete config.max_context;
-
-  if (isTitleGen) {
-    config.model = 'gpt-3.5-turbo';
-  }
-
   // todo: option in config
   config.user = uuidv4();
 
+  delete (config as any).model_selection;
+
   const response = await fetch(endpoint, {
     method: 'POST',
     headers,
@@ -67,28 +56,24 @@ export const getChatCompletionStream = async (
   endpoint: string,
   messages: MessageInterface[],
   config: ConfigInterface,
+  modelDef: ModelDefinition,
   apiKey?: string,
   customHeaders?: Record<string, string>
 ) => {
   const headers: HeadersInit = {
     'Content-Type': 'application/json',
     ...customHeaders,
   };
-  if (apiKey) headers.Authorization = `Bearer ${apiKey}`;
 
+  if (apiKey) headers.Authorization = `Bearer ${apiKey}`;
   if (isAzureEndpoint(endpoint) && apiKey) {
     headers['api-key'] = apiKey;
 
-    const model =
-      config.model === 'gpt-3.5-turbo'
-        ? 'gpt-35-turbo'
-        : config.model === 'gpt-3.5-turbo-16k'
-          ? 'gpt-35-turbo-16k'
-          : config.model;
+    const modelName = modelDef.name;
 
     const apiVersion = '2023-03-15-preview';
 
-    const path = `openai/deployments/${model}/chat/completions?api-version=${apiVersion}`;
+    const path = `openai/deployments/${modelName}/chat/completions?api-version=${apiVersion}`;
 
     if (!endpoint.endsWith(path)) {
       if (!endpoint.endsWith('/')) {
@@ -98,11 +83,11 @@ export const getChatCompletionStream = async (
     }
   }
 
-  delete config.max_context;
-
   // todo: option in config
   config.user = uuidv4();
 
+  delete (config as any).model_selection;
+
   const response = await fetch(endpoint, {
     method: 'POST',
     headers,

src/assets/icons/HiddenIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const HiddenIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill='currentColor'
+      strokeWidth='2'
+      viewBox='0 -960 960 960'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='h-4 w-4'
+      height='1em'
+      width='1em'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z' />
+    </svg>
+  );
+};
+
+export default HiddenIcon;

src/assets/icons/VisibleIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const VisibleIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill='currentColor'
+      strokeWidth='2'
+      viewBox='0 -960 960 960'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='h-4 w-4'
+      height='1em'
+      width='1em'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z' />
+    </svg>
+  );
+};
+
+export default VisibleIcon;