@h-ai/ui 0.1.0-alpha5

package/dist/components/scenes/ai/document-download.js

@@ -0,0 +1,300 @@
+import { uiM } from '../../../messages.js';
+import { renderMarkdownDocument } from './document-parse.js';
+/**
+ * code 类型产物通常只有裸代码正文。
+ * 下载和预览都通过同一份规范化逻辑包装成 fenced markdown，避免两边导出的结构不一致。
+ */
+export function resolveDocumentMarkdownContent(value, kind = 'markdown', language) {
+    if (kind !== 'code') {
+        return value;
+    }
+    const fenceLength = Math.max(3, ...Array.from(value.matchAll(/`{3,}/g), match => match[0].length + 1));
+    const fence = '`'.repeat(fenceLength);
+    const normalizedLanguage = language?.trim() ?? '';
+    const suffix = value.endsWith('\n') ? '' : '\n';
+    return `${fence}${normalizedLanguage}\n${value}${suffix}${fence}`;
+}
+/**
+ * 把自定义动作和内置动作统一归一成统一的菜单项，保证左右两侧下载菜单展示一致。
+ */
+export function resolveDocumentDownloadActions(actions = []) {
+    if (actions.length === 0) {
+        return [
+            createBuiltInDownloadAction('word'),
+            createBuiltInDownloadAction('pdf'),
+            createBuiltInDownloadAction('markdown'),
+        ];
+    }
+    return actions.map((action) => {
+        const builtIn = tryResolveBuiltInDownloadAction(action.id);
+        return {
+            id: action.id,
+            label: action.label || builtIn?.label || action.id,
+            badgeLabel: action.badgeLabel
+                || builtIn?.badgeLabel
+                || action.id.slice(0, 4).toUpperCase(),
+        };
+    });
+}
+/**
+ * 执行内置下载动作；未知动作直接跳过，方便外层保留自定义回调扩展口。
+ */
+export async function downloadAiDocument(request) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const builtIn = tryResolveBuiltInDownloadAction(request.actionId);
+    if (!builtIn) {
+        return;
+    }
+    const markdownContent = resolveDocumentMarkdownContent(request.content, request.sourceKind ?? 'markdown', request.codeLanguage);
+    const baseName = resolveDocumentBaseName(request.title, request.filename);
+    if (builtIn.id === 'markdown') {
+        downloadBlob(new Blob([markdownContent], {
+            type: 'text/markdown;charset=utf-8',
+        }), `${baseName}.md`);
+        return;
+    }
+    const exportTitle = request.title?.trim() || baseName;
+    const rendered = renderMarkdownDocument(markdownContent, {
+        enableHighlight: false,
+        showCopyButton: false,
+        showRunButton: false,
+        breaks: true,
+    });
+    const exportHtml = buildDocumentExportHtml(exportTitle, rendered.html);
+    if (builtIn.id === 'word') {
+        downloadBlob(new Blob([`\uFEFF${exportHtml}`], {
+            type: 'application/msword;charset=utf-8',
+        }), `${baseName}.doc`);
+        return;
+    }
+    await printDocumentAsPdf(htmlToPdfTitle(exportTitle), exportHtml);
+}
+function createBuiltInDownloadAction(format) {
+    switch (format) {
+        case 'word':
+            return {
+                id: 'word',
+                label: uiM('markdown_download_word_menu'),
+                badgeLabel: 'DOC',
+            };
+        case 'markdown':
+            return {
+                id: 'markdown',
+                label: uiM('markdown_download_markdown_menu'),
+                badgeLabel: 'MD',
+            };
+        case 'pdf':
+            return {
+                id: 'pdf',
+                label: uiM('markdown_download_pdf_menu'),
+                badgeLabel: 'PDF',
+            };
+    }
+}
+function tryResolveBuiltInDownloadAction(value) {
+    if (value === 'word' || value === 'markdown' || value === 'pdf') {
+        return createBuiltInDownloadAction(value);
+    }
+    return undefined;
+}
+function stripControlCharacters(value) {
+    return Array.from(value).filter(char => char >= ' ').join('');
+}
+function resolveDocumentBaseName(title, filename) {
+    const preferredName = filename?.trim() || title?.trim() || 'ai-document';
+    const sanitizedName = stripControlCharacters(preferredName)
+        .replace(/[<>:"/\\|?*]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(/[. ]+$/g, '')
+        .trim();
+    return sanitizedName || 'ai-document';
+}
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.rel = 'noopener';
+    anchor.click();
+    window.setTimeout(() => {
+        URL.revokeObjectURL(url);
+    }, 1000);
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function buildDocumentExportHtml(title, bodyHtml) {
+    return `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${escapeHtml(title)}</title>
+    <style>
+      :root {
+        color-scheme: light;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        font-family:
+          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+          "Segoe UI", sans-serif;
+        color: #18212f;
+        background: #ffffff;
+      }
+
+      main {
+        max-width: 860px;
+        margin: 0 auto;
+        padding: 40px 32px 72px;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 1.5em 0 0.7em;
+        line-height: 1.28;
+        color: #101827;
+      }
+
+      h1 {
+        font-size: 30px;
+        padding-bottom: 0.42em;
+        border-bottom: 1px solid #dbe4f0;
+      }
+
+      h2 {
+        font-size: 24px;
+      }
+
+      h3 {
+        font-size: 20px;
+      }
+
+      p,
+      li,
+      blockquote,
+      td,
+      th {
+        font-size: 15px;
+        line-height: 1.82;
+      }
+
+      a {
+        color: #2259d1;
+        text-decoration: none;
+      }
+
+      code,
+      pre,
+      kbd {
+        font-family:
+          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          "Liberation Mono", monospace;
+      }
+
+      pre {
+        padding: 16px;
+        border-radius: 18px;
+        overflow: auto;
+        background: #111827;
+        color: #f8fafc;
+      }
+
+      code {
+        white-space: pre-wrap;
+      }
+
+      :not(pre) > code {
+        padding: 0.18em 0.42em;
+        border-radius: 7px;
+        background: #eef2f8;
+        color: #132238;
+      }
+
+      blockquote {
+        margin: 1.1em 0;
+        padding: 0.9em 1.1em;
+        border-left: 4px solid #7fa4ff;
+        background: #f6f8fd;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      th,
+      td {
+        padding: 12px 14px;
+        border: 1px solid #dbe4f0;
+      }
+
+      thead {
+        background: #f5f7fb;
+      }
+
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+
+      @page {
+        size: auto;
+        margin: 14mm 12mm;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      ${bodyHtml}
+    </main>
+  </body>
+</html>`;
+}
+function htmlToPdfTitle(title) {
+    return title.endsWith('.pdf') ? title : `${title}.pdf`;
+}
+async function printDocumentAsPdf(pdfTitle, html) {
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('aria-hidden', 'true');
+    iframe.style.position = 'fixed';
+    iframe.style.right = '0';
+    iframe.style.bottom = '0';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = '0';
+    document.body.append(iframe);
+    await new Promise((resolve) => {
+        iframe.onload = () => resolve();
+        iframe.srcdoc = html;
+    });
+    const previewWindow = iframe.contentWindow;
+    if (!previewWindow) {
+        iframe.remove();
+        return;
+    }
+    previewWindow.document.title = pdfTitle;
+    previewWindow.focus();
+    // PDF 导出当前走浏览器打印能力，让用户在不额外引入 PDF 库的前提下使用系统“另存为 PDF”。
+    const cleanup = () => {
+        window.setTimeout(() => {
+            iframe.remove();
+        }, 240);
+    };
+    previewWindow.addEventListener('afterprint', cleanup, { once: true });
+    previewWindow.print();
+    window.setTimeout(cleanup, 1200);
+}

package/dist/components/scenes/ai/document-parse.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @h-ai/ui — Markdown document parsing helpers
+ *
+ * Extracts HTML, outline, and code block metadata for document-mode rendering.
+ */
+import type { MarkdownCodeBlockItem, MarkdownOutlineItem } from './document-types.js';
+export interface MarkdownDocumentParseOptions {
+    /** Whether to enable syntax highlighting for code blocks. */
+    enableHighlight?: boolean;
+    /** Whether to render the copy button in code blocks. */
+    showCopyButton?: boolean;
+    /** Whether to render the run button and preview slot. */
+    showRunButton?: boolean;
+    /** Whether soft line breaks are converted to <br>. */
+    breaks?: boolean;
+}
+export interface MarkdownRenderResult {
+    /** Rendered HTML output. */
+    html: string;
+    /** Extracted outline items for navigation. */
+    outline: MarkdownOutlineItem[];
+    /** Extracted code blocks for run/copy features. */
+    codeBlocks: MarkdownCodeBlockItem[];
+}
+/**
+ * Render markdown into HTML and extract outline + code block metadata.
+ */
+export declare function renderMarkdownDocument(content: string, options?: MarkdownDocumentParseOptions): MarkdownRenderResult;

package/dist/components/scenes/ai/document-parse.js

@@ -0,0 +1,243 @@
+/**
+ * @h-ai/ui — Markdown document parsing helpers
+ *
+ * Extracts HTML, outline, and code block metadata for document-mode rendering.
+ */
+import hljs from 'highlight.js/lib/common';
+import { Marked } from 'marked';
+/** Default parsing options for document mode. */
+const DEFAULT_OPTIONS = {
+    enableHighlight: true,
+    showCopyButton: true,
+    showRunButton: false,
+    breaks: true,
+};
+/**
+ * Escape HTML entities to prevent raw HTML injection.
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Create a URL-safe heading slug while keeping letters and digits.
+ */
+function slugifyHeading(text) {
+    // normalized slug used as the base key for headings.
+    const normalized = text
+        .trim()
+        .toLocaleLowerCase()
+        .replace(/[^\p{L}\p{N}\s-]/gu, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    return normalized || 'section';
+}
+/**
+ * Generate a stable heading id, de-duplicating repeated titles.
+ */
+function createHeadingId(state, text) {
+    // base slug before de-duplication.
+    const base = slugifyHeading(text);
+    // next count per slug ensures stable suffixing.
+    const nextCount = (state.headingIds.get(base) ?? 0) + 1;
+    state.headingIds.set(base, nextCount);
+    return nextCount === 1 ? base : `${base}-${nextCount}`;
+}
+/**
+ * Add numeric prefixes (1, 1.1, 1.1.1) to outline items.
+ */
+function createNumberedOutline(outline) {
+    // counters track the current numbering state per heading depth.
+    const counters = [0, 0, 0, 0, 0, 0];
+    return outline.map((item) => {
+        // levelIndex caps the depth within 1-6.
+        const levelIndex = Math.max(0, Math.min(5, item.level - 1));
+        counters[levelIndex] += 1;
+        for (let index = levelIndex + 1; index < counters.length; index += 1) {
+            counters[index] = 0;
+        }
+        // prefix is the dotted numbering prefix for the current heading.
+        const prefix = counters
+            .slice(0, levelIndex + 1)
+            .filter(count => count > 0)
+            .join('.');
+        return {
+            ...item,
+            numberedTitle: prefix ? `${prefix} ${item.text}` : item.text,
+        };
+    });
+}
+/**
+ * Build the marked renderer with outline extraction and code metadata.
+ */
+function createRendererObject(options, state) {
+    return {
+        heading(token) {
+            // depth is clamped to the valid heading range.
+            const depth = Math.max(1, Math.min(6, token.depth));
+            // text is the plain heading text used for outline labels.
+            const text = token.text.trim();
+            // id is the stable anchor for outline navigation.
+            const id = createHeadingId(state, text);
+            state.outline.push({
+                id,
+                text: text || `Section ${state.outline.length + 1}`,
+                level: depth,
+            });
+            // headingHtml preserves inline markdown in headings.
+            const headingHtml = this.parser.parseInline(token.tokens);
+            return `<h${depth} id="${escapeHtml(id)}" data-heading-id="${escapeHtml(id)}">${headingHtml}</h${depth}>`;
+        },
+        code({ text, lang }) {
+            // rawLanguage is the original info string from the fence.
+            const rawLanguage = lang?.trim() || '';
+            // highlightLanguage is validated against highlight.js languages.
+            const highlightLanguage = rawLanguage && hljs.getLanguage(rawLanguage)
+                ? rawLanguage
+                : '';
+            // highlighted is the final HTML for the code content.
+            const highlighted = options.enableHighlight
+                ? highlightLanguage
+                    ? hljs.highlight(text, { language: highlightLanguage }).value
+                    : hljs.highlightAuto(text).value
+                : escapeHtml(text);
+            // codeBlockId is used by run/copy hooks and DOM bindings.
+            const codeBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
+            state.codeBlocks.push({
+                id: codeBlockId,
+                code: text,
+                language: rawLanguage || undefined,
+            });
+            // langLabel keeps a consistent header layout even when language is empty.
+            const langLabel = rawLanguage
+                ? `<span class="hai-md-code-lang">${escapeHtml(rawLanguage)}</span>`
+                : '<span class="hai-md-code-lang hai-md-code-lang-empty">Plain Text</span>';
+            // copyBtn is optional based on the options.
+            const copyBtn = options.showCopyButton
+                ? `<button type="button" class="hai-md-code-action hai-md-copy-btn" data-copy-code aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>`
+                : '';
+            // runBtn exposes the run action when enabled.
+            const runBtn = options.showRunButton
+                ? `<button type="button" class="hai-md-code-action hai-md-run-btn" data-run-code data-code-block-id="${escapeHtml(codeBlockId)}" aria-label="Run code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v14l11-7z"/></svg></button>`
+                : '';
+            // previewHost reserves the DOM slot for run previews.
+            const previewHost = options.showRunButton
+                ? `<div class="hai-md-code-preview-slot" data-code-preview-host="${escapeHtml(codeBlockId)}"></div>`
+                : '';
+            return `<div class="hai-md-code-block" data-code-block-id="${escapeHtml(codeBlockId)}">`
+                + `<div class="hai-md-code-header">`
+                + `<div class="hai-md-code-header-main">${langLabel}</div>`
+                + `<div class="hai-md-code-actions">${runBtn}${copyBtn}</div>`
+                + `</div>`
+                + `<pre><code class="hljs${highlightLanguage ? ` language-${escapeHtml(highlightLanguage)}` : ''}">${highlighted}</code></pre>`
+                + `${previewHost}`
+                + `</div>`;
+        },
+        html(token) {
+            return escapeHtml('text' in token ? token.text : '');
+        },
+        link({ href, title, tokens }) {
+            // text preserves inline markdown within the link label.
+            const text = this.parser.parseInline(tokens);
+            // safeHref strips potentially unsafe protocols.
+            const safeHref = href && /^(?:https?:\/\/|\/|#|mailto:)/i.test(href) ? href : '';
+            // isExternal controls whether target/_blank is added.
+            const isExternal = safeHref
+                && (safeHref.startsWith('http://') || safeHref.startsWith('https://'));
+            // attrs is the flattened HTML attribute string.
+            const attrs = [
+                `href="${escapeHtml(safeHref)}"`,
+                title ? `title="${escapeHtml(title)}"` : '',
+                isExternal ? 'target="_blank" rel="noopener noreferrer"' : '',
+            ].filter(Boolean).join(' ');
+            return `<a ${attrs}>${text}</a>`;
+        },
+        image({ href, title, text }) {
+            // safeSrc prevents dangerous image protocols.
+            const safeSrc = href && /^(?:https?:\/\/|\/|data:image\/)/i.test(href) ? href : '';
+            // attrs is the flattened HTML attribute string.
+            const attrs = [
+                `src="${escapeHtml(safeSrc)}"`,
+                `alt="${escapeHtml(text || '')}"`,
+                title ? `title="${escapeHtml(title)}"` : '',
+                'loading="lazy"',
+                'class="hai-md-img"',
+            ].filter(Boolean).join(' ');
+            return `<img ${attrs} />`;
+        },
+        table(token) {
+            // headerHtml accumulates the header row content.
+            let headerHtml = '';
+            for (const cell of token.header) {
+                // align adds text alignment for each header cell.
+                const align = cell.align ? ` style="text-align:${cell.align}"` : '';
+                headerHtml += `<th${align}>${this.parser.parseInline(cell.tokens)}</th>`;
+            }
+            // bodyHtml accumulates all body rows.
+            let bodyHtml = '';
+            for (const row of token.rows) {
+                // rowHtml accumulates cells for a single row.
+                let rowHtml = '';
+                for (const cell of row) {
+                    // align adds text alignment for each body cell.
+                    const align = cell.align ? ` style="text-align:${cell.align}"` : '';
+                    rowHtml += `<td${align}>${this.parser.parseInline(cell.tokens)}</td>`;
+                }
+                bodyHtml += `<tr>${rowHtml}</tr>`;
+            }
+            return `<div class="hai-md-table-wrap">`
+                + `<table>`
+                + `<thead><tr>${headerHtml}</tr></thead>`
+                + `<tbody>${bodyHtml}</tbody>`
+                + `</table>`
+                + `</div>`;
+        },
+    };
+}
+/**
+ * Create a marked instance tied to a specific render state.
+ */
+function createMarkedInstance(options, state) {
+    return new Marked({
+        renderer: createRendererObject(options, state),
+        gfm: true,
+        breaks: options.breaks,
+    });
+}
+/**
+ * Render markdown into HTML and extract outline + code block metadata.
+ */
+export function renderMarkdownDocument(content, options) {
+    if (!content) {
+        return {
+            html: '',
+            outline: [],
+            codeBlocks: [],
+        };
+    }
+    // mergedOptions ensures defaults are always applied.
+    const mergedOptions = {
+        ...DEFAULT_OPTIONS,
+        ...options,
+    };
+    // state captures outline, code blocks, and heading ids per render call.
+    const state = {
+        outline: [],
+        codeBlocks: [],
+        headingIds: new Map(),
+    };
+    // marked instance is scoped to this render call.
+    const marked = createMarkedInstance(mergedOptions, state);
+    // result can be sync string or async promise; only sync string is used.
+    const result = marked.parse(content);
+    return {
+        html: typeof result === 'string' ? result : '',
+        outline: createNumberedOutline(state.outline),
+        codeBlocks: state.codeBlocks,
+    };
+}