c61e29a41f
- 添加流式消息分段显示功能 - 支持 AI 消息的实时流式渲染 - 实现消息块（MessageChunk）的增量更新 - 使用 marked 库进行 Markdown 渲染 - 新增加载状态指示器 - 显示 AI 思考中的动画效果 - 支持加载状态的显示和隐藏 - 实现工具执行状态展示 - 显示工具调用的实时状态（执行中/成功/失败） - 展示工具名称、参数和执行结果 - 提供折叠/展开功能查看详细信息 - 添加用户问题交互 UI - 支持 AI 向用户提问的界面展示 - 显示问题内容和等待用户响应的提示 - 集成答案提交和对话中止功能 - 优化消息渲染性能 - 使用 DocumentFragment 批量更新 DOM - 避免频繁的页面重排和重绘
1330 lines
49 KiB
TypeScript
1330 lines
49 KiB
TypeScript
/**
|
||
* 获取 WebView 面板的 HTML 内容
|
||
*/
|
||
export function getWebviewContent(iconUri?: string): string {
|
||
return `<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IC Coder</title>
|
||
<style>
|
||
body {
|
||
font-family: var(--vscode-font-family);
|
||
background: var(--vscode-editor-background);
|
||
color: var(--vscode-foreground);
|
||
margin: 0;
|
||
padding: 20px;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid var(--vscode-panel-border);
|
||
}
|
||
.header h1 {
|
||
color: var(--vscode-button-background);
|
||
margin: 0 0 8px 0;
|
||
}
|
||
.chat-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
.messages {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
margin-bottom: 15px;
|
||
min-height: 0;
|
||
}
|
||
.message {
|
||
margin-bottom: 12px;
|
||
}
|
||
.user-message {
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
background: var(--vscode-button-secondaryBackground);
|
||
border: 1px solid var(--vscode-input-border);
|
||
margin-left: auto;
|
||
width: fit-content;
|
||
max-width: 80%;
|
||
}
|
||
.bot-message {
|
||
padding: 0;
|
||
text-align: left;
|
||
color: var(--vscode-foreground);
|
||
max-width: 100%;
|
||
position: relative;
|
||
}
|
||
.message-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
margin-left: 10px;
|
||
opacity: 0.85;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.message-actions:hover {
|
||
opacity: 1;
|
||
}
|
||
.action-btn {
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--vscode-foreground);
|
||
opacity: 0.9;
|
||
transition: opacity 0.2s ease;
|
||
position: relative;
|
||
}
|
||
.action-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
.action-btn svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.action-btn.active {
|
||
color: var(--vscode-button-background);
|
||
opacity: 1;
|
||
}
|
||
.action-btn .action-tooltip {
|
||
visibility: hidden;
|
||
width: auto;
|
||
background: #1e1e1e;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
padding: 4px 8px;
|
||
position: absolute;
|
||
z-index: 1000;
|
||
bottom: 125%;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(5px);
|
||
opacity: 0;
|
||
transition: all 0.2s ease;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
.action-btn .action-tooltip::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
border-width: 5px;
|
||
border-style: solid;
|
||
border-color: #1e1e1e transparent transparent transparent;
|
||
}
|
||
.action-btn .action-tooltip::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -6px;
|
||
border-width: 6px;
|
||
border-style: solid;
|
||
border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
|
||
z-index: -1;
|
||
}
|
||
.action-btn:hover .action-tooltip {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
.input-area {
|
||
border-top: 1px solid var(--vscode-panel-border);
|
||
padding-top: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
.input-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
background: var(--vscode-input-background);
|
||
border: 1px solid var(--vscode-input-border);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.input-group:hover {
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.input-group:focus-within {
|
||
border-color: var(--vscode-focusBorder);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.input-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.input-bottom-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
.mode-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.input-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.mode-selector select {
|
||
padding: 2px 4px;
|
||
background: transparent;
|
||
color: var(--vscode-foreground);
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
outline: none;
|
||
}
|
||
.mode-selector select:hover {
|
||
background: var(--vscode-list-hoverBackground);
|
||
}
|
||
/* Tooltip 样式 */
|
||
.tooltip {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tooltip .tooltiptext {
|
||
visibility: hidden;
|
||
width: auto;
|
||
background: #1e1e1e;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
padding: 6px 12px;
|
||
position: absolute;
|
||
z-index: 1000;
|
||
bottom: 150%;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(10px);
|
||
opacity: 0;
|
||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
white-space: nowrap;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.tooltip .tooltiptext::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -6px;
|
||
border-width: 6px;
|
||
border-style: solid;
|
||
border-color: #1e1e1e transparent transparent transparent;
|
||
}
|
||
.tooltip .tooltiptext::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -7px;
|
||
border-width: 7px;
|
||
border-style: solid;
|
||
border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
|
||
z-index: -1;
|
||
}
|
||
.tooltip:hover .tooltiptext {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background: transparent;
|
||
color: var(--vscode-input-foreground);
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-family: inherit;
|
||
resize: none;
|
||
min-height: 40px;
|
||
max-height: 200px;
|
||
outline: none;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
line-height: 1.5;
|
||
}
|
||
/* 简洁的滚动条样式 */
|
||
textarea::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
textarea::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
textarea::-webkit-scrollbar-thumb {
|
||
background: rgba(128, 128, 128, 0.5);
|
||
border-radius: 4px;
|
||
}
|
||
textarea::-webkit-scrollbar-button {
|
||
display: none;
|
||
}
|
||
button {
|
||
padding: 0 20px;
|
||
background: var(--vscode-button-background);
|
||
color: var(--vscode-button-foreground);
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.optimize-button {
|
||
padding: 8px;
|
||
background: transparent;
|
||
color: var(--vscode-foreground);
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: opacity 0.2s ease;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
.optimize-button:hover {
|
||
opacity: 0.7;
|
||
}
|
||
.optimize-button svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.optimize-button-wrapper {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
.quick-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
flex-wrap: wrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.quick-btn {
|
||
padding: 6px 12px;
|
||
background: var(--vscode-button-secondaryBackground);
|
||
color: var(--vscode-button-secondaryForeground);
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
.file-reader-section {
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background: var(--vscode-input-background);
|
||
border: 1px solid var(--vscode-input-border);
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.file-reader-section h3 {
|
||
margin: 0 0 10px 0;
|
||
color: var(--vscode-button-background);
|
||
}
|
||
.file-input-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.file-input-group input {
|
||
flex: 1;
|
||
padding: 8px;
|
||
background: var(--vscode-input-background);
|
||
color: var(--vscode-input-foreground);
|
||
border: 1px solid var(--vscode-input-border);
|
||
border-radius: 4px;
|
||
}
|
||
.file-content {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background: var(--vscode-editor-background);
|
||
border: 1px solid var(--vscode-panel-border);
|
||
border-radius: 4px;
|
||
max-height: 120px;
|
||
overflow-y: auto;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
.file-content.empty {
|
||
color: var(--vscode-descriptionForeground);
|
||
font-style: italic;
|
||
}
|
||
.error-message {
|
||
color: var(--vscode-errorForeground);
|
||
padding: 8px;
|
||
background: var(--vscode-inputValidation-errorBackground);
|
||
border: 1px solid var(--vscode-inputValidation-errorBorder);
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
.file-editor-section {
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background: var(--vscode-input-background);
|
||
border: 1px solid var(--vscode-input-border);
|
||
border-radius: 8px;
|
||
display: none;
|
||
flex-shrink: 0;
|
||
}
|
||
.file-editor-section.active {
|
||
display: block;
|
||
}
|
||
.file-editor-section h3 {
|
||
margin: 0 0 10px 0;
|
||
color: var(--vscode-button-background);
|
||
}
|
||
.file-editor-textarea {
|
||
width: 100%;
|
||
min-height: 300px;
|
||
padding: 10px;
|
||
background: var(--vscode-editor-background);
|
||
color: var(--vscode-editor-foreground);
|
||
border: 1px solid var(--vscode-input-border);
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
resize: vertical;
|
||
}
|
||
.editor-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
/* 上下文显示样式 */
|
||
.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);
|
||
}
|
||
}
|
||
|
||
/* 流式消息样式 */
|
||
.streaming .message-content {
|
||
border-right: 2px solid var(--vscode-focusBorder);
|
||
animation: blink 1s infinite;
|
||
}
|
||
@keyframes blink {
|
||
0%, 50% { border-color: var(--vscode-focusBorder); }
|
||
51%, 100% { border-color: transparent; }
|
||
}
|
||
|
||
/* 加载指示器样式 */
|
||
.loading-message {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 16px;
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.loading-dots {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.loading-dots span {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--vscode-focusBorder);
|
||
animation: loadingDot 1.4s infinite ease-in-out;
|
||
}
|
||
.loading-dots span:nth-child(1) { animation-delay: 0s; }
|
||
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||
@keyframes loadingDot {
|
||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
|
||
40% { transform: scale(1); opacity: 1; }
|
||
}
|
||
.loading-text {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 工具状态样式 */
|
||
.tool-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
margin: 4px 0;
|
||
font-size: 12px;
|
||
border-radius: 6px;
|
||
background: var(--vscode-textBlockQuote-background);
|
||
}
|
||
.tool-status.tool-start {
|
||
border-left: 3px solid var(--vscode-charts-blue);
|
||
}
|
||
.tool-status.tool-complete {
|
||
border-left: 3px solid var(--vscode-charts-green);
|
||
}
|
||
.tool-status.tool-error {
|
||
border-left: 3px solid var(--vscode-charts-red);
|
||
}
|
||
.tool-icon {
|
||
font-size: 14px;
|
||
}
|
||
.tool-name {
|
||
font-weight: 500;
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.tool-status-text {
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.tool-detail {
|
||
margin-top: 4px;
|
||
font-size: 11px;
|
||
color: var(--vscode-descriptionForeground);
|
||
white-space: pre-wrap;
|
||
max-height: 100px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 用户问题样式 */
|
||
.question-message {
|
||
padding: 16px;
|
||
}
|
||
.question-text {
|
||
margin-bottom: 12px;
|
||
font-weight: 500;
|
||
}
|
||
.question-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.question-option {
|
||
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;
|
||
transition: all 0.2s;
|
||
}
|
||
.question-option:hover {
|
||
background: var(--vscode-button-secondaryHoverBackground);
|
||
}
|
||
.question-option.selected {
|
||
background: var(--vscode-button-background);
|
||
color: var(--vscode-button-foreground);
|
||
}
|
||
.question-message.answered .question-option:not(.selected) {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
.custom-input-container {
|
||
display: flex;
|
||
gap: 8px;
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
}
|
||
.custom-input {
|
||
flex: 1;
|
||
padding: 8px 12px;
|
||
background: var(--vscode-input-background);
|
||
color: var(--vscode-input-foreground);
|
||
border: 1px solid var(--vscode-input-border);
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
}
|
||
.custom-submit {
|
||
padding: 8px 16px;
|
||
background: var(--vscode-button-background);
|
||
color: var(--vscode-button-foreground);
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
.custom-submit:hover {
|
||
background: var(--vscode-button-hoverBackground);
|
||
}
|
||
.question-message.answered .custom-input-container {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
|
||
<img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
|
||
<h1 style="margin: 0;">IC Coder</h1>
|
||
</div>
|
||
<p>专注于真实FPGA研发的Verilog智能体编程平台</p>
|
||
</div>
|
||
|
||
<div class="chat-container">
|
||
<div class="file-reader-section">
|
||
<h3>📁 文件读取</h3>
|
||
<div class="file-input-group">
|
||
<input
|
||
type="text"
|
||
id="filePathInput"
|
||
placeholder="输入文件路径（相对或绝对路径）..."
|
||
/>
|
||
<button onclick="readFile()">读取文件</button>
|
||
</div>
|
||
<div id="fileContent" class="file-content empty">
|
||
文件内容将在这里显示...
|
||
</div>
|
||
<div id="errorMessage" style="display: none;"></div>
|
||
</div>
|
||
|
||
<div id="fileEditorSection" class="file-editor-section">
|
||
<h3>✏️ 编辑文件: <span id="editingFileName"></span></h3>
|
||
<textarea id="fileEditorTextarea" class="file-editor-textarea"></textarea>
|
||
<div class="editor-actions">
|
||
<button onclick="saveFile()">保存修改</button>
|
||
<button onclick="cancelEdit()" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">取消</button>
|
||
</div>
|
||
</div>
|
||
<div id="messages" class="messages">
|
||
<div class="message bot-message">
|
||
👋 你好！我是 IC Coder 助手，可以帮你生成代码、回答问题。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-actions">
|
||
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
|
||
<button class="quick-btn" onclick="quickAction('fsm')">生成状态机</button>
|
||
<button class="quick-btn" onclick="quickAction('testbench')">生成测试平台</button>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<div class="input-group">
|
||
<div class="input-wrapper">
|
||
<textarea
|
||
id="messageInput"
|
||
placeholder="输入您的问题..."
|
||
onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
|
||
></textarea>
|
||
<div class="input-bottom-row">
|
||
<div class="mode-selector">
|
||
<div class="tooltip">
|
||
<select id="modeSelect">
|
||
<option value="agent" selected>Agent</option>
|
||
<option value="ask">Ask</option>
|
||
<option value="plan">Plan</option>
|
||
</select>
|
||
<span class="tooltiptext">切换模型</span>
|
||
</div>
|
||
</div>
|
||
<div class="input-actions">
|
||
<!-- 上下文显示 -->
|
||
<div class="context-display">
|
||
<div class="context-info" onclick="toggleContextPanel()">
|
||
<div class="database-icon">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" class="db-svg">
|
||
<!-- 数据库容器主体 - 底层灰色 -->
|
||
<path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#94a3b8" class="db-body"/>
|
||
|
||
<!-- 填充进度效果 - 从下往上填充蓝色 -->
|
||
<defs>
|
||
<mask id="fill-mask">
|
||
<rect x="0" y="0" width="1024" height="1024" id="fillRect" fill="white"/>
|
||
</mask>
|
||
</defs>
|
||
|
||
<g mask="url(#fill-mask)">
|
||
<path d="M870.4 57.6C780.8 19.2 652.8 0 512 0 371.2 0 243.2 19.2 153.6 57.6 51.2 102.4 0 153.6 0 211.2l0 595.2c0 57.6 51.2 115.2 153.6 153.6C243.2 1004.8 371.2 1024 512 1024c140.8 0 268.8-19.2 358.4-57.6 96-38.4 153.6-96 153.6-153.6L1024 211.2C1024 153.6 972.8 102.4 870.4 57.6L870.4 57.6zM812.8 320C729.6 352 614.4 364.8 512 364.8 403.2 364.8 294.4 352 211.2 320 115.2 294.4 70.4 256 70.4 211.2c0-38.4 51.2-76.8 140.8-108.8C294.4 76.8 403.2 64 512 64c102.4 0 217.6 19.2 300.8 44.8 89.6 32 140.8 70.4 140.8 108.8C953.6 256 908.8 294.4 812.8 320L812.8 320zM819.2 505.6C736 531.2 620.8 550.4 512 550.4c-108.8 0-217.6-19.2-307.2-44.8C115.2 473.6 64 435.2 64 396.8L64 326.4C128 352 172.8 384 243.2 396.8 326.4 416 416 428.8 512 428.8c96 0 185.6-12.8 268.8-32C851.2 384 896 352 960 326.4l0 76.8C960 435.2 908.8 473.6 819.2 505.6L819.2 505.6zM819.2 710.4c-83.2 25.6-198.4 44.8-307.2 44.8-108.8 0-217.6-19.2-307.2-44.8C115.2 684.8 64 646.4 64 601.6L64 505.6c64 32 108.8 57.6 179.2 76.8C326.4 601.6 416 614.4 512 614.4c96 0 185.6-12.8 268.8-32C851.2 563.2 896 537.6 960 505.6l0 96C960 646.4 908.8 684.8 819.2 710.4L819.2 710.4zM512 960c-108.8 0-217.6-19.2-307.2-44.8C115.2 889.6 64 851.2 64 812.8l0-96c64 32 108.8 57.6 179.2 76.8 76.8 19.2 172.8 32 262.4 32 96 0 185.6-12.8 268.8-32 76.8-19.2 121.6-44.8 185.6-76.8l0 96c0 38.4-51.2 76.8-140.8 108.8C736 947.2 614.4 960 512 960L512 960z" fill="#409eff" class="db-fill"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<span class="context-percentage" id="contextPercentage">0%</span>
|
||
</div>
|
||
|
||
<!-- 上下文信息弹窗 -->
|
||
<div id="contextPanel" class="context-panel">
|
||
<div class="context-panel-content">
|
||
<div class="context-info-text" id="contextInfoText">
|
||
0k / 200k 已用上下文
|
||
</div>
|
||
<button class="compress-button" onclick="compressConversation()">
|
||
压缩会话
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一键优化按钮 -->
|
||
<div class="tooltip">
|
||
<button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
|
||
<svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
|
||
</button>
|
||
<span class="tooltiptext" id="optimizeTooltip">一键优化</span>
|
||
</div>
|
||
|
||
<button onclick="sendMessage()">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const vscode = acquireVsCodeApi();
|
||
const messagesEl = document.getElementById('messages');
|
||
const messageInput = document.getElementById('messageInput');
|
||
const modeSelect = document.getElementById('modeSelect');
|
||
const filePathInput = document.getElementById('filePathInput');
|
||
const fileContentEl = document.getElementById('fileContent');
|
||
const errorMessageEl = document.getElementById('errorMessage');
|
||
const fileEditorSection = document.getElementById('fileEditorSection');
|
||
const fileEditorTextarea = document.getElementById('fileEditorTextarea');
|
||
const editingFileName = document.getElementById('editingFileName');
|
||
|
||
let currentEditingFile = null;
|
||
let originalText = ''; // 保存原始文本用于撤回
|
||
let isOptimized = false; // 标记是否已优化
|
||
|
||
function sendMessage() {
|
||
const text = messageInput.value.trim();
|
||
if (!text) return;
|
||
|
||
const mode = modeSelect.value;
|
||
addMessage(text, 'user');
|
||
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
|
||
messageInput.value = '';
|
||
autoResizeTextarea(); // 重置输入框高度
|
||
messageInput.focus();
|
||
|
||
// 重置优化状态
|
||
resetOptimizeButton();
|
||
}
|
||
|
||
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();
|
||
}
|
||
|
||
function updateOptimizeButton() {
|
||
const optimizeIcon = document.getElementById('optimizeIcon');
|
||
const optimizeTooltip = document.getElementById('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');
|
||
|
||
// 切换回优化图标（星星图标）
|
||
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 readFile() {
|
||
const filePath = filePathInput.value.trim();
|
||
if (!filePath) {
|
||
showError('请输入文件路径');
|
||
return;
|
||
}
|
||
|
||
// 清空之前的内容和错误
|
||
fileContentEl.textContent = '正在读取文件...';
|
||
fileContentEl.className = 'file-content';
|
||
errorMessageEl.style.display = 'none';
|
||
|
||
// 发送读取文件请求
|
||
vscode.postMessage({ command: 'readFile', filePath: filePath });
|
||
}
|
||
|
||
function showError(message) {
|
||
errorMessageEl.textContent = message;
|
||
errorMessageEl.className = 'error-message';
|
||
errorMessageEl.style.display = 'block';
|
||
fileContentEl.textContent = '文件内容将在这里显示...';
|
||
fileContentEl.className = 'file-content empty';
|
||
}
|
||
|
||
function displayFileContent(content, filePath) {
|
||
fileContentEl.textContent = content;
|
||
fileContentEl.className = 'file-content';
|
||
errorMessageEl.style.display = 'none';
|
||
|
||
// 在消息区域也显示一条提示
|
||
addMessage(\`已读取文件: \${filePath}\`, 'bot');
|
||
}
|
||
|
||
function quickAction(type) {
|
||
const questions = {
|
||
counter: '生成一个4位同步计数器',
|
||
fsm: '生成一个状态机',
|
||
testbench: '生成测试平台'
|
||
};
|
||
if (questions[type]) {
|
||
messageInput.value = questions[type];
|
||
sendMessage();
|
||
}
|
||
}
|
||
|
||
function addMessage(text, sender) {
|
||
const div = document.createElement('div');
|
||
div.className = \`message \${sender}-message\`;
|
||
|
||
if (sender === 'bot') {
|
||
// 创建消息内容
|
||
const messageContent = document.createElement('div');
|
||
messageContent.textContent = text;
|
||
div.appendChild(messageContent);
|
||
|
||
// 创建操作按钮容器
|
||
const actionsDiv = document.createElement('div');
|
||
actionsDiv.className = 'message-actions';
|
||
|
||
// 复制按钮
|
||
const copyBtn = document.createElement('button');
|
||
copyBtn.className = 'action-btn';
|
||
copyBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M761.088 715.3152a38.7072 38.7072 0 0 1 0-77.4144 37.4272 37.4272 0 0 0 37.4272-37.4272V265.0112a37.4272 37.4272 0 0 0-37.4272-37.4272H425.6256a37.4272 37.4272 0 0 0-37.4272 37.4272 38.7072 38.7072 0 1 1-77.4144 0 115.0976 115.0976 0 0 1 114.8416-114.8416h335.4624a115.0976 115.0976 0 0 1 114.8416 114.8416v335.4624a115.0976 115.0976 0 0 1-114.8416 114.8416z" fill="currentColor"/><path d="M589.4656 883.0976H268.1856a121.1392 121.1392 0 0 1-121.2928-121.2928v-322.56a121.1392 121.1392 0 0 1 121.2928-121.344h321.28a121.1392 121.1392 0 0 1 121.2928 121.2928v322.56c1.28 67.1232-54.1696 121.344-121.2928 121.344zM268.1856 395.3152a43.52 43.52 0 0 0-43.8784 43.8784v322.56a43.52 43.52 0 0 0 43.8784 43.8784h321.28a43.52 43.52 0 0 0 43.8784-43.8784v-322.56a43.52 43.52 0 0 0-43.8784-43.8784z" fill="currentColor"/></svg><span class="action-tooltip">复制</span>\`;
|
||
copyBtn.onclick = () => copyMessage(text, copyBtn);
|
||
|
||
// 点赞按钮
|
||
const likeBtn = document.createElement('button');
|
||
likeBtn.className = 'action-btn';
|
||
likeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M923.5 411.2c-28.6-33.9-72.1-53-116.4-51.1h-68c6.4-31.6 10.1-63.9 11.2-96v-0.8c-0.5-60.9-18.7-112-51.2-144-22.6-22.2-50.8-33.7-81.5-33.3-38.3 0-69.1 11.5-91.7 34.2-26.5 26.5-39.9 66.8-39.8 119.6 0.1 40.1-19.4 83.4-52.1 115.9-32 31.8-71.7 49.3-111.8 49.3H295.6c-3 0-6 0.3-8.9 0.8v-1.2H140.8c-39.7 0-72.2 32.5-72.2 72.2v392.9c0 39.7 32.5 72.2 72.2 72.2h146.8v-0.6c2.9 0.4 5.9 0.7 8.9 0.7h464.7c33.3-0.8 65.6-13 91.1-34.4s43.1-51.1 49.6-83.8l52.3-289.1c9.4-43.4-2.1-89.6-30.7-123.5zM147.7 843.7v-344c0-9 7.3-16.3 16.3-16.3h70.4V860H164c-9 0-16.3-7.3-16.3-16.3z m726.4-324.9l-0.2 0.6-51.7 290.3c-6.7 29.1-32.3 50.2-62.2 51.3l-4.9 0.2-0.4 0.3h-440V486h7.3c61.4 0 121-25.7 168.1-72.4 48.6-48.2 76.5-111.7 76.5-174.2-0.1-31.5 4.9-51.8 15.3-62.2 7.4-7.4 18.7-10.8 35.8-10.8h0.2c9-0.1 17.4 3.6 24.9 11 16.3 16.2 25.7 47.3 25.8 85.4-1.2 41.8-7.9 83.3-19.9 123.4l-21.6 54.3h181.5c24.5-0.6 48.2 8.9 65.1 26.1 16.9 17.2 25.3 40.8 23 64.9z" fill="currentColor"/></svg><span class="action-tooltip">点赞</span>\`;
|
||
likeBtn.onclick = () => toggleLike(likeBtn);
|
||
|
||
// 点踩按钮
|
||
const dislikeBtn = document.createElement('button');
|
||
dislikeBtn.className = 'action-btn';
|
||
dislikeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M360 640c60.992 40.107 88 87.381 88 149.333 0 5.611 0.427 12.864 1.579 21.462a174.933 174.933 0 0 0 11.2 42.666c19.584 48.192 60.864 83.008 119.018 85.12 28.843 2.56 60.886-3.584 91.414-25.045 58.709-41.237 81.706-117.248 69.973-230.87h48.15V640v42.667c17.173 0 38.4-2.475 61.823-10.667 66.304-23.125 107.627-84.117 84.928-162.816l-53.674-254.55a213.333 213.333 0 0 0-208.747-169.3H207.019a85.333 85.333 0 0 0-85.078 78.783l-29.546 384A85.333 85.333 0 0 0 177.493 640H360z m-61.333-109.333v24H177.493l29.526-384h91.648v360z m85.333-360h289.664a128 128 0 0 1 125.227 101.589l54.442 258.07c21.334 67.007-64 67.007-64 67.007H640c64 277.334-54.613 256-54.613 256-52.054 0-52.054-64-52.054-64 0-92.8-43.264-167.082-129.77-222.805A42.667 42.667 0 0 1 384 530.667v-360z" fill="currentColor"/></svg><span class="action-tooltip">点踩</span>\`;
|
||
dislikeBtn.onclick = () => toggleDislike(dislikeBtn);
|
||
|
||
actionsDiv.appendChild(copyBtn);
|
||
actionsDiv.appendChild(likeBtn);
|
||
actionsDiv.appendChild(dislikeBtn);
|
||
|
||
div.appendChild(actionsDiv);
|
||
} else {
|
||
div.textContent = text;
|
||
}
|
||
|
||
messagesEl.appendChild(div);
|
||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||
}
|
||
|
||
function copyMessage(text, button) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
const originalHTML = button.innerHTML;
|
||
button.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474c-6.1-7.7-15.3-12.2-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1 0.4-12.8-6.3-12.8z" fill="currentColor"/></svg>\`;
|
||
setTimeout(() => {
|
||
button.innerHTML = originalHTML;
|
||
}, 2000);
|
||
});
|
||
}
|
||
|
||
function toggleLike(button) {
|
||
const isActive = button.classList.contains('active');
|
||
// 移除所有同级按钮的 active 状态
|
||
const parent = button.parentElement;
|
||
parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
|
||
|
||
if (!isActive) {
|
||
button.classList.add('active');
|
||
}
|
||
}
|
||
|
||
function toggleDislike(button) {
|
||
const isActive = button.classList.contains('active');
|
||
// 移除所有同级按钮的 active 状态
|
||
const parent = button.parentElement;
|
||
parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
|
||
|
||
if (!isActive) {
|
||
button.classList.add('active');
|
||
}
|
||
}
|
||
|
||
function openFileEditor(filePath, content) {
|
||
currentEditingFile = filePath;
|
||
editingFileName.textContent = filePath;
|
||
fileEditorTextarea.value = content;
|
||
fileEditorSection.classList.add('active');
|
||
|
||
// 滚动到编辑器位置
|
||
fileEditorSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
|
||
// 在消息区域显示提示
|
||
addMessage(\`正在编辑文件: \${filePath}\`, 'bot');
|
||
}
|
||
|
||
function saveFile() {
|
||
if (!currentEditingFile) {
|
||
return;
|
||
}
|
||
|
||
const content = fileEditorTextarea.value;
|
||
vscode.postMessage({
|
||
command: 'updateFile',
|
||
filePath: currentEditingFile,
|
||
content: content
|
||
});
|
||
|
||
addMessage(\`正在保存文件: \${currentEditingFile}\`, 'user');
|
||
cancelEdit();
|
||
}
|
||
|
||
function cancelEdit() {
|
||
currentEditingFile = null;
|
||
fileEditorSection.classList.remove('active');
|
||
fileEditorTextarea.value = '';
|
||
editingFileName.textContent = '';
|
||
}
|
||
|
||
// 上下文面板相关函数
|
||
function toggleContextPanel() {
|
||
const contextPanel = document.getElementById('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');
|
||
contextPanel.classList.remove('active');
|
||
}
|
||
|
||
function updateContextDisplay(currentTokens, maxTokens) {
|
||
const percentage = Math.min(Math.round((currentTokens / maxTokens) * 100), 100);
|
||
|
||
// 更新百分比显示
|
||
document.getElementById('contextPercentage').textContent = percentage + '%';
|
||
|
||
// 更新详细信息
|
||
const currentK = Math.round((currentTokens / 1000) * 10) / 10;
|
||
const maxK = Math.round(maxTokens / 1000);
|
||
document.getElementById('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')) {
|
||
if (!contextDisplay.contains(event.target)) {
|
||
contextPanel.classList.remove('active');
|
||
}
|
||
}
|
||
});
|
||
|
||
// 流式消息相关状态
|
||
let currentStreamingMessage = null;
|
||
let loadingIndicator = null;
|
||
|
||
window.addEventListener('message', event => {
|
||
const message = event.data;
|
||
console.log('[WebView] 收到消息:', message.command, message);
|
||
|
||
switch (message.command) {
|
||
case 'receiveMessage':
|
||
// 完成流式消息或普通消息
|
||
if (currentStreamingMessage) {
|
||
finalizeStreamingMessage(message.text);
|
||
} else {
|
||
addMessage(message.text, 'bot');
|
||
}
|
||
break;
|
||
case 'updateStreamingMessage':
|
||
// 流式更新消息
|
||
updateOrCreateStreamingMessage(message.text);
|
||
break;
|
||
case 'showLoading':
|
||
showLoadingIndicator(message.text || '正在思考...');
|
||
break;
|
||
case 'hideLoading':
|
||
hideLoadingIndicator();
|
||
break;
|
||
case 'toolStart':
|
||
addToolStatus(message.toolName, 'start');
|
||
break;
|
||
case 'toolComplete':
|
||
addToolStatus(message.toolName, 'complete', message.result);
|
||
break;
|
||
case 'toolError':
|
||
addToolStatus(message.toolName, 'error', message.error);
|
||
break;
|
||
case 'showQuestion':
|
||
showUserQuestion(message.askId, message.question, message.options);
|
||
break;
|
||
case 'fileContent':
|
||
displayFileContent(message.content, message.filePath);
|
||
break;
|
||
case 'fileError':
|
||
showError(message.error);
|
||
break;
|
||
case 'editFile':
|
||
openFileEditor(message.filePath, message.content);
|
||
break;
|
||
case 'fileUpdated':
|
||
addMessage(\`✅ \${message.message}: \${message.filePath}\`, 'bot');
|
||
break;
|
||
case 'fileUpdateError':
|
||
addMessage(\`❌ \${message.error}\`, 'bot');
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 更新或创建流式消息
|
||
function updateOrCreateStreamingMessage(text) {
|
||
hideLoadingIndicator();
|
||
|
||
if (!currentStreamingMessage) {
|
||
// 创建新的流式消息元素
|
||
const div = document.createElement('div');
|
||
div.className = 'message bot-message streaming';
|
||
|
||
const messageContent = document.createElement('div');
|
||
messageContent.className = 'message-content';
|
||
messageContent.textContent = text;
|
||
div.appendChild(messageContent);
|
||
|
||
messagesContainer.appendChild(div);
|
||
currentStreamingMessage = div;
|
||
} else {
|
||
// 更新现有消息内容
|
||
const messageContent = currentStreamingMessage.querySelector('.message-content');
|
||
if (messageContent) {
|
||
messageContent.textContent = text;
|
||
}
|
||
}
|
||
|
||
// 滚动到底部
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 完成流式消息
|
||
function finalizeStreamingMessage(finalText) {
|
||
if (currentStreamingMessage) {
|
||
const messageContent = currentStreamingMessage.querySelector('.message-content');
|
||
if (messageContent) {
|
||
messageContent.textContent = finalText;
|
||
}
|
||
currentStreamingMessage.classList.remove('streaming');
|
||
|
||
// 添加操作按钮
|
||
const actionsDiv = document.createElement('div');
|
||
actionsDiv.className = 'message-actions';
|
||
|
||
const copyBtn = document.createElement('button');
|
||
copyBtn.className = 'action-btn';
|
||
copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
|
||
copyBtn.onclick = () => copyMessage(finalText, copyBtn);
|
||
actionsDiv.appendChild(copyBtn);
|
||
|
||
currentStreamingMessage.appendChild(actionsDiv);
|
||
currentStreamingMessage = null;
|
||
}
|
||
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 显示加载指示器
|
||
function showLoadingIndicator(text) {
|
||
hideLoadingIndicator();
|
||
|
||
loadingIndicator = document.createElement('div');
|
||
loadingIndicator.className = 'message bot-message loading-message';
|
||
loadingIndicator.innerHTML = \`
|
||
<div class="loading-dots">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
<span class="loading-text">\${text}</span>
|
||
\`;
|
||
messagesContainer.appendChild(loadingIndicator);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 隐藏加载指示器
|
||
function hideLoadingIndicator() {
|
||
if (loadingIndicator) {
|
||
loadingIndicator.remove();
|
||
loadingIndicator = null;
|
||
}
|
||
}
|
||
|
||
// 添加工具状态消息
|
||
function addToolStatus(toolName, status, detail) {
|
||
const statusIcons = {
|
||
start: '🔧',
|
||
complete: '✅',
|
||
error: '❌'
|
||
};
|
||
const statusTexts = {
|
||
start: '正在执行',
|
||
complete: '执行完成',
|
||
error: '执行失败'
|
||
};
|
||
|
||
const div = document.createElement('div');
|
||
div.className = \`message tool-status tool-\${status}\`;
|
||
div.innerHTML = \`
|
||
<span class="tool-icon">\${statusIcons[status]}</span>
|
||
<span class="tool-name">\${toolName}</span>
|
||
<span class="tool-status-text">\${statusTexts[status]}</span>
|
||
\${detail ? \`<div class="tool-detail">\${detail}</div>\` : ''}
|
||
\`;
|
||
messagesContainer.appendChild(div);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 显示用户问题
|
||
function showUserQuestion(askId, question, options) {
|
||
const div = document.createElement('div');
|
||
div.className = 'message bot-message question-message';
|
||
div.innerHTML = \`
|
||
<div class="question-text">\${question}</div>
|
||
<div class="question-options">
|
||
\${options.map((opt, i) => \`
|
||
<button class="question-option" data-ask-id="\${askId}" data-option="\${opt}">
|
||
\${opt}
|
||
</button>
|
||
\`).join('')}
|
||
<div class="custom-input-container">
|
||
<input type="text" class="custom-input" placeholder="或输入自定义回答..." />
|
||
<button class="custom-submit" data-ask-id="\${askId}">发送</button>
|
||
</div>
|
||
</div>
|
||
\`;
|
||
|
||
// 绑定选项点击事件
|
||
div.querySelectorAll('.question-option').forEach(btn => {
|
||
btn.onclick = () => {
|
||
const selected = btn.dataset.option;
|
||
submitAnswer(askId, [selected]);
|
||
div.classList.add('answered');
|
||
btn.classList.add('selected');
|
||
};
|
||
});
|
||
|
||
// 绑定自定义输入提交
|
||
const customInput = div.querySelector('.custom-input');
|
||
const customSubmit = div.querySelector('.custom-submit');
|
||
customSubmit.onclick = () => {
|
||
const value = customInput.value.trim();
|
||
if (value) {
|
||
submitAnswer(askId, null, value);
|
||
div.classList.add('answered');
|
||
}
|
||
};
|
||
|
||
messagesContainer.appendChild(div);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 提交用户回答
|
||
function submitAnswer(askId, selected, customInput) {
|
||
vscode.postMessage({
|
||
command: 'submitAnswer',
|
||
askId: askId,
|
||
selected: selected,
|
||
customInput: customInput
|
||
});
|
||
}
|
||
|
||
// 支持回车键读取文件
|
||
filePathInput.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Enter') {
|
||
readFile();
|
||
}
|
||
});
|
||
|
||
// 自动调整 textarea 高度
|
||
function autoResizeTextarea() {
|
||
messageInput.style.height = 'auto';
|
||
messageInput.style.height = messageInput.scrollHeight + 'px';
|
||
}
|
||
|
||
// 监听输入事件，自动调整高度
|
||
messageInput.addEventListener('input', autoResizeTextarea);
|
||
|
||
// 初始化时调整一次高度
|
||
autoResizeTextarea();
|
||
|
||
messageInput.focus();
|
||
</script>
|
||
</body>
|
||
</html>`;
|
||
}
|