diff --git a/src/ClaudeDev.ts b/src/ClaudeDev.ts index b415390..09f4cce 100644 --- a/src/ClaudeDev.ts +++ b/src/ClaudeDev.ts @@ -414,12 +414,9 @@ export class ClaudeDev { } } - // Calculates cost of a Claude 3.5 Sonnet API request calculateApiCost(inputTokens: number, outputTokens: number): number { - const INPUT_COST_PER_MILLION = 3.0 // $3 per million input tokens - const OUTPUT_COST_PER_MILLION = 15.0 // $15 per million output tokens - const inputCost = (inputTokens / 1_000_000) * INPUT_COST_PER_MILLION - const outputCost = (outputTokens / 1_000_000) * OUTPUT_COST_PER_MILLION + const inputCost = (this.api.getModel().info.inputPrice / 1_000_000) * inputTokens + const outputCost = (this.api.getModel().info.outputPrice / 1_000_000) * outputTokens const totalCost = inputCost + outputCost return totalCost } diff --git a/src/api/anthropic.ts b/src/api/anthropic.ts index 90e7f42..0ff8fba 100644 --- a/src/api/anthropic.ts +++ b/src/api/anthropic.ts @@ -1,6 +1,6 @@ import { Anthropic } from "@anthropic-ai/sdk" import { ApiHandler, withoutImageData } from "." -import { ApiHandlerOptions } from "../shared/api" +import { anthropicDefaultModelId, AnthropicModelId, anthropicModels, ApiHandlerOptions, ModelInfo } from "../shared/api" export class AnthropicHandler implements ApiHandler { private options: ApiHandlerOptions @@ -18,17 +18,20 @@ export class AnthropicHandler implements ApiHandler { ): Promise { return await this.client.messages.create( { - model: "claude-3-5-sonnet-20240620", // https://docs.anthropic.com/en/docs/about-claude/models - max_tokens: 8192, // beta max tokens + model: this.getModel().id, + max_tokens: this.getModel().info.maxTokens, system: systemPrompt, messages, tools, tool_choice: { type: "auto" }, }, - { - // https://github.com/anthropics/anthropic-sdk-typescript?tab=readme-ov-file#default-headers - headers: { "anthropic-beta": "max-tokens-3-5-sonnet-2024-07-15" }, - } + // https://x.com/alexalbert__/status/1812921642143900036 + // https://github.com/anthropics/anthropic-sdk-typescript?tab=readme-ov-file#default-headers + this.getModel().id === "claude-3-5-sonnet-20240620" + ? { + headers: { "anthropic-beta": "max-tokens-3-5-sonnet-2024-07-15" }, + } + : undefined ) } @@ -41,12 +44,21 @@ export class AnthropicHandler implements ApiHandler { > ): any { return { - model: "claude-3-5-sonnet-20240620", - max_tokens: 8192, + model: this.getModel().id, + max_tokens: this.getModel().info.maxTokens, system: "(see SYSTEM_PROMPT in src/ClaudeDev.ts)", messages: [{ conversation_history: "..." }, { role: "user", content: withoutImageData(userContent) }], tools: "(see tools in src/ClaudeDev.ts)", tool_choice: { type: "auto" }, } } + + getModel(): { id: AnthropicModelId; info: ModelInfo } { + const modelId = this.options.apiModelId + if (modelId && modelId in anthropicModels) { + const id = modelId as AnthropicModelId + return { id, info: anthropicModels[id] } + } + return { id: anthropicDefaultModelId, info: anthropicModels[anthropicDefaultModelId] } + } } diff --git a/src/api/bedrock.ts b/src/api/bedrock.ts index 7ca3380..975ba3f 100644 --- a/src/api/bedrock.ts +++ b/src/api/bedrock.ts @@ -1,7 +1,7 @@ import AnthropicBedrock from "@anthropic-ai/bedrock-sdk" import { Anthropic } from "@anthropic-ai/sdk" -import { ApiHandlerOptions } from "../shared/api" import { ApiHandler, withoutImageData } from "." +import { ApiHandlerOptions, bedrockDefaultModelId, BedrockModelId, bedrockModels, ModelInfo } from "../shared/api" // https://docs.anthropic.com/en/api/claude-on-amazon-bedrock export class AwsBedrockHandler implements ApiHandler { @@ -28,8 +28,8 @@ export class AwsBedrockHandler implements ApiHandler { tools: Anthropic.Messages.Tool[] ): Promise { return await this.client.messages.create({ - model: "anthropic.claude-3-5-sonnet-20240620-v1:0", - max_tokens: 4096, + model: this.getModel().id, + max_tokens: this.getModel().info.maxTokens, system: systemPrompt, messages, tools, @@ -46,12 +46,21 @@ export class AwsBedrockHandler implements ApiHandler { > ): any { return { - model: "anthropic.claude-3-5-sonnet-20240620-v1:0", - max_tokens: 4096, + model: this.getModel().id, + max_tokens: this.getModel().info.maxTokens, system: "(see SYSTEM_PROMPT in src/ClaudeDev.ts)", messages: [{ conversation_history: "..." }, { role: "user", content: withoutImageData(userContent) }], tools: "(see tools in src/ClaudeDev.ts)", tool_choice: { type: "auto" }, } } + + getModel(): { id: BedrockModelId; info: ModelInfo } { + const modelId = this.options.apiModelId + if (modelId && modelId in bedrockModels) { + const id = modelId as BedrockModelId + return { id, info: bedrockModels[id] } + } + return { id: bedrockDefaultModelId, info: bedrockModels[bedrockDefaultModelId] } + } } diff --git a/src/api/index.ts b/src/api/index.ts index cd171d2..bac0763 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,5 +1,5 @@ import { Anthropic } from "@anthropic-ai/sdk" -import { ApiConfiguration } from "../shared/api" +import { ApiConfiguration, ApiModelId, ModelInfo } from "../shared/api" import { AnthropicHandler } from "./anthropic" import { AwsBedrockHandler } from "./bedrock" import { OpenRouterHandler } from "./openrouter" @@ -19,6 +19,8 @@ export interface ApiHandler { | Anthropic.ToolResultBlockParam > ): any + + getModel(): { id: ApiModelId; info: ModelInfo } } export function buildApiHandler(configuration: ApiConfiguration): ApiHandler { diff --git a/src/api/openrouter.ts b/src/api/openrouter.ts index 33ec1ed..64fcfa7 100644 --- a/src/api/openrouter.ts +++ b/src/api/openrouter.ts @@ -1,7 +1,13 @@ import { Anthropic } from "@anthropic-ai/sdk" import OpenAI from "openai" import { ApiHandler, withoutImageData } from "." -import { ApiHandlerOptions } from "../shared/api" +import { + ApiHandlerOptions, + ModelInfo, + openRouterDefaultModelId, + OpenRouterModelId, + openRouterModels, +} from "../shared/api" export class OpenRouterHandler implements ApiHandler { private options: ApiHandlerOptions @@ -41,8 +47,8 @@ export class OpenRouterHandler implements ApiHandler { })) const completion = await this.client.chat.completions.create({ - model: "anthropic/claude-3.5-sonnet:beta", - max_tokens: 4096, + model: this.getModel().id, + max_tokens: this.getModel().info.maxTokens, messages: openAiMessages, tools: openAiTools, tool_choice: "auto", @@ -258,11 +264,20 @@ export class OpenRouterHandler implements ApiHandler { > ): any { return { - model: "anthropic/claude-3.5-sonnet:beta", - max_tokens: 4096, + model: this.getModel().id, + max_tokens: this.getModel().info.maxTokens, messages: [{ conversation_history: "..." }, { role: "user", content: withoutImageData(userContent) }], tools: "(see tools in src/ClaudeDev.ts)", tool_choice: "auto", } } + + getModel(): { id: OpenRouterModelId; info: ModelInfo } { + const modelId = this.options.apiModelId + if (modelId && modelId in openRouterModels) { + const id = modelId as OpenRouterModelId + return { id, info: openRouterModels[id] } + } + return { id: openRouterDefaultModelId, info: openRouterModels[openRouterDefaultModelId] } + } } diff --git a/src/providers/ClaudeDevProvider.ts b/src/providers/ClaudeDevProvider.ts index 536491e..e15add8 100644 --- a/src/providers/ClaudeDevProvider.ts +++ b/src/providers/ClaudeDevProvider.ts @@ -1,6 +1,6 @@ import * as vscode from "vscode" import { ClaudeDev } from "../ClaudeDev" -import { ApiProvider } from "../shared/api" +import { ApiModelId, ApiProvider } from "../shared/api" import { ExtensionMessage } from "../shared/ExtensionMessage" import { WebviewMessage } from "../shared/WebviewMessage" import { downloadTask, getNonce, getUri, selectImages } from "../utils" @@ -11,7 +11,7 @@ https://github.com/KumarVariable/vscode-extension-sidebar-html/blob/master/src/c */ type SecretKey = "apiKey" | "openRouterApiKey" | "awsAccessKey" | "awsSecretKey" -type GlobalStateKey = "apiProvider" | "awsRegion" | "maxRequestsPerTask" | "lastShownAnnouncementId" +type GlobalStateKey = "apiProvider" | "apiModelId" | "awsRegion" | "maxRequestsPerTask" | "lastShownAnnouncementId" export class ClaudeDevProvider implements vscode.WebviewViewProvider { public static readonly sideBarId = "claude-dev.SidebarProvider" // used in package.json as the view's id. This value cannot be changed due to how vscode caches views based on their id, and updating the id would break existing instances of the extension. @@ -132,15 +132,8 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { async initClaudeDevWithTask(task?: string, images?: string[]) { await this.clearTask() // ensures that an exising task doesn't exist before starting a new one, although this shouldn't be possible since user must clear task before starting a new one - const { apiProvider, apiKey, openRouterApiKey, awsAccessKey, awsSecretKey, awsRegion, maxRequestsPerTask } = - await this.getState() - this.claudeDev = new ClaudeDev( - this, - { apiProvider, apiKey, openRouterApiKey, awsAccessKey, awsSecretKey, awsRegion }, - maxRequestsPerTask, - task, - images - ) + const { maxRequestsPerTask, apiConfiguration } = await this.getState() + this.claudeDev = new ClaudeDev(this, apiConfiguration, maxRequestsPerTask, task, images) } // Send any JSON serializable data to the react app @@ -255,9 +248,17 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { break case "apiConfiguration": if (message.apiConfiguration) { - const { apiProvider, apiKey, openRouterApiKey, awsAccessKey, awsSecretKey, awsRegion } = - message.apiConfiguration + const { + apiProvider, + apiModelId, + apiKey, + openRouterApiKey, + awsAccessKey, + awsSecretKey, + awsRegion, + } = message.apiConfiguration await this.updateGlobalState("apiProvider", apiProvider) + await this.updateGlobalState("apiModelId", apiModelId) await this.storeSecret("apiKey", apiKey) await this.storeSecret("openRouterApiKey", openRouterApiKey) await this.storeSecret("awsAccessKey", awsAccessKey) @@ -308,21 +309,12 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { } async postStateToWebview() { - const { - apiProvider, - apiKey, - openRouterApiKey, - awsAccessKey, - awsSecretKey, - awsRegion, - maxRequestsPerTask, - lastShownAnnouncementId, - } = await this.getState() + const { apiConfiguration, maxRequestsPerTask, lastShownAnnouncementId } = await this.getState() this.postMessageToWebview({ type: "state", state: { version: this.context.extension?.packageJSON?.version ?? "", - apiConfiguration: { apiProvider, apiKey, openRouterApiKey, awsAccessKey, awsSecretKey, awsRegion }, + apiConfiguration, maxRequestsPerTask, themeName: vscode.workspace.getConfiguration("workbench").get("colorTheme"), claudeMessages: this.claudeDev?.claudeMessages || [], @@ -420,6 +412,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { async getState() { const [ apiProvider, + apiModelId, apiKey, openRouterApiKey, awsAccessKey, @@ -429,6 +422,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { lastShownAnnouncementId, ] = await Promise.all([ this.getGlobalState("apiProvider") as Promise, + this.getGlobalState("apiModelId") as Promise, this.getSecret("apiKey") as Promise, this.getSecret("openRouterApiKey") as Promise, this.getSecret("awsAccessKey") as Promise, @@ -438,12 +432,15 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { this.getGlobalState("lastShownAnnouncementId") as Promise, ]) return { - apiProvider: apiProvider || "anthropic", // for legacy users that were using Anthropic by default - apiKey, - openRouterApiKey, - awsAccessKey, - awsSecretKey, - awsRegion, + apiConfiguration: { + apiProvider: apiProvider || "anthropic", // for legacy users that were using Anthropic by default + apiModelId, + apiKey, + openRouterApiKey, + awsAccessKey, + awsSecretKey, + awsRegion, + }, maxRequestsPerTask, lastShownAnnouncementId, } diff --git a/src/shared/api.ts b/src/shared/api.ts index cbd04fc..e95d168 100644 --- a/src/shared/api.ts +++ b/src/shared/api.ts @@ -1,6 +1,7 @@ export type ApiProvider = "anthropic" | "openrouter" | "bedrock" export interface ApiHandlerOptions { + apiModelId?: ApiModelId apiKey?: string // anthropic openRouterApiKey?: string awsAccessKey?: string @@ -11,3 +12,69 @@ export interface ApiHandlerOptions { export type ApiConfiguration = ApiHandlerOptions & { apiProvider?: ApiProvider } + +// Models + +export interface ModelInfo { + maxTokens: number + supportsImages: boolean + inputPrice: number + outputPrice: number +} + +export type ApiModelId = AnthropicModelId | OpenRouterModelId | BedrockModelId + +// Anthropic +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, + supportsImages: true, + inputPrice: 3.0, // $3 per million input tokens + outputPrice: 15.0, // $15 per million output tokens + }, + "claude-3-opus-20240229": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 15.0, + outputPrice: 75.0, + }, + "claude-3-sonnet-20240229": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 2.5, + outputPrice: 12.5, + }, + "claude-3-haiku-20240307": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 2.5, + outputPrice: 12.5, + }, +} as const satisfies Record + +// 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": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 3.0, + outputPrice: 15.0, + }, +} as const satisfies Record + +// 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, + supportsImages: true, + inputPrice: 3.0, + outputPrice: 15.0, + }, +} as const satisfies Record // as const assertion makes the object deeply readonly (just declaring it as const makes it mutable) diff --git a/webview-ui/scripts/build-react-no-split.js b/webview-ui/scripts/build-react-no-split.js index a57e5ed..a7a5557 100644 --- a/webview-ui/scripts/build-react-no-split.js +++ b/webview-ui/scripts/build-react-no-split.js @@ -13,6 +13,86 @@ const rewire = require("rewire") const defaults = rewire("react-scripts/scripts/build.js") const config = defaults.__get__("config") +/* Modifying Webpack Configuration for 'shared' dir +This section uses Rewire to modify Create React App's webpack configuration without ejecting. Rewire allows us to inject and alter the internal build scripts of CRA at runtime. This allows us to maintain a flexible project structure that keeps shared code outside the webview-ui/src directory, while still adhering to CRA's security model that typically restricts imports to within src/. +1. Uses the ModuleScopePlugin to whitelist files from the shared directory, allowing them to be imported despite being outside src/. (see: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory/58321458#58321458) +2. Modifies the TypeScript rule to include the shared directory in compilation. This essentially transpiles and includes the ts files in shared dir in the output main.js file. +Before, we would just import types from shared dir and specifying include (and alias to have cleaner paths) in tsconfig.json was enough. But now that we are creating values (i.e. models in api.ts) to import into the react app, we must also include these files in the webpack resolution. +- Imports from the shared directory must use full paths relative to the src directory, without file extensions. +- Example: import { someFunction } from '../../src/shared/utils/helpers' +*/ +const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin") +const path = require("path") +const fs = require("fs") +// Get all files in the shared directory +const sharedDir = path.resolve(__dirname, "../../src/shared") +function getAllFiles(dir) { + let files = [] + fs.readdirSync(dir).forEach((file) => { + const filePath = path.join(dir, file) + if (fs.statSync(filePath).isDirectory()) { + files = files.concat(getAllFiles(filePath)) + } else { + const withoutExtension = filePath.split(".")[0] + files.push(withoutExtension) + } + }) + return files +} +const sharedFiles = getAllFiles(sharedDir) +// config.resolve.plugins = config.resolve.plugins.filter((plugin) => !(plugin instanceof ModuleScopePlugin)) +// Instead of excluding the whole ModuleScopePlugin, we just whitelist specific files that can be imported from outside src. +config.resolve.plugins.forEach((plugin) => { + if (plugin instanceof ModuleScopePlugin) { + console.log("Whitelisting shared files: ", sharedFiles) + sharedFiles.forEach((file) => plugin.allowedFiles.add(file)) + } +}) +/* +Webpack configuration + +Webpack is a module bundler for JavaScript applications. It processes your project files, resolving dependencies and generating a deployable production build. +The webpack config is an object that tells webpack how to process and bundle your code. It defines entry points, output settings, and how to handle different file types. +This config.module section of the webpack config deals with how different file types (modules) should be treated. +config.module.rules: +Rules define how module files should be processed. Each rule can: +- Specify which files to process (test) + When webpack "processes" a file, it performs several operations: + 1. Reads the file + 2. Parses its content and analyzes dependencies + 3. Applies transformations (e.g., converting TypeScript to JavaScript) + 4. Potentially modifies the code (e.g., applying polyfills) + 5. Includes the processed file in the final bundle + By specifying which files to process, we're telling webpack which files should go through this pipeline and be included in our application bundle. Files that aren't processed are ignored by webpack. + In our case, we're ensuring that TypeScript files in our shared directory are processed, allowing us to use them in our application. +- Define which folders to include or exclude +- Set which loaders to use for transformation +A loader transforms certain types of files into valid modules that webpack can process. For example, the TypeScript loader converts .ts files into JavaScript that webpack can understand. +By modifying these rules, we can change how webpack processes different files in our project, allowing us to include files from outside the standard src directory. + +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: +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. + +Modify webpack configuration to process TypeScript files from shared directory + +This code modifies the webpack configuration to allow processing of TypeScript files from our shared directory, which is outside the standard src folder. +1. config.module.rules[1]: In Create React App's webpack config, the second rule (index 1) typically contains the rules for processing JavaScript and TypeScript files. +2. .oneOf: This array contains a list of loaders, and webpack will use the first matching loader for each file. We iterate through these to find the TypeScript loader. +3. We check each rule to see if it applies to TypeScript files by looking for 'ts|tsx' in the test regex. +4. When we find the TypeScript rule, we add our shared directory to its 'include' array. This tells webpack to also process TypeScript files from the shared directory. +Note: This code assumes a specific structure in the CRA webpack config. If CRA updates its config structure in future versions, this code might need to be adjusted. +*/ +config.module.rules[1].oneOf.forEach((rule) => { + if (rule.test && rule.test.toString().includes("ts|tsx")) { + rule.include = [...(rule.include || []), sharedDir] + } +}) + // Disable code splitting config.optimization.splitChunks = { cacheGroups: { diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index e302b6f..74ed94a 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -1,19 +1,18 @@ -import React, { useEffect, useState, useCallback } from "react" +import React, { useCallback, useEffect, useMemo, useState } from "react" +import { useEvent } from "react-use" +import { ApiConfiguration } from "../../src/shared/api" +import { ClaudeMessage, ExtensionMessage } from "../../src/shared/ExtensionMessage" import "./App.css" +import { normalizeApiConfiguration } from "./components/ApiOptions" import ChatView from "./components/ChatView" import SettingsView from "./components/SettingsView" -import { ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage" import WelcomeView from "./components/WelcomeView" import { vscode } from "./utils/vscode" -import { useEvent } from "react-use" -import { ApiConfiguration } from "@shared/api" /* The contents of webviews however are created when the webview becomes visible and destroyed when the webview is moved into the background. Any state inside the webview will be lost when the webview is moved to a background tab. The best way to solve this is to make your webview stateless. Use message passing to save off the webview's state and then restore the state when the webview becomes visible again. - - */ const App: React.FC = () => { @@ -70,6 +69,10 @@ const App: React.FC = () => { useEvent("message", handleMessage) + const { selectedModelInfo } = useMemo(() => { + return normalizeApiConfiguration(apiConfiguration) + }, [apiConfiguration]) + if (!didHydrateState) { return null } @@ -97,6 +100,7 @@ const App: React.FC = () => { isHidden={showSettings} vscodeThemeName={vscodeThemeName} showAnnouncement={showAnnouncement} + selectedModelSupportsImages={selectedModelInfo.supportsImages} hideAnnouncement={() => setShowAnnouncement(false)} /> diff --git a/webview-ui/src/components/ApiOptions.tsx b/webview-ui/src/components/ApiOptions.tsx index 6ee55fa..37aa6e0 100644 --- a/webview-ui/src/components/ApiOptions.tsx +++ b/webview-ui/src/components/ApiOptions.tsx @@ -1,34 +1,78 @@ -import { ApiConfiguration } from "@shared/api" import { VSCodeDropdown, VSCodeLink, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" -import React from "react" +import React, { useMemo } from "react" +import { + ApiConfiguration, + ApiModelId, + ModelInfo, + anthropicDefaultModelId, + anthropicModels, + bedrockDefaultModelId, + bedrockModels, + openRouterDefaultModelId, + openRouterModels, +} from "../../../src/shared/api" interface ApiOptionsProps { + showModelOptions: boolean apiConfiguration?: ApiConfiguration setApiConfiguration: React.Dispatch> } -const ApiOptions: React.FC = ({ apiConfiguration, setApiConfiguration }) => { +const ApiOptions: React.FC = ({ showModelOptions, apiConfiguration, setApiConfiguration }) => { const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => { setApiConfiguration((prev) => ({ ...prev, [field]: event.target.value })) } + const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(() => { + return normalizeApiConfiguration(apiConfiguration) + }, [apiConfiguration]) + + /* + VSCodeDropdown has an open bug where dynamically rendered options don't auto select the provided value prop. You can see this for yourself by comparing it with normal select/option elements, which work as expected. + https://github.com/microsoft/vscode-webview-ui-toolkit/issues/433 + + In our case, when the user switches between providers, we recalculate the selectedModelId depending on the provider, the default model for that provider, and a modelId that the user may have selected. Unfortunately, the VSCodeDropdown component wouldn't select this calculated value, and would default to the first "Select a model..." option instead, which makes it seem like the model was cleared out when it wasn't. + + As a workaround, we create separate instances of the dropdown for each provider, and then conditionally render the one that matches the current provider. + */ + const createDropdown = (models: Record) => { + return ( + + Select a model... + {Object.keys(models).map((modelId) => ( + + {modelId} + + ))} + + ) + } + return (
- + Anthropic OpenRouter AWS Bedrock
- {apiConfiguration?.apiProvider === "anthropic" && ( + {selectedProvider === "anthropic" && (
= ({ apiConfiguration, setApiConfigu
)} - {apiConfiguration?.apiProvider === "openrouter" && ( + {selectedProvider === "openrouter" && (
= ({ apiConfiguration, setApiConfigu
)} - {apiConfiguration?.apiProvider === "bedrock" && ( + {selectedProvider === "bedrock" && (
= ({ apiConfiguration, setApiConfigu style={{ width: "100%" }} onChange={handleInputChange("awsRegion")}> Select a region... - {/* Currently Claude 3.5 Sonnet is only available in us-east-1 */} + {/* The user will have to choose a region that supports the model they use, but this shouldn't be a problem since they'd have to request access for it in that region in the first place. */} US East (N. Virginia) - {/* US East (Ohio) + US East (Ohio) US West (N. California) US West (Oregon) Africa (Cape Town) @@ -120,7 +164,7 @@ const ApiOptions: React.FC = ({ apiConfiguration, setApiConfigu Europe (Paris) Europe (Stockholm) Middle East (Bahrain) - South America (São Paulo) */} + South America (São Paulo)

= ({ apiConfiguration, setApiConfigu

)} + + {showModelOptions && ( + <> +
+ + {selectedProvider === "anthropic" && createDropdown(anthropicModels)} + {selectedProvider === "openrouter" && createDropdown(openRouterModels)} + {selectedProvider === "bedrock" && createDropdown(bedrockModels)} +
+ + + + )} ) } +const ModelInfoView = ({ modelInfo }: { modelInfo: ModelInfo }) => { + const formatPrice = (price: number) => { + return new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }).format(price) + } + + return ( +

+ + + {modelInfo.supportsImages ? "Supports images" : "Does not support images"} + +
+ Max output: {modelInfo.maxTokens.toLocaleString()} tokens +
+ Input price: {formatPrice(modelInfo.inputPrice)} per million tokens +
+ Output price: {formatPrice(modelInfo.outputPrice)} per million + tokens +

+ ) +} + +export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration) { + const provider = apiConfiguration?.apiProvider || "anthropic" + const modelId = apiConfiguration?.apiModelId + + const getProviderData = (models: Record, defaultId: ApiModelId) => { + let selectedModelId: ApiModelId + let selectedModelInfo: ModelInfo + if (modelId && modelId in models) { + selectedModelId = modelId + selectedModelInfo = models[modelId] + } else { + selectedModelId = defaultId + selectedModelInfo = models[defaultId] + } + return { selectedProvider: provider, selectedModelId, selectedModelInfo } + } + switch (provider) { + case "anthropic": + return getProviderData(anthropicModels, anthropicDefaultModelId) + case "openrouter": + return getProviderData(openRouterModels, openRouterDefaultModelId) + case "bedrock": + return getProviderData(bedrockModels, bedrockDefaultModelId) + } +} + export default ApiOptions diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx index cd45271..e4b1cc7 100644 --- a/webview-ui/src/components/ChatRow.tsx +++ b/webview-ui/src/components/ChatRow.tsx @@ -1,11 +1,11 @@ -import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage" import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react" import React from "react" +import Markdown from "react-markdown" +import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" +import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "../../../src/shared/ExtensionMessage" import { COMMAND_OUTPUT_STRING } from "../utils/combineCommandSequences" import { SyntaxHighlighterStyle } from "../utils/getSyntaxHighlighterStyleFromTheme" import CodeBlock from "./CodeBlock/CodeBlock" -import Markdown from "react-markdown" -import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import Thumbnails from "./Thumbnails" interface ChatRowProps { diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index 7fadfb9..3346b30 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -1,18 +1,18 @@ -import { ClaudeAsk, ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage" import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react" import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus" import DynamicTextArea from "react-textarea-autosize" import { useEvent, useMount } from "react-use" +import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" +import { ClaudeAsk, ClaudeMessage, ExtensionMessage } from "../../../src/shared/ExtensionMessage" import { combineApiRequests } from "../utils/combineApiRequests" import { combineCommandSequences } from "../utils/combineCommandSequences" import { getApiMetrics } from "../utils/getApiMetrics" import { getSyntaxHighlighterStyleFromTheme } from "../utils/getSyntaxHighlighterStyleFromTheme" import { vscode } from "../utils/vscode" +import Announcement from "./Announcement" import ChatRow from "./ChatRow" import TaskHeader from "./TaskHeader" -import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" -import Announcement from "./Announcement" import Thumbnails from "./Thumbnails" interface ChatViewProps { @@ -21,6 +21,7 @@ interface ChatViewProps { isHidden: boolean vscodeThemeName?: string showAnnouncement: boolean + selectedModelSupportsImages: boolean hideAnnouncement: () => void } @@ -32,6 +33,7 @@ const ChatView = ({ isHidden, vscodeThemeName, showAnnouncement, + selectedModelSupportsImages, hideAnnouncement, }: ChatViewProps) => { //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined @@ -278,6 +280,11 @@ const ChatView = ({ } const handlePaste = async (e: React.ClipboardEvent) => { + if (shouldDisableImages) { + e.preventDefault() + return + } + const items = e.clipboardData.items const acceptedTypes = ["png", "jpeg", "webp"] // supported by anthropic and openrouter (jpg is just a file extension but the image will be recognized as jpeg) const imageItems = Array.from(items).filter((item) => { @@ -412,6 +419,12 @@ const ChatView = ({ return [text, false] }, [task, messages]) + const shouldDisableImages = + !selectedModelSupportsImages || + textAreaDisabled || + selectedImages.length >= MAX_IMAGES_PER_MESSAGE || + isInputPipingToStdin + return (
= MAX_IMAGES_PER_MESSAGE || isInputPipingToStdin - } + disabled={shouldDisableImages} appearance="icon" aria-label="Attach Images" onClick={selectImages} diff --git a/webview-ui/src/components/SettingsView.tsx b/webview-ui/src/components/SettingsView.tsx index 666c899..32199ab 100644 --- a/webview-ui/src/components/SettingsView.tsx +++ b/webview-ui/src/components/SettingsView.tsx @@ -1,6 +1,6 @@ -import { ApiConfiguration } from "@shared/api" -import { VSCodeButton, VSCodeDivider, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" +import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" import React, { useEffect, useState } from "react" +import { ApiConfiguration } from "../../../src/shared/api" import { validateApiConfiguration, validateMaxRequestsPerTask } from "../utils/validate" import { vscode } from "../utils/vscode" import ApiOptions from "./ApiOptions" @@ -60,78 +60,92 @@ const SettingsView = ({ */ return ( -
-
-

Settings

- Done -
- -
- - {apiErrorMessage && ( -

- {apiErrorMessage} -

- )} -
- -
- setMaxRequestsPerTask(e.target?.value)}> - Maximum # Requests Per Task - -

+

+
- If Claude Dev reaches this limit, it will pause and ask for your permission before making additional - requests. -

- {maxRequestsErrorMessage && ( +

Settings

+ Done +
+ +
+ + {apiErrorMessage && ( +

+ {apiErrorMessage} +

+ )} +
+ +
+ setMaxRequestsPerTask(e.target?.value)}> + Maximum # Requests Per Task +

- {maxRequestsErrorMessage} + If Claude Dev reaches this limit, it will pause and ask for your permission before making + additional requests.

- )} + {maxRequestsErrorMessage && ( +

+ {maxRequestsErrorMessage} +

+ )} +
- -
-

+

If you have any questions or feedback, feel free to open an issue at{" "} https://github.com/saoudrizwan/claude-dev

-

v{version}

+

v{version}

) diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx index ae045f9..af910b7 100644 --- a/webview-ui/src/components/TaskHeader.tsx +++ b/webview-ui/src/components/TaskHeader.tsx @@ -2,8 +2,8 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react" import React, { useEffect, useRef, useState } from "react" import TextTruncate from "react-text-truncate" import { useWindowSize } from "react-use" +import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" import { vscode } from "../utils/vscode" -import { ClaudeMessage } from "@shared/ExtensionMessage" import Thumbnails from "./Thumbnails" interface TaskHeaderProps { diff --git a/webview-ui/src/components/WelcomeView.tsx b/webview-ui/src/components/WelcomeView.tsx index 05baa07..389b11d 100644 --- a/webview-ui/src/components/WelcomeView.tsx +++ b/webview-ui/src/components/WelcomeView.tsx @@ -1,4 +1,4 @@ -import { ApiConfiguration } from "@shared/api" +import { ApiConfiguration } from "../../../src/shared/api" import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" import React, { useEffect, useState } from "react" import { validateApiConfiguration } from "../utils/validate" @@ -40,7 +40,11 @@ const WelcomeView: React.FC = ({ apiConfiguration, setApiConfi To get started, this extension needs an API key for Claude 3.5 Sonnet:
- + Let's go! diff --git a/webview-ui/src/utils/combineApiRequests.ts b/webview-ui/src/utils/combineApiRequests.ts index d540818..b78c146 100644 --- a/webview-ui/src/utils/combineApiRequests.ts +++ b/webview-ui/src/utils/combineApiRequests.ts @@ -1,15 +1,15 @@ -import { ClaudeMessage } from "@shared/ExtensionMessage" +import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" /** * Combines API request start and finish messages in an array of ClaudeMessages. - * + * * This function looks for pairs of 'api_req_started' and 'api_req_finished' messages. * When it finds a pair, it combines them into a single 'api_req_combined' message. * The JSON data in the text fields of both messages are merged. - * + * * @param messages - An array of ClaudeMessage objects to process. * @returns A new array of ClaudeMessage objects with API requests combined. - * + * * @example * const messages = [ * { type: "say", say: "api_req_started", text: '{"request":"GET /api/data"}', ts: 1000 }, diff --git a/webview-ui/src/utils/combineCommandSequences.ts b/webview-ui/src/utils/combineCommandSequences.ts index e4772b9..2b2cf15 100644 --- a/webview-ui/src/utils/combineCommandSequences.ts +++ b/webview-ui/src/utils/combineCommandSequences.ts @@ -1,4 +1,4 @@ -import { ClaudeMessage } from "@shared/ExtensionMessage" +import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" /** * Combines sequences of command and command_output messages in an array of ClaudeMessages. diff --git a/webview-ui/src/utils/getApiMetrics.ts b/webview-ui/src/utils/getApiMetrics.ts index 197ab41..8720fb6 100644 --- a/webview-ui/src/utils/getApiMetrics.ts +++ b/webview-ui/src/utils/getApiMetrics.ts @@ -1,4 +1,4 @@ -import { ClaudeMessage } from "@shared/ExtensionMessage" +import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" interface ApiMetrics { totalTokensIn: number diff --git a/webview-ui/src/utils/mockMessages.ts b/webview-ui/src/utils/mockMessages.ts index 78b88c2..d45be62 100644 --- a/webview-ui/src/utils/mockMessages.ts +++ b/webview-ui/src/utils/mockMessages.ts @@ -1,4 +1,4 @@ -import { ClaudeMessage } from "@shared/ExtensionMessage"; +import { ClaudeMessage } from "../../../src/shared/ExtensionMessage" export const mockMessages: ClaudeMessage[] = [ { diff --git a/webview-ui/src/utils/validate.ts b/webview-ui/src/utils/validate.ts index 77513c7..288ebd1 100644 --- a/webview-ui/src/utils/validate.ts +++ b/webview-ui/src/utils/validate.ts @@ -1,4 +1,4 @@ -import { ApiConfiguration } from "@shared/api" +import { ApiConfiguration } from "../../../src/shared/api" export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): string | undefined { if (apiConfiguration) { diff --git a/webview-ui/src/utils/vscode.ts b/webview-ui/src/utils/vscode.ts index 7c754c5..f3883fd 100644 --- a/webview-ui/src/utils/vscode.ts +++ b/webview-ui/src/utils/vscode.ts @@ -1,4 +1,4 @@ -import { WebviewMessage } from "@shared/WebviewMessage" +import { WebviewMessage } from "../../../src/shared/WebviewMessage" import type { WebviewApi } from "vscode-webview" /** diff --git a/webview-ui/tsconfig.json b/webview-ui/tsconfig.json index cde1010..8a9f459 100644 --- a/webview-ui/tsconfig.json +++ b/webview-ui/tsconfig.json @@ -14,10 +14,7 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx", - "paths": { - "@shared/*": ["../src/shared/*"] - } + "jsx": "react-jsx" }, "include": ["src", "../src/shared"] }