Add new models

src/shared/api.ts

@@ -25,9 +25,9 @@ export interface ModelInfo {
 export type ApiModelId = AnthropicModelId | OpenRouterModelId | BedrockModelId
 
 // Anthropic
+// https://docs.anthropic.com/en/docs/about-claude/models
 export type AnthropicModelId = keyof typeof anthropicModels
 export const anthropicDefaultModelId: AnthropicModelId = "claude-3-5-sonnet-20240620"
-// https://docs.anthropic.com/en/docs/about-claude/models
 export const anthropicModels = {
 	"claude-3-5-sonnet-20240620": {
 		maxTokens: 8192,
@@ -44,37 +44,165 @@ export const anthropicModels = {
 	"claude-3-sonnet-20240229": {
 		maxTokens: 4096,
 		supportsImages: true,
-		inputPrice: 2.5,
-		outputPrice: 12.5,
+		inputPrice: 3.0,
+		outputPrice: 15.0,
 	},
 	"claude-3-haiku-20240307": {
 		maxTokens: 4096,
 		supportsImages: true,
-		inputPrice: 2.5,
-		outputPrice: 12.5,
+		inputPrice: 0.25,
+		outputPrice: 1.25,
 	},
-} as const satisfies Record<string, ModelInfo>
+} as const satisfies Record<string, ModelInfo> // as const assertion makes the object deeply readonly
 
-// OpenRouter
-export type OpenRouterModelId = keyof typeof openRouterModels
-export const openRouterDefaultModelId: OpenRouterModelId = "anthropic/claude-3.5-sonnet:beta"
-export const openRouterModels = {
-	"anthropic/claude-3.5-sonnet:beta": {
+// AWS Bedrock
+// https://docs.aws.amazon.com/bedrock/latest/userguide/conversation-inference.html
+export type BedrockModelId = keyof typeof bedrockModels
+export const bedrockDefaultModelId: BedrockModelId = "anthropic.claude-3-5-sonnet-20240620-v1:0"
+export const bedrockModels = {
+	"anthropic.claude-3-5-sonnet-20240620-v1:0": {
 		maxTokens: 4096,
 		supportsImages: true,
 		inputPrice: 3.0,
 		outputPrice: 15.0,
 	},
+	"anthropic.claude-3-opus-20240229-v1:0": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 15.0,
+		outputPrice: 75.0,
+	},
+	"anthropic.claude-3-sonnet-20240229-v1:0": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 3.0,
+		outputPrice: 15.0,
+	},
+	"anthropic.claude-3-haiku-20240307-v1:0": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 0.25,
+		outputPrice: 1.25,
+	},
 } as const satisfies Record<string, ModelInfo>
 
-// AWS Bedrock
-export type BedrockModelId = keyof typeof bedrockModels
-export const bedrockDefaultModelId: BedrockModelId = "anthropic.claude-3-5-sonnet-20240620-v1:0"
-export const bedrockModels = {
-	"anthropic.claude-3-5-sonnet-20240620-v1:0": {
-		maxTokens: 4096,
+// OpenRouter
+// https://openrouter.ai/models?order=newest&supported_parameters=tools
+export type OpenRouterModelId = keyof typeof openRouterModels
+export const openRouterDefaultModelId: OpenRouterModelId = "anthropic/claude-3.5-sonnet"
+export const openRouterModels = {
+	"anthropic/claude-3.5-sonnet": {
+		maxTokens: 8192,
 		supportsImages: true,
 		inputPrice: 3.0,
 		outputPrice: 15.0,
 	},
-} as const satisfies Record<string, ModelInfo> // as const assertion makes the object deeply readonly (just declaring it as const makes it mutable)
+	"anthropic/claude-3-opus": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 15,
+		outputPrice: 75,
+	},
+	"anthropic/claude-3-sonnet": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 3,
+		outputPrice: 15,
+	},
+	"anthropic/claude-3-haiku": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 0.25,
+		outputPrice: 1.25,
+	},
+	"openai/gpt-4o-2024-08-06": {
+		maxTokens: 16384,
+		supportsImages: true,
+		inputPrice: 2.5,
+		outputPrice: 10,
+	},
+	"openai/gpt-4o-mini-2024-07-18": {
+		maxTokens: 16384,
+		supportsImages: true,
+		inputPrice: 0.15,
+		outputPrice: 0.6,
+	},
+	"openai/gpt-4-turbo": {
+		maxTokens: 4096,
+		supportsImages: true,
+		inputPrice: 10,
+		outputPrice: 30,
+	},
+	"meta-llama/llama-3.1-405b-instruct": {
+		maxTokens: 2048,
+		supportsImages: false,
+		inputPrice: 2.7,
+		outputPrice: 2.7,
+	},
+	"meta-llama/llama-3.1-70b-instruct": {
+		maxTokens: 2048,
+		supportsImages: false,
+		inputPrice: 0.52,
+		outputPrice: 0.75,
+	},
+	"meta-llama/llama-3.1-8b-instruct": {
+		maxTokens: 2048,
+		supportsImages: false,
+		inputPrice: 0.06,
+		outputPrice: 0.06,
+	},
+	"google/gemini-pro-1.5": {
+		maxTokens: 8192,
+		supportsImages: true,
+		inputPrice: 2.5,
+		outputPrice: 7.5,
+	},
+	"google/gemini-flash-1.5": {
+		maxTokens: 8192,
+		supportsImages: true,
+		inputPrice: 0.25,
+		outputPrice: 0.75,
+	},
+	"deepseek/deepseek-coder": {
+		maxTokens: 4096,
+		supportsImages: false,
+		inputPrice: 0.14,
+		outputPrice: 0.28,
+	},
+	"mistralai/mistral-large": {
+		maxTokens: 8192,
+		supportsImages: false,
+		inputPrice: 3,
+		outputPrice: 9,
+	},
+	"mistralai/mistral-medium": {
+		maxTokens: 4096,
+		supportsImages: false,
+		inputPrice: 2.7,
+		outputPrice: 8.1,
+	},
+	"mistralai/mistral-small": {
+		maxTokens: 4096,
+		supportsImages: false,
+		inputPrice: 2,
+		outputPrice: 6,
+	},
+	"mistralai/mistral-7b-instruct-v0.1": {
+		maxTokens: 4096,
+		supportsImages: false,
+		inputPrice: 0.06,
+		outputPrice: 0.06,
+	},
+	"cohere/command-r-plus": {
+		maxTokens: 4000,
+		supportsImages: false,
+		inputPrice: 3,
+		outputPrice: 15,
+	},
+	"cohere/command-r": {
+		maxTokens: 4000,
+		supportsImages: false,
+		inputPrice: 0.5,
+		outputPrice: 1.5,
+	},
+} as const satisfies Record<string, ModelInfo>

webview-ui/scripts/build-react-no-split.js

@@ -72,8 +72,8 @@ By modifying these rules, we can change how webpack processes different files in
 
 Why we need to modify the webpack config
 
-Create React App (CRA) is designed to only process files within the src directory for security reasons. Our project structure includes a shared directory outside of src. 
-To use files from this shared directory, we need to:
+Create React App (CRA) is designed to only process files within the src directory for security reasons. (CRA limits processing to the src directory to prevent accidental inclusion of sensitive files, reduce the attack surface, and ensure predictable builds, enhancing overall project security and consistency. Therefore it's essential that if you do include files outside src, you do so explicitly.)
+To use files from the shared directory, we need to:
 1. Modify ModuleScopePlugin to allow imports from the shared directory.
 2. Update the TypeScript loader rule to process TypeScript files from the shared directory.
 These changes tell webpack it's okay to import from the shared directory and ensure that TypeScript files in this directory are properly converted to JavaScript.
@@ -89,7 +89,8 @@ Note: This code assumes a specific structure in the CRA webpack config. If CRA u
 */
 config.module.rules[1].oneOf.forEach((rule) => {
 	if (rule.test && rule.test.toString().includes("ts|tsx")) {
-		rule.include = [...(rule.include || []), sharedDir]
+		// rule.include is path to src by default, but we can update rule.include to be an array as it matches an expected schema by react-scripts
+		rule.include = [rule.include, sharedDir].filter(Boolean)
 	}
 })
 

webview-ui/src/index.css

@@ -129,3 +129,11 @@ https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#wi
 	line-height: normal;
 	margin-bottom: 2px;
 }
+
+/* Fix scrollbar in dropdown */
+
+vscode-dropdown::part(listbox) {
+	border-color: var(--vscode-scrollbarSlider-background);
+	transition: none;
+	scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
+}