@yh-ui/components 0.1.17 → 0.1.21

package/dist/ai-bubble/src/ai-bubble.css

@@ -508,6 +508,41 @@ html.dark {
   padding: 12px 16px;
   position: relative;
   border: 1px solid transparent;
+}
+.yh-ai-bubble__body.is-typing .yh-ai-bubble__text {
+  position: relative;
+  display: inline-block;
+}
+.yh-ai-bubble__body.is-typing .yh-ai-bubble__text::after {
+  content: "▋";
+  margin-left: 2px;
+  color: var(--yh-color-primary);
+  animation: yh-cursor-blink 1s infinite;
+}
+
+.yh-ai-bubble__body.is-typing .yh-ai-bubble__markdown > p:last-child {
+  position: relative;
+  display: inline-block;
+}
+.yh-ai-bubble__body.is-typing .yh-ai-bubble__markdown > p:last-child::after {
+  content: "▋";
+  margin-left: 2px;
+  color: var(--yh-color-primary);
+  animation: yh-cursor-blink 1s infinite;
+}
+.yh-ai-bubble__body.is-typing::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(var(--yh-color-primary-rgb), 0.05), transparent);
+  background-size: 200% 100%;
+  animation: yh-ripple-light 2s infinite linear;
+  pointer-events: none;
+  z-index: 5;
+  border-radius: inherit;
+}
+
+.yh-ai-bubble__body {
   /* Theme-specific adjustments for quality */
 }
 :html.dark .yh-ai-bubble__body {
@@ -573,6 +608,9 @@ html.dark {
 .yh-ai-bubble__markdown p:last-child {
   margin-bottom: 0;
 }
+.yh-ai-bubble__markdown p:last-child {
+  margin-bottom: 0;
+}
 .yh-ai-bubble__markdown {
   /* 学术脚注气泡角标样式 */
 }
@@ -611,6 +649,55 @@ html.dark {
   font-size: 0.9em;
 }
 
+.yh-ai-bubble {
+  /* Code Output - 流式输出样式 */
+}
+.yh-ai-bubble .code-output {
+  background: #1e1e1e;
+  border-top: 1px solid #3e3e3e;
+  padding: 12px;
+  border-radius: 0 0 8px 8px;
+  margin-top: -8px;
+  font-family: "SF Mono", "Fira Code", Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.yh-ai-bubble .code-output pre {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.yh-ai-bubble .code-output .output-prefix {
+  color: #569cd6;
+  display: block;
+  margin-bottom: 4px;
+}
+.yh-ai-bubble .code-output .output-return {
+  color: #c586c0;
+  display: block;
+  margin-top: 8px;
+  font-style: italic;
+}
+.yh-ai-bubble .code-output .output-success {
+  color: #4ec9b0;
+  display: block;
+  margin-top: 8px;
+}
+.yh-ai-bubble .code-output .output-error {
+  color: #f14c4c;
+  display: block;
+  margin-top: 8px;
+}
+.yh-ai-bubble .code-output .output-warning {
+  color: #cca700;
+  display: block;
+}
 .yh-ai-bubble {
   /* Multimodal: Image Grid */
 }
@@ -843,6 +930,7 @@ html.dark {
   align-items: center;
   gap: 8px;
   margin-top: 4px;
+  font-size: 12px;
 }
 
 @keyframes yh-typing-bounce {
@@ -873,6 +961,22 @@ html.dark {
     transform: translateY(0) scale(1);
   }
 }
+@keyframes yh-cursor-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+@keyframes yh-ripple-light {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 /* 引用专属独立悬浮卡片 (Teleported 到 Body) */
 .yh-ai-bubble__citation-tooltip-wrapper {
   position: fixed;

package/dist/ai-bubble/src/ai-bubble.d.ts

@@ -20,6 +20,14 @@ export interface AiCitation {
      * 来源图标
      */
     icon?: string;
+    /**
+     * 摘要内容
+     */
+    abstract?: string;
+    /**
+     * 发布时间
+     */
+    publishTime?: string;
 }
 export interface AiMultimodal {
     /**
@@ -42,85 +50,416 @@ export interface AiMultimodal {
      * 额外属性（如语音时长等）
      */
     extra?: Record<string, unknown>;
+    /**
+     * 图片预览配置
+     */
+    preview?: {
+        enable?: boolean;
+        lazy?: boolean;
+        fallback?: string;
+    };
+}
+/**
+ * 代码块操作配置
+ */
+export interface AiCodeBlockOptions {
+    /**
+     * 启用复制按钮
+     */
+    copyable?: boolean;
+    /**
+     * 启用语言标签
+     */
+    languageTag?: boolean;
+    /**
+     * 启用行号
+     */
+    lineNumbers?: boolean;
+    /**
+     * 启用代码编辑（弹窗）
+     */
+    editable?: boolean;
+    /**
+     * 启用代码运行（JavaScript）
+     */
+    runnable?: boolean;
+    /**
+     * 启用 AI 解释
+     */
+    explainable?: boolean;
+    /**
+     * 运行时环境：浏览器内联 or WebContainer 沙箱
+     */
+    runtime?: 'browser' | 'webcontainer';
+    /**
+     * 折叠代码块
+     */
+    collapsible?: boolean;
+    /**
+     * 折叠行数阈值
+     */
+    collapseLinesThreshold?: number;
+}
+/**
+ * Mermaid 图表配置
+ */
+export interface AiMermaidConfig {
+    /**
+     * 主题
+     */
+    theme?: 'default' | 'dark' | 'neutral' | 'base';
+    /**
+     * 主题变量
+     */
+    themeVariables?: Record<string, string>;
+    /**
+     *  flowchart 方向
+     */
+    flowchart?: {
+        curve?: 'basis' | 'linear' | 'cardinal';
+        padding?: number;
+    };
+    /**
+     * 序列图配置
+     */
+    sequence?: {
+        actorMargin?: number;
+        boxMargin?: number;
+        boxTextMargin?: number;
+        noteMargin?: number;
+        messageMargin?: number;
+    };
+}
+/**
+ * 结构化表格数据
+ */
+export interface AiStructuredTableData {
+    headers: string[];
+    rows: string[][];
+}
+/**
+ * LaTeX 公式配置
+ */
+export interface AiLatexOptions {
+    /**
+     * 启用 LaTeX 渲染
+     */
+    enabled?: boolean;
+    /**
+     * 行内公式分隔符
+     */
+    inlineDelimiters?: [string, string];
+    /**
+     * 块级公式分隔符
+     */
+    blockDelimiters?: [string, string];
+    /**
+     * KaTeX 配置
+     */
+    katexOptions?: Record<string, unknown>;
+}
+/**
+ * 文件预览配置
+ */
+export interface AiFilePreviewOptions {
+    /**
+     * PDF 预览配置
+     */
+    pdf?: {
+        enable?: boolean;
+        pageScale?: 'auto' | 'actual' | 'page-fit' | 'page-width';
+        showToolbar?: boolean;
+        showNavigation?: boolean;
+    };
+    /**
+     * Excel 预览配置
+     */
+    excel?: {
+        enable?: boolean;
+        sheetName?: string;
+        maxRows?: number;
+    };
+    /**
+     * 图片预览配置
+     */
+    image?: {
+        enable?: boolean;
+        lazy?: boolean;
+        previewable?: boolean;
+        zoomable?: boolean;
+    };
+    /**
+     * 视频预览配置
+     */
+    video?: {
+        enable?: boolean;
+        autoplay?: boolean;
+        controls?: boolean;
+    };
+}
+/**
+ * 结构化数据配置
+ */
+export interface AiStructuredData {
+    /**
+     * 数据类型
+     */
+    type: 'json' | 'table' | 'chart' | 'mindmap' | 'thought-chain';
+    /**
+     * 数据内容
+     */
+    data: unknown;
+    /**
+     * 配置选项
+     */
+    options?: Record<string, unknown>;
+}
+/**
+ * Markdown 配置
+ */
+export interface AiMarkdownOptions {
+    /**
+     * 代码块配置
+     */
+    codeBlock?: AiCodeBlockOptions;
+    /**
+     * Mermaid 配置
+     */
+    mermaid?: AiMermaidConfig | boolean;
+    /**
+     * LaTeX 配置
+     */
+    latex?: AiLatexOptions | boolean;
+    /**
+     * 文件预览配置
+     */
+    filePreview?: AiFilePreviewOptions | boolean;
+    /**
+     * 自动链接
+     */
+    linkify?: boolean;
+    /**
+     * HTML 标签
+     */
+    html?: boolean;
+    /**
+     * 排版美化
+     */
+    typographer?: boolean;
+    /**
+     * 允许的协议
+     */
+    allowedProtocols?: string[];
 }
 export declare const aiBubbleProps: {
     /**
      * 气泡内容，支持 Markdown
      */
-    readonly content: {
-        readonly type: StringConstructor;
-        readonly default: "";
+    content: {
+        type: StringConstructor;
+        default: string;
     };
     /**
      * 是否开启 Markdown 解析
      */
-    readonly markdown: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
+    markdown: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * 角色：用户、助手或系统
      */
-    readonly role: {
-        readonly type: PropType<"user" | "assistant" | "system">;
-        readonly default: "assistant";
+    role: {
+        type: PropType<"user" | "assistant" | "system">;
+        default: string;
     };
     /**
      * 气泡位置
      */
-    readonly placement: {
-        readonly type: PropType<"start" | "end">;
+    placement: {
+        type: PropType<"start" | "end">;
     };
     /**
      * 气泡形状
      */
-    readonly shape: {
-        readonly type: PropType<"round" | "corner">;
-        readonly default: "round";
+    shape: {
+        type: PropType<"round" | "corner">;
+        default: string;
     };
     /**
      * 视觉变体
      */
-    readonly variant: {
-        readonly type: PropType<"filled" | "outlined" | "borderless" | "shadow">;
-        readonly default: "filled";
+    variant: {
+        type: PropType<"filled" | "outlined" | "borderless" | "shadow">;
+        default: string;
     };
     /**
      * 显示时间
      */
-    readonly time: StringConstructor;
+    time: StringConstructor;
     /**
      * 头像地址
      */
-    readonly avatar: StringConstructor;
+    avatar: StringConstructor;
     /**
      * 是否在加载中
      */
-    readonly loading: BooleanConstructor;
+    loading: BooleanConstructor;
     /**
      * 打字机特效
      */
-    readonly typing: BooleanConstructor;
+    typing: BooleanConstructor;
+    /**
+     * 启用流式增量渲染（逐字/逐句/逐段显示）
+     */
+    streaming: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 流式渲染模式：逐词 | 逐句 | 逐段
+     */
+    streamMode: {
+        type: PropType<"word" | "sentence" | "paragraph">;
+        default: string;
+    };
+    /**
+     * 流式渲染速度（每次渲染的字符数，仅 word 模式有效）
+     */
+    streamSpeed: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 流式渲染间隔（毫秒）
+     */
+    streamInterval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 流式渲染完成回调
+     */
+    onStreamComplete: {
+        type: PropType<() => void>;
+    };
     /**
      * 引用来源列表 (Citations)
      */
-    readonly citations: {
-        readonly type: PropType<AiCitation[]>;
-        readonly default: () => never[];
+    citations: {
+        type: PropType<AiCitation[]>;
+        default: () => never[];
     };
     /**
      * 多模态内容 (图片、音频、文件等)
      */
-    readonly multimodal: {
-        readonly type: PropType<AiMultimodal[]>;
-        readonly default: () => never[];
+    multimodal: {
+        type: PropType<AiMultimodal[]>;
+        default: () => never[];
+    };
+    /**
+     * Markdown 配置选项
+     */
+    markdownOptions: {
+        type: PropType<AiMarkdownOptions>;
+        default: () => {};
+    };
+    /**
+     * 结构化数据（JSON/表格/图表）
+     */
+    structuredData: {
+        type: PropType<AiStructuredData>;
+    };
+    /**
+     * 代码解释回调（用于 AI 解释功能）
+     */
+    onExplainCode: {
+        type: PropType<(code: string, language: string) => Promise<string>>;
+    };
+    /**
+     * 代码运行回调
+     */
+    onRunCode: {
+        type: PropType<(code: string, language: string) => Promise<{
+            output: string;
+            error?: string;
+        }>>;
+    };
+    /**
+     * 引用点击回调
+     */
+    onCitationClick: {
+        type: PropType<(citation: AiCitation) => void>;
     };
     /**
      * 主题覆盖变量
      */
-    readonly themeOverrides: {
-        readonly type: PropType<import("@yh-ui/theme").ComponentThemeVars>;
-        readonly default: undefined;
+    themeOverrides: {
+        type: PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        default: undefined;
+    };
+    /**
+     * 是否启用 Python 代码运行支持
+     */
+    enablePythonRuntime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Python 运行时类型：'browser' (Pyodide) | 'remote' (远程 API)
+     */
+    pythonRuntime: {
+        type: PropType<"browser" | "remote">;
+        default: string;
+    };
+    /**
+     * 远程 Python API 地址（当 pythonRuntime 为 remote 时使用）
+     */
+    pythonApiUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Pyodide CDN 地址
+     */
+    pyodideUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 是否启用内置 XSS 防护
+     */
+    enableSanitizer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 自定义 HTML 清理函数
+     */
+    sanitizer: {
+        type: PropType<(html: string) => string>;
+        default: undefined;
+    };
+    /**
+     * 允许的标签白名单
+     */
+    allowedTags: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    /**
+     * 允许的属性白名单
+     */
+    allowedAttributes: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    /**
+     * 允许的协议白名单
+     */
+    allowedSchemes: {
+        type: PropType<string[]>;
+        default: () => string[];
     };
 };
 export type AiBubbleProps = ExtractPropTypes<typeof aiBubbleProps>;