Minor fixes: tokenizer, default Bing toneStyle, SiblingSwitch (#348)

* fix: tokenizer will count completion tokens correctly, remove global var, will allow unofficial models for alternative endpoints

* refactor(askBingAI.js, Settings.jsx, types.ts, cleanupPreset.js, getDefaultConversation.js, handleSubmit.js): change default toneStyle to 'creative' instead of 'fast' for Bing AI endpoint.

* fix(SiblingSwitch): correctly appears now
style(HoverButtons.jsx): add 'active' class to hover buttons

api/app/clients/chatgpt-client.js

@@ -2,6 +2,7 @@ require('dotenv').config();
 const { KeyvFile } = require('keyv-file');
 const { genAzureEndpoint } = require('../../utils/genAzureEndpoints');
 const tiktoken = require('@dqbd/tiktoken');
+const tiktokenModels = require('../../utils/tiktokenModels');
 const encoding_for_model = tiktoken.encoding_for_model;
 
 const askClient = async ({
@@ -26,9 +27,8 @@ const askClient = async ({
   };
 
   const azure = process.env.AZURE_OPENAI_API_KEY ? true : false;
-  if (promptPrefix == null) {
-    promptText = 'You are ChatGPT, a large language model trained by OpenAI.';
-  } else {
+  let promptText = 'You are ChatGPT, a large language model trained by OpenAI.';
+  if (promptPrefix) {
     promptText = promptPrefix;
   }
   const maxContextTokens = model === 'gpt-4' ? 8191 : model === 'gpt-4-32k' ? 32767 : 4095; // 1 less than maximum
@@ -68,25 +68,18 @@ const askClient = async ({
     ...(parentMessageId && conversationId ? { parentMessageId, conversationId } : {})
   };
 
-  const enc = encoding_for_model(model);
-  const text_tokens = enc.encode(text);
-  const prompt_tokens = enc.encode(promptText);
-  // console.log("Prompt tokens = ", prompt_tokens.length);
-  // console.log("Message Tokens = ", text_tokens.length);
-
+  const enc = encoding_for_model(tiktokenModels.has(model) ? model : 'gpt-3.5-turbo');
+  const usage = {
+    prompt_tokens: (enc.encode(promptText)).length + (enc.encode(text)).length,
+  }
+  
   const res = await client.sendMessage(text, { ...options, userId });
-  // return res;
-  // create a new response object that includes the token counts
-  const newRes = {
+  usage.completion_tokens = (enc.encode(res.response)).length;
+  usage.total_tokens = usage.prompt_tokens + usage.completion_tokens;
+  return {
     ...res,
-    usage: {
-      prompt_tokens: prompt_tokens.length,
-      completion_tokens: text_tokens.length,
-      total_tokens: prompt_tokens.length + text_tokens.length
-    }
-  };
-
-  return newRes;
+    usage,
+  }
 };
 
 module.exports = { askClient };

api/server/routes/ask/askBingAI.js

@@ -40,7 +40,7 @@ router.post('/', requireJwtAuth, async (req, res) => {
       jailbreakConversationId: req.body?.jailbreakConversationId ?? null,
       systemMessage: req.body?.systemMessage ?? null,
       context: req.body?.context ?? null,
-      toneStyle: req.body?.toneStyle ?? 'fast',
+      toneStyle: req.body?.toneStyle ?? 'creative',
       token: req.body?.token ?? null
     };
   else
@@ -51,7 +51,7 @@ router.post('/', requireJwtAuth, async (req, res) => {
       conversationSignature: req.body?.conversationSignature ?? null,
       clientId: req.body?.clientId ?? null,
       invocationId: req.body?.invocationId ?? null,
-      toneStyle: req.body?.toneStyle ?? 'fast',
+      toneStyle: req.body?.toneStyle ?? 'creative',
       token: req.body?.token ?? null
     };
 
@@ -110,7 +110,7 @@ const ask = async ({
 
   try {
     let lastSavedTimestamp = 0;
-    const { onProgress: progressCallback, getPartialText } = createOnProgress({
+    const { onProgress: progressCallback } = createOnProgress({
       onProgress: ({ text }) => {
         const currentTimestamp = Date.now();
         if (currentTimestamp - lastSavedTimestamp > 500) {

api/utils/tiktokenModels.js

@@ -0,0 +1,40 @@
+const models = [
+  'text-davinci-003',
+  'text-davinci-002',
+  'text-davinci-001',
+  'text-curie-001',
+  'text-babbage-001',
+  'text-ada-001',
+  'davinci',
+  'curie',
+  'babbage',
+  'ada',
+  'code-davinci-002',
+  'code-davinci-001',
+  'code-cushman-002',
+  'code-cushman-001',
+  'davinci-codex',
+  'cushman-codex',
+  'text-davinci-edit-001',
+  'code-davinci-edit-001',
+  'text-embedding-ada-002',
+  'text-similarity-davinci-001',
+  'text-similarity-curie-001',
+  'text-similarity-babbage-001',
+  'text-similarity-ada-001',
+  'text-search-davinci-doc-001',
+  'text-search-curie-doc-001',
+  'text-search-babbage-doc-001',
+  'text-search-ada-doc-001',
+  'code-search-babbage-code-001',
+  'code-search-ada-code-001',
+  'gpt2',
+  'gpt-4',
+  'gpt-4-0314',
+  'gpt-4-32k',
+  'gpt-4-32k-0314',
+  'gpt-3.5-turbo',
+  'gpt-3.5-turbo-0301'
+];
+
+module.exports = new Set(models);

client/src/components/Endpoints/BingAI/Settings.jsx

@@ -47,7 +47,7 @@ function Settings(props) {
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
             <Label htmlFor="toneStyle-dropdown" className="text-left text-sm font-medium">
-              Tone Style <small className="opacity-40">(default: fast)</small>
+              Tone Style <small className="opacity-40">(default: creative)</small>
             </Label>
             <SelectDropDown
               id="toneStyle-dropdown"
@@ -112,7 +112,7 @@ function Settings(props) {
                 <a
                   href="https://github.com/danny-avila/chatgpt-clone/blob/main/client/defaultSystemMessage.md"
                   target="_blank"
-                  className="text-blue-500 transition-colors duration-200 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500"
+                  className="text-blue-500 transition-colors duration-200 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" rel="noreferrer"
                 >
                   System Message
                 </a>{' '}

client/src/components/Messages/HoverButtons.jsx

@@ -53,7 +53,7 @@ export default function HoverButtons({
       ) : null}
       {regenerateEnabled ? (
         <button
-          className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
           onClick={regenerate}
           type="button"
           title="regenerate"
@@ -64,7 +64,7 @@ export default function HoverButtons({
       ) : null}
 
       <button
-        className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+        className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
         onClick={() => copyToClipboard(setIsCopied)}
         type="button"
         title={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}

client/src/data-provider/types.ts

@@ -16,6 +16,15 @@ export type TExample = {
   output: string;
 };
 
+export enum EModelEndpoint {
+  azureOpenAI = 'azureOpenAI',
+  openAI = 'openAI',
+  bingAI = 'bingAI',
+  chatGPT = 'chatGPT',
+  chatGPTBrowser = 'chatGPTBrowser',
+  google = 'google'
+}
+
 export type TSubmission = {
   clientId?: string;
   context?: string;
@@ -42,15 +51,6 @@ export type TSubmission = {
   frequence_penalty?: number;
 };
 
-export enum EModelEndpoint {
-  azureOpenAI = 'azureOpenAI',
-  openAI = 'openAI',
-  bingAI = 'bingAI',
-  chatGPT = 'chatGPT',
-  chatGPTBrowser = 'chatGPTBrowser',
-  google = 'google'
-}
-
 export type TConversation = {
   conversationId: string;
   title: string;
@@ -157,7 +157,7 @@ export type TSearchResults = {
   pageNumber: string;
   pageSize: string | number;
   pages: string | number;
-  filter: {};
+  filter: object;
 };
 
 export type TEndpoints = {
@@ -175,11 +175,11 @@ export type TUpdateTokenCountResponse = {
   count: number;
 };
 
-export type TMessageTreeNode = {};
+export type TMessageTreeNode = object;
 
-export type TSearchMessage = {};
+export type TSearchMessage = object;
 
-export type TSearchMessageTreeNode = {};
+export type TSearchMessageTreeNode = object;
 
 export type TRegisterUser = {
   name: string;

client/src/mobile.css

@@ -1,40 +1,8 @@
-.switch-container {
-  display: none;
-}
-
-.switch-result {
-  display: block !important;
-  visibility: visible;
-}
-
-/* .sibling-switch {
-          left: 114px;
-          top: unset;
-          bottom: 4px;
-          visibility: visible;
-          z-index: 2;
-      } */
-.sibling-switch {
-  display: none;
-}
-
-.hover-button {
+.hover-button.active {
   display: block;
   visibility: visible;
 }
 
-.input-panel-button {
-  border: 0;
-}
-
-.input-panel-button svg {
-  width: 16px;
-  height: 16px;
-}
-
-.input-panel {
-}
-
 .nav-close-button {
   display: block;
   position: absolute;
@@ -96,3 +64,47 @@
     position: fixed;
   }
 }
+
+@media (min-width: 1024px) {
+  .switch-container {
+    display: none;
+  }
+}
+
+
+  .switch-result {
+    display: block !important;
+    visibility: visible;
+  }
+
+@media (max-width: 1024px) {
+  /* .sibling-switch {
+        left: 114px;
+        top: unset;
+        bottom: 4px;
+        visibility: visible;
+        z-index: 2;
+    } */
+  .sibling-switch {
+    display: none;
+  }
+
+  .hover-button {
+    display: block;
+    visibility: visible;
+  }
+}
+
+@media (max-width: 767px) {
+  .input-panel-button {
+    border: 0;
+  }
+
+  .input-panel-button svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .input-panel {
+  }
+}

client/src/utils/cleanupPreset.js

@@ -36,7 +36,7 @@ const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
       jailbreak: _preset?.jailbreak ?? false,
       context: _preset?.context ?? null,
       systemMessage: _preset?.systemMessage ?? null,
-      toneStyle: _preset?.toneStyle ?? 'fast',
+      toneStyle: _preset?.toneStyle ?? 'creative',
       title: _preset?.title ?? 'New Preset'
     };
   } else if (endpoint === 'chatGPTBrowser') {

client/src/utils/getDefaultConversation.js

@@ -48,7 +48,7 @@ const buildDefaultConversation = ({
       jailbreak: lastConversationSetup?.jailbreak ?? false,
       context: lastConversationSetup?.context ?? null,
       systemMessage: lastConversationSetup?.systemMessage ?? null,
-      toneStyle: lastConversationSetup?.toneStyle ?? 'fast',
+      toneStyle: lastConversationSetup?.toneStyle ?? 'creative',
       jailbreakConversationId: lastConversationSetup?.jailbreakConversationId ?? null,
       conversationSignature: null,
       clientId: null,
@@ -80,7 +80,7 @@ const buildDefaultConversation = ({
   return conversation;
 };
 
-const getDefaultConversation = ({ conversation, prevConversation, endpointsConfig, preset }) => {
+const getDefaultConversation = ({ conversation, endpointsConfig, preset }) => {
   const { endpoint: targetEndpoint } = preset || {};
 
   if (targetEndpoint) {
@@ -123,7 +123,9 @@ const getDefaultConversation = ({ conversation, prevConversation, endpointsConfi
       conversation = buildDefaultConversation({ conversation, endpoint, endpointsConfig });
       return conversation;
     }
-  } catch (error) {}
+  } catch (error) {
+    console.error(error);
+  }
 
   // if anything happens, reset to default model
 

client/src/utils/handleSubmit.js

@@ -68,7 +68,7 @@ const useMessageHandler = () => {
         jailbreak: currentConversation?.jailbreak ?? false,
         systemMessage: currentConversation?.systemMessage ?? null,
         context: currentConversation?.context ?? null,
-        toneStyle: currentConversation?.toneStyle ?? 'fast',
+        toneStyle: currentConversation?.toneStyle ?? 'creative',
         jailbreakConversationId: currentConversation?.jailbreakConversationId ?? null,
         conversationSignature: currentConversation?.conversationSignature ?? null,
         clientId: currentConversation?.clientId ?? null,