/** * 思考过程组件 * * 功能说明: * - 显示 AI 的思考过程 * - 支持展开/折叠功能 * - 提供打字机效果的流式显示 */ /** * 获取思考过程组件的 HTML 内容 * @param thinking - 思考内容 * @param isExpanded - 是否默认展开 */ export function getThinkingProcessContent( thinking: string = "", isExpanded: boolean = false ): string { return `
思考过程
${thinking || "正在思考中..."}
`; } /** * 获取思考过程组件的样式 */ 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); } `; }