✨ feat(vscode): 文件和文件夹在预览顶部问
侧栏「问 AI」打开代码阅读预览。文件夹是没有代码块的一页，源码文件在整页顶部聊，代码块下面的问答不动。历史按工作区文件夹和相对路径记在窗口状态里，不写进按块存的记录。
This commit is contained in:
cruldra committed
1 parent
2be635d1e5
commit
2c10acf9c4
19 files changed
+610
-459
No files matched your search
@@ -1,415 +1,34 @@
|
||||
/**
|
||||
* 侧栏文件行、文件夹行的「问 AI」：单独一个面板，不属于任何一个文件的预览。
|
||||
* 先问问题，再在同一面板里把回答流出来；不写进某一块代码的问答记录。
|
||||
* 侧栏文件行、文件夹行的「问 AI」：打开代码阅读预览，在那一页顶部问。
|
||||
* 源码文件开它自己的预览（下面仍是代码块）。文件夹、以及代码阅读不认识的文件，开一页没有代码块的预览。
|
||||
*/
|
||||
|
||||
import type { WebviewPanel } from 'vscode'
|
||||
import type { AskProfiles } from '../qa/askProfiles'
|
||||
import type { PathAskSubject, PathChild } from '../qa/pathAskPrompt'
|
||||
import type { ExcludeSetting } from './fileEntries'
|
||||
import type { Disposable, Uri } from 'vscode'
|
||||
import type { FileNode } from './fileTree'
|
||||
import * as path from 'node:path'
|
||||
import { commands, Disposable, FileType, ViewColumn, window, workspace } from 'vscode'
|
||||
import { ClaudeCancelledError } from '../../cc/spawnClaude'
|
||||
import { makeNonce } from '../../webview/html'
|
||||
import { askClaude, askFailure } from '../qa/claudeAsk'
|
||||
import { readFileHead } from '../qa/pathAskContext'
|
||||
import { pathAskPrompt } from '../qa/pathAskPrompt'
|
||||
import { createExcludeMatcher, sortEntries } from './fileEntries'
|
||||
import { commands } from 'vscode'
|
||||
import { pathPreviewUri } from '../editor/pathPreview'
|
||||
|
||||
export const ASK_PATH_COMMAND = 'superpowers.codeReader.askPath'
|
||||
|
||||
const VIEW_TYPE = 'superpowers.codeReader.pathAsk'
|
||||
|
||||
type PathTarget = Pick<FileNode, 'uri' | 'folder' | 'isDirectory'> & { relativePath: string }
|
||||
|
||||
interface ResetMessage { type: 'reset', path: string, kind: 'file' | 'folder' }
|
||||
interface AskedMessage { type: 'asked', question: string }
|
||||
interface StreamMessage { type: 'stream', text?: string, activity?: string }
|
||||
interface EndMessage { type: 'end', status: 'done' | 'failed' | 'stopped', error?: string }
|
||||
type ToPanel = ResetMessage | AskedMessage | StreamMessage | EndMessage
|
||||
|
||||
/** 打开或切到问路径的面板。点侧栏另一行时换到那一行，正在答的停掉。 */
|
||||
export function registerPathAsk(profiles: AskProfiles): Disposable {
|
||||
const panel = new PathAskPanel(profiles)
|
||||
return Disposable.from(
|
||||
commands.registerCommand(ASK_PATH_COMMAND, (node?: FileNode) => {
|
||||
void panel.open(node)
|
||||
}),
|
||||
panel,
|
||||
)
|
||||
export function registerPathAsk(
|
||||
isSource: (uri: Uri) => Promise<boolean>,
|
||||
openAsking: (uri: Uri) => Promise<void>,
|
||||
): Disposable {
|
||||
return commands.registerCommand(ASK_PATH_COMMAND, (node?: FileNode) => {
|
||||
void openAsked(node, isSource, openAsking)
|
||||
})
|
||||
}
|
||||
|
||||
class PathAskPanel implements Disposable {
|
||||
private panel: WebviewPanel | undefined
|
||||
private whenReady = Promise.resolve()
|
||||
private target: PathTarget | undefined
|
||||
/** 换了路径就加一，旧的回答不再往面板上画 */
|
||||
private generation = 0
|
||||
private controller: AbortController | undefined
|
||||
|
||||
constructor(private readonly profiles: AskProfiles) {}
|
||||
|
||||
async open(node?: FileNode): Promise<void> {
|
||||
if (!node || node.isRoot)
|
||||
return
|
||||
const gen = ++this.generation
|
||||
this.controller?.abort()
|
||||
this.controller = undefined
|
||||
const relativePath = path.posix.relative(node.folder.uri.path, node.uri.path)
|
||||
this.target = { uri: node.uri, folder: node.folder, isDirectory: node.isDirectory, relativePath }
|
||||
const title = `问 AI · ${relativePath}`
|
||||
if (!this.panel) {
|
||||
this.create(title)
|
||||
}
|
||||
else {
|
||||
this.panel.title = title
|
||||
this.panel.reveal(ViewColumn.Active, false)
|
||||
}
|
||||
await this.whenReady
|
||||
if (gen !== this.generation || !this.panel)
|
||||
return
|
||||
this.post({ type: 'reset', path: relativePath, kind: node.isDirectory ? 'folder' : 'file' })
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
this.generation++
|
||||
this.controller?.abort()
|
||||
this.controller = undefined
|
||||
this.panel?.dispose()
|
||||
this.panel = undefined
|
||||
}
|
||||
|
||||
private create(title: string): void {
|
||||
const panel = window.createWebviewPanel(VIEW_TYPE, title, { viewColumn: ViewColumn.Active, preserveFocus: false }, {
|
||||
enableScripts: true,
|
||||
retainContextWhenHidden: true,
|
||||
})
|
||||
this.panel = panel
|
||||
let markReady: () => void = () => {}
|
||||
this.whenReady = new Promise((resolve) => {
|
||||
markReady = resolve
|
||||
})
|
||||
const nonce = makeNonce()
|
||||
panel.webview.html = pathAskHtml(nonce)
|
||||
panel.webview.onDidReceiveMessage((msg: unknown) => {
|
||||
if (!isRecord(msg) || typeof msg.type !== 'string')
|
||||
return
|
||||
if (msg.type === 'ready')
|
||||
markReady()
|
||||
else if (msg.type === 'ask' && typeof msg.question === 'string')
|
||||
void this.submit(msg.question)
|
||||
else if (msg.type === 'stop')
|
||||
this.controller?.abort()
|
||||
})
|
||||
panel.onDidDispose(() => {
|
||||
if (this.panel !== panel)
|
||||
return
|
||||
this.panel = undefined
|
||||
this.generation++
|
||||
this.controller?.abort()
|
||||
this.controller = undefined
|
||||
})
|
||||
}
|
||||
|
||||
/** 空问题不发。回答过程里的字和「正在读哪个文件」直接画在这个面板上。 */
|
||||
private async submit(question: string): Promise<void> {
|
||||
const text = question.trim()
|
||||
const target = this.target
|
||||
if (!text || !target || this.controller)
|
||||
return
|
||||
const gen = this.generation
|
||||
const controller = new AbortController()
|
||||
this.controller = controller
|
||||
this.post({ type: 'asked', question: text })
|
||||
try {
|
||||
const described = await describePath(target)
|
||||
if (gen !== this.generation)
|
||||
return
|
||||
const profile = await this.profiles.current()
|
||||
if (gen !== this.generation)
|
||||
return
|
||||
const prompt = pathAskPrompt(described, text)
|
||||
await askClaude({
|
||||
prompt,
|
||||
images: [],
|
||||
...(profile && { profilePath: profile.path }),
|
||||
cwd: target.folder.uri.fsPath,
|
||||
signal: controller.signal,
|
||||
onEvent: (event) => {
|
||||
if (gen !== this.generation)
|
||||
return
|
||||
if (event.kind === 'text')
|
||||
this.post({ type: 'stream', text: event.text })
|
||||
else if (event.kind === 'activity')
|
||||
this.post({ type: 'stream', activity: event.label })
|
||||
},
|
||||
})
|
||||
if (gen !== this.generation)
|
||||
return
|
||||
this.post({ type: 'end', status: 'done' })
|
||||
}
|
||||
catch (err) {
|
||||
if (gen !== this.generation)
|
||||
return
|
||||
if (err instanceof ClaudeCancelledError)
|
||||
this.post({ type: 'end', status: 'stopped' })
|
||||
else
|
||||
this.post({ type: 'end', status: 'failed', error: askFailure(err) })
|
||||
}
|
||||
finally {
|
||||
if (this.controller === controller)
|
||||
this.controller = undefined
|
||||
}
|
||||
}
|
||||
|
||||
private post(message: ToPanel): void {
|
||||
void this.panel?.webview.postMessage(message).then(undefined, () => {})
|
||||
async function openAsked(
|
||||
node: FileNode | undefined,
|
||||
isSource: (uri: Uri) => Promise<boolean>,
|
||||
openAsking: (uri: Uri) => Promise<void>,
|
||||
): Promise<void> {
|
||||
if (!node || node.isRoot)
|
||||
return
|
||||
if (node.isDirectory) {
|
||||
await openAsking(pathPreviewUri(node.uri, 'folder'))
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/** 文件带开头，文件夹带这一层（和侧栏同一套排除、同一排序）。 */
|
||||
async function describePath(target: PathTarget): Promise<PathAskSubject> {
|
||||
if (target.isDirectory)
|
||||
return { kind: 'folder', relativePath: target.relativePath, children: await folderChildren(target) }
|
||||
return { kind: 'file', relativePath: target.relativePath, head: await readFileHead(target.uri.fsPath) }
|
||||
}
|
||||
|
||||
async function folderChildren(target: PathTarget): Promise<PathChild[] | { unavailable: string }> {
|
||||
let entries: [string, FileType][]
|
||||
try {
|
||||
entries = await workspace.fs.readDirectory(target.uri)
|
||||
}
|
||||
catch (err) {
|
||||
const message = err instanceof Error ? err.message : String(err)
|
||||
return { unavailable: `列不出来（${message}）。` }
|
||||
}
|
||||
const excluded = createExcludeMatcher(workspace.getConfiguration('files', target.folder).get<ExcludeSetting>('exclude'))
|
||||
const names = new Set(entries.map(([name]) => name))
|
||||
const dir = target.relativePath
|
||||
return sortEntries(entries.map(([name, type]) => ({ name, isDirectory: (type & FileType.Directory) !== 0 })))
|
||||
.filter(entry => !excluded(dir ? `${dir}/${entry.name}` : entry.name, names))
|
||||
.map(entry => ({ name: entry.name, kind: entry.isDirectory ? 'folder' : 'file' }))
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null
|
||||
}
|
||||
|
||||
/** 面板里的一页：暗色遮罩铺满，中间一张卡片。问、流式回答、停止都在这张卡片上。 */
|
||||
function pathAskHtml(nonce: string): string {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-${nonce}';">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>问 AI</title>
|
||||
<style>
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: var(--vscode-foreground);
|
||||
font-family: var(--vscode-font-family);
|
||||
font-size: var(--vscode-font-size);
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(40rem, calc(100% - 2rem));
|
||||
max-height: calc(100% - 2rem);
|
||||
background: var(--vscode-editor-background);
|
||||
color: var(--vscode-editor-foreground);
|
||||
border: 1px solid var(--vscode-panel-border, var(--vscode-widget-border, transparent));
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
|
||||
overflow: hidden;
|
||||
}
|
||||
header { padding: 14px 16px 0; }
|
||||
.kind { opacity: 0.7; font-size: 12px; }
|
||||
h1 {
|
||||
margin: 2px 0 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
word-break: break-all;
|
||||
}
|
||||
.thread { overflow: auto; padding: 12px 16px; min-height: 0; }
|
||||
.question { margin: 0 0 8px; font-weight: 600; white-space: pre-wrap; word-break: break-word; }
|
||||
.answer {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-family: var(--vscode-editor-font-family, var(--vscode-font-family));
|
||||
}
|
||||
.status { margin: 8px 0 0; opacity: 0.75; }
|
||||
.error { margin: 8px 0 0; color: var(--vscode-errorForeground); white-space: pre-wrap; }
|
||||
form { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 4.5rem;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--vscode-input-border, transparent);
|
||||
background: var(--vscode-input-background);
|
||||
color: var(--vscode-input-foreground);
|
||||
font: inherit;
|
||||
}
|
||||
.actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
button.primary { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
|
||||
button.primary:hover { background: var(--vscode-button-hoverBackground); }
|
||||
button.secondary { background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); }
|
||||
button:disabled { opacity: 0.45; cursor: default; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card" role="dialog" aria-labelledby="path">
|
||||
<header>
|
||||
<div class="kind" id="kind"></div>
|
||||
<h1 id="path"></h1>
|
||||
</header>
|
||||
<div class="thread" id="thread" hidden>
|
||||
<p class="question" id="q"></p>
|
||||
<pre class="answer" id="answer" hidden></pre>
|
||||
<p class="status" id="status" hidden></p>
|
||||
<p class="error" id="error" hidden></p>
|
||||
</div>
|
||||
<form id="form">
|
||||
<textarea id="question" rows="3" placeholder="想问什么，比如这个名字是什么意思"></textarea>
|
||||
<div class="actions">
|
||||
<button type="button" class="secondary" id="stop" hidden>停止</button>
|
||||
<button type="submit" class="primary" id="send" disabled>发送</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script nonce="${nonce}">
|
||||
const vscode = acquireVsCodeApi()
|
||||
const pathEl = document.getElementById('path')
|
||||
const kindEl = document.getElementById('kind')
|
||||
const thread = document.getElementById('thread')
|
||||
const questionEl = document.getElementById('q')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const statusEl = document.getElementById('status')
|
||||
const errorEl = document.getElementById('error')
|
||||
const form = document.getElementById('form')
|
||||
const input = document.getElementById('question')
|
||||
const sendBtn = document.getElementById('send')
|
||||
const stopBtn = document.getElementById('stop')
|
||||
let running = false
|
||||
let text = ''
|
||||
let activity = ''
|
||||
let frame
|
||||
|
||||
const paint = () => {
|
||||
frame = undefined
|
||||
answerEl.textContent = text
|
||||
answerEl.hidden = text === ''
|
||||
if (!running)
|
||||
return
|
||||
statusEl.hidden = false
|
||||
statusEl.textContent = activity || (text === '' ? '正在想…' : '正在回答…')
|
||||
}
|
||||
|
||||
const setRunning = (on) => {
|
||||
running = on
|
||||
input.disabled = on
|
||||
stopBtn.hidden = !on
|
||||
if (!on)
|
||||
statusEl.hidden = true
|
||||
sendBtn.disabled = on || input.value.trim() === ''
|
||||
}
|
||||
|
||||
window.addEventListener('message', (event) => {
|
||||
const msg = event.data
|
||||
if (!msg || typeof msg.type !== 'string')
|
||||
return
|
||||
if (msg.type === 'reset') {
|
||||
clearTimeout(frame)
|
||||
text = ''
|
||||
activity = ''
|
||||
pathEl.textContent = typeof msg.path === 'string' ? msg.path : ''
|
||||
kindEl.textContent = msg.kind === 'folder' ? '文件夹' : '文件'
|
||||
questionEl.textContent = ''
|
||||
answerEl.textContent = ''
|
||||
answerEl.hidden = true
|
||||
errorEl.hidden = true
|
||||
errorEl.textContent = ''
|
||||
thread.hidden = true
|
||||
input.value = ''
|
||||
setRunning(false)
|
||||
input.focus()
|
||||
return
|
||||
}
|
||||
if (msg.type === 'asked') {
|
||||
thread.hidden = false
|
||||
questionEl.textContent = typeof msg.question === 'string' ? msg.question : ''
|
||||
text = ''
|
||||
activity = ''
|
||||
answerEl.textContent = ''
|
||||
answerEl.hidden = true
|
||||
errorEl.hidden = true
|
||||
errorEl.textContent = ''
|
||||
setRunning(true)
|
||||
paint()
|
||||
return
|
||||
}
|
||||
if (msg.type === 'stream') {
|
||||
if (typeof msg.text === 'string') {
|
||||
text = msg.text
|
||||
activity = ''
|
||||
}
|
||||
if (typeof msg.activity === 'string')
|
||||
activity = msg.activity
|
||||
frame ??= setTimeout(paint, 80)
|
||||
return
|
||||
}
|
||||
if (msg.type === 'end') {
|
||||
clearTimeout(frame)
|
||||
paint()
|
||||
setRunning(false)
|
||||
if (msg.status === 'failed') {
|
||||
errorEl.hidden = false
|
||||
errorEl.textContent = typeof msg.error === 'string' && msg.error ? msg.error : '没答成。'
|
||||
}
|
||||
else if (msg.status === 'stopped') {
|
||||
errorEl.hidden = false
|
||||
errorEl.textContent = '已停止。'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const send = () => {
|
||||
const question = input.value.trim()
|
||||
if (!question || running)
|
||||
return
|
||||
vscode.postMessage({ type: 'ask', question })
|
||||
}
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault()
|
||||
send()
|
||||
})
|
||||
input.addEventListener('input', () => {
|
||||
sendBtn.disabled = running || input.value.trim() === ''
|
||||
})
|
||||
input.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
|
||||
event.preventDefault()
|
||||
send()
|
||||
}
|
||||
})
|
||||
stopBtn.addEventListener('click', () => vscode.postMessage({ type: 'stop' }))
|
||||
vscode.postMessage({ type: 'ready' })
|
||||
</script>
|
||||
</body>
|
||||
</html>`
|
||||
await openAsking(await isSource(node.uri) ? node.uri : pathPreviewUri(node.uri, 'file'))
|
||||
}
|
||||
Reference in new issue
Block a user