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

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,