fix: 修复AI询问时选项点击后选中状态丢失的问题
- 添加 answeredQuestions Map 存储已回答问题的状态 - 在重新渲染时恢复选中状态和 answered 类 - 已回答的问题自动隐藏输入框并禁用点击事件 - 确保用户选择在页面更新时保持显示
This commit is contained in:
Roe-xin
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@ -9,5 +9,7 @@
|
||||
"dist": true // set this to false to include "dist" folder in search results
|
||||
},
|
||||
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
|
||||
"typescript.tsc.autoDetect": "off"
|
||||
"typescript.tsc.autoDetect": "off",
|
||||
// IC Coder 后端服务地址
|
||||
"icCoder.backendUrl": "http://192.168.1.108:2233"
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
"properties": {
|
||||
"icCoder.backendUrl": {
|
||||
"type": "string",
|
||||
"default": "http://localhost:2233",
|
||||
"default": "http://192.168.1.108:2233",
|
||||
"description": "后端服务地址"
|
||||
},
|
||||
"icCoder.timeout": {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* 配置管理
|
||||
* 从 VSCode 设置读取配置项
|
||||
*/
|
||||
import * as vscode from 'vscode';
|
||||
import * as vscode from "vscode";
|
||||
|
||||
/** 配置项接口 */
|
||||
export interface IccoderConfig {
|
||||
@ -16,21 +16,21 @@ export interface IccoderConfig {
|
||||
|
||||
/** 默认配置 */
|
||||
const DEFAULT_CONFIG: IccoderConfig = {
|
||||
backendUrl: 'http://localhost:8080',
|
||||
backendUrl: "http://localhost:8080",
|
||||
timeout: 60000,
|
||||
userId: 'default-user'
|
||||
userId: "default-user",
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取配置项
|
||||
*/
|
||||
export function getConfig(): IccoderConfig {
|
||||
const config = vscode.workspace.getConfiguration('icCoder');
|
||||
const config = vscode.workspace.getConfiguration("icCoder");
|
||||
|
||||
return {
|
||||
backendUrl: config.get<string>('backendUrl', DEFAULT_CONFIG.backendUrl),
|
||||
timeout: config.get<number>('timeout', DEFAULT_CONFIG.timeout),
|
||||
userId: config.get<string>('userId', DEFAULT_CONFIG.userId)
|
||||
backendUrl: config.get<string>("backendUrl", DEFAULT_CONFIG.backendUrl),
|
||||
timeout: config.get<number>("timeout", DEFAULT_CONFIG.timeout),
|
||||
userId: config.get<string>("userId", DEFAULT_CONFIG.userId),
|
||||
};
|
||||
}
|
||||
|
||||
@ -40,7 +40,9 @@ export function getConfig(): IccoderConfig {
|
||||
export function getApiUrl(path: string): string {
|
||||
const { backendUrl } = getConfig();
|
||||
// 确保 URL 格式正确
|
||||
const baseUrl = backendUrl.endsWith('/') ? backendUrl.slice(0, -1) : backendUrl;
|
||||
const apiPath = path.startsWith('/') ? path : `/${path}`;
|
||||
const baseUrl = backendUrl.endsWith("/")
|
||||
? backendUrl.slice(0, -1)
|
||||
: backendUrl;
|
||||
const apiPath = path.startsWith("/") ? path : `/${path}`;
|
||||
return `${baseUrl}${apiPath}`;
|
||||
}
|
||||
|
||||
@ -37,6 +37,8 @@ export interface DialogCallbacks {
|
||||
onToolError?: (toolName: string, error: string) => void;
|
||||
/** 显示问题（ask_user） */
|
||||
onQuestion?: (askId: string, question: string, options: string[]) => void;
|
||||
/** 实时更新段落（流式过程中） */
|
||||
onSegmentUpdate?: (segments: MessageSegment[]) => void;
|
||||
/** 对话完成，返回所有段落 */
|
||||
onComplete?: (segments: MessageSegment[]) => void;
|
||||
/** 错误 */
|
||||
@ -155,6 +157,8 @@ export class DialogSession {
|
||||
this.appendText(data.text);
|
||||
console.log('[DialogSession] onTextDelta, 累积文本长度:', this.accumulatedText.length);
|
||||
callbacks.onText?.(this.accumulatedText, true);
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onToolCall: async (data: ToolCallRequest) => {
|
||||
@ -166,16 +170,22 @@ export class DialogSession {
|
||||
console.log('[DialogSession] onToolCall: 跳过重复的工具段落:', toolName);
|
||||
} else {
|
||||
this.addToolSegment(toolName, 'running');
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
}
|
||||
// 注意：不在这里调用 callbacks.onToolStart，避免与 onToolStart 事件重复
|
||||
try {
|
||||
await executeToolCall(data, this.toolContext);
|
||||
this.updateToolSegment(toolName, 'success', '执行完成');
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
// 也不调用 callbacks.onToolComplete，避免重复
|
||||
} catch (error) {
|
||||
const errorMsg = error instanceof Error ? error.message : '未知错误';
|
||||
this.updateToolSegment(toolName, 'error', errorMsg);
|
||||
callbacks.onToolError?.(toolName, errorMsg);
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
}
|
||||
},
|
||||
|
||||
@ -187,6 +197,8 @@ export class DialogSession {
|
||||
console.log('[DialogSession] 跳过重复的工具段落:', data.tool_name);
|
||||
} else {
|
||||
this.addToolSegment(data.tool_name, 'running');
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
}
|
||||
console.log('[DialogSession] segments 数量:', this.segments.length);
|
||||
callbacks.onToolStart?.(data.tool_name);
|
||||
@ -195,11 +207,15 @@ export class DialogSession {
|
||||
onToolComplete: (data) => {
|
||||
this.updateToolSegment(data.tool_name, 'success', data.result);
|
||||
callbacks.onToolComplete?.(data.tool_name, data.result);
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onToolError: (data) => {
|
||||
this.updateToolSegment(data.tool_name, 'error', data.error);
|
||||
callbacks.onToolError?.(data.tool_name, data.error);
|
||||
// 实时发送段落更新
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
},
|
||||
|
||||
onAskUser: async (data: AskUserEvent) => {
|
||||
@ -210,6 +226,9 @@ export class DialogSession {
|
||||
question: data.question,
|
||||
options: data.options
|
||||
});
|
||||
// 实时发送段落更新（包含问题）
|
||||
callbacks.onSegmentUpdate?.(this.segments);
|
||||
// 同时调用 onQuestion 用于更新状态栏等
|
||||
callbacks.onQuestion?.(data.askId, data.question, data.options);
|
||||
try {
|
||||
await userInteractionManager.handleAskUser(data, this.taskId);
|
||||
|
||||
@ -42,15 +42,8 @@ export class UserInteractionManager {
|
||||
|
||||
console.log(`[UserInteraction] 收到问题: askId=${askId}, question=${question}`);
|
||||
|
||||
// 通过 WebView 显示问题
|
||||
if (this.webviewPanel) {
|
||||
this.webviewPanel.webview.postMessage({
|
||||
command: 'showQuestion',
|
||||
askId,
|
||||
question,
|
||||
options
|
||||
});
|
||||
}
|
||||
// 注意：问题显示已经通过 dialogService 的 onSegmentUpdate 统一处理
|
||||
// 这里不再单独发送 showQuestion 命令，避免重复显示
|
||||
|
||||
// 创建 Promise 等待用户回答
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
@ -116,23 +116,19 @@ async function handleUserMessageWithBackend(
|
||||
return new Promise((resolve, reject) => {
|
||||
currentSession!.sendMessage(text, {
|
||||
onText: (fullText, isStreaming) => {
|
||||
if (isStreaming) {
|
||||
// 流式更新消息
|
||||
panel.webview.postMessage({
|
||||
command: "updateStreamingMessage",
|
||||
text: fullText,
|
||||
});
|
||||
}
|
||||
// 注意：完成时通过 onComplete 发送分段消息
|
||||
// 不再单独处理文本，统一通过 onSegmentUpdate 处理
|
||||
},
|
||||
|
||||
onSegmentUpdate: (segments) => {
|
||||
// 实时发送段落更新，按后端返回顺序展示
|
||||
panel.webview.postMessage({
|
||||
command: "updateSegments",
|
||||
segments: segments,
|
||||
});
|
||||
},
|
||||
|
||||
onToolStart: (toolName) => {
|
||||
// 实时显示工具状态
|
||||
panel.webview.postMessage({
|
||||
command: "toolStart",
|
||||
toolName,
|
||||
});
|
||||
// 同时更新状态栏
|
||||
// 更新状态栏
|
||||
panel.webview.postMessage({
|
||||
command: "updateStatus",
|
||||
text: `正在执行 ${toolName}...`,
|
||||
@ -141,25 +137,15 @@ async function handleUserMessageWithBackend(
|
||||
},
|
||||
|
||||
onToolComplete: (toolName, result) => {
|
||||
// 实时更新工具状态
|
||||
panel.webview.postMessage({
|
||||
command: "toolComplete",
|
||||
toolName,
|
||||
result,
|
||||
});
|
||||
// 工具完成，不需要单独处理，通过 onSegmentUpdate 统一更新
|
||||
},
|
||||
|
||||
onToolError: (toolName, error) => {
|
||||
// 实时显示工具错误
|
||||
panel.webview.postMessage({
|
||||
command: "toolError",
|
||||
toolName,
|
||||
error,
|
||||
});
|
||||
// 工具错误，不需要单独处理，通过 onSegmentUpdate 统一更新
|
||||
},
|
||||
|
||||
onQuestion: (askId, question, options) => {
|
||||
// 问题会在分段消息中显示，这里只更新状态栏
|
||||
// 只更新状态栏，问题显示由 onSegmentUpdate 统一处理
|
||||
panel.webview.postMessage({
|
||||
command: "updateStatus",
|
||||
text: "等待用户回答...",
|
||||
@ -173,13 +159,14 @@ async function handleUserMessageWithBackend(
|
||||
command: "hideStatus",
|
||||
});
|
||||
|
||||
// 发送分段消息
|
||||
console.log('[MessageHandler] 发送分段消息, 段落数:', segments.length);
|
||||
// 最后一次发送完整的段落
|
||||
console.log('[MessageHandler] 对话完成, 段落数:', segments.length);
|
||||
console.log('[MessageHandler] segments 内容:', JSON.stringify(segments));
|
||||
|
||||
const result = await panel.webview.postMessage({
|
||||
command: "receiveSegments",
|
||||
command: "updateSegments",
|
||||
segments: segments,
|
||||
isComplete: true,
|
||||
});
|
||||
console.log('[MessageHandler] postMessage 返回值:', result);
|
||||
|
||||
|
||||
547
src/views/inputArea.ts
Normal file
547
src/views/inputArea.ts
Normal file
@ -0,0 +1,547 @@
|
||||
import { getWaveformPreviewContent } from "./waveformPreviewContent";
|
||||
|
||||
/**
|
||||
* 获取输入区域的 HTML 内容
|
||||
*/
|
||||
export function getInputAreaContent(): string {
|
||||
return `
|
||||
<div class="input-area">
|
||||
<div class="input-group">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
id="messageInput"
|
||||
placeholder="输入您的问题..."
|
||||
onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
|
||||
></textarea>
|
||||
<div class="input-bottom-row">
|
||||
<div class="mode-selector">
|
||||
<div class="tooltip">
|
||||
<select id="modeSelect">
|
||||
<option value="agent" selected>Agent</option>
|
||||
<option value="ask">Ask</option>
|
||||
<option value="plan">Plan</option>
|
||||
</select>
|
||||
<span class="tooltiptext">切换模型</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-actions">
|
||||
<!-- 上下文显示 -->
|
||||
<div class="context-display">
|
||||
<div class="context-info" onclick="toggleContextPanel()">
|
||||
<div class="database-icon">
|
||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="db-svg">
|
||||
<!-- 数据库容器主体 - 底层灰色 -->
|
||||
<path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#94a3b8" class="db-body"/>
|
||||
|
||||
<!-- 填充进度效果 - 从下往上填充蓝色 -->
|
||||
<defs>
|
||||
<mask id="fill-mask">
|
||||
<rect x="0" y="0" width="1024" height="1024" id="fillRect" fill="white"/>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<g mask="url(#fill-mask)">
|
||||
<path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#409eff" class="db-fill"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="context-percentage" id="contextPercentage">0%</span>
|
||||
</div>
|
||||
|
||||
<!-- 上下文信息弹窗 -->
|
||||
<div id="contextPanel" class="context-panel">
|
||||
<div class="context-panel-content">
|
||||
<div class="context-info-text" id="contextInfoText">
|
||||
0k / 200k 已用上下文
|
||||
</div>
|
||||
<button class="compress-button" onclick="compressConversation()">
|
||||
压缩会话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一键优化按钮 -->
|
||||
<div class="tooltip">
|
||||
<button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
|
||||
<svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
|
||||
</button>
|
||||
<span class="tooltiptext" id="optimizeTooltip">一键优化</span>
|
||||
</div>
|
||||
|
||||
<button onclick="sendMessage()">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取输入区域的样式
|
||||
*/
|
||||
export function getInputAreaStyles(): string {
|
||||
return `
|
||||
.input-area {
|
||||
border-top: 1px solid var(--vscode-panel-border);
|
||||
padding-top: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: var(--vscode-input-background);
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.input-group:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.input-group:focus-within {
|
||||
border-color: var(--vscode-focusBorder);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.input-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: -17px;
|
||||
}
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.mode-selector select {
|
||||
padding: 2px 4px;
|
||||
background: var(--vscode-input-background);
|
||||
color: var(--vscode-foreground);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.mode-selector select:hover {
|
||||
background: var(--vscode-list-hoverBackground);
|
||||
}
|
||||
/* Tooltip 样式 */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: auto;
|
||||
background: #1e1e1e;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: #1e1e1e transparent transparent transparent;
|
||||
}
|
||||
.tooltip .tooltiptext::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
border-width: 7px;
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
|
||||
z-index: -1;
|
||||
}
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: transparent;
|
||||
color: var(--vscode-input-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
min-height: 40px;
|
||||
max-height: 200px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* 简洁的滚动条样式 */
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
textarea::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
textarea::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
textarea::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
button {
|
||||
padding: 0 20px;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.optimize-button {
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
color: var(--vscode-foreground);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.2s ease;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.optimize-button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.optimize-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.optimize-button-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
/* 上下文显示样式 */
|
||||
.context-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.context-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vscode-foreground);
|
||||
transition: opacity 0.3s ease;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.context-info:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.database-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.db-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.db-body {
|
||||
fill: #ffffff;
|
||||
}
|
||||
.db-fill {
|
||||
fill: #409eff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.context-percentage {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vscode-foreground);
|
||||
text-align: right;
|
||||
}
|
||||
/* 上下文信息弹窗样式 */
|
||||
.context-panel {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 8px;
|
||||
z-index: 1000;
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
display: none;
|
||||
}
|
||||
.context-panel.active {
|
||||
display: block;
|
||||
}
|
||||
.context-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #ffffff;
|
||||
}
|
||||
.context-panel-content {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
min-width: 160px;
|
||||
}
|
||||
.context-info-text {
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.compress-button {
|
||||
width: 100%;
|
||||
background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.compress-button:hover {
|
||||
background: linear-gradient(145deg, #2563eb 0%, #1e40af 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.compress-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取输入区域的脚本
|
||||
*/
|
||||
export function getInputAreaScript(): string {
|
||||
return `
|
||||
// 自动调整 textarea 高度
|
||||
function autoResizeTextarea() {
|
||||
if (messageInput) {
|
||||
messageInput.style.height = 'auto';
|
||||
messageInput.style.height = messageInput.scrollHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
// 监听输入事件，自动调整高度
|
||||
if (messageInput) {
|
||||
messageInput.addEventListener('input', autoResizeTextarea);
|
||||
|
||||
// 初始化时调整一次高度
|
||||
autoResizeTextarea();
|
||||
|
||||
// 聚焦到输入框
|
||||
messageInput.focus();
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
const text = messageInput.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
const modeSelect = document.getElementById('modeSelect');
|
||||
const mode = modeSelect ? modeSelect.value : 'agent';
|
||||
|
||||
addMessage(text, 'user');
|
||||
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
|
||||
messageInput.value = '';
|
||||
autoResizeTextarea(); // 重置输入框高度
|
||||
messageInput.focus();
|
||||
|
||||
// 重置优化状态
|
||||
resetOptimizeButton();
|
||||
}
|
||||
|
||||
let isOptimized = false; // 标记是否已优化
|
||||
let originalText = ''; // 保存原始文本用于撤回
|
||||
|
||||
function handleOptimize() {
|
||||
if (isOptimized) {
|
||||
// 撤回操作
|
||||
messageInput.value = originalText;
|
||||
resetOptimizeButton();
|
||||
} else {
|
||||
// 优化操作
|
||||
originalText = messageInput.value; // 保存原始文本
|
||||
|
||||
// 使用死数据替换输入框内容
|
||||
const optimizedTexts = [
|
||||
'请帮我优化这段代码，提高性能和可读性',
|
||||
'请分析这个问题并给出最佳解决方案',
|
||||
'请帮我重构这段代码，使其更加简洁高效',
|
||||
'请检查代码中的潜在问题并提供改进建议'
|
||||
];
|
||||
const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)];
|
||||
messageInput.value = randomText;
|
||||
|
||||
// 切换到撤回状态
|
||||
isOptimized = true;
|
||||
updateOptimizeButton();
|
||||
}
|
||||
|
||||
messageInput.focus();
|
||||
autoResizeTextarea();
|
||||
}
|
||||
|
||||
function updateOptimizeButton() {
|
||||
const optimizeIcon = document.getElementById('optimizeIcon');
|
||||
const optimizeTooltip = document.getElementById('optimizeTooltip');
|
||||
|
||||
if (optimizeIcon && optimizeTooltip) {
|
||||
// 切换为撤回图标
|
||||
optimizeIcon.innerHTML = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
|
||||
optimizeTooltip.textContent = '撤回';
|
||||
}
|
||||
}
|
||||
|
||||
function resetOptimizeButton() {
|
||||
const optimizeIcon = document.getElementById('optimizeIcon');
|
||||
const optimizeTooltip = document.getElementById('optimizeTooltip');
|
||||
|
||||
if (optimizeIcon && optimizeTooltip) {
|
||||
// 切换回优化图标（星星图标）
|
||||
optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
|
||||
optimizeTooltip.textContent = '一键优化';
|
||||
}
|
||||
|
||||
isOptimized = false;
|
||||
originalText = '';
|
||||
}
|
||||
|
||||
// 上下文面板相关函数
|
||||
function toggleContextPanel() {
|
||||
const contextPanel = document.getElementById('contextPanel');
|
||||
if (contextPanel) {
|
||||
if (contextPanel.classList.contains('active')) {
|
||||
contextPanel.classList.remove('active');
|
||||
} else {
|
||||
contextPanel.classList.add('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function compressConversation() {
|
||||
// 发送压缩会话请求
|
||||
vscode.postMessage({ command: 'compressConversation' });
|
||||
addMessage('正在压缩会话...', 'bot');
|
||||
|
||||
// 关闭面板
|
||||
const contextPanel = document.getElementById('contextPanel');
|
||||
if (contextPanel) {
|
||||
contextPanel.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function updateContextDisplay(currentTokens, maxTokens) {
|
||||
const percentage = Math.min(Math.round((currentTokens / maxTokens) * 100), 100);
|
||||
|
||||
// 更新百分比显示
|
||||
const contextPercentage = document.getElementById('contextPercentage');
|
||||
if (contextPercentage) {
|
||||
contextPercentage.textContent = percentage + '%';
|
||||
}
|
||||
|
||||
// 更新详细信息
|
||||
const contextInfoText = document.getElementById('contextInfoText');
|
||||
if (contextInfoText) {
|
||||
const currentK = Math.round((currentTokens / 1000) * 10) / 10;
|
||||
const maxK = Math.round(maxTokens / 1000);
|
||||
contextInfoText.textContent = \`\${currentK}k / \${maxK}k 已用上下文\`;
|
||||
}
|
||||
|
||||
// 更新SVG填充效果（从下往上填充）
|
||||
const fillRect = document.getElementById('fillRect');
|
||||
if (fillRect) {
|
||||
const fillHeight = (1024 * percentage) / 100;
|
||||
const fillY = 1024 - fillHeight;
|
||||
fillRect.setAttribute('y', fillY.toString());
|
||||
fillRect.setAttribute('height', fillHeight.toString());
|
||||
}
|
||||
}
|
||||
|
||||
// 点击外部关闭上下文面板
|
||||
document.addEventListener('click', (event) => {
|
||||
const contextDisplay = document.querySelector('.context-display');
|
||||
const contextPanel = document.getElementById('contextPanel');
|
||||
|
||||
if (contextPanel && contextPanel.classList.contains('active') && contextDisplay) {
|
||||
if (!contextDisplay.contains(event.target)) {
|
||||
contextPanel.classList.remove('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
`;
|
||||
}
|
||||
1068
src/views/messageArea.ts
Normal file
1068
src/views/messageArea.ts
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user