ibc-ai-web-sdk 2.0.3 → 2.0.4

package/dist/index.umd.js

@@ -227,7 +227,8 @@
           return token;
         }).catch(error => {
           if (silent) {
-            console.warn('[AIChatClient] Silent token refresh failed (reason=' + reason + '):', error.message);
+            const errMsg = error && (error.message || String(error)) || 'unknown error';
+            console.warn('[AIChatClient] Silent token refresh failed (reason=' + reason + '):', errMsg);
             return this.config.token || '';
           }
           this.stopBackgroundRefresh();
@@ -2721,6 +2722,849 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
   }
   var purify = createDOMPurify();
 
+  /**
+   * 预设主题配置
+   * 提供多种常用主题，用户可以直接使用或自定义
+   */
+
+  /**
+   * 默认主题（蓝色渐变）
+   */
+  const DEFAULT_THEME = {
+    name: 'default',
+    label: '默认主题',
+    colors: {
+      primary: '#1890ff',
+      primaryLight: '#40a9ff',
+      primaryDark: '#096dd9',
+      secondary: '#722ed1',
+      background: '#ffffff',
+      backgroundGradient: '#f8fafc',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #1890ff, #40a9ff)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(24, 144, 255, 0.08), rgba(114, 46, 209, 0.08))',
+      border: 'rgba(24, 144, 255, 0.15)',
+      shadow: 'rgba(24, 144, 255, 0.12)',
+      inputBackground: '#f8fafc',
+      inputBorder: '#e2e8f0',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(24, 144, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(24, 144, 255, 0.25)',
+      button: '0 4px 12px rgba(24, 144, 255, 0.35)'
+    }
+  };
+
+  /**
+   * 深色主题
+   */
+  const DARK_THEME = {
+    name: 'dark',
+    label: '深色主题',
+    colors: {
+      primary: '#40a9ff',
+      primaryLight: '#69c0ff',
+      primaryDark: '#1890ff',
+      secondary: '#9254de',
+      background: '#0f172a',
+      backgroundGradient: '#1e293b',
+      text: '#f1f5f9',
+      textSecondary: '#94a3b8',
+      userBubble: 'linear-gradient(135deg, #1890ff, #40a9ff)',
+      aiBubble: '#1e293b',
+      headerGradient: 'linear-gradient(90deg, rgba(64, 169, 255, 0.15), rgba(146, 84, 222, 0.15))',
+      border: 'rgba(64, 169, 255, 0.3)',
+      shadow: 'rgba(0, 0, 0, 0.3)',
+      inputBackground: '#1e293b',
+      inputBorder: '#334155',
+      loading: '#94a3b8',
+      success: '#73d13d',
+      error: '#ff7875',
+      warning: '#ffd666'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(64, 169, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.4)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.2)',
+      userBubble: '0 4px 12px rgba(24, 144, 255, 0.3)',
+      button: '0 4px 12px rgba(24, 144, 255, 0.4)'
+    }
+  };
+
+  /**
+   * 清新主题（绿色系）
+   */
+  const FRESH_THEME = {
+    name: 'fresh',
+    label: '清新主题',
+    colors: {
+      primary: '#52c41a',
+      primaryLight: '#73d13d',
+      primaryDark: '#389e0d',
+      secondary: '#1890ff',
+      background: '#ffffff',
+      backgroundGradient: '#f6ffed',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #52c41a, #73d13d)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(82, 196, 26, 0.08), rgba(24, 144, 255, 0.08))',
+      border: 'rgba(82, 196, 26, 0.15)',
+      shadow: 'rgba(82, 196, 26, 0.12)',
+      inputBackground: '#f6ffed',
+      inputBorder: '#d9f7be',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '20px',
+      bubble: '16px',
+      button: '50%',
+      input: '32px',
+      small: '8px',
+      medium: '16px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(82, 196, 26, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(82, 196, 26, 0.25)',
+      button: '0 4px 12px rgba(82, 196, 26, 0.35)'
+    }
+  };
+
+  /**
+   * 活力主题（橙色系）
+   */
+  const VIBRANT_THEME = {
+    name: 'vibrant',
+    label: '活力主题',
+    colors: {
+      primary: '#fa8c16',
+      primaryLight: '#ffa940',
+      primaryDark: '#d46b08',
+      secondary: '#f5222d',
+      background: '#ffffff',
+      backgroundGradient: '#fff7e6',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #fa8c16, #ffa940)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(250, 140, 22, 0.08), rgba(245, 34, 45, 0.08))',
+      border: 'rgba(250, 140, 22, 0.15)',
+      shadow: 'rgba(250, 140, 22, 0.12)',
+      inputBackground: '#fff7e6',
+      inputBorder: '#ffd591',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '12px',
+      bubble: '10px',
+      button: '50%',
+      input: '24px',
+      small: '4px',
+      medium: '10px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(250, 140, 22, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(250, 140, 22, 0.25)',
+      button: '0 4px 12px rgba(250, 140, 22, 0.35)'
+    }
+  };
+
+  /**
+   * 浪漫主题（粉色系）
+   */
+  const ROMANTIC_THEME = {
+    name: 'romantic',
+    label: '浪漫主题',
+    colors: {
+      primary: '#eb2f96',
+      primaryLight: '#fb6f92',
+      primaryDark: '#c41d7f',
+      secondary: '#722ed1',
+      background: '#ffffff',
+      backgroundGradient: '#fff0f6',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #eb2f96, #fb6f92)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(235, 47, 150, 0.08), rgba(114, 46, 209, 0.08))',
+      border: 'rgba(235, 47, 150, 0.15)',
+      shadow: 'rgba(235, 47, 150, 0.12)',
+      inputBackground: '#fff0f6',
+      inputBorder: '#ffadd2',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '24px',
+      bubble: '16px',
+      button: '50%',
+      input: '32px',
+      small: '8px',
+      medium: '16px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(235, 47, 150, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(235, 47, 150, 0.25)',
+      button: '0 4px 12px rgba(235, 47, 150, 0.35)'
+    }
+  };
+
+  /**
+   * 紫色主题（优雅神秘）
+   */
+  const PURPLE_THEME = {
+    name: 'purple',
+    label: '紫色主题',
+    colors: {
+      primary: '#722ed1',
+      primaryLight: '#9254de',
+      primaryDark: '#531dab',
+      secondary: '#1890ff',
+      background: '#ffffff',
+      backgroundGradient: '#f9f0ff',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #722ed1, #9254de)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(114, 46, 209, 0.08), rgba(24, 144, 255, 0.08))',
+      border: 'rgba(114, 46, 209, 0.15)',
+      shadow: 'rgba(114, 46, 209, 0.12)',
+      inputBackground: '#f9f0ff',
+      inputBorder: '#d3adf7',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(114, 46, 209, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(114, 46, 209, 0.25)',
+      button: '0 4px 12px rgba(114, 46, 209, 0.35)'
+    }
+  };
+
+  /**
+   * 海洋主题（深蓝深海）
+   */
+  const OCEAN_THEME = {
+    name: 'ocean',
+    label: '海洋主题',
+    colors: {
+      primary: '#0077b6',
+      primaryLight: '#00b4d8',
+      primaryDark: '#023e8a',
+      secondary: '#00b4d8',
+      background: '#ffffff',
+      backgroundGradient: '#f0f9ff',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #0077b6, #00b4d8)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(0, 119, 182, 0.08), rgba(0, 180, 216, 0.08))',
+      border: 'rgba(0, 119, 182, 0.15)',
+      shadow: 'rgba(0, 119, 182, 0.12)',
+      inputBackground: '#f0f9ff',
+      inputBorder: '#bae6fd',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '14px',
+      bubble: '10px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(0, 119, 182, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(0, 119, 182, 0.25)',
+      button: '0 4px 12px rgba(0, 119, 182, 0.35)'
+    }
+  };
+
+  /**
+   * 暮光主题（紫罗兰渐变）
+   */
+  const TWILIGHT_THEME = {
+    name: 'twilight',
+    label: '暮光主题',
+    colors: {
+      primary: '#9333ea',
+      primaryLight: '#a855f7',
+      primaryDark: '#7e22ce',
+      secondary: '#ec4899',
+      background: '#ffffff',
+      backgroundGradient: '#faf5ff',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #9333ea, #ec4899)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(147, 51, 234, 0.08), rgba(236, 72, 153, 0.08))',
+      border: 'rgba(147, 51, 234, 0.15)',
+      shadow: 'rgba(147, 51, 234, 0.12)',
+      inputBackground: '#faf5ff',
+      inputBorder: '#e9d5ff',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '18px',
+      bubble: '14px',
+      button: '50%',
+      input: '30px',
+      small: '8px',
+      medium: '14px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(147, 51, 234, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(147, 51, 234, 0.25)',
+      button: '0 4px 12px rgba(147, 51, 234, 0.35)'
+    }
+  };
+
+  /**
+   * 薄荷主题（青绿色）
+   */
+  const MINT_THEME = {
+    name: 'mint',
+    label: '薄荷主题',
+    colors: {
+      primary: '#14b8a6',
+      primaryLight: '#2dd4bf',
+      primaryDark: '#0d9488',
+      secondary: '#06b6d4',
+      background: '#ffffff',
+      backgroundGradient: '#f0fdfa',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #14b8a6, #2dd4bf)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(20, 184, 166, 0.08), rgba(6, 182, 212, 0.08))',
+      border: 'rgba(20, 184, 166, 0.15)',
+      shadow: 'rgba(20, 184, 166, 0.12)',
+      inputBackground: '#f0fdfa',
+      inputBorder: '#99f6e4',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(20, 184, 166, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(20, 184, 166, 0.25)',
+      button: '0 4px 12px rgba(20, 184, 166, 0.35)'
+    }
+  };
+
+  /**
+   * 玫瑰主题（深红色）
+   */
+  const ROSE_THEME = {
+    name: 'rose',
+    label: '玫瑰主题',
+    colors: {
+      primary: '#e11d48',
+      primaryLight: '#fb7185',
+      primaryDark: '#be123c',
+      secondary: '#f43f5e',
+      background: '#ffffff',
+      backgroundGradient: '#fff1f2',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #e11d48, #fb7185)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(225, 29, 72, 0.08), rgba(244, 63, 94, 0.08))',
+      border: 'rgba(225, 29, 72, 0.15)',
+      shadow: 'rgba(225, 29, 72, 0.12)',
+      inputBackground: '#fff1f2',
+      inputBorder: '#fecdd3',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(225, 29, 72, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(225, 29, 72, 0.25)',
+      button: '0 4px 12px rgba(225, 29, 72, 0.35)'
+    }
+  };
+
+  /**
+   * 极光主题（蓝绿渐变）
+   */
+  const AURORA_THEME = {
+    name: 'aurora',
+    label: '极光主题',
+    colors: {
+      primary: '#0ea5e9',
+      primaryLight: '#38bdf8',
+      primaryDark: '#0284c7',
+      secondary: '#10b981',
+      background: '#ffffff',
+      backgroundGradient: '#f0f9ff',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #0ea5e9, #10b981)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(16, 185, 129, 0.08))',
+      border: 'rgba(14, 165, 233, 0.15)',
+      shadow: 'rgba(14, 165, 233, 0.12)',
+      inputBackground: '#f0f9ff',
+      inputBorder: '#bae6fd',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '20px',
+      bubble: '14px',
+      button: '50%',
+      input: '30px',
+      small: '8px',
+      medium: '14px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(14, 165, 233, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(14, 165, 233, 0.25)',
+      button: '0 4px 12px rgba(14, 165, 233, 0.35)'
+    }
+  };
+
+  /**
+   * 薰衣草主题（淡紫色）
+   */
+  const LAVENDER_THEME = {
+    name: 'lavender',
+    label: '薰衣草主题',
+    colors: {
+      primary: '#8b5cf6',
+      primaryLight: '#a78bfa',
+      primaryDark: '#7c3aed',
+      secondary: '#c084fc',
+      background: '#ffffff',
+      backgroundGradient: '#faf5ff',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #8b5cf6, #c084fc)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(139, 92, 246, 0.08), rgba(192, 132, 252, 0.08))',
+      border: 'rgba(139, 92, 246, 0.15)',
+      shadow: 'rgba(139, 92, 246, 0.12)',
+      inputBackground: '#faf5ff',
+      inputBorder: '#ddd6fe',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '22px',
+      bubble: '16px',
+      button: '50%',
+      input: '32px',
+      small: '8px',
+      medium: '16px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(139, 92, 246, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(139, 92, 246, 0.25)',
+      button: '0 4px 12px rgba(139, 92, 246, 0.35)'
+    }
+  };
+
+  /**
+   * 珊瑚主题（粉橙色）
+   */
+  const CORAL_THEME = {
+    name: 'coral',
+    label: '珊瑚主题',
+    colors: {
+      primary: '#f97316',
+      primaryLight: '#fb923c',
+      primaryDark: '#ea580c',
+      secondary: '#f43f5e',
+      background: '#ffffff',
+      backgroundGradient: '#fff7ed',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #f97316, #fb923c)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(249, 115, 22, 0.08), rgba(244, 63, 94, 0.08))',
+      border: 'rgba(249, 115, 22, 0.15)',
+      shadow: 'rgba(249, 115, 22, 0.12)',
+      inputBackground: '#fff7ed',
+      inputBorder: '#fed7aa',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '14px',
+      bubble: '10px',
+      button: '50%',
+      input: '26px',
+      small: '6px',
+      medium: '10px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(249, 115, 22, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(249, 115, 22, 0.25)',
+      button: '0 4px 12px rgba(249, 115, 22, 0.35)'
+    }
+  };
+
+  /**
+   * 翡翠主题（深绿色）
+   */
+  const JADE_THEME = {
+    name: 'jade',
+    label: '翡翠主题',
+    colors: {
+      primary: '#059669',
+      primaryLight: '#10b981',
+      primaryDark: '#047857',
+      secondary: '#34d399',
+      background: '#ffffff',
+      backgroundGradient: '#f0fdf4',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #059669, #10b981)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(5, 150, 105, 0.08), rgba(52, 211, 153, 0.08))',
+      border: 'rgba(5, 150, 105, 0.15)',
+      shadow: 'rgba(5, 150, 105, 0.12)',
+      inputBackground: '#f0fdf4',
+      inputBorder: '#bbf7d0',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(5, 150, 105, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(5, 150, 105, 0.25)',
+      button: '0 4px 12px rgba(5, 150, 105, 0.35)'
+    }
+  };
+
+  /**
+   * 星空主题（深蓝紫色）
+   */
+  const STARSKY_THEME = {
+    name: 'starsky',
+    label: '星空主题',
+    colors: {
+      primary: '#6366f1',
+      primaryLight: '#818cf8',
+      primaryDark: '#4f46e5',
+      secondary: '#a855f7',
+      background: '#0f172a',
+      backgroundGradient: '#1e1b4b',
+      text: '#e2e8f0',
+      textSecondary: '#94a3b8',
+      userBubble: 'linear-gradient(135deg, #6366f1, #a855f7)',
+      aiBubble: '#1e1b4b',
+      headerGradient: 'linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15))',
+      border: 'rgba(99, 102, 241, 0.3)',
+      shadow: 'rgba(0, 0, 0, 0.3)',
+      inputBackground: '#1e1b4b',
+      inputBorder: '#312e81',
+      loading: '#94a3b8',
+      success: '#34d399',
+      error: '#f87171',
+      warning: '#fbbf24'
+    },
+    borderRadius: {
+      dialog: '18px',
+      bubble: '14px',
+      button: '50%',
+      input: '30px',
+      small: '8px',
+      medium: '14px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(99, 102, 241, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.2)',
+      userBubble: '0 4px 12px rgba(99, 102, 241, 0.3)',
+      button: '0 4px 12px rgba(99, 102, 241, 0.4)'
+    }
+  };
+
+  /**
+   * 日落主题（暖色调）
+   */
+  const SUNSET_THEME = {
+    name: 'sunset',
+    label: '日落主题',
+    colors: {
+      primary: '#ea580c',
+      primaryLight: '#f97316',
+      primaryDark: '#c2410c',
+      secondary: '#dc2626',
+      background: '#ffffff',
+      backgroundGradient: '#fff8f0',
+      text: '#1e293b',
+      textSecondary: '#64748b',
+      userBubble: 'linear-gradient(135deg, #ea580c, #dc2626)',
+      aiBubble: '#ffffff',
+      headerGradient: 'linear-gradient(90deg, rgba(234, 88, 12, 0.08), rgba(220, 38, 38, 0.08))',
+      border: 'rgba(234, 88, 12, 0.15)',
+      shadow: 'rgba(234, 88, 12, 0.12)',
+      inputBackground: '#fff8f0',
+      inputBorder: '#fed7aa',
+      loading: '#64748b',
+      success: '#52c41a',
+      error: '#ff4d4f',
+      warning: '#faad14'
+    },
+    borderRadius: {
+      dialog: '16px',
+      bubble: '12px',
+      button: '50%',
+      input: '28px',
+      small: '6px',
+      medium: '12px'
+    },
+    fontSize: {
+      title: '15px',
+      welcomeText: '17px',
+      welcomeDesc: '13px',
+      message: '14px',
+      time: '11px',
+      small: '11px'
+    },
+    boxShadow: {
+      dialog: '0 0 30px rgba(234, 88, 12, 0.12), 0 8px 32px rgba(0, 0, 0, 0.1)',
+      bubble: '0 2px 8px rgba(0, 0, 0, 0.06)',
+      userBubble: '0 4px 12px rgba(234, 88, 12, 0.25)',
+      button: '0 4px 12px rgba(234, 88, 12, 0.35)'
+    }
+  };
+
+  /**
+   * 所有预设主题列表
+   */
+  const PRESET_THEMES = {
+    DEFAULT: DEFAULT_THEME,
+    DARK: DARK_THEME,
+    FRESH: FRESH_THEME,
+    VIBRANT: VIBRANT_THEME,
+    ROMANTIC: ROMANTIC_THEME,
+    PURPLE: PURPLE_THEME,
+    OCEAN: OCEAN_THEME,
+    TWILIGHT: TWILIGHT_THEME,
+    MINT: MINT_THEME,
+    ROSE: ROSE_THEME,
+    AURORA: AURORA_THEME,
+    LAVENDER: LAVENDER_THEME,
+    CORAL: CORAL_THEME,
+    JADE: JADE_THEME,
+    STARSKY: STARSKY_THEME,
+    SUNSET: SUNSET_THEME
+  };
+
   /**
    * AIChatDialog - 纯JavaScript实现的AI对话组件 (Web Components)
    * 样式与功能完全对齐 Vue 版本（1:1 复刻）
@@ -2775,312 +3619,6 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
   };
 
   // ========== 16种预设主题（与Vue版themes.js完全一致） ==========
-  const PRESET_THEMES = {
-    DEFAULT: {
-      colors: {
-        primary: '#1890ff',
-        primaryLight: '#40a9ff',
-        primaryDark: '#096dd9',
-        secondary: '#722ed1',
-        background: '#ffffff',
-        backgroundGradient: '#f8fafc',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #1890ff, #40a9ff)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(24,144,255,0.08), rgba(114,46,209,0.08))',
-        border: 'rgba(24,144,255,0.15)',
-        shadow: 'rgba(24,144,255,0.12)',
-        inputBackground: '#f8fafc',
-        inputBorder: '#e2e8f0'
-      }
-    },
-    DARK: {
-      colors: {
-        primary: '#40a9ff',
-        primaryLight: '#69c0ff',
-        primaryDark: '#1890ff',
-        secondary: '#9254de',
-        background: '#0f172a',
-        backgroundGradient: '#1e293b',
-        text: '#f1f5f9',
-        textSecondary: '#94a3b8',
-        userBubble: 'linear-gradient(135deg, #1890ff, #40a9ff)',
-        aiBubble: '#1e293b',
-        headerGradient: 'linear-gradient(90deg, rgba(64,169,255,0.15), rgba(146,84,222,0.15))',
-        border: 'rgba(64,169,255,0.3)',
-        shadow: 'rgba(0,0,0,0.3)',
-        inputBackground: '#1e293b',
-        inputBorder: '#334155'
-      }
-    },
-    FRESH: {
-      colors: {
-        primary: '#52c41a',
-        primaryLight: '#73d13d',
-        primaryDark: '#389e0d',
-        secondary: '#1890ff',
-        background: '#ffffff',
-        backgroundGradient: '#f6ffed',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #52c41a, #73d13d)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(82,196,26,0.08), rgba(24,144,255,0.08))',
-        border: 'rgba(82,196,26,0.15)',
-        shadow: 'rgba(82,196,26,0.12)',
-        inputBackground: '#f6ffed',
-        inputBorder: '#d9f7be'
-      }
-    },
-    VIBRANT: {
-      colors: {
-        primary: '#fa8c16',
-        primaryLight: '#ffa940',
-        primaryDark: '#d46b08',
-        secondary: '#f5222d',
-        background: '#ffffff',
-        backgroundGradient: '#fff7e6',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #fa8c16, #ffa940)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(250,140,22,0.08), rgba(245,34,45,0.08))',
-        border: 'rgba(250,140,22,0.15)',
-        shadow: 'rgba(250,140,22,0.12)',
-        inputBackground: '#fff7e6',
-        inputBorder: '#ffd591'
-      }
-    },
-    ROMANTIC: {
-      colors: {
-        primary: '#eb2f96',
-        primaryLight: '#fb6f92',
-        primaryDark: '#c41d7f',
-        secondary: '#722ed1',
-        background: '#ffffff',
-        backgroundGradient: '#fff0f6',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #eb2f96, #fb6f92)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(235,47,150,0.08), rgba(114,46,209,0.08))',
-        border: 'rgba(235,47,150,0.15)',
-        shadow: 'rgba(235,47,150,0.12)',
-        inputBackground: '#fff0f6',
-        inputBorder: '#ffadd2'
-      }
-    },
-    PURPLE: {
-      colors: {
-        primary: '#722ed1',
-        primaryLight: '#9254de',
-        primaryDark: '#531dab',
-        secondary: '#1890ff',
-        background: '#ffffff',
-        backgroundGradient: '#f9f0ff',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #722ed1, #9254de)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(114,46,209,0.08), rgba(24,144,255,0.08))',
-        border: 'rgba(114,46,209,0.15)',
-        shadow: 'rgba(114,46,209,0.12)',
-        inputBackground: '#f9f0ff',
-        inputBorder: '#d3adf7'
-      }
-    },
-    OCEAN: {
-      colors: {
-        primary: '#0077b6',
-        primaryLight: '#00b4d8',
-        primaryDark: '#023e8a',
-        secondary: '#00b4d8',
-        background: '#ffffff',
-        backgroundGradient: '#f0f9ff',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #0077b6, #00b4d8)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(0,119,182,0.08), rgba(0,180,216,0.08))',
-        border: 'rgba(0,119,182,0.15)',
-        shadow: 'rgba(0,119,182,0.12)',
-        inputBackground: '#f0f9ff',
-        inputBorder: '#bae6fd'
-      }
-    },
-    TWILIGHT: {
-      colors: {
-        primary: '#9333ea',
-        primaryLight: '#a855f7',
-        primaryDark: '#7e22ce',
-        secondary: '#ec4899',
-        background: '#ffffff',
-        backgroundGradient: '#faf5ff',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #9333ea, #ec4899)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(147,51,234,0.08), rgba(236,72,153,0.08))',
-        border: 'rgba(147,51,234,0.15)',
-        shadow: 'rgba(147,51,234,0.12)',
-        inputBackground: '#faf5ff',
-        inputBorder: '#e9d5ff'
-      }
-    },
-    MINT: {
-      colors: {
-        primary: '#14b8a6',
-        primaryLight: '#2dd4bf',
-        primaryDark: '#0d9488',
-        secondary: '#06b6d4',
-        background: '#ffffff',
-        backgroundGradient: '#f0fdfa',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #14b8a6, #2dd4bf)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(20,184,166,0.08), rgba(6,182,212,0.08))',
-        border: 'rgba(20,184,166,0.15)',
-        shadow: 'rgba(20,184,166,0.12)',
-        inputBackground: '#f0fdfa',
-        inputBorder: '#99f6e4'
-      }
-    },
-    ROSE: {
-      colors: {
-        primary: '#e11d48',
-        primaryLight: '#fb7185',
-        primaryDark: '#be123c',
-        secondary: '#f43f5e',
-        background: '#ffffff',
-        backgroundGradient: '#fff1f2',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #e11d48, #fb7185)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(225,29,72,0.08), rgba(244,63,94,0.08))',
-        border: 'rgba(225,29,72,0.15)',
-        shadow: 'rgba(225,29,72,0.12)',
-        inputBackground: '#fff1f2',
-        inputBorder: '#fecdd3'
-      }
-    },
-    AURORA: {
-      colors: {
-        primary: '#0ea5e9',
-        primaryLight: '#38bdf8',
-        primaryDark: '#0284c7',
-        secondary: '#10b981',
-        background: '#ffffff',
-        backgroundGradient: '#f0f9ff',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #0ea5e9, #10b981)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(14,165,233,0.08), rgba(16,185,129,0.08))',
-        border: 'rgba(14,165,233,0.15)',
-        shadow: 'rgba(14,165,233,0.12)',
-        inputBackground: '#f0f9ff',
-        inputBorder: '#bae6fd'
-      }
-    },
-    LAVENDER: {
-      colors: {
-        primary: '#8b5cf6',
-        primaryLight: '#a78bfa',
-        primaryDark: '#7c3aed',
-        secondary: '#c084fc',
-        background: '#ffffff',
-        backgroundGradient: '#faf5ff',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #8b5cf6, #c084fc)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(139,92,246,0.08), rgba(192,132,252,0.08))',
-        border: 'rgba(139,92,246,0.15)',
-        shadow: 'rgba(139,92,246,0.12)',
-        inputBackground: '#faf5ff',
-        inputBorder: '#ddd6fe'
-      }
-    },
-    CORAL: {
-      colors: {
-        primary: '#f97316',
-        primaryLight: '#fb923c',
-        primaryDark: '#ea580c',
-        secondary: '#f43f5e',
-        background: '#ffffff',
-        backgroundGradient: '#fff7ed',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #f97316, #fb923c)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(249,115,22,0.08), rgba(244,63,94,0.08))',
-        border: 'rgba(249,115,22,0.15)',
-        shadow: 'rgba(249,115,22,0.12)',
-        inputBackground: '#fff7ed',
-        inputBorder: '#fed7aa'
-      }
-    },
-    JADE: {
-      colors: {
-        primary: '#059669',
-        primaryLight: '#10b981',
-        primaryDark: '#047857',
-        secondary: '#34d399',
-        background: '#ffffff',
-        backgroundGradient: '#f0fdf4',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #059669, #10b981)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(5,150,105,0.08), rgba(52,211,153,0.08))',
-        border: 'rgba(5,150,105,0.15)',
-        shadow: 'rgba(5,150,105,0.12)',
-        inputBackground: '#f0fdf4',
-        inputBorder: '#bbf7d0'
-      }
-    },
-    STARSKY: {
-      colors: {
-        primary: '#6366f1',
-        primaryLight: '#818cf8',
-        primaryDark: '#4f46e5',
-        secondary: '#a855f7',
-        background: '#0f172a',
-        backgroundGradient: '#1e1b4b',
-        text: '#e2e8f0',
-        textSecondary: '#94a3b8',
-        userBubble: 'linear-gradient(135deg, #6366f1, #a855f7)',
-        aiBubble: '#1e1b4b',
-        headerGradient: 'linear-gradient(90deg, rgba(99,102,241,0.15), rgba(168,85,247,0.15))',
-        border: 'rgba(99,102,241,0.3)',
-        shadow: 'rgba(0,0,0,0.3)',
-        inputBackground: '#1e1b4b',
-        inputBorder: '#312e81'
-      }
-    },
-    SUNSET: {
-      colors: {
-        primary: '#ea580c',
-        primaryLight: '#f97316',
-        primaryDark: '#c2410c',
-        secondary: '#dc2626',
-        background: '#ffffff',
-        backgroundGradient: '#fff8f0',
-        text: '#1e293b',
-        textSecondary: '#64748b',
-        userBubble: 'linear-gradient(135deg, #ea580c, #dc2626)',
-        aiBubble: '#ffffff',
-        headerGradient: 'linear-gradient(90deg, rgba(234,88,12,0.08), rgba(220,38,38,0.08))',
-        border: 'rgba(234,88,12,0.15)',
-        shadow: 'rgba(234,88,12,0.12)',
-        inputBackground: '#fff8f0',
-        inputBorder: '#fed7aa'
-      }
-    }
-  };
   class AIChatDialog extends HTMLElement {
     static get observedAttributes() {
       return ['visible'];
@@ -3251,6 +3789,8 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
     // P2-17: 应用移动端/桌面端布局（自动全屏或恢复浮动气泡）
     _applyMobileLayout() {
       if (!this._dialog) return;
+      // 行内嵌入模式跳过，保持 CSS 控制的布局
+      if (this.getAttribute('mode') === 'inline') return;
       if (this._isMobile) {
         // 移动端：强制全屏（与Vue版 dialogStyle 一致）
         this._dialog.style.width = '100vw';
@@ -3512,11 +4052,11 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
   /* ====== 对话框主体（与Vue .ai-chat-dialog 完全一致） ====== */
   .ai-chat-dialog {
     position: fixed;
-    top: 96px;
-    right: 24px;
+    top: var(--ai-dialog-top, 96px);
+    right: var(--ai-dialog-right, 24px);
     bottom: auto;
-    width: min(420px, calc(100vw - 48px));
-    height: min(640px, 80vh);
+    width: var(--ai-dialog-width, min(420px, calc(100vw - 48px)));
+    height: var(--ai-dialog-height, min(640px, 80vh));
     background: var(--ai-bg);
     border-radius: 16px;
     border: 1px solid rgba(226, 232, 240, 0.78);
@@ -4506,6 +5046,27 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
     .action-icon { width: 30px; height: 30px; }
   }
 
+  /* ========== 行内嵌入模式（mode="inline"，挂载到用户指定容器） ========== */
+  :host([mode="inline"]) { position: relative; top: auto; right: auto; bottom: auto; z-index: auto; width: 100%; height: 100%; }
+  :host([mode="inline"]) .ai-float-container { height: 100%; }
+  :host([mode="inline"]) .float-button { display: none; }
+  :host([mode="inline"]) .ai-chat-dialog {
+    position: relative;
+    top: auto;
+    right: auto;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    box-shadow: none;
+    border: 1px solid var(--ai-border);
+    opacity: 1;
+    transform: none;
+    pointer-events: auto;
+  }
+  :host([mode="inline"]) .dialog-header { cursor: default; }
+  :host([mode="inline"]) .close-btn,
+  :host([mode="inline"]) .expand-btn { display: none; }
+
   /* ========== 暗色主题覆盖（theme: 'dark'） ========== */
   :host(.dark-theme) .ai-chat-dialog {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -4651,8 +5212,8 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
           });
         }
 
-        // 拖拽
-        if (this._dialog && this._config?.enableDrag !== false) this.initDraggable();
+        // 拖拽（内嵌模式禁用）
+        if (this._dialog && this._config?.enableDrag !== false && this.getAttribute('mode') !== 'inline') this.initDraggable();
       });
     }
 
@@ -5253,10 +5814,20 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
       }));
       this.setLoading(true);
       try {
+        // 上传附件并收集 attachmentId
+        const attachmentIds = [];
         for (const file of attachments) {
-          await this.uploadAttachment(file).catch(err => console.warn('[AIChatDialog] 附件上传失败:', err));
+          const res = await this.uploadAttachment(file).catch(err => {
+            console.warn('[AIChatDialog] 附件上传失败:', err);
+            return null;
+          });
+          if (res?.success && res.data?.attachmentId) {
+            attachmentIds.push(res.data.attachmentId);
+          }
         }
-        await this.sendMessageToAI(content || attachmentText);
+        await this.sendMessageToAI(content || attachmentText, {
+          attachmentIds
+        });
       } catch (err) {
         console.error('[AIChatDialog] Error:', err);
         this.handleError(err);
@@ -5285,7 +5856,11 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
         this._streaming = true;
         this.setLoading(false); // 关掉全局 loading，用消息级 loading 替代
         this.updateLoadingUI(); // re-lock input via _streaming flag
-        await this._directApiCallStream(msgId, content, options.streamOptions || {});
+        const streamOpts = {
+          ...(options.streamOptions || {})
+        };
+        if (options.attachmentIds?.length) streamOpts.attachmentIds = options.attachmentIds;
+        await this._directApiCallStream(msgId, content, streamOpts);
       }
     }
     async mockResponse(userContent) {
@@ -5572,7 +6147,7 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
         this._messages[idx].content = content;
         delete this._messages[idx]._isStreaming;
         this._messages[idx].time = this.formatTime();
-        this._messages[idx]._status = content && !content.startsWith('(') ? 'completed' : 'error';
+        this._messages[idx]._status = this._isErrorContent(content) ? 'error' : 'completed';
         if (this._streamTypeRaf) {
           cancelAnimationFrame(this._streamTypeRaf);
           this._streamTypeRaf = null;
@@ -5604,6 +6179,13 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
       return false;
     }
 
+    // 判断错误标记内容（替换脆弱的前缀检查 startsWith('(')）
+    _ERROR_CONTENT_PATTERNS = ['(请求超时', '(等待AI处理', '(无回复)', '(已停止)', '(AI 处理超时', '错误:', '网络错误:', '抱歉，'];
+    _isErrorContent(content) {
+      if (!content) return true;
+      return this._ERROR_CONTENT_PATTERNS.some(p => content.startsWith(p));
+    }
+
     // 运行时事件管理 – incremental DOM, no renderMessages
     _addRuntimeEvent(msgId, event) {
       const idx = this._messages.findIndex(m => m.id === msgId);
@@ -5612,8 +6194,6 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
       const last = this._messages[idx]._runtimeEvents[this._messages[idx]._runtimeEvents.length - 1];
       if (last && last._text === event._text) return;
       this._messages[idx]._runtimeEvents.push(event);
-      !['NODE_COMPLETE', 'TOOL_END', 'TOOL_RESULT'].includes(event._type);
-
       // Path 1: panel DOM exists and is alive – incremental append
       if (this._runtimeEventsContainerEl && this._body.contains(this._runtimeEventsContainerEl)) {
         const row = document.createElement('div');
@@ -6014,7 +6594,7 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
    * 支持任意前端框架：Vue, React, Angular, 原生HTML等
    * 
    * @author IBC AI Team
-   * @version 2.0.0
+   * @version 2.0.4
    */
 
 
@@ -6026,16 +6606,53 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
     // 设置属性
     if (options.title) dialog.setAttribute('title', options.title);
     if (options.placeholder) dialog.setAttribute('placeholder', options.placeholder);
-    if (options.width) dialog.style.setProperty('--dialog-width', `${options.width}px`);
-    if (options.height) dialog.style.setProperty('--dialog-height', `${options.height}px`);
-
-    // 添加到DOM（隐藏状态）
-    document.body.appendChild(dialog);
+    // 对话框尺寸和位置（浮窗模式可用）
+    if (options.width) dialog.style.setProperty('--ai-dialog-width', typeof options.width === 'number' ? `${options.width}px` : options.width);
+    if (options.height) dialog.style.setProperty('--ai-dialog-height', typeof options.height === 'number' ? `${options.height}px` : options.height);
+    if (options.top != null) dialog.style.setProperty('--ai-dialog-top', typeof options.top === 'number' ? `${options.top}px` : options.top);
+    if (options.right != null) dialog.style.setProperty('--ai-dialog-right', typeof options.right === 'number' ? `${options.right}px` : options.right);
+
+    // 挂载到指定容器或 body
+    if (options.target) {
+      const container = typeof options.target === 'string' ? document.querySelector(options.target) : options.target;
+      if (container) {
+        dialog.setAttribute('mode', 'inline');
+        container.appendChild(dialog);
+      } else {
+        console.warn('[AI Web SDK] target 容器未找到，回退到 body');
+        document.body.appendChild(dialog);
+      }
+    } else {
+      document.body.appendChild(dialog);
+    }
 
     // 初始化配置
     if (Object.keys(options).length > 0) {
       dialog.init(options);
     }
+
+    // 行内模式：挂载到 DOM 后直接展开
+    if (options.target) {
+      requestAnimationFrame(() => {
+        dialog.style.position = 'relative';
+        dialog.style.height = '100%';
+        if (dialog.shadowRoot) {
+          const container = dialog.shadowRoot.querySelector('.ai-float-container');
+          const dialogEl = dialog.shadowRoot.querySelector('.ai-chat-dialog');
+          const btn = dialog.shadowRoot.querySelector('.float-button');
+          if (container) container.style.height = '100%';
+          if (btn) btn.style.display = 'none';
+          if (dialogEl) {
+            dialogEl.style.position = 'relative';
+            dialogEl.style.top = 'auto';
+            dialogEl.style.right = 'auto';
+            dialogEl.style.width = '100%';
+            dialogEl.style.height = '100%';
+            dialogEl.classList.add('dialog-visible');
+          }
+        }
+      });
+    }
     return dialog;
   }
 
@@ -6220,14 +6837,14 @@ Please report this to https://github.com/markedjs/marked.`,e){let s="<p>An error
     createAIChatDialog,
     installVuePlugin,
     useAIChat,
-    version: '2.0.0'
+    version: '2.0.4'
   };
 
   // 全局暴露（UMD/浏览器环境）
   if (typeof window !== 'undefined') {
     window.AICreateChatDialog = createAIChatDialog;
     window.AIWebSDK = {
-      version: '2.0.0',
+      version: '2.0.4',
       create: createAIChatDialog,
       AIChatDialog,
       AIChatClient,