From 7e17ad53eda55eb4394f53c273ef3d0117b39c30 Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Sat, 10 Aug 2024 03:13:20 -0400 Subject: [PATCH] Add version state; update README and Announcement with new image feature --- README.md | 10 +++++-- package.json | 5 ++-- scripts/update-version.ts | 29 ------------------- src/providers/ClaudeDevProvider.ts | 3 +- src/shared/ExtensionMessage.ts | 1 + webview-ui/src/App.tsx | 4 +++ webview-ui/src/components/Announcement.tsx | 33 ++++++---------------- webview-ui/src/components/ChatView.tsx | 12 ++++++-- webview-ui/src/components/SettingsView.tsx | 4 ++- 9 files changed, 38 insertions(+), 63 deletions(-) delete mode 100644 scripts/update-version.ts diff --git a/README.md b/README.md index 3702268..c7daf00 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,11 @@ Download VSCode Extension

-Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) Claude Dev can handle complex software development tasks step-by-step. With tools that let him create & edit files, analyze project source code, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond simple code completion or tech support. From building software projects to running system operations, Claude Dev is only limited by your imagination. +Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) Claude Dev can handle complex software development tasks step-by-step. With tools that let him create & edit files, traverse complex projects, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond simple code completion or tech support. From building software projects to running system operations, Claude Dev is only limited by your imagination. While autonomous AI scripts traditionally run in sandboxed environments, Claude Dev provides a human-in-the-loop GUI to supervise every file changed and command executed, providing a safe and accessible way to explore the potential of agentic AI. +- Paste images in chat to use Claude's vision capabilities and turn mockups into fully functional applications or fix bugs with screenshots - Inspect diffs of every change Claude makes right in the editor, and keep track with syntax highlighted previews in chat - Runs CLI commands directly in chat, so you never have to open a terminal yourself (+ respond to interactive commands by sending a message) - Presents permission buttons (i.e. 'Approve CLI command') before tool use or sending information to the API @@ -23,7 +24,7 @@ _**Pro tip**: Use the `Cmd + Shift + P` shortcut to open the command palette and ## How it works -Claude Dev uses an agentic loop style implementation with chain-of-thought prompting and access to powerful tools that give him the ability to accomplish nearly any task. Start by providing a task and the agentic loop fires off, where it might use certain tools (with your permission) to accomplish each step in its thought process. +Claude Dev uses an autonomous task execution loop with chain-of-thought prompting and access to powerful tools that give him the ability to accomplish nearly any task. Start by providing a task and the loop fires off, where it might use certain tools (with your permission) to accomplish each step in its thought process. ### Tools @@ -81,8 +82,13 @@ To build Claude Dev locally, follow these steps: ## Reviews - ["Claude Sonnet 3.5 Artifacts in VSCode With This Extension"](https://www.youtube.com/watch?v=5FbZ8ALfSTs) by [CoderOne](https://www.youtube.com/@CoderOne) +- ["ClaudeDev: NEW Coding Agent Can Generate Applications within VS Code!"](https://www.youtube.com/watch?v=UNsQHosbIoE) by [WorldofAI](https://www.youtube.com/@intheworldofai) - ["Claude Dev: This Coding Agent can Generate Applications Within VS Code!"](https://www.youtube.com/watch?v=ufq6sHGe0zs) by [AICodeKing](https://www.youtube.com/@AICodeKing) +- ["ClaudeDev + NextJS + Supabase: Generate FULL-STACK Apps with Claude 3.5 Sonnet"](https://www.youtube.com/watch?v=GeZBfO1kxA4) by [AICodeKing](https://www.youtube.com/@AICodeKing) - ["Meet Claude Dev — An Open-Source AI Programmer In VS Code"](https://generativeai.pub/meet-claude-dev-an-open-source-autonomous-ai-programmer-in-vs-code-f457f9821b7b) and ["Build games with zero code using Claude Dev in VS Code"](https://www.youtube.com/watch?v=VT-JYVi81ew) by [Jim Clyde Monge](https://jimclydemonge.medium.com/) +- ["Claude Dev Builds NextJS App! Aider, Continue Dev & GitHub Copilot Open-Source Alternative"](https://www.youtube.com/watch?v=Rv0wJZRpnCQ) by [Josh Pocock](https://www.youtube.com/@joshfpocock) +- ["Claude Dev Is Mindblowing. The Best Coding Assistant tool?"](https://www.youtube.com/watch?v=Vp1Z3VGZroA) by [Yaron Been](https://www.youtube.com/@ecomxfactor-YaronBeen) +- ["ClaudeDev: The Ultimate Coding Agent for VS Code"](https://www.youtube.com/watch?v=aq0yw_DtphQ) by [Blas](https://www.youtube.com/@blascerecer) - ["AI Development with Claude Dev"](https://www.linkedin.com/pulse/ai-development-claude-dev-shannon-lal-3ql3e/) by Shannon Lal - ["Code Smarter with Claude Dev: An AI Programmer for Your Projects"](https://www.linkedin.com/pulse/code-smarter-claude-dev-ai-programmer-your-projects-iana-detochka-jiqpe) by Iana D. - [Claude Dev also hit top 10 posts of all time on r/ClaudeAI (thank you for all the lovely comments)](https://www.reddit.com/r/ClaudeAI/comments/1e3h0f1/my_submission_to_anthropics_build_with_claude/) diff --git a/package.json b/package.json index 82e4d69..8eedcaf 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "claude-dev", "displayName": "Claude Dev", "description": "Autonomous software engineer right in your IDE, capable of creating/editing files, executing commands, and more with your permission every step of the way.", - "version": "1.0.99", + "version": "1.1.0", "icon": "icon.png", "engines": { "vscode": "^1.84.0" @@ -105,8 +105,7 @@ "install:all": "npm install && cd webview-ui && npm install", "start:webview": "cd webview-ui && npm run start", "build:webview": "cd webview-ui && npm run build", - "test:webview": "cd webview-ui && npm run test", - "upver": "tsx scripts/update-version.ts" + "test:webview": "cd webview-ui && npm run test" }, "devDependencies": { "@types/diff": "^5.2.1", diff --git a/scripts/update-version.ts b/scripts/update-version.ts deleted file mode 100644 index 11f863b..0000000 --- a/scripts/update-version.ts +++ /dev/null @@ -1,29 +0,0 @@ -import * as fs from "fs" -import * as path from "path" - -const newVersion = process.argv[2] - -if (!newVersion) { - console.error("Please provide a version number") - process.exit(1) -} - -// Update root package.json -const rootPackagePath = path.join(__dirname, "..", "package.json") -const rootPackage = JSON.parse(fs.readFileSync(rootPackagePath, "utf8")) -rootPackage.version = newVersion -fs.writeFileSync(rootPackagePath, JSON.stringify(rootPackage, null, 2)) - -// Update Announcement.tsx -const announcementPath = path.join(__dirname, "..", "webview-ui", "src", "components", "Announcement.tsx") -let announcementContent = fs.readFileSync(announcementPath, "utf8") -announcementContent = announcementContent.replace(/New in v[\d.]+<\/h3>/, `New in v${newVersion}`) -fs.writeFileSync(announcementPath, announcementContent) - -// Update SettingsView.tsx -const settingsViewPath = path.join(__dirname, "..", "webview-ui", "src", "components", "SettingsView.tsx") -let settingsViewContent = fs.readFileSync(settingsViewPath, "utf8") -settingsViewContent = settingsViewContent.replace(/>v[\d.]+<\/p>/, `>v${newVersion}

`) -fs.writeFileSync(settingsViewPath, settingsViewContent) - -console.log(`Version updated to ${newVersion}`) diff --git a/src/providers/ClaudeDevProvider.ts b/src/providers/ClaudeDevProvider.ts index 3e35ad0..0459105 100644 --- a/src/providers/ClaudeDevProvider.ts +++ b/src/providers/ClaudeDevProvider.ts @@ -22,7 +22,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { private disposables: vscode.Disposable[] = [] private view?: vscode.WebviewView | vscode.WebviewPanel private claudeDev?: ClaudeDev - private latestAnnouncementId = "jul-29-2024" // update to some unique identifier when we add a new announcement + private latestAnnouncementId = "aug-10-2024" // update to some unique identifier when we add a new announcement constructor( private readonly context: vscode.ExtensionContext, @@ -324,6 +324,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { this.postMessageToWebview({ type: "state", state: { + version: this.context.extension?.packageJSON?.version ?? "", apiConfiguration: { apiProvider, apiKey, openRouterApiKey, awsAccessKey, awsSecretKey, awsRegion }, maxRequestsPerTask, themeName: vscode.workspace.getConfiguration("workbench").get("colorTheme"), diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index af20f28..0ac3d10 100644 --- a/src/shared/ExtensionMessage.ts +++ b/src/shared/ExtensionMessage.ts @@ -12,6 +12,7 @@ export interface ExtensionMessage { } export interface ExtensionState { + version: string apiConfiguration?: ApiConfiguration maxRequestsPerTask?: number themeName?: string diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index a6b47c9..e302b6f 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -20,6 +20,7 @@ const App: React.FC = () => { const [didHydrateState, setDidHydrateState] = useState(false) const [showSettings, setShowSettings] = useState(false) const [showWelcome, setShowWelcome] = useState(false) + const [version, setVersion] = useState("") const [apiConfiguration, setApiConfiguration] = useState(undefined) const [maxRequestsPerTask, setMaxRequestsPerTask] = useState("") const [vscodeThemeName, setVscodeThemeName] = useState(undefined) @@ -34,6 +35,7 @@ const App: React.FC = () => { const message: ExtensionMessage = e.data switch (message.type) { case "state": + setVersion(message.state!.version) const hasKey = message.state!.apiConfiguration?.apiKey !== undefined || message.state!.apiConfiguration?.openRouterApiKey !== undefined || @@ -80,6 +82,7 @@ const App: React.FC = () => { <> {showSettings && ( { )} {/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */} void } /* You must update the latestAnnouncementId in ClaudeDevProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves. */ -const Announcement = ({ hideAnnouncement }: AnnouncementProps) => { +const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => { return (
{ style={{ position: "absolute", top: "8px", right: "8px" }}> -

🎉{" "}New in v1.0.99

+

+ 🎉{" "}New in v{version} +

  • - Open in the editor (using{" "} - {" "} - or Claude Dev: Open In New Tab in command palette) to see how Claude updates your - workspace more clearly + Paste images in chat to use Claude's vision capabilities and turn mockups into fully functional + applications or fix bugs with screenshots
  • - New list_files_recursive and{" "} - view_source_code_definitions_top_level tools to help - Claude get a comprehensive overview of your project's file structure and source code definitions - - (more on this here) - + Improved support for running interactive terminal commands and long-running processes like servers
    • -
  • - Interact with CLI commands by sending messages to stdin and terminating long-running processes like - servers -
    • -
  • Provide feedback to tool use like editing files or running commands
    • -
  • Shows diff view of new or edited files right in the editor
    • -
  • Added ability to retry failed API requests (helpful for rate limits)
    • -
  • Export task to a markdown file (useful as context for future tasks)
    • -
  • Added OpenRouter and AWS Bedrock support

Follow me for more updates!{" "} diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index cff4cc3..75403dc 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -16,6 +16,7 @@ import Announcement from "./Announcement" import Thumbnails from "./Thumbnails" interface ChatViewProps { + version: string messages: ClaudeMessage[] isHidden: boolean vscodeThemeName?: string @@ -25,7 +26,14 @@ interface ChatViewProps { const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images -const ChatView = ({ messages, isHidden, vscodeThemeName, showAnnouncement, hideAnnouncement }: ChatViewProps) => { +const ChatView = ({ + version, + messages, + isHidden, + vscodeThemeName, + showAnnouncement, + hideAnnouncement, +}: ChatViewProps) => { //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort) const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages]) @@ -427,7 +435,7 @@ const ChatView = ({ messages, isHidden, vscodeThemeName, showAnnouncement, hideA /> ) : ( <> - {showAnnouncement && } + {showAnnouncement && }

What can I do for you?

diff --git a/webview-ui/src/components/SettingsView.tsx b/webview-ui/src/components/SettingsView.tsx index 6062f1b..666c899 100644 --- a/webview-ui/src/components/SettingsView.tsx +++ b/webview-ui/src/components/SettingsView.tsx @@ -6,6 +6,7 @@ import { vscode } from "../utils/vscode" import ApiOptions from "./ApiOptions" type SettingsViewProps = { + version: string apiConfiguration?: ApiConfiguration setApiConfiguration: React.Dispatch> maxRequestsPerTask: string @@ -14,6 +15,7 @@ type SettingsViewProps = { } const SettingsView = ({ + version, apiConfiguration, setApiConfiguration, maxRequestsPerTask, @@ -129,7 +131,7 @@ const SettingsView = ({ https://github.com/saoudrizwan/claude-dev

-

v1.0.99

+

v{version}

)