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/components/Endpoints/Anthropic/OptionHover.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { HoverCardPortal, HoverCardContent } from '~/components/ui/HoverCard.tsx';
+
+const types = {
+  temp: 'Ranges from 0 to 1. Use temp closer to 0 for analytical / multiple choice, and closer to 1 for creative and generative tasks. We recommend altering this or Top P but not both.',
+  topp: 'Top-p changes how the model selects tokens for output. Tokens are selected from most K (see topK parameter) probable to least until the sum of their probabilities equals the top-p value.',
+  topk: "Top-k changes how the model selects tokens for output. A top-k of 1 means the selected token is the most probable among all tokens in the model's vocabulary (also called greedy decoding), while a top-k of 3 means that the next token is selected from among the 3 most probable tokens (using temperature).",
+  maxoutputtokens:
+    ' 	Maximum number of tokens that can be generated in the response. Specify a lower value for shorter responses and a higher value for longer responses.'
+};
+
+function OptionHover({ type, side }) {
+  return (
+    <HoverCardPortal>
+      <HoverCardContent
+        side={side}
+        className="w-80 "
+      >
+        <div className="space-y-2">
+          <p className="text-sm text-gray-600 dark:text-gray-300">{types[type]}</p>
+        </div>
+      </HoverCardContent>
+    </HoverCardPortal>
+  );
+}
+
+export default OptionHover;

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

@@ -0,0 +1,251 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+import TextareaAutosize from 'react-textarea-autosize';
+import SelectDropDown from '../../ui/SelectDropDown';
+import { Input } from '~/components/ui/Input.tsx';
+import { Label } from '~/components/ui/Label.tsx';
+import { Slider } from '~/components/ui/Slider.tsx';
+import { InputNumber } from '~/components/ui/InputNumber.tsx';
+import OptionHover from './OptionHover';
+import { HoverCard, HoverCardTrigger } from '~/components/ui/HoverCard.tsx';
+import { cn } from '~/utils/';
+const defaultTextProps =
+  'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+
+const optionText =
+  'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';
+
+import store from '~/store';
+
+function Settings(props) {
+  const {
+    readonly,
+    model,
+    modelLabel,
+    promptPrefix,
+    temperature,
+    topP,
+    topK,
+    maxOutputTokens,
+    setOption
+  } = props;
+
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
+  const setModel = setOption('model');
+  const setModelLabel = setOption('modelLabel');
+  const setPromptPrefix = setOption('promptPrefix');
+  const setTemperature = setOption('temperature');
+  const setTopP = setOption('topP');
+  const setTopK = setOption('topK');
+  const setMaxOutputTokens = setOption('maxOutputTokens');
+
+  const models = endpointsConfig?.['anthropic']?.['availableModels'] || [];
+
+  return (
+    <div className={`h-[490px] overflow-y-auto md:h-[350px]`}>
+      <div className="grid gap-6 sm:grid-cols-2">
+        <div className="col-span-1 flex flex-col items-center justify-start gap-6">
+          <div className="grid w-full items-center gap-2">
+            <SelectDropDown
+              value={model}
+              setValue={setModel}
+              availableValues={models}
+              disabled={readonly}
+              className={cn(
+                defaultTextProps,
+                'z-50 flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+              )}
+              containerClassName="flex w-full resize-none"
+            />
+          </div>
+          <div className="grid w-full items-center gap-2">
+            <Label htmlFor="modelLabel" className="text-left text-sm font-medium">
+              Custom Name <small className="opacity-40">(default: blank)</small>
+            </Label>
+            <Input
+              id="modelLabel"
+              disabled={readonly}
+              value={modelLabel || ''}
+              onChange={(e) => setModelLabel(e.target.value || null)}
+              placeholder="Set a custom name for Claude"
+              className={cn(
+                defaultTextProps,
+                'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+              )}
+            />
+          </div>
+          <div className="grid w-full items-center gap-2">
+            <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
+              Prompt Prefix <small className="opacity-40">(default: blank)</small>
+            </Label>
+            <TextareaAutosize
+              id="promptPrefix"
+              disabled={readonly}
+              value={promptPrefix || ''}
+              onChange={(e) => setPromptPrefix(e.target.value || null)}
+              placeholder="Set custom instructions or context. Ignored if empty."
+              className={cn(
+                defaultTextProps,
+                'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
+              )}
+            />
+          </div>
+        </div>
+        <div className="col-span-1 flex flex-col items-center justify-start gap-6">
+          <HoverCard openDelay={300}>
+            <HoverCardTrigger className="grid w-full items-center gap-2">
+              <div className="flex justify-between">
+                <Label htmlFor="temp-int" className="text-left text-sm font-medium">
+                  Temperature <small className="opacity-40">(default: 0.7)</small>
+                </Label>
+                <InputNumber
+                  id="temp-int"
+                  disabled={readonly}
+                  value={temperature}
+                  onChange={(value) => setTemperature(value)}
+                  max={1}
+                  min={0}
+                  step={0.01}
+                  controls={false}
+                  className={cn(
+                    defaultTextProps,
+                    cn(
+                      optionText,
+                      'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
+                    )
+                  )}
+                />
+              </div>
+              <Slider
+                disabled={readonly}
+                value={[temperature]}
+                onValueChange={(value) => setTemperature(value[0])}
+                doubleClickHandler={() => setTemperature(1)}
+                max={1}
+                min={0}
+                step={0.01}
+                className="flex h-4 w-full"
+              />
+            </HoverCardTrigger>
+            <OptionHover type="temp" side="left" />
+          </HoverCard>
+          <HoverCard openDelay={300}>
+            <HoverCardTrigger className="grid w-full items-center gap-2">
+              <div className="flex justify-between">
+                <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
+                  Top P <small className="opacity-40">(default: 0.95)</small>
+                </Label>
+                <InputNumber
+                  id="top-p-int"
+                  disabled={readonly}
+                  value={topP}
+                  onChange={(value) => setTopP(value)}
+                  max={1}
+                  min={0}
+                  step={0.01}
+                  controls={false}
+                  className={cn(
+                    defaultTextProps,
+                    cn(
+                      optionText,
+                      'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
+                    )
+                  )}
+                />
+              </div>
+              <Slider
+                disabled={readonly}
+                value={[topP]}
+                onValueChange={(value) => setTopP(value[0])}
+                doubleClickHandler={() => setTopP(1)}
+                max={1}
+                min={0}
+                step={0.01}
+                className="flex h-4 w-full"
+              />
+            </HoverCardTrigger>
+            <OptionHover type="topp" side="left" />
+          </HoverCard>
+
+          <HoverCard openDelay={300}>
+            <HoverCardTrigger className="grid w-full items-center gap-2">
+              <div className="flex justify-between">
+                <Label htmlFor="top-k-int" className="text-left text-sm font-medium">
+                  Top K <small className="opacity-40">(default: 40)</small>
+                </Label>
+                <InputNumber
+                  id="top-k-int"
+                  disabled={readonly}
+                  value={topK}
+                  onChange={(value) => setTopK(value)}
+                  max={40}
+                  min={1}
+                  step={0.01}
+                  controls={false}
+                  className={cn(
+                    defaultTextProps,
+                    cn(
+                      optionText,
+                      'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
+                    )
+                  )}
+                />
+              </div>
+              <Slider
+                disabled={readonly}
+                value={[topK]}
+                onValueChange={(value) => setTopK(value[0])}
+                doubleClickHandler={() => setTopK(0)}
+                max={40}
+                min={1}
+                step={0.01}
+                className="flex h-4 w-full"
+              />
+            </HoverCardTrigger>
+            <OptionHover type="topk" side="left" />
+          </HoverCard>
+          <HoverCard openDelay={300}>
+            <HoverCardTrigger className="grid w-full items-center gap-2">
+              <div className="flex justify-between">
+                <Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
+                  Max Output Tokens <small className="opacity-40">(default: 1024)</small>
+                </Label>
+                <InputNumber
+                  id="max-tokens-int"
+                  disabled={readonly}
+                  value={maxOutputTokens}
+                  onChange={(value) => setMaxOutputTokens(value)}
+                  max={1024}
+                  min={1}
+                  step={1}
+                  controls={false}
+                  className={cn(
+                    defaultTextProps,
+                    cn(
+                      optionText,
+                      'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
+                    )
+                  )}
+                />
+              </div>
+              <Slider
+                disabled={readonly}
+                value={[maxOutputTokens]}
+                onValueChange={(value) => setMaxOutputTokens(value[0])}
+                doubleClickHandler={() => setMaxOutputTokens(0)}
+                max={1024}
+                min={1}
+                step={1}
+                className="flex h-4 w-full"
+              />
+            </HoverCardTrigger>
+            <OptionHover type="maxoutputtokens" side="left" />
+          </HoverCard>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Settings;

client/src/components/Endpoints/OpenAI/OptionHover.jsx

@@ -10,17 +10,12 @@ const types = {
 };
 
 function OptionHover({ type, side }) {
-  // const options = {};
-  // if (type === 'pres') {
-  //   options.sideOffset = 45;
-  // }
 
   return (
     <HoverCardPortal>
       <HoverCardContent
         side={side}
         className="w-80 "
-        // {...options}
       >
         <div className="space-y-2">
           <p className="text-sm text-gray-600 dark:text-gray-300">{types[type]}</p>

client/src/components/Endpoints/SaveAsPresetDialog.jsx

@@ -43,7 +43,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
               id="chatGptLabel"
               value={title || ''}
               onChange={(e) => setTitle(e.target.value || '')}
-              placeholder="Set a custom name, in case you can find this preset"
+              placeholder="Set a custom name for this preset"
               className={cn(
                 defaultTextProps,
                 'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'

client/src/components/Endpoints/Settings.jsx

@@ -2,12 +2,12 @@ import OpenAISettings from './OpenAI/Settings.jsx';
 import BingAISettings from './BingAI/Settings.jsx';
 import GoogleSettings from './Google/Settings.jsx';
 import PluginsSettings from './Plugins/Settings.jsx';
+import AnthropicSettings from './Anthropic/Settings.jsx';
 
 // A preset dialog to show readonly preset values.
 const Settings = ({ preset, ...props }) => {
   const renderSettings = () => {
     const { endpoint } = preset || {};
-    console.log('endpoint', endpoint);
 
     if (endpoint === 'openAI' || endpoint === 'azureOpenAI') {
       return (
@@ -47,6 +47,20 @@ const Settings = ({ preset, ...props }) => {
           {...props}
         />
       );
+    } else if (endpoint === 'anthropic') {
+      return (
+        <AnthropicSettings
+          model={preset?.model}
+          modelLabel={preset?.modelLabel}
+          promptPrefix={preset?.promptPrefix}
+          temperature={preset?.temperature}
+          topP={preset?.topP}
+          topK={preset?.topK}
+          maxOutputTokens={preset?.maxOutputTokens}
+          edit={true}
+          {...props}
+        />
+      );
     }  else if (endpoint === 'gptPlugins') {
       return (
         <PluginsSettings