feat: claude integration (#552)

* feat: bare bones implementation of claude client (WIP)

* feat: client implementation of Claude (WIP)

* fix: add claude to store

* feat: bare bones implementation of claude client (WIP)

* switch eventsource

* Try new method of calling claude with anthropic sdk

* (WIP) Finish initial claude client implementation and api

* debugging update

* fix(ClaudeClient.js): fix prompt prefixes for HUMAN_PROMPT and AI_PROMPT
fix(ClaudeClient.js): refactor buildMessages logic for correct handling of messages
refactor(ClaudeClient.js): refactor buildPrompt method to buildMessages for use in BaseClient sendMessage method
refactor(ClaudeClient.js): refactor getCompletion method to sendCompletion for use in BaseClient sendMessage method
refactor(ClaudeClient.js): omit getMessageMapMethod method for future refactoring
refactor(ClaudeClient.js): remove unused sendMessage method to prefer BaseClient message
fix(askClaude.js): error in getIds method was causing a frontend crash, userMessage was not defined
fix(askClaude.js): import abortMessage function from utils module
feat(askClaude.js): add /abort route to handle message abort requests
feat(askClaude.js): create abortControllers map to store abort controllers
feat(askClaude.js): implement abortAsk function to handle message abort logic
feat(askClaude.js): add onStart callback to handle message start logic
feat(HoverButtons.jsx): add 'claude' as a supported endpoint for branching

* fix(ClaudeClient.js): update defaultPrefix and promptPrefix messages

includes 'Remember your instructions' as Claude is trained to recognize labels preceding colons as participants of a conversation

* Change name from claude to anthropic

* add settings to handleSubmit and models to endpoints

* Implement Claude settings

* use svg for anthropic icon

* Implement abort

* Implement reverse proxy

* remove png icons

* replace web browser plugin

* remove default prefix

* fix styling of claude icon

* fix console error from svg properties

* remove single quote requirement from eslintrc

* fix(AnthropicClient.js): fix labels for HUMAN_PROMPT and AI_PROMPT
feat(AnthropicClient.js): add support for custom userLabel and modelLabel options
feat(AnthropicClient.js): add user_id metadata to requestOptions in getCompletion method
feat(anthropic, AnthropicClient.js): add debug logging

* refactor(AnthropicClient.js): change promptSuffix variable declaration from let to const

* fix(EndpointOptionsDialog.jsx): remove unnecessary code that changes endpointName from 'anthropic' to 'Claude'
fix(utils/index.jsx): fix alternateName value for 'anthropic' from 'Claude' to 'Anthropic'

* fix(AnthropicIcon): fix sizing/rendering/name of anthropic icon

* fix(AnthropicClient.js): change maxContextTokens default value to 99999
fix(AnthropicClient.js): change maxResponseTokens default value to 1500
fix(AnthropicClient.js): remove unnecessary code for setting maxContextTokens and maxResponseTokens based on modelOptions
fix(AnthropicClient.js): change max_tokens_to_sample default value to 1500
fix(anthropic.js): pass endpointOption.token to AnthropicClient constructor

* Update .env.example

* fix(AnthropicClient.js): remove exceeding message when it puts us over the token limit
fix(AnthropicClient.js): handle case when the first message exceeds the token limit
fix(AnthropicClient.js): throw error when prompt is too long
fix(AnthropicClient.js): adjust max tokens calculation to use maxOutputTokens
fix(anthropic.js): remove console.log statement in ask route

* feat(server/index): increase incoming json payload allowed size

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>

client/src/utils/cleanupPreset.js

@@ -29,6 +29,19 @@ const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }) => {
       topK: _preset?.topK ?? 40,
       title: _preset?.title ?? 'New Preset'
     };
+  } else if (endpoint === 'anthropic') {
+    preset = {
+      endpoint,
+      presetId: _preset?.presetId ?? null,
+      model: _preset?.model ?? endpointsConfig[endpoint]?.availableModels?.[0] ?? 'claude-1',
+      modelLabel: _preset?.modelLabel ?? null,
+      promptPrefix: _preset?.promptPrefix ?? null,
+      temperature: _preset?.temperature ?? 0.7,
+      maxOutputTokens: _preset?.maxOutputTokens ?? 1024,
+      topP: _preset?.topP ?? 0.7,
+      topK: _preset?.topK ?? 40,
+      title: _preset?.title ?? 'New Preset'
+    };
   } else if (endpoint === 'bingAI') {
     preset = {
       endpoint,

client/src/utils/getDefaultConversation.js

@@ -57,6 +57,22 @@ const buildDefaultConversation = ({
       clientId: null,
       invocationId: 1
     };
+  } else if (endpoint === 'anthropic') {
+    conversation = {
+      ...conversation,
+      endpoint,
+      model:
+        lastConversationSetup?.model ??
+        lastSelectedModel[endpoint] ??
+        endpointsConfig[endpoint]?.availableModels?.[0] ??
+        'claude-1',
+      modelLabel: lastConversationSetup?.modelLabel ?? null,
+      promptPrefix: lastConversationSetup?.promptPrefix ?? null,
+      temperature: lastConversationSetup?.temperature ?? 0.7,
+      maxOutputTokens: lastConversationSetup?.maxOutputTokens ?? 1024,
+      topP: lastConversationSetup?.topP ?? 0.7,
+      topK: lastConversationSetup?.topK ?? 40
+    };
   } else if (endpoint === 'chatGPTBrowser') {
     conversation = {
       ...conversation,
@@ -165,7 +181,8 @@ const getDefaultConversation = ({ conversation, endpointsConfig, preset }) => {
     'bingAI',
     'chatGPTBrowser',
     'gptPlugins',
-    'google'
+    'google',
+    'anthropic'
   ].find((e) => endpointsConfig?.[e]);
   if (endpoint) {
     conversation = buildDefaultConversation({ conversation, endpoint, endpointsConfig });

client/src/utils/getIcon.jsx

@@ -1,5 +1,6 @@
-import { Plugin, GPTIcon, BingIcon } from '~/components/svg';
+import { Plugin, GPTIcon, BingIcon, AnthropicIcon } from '~/components/svg';
 import { useAuthContext } from '~/hooks/AuthContext';
+import { cn } from '~/utils'
 
 const getIcon = (props) => {
   const { size = 30, isCreatedByUser, button, model, message = true } = props;
@@ -20,7 +21,9 @@ const getIcon = (props) => {
           className="rounded-sm"
           src={
             user?.avatar ||
-            `https://api.dicebear.com/6.x/initials/svg?seed=${user?.name || 'User'}&fontFamily=Verdana&fontSize=36`
+            `https://api.dicebear.com/6.x/initials/svg?seed=${
+              user?.name || 'User'
+            }&fontFamily=Verdana&fontSize=36`
           }
           alt="avatar"
         />
@@ -53,6 +56,11 @@ const getIcon = (props) => {
       const { modelLabel } = props;
       icon = <img src="/assets/google-palm.svg" alt="Palm Icon"/>;
       name = modelLabel || 'PaLM2';
+    } else if (endpoint === 'anthropic') {
+      const { modelLabel } = props;
+      icon = <AnthropicIcon size={size * 0.7} />;
+      bg = '#d09a74';
+      name = modelLabel || 'Claude';
     } else if (endpoint === 'bingAI') {
       const { jailbreak } = props;
       icon = <BingIcon size={size * 0.7} />;
@@ -83,9 +91,10 @@ const getIcon = (props) => {
           width: size,
           height: size
         }}
-        className={
-          'relative flex items-center justify-center rounded-sm text-white ' + props?.className
-        }
+        className={cn(
+          'relative flex items-center justify-center rounded-sm text-white ',
+          props?.className ?? '',
+        )}
       >
         {icon}
         {error && (

client/src/utils/handleSubmit.js

@@ -76,6 +76,22 @@ const useMessageHandler = () => {
         token: endpointsConfig[endpoint]?.userProvide ? getToken() : null
       };
       responseSender = endpointOption.jailbreak ? 'Sydney' : 'BingAI';
+    } else if (endpoint === 'anthropic') {
+      endpointOption = {
+        endpoint,
+        model:
+          currentConversation?.model ??
+          endpointsConfig[endpoint]?.availableModels?.[0] ??
+          'claude-1',
+        modelLabel: currentConversation?.modelLabel ?? null,
+        promptPrefix: currentConversation?.promptPrefix ?? null,
+        temperature: currentConversation?.temperature ?? 0.7,
+        maxOutputTokens: currentConversation?.maxOutputTokens ?? 1024,
+        topP: currentConversation?.topP ?? 0.7,
+        topK: currentConversation?.topK ?? 40,
+        token: endpointsConfig[endpoint]?.userProvide ? getToken() : null
+      };
+      responseSender = 'Anthropic';
     } else if (endpoint === 'chatGPTBrowser') {
       endpointOption = {
         endpoint,

client/src/utils/index.jsx

@@ -41,6 +41,7 @@ export const alternateName = {
   bingAI: 'Bing',
   chatGPTBrowser: 'ChatGPT',
   gptPlugins: 'Plugins',
-  google: 'PaLM'
+  google: 'PaLM',
+  anthropic: 'Anthropic',
 };