Bohdan Triapitsyn
fd0f6a6bac
Users can now attach Microsoft Office documents (.docx, .pptx, and .xlsx) and OpenDocument files (.odt, .odp, and .ods) from the shared web, desktop, mobile, and VS Code chat surfaces. Document text is extracted locally and sent as a text/plain file part with the original filename, keeping the visible user message clean. Supported embedded PNG, JPEG, GIF, and WebP images are sent as separate image parts, with matching [filename] citations preserved near their source paragraph, slide object, spreadsheet cell anchor, or OpenDocument position. Presentation notes, spreadsheet values, headers, and footers are included where available. Document expansion is metadata-validated and bounded against oversized entries, excessive uncompressed data, unsafe paths, invalid image signatures, attachment-name races, and dangling citations after truncation. Generated document parts are published to the composer atomically. Add fflate for worker-backed ZIP extraction and narrowly allow blob workers in the VS Code webview CSP without permitting blob scripts. Include focused fixtures for every supported format, extraction limits, positional citations, collision recovery, atomic attachment state, and CSP behavior.
385 lines
14 KiB
TypeScript
385 lines
14 KiB
TypeScript
import * as vscode from 'vscode';
|
||
import * as os from 'os';
|
||
import { getThemeKindName } from './theme';
|
||
import type { ConnectionStatus } from './opencode';
|
||
import type { WorkspaceFolderCandidate } from './workspaceResolver';
|
||
|
||
type PanelType = 'chat' | 'agentManager';
|
||
|
||
export interface WebviewHtmlOptions {
|
||
webview: vscode.Webview;
|
||
extensionUri: vscode.Uri;
|
||
workspaceFolder: string;
|
||
workspaceFolders?: WorkspaceFolderCandidate[];
|
||
initialStatus: ConnectionStatus;
|
||
cliAvailable: boolean;
|
||
panelType?: PanelType;
|
||
initialSessionId?: string;
|
||
viewMode?: 'sidebar' | 'editor';
|
||
devServerUrl?: string | null;
|
||
extensionVersion?: string;
|
||
}
|
||
|
||
const asCspToken = (value: string | null | undefined): string | null => {
|
||
if (!value) {
|
||
return null;
|
||
}
|
||
const trimmed = value.trim();
|
||
return trimmed.length > 0 ? trimmed : null;
|
||
};
|
||
|
||
const toOrigin = (value: string | null | undefined): string | null => {
|
||
if (!value) {
|
||
return null;
|
||
}
|
||
try {
|
||
return new URL(value).origin;
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const uniqueTokens = (values: Array<string | null | undefined>): string => {
|
||
return Array.from(new Set(values.map(asCspToken).filter((value): value is string => Boolean(value)))).join(' ');
|
||
};
|
||
|
||
export function getWebviewHtml(options: WebviewHtmlOptions): string {
|
||
const {
|
||
webview,
|
||
extensionUri,
|
||
workspaceFolder,
|
||
workspaceFolders = [],
|
||
initialStatus,
|
||
cliAvailable,
|
||
panelType = 'chat',
|
||
initialSessionId,
|
||
viewMode = 'sidebar',
|
||
devServerUrl,
|
||
extensionVersion = '',
|
||
} = options;
|
||
const workspaceFoldersJson = JSON.stringify(workspaceFolders).replace(/</g, '\\u003c');
|
||
|
||
const scriptPath = vscode.Uri.joinPath(extensionUri, 'dist', 'webview', 'assets', 'index.js');
|
||
const scriptUri = webview.asWebviewUri(scriptPath);
|
||
const normalizedDevServerUrl = asCspToken(devServerUrl)?.replace(/\/$/, '') ?? null;
|
||
const devServerOrigin = toOrigin(normalizedDevServerUrl);
|
||
const styleSrc = uniqueTokens([webview.cspSource, "'unsafe-inline'", devServerOrigin]);
|
||
const scriptSrc = uniqueTokens([webview.cspSource, "'unsafe-inline'", "'unsafe-eval'", devServerOrigin]);
|
||
const connectSrc = uniqueTokens(['*', 'ws:', 'wss:', 'http:', 'https:', devServerOrigin]);
|
||
const imgSrc = uniqueTokens([webview.cspSource, 'data:', 'https:', devServerOrigin]);
|
||
const fontSrc = uniqueTokens([webview.cspSource, 'data:', devServerOrigin]);
|
||
// fflate's async browser inflater creates blob-backed workers. Keep blob:
|
||
// scoped to worker-src so document decompression works without allowing blob scripts.
|
||
const workerSrc = uniqueTokens([webview.cspSource, 'blob:', devServerOrigin]);
|
||
|
||
const themeKind = getThemeKindName(vscode.window.activeColorTheme.kind);
|
||
|
||
// Use VS Code CSS variables for proper theme integration
|
||
// These variables are automatically provided by VS Code to webviews
|
||
//
|
||
// Logo geometry matches OpenChamberLogo.tsx:
|
||
// edge=48, cos30=0.866, sin30=0.5, centerY=50
|
||
// top=(50, 2), left=(8.432, 26), right=(91.568, 26), center=(50, 50)
|
||
// bottomLeft=(8.432, 74), bottomRight=(91.568, 74), bottom=(50, 98)
|
||
// topFaceCenterY = (2 + 26 + 50 + 26) / 4 = 26
|
||
return `<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${styleSrc}; script-src ${scriptSrc}; connect-src ${connectSrc}; img-src ${imgSrc}; font-src ${fontSrc}; worker-src ${workerSrc};">
|
||
<style>
|
||
html, body, #root { height: 100%; width: 100%; margin: 0; padding: 0; }
|
||
body {
|
||
overflow: hidden;
|
||
background: var(--vscode-editor-background, var(--vscode-sideBar-background));
|
||
font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
||
color: var(--vscode-foreground);
|
||
}
|
||
|
||
/* Initial loading screen styles - uses VS Code theme variables */
|
||
#initial-loading {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
z-index: 9999;
|
||
background: var(--vscode-editor-background, var(--vscode-sideBar-background));
|
||
transition: opacity 0.3s ease-out;
|
||
}
|
||
#initial-loading.fade-out {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
/* Glow pulse on the OpenCode mark on the cube's top face — signals loading without text. */
|
||
@keyframes oc-logo-glow {
|
||
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
|
||
50% { filter: drop-shadow(0 0 4px var(--vscode-foreground)); }
|
||
}
|
||
#initial-loading .logo-inner {
|
||
animation: oc-logo-glow 1.8s ease-in-out infinite;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#initial-loading .logo-inner { animation: none; }
|
||
}
|
||
/* Logo colors use VS Code foreground color */
|
||
#initial-loading .logo-stroke {
|
||
stroke: var(--vscode-foreground);
|
||
}
|
||
#initial-loading .logo-fill {
|
||
fill: var(--vscode-foreground);
|
||
opacity: 0.15;
|
||
}
|
||
#initial-loading .logo-fill-solid {
|
||
fill: var(--vscode-foreground);
|
||
}
|
||
#initial-loading .logo-fill-dim {
|
||
fill: var(--vscode-foreground);
|
||
opacity: 0.4;
|
||
}
|
||
#initial-loading .status-text {
|
||
font-size: 13px;
|
||
color: var(--vscode-descriptionForeground, var(--vscode-foreground));
|
||
text-align: center;
|
||
}
|
||
#initial-loading .error-text {
|
||
font-size: 12px;
|
||
color: var(--vscode-errorForeground, #f48771);
|
||
text-align: center;
|
||
max-width: 280px;
|
||
}
|
||
</style>
|
||
<title>OpenChamber</title>
|
||
</head>
|
||
<body>
|
||
<!-- Initial loading screen with simplified OpenChamber logo -->
|
||
<div id="initial-loading">
|
||
<svg class="logo" width="70" height="70" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Left face -->
|
||
<path class="logo-fill logo-stroke" d="M50 50 L8.432 26 L8.432 74 L50 98 Z" stroke-width="2" stroke-linejoin="round"/>
|
||
<!-- Right face -->
|
||
<path class="logo-fill logo-stroke" d="M50 50 L91.568 26 L91.568 74 L50 98 Z" stroke-width="2" stroke-linejoin="round"/>
|
||
<!-- Top face (no fill, stroke only) -->
|
||
<path class="logo-stroke" d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke-width="2" stroke-linejoin="round"/>
|
||
|
||
<!-- OpenCode logo on top face -->
|
||
<g class="logo-inner" transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)">
|
||
<path class="logo-fill-solid" fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z"/>
|
||
<path class="logo-fill-dim" d="M-8 -4 L8 -4 L8 12 L-8 12 Z"/>
|
||
</g>
|
||
</svg>
|
||
<!-- Status text stays empty while things are fine; populated only on error. -->
|
||
<div class="status-text" id="loading-status"></div>
|
||
${!cliAvailable ? `<div class="error-text" id="cli-missing-text">OpenCode CLI not found. Please install it first.</div>` : ''}
|
||
</div>
|
||
|
||
<div id="root"></div>
|
||
<script>
|
||
// Polyfill process for Node.js modules running in browser
|
||
window.process = window.process || { env: { NODE_ENV: 'production' }, platform: '', version: '', browser: true };
|
||
|
||
window.__VSCODE_CONFIG__ = {
|
||
workspaceFolder: "${workspaceFolder.replace(/\\/g, '\\\\')}",
|
||
workspaceFolders: ${workspaceFoldersJson},
|
||
theme: "${themeKind}",
|
||
connectionStatus: "${initialStatus}",
|
||
cliAvailable: ${cliAvailable},
|
||
extensionVersion: "${extensionVersion.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}",
|
||
platform: "${os.platform()}",
|
||
arch: "${os.arch()}",
|
||
panelType: "${panelType}",
|
||
viewMode: "${viewMode}",
|
||
initialSessionId: ${initialSessionId ? `"${initialSessionId.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"` : 'null'},
|
||
};
|
||
window.__OPENCHAMBER_HOME__ = "${workspaceFolder.replace(/\\/g, '\\\\')}";
|
||
|
||
function getBootstrapMessages() {
|
||
var locale = 'en';
|
||
try {
|
||
var rawLocale = window.localStorage.getItem('openchamber.i18n.v1');
|
||
if (rawLocale) {
|
||
var parsedLocale = JSON.parse(rawLocale);
|
||
if (parsedLocale && typeof parsedLocale.locale === 'string' && parsedLocale.locale.toLowerCase().indexOf('fr') === 0) {
|
||
locale = 'fr';
|
||
}
|
||
}
|
||
} catch {}
|
||
|
||
return locale === 'fr'
|
||
? {
|
||
startingApi: 'Démarrage de l’API OpenCode…',
|
||
initializing: 'Initialisation…',
|
||
connecting: 'Connexion…',
|
||
connected: 'Connecté !',
|
||
connectionError: 'Erreur de connexion',
|
||
reconnecting: 'Reconnexion…',
|
||
cliNotFound: 'L’interface en ligne de commande OpenCode est introuvable. Veuillez l’installer d’abord.',
|
||
}
|
||
: {
|
||
startingApi: 'Starting OpenCode API…',
|
||
initializing: 'Initializing…',
|
||
connecting: 'Connecting…',
|
||
connected: 'Connected!',
|
||
connectionError: 'Connection error',
|
||
reconnecting: 'Reconnecting…',
|
||
cliNotFound: 'OpenCode CLI not found. Please install it first.',
|
||
};
|
||
}
|
||
|
||
(function applyBootstrapLocale() {
|
||
var statusEl = document.getElementById('loading-status');
|
||
var cliMissingEl = document.getElementById('cli-missing-text');
|
||
var messages = getBootstrapMessages();
|
||
if (cliMissingEl) {
|
||
cliMissingEl.textContent = messages.cliNotFound;
|
||
}
|
||
if (statusEl) {
|
||
statusEl.textContent = '';
|
||
}
|
||
})();
|
||
|
||
// Handle connection status updates to update loading screen
|
||
window.addEventListener('message', function(event) {
|
||
var msg = event.data;
|
||
if (msg && msg.type === 'connectionStatus') {
|
||
var messages = getBootstrapMessages();
|
||
var statusEl = document.getElementById('loading-status');
|
||
if (statusEl) {
|
||
// Only show text when something is wrong — progress states stay silent
|
||
// (the animated logo already signals "working").
|
||
if (msg.status === 'error') {
|
||
statusEl.textContent = msg.error || messages.connectionError;
|
||
statusEl.classList.add('error-text');
|
||
} else {
|
||
statusEl.textContent = '';
|
||
statusEl.classList.remove('error-text');
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
<script type="module">
|
||
const prodEntryUrl = ${JSON.stringify(scriptUri.toString())};
|
||
const devServerUrl = ${normalizedDevServerUrl ? JSON.stringify(normalizedDevServerUrl) : 'null'};
|
||
|
||
const loadProductionBundle = () => {
|
||
const script = document.createElement('script');
|
||
script.type = 'module';
|
||
script.src = prodEntryUrl;
|
||
document.body.appendChild(script);
|
||
};
|
||
|
||
if (!devServerUrl) {
|
||
loadProductionBundle();
|
||
} else {
|
||
const baseUrl = devServerUrl;
|
||
|
||
const statusEl = document.getElementById('loading-status');
|
||
const getDevMessages = () => {
|
||
try {
|
||
const rawLocale = window.localStorage.getItem('openchamber.i18n.v1');
|
||
if (rawLocale) {
|
||
const parsedLocale = JSON.parse(rawLocale);
|
||
if (parsedLocale && typeof parsedLocale.locale === 'string' && parsedLocale.locale.toLowerCase().indexOf('fr') === 0) {
|
||
return {
|
||
startingDevServer: (host) => 'Démarrage du serveur de développement de la webview (' + host + ')...',
|
||
waitingDevServer: (host, attempt) => 'En attente du serveur de développement de la webview (' + host + ')... tentative ' + attempt,
|
||
};
|
||
}
|
||
}
|
||
} catch {}
|
||
return {
|
||
startingDevServer: (host) => 'Starting webview dev server (' + host + ')...',
|
||
waitingDevServer: (host, attempt) => 'Waiting for webview dev server (' + host + ')... attempt ' + attempt,
|
||
};
|
||
};
|
||
const setStatus = (text) => {
|
||
if (statusEl) {
|
||
statusEl.textContent = text;
|
||
}
|
||
};
|
||
|
||
const retryDelayMs = 500;
|
||
let attempt = 0;
|
||
|
||
const waitForRootMount = (timeoutMs) => {
|
||
const root = document.getElementById('root');
|
||
if (!root) {
|
||
return Promise.resolve(false);
|
||
}
|
||
|
||
if (root.childNodes.length > 0) {
|
||
return Promise.resolve(true);
|
||
}
|
||
|
||
return new Promise((resolve) => {
|
||
const observer = new MutationObserver(() => {
|
||
if (root.childNodes.length > 0) {
|
||
observer.disconnect();
|
||
clearTimeout(timer);
|
||
resolve(true);
|
||
}
|
||
});
|
||
|
||
observer.observe(root, { childList: true, subtree: true });
|
||
const timer = window.setTimeout(() => {
|
||
observer.disconnect();
|
||
resolve(root.childNodes.length > 0);
|
||
}, timeoutMs);
|
||
});
|
||
};
|
||
|
||
const tryLoadDevBundle = () => {
|
||
const viteClientUrl = baseUrl + '/@vite/client';
|
||
const reactRefreshUrl = baseUrl + '/@react-refresh';
|
||
const devEntryUrl = baseUrl + '/main.tsx';
|
||
const hostLabel = (() => {
|
||
try {
|
||
return new URL(baseUrl).host;
|
||
} catch {
|
||
return baseUrl;
|
||
}
|
||
})();
|
||
|
||
const devMessages = getDevMessages();
|
||
setStatus(devMessages.startingDevServer(hostLabel));
|
||
|
||
Promise.resolve()
|
||
.then(() => import(viteClientUrl))
|
||
.then(() => import(reactRefreshUrl))
|
||
.then((mod) => {
|
||
const runtime = mod && mod.default ? mod.default : null;
|
||
if (runtime && typeof runtime.injectIntoGlobalHook === 'function') {
|
||
runtime.injectIntoGlobalHook(window);
|
||
window.$RefreshReg$ = () => {};
|
||
window.$RefreshSig$ = () => (type) => type;
|
||
window.__vite_plugin_react_preamble_installed__ = true;
|
||
}
|
||
})
|
||
.then(() => import(devEntryUrl))
|
||
.then(() => waitForRootMount(4000))
|
||
.then((mounted) => {
|
||
if (!mounted) {
|
||
throw new Error('Dev bundle loaded but app did not mount');
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
attempt += 1;
|
||
console.warn('[OpenChamber] VS Code webview dev bundle unavailable, retrying...', error);
|
||
setStatus(devMessages.waitingDevServer(hostLabel, attempt));
|
||
window.setTimeout(() => {
|
||
tryLoadDevBundle();
|
||
}, retryDelayMs);
|
||
});
|
||
};
|
||
|
||
tryLoadDevBundle();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>`;
|
||
}
|