Feat: PaLM 2 (#262)

* feat(api): add googleapis package to package.json
feat(api): add reqDemo.js file to make a request to Google Cloud AI Platform API to get a response from a chatbot model.

* feat: add PaLM2 support

* feat(conversationPreset.js): add support for topP and topK for google endpoint
feat(askGoogle.js): add support for topP and topK for google endpoint
feat(ask/index.js): add google endpoint
feat(endpoints.js): add google endpoint
feat(MessageHeader.jsx): add support for modelLabel for google endpoint
feat(PresetItem.jsx): add support for modelLabel for google endpoint
feat(HoverButtons.jsx): add support for google endpoint
feat(createPayload.ts): add google endpoint
feat(types.ts): add google endpoint
feat(store/endpoints.js): add google endpoint
feat(cleanupPreset.js): add support for topP and topK for google endpoint
feat(getDefaultConversation.js): add support for topP and topK for google endpoint
feat(handleSubmit.js): add support for topP and topK for google endpoint

* fix: messages payload

* refactor(GoogleClient.js): set maxContextTokens based on isTextModel value
feat(GoogleClient.js): add delay option to TextStream constructor
feat(getIcon.jsx): add support for google endpoint and PaLM2 model label

* feat: palm frontend changes

* feat(askGoogle.js): set default example to empty input and output
feat(Examples.jsx): add ability to add and remove examples
refactor(Settings.jsx): remove examples from props and setOption function

style(GoogleOptions): remove unnecessary whitespace after Settings2 import
feat(GoogleOptions): add addExample and removeExample functions to manage examples
fix(cleanupPreset): set default example to [{ input: '', output: ''}]
fix(getDefaultConversation): set default example to [{ input: '', output: ''}]
fix(handleSubmit): set default example to [{ input: '', output: ''}]

* style(client): adjust height of settings and examples components to 350px
fix(client): fix path to palm.png image in getIcon.jsx file

* style(EndpointOptionsPopover.jsx, Examples.jsx, Settings.jsx): improve button styles and update input placeholders

* feat (palm): finalize examples on the frontend

* feat(GoogleClient.js): filter out empty examples in options
feat(GoogleClient.js): add support for promptPrefix in buildPayload method
feat(GoogleClient.js): add support for examples in buildPayload method
feat(conversationPreset.js): add maxOutputTokens field to conversation preset schema
feat(presetSchema.js): add examples field to preset schema
feat(askGoogle.js): add support for examples and promptPrefix in endpointOption
feat(EditPresetDialog.jsx): add Examples component for Google endpoint
feat(EditPresetDialog.jsx): add button to show/hide Examples component
feat(EditPresetDialog.jsx): add functionality to add, remove, and edit examples in Examples component
feat(EndpointOptionsDialog.jsx): change endpoint name to PaLM for Google endpoint
feat(Settings.jsx): add maxHeight prop to limit height of Settings component in EditPresetDialog and EndpointOptionsDialog

fix(Settings.jsx): add examples prop to ChatGPTBrowser component
fix(EndpointItem.jsx): add alternate name for google endpoint
fix(MessageHeader.jsx): change title for google endpoint to PaLM
feat(endpoints.js): add google endpoint to endpointsConfig
fix(cleanupPreset.js): add missing comma in examples array

* chore: change endpoint order

* feat(PaLM 2): complete for testing

* fix(PaLM): handle blocked messages

client/src/components/Input/NewConversationMenu/EndpointItem.jsx

@@ -7,6 +7,14 @@ import SetTokenDialog from '../SetTokenDialog';
 
 import store from '../../../store';
 
+const alternateName = {
+  openAI: 'OpenAI',
+  azureOpenAI: 'Azure OpenAI',
+  bingAI: 'Bing',
+  chatGPTBrowser: 'ChatGPT',
+  google: 'PaLM',
+}
+
 export default function ModelItem({ endpoint, value, onSelect }) {
   const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
@@ -28,7 +36,7 @@ export default function ModelItem({ endpoint, value, onSelect }) {
         className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
       >
         {icon}
-        {endpoint}
+        {alternateName[endpoint] || endpoint}
         {!!['azureOpenAI', 'openAI'].find(e => e === endpoint) && <sup>$</sup>}
         <div className="flex w-4 flex-1" />
         {isuserProvide ? (

client/src/components/Input/NewConversationMenu/FileUpload.jsx

@@ -1,13 +1,10 @@
-import React from 'react';
+import { useState } from 'react';
 import { FileUp } from 'lucide-react';
-import cleanupPreset from '~/utils/cleanupPreset.js';
-import { useRecoilValue } from 'recoil';
+import { cn } from '~/utils/';
 
-import store from '~/store';
-
-const FileUpload = ({ onFileSelected }) => {
-  // const setPresets = useSetRecoilState(store.presets);
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+const FileUpload = ({ onFileSelected, successText = null, invalidText = null, validator = null, text = null, id = '1' }) => {
+  const [statusColor, setStatusColor] = useState('text-gray-600');
+  const [status, setStatus] = useState(null);
 
   const handleFileChange = event => {
     const file = event.target.files[0];
@@ -16,20 +13,34 @@ const FileUpload = ({ onFileSelected }) => {
     const reader = new FileReader();
     reader.onload = e => {
       const jsonData = JSON.parse(e.target.result);
-      onFileSelected({ ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null });
+      if (validator && !validator(jsonData)) {
+        setStatus('invalid');
+        setStatusColor('text-red-600');
+        return;
+      }
+
+      if (validator) {
+        setStatus('success');
+        setStatusColor('text-green-500 dark:text-green-500');
+      }
+      
+      onFileSelected(jsonData);
     };
     reader.readAsText(file);
   };
 
   return (
     <label
-      htmlFor="file-upload"
-      className=" mr-1 flex h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+      htmlFor={`file-upload-${id}`}
+      className={cn(
+        'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
+        statusColor
+      )}
     >
       <FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
-      <span className="flex text-xs ">Import</span>
+      <span className="flex text-xs ">{!status ? text || 'Import' : (status === 'success' ? successText : invalidText)}</span>
       <input
-        id="file-upload"
+        id={`file-upload-${id}`}
         value=""
         type="file"
         className="hidden "

client/src/components/Input/NewConversationMenu/PresetItem.jsx

@@ -21,6 +21,10 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
       const { chatGptLabel, model } = preset;
       if (model) _title += `: ${model}`;
       if (chatGptLabel) _title += ` as ${chatGptLabel}`;
+    }  else if (endpoint === 'google') {
+      const { modelLabel, model } = preset;
+      if (model) _title += `: ${model}`;
+      if (modelLabel) _title += ` as ${modelLabel}`;
     } else if (endpoint === 'bingAI') {
       const { jailbreak, toneStyle } = preset;
       if (toneStyle) _title += `: ${toneStyle}`;

client/src/components/Input/NewConversationMenu/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import cleanupPreset from '~/utils/cleanupPreset.js';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import EditPresetDialog from '../../Endpoints/EditPresetDialog';
 import EndpointItems from './EndpointItems';
@@ -27,6 +28,7 @@ export default function NewConversationMenu() {
   const [preset, setPreset] = useState(false);
 
   const availableEndpoints = useRecoilValue(store.availableEndpoints);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const [presets, setPresets] = useRecoilState(store.presets);
 
   const conversation = useRecoilValue(store.conversation) || {};
@@ -50,6 +52,11 @@ export default function NewConversationMenu() {
     );
   };
 
+  const onFileSelected = jsonData => {
+    const jsonPreset = { ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null };
+    importPreset(jsonPreset);
+  };
+
   // update the default model when availableModels changes
   // typically, availableModels changes => modelsFilter or customGPTModels changes
   useEffect(() => {
@@ -151,7 +158,7 @@ export default function NewConversationMenu() {
           <DropdownMenuLabel className="flex items-center dark:text-gray-300">
             <span>Select a Preset</span>
             <div className="flex-1" />
-            <FileUpload onFileSelected={importPreset} />
+            <FileUpload onFileSelected={onFileSelected} />
             <Dialog>
               <DialogTrigger asChild>
                 <label