ai-chat-ui-kit 0.1.0

package/packages/themes/src/glass/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import type { ThemeConfig } from '../types.js';
+import themeStyles from './theme.css?raw';
+
+export const glassTheme: ThemeConfig = {
+  name: 'glass',
+  variables: {
+    '--ai-primary': 'rgba(102, 126, 234, 0.6)',
+    '--ai-primary-hover': 'rgba(102, 126, 234, 0.8)',
+    '--ai-primary-active': 'rgba(82, 106, 214, 0.9)',
+    '--ai-bg-primary': 'rgba(255, 255, 255, 0.25)',
+    '--ai-bg-secondary': 'rgba(255, 255, 255, 0.3)',
+    '--ai-bg-tertiary': 'rgba(255, 255, 255, 0.2)',
+    '--ai-bg-chat': 'transparent',
+    '--ai-text-primary': '#ffffff',
+    '--ai-text-secondary': 'rgba(255, 255, 255, 0.8)',
+    '--ai-text-tertiary': 'rgba(255, 255, 255, 0.6)',
+    '--ai-text-inverse': '#333333',
+    '--ai-message-user-bg': 'rgba(102, 126, 234, 0.6)',
+    '--ai-message-user-text': '#ffffff',
+    '--ai-message-ai-bg': 'rgba(255, 255, 255, 0.4)',
+    '--ai-message-ai-text': '#333333',
+    '--ai-message-border': 'rgba(255, 255, 255, 0.6)',
+    '--ai-input-bg': 'rgba(255, 255, 255, 0.3)',
+    '--ai-input-border': 'rgba(255, 255, 255, 0.5)',
+    '--ai-input-focus-border': 'rgba(255, 255, 255, 0.8)',
+    '--ai-input-text': '#ffffff',
+    '--ai-input-placeholder': 'rgba(255, 255, 255, 0.7)',
+    '--ai-tool-call-bg': 'rgba(255, 255, 255, 0.3)',
+    '--ai-tool-call-border': 'rgba(255, 255, 255, 0.5)',
+    '--ai-tool-call-success': '#52c41a',
+    '--ai-tool-call-error': '#ff4d4f',
+    '--ai-tool-call-running': 'rgba(102, 126, 234, 0.6)',
+    '--ai-shadow-sm': '0 2px 8px rgba(31, 38, 135, 0.1)',
+    '--ai-shadow-md': '0 4px 16px rgba(31, 38, 135, 0.2)',
+    '--ai-shadow-lg': '0 8px 32px rgba(31, 38, 135, 0.37)',
+    '--ai-radius-sm': '8px',
+    '--ai-radius-md': '16px',
+    '--ai-radius-lg': '20px',
+    '--ai-radius-xl': '24px',
+    '--ai-spacing-xs': '4px',
+    '--ai-spacing-sm': '8px',
+    '--ai-spacing-md': '14px',
+    '--ai-spacing-lg': '20px',
+    '--ai-spacing-xl': '24px',
+  },
+  styles: themeStyles,
+};

package/packages/themes/src/glass/theme.css

@@ -0,0 +1,237 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ *
+ * Glassmorphism —— 毛玻璃拟态
+ * 对齐 docs/chat-style-3-glass.html
+ */
+
+:root[data-theme='glass'],
+.ai-theme-glass {
+  --ai-primary: rgba(102, 126, 234, 0.6);
+  --ai-primary-hover: rgba(102, 126, 234, 0.8);
+  --ai-message-user-bg: rgba(102, 126, 234, 0.6);
+  --ai-message-user-text: #ffffff;
+  --ai-message-ai-bg: rgba(255, 255, 255, 0.4);
+  --ai-message-ai-text: #333;
+  --ai-text-primary: #ffffff;
+}
+
+/* 让父容器（如 body）有渐变背景，毛玻璃才有意义 */
+.ai-theme-glass-host,
+body[data-theme='glass'] {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+}
+.ai-theme-glass-host::before,
+body[data-theme='glass']::before {
+  content: '';
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  top: -100px;
+  left: -100px;
+  filter: blur(60px);
+  pointer-events: none;
+}
+.ai-theme-glass-host::after,
+body[data-theme='glass']::after {
+  content: '';
+  position: absolute;
+  width: 350px;
+  height: 350px;
+  background: rgba(255, 200, 200, 0.3);
+  border-radius: 50%;
+  bottom: -80px;
+  right: -80px;
+  filter: blur(60px);
+  pointer-events: none;
+}
+
+/* 容器 */
+.ai-theme-glass .ai-chat,
+[data-theme='glass'] .ai-chat {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 24px;
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+  font-family: 'Segoe UI', sans-serif;
+  position: relative;
+  z-index: 1;
+}
+
+/* Header */
+.ai-theme-glass .ai-chat__header,
+[data-theme='glass'] .ai-chat__header {
+  padding: 24px;
+  background: rgba(255, 255, 255, 0.3);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 24px 24px 0 0;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.ai-theme-glass .ai-chat__avatar,
+[data-theme='glass'] .ai-chat__avatar {
+  width: 45px;
+  height: 45px;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  font-size: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ai-theme-glass .ai-chat__title,
+[data-theme='glass'] .ai-chat__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.ai-theme-glass .ai-chat__subtitle,
+[data-theme='glass'] .ai-chat__subtitle {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Messages */
+.ai-theme-glass .ai-chat__messages,
+[data-theme='glass'] .ai-chat__messages {
+  background: transparent;
+  padding: 20px;
+  gap: 14px;
+}
+.ai-theme-glass .ai-chat__messages::-webkit-scrollbar,
+[data-theme='glass'] .ai-chat__messages::-webkit-scrollbar { width: 6px; }
+.ai-theme-glass .ai-chat__messages::-webkit-scrollbar-thumb,
+[data-theme='glass'] .ai-chat__messages::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 3px;
+}
+
+/* Message */
+.ai-theme-glass .ai-message,
+[data-theme='glass'] .ai-message { max-width: 78%; }
+.ai-theme-glass .ai-message__avatar,
+[data-theme='glass'] .ai-message__avatar { display: none; }
+.ai-theme-glass .ai-message__content,
+[data-theme='glass'] .ai-message__content {
+  padding: 14px 18px;
+  border-radius: 20px;
+  font-size: 14px;
+  line-height: 1.6;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.ai-theme-glass .ai-message--user .ai-message__content,
+[data-theme='glass'] .ai-message--user .ai-message__content {
+  background: rgba(102, 126, 234, 0.6);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-bottom-right-radius: 8px;
+}
+.ai-theme-glass .ai-message--assistant .ai-message__content,
+[data-theme='glass'] .ai-message--assistant .ai-message__content {
+  background: rgba(255, 255, 255, 0.4);
+  color: #333;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-bottom-left-radius: 8px;
+}
+.ai-theme-glass .ai-message__time,
+[data-theme='glass'] .ai-message__time { display: none; }
+
+/* Input */
+.ai-theme-glass .ai-input,
+[data-theme='glass'] .ai-input {
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.3);
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 0 0 24px 24px;
+}
+.ai-theme-glass .ai-input__wrapper,
+[data-theme='glass'] .ai-input__wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.ai-theme-glass .ai-input__textarea,
+[data-theme='glass'] .ai-input__textarea {
+  flex: 1;
+  padding: 12px 18px;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 20px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  resize: none;
+  min-height: 44px;
+  max-height: 120px;
+  transition: all 0.3s;
+}
+.ai-theme-glass .ai-input__textarea::placeholder,
+[data-theme='glass'] .ai-input__textarea::placeholder { color: rgba(255, 255, 255, 0.7); }
+.ai-theme-glass .ai-input__textarea:focus,
+[data-theme='glass'] .ai-input__textarea:focus {
+  background: rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+}
+.ai-theme-glass .ai-input__send,
+[data-theme='glass'] .ai-input__send {
+  width: 44px;
+  height: 44px;
+  background: rgba(102, 126, 234, 0.6);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.ai-theme-glass .ai-input__send:hover:not(:disabled),
+[data-theme='glass'] .ai-input__send:hover:not(:disabled) {
+  background: rgba(102, 126, 234, 0.8);
+  transform: scale(1.05);
+}
+
+/* Typing */
+.ai-theme-glass .ai-typing-indicator,
+[data-theme='glass'] .ai-typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 20px;
+  width: fit-content;
+}
+.ai-theme-glass .ai-typing-indicator__dot,
+[data-theme='glass'] .ai-typing-indicator__dot {
+  width: 6px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  animation: ai-typing-bounce 1.4s infinite;
+}
+.ai-theme-glass .ai-typing-indicator__dot:nth-child(2),
+[data-theme='glass'] .ai-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
+.ai-theme-glass .ai-typing-indicator__dot:nth-child(3),
+[data-theme='glass'] .ai-typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes ai-typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}

package/packages/themes/src/gradient/index.ts

@@ -0,0 +1,53 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import type { ThemeConfig } from '../types.js';
+import themeStyles from './theme.css?raw';
+
+export const gradientTheme: ThemeConfig = {
+  name: 'gradient',
+  variables: {
+    '--ai-primary': 'linear-gradient(135deg, #f093fb, #f5576c)',
+    '--ai-primary-hover': 'linear-gradient(135deg, #f5576c, #f093fb)',
+    '--ai-primary-active': 'linear-gradient(135deg, #d63384, #e91e63)',
+    '--ai-bg-primary': '#ffffff',
+    '--ai-bg-secondary': '#fafafa',
+    '--ai-bg-tertiary': '#f5f5f5',
+    '--ai-bg-chat': 'linear-gradient(135deg, #f093fb 0%, #f5576c 25%, #4facfe 50%, #00f2fe 75%, #43e97b 100%)',
+    '--ai-bg-chat-size': '400% 400%',
+    '--ai-text-primary': '#333333',
+    '--ai-text-secondary': '#666666',
+    '--ai-text-tertiary': '#999999',
+    '--ai-text-inverse': '#ffffff',
+    '--ai-message-user-bg': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    '--ai-message-user-text': '#ffffff',
+    '--ai-message-ai-bg': '#ffffff',
+    '--ai-message-ai-text': '#333333',
+    '--ai-message-border': '#f0f0f0',
+    '--ai-input-bg': '#f5f5f5',
+    '--ai-input-border': '#e0e0e0',
+    '--ai-input-focus-border': '#667eea',
+    '--ai-input-text': '#333333',
+    '--ai-input-placeholder': '#999999',
+    '--ai-tool-call-bg': '#fafafa',
+    '--ai-tool-call-border': '#e0e0e0',
+    '--ai-tool-call-success': '#52c41a',
+    '--ai-tool-call-error': '#ff4d4f',
+    '--ai-tool-call-running': '#667eea',
+    '--ai-shadow-sm': '0 2px 8px rgba(0, 0, 0, 0.08)',
+    '--ai-shadow-md': '0 4px 15px rgba(102, 126, 234, 0.4)',
+    '--ai-shadow-lg': '0 20px 60px rgba(0, 0, 0, 0.2)',
+    '--ai-radius-sm': '6px',
+    '--ai-radius-md': '20px',
+    '--ai-radius-lg': '20px',
+    '--ai-radius-xl': '30px',
+    '--ai-spacing-xs': '4px',
+    '--ai-spacing-sm': '8px',
+    '--ai-spacing-md': '16px',
+    '--ai-spacing-lg': '20px',
+    '--ai-spacing-xl': '24px',
+  },
+  styles: themeStyles,
+};

package/packages/themes/src/gradient/theme.css

@@ -0,0 +1,218 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ *
+ * Gradient Bubbles —— 多彩渐变
+ * 对齐 docs/chat-style-5-gradient.html
+ */
+
+:root[data-theme='gradient'],
+.ai-theme-gradient {
+  --ai-primary: #667eea;
+  --ai-message-user-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --ai-message-user-text: #fff;
+  --ai-message-ai-bg: #fff;
+  --ai-message-ai-text: #333;
+}
+
+/* body 渐变背景 */
+.ai-theme-gradient-host,
+body[data-theme='gradient'] {
+  background: linear-gradient(
+    135deg,
+    #f093fb 0%,
+    #f5576c 25%,
+    #4facfe 50%,
+    #00f2fe 75%,
+    #43e97b 100%
+  );
+  background-size: 400% 400%;
+  animation: ai-gradient-shift 15s ease infinite;
+}
+@keyframes ai-gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* 容器 */
+.ai-theme-gradient .ai-chat,
+[data-theme='gradient'] .ai-chat {
+  background: #fff;
+  border-radius: 30px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+/* Header */
+.ai-theme-gradient .ai-chat__header,
+[data-theme='gradient'] .ai-chat__header {
+  padding: 24px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  border-bottom: none;
+}
+.ai-theme-gradient .ai-chat__avatar,
+[data-theme='gradient'] .ai-chat__avatar { display: none; }
+.ai-theme-gradient .ai-chat__title,
+[data-theme='gradient'] .ai-chat__title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+}
+.ai-theme-gradient .ai-chat__subtitle,
+[data-theme='gradient'] .ai-chat__subtitle {
+  font-size: 12px;
+  opacity: 0.85;
+  color: #fff;
+  margin: 0;
+}
+.ai-theme-gradient .ai-chat__title-group,
+[data-theme='gradient'] .ai-chat__title-group {
+  text-align: center;
+}
+
+/* Messages */
+.ai-theme-gradient .ai-chat__messages,
+[data-theme='gradient'] .ai-chat__messages {
+  background: #fafafa;
+  padding: 20px;
+  gap: 16px;
+}
+
+/* Message */
+.ai-theme-gradient .ai-message,
+[data-theme='gradient'] .ai-message {
+  max-width: 80%;
+  animation: ai-pop-in 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.ai-theme-gradient .ai-message__avatar,
+[data-theme='gradient'] .ai-message__avatar { display: none; }
+.ai-theme-gradient .ai-message__content,
+[data-theme='gradient'] .ai-message__content {
+  padding: 14px 18px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.ai-theme-gradient .ai-message--user .ai-message__content,
+[data-theme='gradient'] .ai-message--user .ai-message__content {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 20px 20px 6px 20px;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+.ai-theme-gradient .ai-message--assistant .ai-message__content,
+[data-theme='gradient'] .ai-message--assistant .ai-message__content {
+  background: #fff;
+  color: #333;
+  border: 1px solid #f0f0f0;
+  border-radius: 20px 20px 20px 6px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+.ai-theme-gradient .ai-message__time,
+[data-theme='gradient'] .ai-message__time {
+  font-size: 11px;
+  color: #999;
+  margin-top: 4px;
+}
+
+@keyframes ai-pop-in {
+  0% { transform: scale(0.8); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+/* Input */
+.ai-theme-gradient .ai-input,
+[data-theme='gradient'] .ai-input {
+  padding: 16px 20px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+}
+.ai-theme-gradient .ai-input__wrapper,
+[data-theme='gradient'] .ai-input__wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.ai-theme-gradient .ai-input__textarea,
+[data-theme='gradient'] .ai-input__textarea {
+  flex: 1;
+  padding: 14px 20px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 25px;
+  font-size: 14px;
+  outline: none;
+  resize: none;
+  min-height: 48px;
+  max-height: 120px;
+  transition: all 0.3s;
+  color: #333;
+}
+.ai-theme-gradient .ai-input__textarea:focus,
+[data-theme='gradient'] .ai-input__textarea:focus {
+  background: #eee;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+.ai-theme-gradient .ai-input__textarea::placeholder,
+[data-theme='gradient'] .ai-input__textarea::placeholder { color: #999; }
+.ai-theme-gradient .ai-input__send,
+[data-theme='gradient'] .ai-input__send {
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 20px;
+  transition: all 0.3s;
+  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+}
+.ai-theme-gradient .ai-input__send:hover:not(:disabled),
+[data-theme='gradient'] .ai-input__send:hover:not(:disabled) {
+  transform: scale(1.1) rotate(15deg);
+  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6);
+}
+
+/* Typing */
+.ai-theme-gradient .ai-typing-indicator,
+[data-theme='gradient'] .ai-typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 14px 18px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 20px 20px 20px 6px;
+  width: fit-content;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+.ai-theme-gradient .ai-typing-indicator__dot,
+[data-theme='gradient'] .ai-typing-indicator__dot {
+  width: 6px;
+  height: 6px;
+  background: #999;
+  border-radius: 50%;
+  animation: ai-typing-bounce 1.4s infinite;
+}
+.ai-theme-gradient .ai-typing-indicator__dot:nth-child(2),
+[data-theme='gradient'] .ai-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
+.ai-theme-gradient .ai-typing-indicator__dot:nth-child(3),
+[data-theme='gradient'] .ai-typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes ai-typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}

package/packages/themes/src/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+export { minimalTheme } from './minimal/index.js';
+export { neonTheme } from './neon/index.js';
+export { glassTheme } from './glass/index.js';
+export { terminalTheme } from './terminal/index.js';
+export { gradientTheme } from './gradient/index.js';
+export { corporateTheme } from './corporate/index.js';
+
+export type { ThemeConfig } from './types.js';

package/packages/themes/src/minimal/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import type { ThemeConfig } from '../types.js';
+import themeStyles from './theme.css?raw';
+
+export const minimalTheme: ThemeConfig = {
+  name: 'minimal',
+  variables: {
+    '--ai-primary': '#0071e3',
+    '--ai-primary-hover': '#0077ed',
+    '--ai-primary-active': '#0056b3',
+    '--ai-bg-primary': '#ffffff',
+    '--ai-bg-secondary': '#f5f5f7',
+    '--ai-bg-tertiary': '#fafafa',
+    '--ai-bg-chat': '#f5f5f7',
+    '--ai-text-primary': '#1d1d1f',
+    '--ai-text-secondary': '#86868b',
+    '--ai-text-tertiary': '#a1a1a6',
+    '--ai-text-inverse': '#ffffff',
+    '--ai-message-user-bg': '#0071e3',
+    '--ai-message-user-text': '#ffffff',
+    '--ai-message-ai-bg': '#e5e5ea',
+    '--ai-message-ai-text': '#1d1d1f',
+    '--ai-message-border': '#e5e5ea',
+    '--ai-input-bg': '#ffffff',
+    '--ai-input-border': '#e5e5ea',
+    '--ai-input-focus-border': '#0071e3',
+    '--ai-input-text': '#1d1d1f',
+    '--ai-input-placeholder': '#86868b',
+    '--ai-tool-call-bg': '#f6f8fa',
+    '--ai-tool-call-border': '#d1d9e0',
+    '--ai-tool-call-success': '#52c41a',
+    '--ai-tool-call-error': '#ff4d4f',
+    '--ai-tool-call-running': '#0071e3',
+    '--ai-shadow-sm': '0 1px 2px rgba(0, 0, 0, 0.06)',
+    '--ai-shadow-md': '0 2px 8px rgba(0, 0, 0, 0.08)',
+    '--ai-shadow-lg': '0 4px 16px rgba(0, 0, 0, 0.1)',
+    '--ai-radius-sm': '6px',
+    '--ai-radius-md': '12px',
+    '--ai-radius-lg': '18px',
+    '--ai-radius-xl': '24px',
+    '--ai-spacing-xs': '4px',
+    '--ai-spacing-sm': '8px',
+    '--ai-spacing-md': '12px',
+    '--ai-spacing-lg': '16px',
+    '--ai-spacing-xl': '24px',
+  },
+  styles: themeStyles,
+};