├── .eslintrc.json
├── .github
└── workflows
│ └── release.yml
├── .gitignore
├── .vscode
├── extensions.json
├── launch.json
├── settings.json
└── tasks.json
├── .vscodeignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── assets
└── icon.jpg
├── package-lock.json
├── package.json
├── src
├── anthropic.ts
├── apiProvider.ts
├── atom-one-dark.min.css
├── chatide.css
├── chatide.html
├── chatide.js
├── custom.ts
├── extension.ts
├── highlight.min.js
├── openai.ts
├── test
│ ├── runTest.ts
│ └── suite
│ │ ├── extension.test.ts
│ │ └── index.ts
└── utils.ts
├── tsconfig.json
├── vsc-extension-quickstart.md
└── webpack.config.js
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "@typescript-eslint/parser",
4 | "parserOptions": {
5 | "ecmaVersion": 6,
6 | "sourceType": "module"
7 | },
8 | "plugins": [
9 | "@typescript-eslint"
10 | ],
11 | "rules": {
12 | "@typescript-eslint/naming-convention": "warn",
13 | "@typescript-eslint/semi": "warn",
14 | "curly": "warn",
15 | "eqeqeq": "warn",
16 | "no-throw-literal": "warn",
17 | "semi": "off",
18 | "indent": ["error", 4]
19 | },
20 | "ignorePatterns": [
21 | "out",
22 | "dist",
23 | "**/*.d.ts"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Publish to VS Code Extensions Marketplace
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | paths-ignore:
8 | - 'README.md'
9 | - '.github/workflows/release.yml'
10 |
11 | jobs:
12 | release:
13 | runs-on: ubuntu-latest
14 | steps:
15 | - name: Checkout code
16 | uses: actions/checkout@v2
17 |
18 | - name: Set up Node.js
19 | uses: actions/setup-node@v2
20 | with:
21 | node-version: 16
22 |
23 | - name: Install dependencies
24 | run: npm ci
25 |
26 | - name: Install vsce
27 | run: npm install --global @vscode/vsce
28 |
29 | - name: Package VSIX
30 | run: vsce package
31 |
32 | - name: Publish to Marketplace
33 | run: vsce publish -p ${{ secrets.MS_AZURE_PAT }}
34 | env:
35 | PUBLISHER_ID: chatIDE
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | .DS_Store
4 | *.vsix
5 | gpt-conversations/
6 | ignore/
7 | .env
8 | Dockerfile
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // See http://go.microsoft.com/fwlink/?LinkId=827846
3 | // for the documentation about the extensions.json format
4 | "recommendations": ["dbaeumer.vscode-eslint", "amodio.tsl-problem-matcher"]
5 | }
6 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | // A launch configuration that compiles the extension and then opens it inside a new window
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | {
6 | "version": "0.2.0",
7 | "configurations": [
8 | {
9 | "name": "Run Extension",
10 | "type": "extensionHost",
11 | "request": "launch",
12 | "args": [
13 | "--extensionDevelopmentPath=${workspaceFolder}"
14 | ],
15 | "outFiles": [
16 | "${workspaceFolder}/dist/**/*.js"
17 | ],
18 | "preLaunchTask": "${defaultBuildTask}"
19 | },
20 | {
21 | "name": "Extension Tests",
22 | "type": "extensionHost",
23 | "request": "launch",
24 | "args": [
25 | "--extensionDevelopmentPath=${workspaceFolder}",
26 | "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
27 | ],
28 | "outFiles": [
29 | "${workspaceFolder}/out/**/*.js",
30 | "${workspaceFolder}/dist/**/*.js"
31 | ],
32 | "preLaunchTask": "tasks: watch-tests"
33 | }
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "files.exclude": {
4 | "out": false, // set this to true to hide the "out" folder with the compiled JS files
5 | "dist": false // set this to true to hide the "dist" folder with the compiled JS files
6 | },
7 | "search.exclude": {
8 | "out": true, // set this to false to include "out" folder in search results
9 | "dist": true // set this to false to include "dist" folder in search results
10 | },
11 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
12 | "typescript.tsc.autoDetect": "off"
13 | }
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | // See https://go.microsoft.com/fwlink/?LinkId=733558
2 | // for the documentation about the tasks.json format
3 | {
4 | "version": "2.0.0",
5 | "tasks": [
6 | {
7 | "type": "npm",
8 | "script": "watch",
9 | "problemMatcher": "$ts-webpack-watch",
10 | "isBackground": true,
11 | "presentation": {
12 | "reveal": "never",
13 | "group": "watchers"
14 | },
15 | "group": {
16 | "kind": "build",
17 | "isDefault": true
18 | }
19 | },
20 | {
21 | "type": "npm",
22 | "script": "watch-tests",
23 | "problemMatcher": "$tsc-watch",
24 | "isBackground": true,
25 | "presentation": {
26 | "reveal": "never",
27 | "group": "watchers"
28 | },
29 | "group": "build"
30 | },
31 | {
32 | "label": "tasks: watch-tests",
33 | "dependsOn": [
34 | "npm: watch",
35 | "npm: watch-tests"
36 | ],
37 | "problemMatcher": []
38 | }
39 | ]
40 | }
41 |
--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | node_modules
3 | out/test
4 | **/*.map
5 | **/*.ts
6 | **/*.js.map
7 | **/*.tsbuildinfo
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to the "ChatIDE" extension will be documented in this file.
4 |
5 | ## [0.2.8]
6 | ### Bug fix
7 | - Changing OpenAI API key would sometimes not work
8 |
9 | ## [0.2.7]
10 |
11 | ### Added
12 | - New setting that enables sending messages using Enter key press (enable in settings)
13 | - Support for custom server URL (must be OpenAI 'compatible')
14 |
15 | ## [0.2.6]
16 |
17 | ### Added
18 | - Support for Claude 100K context length ("claude-v1.3-100k")
19 | - Support for GPT4 32K context length ("gpt-4-32k")
20 |
21 | ## [0.2.0]
22 |
23 | ### Added
24 | - Support for Anthropic's Claude
25 |
26 | ## [0.1.0]
27 |
28 | ### Added
29 | - Use highlight.js to highlight code blocks
30 | - "copy code" button to easily copy code produced by the assistant
31 | - Highlighting code automatically includes it in a special "context" prefix message to the assistant (this happens only once per code selection)
32 | - Pressing tab in the textrea now inserts a tab into the text instead of changing focus target
33 |
34 | ## [0.0.9]
35 |
36 | ### Added
37 | - Render the user message as markdown
38 |
39 | ## [0.0.8]
40 |
41 | ### Changed
42 | - Change default model to gpt-3.5-turbo because most people don't have access to 4 yet
43 |
44 | ### Added
45 | - Show OpenAI API error in the chat with some troubleshooting options
46 |
47 | ## [0.0.7]
48 |
49 | ### Added
50 | - Load and continue a conversation from JSON file
51 | - Styling updates
52 |
53 | ## [0.0.6]
54 |
55 | ### Fixed
56 | - Fix a bug where the api key won't be registered until the user restarted VS Code
57 |
58 | ## [0.0.5]
59 |
60 | ### Added
61 | - Add code to publish the extension to Microsoft's extension marketplace
62 |
63 | ## [0.0.4]
64 |
65 | ### Added
66 | - Store API key in VS Code secretStorage
67 | - System prompt asks GPT to avoid repeating information
68 |
69 | ## [0.0.3]
70 |
71 | ### Added
72 | - Ability to configure system prompt through extension settings
73 | - Ability to reset chat
74 | - Ability to export current chat as JSON
75 |
76 | ## [Unreleased]
77 |
78 | - Initial release
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Yagil Burowski
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
3 |
4 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
15 |
16 |
17 | ChatIDE - AI assistant in your IDE OpenAI's ChatGPT or Anthropic's Claude in VSCode
19 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
29 |
31 |
32 |
33 | [](https://user-images.githubusercontent.com/3611042/232339222-c0532f49-6772-46c5-b29e-be00f77c1c1c.mov)
34 |
35 | ## Build and run from source
36 |
37 | 1. Clone this repository and install the npm dependencies
38 | 2. Open the project in VS Code
39 | 3. Press `F5` to launch the extension in debug mode
40 |
41 | ## Installation
42 |
43 | Grab the latest ChatIDE version from the Extensions Marketplace:
70 |
72 |
73 | ### Updating your API key
74 |
75 | 1. Run `cmd + shift + P` (or `ctrl + shift + P`)
76 | 2. Start typing `>ChatIDE`
77 |
78 | #### OpenAI
79 | 3. Select `>Update your OpenAI API Key for ChatIDE`.
80 |
81 | #### Anthropic
82 | 3. Select `>Update your Anthropic API Key for ChatIDE`.
83 |
84 | ## Known issues
85 |
86 | 1. There's currently no way to stop the model from generating. You need to wait until it's done.
87 | 2. Closing the ChatIDE pane while the model is generating might lead to a non-recoverable error. You'll need to restart VS Code to use ChatIDE again.
88 |
89 | ## Warning
90 |
91 | ⚠️ This is an early prototype, use at your own peril.
92 |
93 | 🧐 Remember to keep an eye on your OpenAI / Anthropic billing.
94 |
95 | ## Credits
96 |
97 | ChatIDE continues to be built using ChatIDE.
98 |
--------------------------------------------------------------------------------
/assets/icon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yagil/ChatIDE/a0a58fe96fbd39b3d4d71def16c37e4226f36224/assets/icon.jpg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chatide",
3 | "publisher": "ChatIDE",
4 | "displayName": "ChatIDE - Coding Assistant (GPT/ChatGPT, Claude)",
5 | "description": "ChatIDE is an open-source coding and debugging assistant that supports GPT/ChatGPT (OpenAI), and Claude (Anthropic). Supported models: [gpt4, gpt-3.5-turbo, claude-v1.3]. Import/export your conversation history. Bring up the assistant in a side pane by pressing cmd+shift+i.",
6 | "version": "0.3.5",
7 | "license": "MIT",
8 | "icon": "assets/icon.jpg",
9 | "engines": {
10 | "vscode": "^1.77.0"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/yagil/ChatIDE"
15 | },
16 | "categories": [
17 | "Other"
18 | ],
19 | "keywords": [
20 | "anthropic",
21 | "claude",
22 | "chatgpt",
23 | "gpt",
24 | "gpt4",
25 | "gpt3",
26 | "openai",
27 | "ai",
28 | "agi",
29 | "artificial-intelligence",
30 | "natural-language-processing",
31 | "nlp",
32 | "language-model",
33 | "coding-assistant",
34 | "programming-help",
35 | "debugging",
36 | "questions",
37 | "code-generation"
38 | ],
39 | "activationEvents": [],
40 | "main": "./dist/extension.js",
41 | "contributes": {
42 | "commands": [
43 | {
44 | "command": "chatide.start",
45 | "title": "Start ChatIDE"
46 | },
47 | {
48 | "command": "chatide.openSettings",
49 | "title": "Open ChatIDE Settings"
50 | },
51 | {
52 | "command": "chatide.updateOpenAiApiKey",
53 | "title": "Update your OpenAI API Key for ChatIDE"
54 | },
55 | {
56 | "command": "chatide.updateAnthropicApiKey",
57 | "title": "Update your Anthropic API Key for ChatIDE"
58 | }
59 | ],
60 | "keybindings": [
61 | {
62 | "key": "cmd+shift+i",
63 | "command": "chatide.start",
64 | "when": "editorTextFocus"
65 | }
66 | ],
67 | "configuration": {
68 | "title": "ChatIDE",
69 | "properties": {
70 | "chatide.model": {
71 | "order": 0,
72 | "type": "string",
73 | "default": "gpt-4o",
74 | "enum": [
75 | "gpt-4o",
76 | "claude-3-5-sonnet-20240620",
77 | "gpt-4o-2024-08-06",
78 | "claude-3-opus-20240229",
79 | "chatgpt-4o-latest",
80 | "gpt-4-turbo",
81 | "gpt-4",
82 | "custom"
83 | ],
84 | "description": "Select the AI model. You must have your own API key to use a model.",
85 | "scope": "window"
86 | },
87 | "chatide.systemPrompt": {
88 | "order": 1,
89 | "type": "string",
90 | "default": "You are a helpful programming assistant running inside VS Code. The assistant always generates accurate and succinct messages. The assistant doesn't repeat previous information, and doesn't launch into long explanations unless asked. Always provide code inside triple backticks.",
91 | "markdownDescription": "The 'system' prompt provided to the model. Keep in mind that some models pay stronger attention to the system prompt than others. For models that don't have a dedciated affordance for system prompts, this will be prepended to the first user prompt.",
92 | "scope": "window",
93 | "editorType": "string",
94 | "editorMultiline": true
95 | },
96 | "chatide.maxLength": {
97 | "order": 2,
98 | "type": "integer",
99 | "default": 1000,
100 | "minimum": 1,
101 | "description": "Set the maximum length for the generated text (aka max_tokens).",
102 | "scope": "window"
103 | },
104 | "chatide.temperature": {
105 | "order": 3,
106 | "type": "number",
107 | "default": 0,
108 | "maximum": 1,
109 | "minimum": 0,
110 | "description": "Set the temperature for controlling the randomness of the generated text.",
111 | "scope": "window"
112 | },
113 | "chatide.highlightedCodeAwareness": {
114 | "order": 4,
115 | "type": "boolean",
116 | "default": false,
117 | "description": "[Experimental] Automatically include highlighted code in the prompt.",
118 | "scope": "window"
119 | },
120 | "chatide.pressEnterToSend": {
121 | "order": 5,
122 | "type": "boolean",
123 | "default": false,
124 | "description": "When enabled, pressing enter will send the message in the input box. Shift + Enter will insert a new line. When this option is not selected, you must click the 'Send' button.",
125 | "scope": "window"
126 | },
127 | "chatide.customServerUrl": {
128 | "order": 6,
129 | "type": "string",
130 | "description": "Custom OpenAI-compatible server URL (Example http://localhost:1234/v1). Note: '/chat/completions' will be appended to the URL.",
131 | "scope": "window",
132 | "editorType": "string"
133 | },
134 | "chatide.autoSaveDirectory": {
135 | "order": 0,
136 | "type": "string",
137 | "default": "~/.cache/chatide/",
138 | "description": "The directory where the conversation will be automatically saved. If empty, auto-save will be disabled.",
139 | "scope": "window"
140 | },
141 | "chatide.autoSaveEnabled": {
142 | "type": "boolean",
143 | "default": true,
144 | "description": "When enabled, the conversation will be automatically saved to the directory specified in 'chatide.autoSaveDirectory'.",
145 | "scope": "window"
146 | }
147 | }
148 | }
149 | },
150 | "scripts": {
151 | "vscode:prepublish": "npm run package",
152 | "compile": "webpack",
153 | "watch": "webpack --watch",
154 | "package": "webpack --mode production --devtool hidden-source-map",
155 | "compile-tests": "tsc -p . --outDir out",
156 | "watch-tests": "tsc -p . -w --outDir out",
157 | "pretest": "npm run compile-tests && npm run compile && npm run lint",
158 | "lint": "eslint src --ext ts",
159 | "test": "node ./out/test/runTest.js"
160 | },
161 | "devDependencies": {
162 | "@types/glob": "^8.1.0",
163 | "@types/marked": "^4.0.8",
164 | "@types/mocha": "^10.0.1",
165 | "@types/node": "16.x",
166 | "@types/vscode": "^1.77.0",
167 | "@typescript-eslint/eslint-plugin": "^5.56.0",
168 | "@typescript-eslint/parser": "^5.56.0",
169 | "@vscode/test-electron": "^2.3.0",
170 | "eslint": "^8.36.0",
171 | "glob": "^8.1.0",
172 | "mocha": "^10.2.0",
173 | "ts-loader": "^9.4.2",
174 | "typescript": "^4.9.5",
175 | "webpack": "^5.76.3",
176 | "webpack-cli": "^5.0.1"
177 | },
178 | "dependencies": {
179 | "@anthropic-ai/sdk": "^0.17.1",
180 | "dotenv": "^16.0.3",
181 | "marked": "^4.3.0",
182 | "openai": "^3.2.1"
183 | }
184 | }
185 |
--------------------------------------------------------------------------------
/src/anthropic.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/naming-convention */
2 | import * as vscode from "vscode";
3 | import { APIProvider } from "./apiProvider";
4 |
5 | import Anthropic from '@anthropic-ai/sdk';
6 | import { MessageParam } from "@anthropic-ai/sdk/resources";
7 |
8 | export interface AnthropicParams {
9 | messages: Array;
10 | max_tokens: number;
11 | model: string;
12 | stream: boolean;
13 | temperature?: number;
14 | }
15 |
16 | export class AnthropicProvider extends APIProvider {
17 | private client: Anthropic | undefined;
18 | private context: vscode.ExtensionContext;
19 |
20 | constructor(context: vscode.ExtensionContext) {
21 | super();
22 | this.context = context;
23 | }
24 |
25 | async init() {
26 | let apiKey = await this.context.secrets.get("chatide.anthropicApiKey");
27 | if (!apiKey) {
28 | apiKey = await vscode.window.showInputBox({
29 | prompt: "Enter your Anthropic API key:",
30 | ignoreFocusOut: true,
31 | });
32 | if (apiKey) {
33 | await this.context.secrets.store("chatide.anthropicApiKey", apiKey);
34 | } else {
35 | throw new Error("No API key provided. Please add your API key and restart the extension.");
36 | }
37 | }
38 |
39 | this.client = new Anthropic({
40 | apiKey
41 | });
42 | }
43 |
44 | async completeStream(params: AnthropicParams, callbacks: any) {
45 | if (!this.client) {
46 | throw new Error("Anthropic API client is not initialized.");
47 | }
48 |
49 | let anthropicMessage = "";
50 | // @ts-ignore
51 | const systemMessage = params.messages.find((message) => message.role === "system");
52 | // @ts-ignore
53 | const messagesWithoutSystem = params.messages.filter((message) => message.role !== "system");
54 | try {
55 | const stream = await this.client.messages.create({
56 | max_tokens: params.max_tokens,
57 | system: systemMessage?.content as string|undefined,
58 | messages: messagesWithoutSystem,
59 | model: params.model,
60 | stream: params.stream,
61 | });
62 | if (callbacks.onComplete) {
63 | // @ts-ignore
64 | for await (const messageStreamEvent of stream) {
65 | const { type, delta } = messageStreamEvent;
66 | if (type === "content_block_delta") {
67 | anthropicMessage += delta.text;
68 | callbacks.onUpdate(anthropicMessage);
69 | } else if (type === "message_stop") {
70 | console.log("MessageStreamEvent:", messageStreamEvent);
71 | callbacks.onComplete(anthropicMessage);
72 | }
73 | }
74 | }
75 | } catch (error: any) {
76 | console.error("Error fetching stream:", error);
77 | throw error;
78 | }
79 | }
80 | }
--------------------------------------------------------------------------------
/src/apiProvider.ts:
--------------------------------------------------------------------------------
1 | export abstract class APIProvider {
2 | abstract init(): Promise;
3 | abstract completeStream(
4 | params: any,
5 | callbacks: {
6 | onOpen?: (response: any) => void;
7 | onUpdate?: (completion: any) => void;
8 | onComplete?: (message: any) => void;
9 | }
10 | ): Promise;
11 | }
12 |
--------------------------------------------------------------------------------
/src/atom-one-dark.min.css:
--------------------------------------------------------------------------------
1 | pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
--------------------------------------------------------------------------------
/src/chatide.css:
--------------------------------------------------------------------------------
1 | body,
2 | html {
3 | height: 100%;
4 | margin: 0;
5 | padding: 0;
6 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
7 | background-color: #161616;
8 | }
9 |
10 | pre,
11 | code {
12 | white-space: pre-wrap;
13 | word-wrap: break-word;
14 | overflow-wrap: break-word;
15 | }
16 |
17 | #chat-container {
18 | display: flex;
19 | flex-direction: column;
20 | height: 100%;
21 | }
22 |
23 | #chat-header {
24 | display: flex;
25 | align-items: center;
26 | justify-content: space-between;
27 | background: black;
28 | padding: 16px;
29 | }
30 |
31 | h1#chat-title {
32 | margin: 0;
33 | font-weight: 500;
34 | color: white;
35 | font-size: 1.3em;
36 | }
37 |
38 | #config-details {
39 | color:#ccc;
40 | font-size: x-small;
41 | }
42 |
43 | #model-prefix {
44 | color: #888;
45 | }
46 |
47 | #messages {
48 | flex-grow: 1;
49 | overflow-y: auto;
50 | padding: 16px;
51 | word-break: break-word; /* break words if necessary */
52 | }
53 |
54 | .user-message,
55 | .assistant-message,
56 | .system-message,
57 | .extension-message {
58 | margin-bottom: 8px;
59 | padding: 8px;
60 | word-wrap: break-word; /* break words if necessary */
61 | border-radius: 5px;
62 | max-width: 100%; /* limit the width to 100% of the container */
63 | overflow-wrap: break-word; /* break long words if necessary */
64 | }
65 |
66 | #chat-control {
67 | display: flex;
68 | flex-direction: row;
69 | align-items: center;
70 | }
71 |
72 | .control-btn {
73 | font-size: smaller;
74 | padding: 5px 10px;
75 | border-radius: 5px;
76 | background-color: #1d1d1d;
77 | color: rgb(195, 195, 195);
78 | border: none;
79 | cursor: pointer;
80 | margin-right: 10px;
81 | white-space: nowrap;
82 | }
83 |
84 | .control-btn:hover {
85 | background-color: #292929;
86 | color:white;
87 | }
88 |
89 | .user-message {
90 | background-color: rgb(87, 87, 87);
91 | color: white;
92 | }
93 |
94 | .assistant-message {
95 | background-color: #333;
96 | color: white;
97 | }
98 |
99 | .system-message {
100 | background-color: #332d45;
101 | color: rgb(178, 120, 241);
102 | margin-bottom: 20px !important;
103 | }
104 |
105 | .extension-message {
106 | background-color: #332d45;
107 | color: rgb(241, 120, 120);
108 | margin-bottom: 20px !important;
109 | }
110 |
111 | #message-input {
112 | width: 90%;
113 | min-height: 36px;
114 | max-height: 160px; /* limit the maximum height */
115 | resize: none;
116 | outline: none;
117 | border: 1px solid #ccc;
118 | padding: 8px;
119 | box-sizing: border-box;
120 | overflow-y: auto; /* allow scrolling when the content exceeds the maximum height */
121 | white-space: pre-wrap; /* wrap the text */
122 | word-wrap: break-word; /* break words if necessary */
123 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
124 | font-size: 13px;
125 | }
126 |
127 | #send-button {
128 | width: 10%;
129 | min-height: 36px;
130 | background-color: #007acc;
131 | color: white;
132 | border: none;
133 | cursor: pointer;
134 | font-size: 1em;
135 | }
136 |
137 | #send-button:hover {
138 | background-color: #005999;
139 | }
140 |
141 | .chat-bar {
142 | display: flex;
143 | padding: 8px;
144 | }
145 |
146 | #chat-logo {
147 | width: 20px;
148 | border-radius: 2px;
149 | margin-right: 8px;
150 | }
151 |
152 | #logo-container {
153 | display: flex;
154 | align-items: center;
155 | flex-direction: row;
156 | }
157 |
158 | b {
159 | font-weight: medium;
160 | }
161 |
162 | #status-bar {
163 | font-size: 0.8em;
164 | color: #888;
165 | display: flex;
166 | align-items: center;
167 | justify-content: space-between;
168 | padding: 4px 10px;
169 | background-color: #333;
170 | border-top: 1px solid #444;
171 | height: 20px;
172 | }
173 |
174 | #status-bar a,
175 | #status-bar button {
176 | color: #fff;
177 | text-decoration: underline;
178 | background: none;
179 | border: none;
180 | padding: 0;
181 | margin: 0;
182 | cursor: pointer;
183 | }
184 |
185 | #status-bar button:hover {
186 | text-decoration: none;
187 | }
188 |
189 | .white-text {
190 | color: white;
191 | }
192 |
193 | .code-block-wrapper {
194 | position: relative;
195 | display: block;
196 | margin-bottom: 1em;
197 | background-color: #282c34;
198 | padding: 0.5em;
199 | border-radius: 5px;
200 | }
201 |
202 | .copy-code-button {
203 | position: absolute;
204 | top: 0;
205 | right: 0;
206 | margin: 10px 10px 0 0;
207 | font-size: 12px;
208 | padding: 5px 7px;
209 | background-color: #353840;
210 | border-radius: 5px;
211 | color: white;
212 | border: none;
213 | cursor: pointer;
214 | z-index: 1;
215 | }
216 |
217 | #config-container {
218 | display: flex;
219 | flex-direction: row;
220 | justify-content: space-between;
221 | cursor: pointer;
222 | }
223 |
224 | #settings-button {
225 | background-color:black;
226 | border: none;
227 | margin-left: 5px;
228 | color: white;
229 | font-size:large;
230 | cursor: pointer;
231 | }
--------------------------------------------------------------------------------
/src/chatide.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ChatIDE
7 |
11 |
26 |
27 |
28 |
29 | Send
30 |
31 |
32 |
${codeHighlightStatusCopy}
33 |
Show code
34 |
35 | Auto-save Chats:
36 |
38 |
39 |
"));
378 | }
379 | },
380 | onComplete: (message: string) => {
381 | messages.push({ "role": "assistant", "content": message });
382 | autoSaveMessages(); // Add this line to auto-save messages
383 | }
384 | }
385 | );
386 | } catch (error: any) {
387 | if (errorCallback) {
388 | errorCallback(error);
389 | }
390 | }
391 | }
392 |
393 |
394 | async function autoSaveMessages() {
395 | if (!autoSaveEnabled) {
396 | return;
397 | }
398 |
399 | const autoSaveDirectory = vscode.workspace.getConfiguration('chatide').get('autoSaveDirectory') as string;
400 | if (!autoSaveDirectory) {
401 | return;
402 | }
403 |
404 | // Resolve the full path using os.homedir()
405 | const fullPath = autoSaveDirectory.startsWith('~')
406 | ? path.join(os.homedir(), autoSaveDirectory.slice(1))
407 | : autoSaveDirectory;
408 |
409 | // Create the directory if it doesn't exist
410 | if (!fs.existsSync(fullPath)) {
411 | fs.mkdirSync(fullPath, { recursive: true });
412 | }
413 |
414 | if (!currentSessionName) {
415 | const timestamp = new Date().toISOString().replace(/:/g, '-');
416 | currentSessionName = `chatide-chat-${timestamp}.json`;
417 | }
418 |
419 | const filePath = path.join(fullPath, currentSessionName);
420 |
421 | const content = JSON.stringify(messages, null, 2);
422 | fs.writeFile(filePath, content, (err) => {
423 | if (err) {
424 | console.error('Failed to auto-save messages:', err);
425 | } else {
426 | console.log('Messages auto-saved successfully!');
427 | }
428 | });
429 | }
430 |
431 | async function exportChat() {
432 | const options: vscode.SaveDialogOptions = {
433 | defaultUri: vscode.Uri.file('chatIDE-history-'),
434 | filters: {
435 | // eslint-disable-next-line @typescript-eslint/naming-convention
436 | 'JSON': ['json']
437 | }
438 | };
439 |
440 | const fileUri = await vscode.window.showSaveDialog(options);
441 | if (fileUri) {
442 | const content = JSON.stringify(messages, null, 2);
443 | fs.writeFile(fileUri.fsPath, content, (err) => {
444 | if (err) {
445 | vscode.window.showErrorMessage('Failed to export messages: ' + err.message);
446 | } else {
447 | vscode.window.showInformationMessage('Messages exported successfully!');
448 | }
449 | });
450 | }
451 | }
452 |
453 | // Import chat history from a JSON file
454 | async function importChat() {
455 | const options: vscode.OpenDialogOptions = {
456 | canSelectMany: false,
457 | filters: {
458 | // eslint-disable-next-line @typescript-eslint/naming-convention
459 | 'Chat History': ['json']
460 | }
461 | };
462 |
463 | const fileUri = await vscode.window.showOpenDialog(options);
464 | if (fileUri && fileUri[0]) {
465 | try {
466 | const data = await fs.promises.readFile(fileUri[0].fsPath, 'utf8');
467 | const importedMessages = JSON.parse(data);
468 |
469 | messages = importedMessages.map((message: any) => {
470 | return {
471 | "role": message.role,
472 | "content": marked.marked(message.content)
473 | };
474 | });
475 | vscode.window.showInformationMessage('Messages imported successfully!');
476 | return true;
477 | } catch (e: any) {
478 | if (e.code === 'ENOENT') {
479 | vscode.window.showErrorMessage('Failed to import messages: ' + e.message);
480 | } else {
481 | vscode.window.showErrorMessage('Failed to parse JSON: ' + e.message);
482 | }
483 | }
484 | }
485 |
486 | return false;
487 | }
488 |
489 | async function initApiProviderIfNeeded(context: vscode.ExtensionContext, force: boolean = false) {
490 | console.log("Initializing API provider...");
491 | if (apiProvider !== undefined && !force) {
492 | console.log("API provider already initialized.");
493 | return;
494 | }
495 |
496 | const model = vscode.workspace.getConfiguration("chatide").get("model")!;
497 | const providerType = providerFromModel(model.toString());
498 | if (!providerType) {
499 | vscode.window.showErrorMessage(
500 | 'No provider found in the ChatIDE settings. Please add your provider using the "Open ChatIDE Settings" command and restart the extension.'
501 | );
502 | return;
503 | }
504 |
505 | if (providerType === "anthropic") {
506 | console.log("Initializing Anthropic provider...");
507 | apiProvider = new AnthropicProvider(context);
508 | } else if (providerType === "openai") {
509 | console.log("Initializing OpenAI provider...");
510 | apiProvider = new OpenAIProvider(context);
511 | }
512 | else if (providerType === "custom") {
513 | console.log("Initializing custom provider...");
514 | apiProvider = new CustomLLMProvider(context, customServerUrl);
515 | } else {
516 | vscode.window.showErrorMessage(
517 | `Invalid provider "${providerType}" in the ChatIDE settings. Please use a valid provider and restart the extension.`
518 | );
519 | return;
520 | }
521 |
522 | try {
523 | console.log("Calling init()");
524 | await apiProvider.init();
525 | console.log("init() returned.");
526 | } catch (error: any) {
527 | vscode.window.showErrorMessage(`Error initializing provider: ${error.message}`);
528 | }
529 | }
530 |
531 | function navigateToHighlightedCode() {
532 | const editor = vscode.window.activeTextEditor;
533 | if (!editor) {
534 | return;
535 | }
536 |
537 | const selection = editor.selection;
538 | if (!selection.isEmpty) {
539 | editor.revealRange(selection, vscode.TextEditorRevealType.Default);
540 | }
541 | }
542 |
543 | function getTokenEstimateString(numCharacters: number): string {
544 | const estimate = Math.round(numCharacters / 4);
545 | if (estimate === 1) {
546 | return `~${estimate} token`;
547 | }
548 | return `~${estimate} tokens`;
549 | }
550 |
551 | function handleSelectionChange(event: vscode.TextEditorSelectionChangeEvent, chatIdePanel: vscode.WebviewPanel) {
552 | selectedCode = event.textEditor.document.getText(event.selections[0]);
553 | if (selectedCode && highlightedCodeAwareness) {
554 | const numCharacters = selectedCode.length;
555 | chatIdePanel.webview.postMessage({
556 | command: 'updateHighlightedCodeStatus',
557 | status: `${numCharacters} characters (${getTokenEstimateString(numCharacters)}) are highlighted. This code will be included in your message to the assistant.`,
558 | showButton: true
559 | });
560 | } else if (!highlightedCodeAwareness) {
561 | chatIdePanel.webview.postMessage({
562 | command: 'updateHighlightedCodeStatus',
563 | status: SELECTION_AWARENESS_OFF_COPY,
564 | showButton: false
565 | });
566 | } else {
567 | chatIdePanel.webview.postMessage({
568 | command: 'updateHighlightedCodeStatus',
569 | status: NO_SELECTION_COPY,
570 | showButton: false
571 | });
572 | }
573 | }
574 |
575 | function prepareSelectedCodeContext() {
576 | return `
577 | CONTEXT:
578 | =========================
579 | In my question I am referring to the following code:
580 | ${selectedCode}
581 | =========================\n`;
582 | }
583 |
584 | // This method is called when your extension is deactivated
585 | export function deactivate() {
586 | console.log("deactivate chatide");
587 | }
588 |
--------------------------------------------------------------------------------
/src/openai.ts:
--------------------------------------------------------------------------------
1 | import * as vscode from "vscode";
2 | import { Configuration, OpenAIApi } from "openai";
3 | import { APIProvider } from "./apiProvider";
4 |
5 | export interface OpenAIParams {
6 | model: string;
7 | messages: any[];
8 | // eslint-disable-next-line @typescript-eslint/naming-convention
9 | max_tokens: number;
10 | temperature: number;
11 | stream: boolean;
12 | }
13 |
14 | export class OpenAIProvider extends APIProvider {
15 | private openai: OpenAIApi | undefined;
16 | private context: vscode.ExtensionContext;
17 |
18 | constructor(context: vscode.ExtensionContext) {
19 | super();
20 | this.context = context;
21 | }
22 |
23 | async init() {
24 | let openAiApiKey = await this.context.secrets.get("chatide.openAiApiKey");
25 |
26 | if (!openAiApiKey) {
27 | openAiApiKey = await vscode.window.showInputBox({
28 | prompt: "Enter your OpenAI API key:",
29 | ignoreFocusOut: true,
30 | });
31 | if (openAiApiKey) {
32 | await this.context.secrets.store("chatide.openAiApiKey", openAiApiKey);
33 | } else {
34 | throw new Error("No API key provided. Please add your API key and restart the extension.");
35 | }
36 | }
37 |
38 | const configuration = new Configuration({
39 | apiKey: openAiApiKey,
40 | });
41 | this.openai = new OpenAIApi(configuration);
42 | }
43 |
44 | async completeStream(params: OpenAIParams, callbacks: any) {
45 | if (!this.openai) {
46 | throw new Error("OpenAI API is not initialized.");
47 | }
48 |
49 | try {
50 | const res: any = await this.openai.createChatCompletion(params, { responseType: 'stream' });
51 |
52 | let buffer = "";
53 | let gptMessage = "";
54 |
55 | for await (const chunk of res.data) {
56 |
57 | buffer += chunk.toString("utf8");
58 | const lines = buffer.split("\n");
59 | buffer = lines.pop() || "";
60 | for (const line of lines) {
61 | const message = line.replace(/^data: /, "");
62 | if (message === "[DONE]") {
63 | if (callbacks.onComplete) {
64 | callbacks.onComplete(gptMessage);
65 | }
66 | return;
67 | }
68 | if (message.length === 0) {
69 | continue;
70 | }
71 |
72 | try {
73 | const json = JSON.parse(message);
74 | const token = json.choices[0].delta.content;
75 | if (token) {
76 | gptMessage += token;
77 | if (callbacks.onUpdate) {
78 | callbacks.onUpdate(gptMessage);
79 | }
80 | }
81 | } catch (error) {
82 | console.error("Error parsing message:", error);
83 | continue;
84 | }
85 | }
86 | }
87 | } catch (error: any) {
88 | console.error("Error fetching stream:", error);
89 | throw error;
90 | }
91 | }
92 | }
--------------------------------------------------------------------------------
/src/test/runTest.ts:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 |
3 | import { runTests } from '@vscode/test-electron';
4 |
5 | async function main() {
6 | try {
7 | // The folder containing the Extension Manifest package.json
8 | // Passed to `--extensionDevelopmentPath`
9 | const extensionDevelopmentPath = path.resolve(__dirname, '../../');
10 |
11 | // The path to test runner
12 | // Passed to --extensionTestsPath
13 | const extensionTestsPath = path.resolve(__dirname, './suite/index');
14 |
15 | // Download VS Code, unzip it and run the integration test
16 | await runTests({ extensionDevelopmentPath, extensionTestsPath });
17 | } catch (err) {
18 | console.error('Failed to run tests', err);
19 | process.exit(1);
20 | }
21 | }
22 |
23 | main();
24 |
--------------------------------------------------------------------------------
/src/test/suite/extension.test.ts:
--------------------------------------------------------------------------------
1 | import * as assert from 'assert';
2 |
3 | // You can import and use all API from the 'vscode' module
4 | // as well as import your extension to test it
5 | import * as vscode from 'vscode';
6 | // import * as myExtension from '../../extension';
7 |
8 | suite('Extension Test Suite', () => {
9 | vscode.window.showInformationMessage('Start all tests.');
10 |
11 | test('Sample test', () => {
12 | assert.strictEqual(-1, [1, 2, 3].indexOf(5));
13 | assert.strictEqual(-1, [1, 2, 3].indexOf(0));
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/src/test/suite/index.ts:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import * as Mocha from 'mocha';
3 | import * as glob from 'glob';
4 |
5 | export function run(): Promise {
6 | // Create the mocha test
7 | const mocha = new Mocha({
8 | ui: 'tdd',
9 | color: true
10 | });
11 |
12 | const testsRoot = path.resolve(__dirname, '..');
13 |
14 | return new Promise((c, e) => {
15 | glob('**/**.test.js', { cwd: testsRoot }, (err, files) => {
16 | if (err) {
17 | return e(err);
18 | }
19 |
20 | // Add files to the test suite
21 | files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
22 |
23 | try {
24 | // Run the mocha test
25 | mocha.run(failures => {
26 | if (failures > 0) {
27 | e(new Error(`${failures} tests failed.`));
28 | } else {
29 | c();
30 | }
31 | });
32 | } catch (err) {
33 | console.error(err);
34 | e(err);
35 | }
36 | });
37 | });
38 | }
39 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import * as vscode from 'vscode';
2 |
3 | const supportedProviders = ["openai", "anthropic"];
4 |
5 | export function getProviderErrorMsg(provider: string, error: any) {
6 | const model = vscode.workspace.getConfiguration('chatide').get('model') || "No model configured";
7 | const epilogue = `
8 | \t • Invalid API Key : make sure you entered it correctly (Need help? See Setting your AI provider API key ).Invalid Model name : make sure you chose a supported model. Your current model is ${model.toString()} Model not compatible with your API Key : your key might not grant you access to this model.Chat history too long : models have a limited context window. Export your current history to file and start a new chat.open an issue on GitHub or contact us on Twitter .
14 | `;
15 |
16 | if (provider === "openai") {
17 | return `
18 | You're hitting an OpenAI API error. Error message : '${error}' .Common reasons for OpenAI errors :OpenAI might be having issues : check the OpenAI system status page .Exceeded quota : make sure your OpenAI billing is setup correctly.You're hitting an Anthropic API error. Error message : '${error}' .Common reasons for Anthropic errors :Anthropic might be having issues : check Anthropic's twitter page .Exceeded quota : make sure your Anthropic billing is setup correctly. 
5 |
6 | 
24 |
25 | 
30 |
31 |