ngskcloud
/
ai-chat-vscode
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(webview): 重构网页视图功能

Browse Source 
- 移除了 index.html 文件
- 优化了 MessageHandler.ts，增加了日志记录功能
- 更新了 script.js，改进了用户输入和请求取消的处理逻辑
- 调整了 style.css，移除了不必要的样式
- 更新了 webView.ts，同步了聊天输入表单的结构
refactor
钟良源 6 months ago
parent 84964a630d
commit 9e859d8a20
5 changed files with 25 additions and 110 deletions
Show Stats Download Patch File Download Diff File

83
media/webview/index.html
Unescape Escape View File

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${styleUri}" />
<link href="${highlightStyleUri}" rel="stylesheet" />
</head>
<body>
<div class="chat-container">
<!--对话区-->
<div id="chat-box"></div>
<!--文件选择-->
<div class="context-container">
<button id="select-context-btn" class="select-context-btn" title="选择上下文文件">+</button>
<div id="context-placeholder" class="context-placeholder">
<span class="placeholder-text">添加上下文</span>
</div>
<div id="context-tab" class="context-tab hidden">
<span id="context-file-name" class="file-name">添加上下文</span>
<button id="close-context-btn" class="close-btn" title="清除上下文">×</button>
</div>
</div>
<!-- 工作区文件列表 -->
<div class="workspace-container">
<h3>工作区变更</h3>
<div id="workspace-files" class="workspace-files">
<div class="no-changes">暂无文件变更</div>
</div>
</div>
<!-- 文件浏览器模态框 -->
<div id="file-browser-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>选择上下文文件</h3>
<span id="close-modal" class="close-modal">&times;</span>
</div>
<div class="modal-body">
<div class="file-search">
<input type="text" id="file-search-input" placeholder="搜索文件..." />
</div>
<div id="file-list" class="file-list">
<div class="loading">加载中...</div>
</div>
</div>
</div>
</div>
<!-- 代码差异模态框 -->
<div id="diff-modal" class="modal hidden">
<div class="modal-content diff-modal-content">
<div class="modal-header">
<h3>代码差异对比</h3>
<span id="close-diff-modal" class="close-modal">&times;</span>
</div>
<div class="modal-body">
<div id="diff-content" class="diff-content"></div>
<div class="diff-actions">
<button id="accept-changes-btn" class="diff-action-btn accept">接受变更</button>
<button id="reject-changes-btn" class="diff-action-btn reject">拒绝变更</button>
</div>
</div>
</div>
</div>
<!-- 聊天输入表单 -->
<form id="chat-form">
<input type="text" id="user-input" placeholder="输入你的问题..." required />
<button type="submit" id="send-btn">发送</button>
</form>
<div id="loading" class="hidden">AI 正在思考...</div>
</div>
<script src="${scriptUri}"></script>
<script src="${highlightScriptUri}"></script>
<script src="${markedScriptUri}"></script>
</body>
</html>

32
media/webview/script.js
Unescape Escape View File

@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
const userInput = document.getElementById('user-input');
const chatBox = document.getElementById('chat-box');
const loading = document.getElementById('loading');
const sendBtn = document.getElementById('send-btn'); // 获取发送按钮
const sendBtn = document.getElementById('send-btn');
// 初始化显示工作区容器
const workspaceContainer = document.querySelector('.workspace-container');
@ -22,23 +22,26 @@ document.addEventListener('DOMContentLoaded', () => {
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const text = userInput.value.trim();
// 如果输入为空，不执行任何操作
if (!text && !isRequestInProgress) return;
// 如果有请求正在进行，点击按钮将中断请求
if (isRequestInProgress) {
logToExtension("取消请求");
// 发送取消请求的消息到扩展
vscode.postMessage({
command: 'cancelRequest'
});
// 重置按钮状态
resetSendButton();
hideLoading();
return;
}
const text = userInput.value.trim();
if (!text) return;
// 发送消息并禁用按钮
// 发送消息
vscode.postMessage({
command: 'ask',
text,
@ -46,15 +49,14 @@ document.addEventListener('DOMContentLoaded', () => {
fileContentPath: contextFilePath // 添加文件路径
});
showLoading();
userInput.value = '';
// 切换按钮为停止按钮
isRequestInProgress = true;
if (sendBtn) {
sendBtn.textContent = '停止';
sendBtn.classList.add('stop-button');
}
showLoading();
userInput.value = '';
});
// 重置发送按钮为初始状态
@ -102,9 +104,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 渲染内容
if (isMarkdown(content)) {
console.log("content:", content);
msgDiv.innerHTML = marked.parse(content);
console.log("msgDiv.innerHTML:", msgDiv.innerHTML);
} else {
const div = document.createElement('div');
div.textContent = content;
@ -270,7 +270,9 @@ document.addEventListener('DOMContentLoaded', () => {
streamingMessageContent = '';
}
isRequestInProgress = false
// 重置发送按钮状态
resetSendButton();
// 保存消息到历史记录
currentSessionHistory.push({role: 'assistant', content: content});
@ -442,7 +444,6 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('message', (event) => {
const message = event.data;
console.log(message)
if (message.command === 'addMessage') {
addMessage(message.role, message.content, message.codeDiff);
} else if (message.command === 'startStream') {
@ -615,6 +616,13 @@ document.addEventListener('DOMContentLoaded', () => {
language: language
});
}
function logToExtension(...args) {
vscode.postMessage({
command: 'log',
data: args
});
}
// 简单的语言检测

9
media/webview/style.css
Unescape Escape View File

@ -501,12 +501,3 @@ code {
color: var(--vscode-descriptionForeground);
font-size: 12px;
}
.stop-button {
background-color: #f44336 !important;
color: white !important;
}
.stop-button:hover {
background-color: #d32f2f !important;
}

7
src/MessageHandler.ts
Unescape Escape View File

@ -63,6 +63,9 @@ export class MessageHandler {
case 'restoreState':
this.handleRestoreState(message);
break;
case 'log' :
console.log( ...message.data);
break;
}
}
@ -149,7 +152,6 @@ export class MessageHandler {
} catch (readError: any) {
// 检查是否是由于取消请求导致的中断
if (readError.name === 'AbortError' || readError.message.includes('cancel')) {
console.log('请求已被用户中断');
// 通知前端请求已中断
this.provider._postMessage({command: 'requestCancelled'});
// 重置状态但不抛出错误
@ -182,7 +184,6 @@ export class MessageHandler {
}
}
console.log("allCodeDiffs:",allCodeDiffs)
// 通知前端流传输完成
this.provider._postMessage({
@ -220,7 +221,6 @@ export class MessageHandler {
} catch (error: any) {
// 检查是否是由于取消请求导致的中断
if (error.name === 'AbortError' || error.message.includes('cancel') || error.message.includes('中断')) {
console.log('请求已被用户中断');
this.provider._postMessage({command: 'requestCancelled'});
} else {
this.provider._postMessage({command: 'addMessage', role: 'ai', content: '调用失败：' + error.message});
@ -475,7 +475,6 @@ export class MessageHandler {
// 添加处理取消请求的方法
private async handleCancelRequest() {
console.log('收到取消请求');
if (this.currentReader) {
try {
await this.currentReader.cancel();

4
src/utils/webView.ts
Unescape Escape View File

@ -75,8 +75,8 @@ export function getWebviewContent(styleUri: vscode.Uri, scriptUri: vscode.Uri,hi
<!-- 聊天输入表单 -->
<form id="chat-form">
<input type="text" id="user-input" placeholder="输入你的问题..." required />
<button type="submit">发送</button>
<input type="text" id="user-input" placeholder="输入你的问题..."/>
<button type="submit" id="send-btn">发送</button>
</form>
<div id="loading" class="hidden">AI 正在思考...</div>
</div>

Write Preview
Loading…
Cancel
Save