Skip to content

Commit

Permalink
modified: examples/gemini/node/pipet-code-agent/src/extension.ts
Browse files Browse the repository at this point in the history 
modified:   examples/gemini/node/pipet-code-agent/src/review.ts
  • Loading branch information
@JasonQ1n
JasonQ1n committed Apr 5, 2024
1 parent 285b78a commit 5c478af
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 133 deletions.
214 changes: 105 additions & 109 deletions examples/gemini/node/pipet-code-agent/src/extension.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,128 +60,124 @@ class ChatViewProvider implements vscode.WebviewViewProvider {

webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);

webviewView.webview.onDidReceiveMessage((message) => {
webviewView.webview.onDidReceiveMessage(async (message) => {
// 处理来自 Webview 的消息
if (message.command === "sendMessage" && message.text) {
// 在 Webview 中显示接收到的消息
webviewView.webview.postMessage({
command: "receiveMessage",
text: message.text,
});
const comments = await generateReview();
if (comments) {
webviewView.webview.postMessage({
command: "receiveMessage",
text: comments,
});
} else {
webviewView.webview.postMessage({
command: "receiveMessage",
text: "请求失败。",
});
}
}
});
}

private _getHtmlForWebview(webview: vscode.Webview) {
// Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
const scriptUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "main.js")
);

// Do the same for the stylesheet.
const styleResetUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "reset.css")
);
const styleVSCodeUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vscode.css")
);
const styleMainUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "main.css")
);

return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemini Chat</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh; /* 使内容占据整个视口高度 */
}
main {
flex: 1; /* 使 main 元素占据剩余的垂直空间 */
padding: 20px; /* 添加内边距 */
}
#dialog {
overflow-y: auto; /* 当内容过多时，显示滚动条 */
border-radius: 5px; /* 添加边框圆角 */
padding: 10px; /* 添加内边距 */
margin-bottom: 10px; /* 添加底部外边距 */
}
footer {
background-color: var(--vscode-tab-activeBackground); /* 使用 VS Code 的标签页激活状态的背景色 */
border-top: 1px solid var(--vscode-tab-activeBackground); /* 使用 VS Code 的标签页激活状态的背景色作为顶部边框颜色 */
}
input[type="text"],
button {
background-color: var(--vscode-input-background); /* 使用 VS Code 的输入框背景色 */
color: var(--vscode-input-foreground); /* 使用 VS Code 的输入框前景色 */
border: 1px solid var(--vscode-input-foreground); /* 使用 VS Code 的输入框前景色作为边框颜色 */
}
.message-container {
background-color: var(--vscode-editor-background); /* 使用 VS Code 的编辑器背景色 */
color: var(--vscode-editor-foreground); /* 使用 VS Code 的编辑器前景色 */
border: 1px solid var(--vscode-editor-foreground); /* 使用 VS Code 的编辑器前景色作为边框颜色 */
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<main>
<h1>Gemini Chat</h1>
<div id="dialog"></div>
</main>
<footer>
<input type="text" id="userInput" placeholder="请输入您的消息">
<button id="sendMessage">发送</button>
</footer>
<script>
const vscode = acquireVsCodeApi();
// 获取 UI 元素
const dialog = document.getElementById('dialog');
const userInput = document.getElementById('userInput');
const sendMessageButton = document.getElementById('sendMessage');
// 显示接收到的消息
function showMessage(text) {
const messageContainer = document.createElement('div'); // 创建一个新的 div 元素作为消息容器
messageContainer.classList.add('message-container'); // 添加 CSS 类以进行样式设置
messageContainer.innerHTML = '<p><strong>User:</strong> ' + text + '</p>'; // 设置消息内容
dialog.appendChild(messageContainer); // 将消息容器添加到对话框中
}
// 当发送按钮被点击时
sendMessageButton.addEventListener('click', () => {
const userMessage = userInput.value;
// 将用户消息发送给插件
vscode.postMessage({ command: 'sendMessage', text: userMessage });
userInput.value = ''; // 清空输入框
});
// 接收来自插件的消息
window.addEventListener('message', event => {
const message = event.data;
if (message.command === 'receiveMessage') {
// 将收到的消息显示在对话框中
showMessage(message.text);
}
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemini Chat</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh; /* 使内容占据整个视口高度 */
}
main {
flex: 1; /* 使 main 元素占据剩余的垂直空间 */
padding: 20px; /* 添加内边距 */
}
#dialog {
overflow-y: auto; /* 当内容过多时，显示滚动条 */
border-radius: 5px; /* 添加边框圆角 */
padding: 10px; /* 添加内边距 */
margin-bottom: 10px; /* 添加底部外边距 */
}
footer {
background-color: var(--vscode-tab-activeBackground); /* 使用 VS Code 的标签页激活状态的背景色 */
border-top: 1px solid var(--vscode-tab-activeBackground); /* 使用 VS Code 的标签页激活状态的背景色作为顶部边框颜色 */
}
input[type="text"],
button {
background-color: var(--vscode-input-background); /* 使用 VS Code 的输入框背景色 */
color: var(--vscode-input-foreground); /* 使用 VS Code 的输入框前景色 */
border: 1px solid var(--vscode-input-foreground); /* 使用 VS Code 的输入框前景色作为边框颜色 */
}
.message-container {
background-color: var(--vscode-editor-background); /* 使用 VS Code 的编辑器背景色 */
color: var(--vscode-editor-foreground); /* 使用 VS Code 的编辑器前景色 */
border: 1px solid var(--vscode-editor-foreground); /* 使用 VS Code 的编辑器前景色作为边框颜色 */
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<main>
<h1>Gemini Chat</h1>
<div id="dialog"></div>
</main>
<footer>
<input type="text" id="userInput" placeholder="请输入您的消息">
<button id="sendMessage">发送</button>
</footer>
<script>
const vscode = acquireVsCodeApi();
// 获取 UI 元素
const dialog = document.getElementById('dialog');
const userInput = document.getElementById('userInput');
const sendMessageButton = document.getElementById('sendMessage');
// 显示接收到的消息
function showMessage(text) {
const messageContainer = document.createElement('div'); // 创建一个新的 div 元素作为消息容器
messageContainer.classList.add('message-container'); // 添加 CSS 类以进行样式设置
messageContainer.innerHTML = '<p><strong>User:</strong> ' + text + '</p>'; // 设置消息内容
dialog.appendChild(messageContainer); // 将消息容器添加到对话框中
}
// 当发送按钮被点击时
sendMessageButton.addEventListener('click', () => {
const userMessage = userInput.value;
// 将用户消息发送给插件
vscode.postMessage({ command: 'sendMessage', text: userMessage });
userInput.value = ''; // 清空输入框
});
// 接收来自插件的消息
window.addEventListener('message', event => {
const message = event.data;
if (message.command === 'receiveMessage') {
// 将收到的消息显示在对话框中
showMessage(message.text);
}
});
</script>
</body>
</html>
`;
Expand Down
56 changes: 32 additions & 24 deletions examples/gemini/node/pipet-code-agent/src/review.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const PROMPT = `
Reviewing code involves finding bugs and increasing code quality. Examples of bugs are syntax
errors or typos, out of memory errors, and boundary value errors. Increasing code quality
entails reducing complexity of code, eliminating duplicate code, and ensuring other developers
are able to understand the code.
are able to understand the code.
使用中文回答：
${CODE_LABEL}
for i in x:
pint(f"Iteration {i} provides this {x**2}.")
Expand All @@ -45,23 +47,29 @@ There are duplicate lines of code in this control structure.
`;

export async function generateReview() {
vscode.window.showInformationMessage('Generating code review...');
const modelName = vscode.workspace.getConfiguration().get<string>('google.gemini.textModel', 'gemini-1.0-pro');
vscode.window.showInformationMessage("Generating code review...");
const modelName = vscode.workspace
.getConfiguration()
.get<string>("google.gemini.textModel", "gemini-1.0-pro");

// Get API Key from local user configuration
const apiKey = vscode.workspace.getConfiguration().get<string>('google.gemini.apiKey');
const apiKey = vscode.workspace
.getConfiguration()
.get<string>("google.gemini.apiKey");
if (!apiKey) {
vscode.window.showErrorMessage('API key not configured. Check your settings.');
vscode.window.showErrorMessage(
"API key not configured. Check your settings."
);
return;
}

const genai = new GoogleGenerativeAI(apiKey);
const model = genai.getGenerativeModel({model: modelName});
const model = genai.getGenerativeModel({ model: modelName });

// Text selection
const editor = vscode.window.activeTextEditor;
if (!editor) {
console.debug('Abandon: no open text editor.');
console.debug("Abandon: no open text editor.");
return;
}

Expand All @@ -77,22 +85,22 @@ export async function generateReview() {

const result = await model.generateContent(fullPrompt);
const response = await result.response;
const comment = response.text();

// Insert before selection
editor.edit((editBuilder) => {
// Copy the indent from the first line of the selection.
const trimmed = selectedCode.trimStart();
const padding = selectedCode.substring(0, selectedCode.length - trimmed.length);
const comment = response.text();
return comment;
// // Insert before selection
// editor.edit((editBuilder) => {
// // Copy the indent from the first line of the selection.
// const trimmed = selectedCode.trimStart();
// const padding = selectedCode.substring(0, selectedCode.length - trimmed.length);

const commentPrefix = getCommentprefixes(editor.document.languageId);
let pyComment = comment.split('\n').map((l: string) => `${padding}${commentPrefix}${l}`).join('\n');
if (pyComment.search(/\n$/) === -1) {
// Add a final newline if necessary.
pyComment += "\n";
}
let reviewIntro = padding + commentPrefix + "Code review: (generated)\n";
editBuilder.insert(selection.start, reviewIntro);
editBuilder.insert(selection.start, pyComment);
});
// const commentPrefix = getCommentprefixes(editor.document.languageId);
// let pyComment = comment.split('\n').map((l: string) => `${padding}${commentPrefix}${l}`).join('\n');
// if (pyComment.search(/\n$/) === -1) {
// // Add a final newline if necessary.
// pyComment += "\n";
// }
// let reviewIntro = padding + commentPrefix + "Code review: (generated)\n";
// editBuilder.insert(selection.start, reviewIntro);
// editBuilder.insert(selection.start, pyComment);
// });
}

0 comments on commit 5c478af

Please sign in to comment.