Fix anthropic providers pointing to the correct model ID (#3715)

frontend/src/utils/extractModelAndProvider.test.ts

@@ -58,5 +58,23 @@ describe("extractModelAndProvider", () => {
       model: "gpt-4o",
       separator: "/",
     });
+
+    expect(extractModelAndProvider("claude-3-5-sonnet-20240620")).toEqual({
+      provider: "anthropic",
+      model: "claude-3-5-sonnet-20240620",
+      separator: "/",
+    });
+
+    expect(extractModelAndProvider("claude-3-haiku-20240307")).toEqual({
+      provider: "anthropic",
+      model: "claude-3-haiku-20240307",
+      separator: "/",
+    });
+
+    expect(extractModelAndProvider("claude-2.1")).toEqual({
+      provider: "anthropic",
+      model: "claude-2.1",
+      separator: "/",
+    });
   });
 });

frontend/src/utils/extractModelAndProvider.ts

@@ -1,5 +1,8 @@
 import { isNumber } from "./isNumber";
-import { VERIFIED_OPENAI_MODELS } from "./verified-models";
+import {
+  VERIFIED_ANTHROPIC_MODELS,
+  VERIFIED_OPENAI_MODELS,
+} from "./verified-models";
 
 /**
  * Checks if the split array is actually a version number.
@@ -41,6 +44,9 @@ export const extractModelAndProvider = (model: string) => {
     if (VERIFIED_OPENAI_MODELS.includes(split[0])) {
       return { provider: "openai", model: split[0], separator: "/" };
     }
+    if (VERIFIED_ANTHROPIC_MODELS.includes(split[0])) {
+      return { provider: "anthropic", model: split[0], separator: "/" };
+    }
     // return as model only
     return { provider: "", model, separator: "" };
   }

frontend/src/utils/organizeModelsAndProviders.test.ts

@@ -15,6 +15,11 @@ test("organizeModelsAndProviders", () => {
     "gpt-4o",
     "together-ai-21.1b-41b",
     "gpt-3.5-turbo",
+    "claude-3-5-sonnet-20240620",
+    "claude-3-haiku-20240307",
+    "claude-2",
+    "claude-2.1",
+    "anthropic.unsafe-claude-2.1",
   ];
 
   const object = organizeModelsAndProviders(models);
@@ -43,6 +48,15 @@ test("organizeModelsAndProviders", () => {
       separator: "/",
       models: ["gpt-4o", "gpt-3.5-turbo"],
     },
+    anthropic: {
+      separator: "/",
+      models: [
+        "claude-3-5-sonnet-20240620",
+        "claude-3-haiku-20240307",
+        "claude-2",
+        "claude-2.1",
+      ],
+    },
     other: {
       separator: "",
       models: ["together-ai-21.1b-41b"],

frontend/src/utils/organizeModelsAndProviders.ts

@@ -32,6 +32,13 @@ export const organizeModelsAndProviders = (models: string[]) => {
       provider,
       model: modelId,
     } = extractModelAndProvider(model);
+
+    // Ignore "anthropic" providers with a separator of "."
+    // These are outdated and incompatible providers.
+    if (provider === "anthropic" && separator === ".") {
+      return;
+    }
+
     const key = provider || "other";
     if (!object[key]) {
       object[key] = { separator, models: [] };

frontend/src/utils/verified-models.ts

@@ -1,6 +1,6 @@
 // Here are the list of verified models and providers that we know work well with OpenHands.
 export const VERIFIED_PROVIDERS = ["openai", "azure", "anthropic"];
-export const VERIFIED_MODELS = ["gpt-4o", "claude-3-5-sonnet-20240620-v1:0"];
+export const VERIFIED_MODELS = ["gpt-4o", "claude-3-5-sonnet-20240620"];
 
 // LiteLLM does not return OpenAI models with the provider, so we list them here to set them ourselves for consistency
 // (e.g., they return `gpt-4o` instead of `openai/gpt-4o`)
@@ -12,3 +12,16 @@ export const VERIFIED_OPENAI_MODELS = [
   "gpt-4-32k",
   "gpt-3.5-turbo",
 ];
+
+// LiteLLM does not return the compatible Anthropic models with the provider, so we list them here to set them ourselves
+// (e.g., they return `claude-3-5-sonnet-20240620` instead of `anthropic/claude-3-5-sonnet-20240620`)
+export const VERIFIED_ANTHROPIC_MODELS = [
+  "claude-2",
+  "claude-2.1",
+  "claude-3-5-sonnet-20240620",
+  "claude-3-haiku-20240307",
+  "claude-3-opus-20240229",
+  "claude-3-sonnet-20240229",
+  "claude-instant-1",
+  "claude-instant-1.2",
+];