Merge remote-tracking branch 'origin/feat/Plugin-front-end' into feat/back-to-front
This commit is contained in:
XiaoFeng
@ -50,3 +50,23 @@ export const SearchCode = `
|
||||
</svg>
|
||||
</span>
|
||||
`;
|
||||
|
||||
/**
|
||||
* 发送按钮图标 SVG（向上箭头）
|
||||
*/
|
||||
export const sendIconSvg = `
|
||||
<svg class="send-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M507.904 882.688c-18.432 0-33.28-14.848-33.28-33.28v-655.36c0-18.432 14.848-33.28 33.28-33.28s33.28 14.848 33.28 33.28v654.848c0 18.432-14.848 33.792-33.28 33.792z" fill="currentColor"></path>
|
||||
<path d="M787.968 502.784c-8.704 0-16.896-3.072-23.552-9.728L507.904 236.544 251.392 493.056c-12.8 12.8-34.304 12.8-47.104 0-12.8-12.8-12.8-34.304 0-47.104l280.064-280.064c6.144-6.144 14.848-9.728 23.552-9.728s17.408 3.584 23.552 9.728l280.064 280.064c12.8 12.8 12.8 34.304 0 47.104-6.656 6.656-15.36 9.728-23.552 9.728z" fill="currentColor"></path>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
/**
|
||||
* 暂停按钮图标 SVG（圆形边框内的方块）
|
||||
*/
|
||||
export const stopIconSvg = `
|
||||
<svg class="stop-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M512 936a424.1 424.1 0 0 1-165.05-814.66 424.1 424.1 0 0 1 330.1 781.33A421.38 421.38 0 0 1 512 936z m0-768c-189.68 0-344 154.32-344 344s154.32 344 344 344 344-154.32 344-344-154.32-344-344-344z" fill="currentColor"></path>
|
||||
<path d="M349.75 349.75m57.15 0l210.2 0q57.15 0 57.15 57.15l0 210.2q0 57.15-57.15 57.15l-210.2 0q-57.15 0-57.15-57.15l0-210.2q0-57.15 57.15-57.15Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@ -3,26 +3,44 @@ import { ICViewProvider } from "./views/ICViewProvider";
|
||||
import { showICHelperPanel } from "./panels/ICHelperPanel";
|
||||
import { VCDViewerPanel } from "./panels/VCDViewerPanel";
|
||||
import { ChatHistoryManager } from "./utils/chatHistoryManager";
|
||||
import { ICCoderAuthenticationProvider } from "./services/icCoderAuthProvider";
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
console.log("🎉 IC Coder 插件已激活！");
|
||||
|
||||
// 自动打开聊天面板
|
||||
vscode.commands.executeCommand("ic-coder.openChat");
|
||||
// 注册 Authentication Provider
|
||||
const authProvider = new ICCoderAuthenticationProvider(context);
|
||||
context.subscriptions.push(
|
||||
vscode.authentication.registerAuthenticationProvider(
|
||||
"iccoder",
|
||||
"IC Coder",
|
||||
authProvider
|
||||
)
|
||||
);
|
||||
|
||||
// 检查登录状态，如果已登录则自动打开聊天面板
|
||||
vscode.authentication.getSession("iccoder", [], { createIfNone: false })
|
||||
.then((session) => {
|
||||
if (session) {
|
||||
vscode.commands.executeCommand("ic-coder.openChat");
|
||||
}
|
||||
}, () => {
|
||||
// 未登录，不做任何操作
|
||||
});
|
||||
|
||||
// 注册命令：打开助手面板
|
||||
const openPanelCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.openPanel",
|
||||
() => {
|
||||
showICHelperPanel(context);
|
||||
async () => {
|
||||
await showICHelperPanel(context);
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：打开聊天（用于侧边栏）
|
||||
const openChatCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.openChat",
|
||||
() => {
|
||||
showICHelperPanel(context);
|
||||
async () => {
|
||||
await showICHelperPanel(context);
|
||||
}
|
||||
);
|
||||
|
||||
@ -54,6 +72,40 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：用户登录
|
||||
const loginCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.login",
|
||||
async () => {
|
||||
try {
|
||||
await vscode.authentication.getSession("iccoder", [], { createIfNone: true });
|
||||
} catch (error) {
|
||||
vscode.window.showErrorMessage(`登录失败: ${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：用户登出
|
||||
const logoutCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.logout",
|
||||
async () => {
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
|
||||
if (session) {
|
||||
// 通过创建新会话并清除偏好来实现登出
|
||||
await vscode.authentication.getSession("iccoder", [], {
|
||||
clearSessionPreference: true,
|
||||
forceNewSession: true
|
||||
});
|
||||
vscode.window.showInformationMessage("已退出登录");
|
||||
} else {
|
||||
vscode.window.showInformationMessage("当前未登录");
|
||||
}
|
||||
} catch (error) {
|
||||
vscode.window.showInformationMessage("当前未登录");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：查看会话历史
|
||||
// TODO: 这些命令需要根据新的任务架构重新实现
|
||||
// 暂时注释掉，等待重新实现
|
||||
@ -102,7 +154,7 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
*/
|
||||
|
||||
// 注册侧边栏视图
|
||||
const viewProvider = new ICViewProvider(context.extensionUri);
|
||||
const viewProvider = new ICViewProvider(context.extensionUri, context);
|
||||
const viewRegistration = vscode.window.registerWebviewViewProvider(
|
||||
"ic-coder.mainView",
|
||||
viewProvider
|
||||
@ -113,6 +165,8 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
openPanelCommand,
|
||||
openChatCommand,
|
||||
openVCDViewerCommand,
|
||||
loginCommand,
|
||||
logoutCommand,
|
||||
// TODO: 等待重新实现这些命令
|
||||
// viewHistoryCommand,
|
||||
// newSessionCommand,
|
||||
|
||||
@ -11,14 +11,36 @@ import {
|
||||
abortCurrentDialog,
|
||||
} from "../utils/messageHandler";
|
||||
import { VCDViewerPanel } from "./VCDViewerPanel";
|
||||
import { ChatHistoryManager } from "../utils/chatHistoryManager";
|
||||
import { MessageType } from "../types/chatHistory";
|
||||
|
||||
/**
|
||||
* 创建并显示 IC 助手面板
|
||||
*/
|
||||
export function showICHelperPanel(
|
||||
export async function showICHelperPanel(
|
||||
context: vscode.ExtensionContext,
|
||||
viewColumn?: vscode.ViewColumn
|
||||
) {
|
||||
// 检查用户是否已登录
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
|
||||
if (!session) {
|
||||
vscode.window.showWarningMessage("请先登录后再使用 IC Coder", "立即登录").then((selection) => {
|
||||
if (selection === "立即登录") {
|
||||
vscode.commands.executeCommand("ic-coder.login");
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
vscode.window.showWarningMessage("请先登录后再使用 IC Coder", "立即登录").then((selection) => {
|
||||
if (selection === "立即登录") {
|
||||
vscode.commands.executeCommand("ic-coder.login");
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建WebView面板
|
||||
const panel = vscode.window.createWebviewPanel(
|
||||
"icCoder", // 面板ID
|
||||
@ -31,16 +53,22 @@ export function showICHelperPanel(
|
||||
}
|
||||
);
|
||||
|
||||
// 为面板生成唯一ID
|
||||
const panelId = `panel_${Date.now()}_${Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 9)}`;
|
||||
(panel as any).__uniqueId = panelId;
|
||||
|
||||
// 设置标签页图标
|
||||
panel.iconPath = vscode.Uri.joinPath(
|
||||
context.extensionUri,
|
||||
"media",
|
||||
"图案（方底）.png"
|
||||
"icon.png"
|
||||
);
|
||||
|
||||
// 获取页面内图标URI
|
||||
const iconUri = panel.webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(context.extensionUri, "media", "图案（方底）.png")
|
||||
vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
|
||||
);
|
||||
|
||||
// 设置HTML内容
|
||||
@ -48,9 +76,37 @@ export function showICHelperPanel(
|
||||
|
||||
// 处理消息
|
||||
panel.webview.onDidReceiveMessage(
|
||||
(message) => {
|
||||
async (message) => {
|
||||
const historyManager = ChatHistoryManager.getInstance();
|
||||
const panelId = (panel as any).__uniqueId;
|
||||
|
||||
switch (message.command) {
|
||||
case "sendMessage":
|
||||
// 仅在用户发送消息时，确保面板有任务上下文
|
||||
// 如果没有，则创建新任务（仅在首次发送消息时）
|
||||
if (!historyManager.getPanelTask(panelId)) {
|
||||
const workspacePath =
|
||||
vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
|
||||
if (workspacePath) {
|
||||
try {
|
||||
const taskMeta = await historyManager.createTask(
|
||||
workspacePath,
|
||||
"新对话"
|
||||
);
|
||||
historyManager.setPanelTask(
|
||||
panelId,
|
||||
taskMeta.taskId,
|
||||
workspacePath
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("创建任务失败:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 切换到当前面板的任务上下文
|
||||
historyManager.switchToPanelTask(panelId);
|
||||
|
||||
handleUserMessage(panel, message.text, context.extensionPath);
|
||||
break;
|
||||
case "readFile":
|
||||
@ -96,14 +152,22 @@ export function showICHelperPanel(
|
||||
showICHelperPanel(context, panel.viewColumn);
|
||||
break;
|
||||
case "loadConversationHistory":
|
||||
// 加载会话历史（暂未实现）
|
||||
panel.webview.postMessage({
|
||||
command: "conversationHistory",
|
||||
history: [],
|
||||
});
|
||||
// 加载会话历史（支持分页）
|
||||
loadConversationHistory(
|
||||
panel,
|
||||
message.offset || 0,
|
||||
message.limit || 10
|
||||
);
|
||||
break;
|
||||
case "selectConversation":
|
||||
// 选择会话（暂未实现）
|
||||
// 选择会话
|
||||
if (message.conversationId) {
|
||||
selectConversation(
|
||||
panel,
|
||||
message.conversationId,
|
||||
context.extensionPath
|
||||
);
|
||||
}
|
||||
break;
|
||||
// 新增：处理用户回答
|
||||
case "submitAnswer":
|
||||
@ -122,6 +186,17 @@ export function showICHelperPanel(
|
||||
undefined,
|
||||
context.subscriptions
|
||||
);
|
||||
|
||||
// 面板关闭时清理任务映射
|
||||
panel.onDidDispose(
|
||||
() => {
|
||||
const historyManager = ChatHistoryManager.getInstance();
|
||||
const panelId = (panel as any).__uniqueId;
|
||||
historyManager.removePanelTask(panelId);
|
||||
},
|
||||
undefined,
|
||||
context.subscriptions
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -302,3 +377,243 @@ function parseVCDSignals(content: string, maxSignals: number = 3) {
|
||||
|
||||
return signals;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载会话历史（支持分页）
|
||||
*/
|
||||
async function loadConversationHistory(
|
||||
panel: vscode.WebviewPanel,
|
||||
offset: number = 0,
|
||||
limit: number = 10
|
||||
) {
|
||||
try {
|
||||
const historyManager = ChatHistoryManager.getInstance();
|
||||
const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
|
||||
|
||||
if (!workspacePath) {
|
||||
// 没有打开的工作区，返回空历史
|
||||
panel.webview.postMessage({
|
||||
command: "conversationHistory",
|
||||
items: [],
|
||||
total: 0,
|
||||
hasMore: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取会话历史列表（支持分页）
|
||||
const result = await historyManager.getConversationHistoryList(
|
||||
workspacePath,
|
||||
offset,
|
||||
limit
|
||||
);
|
||||
|
||||
// 发送会话历史到前端
|
||||
panel.webview.postMessage({
|
||||
command: "conversationHistory",
|
||||
items: result.items,
|
||||
total: result.total,
|
||||
hasMore: result.hasMore,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载会话历史失败:", error);
|
||||
// 发生错误时返回空历史
|
||||
panel.webview.postMessage({
|
||||
command: "conversationHistory",
|
||||
items: [],
|
||||
total: 0,
|
||||
hasMore: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择并加载指定的会话
|
||||
*/
|
||||
async function selectConversation(
|
||||
panel: vscode.WebviewPanel,
|
||||
taskId: string,
|
||||
extensionPath: string
|
||||
) {
|
||||
try {
|
||||
const historyManager = ChatHistoryManager.getInstance();
|
||||
const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
|
||||
|
||||
if (!workspacePath) {
|
||||
vscode.window.showErrorMessage("没有打开的工作区");
|
||||
return;
|
||||
}
|
||||
|
||||
// 加载任务会话
|
||||
const taskSession = await historyManager.loadTaskSession(
|
||||
workspacePath,
|
||||
taskId
|
||||
);
|
||||
|
||||
if (!taskSession) {
|
||||
vscode.window.showErrorMessage(
|
||||
`加载任务 ${taskId} 失败: 任务不存在或数据损坏`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// 切换到该任务
|
||||
const switched = await historyManager.switchTask(workspacePath, taskId);
|
||||
if (!switched) {
|
||||
vscode.window.showErrorMessage(`切换到任务 ${taskId} 失败`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新面板的任务映射，确保后续对话保存到正确的任务中
|
||||
const panelId = (panel as any).__uniqueId;
|
||||
historyManager.setPanelTask(panelId, taskId, workspacePath);
|
||||
|
||||
// 清空当前聊天界面
|
||||
panel.webview.postMessage({
|
||||
command: "clearChat",
|
||||
});
|
||||
|
||||
// 将会话历史消息转换为 segments 格式并发送到前端显示
|
||||
const segments: any[] = [];
|
||||
let i = 0;
|
||||
|
||||
while (i < taskSession.messages.length) {
|
||||
const message = taskSession.messages[i];
|
||||
|
||||
if (message.type === MessageType.USER) {
|
||||
// 用户消息 - 如果有累积的 segments，先发送
|
||||
if (segments.length > 0) {
|
||||
panel.webview.postMessage({
|
||||
command: "receiveSegments",
|
||||
segments: [...segments],
|
||||
});
|
||||
segments.length = 0;
|
||||
}
|
||||
|
||||
// 发送用户消息
|
||||
const textContent = message.contents?.find((c) => c.type === "TEXT");
|
||||
if (textContent && "text" in textContent) {
|
||||
panel.webview.postMessage({
|
||||
command: "addUserMessage",
|
||||
text: textContent.text,
|
||||
});
|
||||
}
|
||||
i++;
|
||||
} else if (message.type === MessageType.AI) {
|
||||
// AI消息 - 如果有 segments，直接使用
|
||||
if (message.segments && message.segments.length > 0) {
|
||||
panel.webview.postMessage({
|
||||
command: "receiveSegments",
|
||||
segments: message.segments,
|
||||
});
|
||||
i++;
|
||||
} else {
|
||||
// 旧格式：需要转换为 segments
|
||||
// 收集连续的 AI 消息、工具调用和工具结果
|
||||
if (message.text) {
|
||||
segments.push({
|
||||
type: "text",
|
||||
content: message.text,
|
||||
});
|
||||
}
|
||||
|
||||
// 检查是否有工具调用
|
||||
if (
|
||||
message.toolExecutionRequests &&
|
||||
message.toolExecutionRequests.length > 0
|
||||
) {
|
||||
for (const toolReq of message.toolExecutionRequests) {
|
||||
// 查找对应的工具执行结果
|
||||
let toolResult = "";
|
||||
if (i + 1 < taskSession.messages.length) {
|
||||
const nextMsg = taskSession.messages[i + 1];
|
||||
if (
|
||||
nextMsg.type === MessageType.TOOL_EXECUTION_RESULT &&
|
||||
nextMsg.id === toolReq.id
|
||||
) {
|
||||
toolResult = nextMsg.text;
|
||||
i++; // 跳过工具结果消息
|
||||
}
|
||||
}
|
||||
|
||||
segments.push({
|
||||
type: "tool",
|
||||
toolName: toolReq.name,
|
||||
askId: toolReq.id,
|
||||
toolResult: toolResult,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
i++;
|
||||
|
||||
// 继续收集后续的 AI 消息，直到遇到用户消息或有 segments 的 AI 消息
|
||||
while (i < taskSession.messages.length) {
|
||||
const nextMsg = taskSession.messages[i];
|
||||
if (nextMsg.type === MessageType.USER) {
|
||||
break;
|
||||
}
|
||||
if (nextMsg.type === MessageType.AI) {
|
||||
if (nextMsg.segments && nextMsg.segments.length > 0) {
|
||||
break;
|
||||
}
|
||||
if (nextMsg.text) {
|
||||
segments.push({
|
||||
type: "text",
|
||||
content: nextMsg.text,
|
||||
});
|
||||
}
|
||||
if (
|
||||
nextMsg.toolExecutionRequests &&
|
||||
nextMsg.toolExecutionRequests.length > 0
|
||||
) {
|
||||
for (const toolReq of nextMsg.toolExecutionRequests) {
|
||||
let toolResult = "";
|
||||
if (i + 1 < taskSession.messages.length) {
|
||||
const resultMsg = taskSession.messages[i + 1];
|
||||
if (
|
||||
resultMsg.type === MessageType.TOOL_EXECUTION_RESULT &&
|
||||
resultMsg.id === toolReq.id
|
||||
) {
|
||||
toolResult = resultMsg.text;
|
||||
i++; // 跳过工具结果消息
|
||||
}
|
||||
}
|
||||
segments.push({
|
||||
type: "tool",
|
||||
toolName: toolReq.name,
|
||||
askId: toolReq.id,
|
||||
toolResult: toolResult,
|
||||
});
|
||||
}
|
||||
}
|
||||
i++;
|
||||
} else if (nextMsg.type === MessageType.TOOL_EXECUTION_RESULT) {
|
||||
// 独立的工具结果（没有被上面处理的）
|
||||
i++;
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
// 发送剩余的 segments
|
||||
if (segments.length > 0) {
|
||||
panel.webview.postMessage({
|
||||
command: "receiveSegments",
|
||||
segments: segments,
|
||||
});
|
||||
}
|
||||
|
||||
vscode.window.showInformationMessage(
|
||||
`已加载会话: ${taskSession.meta.taskName}`
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("选择会话失败:", error);
|
||||
vscode.window.showErrorMessage(`加载会话失败: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
437
src/services/icCoderAuthProvider.ts
Normal file
437
src/services/icCoderAuthProvider.ts
Normal file
@ -0,0 +1,437 @@
|
||||
import * as vscode from "vscode";
|
||||
import * as http from "http";
|
||||
import * as path from "path";
|
||||
import * as fs from "fs";
|
||||
|
||||
/**
|
||||
* IC Coder Authentication Provider
|
||||
* 集成到 VSCode 账户系统
|
||||
*/
|
||||
export class ICCoderAuthenticationProvider
|
||||
implements vscode.AuthenticationProvider
|
||||
{
|
||||
private static readonly AUTH_TYPE = "iccoder";
|
||||
private static readonly AUTH_NAME = "IC Coder";
|
||||
private static readonly LOGIN_URL = "http://192.168.1.108:2005/login";
|
||||
private static loginServer: http.Server | null = null;
|
||||
private static currentPort: number | null = null;
|
||||
|
||||
private _onDidChangeSessions =
|
||||
new vscode.EventEmitter<vscode.AuthenticationProviderAuthenticationSessionsChangeEvent>();
|
||||
public readonly onDidChangeSessions = this._onDidChangeSessions.event;
|
||||
|
||||
private _sessions: vscode.AuthenticationSession[] = [];
|
||||
|
||||
constructor(private readonly context: vscode.ExtensionContext) {
|
||||
// 从存储中恢复会话
|
||||
this.loadSessions();
|
||||
}
|
||||
|
||||
/**
|
||||
* 从存储中加载会话
|
||||
*/
|
||||
private async loadSessions(): Promise<void> {
|
||||
const storedSessions = this.context.globalState.get<
|
||||
vscode.AuthenticationSession[]
|
||||
>("icCoderSessions", []);
|
||||
this._sessions = storedSessions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存会话到存储
|
||||
*/
|
||||
private async saveSessions(): Promise<void> {
|
||||
await this.context.globalState.update("icCoderSessions", this._sessions);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取会话列表
|
||||
*/
|
||||
async getSessions(
|
||||
scopes?: readonly string[]
|
||||
): Promise<vscode.AuthenticationSession[]> {
|
||||
return [...this._sessions];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建会话（登录）
|
||||
*/
|
||||
async createSession(
|
||||
scopes: readonly string[]
|
||||
): Promise<vscode.AuthenticationSession> {
|
||||
try {
|
||||
const token = await this.login();
|
||||
|
||||
// 创建会话
|
||||
const session: vscode.AuthenticationSession = {
|
||||
id: this.generateSessionId(),
|
||||
accessToken: token,
|
||||
account: {
|
||||
id: "iccoder-user",
|
||||
label: "IC Coder 用户",
|
||||
},
|
||||
scopes: [...scopes],
|
||||
};
|
||||
|
||||
this._sessions.push(session);
|
||||
await this.saveSessions();
|
||||
|
||||
// 触发会话变化事件
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [session],
|
||||
removed: [],
|
||||
changed: [],
|
||||
});
|
||||
|
||||
vscode.window.showInformationMessage("登录成功！窗口将自动刷新...");
|
||||
|
||||
// 延迟 1 秒后重新加载窗口，让用户看到成功消息
|
||||
setTimeout(() => {
|
||||
vscode.commands.executeCommand("workbench.action.reloadWindow");
|
||||
}, 1000);
|
||||
|
||||
return session;
|
||||
} catch (error) {
|
||||
vscode.window.showErrorMessage(
|
||||
`登录失败: ${error instanceof Error ? error.message : String(error)}`
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除会话（登出）
|
||||
*/
|
||||
async removeSession(sessionId: string): Promise<void> {
|
||||
const sessionIndex = this._sessions.findIndex((s) => s.id === sessionId);
|
||||
if (sessionIndex > -1) {
|
||||
const session = this._sessions[sessionIndex];
|
||||
this._sessions.splice(sessionIndex, 1);
|
||||
await this.saveSessions();
|
||||
|
||||
// 触发会话变化事件
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [],
|
||||
removed: [session],
|
||||
changed: [],
|
||||
});
|
||||
|
||||
vscode.window.showInformationMessage("已退出登录！窗口将自动刷新...");
|
||||
|
||||
// 延迟 1 秒后重新加载窗口，让用户看到成功消息
|
||||
setTimeout(() => {
|
||||
vscode.commands.executeCommand("workbench.action.reloadWindow");
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成会话 ID
|
||||
*/
|
||||
private generateSessionId(): string {
|
||||
return `iccoder-${Date.now()}-${Math.random().toString(36).substring(7)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录逻辑（打开浏览器并等待回调）
|
||||
*/
|
||||
private async login(): Promise<string> {
|
||||
// 如果已有服务器在运行，先关闭
|
||||
if (ICCoderAuthenticationProvider.loginServer) {
|
||||
ICCoderAuthenticationProvider.loginServer.close();
|
||||
ICCoderAuthenticationProvider.loginServer = null;
|
||||
}
|
||||
|
||||
// 创建本地服务器监听回调
|
||||
const { server, port } = await this.createCallbackServer();
|
||||
ICCoderAuthenticationProvider.loginServer = server;
|
||||
ICCoderAuthenticationProvider.currentPort = port;
|
||||
|
||||
// 构建登录 URL
|
||||
const callbackUrl = `http://localhost:${port}/callback`;
|
||||
const loginUrl = `${
|
||||
ICCoderAuthenticationProvider.LOGIN_URL
|
||||
}?redirect_uri=${encodeURIComponent(callbackUrl)}`;
|
||||
|
||||
console.log("🔐 登录服务器已启动，监听端口:", port);
|
||||
console.log("🌐 登录 URL:", loginUrl);
|
||||
|
||||
// 打开浏览器登录
|
||||
await vscode.env.openExternal(vscode.Uri.parse(loginUrl));
|
||||
|
||||
vscode.window.showInformationMessage(
|
||||
"请在浏览器中完成登录，登录成功后将自动返回..."
|
||||
);
|
||||
|
||||
// 等待 token（通过 Promise）
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeout = setTimeout(() => {
|
||||
if (ICCoderAuthenticationProvider.loginServer) {
|
||||
ICCoderAuthenticationProvider.loginServer.close();
|
||||
ICCoderAuthenticationProvider.loginServer = null;
|
||||
reject(new Error("登录超时"));
|
||||
}
|
||||
}, 5 * 60 * 1000);
|
||||
|
||||
// 将 resolve 和 reject 保存到服务器上下文
|
||||
(server as any)._loginResolve = resolve;
|
||||
(server as any)._loginReject = reject;
|
||||
(server as any)._loginTimeout = timeout;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建本地回调服务器
|
||||
*/
|
||||
private createCallbackServer(): Promise<{
|
||||
server: http.Server;
|
||||
port: number;
|
||||
}> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 读取 icon.png 并转换为 Base64
|
||||
const iconPath = path.join(
|
||||
this.context.extensionPath,
|
||||
"media",
|
||||
"icon.png"
|
||||
);
|
||||
let iconBase64 = "";
|
||||
try {
|
||||
const iconBuffer = fs.readFileSync(iconPath);
|
||||
iconBase64 = `data:image/png;base64,${iconBuffer.toString("base64")}`;
|
||||
} catch (error) {
|
||||
console.warn("无法读取 icon.png:", error);
|
||||
}
|
||||
|
||||
const server = http.createServer(async (req, res) => {
|
||||
try {
|
||||
console.log("📥 收到回调请求:", req.url);
|
||||
|
||||
const url = new URL(
|
||||
req.url!,
|
||||
`http://localhost:${ICCoderAuthenticationProvider.currentPort}`
|
||||
);
|
||||
console.log("📍 路径:", url.pathname);
|
||||
console.log("📋 所有参数:", Object.fromEntries(url.searchParams));
|
||||
|
||||
if (url.pathname === "/callback") {
|
||||
const token = url.searchParams.get("token");
|
||||
console.log("🔑 Token:", token ? "已获取" : "未找到");
|
||||
|
||||
if (token) {
|
||||
// 返回成功页面
|
||||
res.writeHead(200, {
|
||||
"Content-Type": "text/html; charset=utf-8",
|
||||
});
|
||||
res.end(this.getSuccessPage(iconBase64));
|
||||
|
||||
// 关闭服务器
|
||||
server.close();
|
||||
ICCoderAuthenticationProvider.loginServer = null;
|
||||
|
||||
// 清除超时
|
||||
if ((server as any)._loginTimeout) {
|
||||
clearTimeout((server as any)._loginTimeout);
|
||||
}
|
||||
|
||||
// 返回 token
|
||||
if ((server as any)._loginResolve) {
|
||||
(server as any)._loginResolve(token);
|
||||
}
|
||||
} else {
|
||||
res.writeHead(400, {
|
||||
"Content-Type": "text/html; charset=utf-8",
|
||||
});
|
||||
res.end(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><meta charset="utf-8"><title>登录失败</title></head>
|
||||
<body><h1>❌ 登录失败</h1><p>未获取到有效的 Token</p></body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
if ((server as any)._loginReject) {
|
||||
(server as any)._loginReject(new Error("未获取到有效的 Token"));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
res.writeHead(404);
|
||||
res.end("Not Found");
|
||||
}
|
||||
} catch (error) {
|
||||
res.writeHead(500);
|
||||
res.end("Internal Server Error");
|
||||
if ((server as any)._loginReject) {
|
||||
(server as any)._loginReject(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听端口（使用 0 表示自动分配可用端口）
|
||||
server.listen(0, () => {
|
||||
const address = server.address();
|
||||
const port =
|
||||
typeof address === "object" && address ? address.port : 3000;
|
||||
resolve({ server, port });
|
||||
});
|
||||
|
||||
// 处理错误
|
||||
server.on("error", (error: NodeJS.ErrnoException) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取登录成功页面 HTML
|
||||
*/
|
||||
private getSuccessPage(iconBase64: string): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录成功 - IC Coder</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
.bg-circle:nth-child(1) { width: 300px; height: 300px; top: -150px; left: -150px; }
|
||||
.bg-circle:nth-child(2) { width: 200px; height: 200px; bottom: -100px; right: -100px; animation-delay: 5s; }
|
||||
.bg-circle:nth-child(3) { width: 150px; height: 150px; top: 50%; right: 10%; animation-delay: 10s; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(30px, -30px) scale(1.1); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 60px 50px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 30px;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: scaleIn 0.5s ease-out 0.2s both;
|
||||
}
|
||||
@keyframes scaleIn {
|
||||
from { transform: scale(0); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.checkmark {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid white;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.checkmark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 3px;
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
border: solid white;
|
||||
border-width: 0 4px 4px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
h1 {
|
||||
color: #2d3748;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeIn 0.6s ease-out 0.3s both;
|
||||
}
|
||||
p {
|
||||
color: #718096;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
animation: fadeIn 0.6s ease-out 0.4s both;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
animation: fadeIn 0.6s ease-out 0.5s both;
|
||||
}
|
||||
.brand-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.brand-logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.brand-text {
|
||||
color: #4a5568;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-circle"></div>
|
||||
<div class="bg-circle"></div>
|
||||
<div class="bg-circle"></div>
|
||||
<div class="container">
|
||||
<div class="success-icon">
|
||||
<div class="checkmark"></div>
|
||||
</div>
|
||||
<h1>登录成功！</h1>
|
||||
<p>您已成功登录 IC Coder<br>现在可以返回 VSCode 继续使用</p>
|
||||
<div class="brand">
|
||||
<div class="brand-logo">
|
||||
<img src="${iconBase64}" alt="IC Coder" />
|
||||
</div>
|
||||
<span class="brand-text">IC Coder</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -56,6 +56,7 @@ export interface AiMessage extends BaseMessage {
|
||||
text?: string;
|
||||
toolExecutionRequests?: ToolExecutionRequest[];
|
||||
thinking?: string;
|
||||
segments?: any[]; // 保存完整的 segments 信息用于还原显示
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -8,7 +8,8 @@ import {
|
||||
MessageType,
|
||||
UserMessage,
|
||||
AiMessage,
|
||||
SystemMessage
|
||||
SystemMessage,
|
||||
ToolExecutionResultMessage
|
||||
} from '../types/chatHistory';
|
||||
|
||||
/**
|
||||
@ -20,6 +21,8 @@ export class ChatHistoryManager {
|
||||
private baseDir: string; // ~/.iccoder
|
||||
private currentTaskId: string | null = null;
|
||||
private currentProjectPath: string | null = null;
|
||||
// 存储每个面板的任务信息（taskId 和 projectPath）
|
||||
private panelTaskMap: Map<string, { taskId: string; projectPath: string }> = new Map();
|
||||
|
||||
private constructor() {
|
||||
// 设置存储路径: ~/.iccoder
|
||||
@ -33,12 +36,13 @@ export class ChatHistoryManager {
|
||||
* 规则：
|
||||
* - 替换 \ 和 / 为 --
|
||||
* - 替换 : 为空
|
||||
* 例如：C:\Users\admin\Documents\Project -> C--Users-admin-Documents-Project
|
||||
* 例如：C:\Users\admin\Documents\Project -> C--Users--admin--Documents--Project
|
||||
*/
|
||||
private encodeProjectPath(projectPath: string): string {
|
||||
return projectPath
|
||||
.replace(/:/g, '') // 移除冒号
|
||||
.replace(/[/\\]/g, '--'); // 替换斜杠为 --
|
||||
.replace(/\\/g, '--') // 替换反斜杠为 --
|
||||
.replace(/\//g, '--') // 替换正斜杠为 --
|
||||
.replace(/:/g, ''); // 移除冒号
|
||||
}
|
||||
|
||||
/**
|
||||
@ -107,6 +111,43 @@ export class ChatHistoryManager {
|
||||
return ChatHistoryManager.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* 为面板设置任务ID
|
||||
*/
|
||||
public setPanelTask(panelId: string, taskId: string, projectPath: string): void {
|
||||
this.panelTaskMap.set(panelId, { taskId, projectPath });
|
||||
this.currentTaskId = taskId;
|
||||
this.currentProjectPath = projectPath;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取面板的任务ID
|
||||
*/
|
||||
public getPanelTask(panelId: string): string | null {
|
||||
const taskInfo = this.panelTaskMap.get(panelId);
|
||||
return taskInfo ? taskInfo.taskId : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换到指定面板的任务上下文
|
||||
*/
|
||||
public switchToPanelTask(panelId: string): boolean {
|
||||
const taskInfo = this.panelTaskMap.get(panelId);
|
||||
if (taskInfo) {
|
||||
this.currentTaskId = taskInfo.taskId;
|
||||
this.currentProjectPath = taskInfo.projectPath;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除面板的任务映射
|
||||
*/
|
||||
public removePanelTask(panelId: string): void {
|
||||
this.panelTaskMap.delete(panelId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新任务
|
||||
*/
|
||||
@ -264,17 +305,11 @@ export class ChatHistoryManager {
|
||||
}
|
||||
|
||||
/**
|
||||
* 确保有当前任务，如果没有则自动创建
|
||||
* 确保有当前任务，如果没有则抛出错误
|
||||
*/
|
||||
private async ensureCurrentTask(): Promise<void> {
|
||||
if (!this.currentTaskId || !this.currentProjectPath) {
|
||||
// 获取当前工作区路径
|
||||
const workspacePath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
|
||||
if (workspacePath) {
|
||||
await this.createTask(workspacePath, "默认任务");
|
||||
} else {
|
||||
throw new Error("没有打开的工作区，无法创建任务");
|
||||
}
|
||||
throw new Error("没有当前任务上下文，请确保已正确初始化面板任务");
|
||||
}
|
||||
}
|
||||
|
||||
@ -300,14 +335,15 @@ export class ChatHistoryManager {
|
||||
/**
|
||||
* 添加AI消息
|
||||
*/
|
||||
public async addAiMessage(text: string, toolRequests?: any[]): Promise<void> {
|
||||
public async addAiMessage(text: string, toolRequests?: any[], segments?: any[]): Promise<void> {
|
||||
await this.ensureCurrentTask();
|
||||
const messages = await this.loadConversation();
|
||||
|
||||
const aiMessage: AiMessage = {
|
||||
type: MessageType.AI,
|
||||
text,
|
||||
toolExecutionRequests: toolRequests
|
||||
toolExecutionRequests: toolRequests,
|
||||
segments // 保存完整的 segments 信息
|
||||
};
|
||||
|
||||
messages.push(aiMessage);
|
||||
@ -333,6 +369,24 @@ export class ChatHistoryManager {
|
||||
await this.saveConversation(messages);
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加工具执行结果消息
|
||||
*/
|
||||
public async addToolExecutionResult(id: string, toolName: string, result: string): Promise<void> {
|
||||
await this.ensureCurrentTask();
|
||||
const messages = await this.loadConversation();
|
||||
|
||||
const toolResultMessage: ToolExecutionResultMessage = {
|
||||
type: MessageType.TOOL_EXECUTION_RESULT,
|
||||
id,
|
||||
toolName,
|
||||
text: result
|
||||
};
|
||||
|
||||
messages.push(toolResultMessage);
|
||||
await this.saveConversation(messages);
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录对话轮次元数据
|
||||
*/
|
||||
@ -450,6 +504,20 @@ export class ChatHistoryManager {
|
||||
tasks.push(JSON.parse(data));
|
||||
} catch (error) {
|
||||
console.error(`加载任务 ${taskId} 失败:`, error);
|
||||
// 跳过无效的任务目录
|
||||
// 尝试清理空目录
|
||||
try {
|
||||
const taskDirUri = vscode.Uri.file(path.join(projectDir, taskId));
|
||||
const taskDirEntries = await vscode.workspace.fs.readDirectory(taskDirUri);
|
||||
if (taskDirEntries.length === 0) {
|
||||
// 目录为空，删除它
|
||||
await vscode.workspace.fs.delete(taskDirUri, { recursive: false });
|
||||
console.log(`已清理空任务目录: ${taskId}`);
|
||||
}
|
||||
} catch (cleanupError) {
|
||||
// 清理失败，忽略错误
|
||||
console.warn(`清理任务目录 ${taskId} 失败:`, cleanupError);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -494,4 +562,132 @@ export class ChatHistoryManager {
|
||||
public getBaseDir(): string {
|
||||
return this.baseDir;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载指定任务的会话内容
|
||||
* @param projectPath 项目路径
|
||||
* @param taskId 任务ID
|
||||
* @returns 任务会话内容，如果任务不存在则返回null
|
||||
*/
|
||||
public async loadTaskSession(projectPath: string, taskId: string): Promise<TaskSession | null> {
|
||||
const taskDir = this.getTaskDir(projectPath, taskId);
|
||||
const metaPath = path.join(taskDir, 'meta.json');
|
||||
|
||||
try {
|
||||
// 检查任务是否存在
|
||||
const metaUri = vscode.Uri.file(metaPath);
|
||||
const metaContent = await vscode.workspace.fs.readFile(metaUri);
|
||||
const meta: TaskMeta = JSON.parse(Buffer.from(metaContent).toString('utf-8'));
|
||||
|
||||
// 读取会话内容
|
||||
const conversationPath = path.join(taskDir, 'conversation.json');
|
||||
let messages: ChatMessage[] = [];
|
||||
try {
|
||||
const conversationUri = vscode.Uri.file(conversationPath);
|
||||
const conversationContent = await vscode.workspace.fs.readFile(conversationUri);
|
||||
messages = JSON.parse(Buffer.from(conversationContent).toString('utf-8'));
|
||||
} catch {
|
||||
// 会话文件不存在，使用空数组
|
||||
}
|
||||
|
||||
// 读取会话元数据
|
||||
const conversationMetaPath = path.join(taskDir, 'conversation_meta.jsonl');
|
||||
let conversationMeta: ConversationMeta[] = [];
|
||||
try {
|
||||
const metaUri = vscode.Uri.file(conversationMetaPath);
|
||||
const content = await vscode.workspace.fs.readFile(metaUri);
|
||||
const data = Buffer.from(content).toString('utf-8');
|
||||
conversationMeta = data
|
||||
.split('\n')
|
||||
.filter(line => line.trim())
|
||||
.map(line => JSON.parse(line));
|
||||
} catch {
|
||||
// 元数据文件不存在，使用空数组
|
||||
}
|
||||
|
||||
return {
|
||||
meta,
|
||||
messages,
|
||||
conversationMeta
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`加载任务 ${taskId} 的会话失败:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取会话历史列表（支持分页）
|
||||
* 返回格式：{ id: taskId, title: 第一句用户消息, timestamp: 创建时间 }
|
||||
* @param projectPath 项目路径
|
||||
* @param offset 偏移量（从第几条开始，默认0）
|
||||
* @param limit 每页数量（默认10条）
|
||||
* @returns { items: 历史列表, total: 总数, hasMore: 是否还有更多 }
|
||||
*/
|
||||
public async getConversationHistoryList(
|
||||
projectPath: string,
|
||||
offset: number = 0,
|
||||
limit: number = 10
|
||||
): Promise<{
|
||||
items: Array<{ id: string; title: string; timestamp: string }>;
|
||||
total: number;
|
||||
hasMore: boolean;
|
||||
}> {
|
||||
const tasks = await this.listProjectTasks(projectPath);
|
||||
const total = tasks.length;
|
||||
const historyList: Array<{ id: string; title: string; timestamp: string }> = [];
|
||||
|
||||
// 计算分页范围
|
||||
const start = offset;
|
||||
const end = Math.min(offset + limit, total);
|
||||
const limitedTasks = tasks.slice(start, end);
|
||||
|
||||
for (const task of limitedTasks) {
|
||||
// 读取该任务的 conversation.json 获取第一句用户消息
|
||||
const taskDir = this.getTaskDir(task.projectPath, task.taskId);
|
||||
const conversationPath = path.join(taskDir, 'conversation.json');
|
||||
|
||||
try {
|
||||
const uri = vscode.Uri.file(conversationPath);
|
||||
const content = await vscode.workspace.fs.readFile(uri);
|
||||
const data = Buffer.from(content).toString('utf-8');
|
||||
const messages: ChatMessage[] = JSON.parse(data);
|
||||
|
||||
// 找到第一条用户消息
|
||||
const firstUserMessage = messages.find(msg => msg.type === MessageType.USER) as UserMessage | undefined;
|
||||
|
||||
let title = '未命名会话';
|
||||
if (firstUserMessage && firstUserMessage.contents && firstUserMessage.contents.length > 0) {
|
||||
const textContent = firstUserMessage.contents.find(c => c.type === 'TEXT');
|
||||
if (textContent && 'text' in textContent) {
|
||||
// 截取前50个字符作为标题
|
||||
title = textContent.text.length > 50
|
||||
? textContent.text.substring(0, 50) + '...'
|
||||
: textContent.text;
|
||||
}
|
||||
}
|
||||
|
||||
historyList.push({
|
||||
id: task.taskId,
|
||||
title,
|
||||
timestamp: task.createdAt
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`读取任务 ${task.taskId} 的会话历史失败:`, error);
|
||||
// 如果读取失败，使用任务名称作为标题
|
||||
historyList.push({
|
||||
id: task.taskId,
|
||||
title: task.taskName || '未命名会话',
|
||||
timestamp: task.createdAt
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 返回分页结果
|
||||
return {
|
||||
items: historyList,
|
||||
total,
|
||||
hasMore: end < total
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -170,6 +170,20 @@ async function handleUserMessageWithBackend(
|
||||
});
|
||||
console.log('[MessageHandler] postMessage 返回值:', result);
|
||||
|
||||
// 保存完整的 segments 到历史记录
|
||||
try {
|
||||
// 将完整的 segments 保存到一条 AI 消息中
|
||||
// 这样加载时可以完整还原对话样式
|
||||
const textContent = segments
|
||||
.filter(s => s.type === 'text' && s.content)
|
||||
.map(s => s.content)
|
||||
.join('\n');
|
||||
|
||||
await historyManager.addAiMessage(textContent, undefined, segments);
|
||||
} catch (error) {
|
||||
console.warn("保存AI响应历史失败:", error);
|
||||
}
|
||||
|
||||
resolve();
|
||||
},
|
||||
|
||||
|
||||
@ -32,12 +32,12 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||
panel.iconPath = vscode.Uri.joinPath(
|
||||
context.extensionUri,
|
||||
"media",
|
||||
"图案（方底）.png"
|
||||
"icon.png"
|
||||
);
|
||||
|
||||
// 获取页面内图标URI
|
||||
const iconUri = panel.webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(context.extensionUri, "media", "图案（方底）.png")
|
||||
vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
|
||||
);
|
||||
// 设置HTML内容
|
||||
panel.webview.html = getWebviewContent(iconUri.toString());
|
||||
@ -59,7 +59,12 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||
handleRenameFile(panel, message.oldPath, message.newPath);
|
||||
break;
|
||||
case "replaceInFile":
|
||||
handleReplaceInFile(panel, message.filePath, message.searchText, message.replaceText);
|
||||
handleReplaceInFile(
|
||||
panel,
|
||||
message.filePath,
|
||||
message.searchText,
|
||||
message.replaceText
|
||||
);
|
||||
break;
|
||||
case "insertCode":
|
||||
insertCodeToEditor(message.code);
|
||||
@ -77,7 +82,11 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||
break;
|
||||
// 新增：处理用户回答
|
||||
case "submitAnswer":
|
||||
handleUserAnswer(message.askId, message.selected, message.customInput);
|
||||
handleUserAnswer(
|
||||
message.askId,
|
||||
message.selected,
|
||||
message.customInput
|
||||
);
|
||||
break;
|
||||
// 新增：中止对话
|
||||
case "abortDialog":
|
||||
@ -94,7 +103,23 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||
* 侧边栏视图提供者
|
||||
*/
|
||||
export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
constructor(private readonly extensionUri: vscode.Uri) {}
|
||||
constructor(
|
||||
private readonly extensionUri: vscode.Uri,
|
||||
private readonly context: vscode.ExtensionContext
|
||||
) {}
|
||||
|
||||
/**
|
||||
* 检查登录状态（使用 Authentication API）
|
||||
*/
|
||||
private async checkLoginStatus(): Promise<boolean> {
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
|
||||
return !!session;
|
||||
} catch (error) {
|
||||
console.log("检查登录状态失败:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
resolveWebviewView(webviewView: vscode.WebviewView) {
|
||||
webviewView.webview.options = {
|
||||
@ -102,19 +127,30 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
localResourceRoots: [vscode.Uri.joinPath(this.extensionUri, "media")],
|
||||
};
|
||||
|
||||
webviewView.webview.html = this.getWebviewContent(webviewView.webview);
|
||||
// 检查是否已登录（使用 Authentication API）
|
||||
this.checkLoginStatus().then((isLoggedIn) => {
|
||||
webviewView.webview.html = this.getWebviewContent(
|
||||
webviewView.webview,
|
||||
isLoggedIn
|
||||
);
|
||||
});
|
||||
|
||||
// 处理侧边栏的消息
|
||||
webviewView.webview.onDidReceiveMessage((message) => {
|
||||
if (message.command === "openChat") {
|
||||
vscode.commands.executeCommand("ic-coder.openChat");
|
||||
} else if (message.command === "login") {
|
||||
vscode.commands.executeCommand("ic-coder.login");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getWebviewContent(webview: vscode.Webview): string {
|
||||
private getWebviewContent(
|
||||
webview: vscode.Webview,
|
||||
isLoggedIn: boolean
|
||||
): string {
|
||||
const logoUri = webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(this.extensionUri, "media", "ICCoder主页标志.png")
|
||||
vscode.Uri.joinPath(this.extensionUri, "media", "icon.png")
|
||||
);
|
||||
|
||||
return `
|
||||
@ -175,7 +211,11 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
<div class="container">
|
||||
<img src="${logoUri}" alt="IC Coder" width="120" />
|
||||
<h2>欢迎使用 IC Coder</h2>
|
||||
<button class="btn" onclick="openChat()">开始创作</button>
|
||||
${
|
||||
isLoggedIn
|
||||
? '<button class="btn" onclick="openChat()">开始创作</button>'
|
||||
: '<button class="btn" onclick="login()">登录账户</button>'
|
||||
}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -185,6 +225,11 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
vscode.postMessage({ command: 'openChat' });
|
||||
}
|
||||
|
||||
// 登录功能
|
||||
function login() {
|
||||
vscode.postMessage({ command: 'login' });
|
||||
}
|
||||
|
||||
function generateCode(type) {
|
||||
const code = getCodeTemplate(type);
|
||||
vscode.postMessage({
|
||||
|
||||
162
src/views/agentModeSelector.ts
Normal file
162
src/views/agentModeSelector.ts
Normal file
@ -0,0 +1,162 @@
|
||||
/**
|
||||
* 模式选择器组件
|
||||
* 提供 Agent/Ask/Auto 三种模式的选择功能
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取模式选择器的 HTML 内容
|
||||
*/
|
||||
export function getModeSelectorContent(): string {
|
||||
return `
|
||||
<div class="tooltip">
|
||||
<div class="mode-select" id="modeSelect">
|
||||
<div class="mode-trigger" onclick="toggleModeDropdown()">
|
||||
<span class="mode-value" id="modeValue">Agent</span>
|
||||
<svg class="mode-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M507.8 727.728a30.016 30.016 0 0 1-21.288-8.824L231.104 463.496a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l234.128 234.128 234.16-234.128a30.088 30.088 0 0 1 42.568 0 30.088 30.088 0 0 1 0 42.568L529.08 718.904a30 30 0 0 1-21.28 8.824z" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mode-dropdown" id="modeDropdown">
|
||||
<div class="mode-option" data-value="agent" onclick="selectMode('agent', 'Agent')">Agent</div>
|
||||
<div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">Ask</div>
|
||||
<div class="mode-option" data-value="auto" onclick="selectMode('auto', 'Auto')">Auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tooltiptext">切换模式</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模式选择器的样式
|
||||
*/
|
||||
export function getModeSelectorStyles(): string {
|
||||
return `
|
||||
/* 模式选择器样式 */
|
||||
.mode-select {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.mode-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: var(--vscode-input-background);
|
||||
color: var(--vscode-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.mode-trigger:hover {
|
||||
background: var(--vscode-list-hoverBackground);
|
||||
}
|
||||
.mode-value {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mode-arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.mode-select.active .mode-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.mode-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 2px);
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
background: var(--vscode-dropdown-background);
|
||||
border: 1px solid var(--vscode-dropdown-border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mode-select.active .mode-dropdown {
|
||||
display: block;
|
||||
}
|
||||
/* 模式选择器的选项样式 */
|
||||
.mode-option {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mode-option:hover {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
.mode-option.selected {
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模式选择器的脚本
|
||||
*/
|
||||
export function getModeSelectorScript(): string {
|
||||
return `
|
||||
// 模式选择器相关变量
|
||||
let currentMode = 'agent';
|
||||
|
||||
// 切换模式下拉框显示/隐藏
|
||||
function toggleModeDropdown() {
|
||||
const modeSelect = document.getElementById('modeSelect');
|
||||
const modelSelect = document.getElementById('modelSelect');
|
||||
if (modeSelect) {
|
||||
modeSelect.classList.toggle('active');
|
||||
// 关闭模型下拉框
|
||||
if (modelSelect) {
|
||||
modelSelect.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择模式
|
||||
function selectMode(value, label) {
|
||||
currentMode = value;
|
||||
const modeValue = document.getElementById('modeValue');
|
||||
if (modeValue) {
|
||||
modeValue.textContent = label;
|
||||
}
|
||||
|
||||
// 更新选中状态
|
||||
const options = document.querySelectorAll('.mode-option');
|
||||
options.forEach(option => {
|
||||
if (option.getAttribute('data-value') === value) {
|
||||
option.classList.add('selected');
|
||||
} else {
|
||||
option.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭下拉框
|
||||
const modeSelect = document.getElementById('modeSelect');
|
||||
if (modeSelect) {
|
||||
modeSelect.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前模式
|
||||
function getCurrentMode() {
|
||||
return currentMode;
|
||||
}
|
||||
|
||||
// 点击外部关闭模式下拉框
|
||||
document.addEventListener('click', (event) => {
|
||||
const modeSelect = document.getElementById('modeSelect');
|
||||
|
||||
if (modeSelect && !modeSelect.contains(event.target)) {
|
||||
modeSelect.classList.remove('active');
|
||||
}
|
||||
});
|
||||
`;
|
||||
}
|
||||
71
src/views/contextButton.ts
Normal file
71
src/views/contextButton.ts
Normal file
@ -0,0 +1,71 @@
|
||||
/**
|
||||
* 添加上下文按钮组件
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取添加上下文按钮的 HTML 内容
|
||||
*/
|
||||
export function getContextButtonContent(): string {
|
||||
return `
|
||||
<div class="tooltip">
|
||||
<button class="add-context-button" onclick="handleAddContext()">
|
||||
<svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200">
|
||||
<path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path>
|
||||
</svg>
|
||||
<span class="add-context-label">添加上下文</span>
|
||||
</button>
|
||||
<span class="tooltiptext">添加文件或代码片段作为上下文</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取添加上下文按钮的样式
|
||||
*/
|
||||
export function getContextButtonStyles(): string {
|
||||
return `
|
||||
/* 添加上下文按钮样式 */
|
||||
.add-context-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
color: var(--vscode-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-context-button:hover {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
border-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
.add-context-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.add-context-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取添加上下文按钮的脚本
|
||||
*/
|
||||
export function getContextButtonScript(): string {
|
||||
return `
|
||||
// 添加上下文处理函数
|
||||
function handleAddContext() {
|
||||
// 发送添加上下文请求到扩展
|
||||
vscode.postMessage({ command: 'addContext' });
|
||||
}
|
||||
`;
|
||||
}
|
||||
249
src/views/contextCompress.ts
Normal file
249
src/views/contextCompress.ts
Normal file
@ -0,0 +1,249 @@
|
||||
/**
|
||||
* 上下文压缩组件
|
||||
* 提供上下文使用情况显示和压缩功能
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取上下文压缩组件的 HTML 内容
|
||||
*/
|
||||
export function getContextCompressContent(): string {
|
||||
return `
|
||||
<!-- 上下文显示 -->
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取上下文压缩组件的样式
|
||||
*/
|
||||
export function getContextCompressStyles(): string {
|
||||
return `
|
||||
/* 上下文显示样式 */
|
||||
.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 getContextCompressScript(): string {
|
||||
return `
|
||||
// 上下文面板相关函数
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
`;
|
||||
}
|
||||
@ -111,6 +111,10 @@ export function getConversationHistoryBarStyles(): string {
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
border-bottom: 1px solid var(--vscode-panel-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.history-item:last-child {
|
||||
@ -124,15 +128,17 @@ export function getConversationHistoryBarStyles(): string {
|
||||
.history-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-item-time {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.history-empty {
|
||||
@ -142,6 +148,14 @@ export function getConversationHistoryBarStyles(): string {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.history-load-more {
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
font-size: 12px;
|
||||
border-top: 1px solid var(--vscode-panel-border);
|
||||
}
|
||||
|
||||
.new-conversation-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@ -199,6 +213,12 @@ export function getConversationHistoryBarScript(): string {
|
||||
// 会话历史相关变量
|
||||
let conversationHistory = [];
|
||||
let currentConversationId = null;
|
||||
let currentOffset = 0;
|
||||
let totalHistory = 0;
|
||||
let hasMoreHistory = false;
|
||||
let isLoadingHistory = false;
|
||||
const HISTORY_PAGE_SIZE = 10;
|
||||
const MAX_HISTORY_ITEMS = 100;
|
||||
|
||||
// 切换历史记录下拉菜单
|
||||
function toggleHistoryDropdown() {
|
||||
@ -211,33 +231,90 @@ export function getConversationHistoryBarScript(): string {
|
||||
} else {
|
||||
menu.classList.add('active');
|
||||
button.classList.add('active');
|
||||
// 加载会话历史
|
||||
loadConversationHistory();
|
||||
// 重置并加载会话历史
|
||||
resetAndLoadHistory();
|
||||
}
|
||||
}
|
||||
|
||||
// 加载会话历史
|
||||
function loadConversationHistory() {
|
||||
vscode.postMessage({ command: 'loadConversationHistory' });
|
||||
// 重置并加载会话历史
|
||||
function resetAndLoadHistory() {
|
||||
conversationHistory = [];
|
||||
currentOffset = 0;
|
||||
totalHistory = 0;
|
||||
hasMoreHistory = false;
|
||||
const historyList = document.getElementById('historyList');
|
||||
if (historyList) {
|
||||
historyList.innerHTML = '<div class="history-empty">加载中...</div>';
|
||||
}
|
||||
loadMoreHistory();
|
||||
}
|
||||
|
||||
// 渲染会话历史列表
|
||||
function renderConversationHistory(history) {
|
||||
conversationHistory = history;
|
||||
const historyList = document.getElementById('historyList');
|
||||
// 加载更多会话历史
|
||||
function loadMoreHistory() {
|
||||
if (isLoadingHistory || (currentOffset > 0 && !hasMoreHistory)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!history || history.length === 0) {
|
||||
// 检查是否已达到最大数量
|
||||
if (currentOffset >= MAX_HISTORY_ITEMS) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoadingHistory = true;
|
||||
vscode.postMessage({
|
||||
command: 'loadConversationHistory',
|
||||
offset: currentOffset,
|
||||
limit: HISTORY_PAGE_SIZE
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染会话历史列表（支持追加）
|
||||
function renderConversationHistory(data) {
|
||||
isLoadingHistory = false;
|
||||
|
||||
if (!data || !data.items) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 追加新数据
|
||||
conversationHistory = conversationHistory.concat(data.items);
|
||||
totalHistory = data.total;
|
||||
hasMoreHistory = data.hasMore;
|
||||
currentOffset += data.items.length;
|
||||
|
||||
const historyList = document.getElementById('historyList');
|
||||
if (!historyList) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果没有任何历史记录
|
||||
if (conversationHistory.length === 0) {
|
||||
historyList.innerHTML = '<div class="history-empty">暂无会话历史</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
historyList.innerHTML = history.map(item => \`
|
||||
<div class="history-item"
|
||||
onclick="selectConversation('\${item.id}')">
|
||||
// 渲染所有历史记录
|
||||
historyList.innerHTML = conversationHistory.map(item => \`
|
||||
<div class="history-item" onclick="selectConversation('\${item.id}')">
|
||||
<div class="history-item-title">\${item.title || '未命名会话'}</div>
|
||||
<div class="history-item-time">\${formatTime(item.timestamp)}</div>
|
||||
</div>
|
||||
\`).join('');
|
||||
|
||||
// 如果还有更多数据，添加"加载更多"提示
|
||||
if (hasMoreHistory && currentOffset < MAX_HISTORY_ITEMS) {
|
||||
historyList.innerHTML += \`
|
||||
<div class="history-load-more" id="loadMoreIndicator">
|
||||
<span>滚动加载更多...</span>
|
||||
</div>
|
||||
\`;
|
||||
} else if (currentOffset >= MAX_HISTORY_ITEMS && hasMoreHistory) {
|
||||
historyList.innerHTML += \`
|
||||
<div class="history-load-more">
|
||||
<span>已显示最近 \${MAX_HISTORY_ITEMS} 条记录</span>
|
||||
</div>
|
||||
\`;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择会话
|
||||
@ -291,6 +368,22 @@ export function getConversationHistoryBarScript(): string {
|
||||
});
|
||||
}
|
||||
|
||||
// 监听下拉菜单滚动事件
|
||||
const historyDropdownMenu = document.getElementById('historyDropdownMenu');
|
||||
if (historyDropdownMenu) {
|
||||
historyDropdownMenu.addEventListener('scroll', () => {
|
||||
const menu = historyDropdownMenu;
|
||||
const scrollTop = menu.scrollTop;
|
||||
const scrollHeight = menu.scrollHeight;
|
||||
const clientHeight = menu.clientHeight;
|
||||
|
||||
// 当滚动到距离底部 50px 时，加载更多
|
||||
if (scrollHeight - scrollTop - clientHeight < 50) {
|
||||
loadMoreHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉菜单
|
||||
document.addEventListener('click', (event) => {
|
||||
const container = document.querySelector('.history-dropdown-container');
|
||||
|
||||
@ -1,4 +1,38 @@
|
||||
import { getWaveformPreviewContent } from "./waveformPreviewContent";
|
||||
import {
|
||||
getModelSelectorContent,
|
||||
getModelSelectorStyles,
|
||||
getModelSelectorScript
|
||||
} from "./modelSelector";
|
||||
import {
|
||||
getModeSelectorContent,
|
||||
getModeSelectorStyles,
|
||||
getModeSelectorScript
|
||||
} from "./agentModeSelector";
|
||||
import {
|
||||
getContextButtonContent,
|
||||
getContextButtonStyles,
|
||||
getContextButtonScript
|
||||
} from "./contextButton";
|
||||
import {
|
||||
getContextCompressContent,
|
||||
getContextCompressStyles,
|
||||
getContextCompressScript
|
||||
} from "./contextCompress";
|
||||
import {
|
||||
getPlanToggleContent,
|
||||
getPlanToggleStyles,
|
||||
getPlanToggleScript
|
||||
} from "./planToggle";
|
||||
import {
|
||||
getOptimizeButtonContent,
|
||||
getOptimizeButtonStyles,
|
||||
getOptimizeButtonScript
|
||||
} from "./optimizeButton";
|
||||
import {
|
||||
sendIconSvg,
|
||||
stopIconSvg
|
||||
} from "../constants/toolIcons";
|
||||
|
||||
/**
|
||||
* 获取输入区域的 HTML 内容
|
||||
@ -8,16 +42,10 @@ export function getInputAreaContent(): string {
|
||||
<div class="input-area">
|
||||
<div class="input-group">
|
||||
<div class="input-wrapper">
|
||||
<!-- Plan 开关 -->
|
||||
<div class="plan-toggle-container">
|
||||
<div class="tooltip">
|
||||
<label class="plan-toggle">
|
||||
<input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
|
||||
<span class="plan-toggle-slider"></span>
|
||||
<span class="plan-toggle-label">Plan</span>
|
||||
</label>
|
||||
<span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
|
||||
</div>
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="input-top-toolbar">
|
||||
${getContextButtonContent()}
|
||||
${getPlanToggleContent()}
|
||||
</div>
|
||||
<textarea
|
||||
id="messageInput"
|
||||
@ -26,61 +54,16 @@ export function getInputAreaContent(): string {
|
||||
></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="auto">Auto</option>
|
||||
</select>
|
||||
<span class="tooltiptext">切换模型</span>
|
||||
</div>
|
||||
${getModeSelectorContent()}
|
||||
${getModelSelectorContent()}
|
||||
</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>
|
||||
${getContextCompressContent()}
|
||||
${getOptimizeButtonContent()}
|
||||
<button id="sendButton" onclick="handleSendOrStop()">
|
||||
${sendIconSvg}
|
||||
<span style="display: none;">${stopIconSvg}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,6 +77,12 @@ export function getInputAreaContent(): string {
|
||||
*/
|
||||
export function getInputAreaStyles(): string {
|
||||
return `
|
||||
${getModeSelectorStyles()}
|
||||
${getModelSelectorStyles()}
|
||||
${getContextButtonStyles()}
|
||||
${getContextCompressStyles()}
|
||||
${getPlanToggleStyles()}
|
||||
${getOptimizeButtonStyles()}
|
||||
.input-area {
|
||||
border-top: 1px solid var(--vscode-panel-border);
|
||||
padding-top: 15px;
|
||||
@ -123,54 +112,13 @@ export function getInputAreaStyles(): string {
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
/* Plan 开关样式 */
|
||||
.plan-toggle-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.plan-toggle {
|
||||
/* 顶部工具栏样式 */
|
||||
.input-top-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.plan-toggle input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.plan-toggle-slider {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: var(--vscode-input-background);
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.plan-toggle-slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: var(--vscode-foreground);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
|
||||
background: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
|
||||
transform: translateX(16px);
|
||||
background: white;
|
||||
}
|
||||
.plan-toggle-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vscode-foreground);
|
||||
margin-bottom: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
.input-bottom-row {
|
||||
display: flex;
|
||||
@ -182,6 +130,7 @@ export function getInputAreaStyles(): string {
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.input-actions {
|
||||
@ -189,19 +138,6 @@ export function getInputAreaStyles(): string {
|
||||
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;
|
||||
@ -292,154 +228,30 @@ export function getInputAreaStyles(): string {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.optimize-button {
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
color: var(--vscode-foreground);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.2s ease;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.optimize-button:hover {
|
||||
opacity: 0.7;
|
||||
button:hover {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
.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;
|
||||
/* 发送按钮状态样式 */
|
||||
#sendButton {
|
||||
position: relative;
|
||||
min-width: 32px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
.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 {
|
||||
#sendButton svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
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;
|
||||
#sendButton.sending {
|
||||
background: var(--vscode-button-background);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
#sendButton.sending:hover {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
`;
|
||||
}
|
||||
@ -449,6 +261,16 @@ export function getInputAreaStyles(): string {
|
||||
*/
|
||||
export function getInputAreaScript(): string {
|
||||
return `
|
||||
${getModeSelectorScript()}
|
||||
${getModelSelectorScript()}
|
||||
${getContextButtonScript()}
|
||||
${getContextCompressScript()}
|
||||
${getPlanToggleScript()}
|
||||
${getOptimizeButtonScript()}
|
||||
|
||||
// 对话状态管理
|
||||
let isConversationActive = false;
|
||||
|
||||
// 自动调整 textarea 高度
|
||||
function autoResizeTextarea() {
|
||||
if (messageInput) {
|
||||
@ -468,15 +290,51 @@ export function getInputAreaScript(): string {
|
||||
messageInput.focus();
|
||||
}
|
||||
|
||||
// 切换发送按钮状态
|
||||
function setSendButtonState(isSending) {
|
||||
const sendButton = document.getElementById('sendButton');
|
||||
const children = sendButton.children;
|
||||
const sendIconContainer = children[0]; // 第一个子元素是发送图标的 SVG
|
||||
const stopIconContainer = children[1]; // 第二个子元素是包含暂停图标的 span
|
||||
|
||||
if (isSending) {
|
||||
sendButton.classList.add('sending');
|
||||
sendIconContainer.style.display = 'none';
|
||||
stopIconContainer.style.display = 'block';
|
||||
isConversationActive = true;
|
||||
} else {
|
||||
sendButton.classList.remove('sending');
|
||||
sendIconContainer.style.display = 'block';
|
||||
stopIconContainer.style.display = 'none';
|
||||
isConversationActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理发送或停止
|
||||
function handleSendOrStop() {
|
||||
if (isConversationActive) {
|
||||
// 当前正在对话，执行停止操作
|
||||
vscode.postMessage({ command: 'abortDialog' });
|
||||
setSendButtonState(false);
|
||||
} else {
|
||||
// 当前未在对话，执行发送操作
|
||||
sendMessage();
|
||||
}
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
const text = messageInput.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
const modeSelect = document.getElementById('modeSelect');
|
||||
const mode = modeSelect ? modeSelect.value : 'agent';
|
||||
const mode = getCurrentMode(); // 从模式选择器组件获取当前模式
|
||||
const model = getCurrentModel(); // 从模型选择器组件获取当前模型
|
||||
|
||||
addMessage(text, 'user');
|
||||
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
|
||||
|
||||
// 切换按钮为暂停状态
|
||||
setSendButtonState(true);
|
||||
|
||||
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode, model: model });
|
||||
messageInput.value = '';
|
||||
autoResizeTextarea(); // 重置输入框高度
|
||||
messageInput.focus();
|
||||
@ -484,140 +342,5 @@ export function getInputAreaScript(): string {
|
||||
// 重置优化状态
|
||||
resetOptimizeButton();
|
||||
}
|
||||
|
||||
// Plan 开关处理函数
|
||||
function handlePlanToggle() {
|
||||
const planToggle = document.getElementById('planToggle');
|
||||
const planTooltip = document.getElementById('planTooltip');
|
||||
|
||||
if (planToggle && planTooltip) {
|
||||
if (planToggle.checked) {
|
||||
// 开启 Plan 模式
|
||||
planTooltip.textContent = '关闭 Plan 模式';
|
||||
} else {
|
||||
// 关闭 Plan 模式
|
||||
planTooltip.textContent = '启用 Plan 模式';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
`;
|
||||
}
|
||||
|
||||
@ -639,6 +639,19 @@ export function getMessageAreaScript(): string {
|
||||
return toolNameMap[toolName] || toolName;
|
||||
}
|
||||
|
||||
// 检查用户是否在底部附近（允许50px的误差）
|
||||
function isUserNearBottom() {
|
||||
const threshold = 50;
|
||||
return messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < threshold;
|
||||
}
|
||||
|
||||
// 智能滚动：只有用户在底部附近时才自动滚动
|
||||
function smartScrollToBottom() {
|
||||
if (isUserNearBottom()) {
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加消息
|
||||
function addMessage(text, sender) {
|
||||
const div = document.createElement('div');
|
||||
@ -685,7 +698,7 @@ export function getMessageAreaScript(): string {
|
||||
}
|
||||
|
||||
messagesEl.appendChild(div);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
smartScrollToBottom();
|
||||
|
||||
// 添加消息后检查 header 显示状态
|
||||
checkHeaderVisibility();
|
||||
@ -755,8 +768,8 @@ export function getMessageAreaScript(): string {
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
// 智能滚动到底部
|
||||
smartScrollToBottom();
|
||||
}
|
||||
|
||||
// 完成流式消息
|
||||
@ -782,7 +795,7 @@ export function getMessageAreaScript(): string {
|
||||
currentStreamingMessage = null;
|
||||
}
|
||||
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
smartScrollToBottom();
|
||||
}
|
||||
|
||||
// 显示加载指示器
|
||||
@ -798,7 +811,7 @@ export function getMessageAreaScript(): string {
|
||||
<span class="loading-text">\${text}</span>
|
||||
\`;
|
||||
messagesEl.appendChild(loadingIndicator);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
smartScrollToBottom();
|
||||
}
|
||||
|
||||
// 隐藏加载指示器
|
||||
@ -1048,8 +1061,8 @@ export function getMessageAreaScript(): string {
|
||||
currentSegmentedMessage = null;
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
// 智能滚动到底部
|
||||
smartScrollToBottom();
|
||||
}
|
||||
|
||||
// 渲染分段消息（兼容旧代码）
|
||||
@ -1212,7 +1225,7 @@ export function getMessageAreaScript(): string {
|
||||
container.appendChild(actionsDiv);
|
||||
|
||||
messagesEl.appendChild(container);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
smartScrollToBottom();
|
||||
}
|
||||
|
||||
// 格式化文本（支持 Markdown）
|
||||
@ -1283,7 +1296,7 @@ export function getMessageAreaScript(): string {
|
||||
\${detail ? \`<div class="tool-detail">\${detail}</div>\` : ''}
|
||||
\`;
|
||||
messagesEl.appendChild(div);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
smartScrollToBottom();
|
||||
|
||||
// 添加消息后检查 header 显示状态
|
||||
checkHeaderVisibility();
|
||||
@ -1343,7 +1356,7 @@ export function getMessageAreaScript(): string {
|
||||
div.appendChild(customContainer);
|
||||
|
||||
messagesEl.appendChild(div);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
smartScrollToBottom();
|
||||
|
||||
// 添加消息后检查 header 显示状态
|
||||
checkHeaderVisibility();
|
||||
|
||||
250
src/views/modelSelector.ts
Normal file
250
src/views/modelSelector.ts
Normal file
@ -0,0 +1,250 @@
|
||||
/**
|
||||
* 模型选择器组件
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取模型选择器的 HTML 内容
|
||||
*/
|
||||
export function getModelSelectorContent(): string {
|
||||
return `
|
||||
<!-- 模型选择 -->
|
||||
<div class="tooltip">
|
||||
<div class="custom-select" id="modelSelect">
|
||||
<div class="select-trigger" onclick="toggleModelDropdown()">
|
||||
<span class="select-value" id="modelValue">Auto</span>
|
||||
<svg class="select-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M507.8 727.728a30.016 30.016 0 0 1-21.288-8.824L231.104 463.496a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l234.128 234.128 234.16-234.128a30.088 30.088 0 0 1 42.568 0 30.088 30.088 0 0 1 0 42.568L529.08 718.904a30 30 0 0 1-21.28 8.824z" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="select-dropdown" id="modelDropdown">
|
||||
<div class="select-option" data-value="lite" data-tooltip="快速响应，适合简单任务" onclick="selectModel('lite', 'Lite')">Lite</div>
|
||||
<div class="select-option selected" data-value="auto" data-tooltip="自动选择最佳模型" onclick="selectModel('auto', 'Auto')">Auto</div>
|
||||
<div class="select-option" data-value="syntaxic" data-tooltip="语法分析和代码理解" onclick="selectModel('syntaxic', 'Syntaxic')">Syntaxic</div>
|
||||
<div class="select-option" data-value="max" data-tooltip="最强性能，复杂任务" onclick="selectModel('max', 'Max')">Max</div>
|
||||
</div>
|
||||
<!-- 模型选择器的 tooltip 容器 -->
|
||||
<div id="modelTooltip" class="model-tooltip"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">选择模型</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模型选择器的样式
|
||||
*/
|
||||
export function getModelSelectorStyles(): string {
|
||||
return `
|
||||
/* 自定义下拉框样式 */
|
||||
.custom-select {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.select-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: var(--vscode-input-background);
|
||||
color: var(--vscode-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.select-trigger:hover {
|
||||
background: var(--vscode-list-hoverBackground);
|
||||
}
|
||||
.select-value {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.select-arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.custom-select.active .select-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.select-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 2px);
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
background: var(--vscode-dropdown-background);
|
||||
border: 1px solid var(--vscode-dropdown-border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
overflow: visible;
|
||||
}
|
||||
.custom-select.active .select-dropdown {
|
||||
display: block;
|
||||
}
|
||||
/* 模型选择器的选项样式 */
|
||||
#modelDropdown .select-option {
|
||||
position: relative;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#modelDropdown .select-option:hover {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
#modelDropdown .select-option.selected {
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
/* 模型选择器的 tooltip 样式 */
|
||||
.model-tooltip {
|
||||
position: fixed;
|
||||
background: #1e1e1e;
|
||||
color: #ffffff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
.model-tooltip.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
/* tooltip 箭头 */
|
||||
.model-tooltip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-width: 7px;
|
||||
border-style: solid;
|
||||
border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
|
||||
z-index: -1;
|
||||
}
|
||||
.model-tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: transparent #1e1e1e transparent transparent;
|
||||
margin-right: 1px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模型选择器的脚本
|
||||
*/
|
||||
export function getModelSelectorScript(): string {
|
||||
return `
|
||||
// 模型选择相关变量
|
||||
let currentModel = 'auto';
|
||||
|
||||
// 切换模型下拉框显示/隐藏
|
||||
function toggleModelDropdown() {
|
||||
const modelSelect = document.getElementById('modelSelect');
|
||||
const customSelect = document.getElementById('customSelect');
|
||||
if (modelSelect) {
|
||||
modelSelect.classList.toggle('active');
|
||||
// 关闭模式下拉框
|
||||
if (customSelect) {
|
||||
customSelect.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择模型
|
||||
function selectModel(value, label) {
|
||||
currentModel = value;
|
||||
const modelValue = document.getElementById('modelValue');
|
||||
if (modelValue) {
|
||||
modelValue.textContent = label;
|
||||
}
|
||||
|
||||
// 更新选中状态
|
||||
const options = document.querySelectorAll('#modelDropdown .select-option');
|
||||
options.forEach(option => {
|
||||
if (option.getAttribute('data-value') === value) {
|
||||
option.classList.add('selected');
|
||||
} else {
|
||||
option.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭下拉框
|
||||
const modelSelect = document.getElementById('modelSelect');
|
||||
if (modelSelect) {
|
||||
modelSelect.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 点击外部关闭模型下拉框
|
||||
document.addEventListener('click', (event) => {
|
||||
const modelSelect = document.getElementById('modelSelect');
|
||||
if (modelSelect && !modelSelect.contains(event.target)) {
|
||||
modelSelect.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 获取当前选中的模型
|
||||
function getCurrentModel() {
|
||||
return currentModel;
|
||||
}
|
||||
|
||||
// 模型选择器 tooltip 功能
|
||||
(function initModelTooltip() {
|
||||
const modelDropdown = document.getElementById('modelDropdown');
|
||||
const modelTooltip = document.getElementById('modelTooltip');
|
||||
|
||||
if (!modelDropdown || !modelTooltip) return;
|
||||
|
||||
// 为每个选项添加鼠标事件
|
||||
const options = modelDropdown.querySelectorAll('.select-option');
|
||||
|
||||
options.forEach(option => {
|
||||
option.addEventListener('mouseenter', function(e) {
|
||||
const tooltipText = this.getAttribute('data-tooltip');
|
||||
if (!tooltipText) return;
|
||||
|
||||
// 设置 tooltip 内容
|
||||
modelTooltip.textContent = tooltipText;
|
||||
|
||||
// 获取选项的位置
|
||||
const rect = this.getBoundingClientRect();
|
||||
|
||||
// 计算 tooltip 位置（在选项右侧）
|
||||
const tooltipRect = modelTooltip.getBoundingClientRect();
|
||||
const left = rect.right + 12;
|
||||
const top = rect.top + (rect.height / 2) - (tooltipRect.height / 2);
|
||||
|
||||
// 设置位置
|
||||
modelTooltip.style.left = left + 'px';
|
||||
modelTooltip.style.top = top + 'px';
|
||||
|
||||
// 显示 tooltip
|
||||
modelTooltip.classList.add('show');
|
||||
});
|
||||
|
||||
option.addEventListener('mouseleave', function() {
|
||||
// 隐藏 tooltip
|
||||
modelTooltip.classList.remove('show');
|
||||
});
|
||||
});
|
||||
})();
|
||||
`;
|
||||
}
|
||||
117
src/views/optimizeButton.ts
Normal file
117
src/views/optimizeButton.ts
Normal file
@ -0,0 +1,117 @@
|
||||
/**
|
||||
* 一键优化按钮组件
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取一键优化按钮的 HTML 内容
|
||||
*/
|
||||
export function getOptimizeButtonContent(): string {
|
||||
return `
|
||||
<!-- 一键优化按钮 -->
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一键优化按钮的样式
|
||||
*/
|
||||
export function getOptimizeButtonStyles(): string {
|
||||
return `
|
||||
/* 一键优化按钮样式 */
|
||||
.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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一键优化按钮的脚本
|
||||
*/
|
||||
export function getOptimizeButtonScript(): string {
|
||||
return `
|
||||
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 = '';
|
||||
}
|
||||
`;
|
||||
}
|
||||
100
src/views/planToggle.ts
Normal file
100
src/views/planToggle.ts
Normal file
@ -0,0 +1,100 @@
|
||||
/**
|
||||
* Plan 开关组件
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取 Plan 开关的 HTML 内容
|
||||
*/
|
||||
export function getPlanToggleContent(): string {
|
||||
return `
|
||||
<div class="tooltip">
|
||||
<label class="plan-toggle">
|
||||
<input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
|
||||
<span class="plan-toggle-slider"></span>
|
||||
<span class="plan-toggle-label">Plan</span>
|
||||
</label>
|
||||
<span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Plan 开关的样式
|
||||
*/
|
||||
export function getPlanToggleStyles(): string {
|
||||
return `
|
||||
/* Plan 开关样式 */
|
||||
.plan-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.plan-toggle input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plan-toggle-slider {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: var(--vscode-input-background);
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.plan-toggle-slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: var(--vscode-foreground);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
|
||||
background: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
|
||||
transform: translateX(16px);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.plan-toggle-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Plan 开关的脚本
|
||||
*/
|
||||
export function getPlanToggleScript(): string {
|
||||
return `
|
||||
// Plan 开关处理函数
|
||||
function handlePlanToggle() {
|
||||
const planToggle = document.getElementById('planToggle');
|
||||
const planTooltip = document.getElementById('planTooltip');
|
||||
|
||||
if (planToggle && planTooltip) {
|
||||
if (planToggle.checked) {
|
||||
// 开启 Plan 模式
|
||||
planTooltip.textContent = '关闭 Plan 模式';
|
||||
} else {
|
||||
// 关闭 Plan 模式
|
||||
planTooltip.textContent = '启用 Plan 模式';
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
@ -352,6 +352,27 @@ export function getWebviewContent(iconUri?: string): string {
|
||||
background: var(--vscode-charts-red);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* 快捷操作按钮样式 */
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.quick-btn {
|
||||
padding: 8px 16px;
|
||||
background: var(--vscode-button-secondaryBackground);
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
border: 1px solid var(--vscode-button-border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.quick-btn:hover {
|
||||
background: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -444,6 +465,10 @@ export function getWebviewContent(iconUri?: string): string {
|
||||
// 实时更新分段消息（按后端返回顺序）
|
||||
console.log('[WebView] 实时更新段落, segments:', message.segments);
|
||||
updateSegmentsRealtime(message.segments, message.isComplete);
|
||||
// 如果对话完成，恢复发送按钮状态
|
||||
if (message.isComplete && typeof setSendButtonState === 'function') {
|
||||
setSendButtonState(false);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'receiveSegments':
|
||||
@ -532,6 +557,37 @@ export function getWebviewContent(iconUri?: string): string {
|
||||
showQuestion(message.askId, message.question, message.options);
|
||||
break;
|
||||
|
||||
case 'conversationHistory':
|
||||
// 渲染会话历史列表（支持分页）
|
||||
renderConversationHistory({
|
||||
items: message.items || [],
|
||||
total: message.total || 0,
|
||||
hasMore: message.hasMore || false
|
||||
});
|
||||
break;
|
||||
|
||||
case 'clearChat':
|
||||
// 清空聊天界面
|
||||
const messagesContainer = document.getElementById('messages');
|
||||
if (messagesContainer) {
|
||||
messagesContainer.innerHTML = '';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'addUserMessage':
|
||||
// 添加用户消息
|
||||
if (message.text) {
|
||||
addMessage(message.text, 'user');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'addAiMessage':
|
||||
// 添加AI消息
|
||||
if (message.text) {
|
||||
addMessage(message.text, 'bot');
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('[WebView] 未处理的消息类型:', message.command);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user