mirror of
https://github.com/pacnpal/Roo-Code.git
synced 2025-12-20 12:21:13 -05:00
Remove previous webview since we use react app now
This commit is contained in:
Saoud Rizwan
@@ -1,112 +0,0 @@
|
||||
/*
|
||||
Example of vscode-webview-ui-toolkit
|
||||
https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/docs/getting-started.md
|
||||
https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/docs/components.md
|
||||
*/
|
||||
|
||||
|
||||
import * as vscode from "vscode"
|
||||
import { getUri } from "./utilities/getUri"
|
||||
import { getNonce } from "./utilities/getNonce"
|
||||
|
||||
export class HelloWorldPanel {
|
||||
/*
|
||||
- public can be access outside of class
|
||||
- private can only be accessed by class itself (_ is a convention not required)
|
||||
- readonly means var can only be set during declaration or in constructor
|
||||
- static means var is shared among all instances of class
|
||||
*/
|
||||
public static currentPanel: HelloWorldPanel | undefined
|
||||
private readonly panel: vscode.WebviewPanel
|
||||
private disposables: vscode.Disposable[] = []
|
||||
|
||||
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
|
||||
this.panel = panel
|
||||
|
||||
// the method can be triggered when the webview panel is closed
|
||||
this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
|
||||
|
||||
this.panel.webview.html = this.getWebviewContent(this.panel.webview, extensionUri)
|
||||
this.setWebviewMessageListener(this.panel.webview);
|
||||
}
|
||||
|
||||
// This will be responsible for rendering the current webview panel – if it exists – or creating and displaying a new webview panel.
|
||||
public static render(extensionUri: vscode.Uri) {
|
||||
if (HelloWorldPanel.currentPanel) {
|
||||
HelloWorldPanel.currentPanel.panel.reveal(vscode.ViewColumn.One)
|
||||
} else {
|
||||
const panel = vscode.window.createWebviewPanel("helloworld", "Hello World", vscode.ViewColumn.One, {
|
||||
// Enable javascript in the webview
|
||||
enableScripts: true,
|
||||
// Restrict the webview to only load resources from the `out` directory
|
||||
localResourceRoots: [vscode.Uri.joinPath(extensionUri, "dist")],
|
||||
})
|
||||
|
||||
HelloWorldPanel.currentPanel = new HelloWorldPanel(panel, extensionUri)
|
||||
}
|
||||
}
|
||||
|
||||
// webview resources are cleaned up when the webview panel is closed by the user or closed programmatically.
|
||||
public dispose() {
|
||||
HelloWorldPanel.currentPanel = undefined
|
||||
|
||||
this.panel.dispose()
|
||||
|
||||
while (this.disposables.length) {
|
||||
const disposable = this.disposables.pop()
|
||||
if (disposable) {
|
||||
disposable.dispose()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// where the UI of the extension will be defined. This is also where references to CSS and JavaScript files are created and inserted into the webview HTML.
|
||||
private getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri) {
|
||||
const webviewUri = getUri(webview, extensionUri, ["dist", "webview.js"])
|
||||
/*
|
||||
content security policy of your webview to only allow scripts that have a specific nonce
|
||||
create a content security policy meta tag so that only loading scripts with a nonce is allowed
|
||||
As your extension grows you will likely want to add custom styles, fonts, and/or images to your webview. If you do, you will need to update the content security policy meta tag to explicity allow for these resources. E.g.
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
|
||||
|
||||
|
||||
in meta tag we add nonce attribute: A cryptographic nonce (only used once) to allow scripts. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
|
||||
*/
|
||||
const nonce = getNonce()
|
||||
|
||||
return /*html*/ `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}';">
|
||||
<title>Hello World!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
<vscode-button id="howdy">Howdy!</vscode-button>
|
||||
<script type="module" nonce="${nonce}" src="${webviewUri}"></script>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
|
||||
// responsible for setting up an event listener that listens for messages passed from the webview context and executes code based on the received message.
|
||||
private setWebviewMessageListener(webview: vscode.Webview) {
|
||||
webview.onDidReceiveMessage(
|
||||
(message: any) => {
|
||||
const command = message.command
|
||||
const text = message.text
|
||||
|
||||
switch (command) {
|
||||
case "hello":
|
||||
vscode.window.showInformationMessage(text)
|
||||
return
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
this.disposables
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
// The module 'vscode' contains the VS Code extensibility API
|
||||
// Import the module and reference it with the alias vscode in your code below
|
||||
import * as vscode from "vscode"
|
||||
import { HelloWorldPanel } from "./HelloWorldPanel"
|
||||
import { SidebarProvider } from "./providers/SidebarProvider"
|
||||
|
||||
/*
|
||||
@@ -28,15 +27,8 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
// // Display a message box to the user
|
||||
// vscode.window.showInformationMessage("Hello World from claude-dev!")
|
||||
// })
|
||||
|
||||
// context.subscriptions.push(disposable)
|
||||
|
||||
// const helloCommand = vscode.commands.registerCommand("claude-dev.helloWorld", () => {
|
||||
// HelloWorldPanel.render(context.extensionUri)
|
||||
// })
|
||||
|
||||
// context.subscriptions.push(helloCommand)
|
||||
|
||||
const provider = new SidebarProvider(context.extensionUri)
|
||||
|
||||
context.subscriptions.push(vscode.window.registerWebviewViewProvider(SidebarProvider.viewType, provider))
|
||||
|
||||
@@ -65,6 +65,15 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
|
||||
// const stylesheetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.css"))
|
||||
|
||||
// Use a nonce to only allow a specific script to be run.
|
||||
/*
|
||||
content security policy of your webview to only allow scripts that have a specific nonce
|
||||
create a content security policy meta tag so that only loading scripts with a nonce is allowed
|
||||
As your extension grows you will likely want to add custom styles, fonts, and/or images to your webview. If you do, you will need to update the content security policy meta tag to explicity allow for these resources. E.g.
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
|
||||
|
||||
|
||||
in meta tag we add nonce attribute: A cryptographic nonce (only used once) to allow scripts. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
|
||||
*/
|
||||
const nonce = getNonce()
|
||||
|
||||
// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
|
||||
|
||||
@@ -1,177 +0,0 @@
|
||||
|
||||
/*
|
||||
provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeCheckbox())
|
||||
const vscode = acquireVsCodeApi();
|
||||
window.addEventListener("load", main);
|
||||
function main() {
|
||||
// To get improved type annotations/IntelliSense the associated class for
|
||||
// a given toolkit component can be imported and used to type cast a reference
|
||||
// to the element (i.e. the `as Button` syntax)
|
||||
const howdyButton = document.getElementById("howdy") as Button;
|
||||
howdyButton?.addEventListener("click", handleHowdyClick);
|
||||
}
|
||||
function handleHowdyClick() {
|
||||
vscode.postMessage({
|
||||
command: "hello",
|
||||
text: "Hey there partner! 🤠",
|
||||
});
|
||||
}
|
||||
|
||||
https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/webview/main.ts
|
||||
|
||||
*/
|
||||
|
||||
|
||||
import {
|
||||
provideVSCodeDesignSystem,
|
||||
Button,
|
||||
Dropdown,
|
||||
ProgressRing,
|
||||
TextField,
|
||||
vsCodeButton,
|
||||
vsCodeDropdown,
|
||||
vsCodeOption,
|
||||
vsCodeTextField,
|
||||
vsCodeProgressRing,
|
||||
} from "@vscode/webview-ui-toolkit";
|
||||
|
||||
// In order to use the Webview UI Toolkit web components they
|
||||
// must be registered with the browser (i.e. webview) using the
|
||||
// syntax below.
|
||||
provideVSCodeDesignSystem().register(
|
||||
vsCodeButton(),
|
||||
vsCodeDropdown(),
|
||||
vsCodeOption(),
|
||||
vsCodeProgressRing(),
|
||||
vsCodeTextField()
|
||||
);
|
||||
|
||||
// Get access to the VS Code API from within the webview context
|
||||
const vscode = acquireVsCodeApi();
|
||||
|
||||
// Just like a regular webpage we need to wait for the webview
|
||||
// DOM to load before we can reference any of the HTML elements
|
||||
// or toolkit components
|
||||
window.addEventListener("load", main);
|
||||
|
||||
// Main function that gets executed once the webview DOM loads
|
||||
function main() {
|
||||
// To get improved type annotations/IntelliSense the associated class for
|
||||
// a given toolkit component can be imported and used to type cast a reference
|
||||
// to the element (i.e. the `as Button` syntax)
|
||||
const checkWeatherButton = document.getElementById("check-weather-button") as Button;
|
||||
checkWeatherButton.addEventListener("click", checkWeather);
|
||||
|
||||
setVSCodeMessageListener();
|
||||
}
|
||||
|
||||
function checkWeather() {
|
||||
const location = document.getElementById("location") as TextField;
|
||||
const unit = document.getElementById("unit") as Dropdown;
|
||||
|
||||
// Passes a message back to the extension context with the location that
|
||||
// should be searched for and the degree unit (F or C) that should be returned
|
||||
vscode.postMessage({
|
||||
command: "weather",
|
||||
location: location.value,
|
||||
unit: unit.value,
|
||||
});
|
||||
|
||||
displayLoadingState();
|
||||
}
|
||||
|
||||
// Sets up an event listener to listen for messages passed from the extension context
|
||||
// and executes code based on the message that is recieved
|
||||
function setVSCodeMessageListener() {
|
||||
window.addEventListener("message", (event) => {
|
||||
const command = event.data.command;
|
||||
|
||||
// switch (command) {
|
||||
// case "weather":
|
||||
// const weatherData = JSON.parse(event.data.payload);
|
||||
// displayWeatherData(weatherData);
|
||||
// break;
|
||||
// case "error":
|
||||
// displayError(event.data.message);
|
||||
// break;
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
function displayLoadingState() {
|
||||
const loading = document.getElementById("loading") as ProgressRing;
|
||||
const icon = document.getElementById("icon");
|
||||
const summary = document.getElementById("summary");
|
||||
if (loading && icon && summary) {
|
||||
loading.classList.remove("hidden");
|
||||
icon.classList.add("hidden");
|
||||
summary.textContent = "Getting weather...";
|
||||
}
|
||||
}
|
||||
|
||||
// function displayWeatherData(weatherData) {
|
||||
// const loading = document.getElementById("loading") as ProgressRing;
|
||||
// const icon = document.getElementById("icon");
|
||||
// const summary = document.getElementById("summary");
|
||||
// if (loading && icon && summary) {
|
||||
// loading.classList.add("hidden");
|
||||
// icon.classList.remove("hidden");
|
||||
// icon.textContent = getWeatherIcon(weatherData);
|
||||
// summary.textContent = getWeatherSummary(weatherData);
|
||||
// }
|
||||
// }
|
||||
|
||||
// function displayError(errorMsg) {
|
||||
// const loading = document.getElementById("loading") as ProgressRing;
|
||||
// const icon = document.getElementById("icon");
|
||||
// const summary = document.getElementById("summary");
|
||||
// if (loading && icon && summary) {
|
||||
// loading.classList.add("hidden");
|
||||
// icon.classList.add("hidden");
|
||||
// summary.textContent = errorMsg;
|
||||
// }
|
||||
// }
|
||||
|
||||
// function getWeatherSummary(weatherData) {
|
||||
// const skyText = weatherData.current.skytext;
|
||||
// const temperature = weatherData.current.temperature;
|
||||
// const degreeType = weatherData.location.degreetype;
|
||||
|
||||
// return `${skyText}, ${temperature}${degreeType}`;
|
||||
// }
|
||||
|
||||
// function getWeatherIcon(weatherData) {
|
||||
// const skyText = weatherData.current.skytext.toLowerCase();
|
||||
// let icon = "";
|
||||
|
||||
// switch (skyText) {
|
||||
// case "sunny":
|
||||
// icon = "☀️";
|
||||
// break;
|
||||
// case "mostly sunny":
|
||||
// icon = "🌤";
|
||||
// break;
|
||||
// case "partly sunny":
|
||||
// icon = "🌥";
|
||||
// break;
|
||||
// case "clear":
|
||||
// icon = "☀️";
|
||||
// break;
|
||||
// case "fair":
|
||||
// icon = "🌥";
|
||||
// break;
|
||||
// case "mostly cloudy":
|
||||
// icon = "☁️";
|
||||
// break;
|
||||
// case "cloudy":
|
||||
// icon = "☁️";
|
||||
// break;
|
||||
// case "rain showers":
|
||||
// icon = "🌦";
|
||||
// break;
|
||||
// default:
|
||||
// icon = "✨";
|
||||
// }
|
||||
|
||||
// return icon;
|
||||
// }
|
||||
@@ -1,45 +0,0 @@
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#location {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#unit {
|
||||
min-width: 30px;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#check-weather-button {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#results-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background-color: var(--vscode-input-background);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#icon {
|
||||
font-size: 3em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user