claude 3 api support (#642)

Author: josStorer

src/config/index.mjs

@@ -48,7 +48,14 @@ export const chatgptApiModelKeys = [
 ]
 export const customApiModelKeys = ['customModel']
 export const azureOpenAiApiModelKeys = ['azureOpenAi']
-export const claudeApiModelKeys = ['claude2Api']
+export const claudeApiModelKeys = [
+  'claude12Api',
+  'claude2Api',
+  'claude21Api',
+  'claude3HaikuApi',
+  'claude3SonnetApi',
+  'claude3OpusApi',
+]
 export const chatglmApiModelKeys = ['chatglmTurbo']
 export const githubThirdPartyApiModelKeys = ['waylaidwandererApi']
 export const poeWebModelKeys = [
@@ -101,7 +108,15 @@ export const Models = {
   },
 
   claude2WebFree: { value: '', desc: 'Claude.ai (Web)' },
-  claude2Api: { value: '', desc: 'Claude.ai (API, Claude 2)' },
+  claude12Api: { value: 'claude-instant-1.2', desc: 'Claude.ai (API, Claude Instant 1.2)' },
+  claude2Api: { value: 'claude-2.0', desc: 'Claude.ai (API, Claude 2)' },
+  claude21Api: { value: 'claude-2.1', desc: 'Claude.ai (API, Claude 2.1)' },
+  claude3HaikuApi: {
+    value: 'claude-3-haiku-20240307',
+    desc: 'Claude.ai (API, Claude 3 Haiku)',
+  },
+  claude3SonnetApi: { value: 'claude-3-sonnet-20240229', desc: 'Claude.ai (API, Claude 3 Sonnet)' },
+  claude3OpusApi: { value: 'claude-3-opus-20240229', desc: 'Claude.ai (API, Claude 3 Opus)' },
 
   bingFree4: { value: '', desc: 'Bing (Web, GPT-4)' },
   bingFreeSydney: { value: '', desc: 'Bing (Web, GPT-4, Sydney)' },
@@ -343,7 +358,7 @@ export function isUsingAzureOpenAi(configOrSession) {
   return azureOpenAiApiModelKeys.includes(configOrSession.modelName)
 }
 
-export function isUsingClaude2Api(configOrSession) {
+export function isUsingClaudeApi(configOrSession) {
   return claudeApiModelKeys.includes(configOrSession.modelName)
 }
 

src/popup/sections/GeneralPart.jsx

@@ -5,7 +5,7 @@ import {
   isUsingOpenAiApiKey,
   isUsingAzureOpenAi,
   isUsingChatGLMApi,
-  isUsingClaude2Api,
+  isUsingClaudeApi,
   isUsingCustomModel,
   isUsingCustomNameOnlyModel,
   isUsingGithubThirdPartyApi,
@@ -145,7 +145,7 @@ export function GeneralPart({ config, updateConfig }) {
               isUsingMultiModeModel(config) ||
               isUsingCustomModel(config) ||
               isUsingAzureOpenAi(config) ||
-              isUsingClaude2Api(config) ||
+              isUsingClaudeApi(config) ||
               isUsingCustomNameOnlyModel(config) ||
               isUsingMoonshotApi(config)
                 ? 'width: 50%;'
@@ -264,7 +264,7 @@ export function GeneralPart({ config, updateConfig }) {
               }}
             />
           )}
-          {isUsingClaude2Api(config) && (
+          {isUsingClaudeApi(config) && (
             <input
               type="password"
               style="width: 50%;"

src/services/apis/claude-api.mjs

@@ -1,7 +1,8 @@
-import { getUserConfig } from '../../config/index.mjs'
+import { getUserConfig, Models } from '../../config/index.mjs'
 import { pushRecord, setAbortController } from './shared.mjs'
 import { fetchSSE } from '../../utils/fetch-sse.mjs'
 import { isEmpty } from 'lodash-es'
+import { getConversationPairs } from '../../utils/get-conversation-pairs.mjs'
 
 /**
  * @param {Runtime.Port} port
@@ -11,28 +12,28 @@ import { isEmpty } from 'lodash-es'
 export async function generateAnswersWithClaudeApi(port, question, session) {
   const { controller, messageListener, disconnectListener } = setAbortController(port)
   const config = await getUserConfig()
+  const modelName = session.modelName
 
-  let prompt = ''
-  for (const record of session.conversationRecords.slice(-config.maxConversationContextLength)) {
-    prompt += '\n\nHuman: ' + record.question + '\n\nAssistant: ' + record.answer
-  }
-  prompt += `\n\nHuman: ${question}\n\nAssistant:`
+  const prompt = getConversationPairs(
+    session.conversationRecords.slice(-config.maxConversationContextLength),
+    false,
+  )
+  prompt.push({ role: 'user', content: question })
 
   let answer = ''
-  await fetchSSE(`https://api.anthropic.com/v1/complete`, {
+  await fetchSSE(`https://api.anthropic.com/v1/messages`, {
     method: 'POST',
     signal: controller.signal,
     headers: {
       'Content-Type': 'application/json',
-      accept: 'application/json',
       'anthropic-version': '2023-06-01',
       'x-api-key': config.claudeApiKey,
     },
     body: JSON.stringify({
-      model: 'claude-2',
-      prompt: prompt,
+      model: Models[modelName].value,
+      messages: prompt,
       stream: true,
-      max_tokens_to_sample: config.maxResponseTokenLength,
+      max_tokens: config.maxResponseTokenLength,
       temperature: config.temperature,
     }),
     onMessage(message) {
@@ -45,22 +46,17 @@ export async function generateAnswersWithClaudeApi(port, question, session) {
         console.debug('json error', error)
         return
       }
-
-      // The Claude v2 API may send metadata fields, handle them here
-      if (data.conversationId) session.conversationId = data.conversationId
-      if (data.parentMessageId) session.parentMessageId = data.parentMessageId
-
-      // In Claude's case, the "completion" key holds the text
-      if (data.completion) {
-        answer += data.completion
-        port.postMessage({ answer: answer, done: false, session: null })
-      }
-
-      // Check if the message indicates that Claude is done
-      if (data.stop_reason === 'stop_sequence') {
+      if (data?.type === 'message_stop') {
         pushRecord(session, question, answer)
         console.debug('conversation history', { content: session.conversationRecords })
         port.postMessage({ answer: null, done: true, session: session })
+        return
+      }
+
+      const delta = data?.delta?.text
+      if (delta) {
+        answer += delta
+        port.postMessage({ answer: answer, done: false, session: null })
       }
     },
     async onStart() {},