ai-chat-ui-kit 0.1.0

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

@@ -0,0 +1,198 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ *
+ * Minimal Clean —— 苹果极简风
+ * 对齐 docs/chat-style-1-minimal.html
+ */
+
+:root[data-theme='minimal'],
+.ai-theme-minimal {
+  --ai-primary: #0071e3;
+  --ai-primary-hover: #0077ed;
+  --ai-primary-active: #0056b3;
+  --ai-bg-primary: #ffffff;
+  --ai-bg-secondary: #f5f5f7;
+  --ai-bg-chat: #ffffff;
+  --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-border: #e5e5ea;
+}
+
+/* 容器 */
+.ai-theme-minimal .ai-chat,
+[data-theme='minimal'] .ai-chat {
+  background: var(--ai-bg-primary);
+  border-radius: 24px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Header */
+.ai-theme-minimal .ai-chat__header,
+[data-theme='minimal'] .ai-chat__header {
+  padding: 20px;
+  background: var(--ai-bg-primary);
+  border-bottom: 1px solid var(--ai-border);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ai-theme-minimal .ai-chat__avatar,
+[data-theme='minimal'] .ai-chat__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0071e3, #42a4ff);
+  color: #fff;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ai-theme-minimal .ai-chat__title,
+[data-theme='minimal'] .ai-chat__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ai-text-primary);
+}
+.ai-theme-minimal .ai-chat__subtitle,
+[data-theme='minimal'] .ai-chat__subtitle {
+  font-size: 12px;
+  color: var(--ai-text-secondary);
+}
+
+/* Messages */
+.ai-theme-minimal .ai-chat__messages,
+[data-theme='minimal'] .ai-chat__messages {
+  background: var(--ai-bg-primary);
+  padding: 20px;
+  gap: 12px;
+}
+
+/* Message */
+.ai-theme-minimal .ai-message,
+[data-theme='minimal'] .ai-message {
+  max-width: 75%;
+}
+.ai-theme-minimal .ai-message__avatar,
+[data-theme='minimal'] .ai-message__avatar {
+  display: none; /* minimal 风格不需要头像 */
+}
+.ai-theme-minimal .ai-message__content,
+[data-theme='minimal'] .ai-message__content {
+  padding: 12px 16px;
+  border-radius: 18px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.ai-theme-minimal .ai-message--user .ai-message__content,
+[data-theme='minimal'] .ai-message--user .ai-message__content {
+  background: var(--ai-message-user-bg);
+  color: var(--ai-message-user-text);
+  border-bottom-right-radius: 6px;
+}
+.ai-theme-minimal .ai-message--assistant .ai-message__content,
+[data-theme='minimal'] .ai-message--assistant .ai-message__content {
+  background: var(--ai-message-ai-bg);
+  color: var(--ai-message-ai-text);
+  border-bottom-left-radius: 6px;
+}
+.ai-theme-minimal .ai-message__time,
+[data-theme='minimal'] .ai-message__time {
+  display: none;
+}
+
+/* Input */
+.ai-theme-minimal .ai-input,
+[data-theme='minimal'] .ai-input {
+  padding: 16px 20px;
+  background: var(--ai-bg-primary);
+  border-top: 1px solid var(--ai-border);
+}
+.ai-theme-minimal .ai-input__wrapper,
+[data-theme='minimal'] .ai-input__wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.ai-theme-minimal .ai-input__textarea,
+[data-theme='minimal'] .ai-input__textarea {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid var(--ai-border);
+  border-radius: 20px;
+  background: #fff;
+  color: var(--ai-text-primary);
+  font-size: 14px;
+  outline: none;
+  resize: none;
+  min-height: 44px;
+  max-height: 120px;
+  transition: border-color 0.2s;
+}
+.ai-theme-minimal .ai-input__textarea:focus,
+[data-theme='minimal'] .ai-input__textarea:focus {
+  border-color: var(--ai-primary);
+}
+.ai-theme-minimal .ai-input__send,
+[data-theme='minimal'] .ai-input__send {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: var(--ai-primary);
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+  transition: transform 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.ai-theme-minimal .ai-input__send:hover:not(:disabled),
+[data-theme='minimal'] .ai-input__send:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+.ai-theme-minimal .ai-input__send:disabled,
+[data-theme='minimal'] .ai-input__send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Typing */
+.ai-theme-minimal .ai-typing-indicator,
+[data-theme='minimal'] .ai-typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--ai-message-ai-bg);
+  border-radius: 18px;
+  align-self: flex-start;
+  width: fit-content;
+}
+.ai-theme-minimal .ai-typing-indicator__dot,
+[data-theme='minimal'] .ai-typing-indicator__dot {
+  width: 6px;
+  height: 6px;
+  background: var(--ai-text-secondary);
+  border-radius: 50%;
+  animation: ai-typing-bounce 1.4s infinite;
+}
+.ai-theme-minimal .ai-typing-indicator__dot:nth-child(2),
+[data-theme='minimal'] .ai-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
+.ai-theme-minimal .ai-typing-indicator__dot:nth-child(3),
+[data-theme='minimal'] .ai-typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes ai-typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-8px); }
+}

package/packages/themes/src/neon/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 neonTheme: ThemeConfig = {
+  name: 'neon',
+  variables: {
+    '--ai-primary': '#7f5af0',
+    '--ai-primary-hover': '#9f7aea',
+    '--ai-primary-active': '#6b46c1',
+    '--ai-bg-primary': '#1a1a2e',
+    '--ai-bg-secondary': '#16213e',
+    '--ai-bg-tertiary': '#0f3460',
+    '--ai-bg-chat': '#0a0a0a',
+    '--ai-text-primary': '#00ffff',
+    '--ai-text-secondary': '#7f5af0',
+    '--ai-text-tertiary': '#4a5568',
+    '--ai-text-inverse': '#ffffff',
+    '--ai-message-user-bg': 'linear-gradient(135deg, #7f5af0, #ff006e)',
+    '--ai-message-user-text': '#ffffff',
+    '--ai-message-ai-bg': '#16213e',
+    '--ai-message-ai-text': '#00ffff',
+    '--ai-message-border': '#0f3460',
+    '--ai-input-bg': '#1a1a2e',
+    '--ai-input-border': '#7f5af0',
+    '--ai-input-focus-border': '#00ffff',
+    '--ai-input-text': '#00ffff',
+    '--ai-input-placeholder': '#7f5af0',
+    '--ai-tool-call-bg': '#16213e',
+    '--ai-tool-call-border': '#0f3460',
+    '--ai-tool-call-success': '#00ff88',
+    '--ai-tool-call-error': '#ff006e',
+    '--ai-tool-call-running': '#7f5af0',
+    '--ai-shadow-sm': '0 0 10px rgba(127, 90, 240, 0.3)',
+    '--ai-shadow-md': '0 0 20px rgba(127, 90, 240, 0.3)',
+    '--ai-shadow-lg': '0 0 30px rgba(120, 0, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.1)',
+    '--ai-radius-sm': '4px',
+    '--ai-radius-md': '8px',
+    '--ai-radius-lg': '12px',
+    '--ai-radius-xl': '16px',
+    '--ai-spacing-xs': '4px',
+    '--ai-spacing-sm': '8px',
+    '--ai-spacing-md': '12px',
+    '--ai-spacing-lg': '16px',
+    '--ai-spacing-xl': '24px',
+  },
+  styles: themeStyles,
+};

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

@@ -0,0 +1,233 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ *
+ * Dark Neon —— 赛博朋克霓虹
+ * 对齐 docs/chat-style-2-neon.html
+ */
+
+:root[data-theme='neon'],
+.ai-theme-neon {
+  --ai-primary: #7f5af0;
+  --ai-primary-hover: #9f7aea;
+  --ai-bg-primary: #1a1a2e;
+  --ai-bg-secondary: #16213e;
+  --ai-bg-tertiary: #0f3460;
+  --ai-text-primary: #00ffff;
+  --ai-text-secondary: #7f5af0;
+  --ai-text-inverse: #ffffff;
+  --ai-message-user-bg: linear-gradient(135deg, #7f5af0, #ff006e);
+  --ai-message-user-text: #ffffff;
+  --ai-message-ai-bg: #16213e;
+  --ai-message-ai-text: #00ffff;
+}
+
+/* 全局背景 —— 让父容器或 body 也带上发光氛围 */
+.ai-theme-neon-host,
+body[data-theme='neon'] {
+  background: #0a0a0a;
+}
+.ai-theme-neon-host::before,
+body[data-theme='neon']::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(circle at 20% 50%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 80% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 容器 */
+.ai-theme-neon .ai-chat,
+[data-theme='neon'] .ai-chat {
+  background: var(--ai-bg-primary);
+  border: 1px solid var(--ai-bg-secondary);
+  border-radius: 16px;
+  box-shadow:
+    0 0 30px rgba(120, 0, 255, 0.3),
+    0 0 60px rgba(0, 255, 255, 0.1);
+  font-family: 'Courier New', monospace;
+  position: relative;
+  z-index: 1;
+}
+
+/* Header */
+.ai-theme-neon .ai-chat__header,
+[data-theme='neon'] .ai-chat__header {
+  padding: 20px;
+  background: linear-gradient(135deg, #16213e, #1a1a2e);
+  border-bottom: 2px solid var(--ai-bg-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ai-theme-neon .ai-chat__avatar,
+[data-theme='neon'] .ai-chat__avatar {
+  width: 8px;
+  height: 8px;
+  background: #00ff88;
+  border-radius: 50%;
+  box-shadow: 0 0 10px #00ff88;
+  animation: ai-neon-pulse 2s infinite;
+}
+.ai-theme-neon .ai-chat__title,
+[data-theme='neon'] .ai-chat__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #00ffff;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+.ai-theme-neon .ai-chat__subtitle,
+[data-theme='neon'] .ai-chat__subtitle {
+  font-size: 12px;
+  color: #7f5af0;
+}
+
+@keyframes ai-neon-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Messages */
+.ai-theme-neon .ai-chat__messages,
+[data-theme='neon'] .ai-chat__messages {
+  background: var(--ai-bg-primary);
+  padding: 20px;
+  gap: 16px;
+}
+.ai-theme-neon .ai-chat__messages::-webkit-scrollbar,
+[data-theme='neon'] .ai-chat__messages::-webkit-scrollbar { width: 6px; }
+.ai-theme-neon .ai-chat__messages::-webkit-scrollbar-thumb,
+[data-theme='neon'] .ai-chat__messages::-webkit-scrollbar-thumb {
+  background: #7f5af0;
+  border-radius: 3px;
+}
+
+/* Message */
+.ai-theme-neon .ai-message,
+[data-theme='neon'] .ai-message {
+  max-width: 80%;
+}
+.ai-theme-neon .ai-message__avatar,
+[data-theme='neon'] .ai-message__avatar { display: none; }
+.ai-theme-neon .ai-message__content,
+[data-theme='neon'] .ai-message__content {
+  padding: 14px 18px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.6;
+  position: relative;
+}
+.ai-theme-neon .ai-message--user .ai-message__content,
+[data-theme='neon'] .ai-message--user .ai-message__content {
+  background: var(--ai-message-user-bg);
+  color: var(--ai-message-user-text);
+  border: 1px solid rgba(127, 90, 240, 0.5);
+  box-shadow: 0 0 20px rgba(127, 90, 240, 0.3);
+}
+.ai-theme-neon .ai-message--assistant .ai-message__content,
+[data-theme='neon'] .ai-message--assistant .ai-message__content {
+  background: var(--ai-message-ai-bg);
+  color: var(--ai-message-ai-text);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
+}
+.ai-theme-neon .ai-message--assistant .ai-message__content::before,
+[data-theme='neon'] .ai-message--assistant .ai-message__content::before {
+  content: '⚡';
+  position: absolute;
+  left: -25px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+}
+.ai-theme-neon .ai-message__time,
+[data-theme='neon'] .ai-message__time { display: none; }
+
+/* Input */
+.ai-theme-neon .ai-input,
+[data-theme='neon'] .ai-input {
+  padding: 16px 20px;
+  background: var(--ai-bg-secondary);
+  border-top: 2px solid var(--ai-bg-tertiary);
+}
+.ai-theme-neon .ai-input__wrapper,
+[data-theme='neon'] .ai-input__wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.ai-theme-neon .ai-input__textarea,
+[data-theme='neon'] .ai-input__textarea {
+  flex: 1;
+  padding: 12px 16px;
+  background: var(--ai-bg-primary);
+  border: 2px solid #7f5af0;
+  border-radius: 12px;
+  color: #00ffff;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  outline: none;
+  resize: none;
+  min-height: 44px;
+  max-height: 120px;
+  transition: all 0.3s;
+}
+.ai-theme-neon .ai-input__textarea:focus,
+[data-theme='neon'] .ai-input__textarea:focus {
+  border-color: #00ffff;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
+}
+.ai-theme-neon .ai-input__textarea::placeholder,
+[data-theme='neon'] .ai-input__textarea::placeholder { color: #7f5af0; }
+.ai-theme-neon .ai-input__send,
+[data-theme='neon'] .ai-input__send {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #7f5af0, #ff006e);
+  border: none;
+  color: #fff;
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: all 0.3s;
+}
+.ai-theme-neon .ai-input__send:hover:not(:disabled),
+[data-theme='neon'] .ai-input__send:hover:not(:disabled) {
+  box-shadow: 0 0 20px rgba(127, 90, 240, 0.5);
+  transform: translateY(-2px);
+}
+
+/* Typing */
+.ai-theme-neon .ai-typing-indicator,
+[data-theme='neon'] .ai-typing-indicator {
+  display: flex;
+  gap: 6px;
+  padding: 12px 18px;
+  background: var(--ai-bg-secondary);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  width: fit-content;
+}
+.ai-theme-neon .ai-typing-indicator__dot,
+[data-theme='neon'] .ai-typing-indicator__dot {
+  width: 8px;
+  height: 8px;
+  background: #00ffff;
+  border-radius: 50%;
+  box-shadow: 0 0 6px #00ffff;
+  animation: ai-typing-bounce 1.4s infinite;
+}
+.ai-theme-neon .ai-typing-indicator__dot:nth-child(2),
+[data-theme='neon'] .ai-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
+.ai-theme-neon .ai-typing-indicator__dot:nth-child(3),
+[data-theme='neon'] .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/terminal/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 terminalTheme: ThemeConfig = {
+  name: 'terminal',
+  variables: {
+    '--ai-primary': '#00ff00',
+    '--ai-primary-hover': '#00ff00',
+    '--ai-primary-active': '#00aa00',
+    '--ai-bg-primary': '#0a0a0a',
+    '--ai-bg-secondary': '#0c0c0c',
+    '--ai-bg-tertiary': '#0a0a0a',
+    '--ai-bg-chat': '#0a0a0a',
+    '--ai-text-primary': '#00ff00',
+    '--ai-text-secondary': '#00aa00',
+    '--ai-text-tertiary': '#008000',
+    '--ai-text-inverse': '#0a0a0a',
+    '--ai-message-user-bg': 'transparent',
+    '--ai-message-user-text': '#00ffff',
+    '--ai-message-ai-bg': 'transparent',
+    '--ai-message-ai-text': '#00ff00',
+    '--ai-message-border': '#00ff00',
+    '--ai-input-bg': 'transparent',
+    '--ai-input-border': '#00ff00',
+    '--ai-input-focus-border': '#00ff00',
+    '--ai-input-text': '#00ff00',
+    '--ai-input-placeholder': '#006600',
+    '--ai-tool-call-bg': '#0c0c0c',
+    '--ai-tool-call-border': '#00ff00',
+    '--ai-tool-call-success': '#00ff00',
+    '--ai-tool-call-error': '#ff0000',
+    '--ai-tool-call-running': '#ffff00',
+    '--ai-shadow-sm': '0 0 10px rgba(0, 255, 0, 0.2)',
+    '--ai-shadow-md': '0 0 20px rgba(0, 255, 0, 0.3)',
+    '--ai-shadow-lg': '0 0 30px rgba(0, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 0, 0.05)',
+    '--ai-radius-sm': '0px',
+    '--ai-radius-md': '0px',
+    '--ai-radius-lg': '8px',
+    '--ai-radius-xl': '8px',
+    '--ai-spacing-xs': '4px',
+    '--ai-spacing-sm': '8px',
+    '--ai-spacing-md': '12px',
+    '--ai-spacing-lg': '16px',
+    '--ai-spacing-xl': '24px',
+  },
+  styles: themeStyles,
+};