179 lines
4.0 KiB
TypeScript
179 lines
4.0 KiB
TypeScript
/**
|
|
* 思考过程组件
|
|
*
|
|
* 功能说明:
|
|
* - 显示 AI 的思考过程
|
|
* - 支持展开/折叠功能
|
|
* - 提供打字机效果的流式显示
|
|
*/
|
|
|
|
/**
|
|
* 获取思考过程组件的 HTML 内容
|
|
* @param thinking - 思考内容
|
|
* @param isExpanded - 是否默认展开
|
|
*/
|
|
export function getThinkingProcessContent(
|
|
thinking: string = "",
|
|
isExpanded: boolean = false
|
|
): string {
|
|
return `
|
|
<div class="thinking-process-container ${isExpanded ? "expanded" : ""}">
|
|
<div class="thinking-header">
|
|
<div class="thinking-icon-wrapper">
|
|
<svg class="thinking-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<span class="thinking-title">思考过程</span>
|
|
</div>
|
|
<div class="thinking-content">
|
|
<div class="thinking-text">${thinking || "正在思考中..."}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 获取思考过程组件的样式
|
|
*/
|
|
export function getThinkingProcessStyles(): string {
|
|
return `
|
|
.thinking-process-container {
|
|
margin: 12px 0;
|
|
border-radius: 6px;
|
|
background: var(--vscode-editor-background);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.thinking-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 5px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: var(--vscode-input-background);
|
|
transition: background 0.2s ease;
|
|
width: 85px;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.thinking-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.1),
|
|
transparent
|
|
);
|
|
animation: none;
|
|
}
|
|
|
|
.thinking-process-container.typing .thinking-header::before {
|
|
animation: shine 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
50%, 100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
.thinking-header:hover {
|
|
background: var(--vscode-list-hoverBackground);
|
|
}
|
|
|
|
.thinking-icon-wrapper {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.thinking-process-container.expanded .thinking-icon-wrapper {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.thinking-icon {
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
.thinking-title {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
.thinking-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease, padding 0.3s ease;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.thinking-process-container.expanded .thinking-content {
|
|
max-height: 500px;
|
|
padding: 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.thinking-text {
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--vscode-descriptionForeground);
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
padding-left: 12px;
|
|
border-left: 2px solid var(--vscode-textBlockQuote-border);
|
|
position: relative;
|
|
}
|
|
|
|
/* 打字机效果 */
|
|
.thinking-text.typing::after {
|
|
content: '▋';
|
|
animation: blink 1s step-end infinite;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% {
|
|
opacity: 1;
|
|
}
|
|
51%, 100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
.thinking-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.thinking-content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.thinking-content::-webkit-scrollbar-thumb {
|
|
background: var(--vscode-scrollbarSlider-background);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.thinking-content::-webkit-scrollbar-thumb:hover {
|
|
background: var(--vscode-scrollbarSlider-hoverBackground);
|
|
}
|
|
`;
|
|
}
|