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 userInput = document.getElementById('user-input');
const chatBox = document.getElementById('chat-box'); const chatBox = document.getElementById('chat-box');
const loading = document.getElementById('loading'); const loading = document.getElementById('loading');
const sendBtn = document.getElementById('send-btn'); // 获取发送按钮 const sendBtn = document.getElementById('send-btn');
// 初始化显示工作区容器 // 初始化显示工作区容器
const workspaceContainer = document.querySelector('.workspace-container'); const workspaceContainer = document.querySelector('.workspace-container');
@ -22,23 +22,26 @@ document.addEventListener('DOMContentLoaded', () => {
chatForm.addEventListener('submit', async (e) => { chatForm.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const text = userInput.value.trim();
// 如果输入为空，不执行任何操作
if (!text && !isRequestInProgress) return;
// 如果有请求正在进行，点击按钮将中断请求 // 如果有请求正在进行，点击按钮将中断请求
if (isRequestInProgress) { if (isRequestInProgress) {
logToExtension("取消请求");
// 发送取消请求的消息到扩展 // 发送取消请求的消息到扩展
vscode.postMessage({ vscode.postMessage({
command: 'cancelRequest' command: 'cancelRequest'
}); });
// 重置按钮状态
resetSendButton(); resetSendButton();
hideLoading(); hideLoading();
return; return;
} }
const text = userInput.value.trim(); // 发送消息
if (!text) return;
// 发送消息并禁用按钮
vscode.postMessage({ vscode.postMessage({
command: 'ask', command: 'ask',
text, text,
@ -46,15 +49,14 @@ document.addEventListener('DOMContentLoaded', () => {
fileContentPath: contextFilePath // 添加文件路径 fileContentPath: contextFilePath // 添加文件路径
}); });
showLoading();
userInput.value = '';
// 切换按钮为停止按钮 // 切换按钮为停止按钮
isRequestInProgress = true; isRequestInProgress = true;
if (sendBtn) { if (sendBtn) {
sendBtn.textContent = '停止'; sendBtn.textContent = '停止';
sendBtn.classList.add('stop-button'); sendBtn.classList.add('stop-button');
} }
showLoading();
userInput.value = '';
}); });
// 重置发送按钮为初始状态 // 重置发送按钮为初始状态
@ -102,9 +104,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 渲染内容 // 渲染内容
if (isMarkdown(content)) { if (isMarkdown(content)) {
console.log("content:", content);
msgDiv.innerHTML = marked.parse(content); msgDiv.innerHTML = marked.parse(content);
console.log("msgDiv.innerHTML:", msgDiv.innerHTML);
} else { } else {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = content; div.textContent = content;
@ -270,7 +270,9 @@ document.addEventListener('DOMContentLoaded', () => {
streamingMessageContent = ''; streamingMessageContent = '';
} }
isRequestInProgress = false // 重置发送按钮状态
resetSendButton();
// 保存消息到历史记录 // 保存消息到历史记录
currentSessionHistory.push({role: 'assistant', content: content}); currentSessionHistory.push({role: 'assistant', content: content});
@ -442,7 +444,6 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('message', (event) => { window.addEventListener('message', (event) => {
const message = event.data; const message = event.data;
console.log(message)
if (message.command === 'addMessage') { if (message.command === 'addMessage') {
addMessage(message.role, message.content, message.codeDiff); addMessage(message.role, message.content, message.codeDiff);
} else if (message.command === 'startStream') { } else if (message.command === 'startStream') {
@ -615,6 +616,13 @@ document.addEventListener('DOMContentLoaded', () => {
language: language 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); color: var(--vscode-descriptionForeground);
font-size: 12px; 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': case 'restoreState':
this.handleRestoreState(message); this.handleRestoreState(message);
break; break;
case 'log' :
console.log( ...message.data);
break;
} }
} }
@ -149,7 +152,6 @@ export class MessageHandler {
} catch (readError: any) { } catch (readError: any) {
// 检查是否是由于取消请求导致的中断 // 检查是否是由于取消请求导致的中断
if (readError.name === 'AbortError' || readError.message.includes('cancel')) { if (readError.name === 'AbortError' || readError.message.includes('cancel')) {
console.log('请求已被用户中断');
// 通知前端请求已中断 // 通知前端请求已中断
this.provider._postMessage({command: 'requestCancelled'}); this.provider._postMessage({command: 'requestCancelled'});
// 重置状态但不抛出错误 // 重置状态但不抛出错误
@ -182,7 +184,6 @@ export class MessageHandler {
} }
} }
console.log("allCodeDiffs:",allCodeDiffs)
// 通知前端流传输完成 // 通知前端流传输完成
this.provider._postMessage({ this.provider._postMessage({
@ -220,7 +221,6 @@ export class MessageHandler {
} catch (error: any) { } catch (error: any) {
// 检查是否是由于取消请求导致的中断 // 检查是否是由于取消请求导致的中断
if (error.name === 'AbortError' || error.message.includes('cancel') || error.message.includes('中断')) { if (error.name === 'AbortError' || error.message.includes('cancel') || error.message.includes('中断')) {
console.log('请求已被用户中断');
this.provider._postMessage({command: 'requestCancelled'}); this.provider._postMessage({command: 'requestCancelled'});
} else { } else {
this.provider._postMessage({command: 'addMessage', role: 'ai', content: '调用失败：' + error.message}); this.provider._postMessage({command: 'addMessage', role: 'ai', content: '调用失败：' + error.message});
@ -475,7 +475,6 @@ export class MessageHandler {
// 添加处理取消请求的方法 // 添加处理取消请求的方法
private async handleCancelRequest() { private async handleCancelRequest() {
console.log('收到取消请求');
if (this.currentReader) { if (this.currentReader) {
try { try {
await this.currentReader.cancel(); 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"> <form id="chat-form">
<input type="text" id="user-input" placeholder="输入你的问题..." required /> <input type="text" id="user-input" placeholder="输入你的问题..."/>
<button type="submit">发送</button> <button type="submit" id="send-btn">发送</button>
</form> </form>
<div id="loading" class="hidden">AI 正在思考...</div> <div id="loading" class="hidden">AI 正在思考...</div>
</div> </div>

Write Preview
Loading…
Cancel
Save