npm - ai-chat-ui-kit - Versions diffs - 0.1.0 - Mend

ai-chat-ui-kit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/.eslintrc.cjs +74 -0
package/.github/actions/screenshot/action.yml +35 -0
package/.github/workflows/pages.yml +46 -0
package/README.md +285 -0
package/docs/README.md +176 -0
package/docs/api/components.md +344 -0
package/docs/api/core.md +349 -0
package/docs/chat-style-1-minimal.html +78 -0
package/docs/chat-style-2-neon.html +74 -0
package/docs/chat-style-3-glass.html +73 -0
package/docs/chat-style-4-terminal.html +84 -0
package/docs/chat-style-5-gradient.html +69 -0
package/docs/chat-style-6-corporate.html +116 -0
package/docs/examples/basic-chat.md +291 -0
package/docs/examples/custom-plugins.md +431 -0
package/docs/examples/multi-model.md +466 -0
package/docs/guide/api-adapters.md +431 -0
package/docs/guide/getting-started.md +244 -0
package/docs/guide/headless-mode.md +508 -0
package/docs/guide/plugins.md +416 -0
package/docs/guide/themes.md +327 -0
package/docs/index.html +256 -0
package/docs/theme-preview-1-minimal.html +74 -0
package/docs/theme-preview-2-neon.html +73 -0
package/docs/theme-preview-3-glass.html +77 -0
package/docs/theme-preview-4-terminal.html +86 -0
package/docs/theme-preview-5-gradient.html +79 -0
package/docs/theme-preview-6-corporate.html +71 -0
package/examples/index.html +414 -0
package/examples/react-app/App.tsx +131 -0
package/examples/react-app/index.html +12 -0
package/examples/react-app/main.tsx +15 -0
package/examples/react-app/package.json +24 -0
package/examples/vue-app/index.html +12 -0
package/examples/vue-app/package.json +22 -0
package/examples/vue-app/src/App.vue +145 -0
package/examples/vue-app/src/main.ts +9 -0
package/package.json +44 -0
package/packages/components/package.json +25 -0
package/packages/components/src/chat/chat.css +80 -0
package/packages/components/src/chat/chat.ts +236 -0
package/packages/components/src/index.ts +36 -0
package/packages/components/src/input/input.css +52 -0
package/packages/components/src/input/input.ts +116 -0
package/packages/components/src/markdown/markdown.css +118 -0
package/packages/components/src/markdown/markdown.ts +229 -0
package/packages/components/src/message/message.css +56 -0
package/packages/components/src/message/message.ts +72 -0
package/packages/components/src/styles/global.css +43 -0
package/packages/components/src/tool-call/tool-call.css +98 -0
package/packages/components/src/tool-call/tool-call.ts +171 -0
package/packages/components/src/types.ts +55 -0
package/packages/components/src/utils/helpers.ts +128 -0
package/packages/components/tsconfig.json +25 -0
package/packages/components/tsup.config.ts +18 -0
package/packages/core/package.json +47 -0
package/packages/core/pnpm-lock.yaml +2032 -0
package/packages/core/pnpm-workspace.yaml +2 -0
package/packages/core/src/api/adapters.ts +717 -0
package/packages/core/src/api/base.ts +210 -0
package/packages/core/src/api/index.ts +54 -0
package/packages/core/src/index.ts +93 -0
package/packages/core/src/parser/latex.ts +274 -0
package/packages/core/src/parser/markdown.test.ts +58 -0
package/packages/core/src/parser/markdown.ts +206 -0
package/packages/core/src/parser/mermaid.ts +276 -0
package/packages/core/src/plugins/PluginManager.ts +232 -0
package/packages/core/src/plugins/builtin.ts +406 -0
package/packages/core/src/store/ChatStore.ts +163 -0
package/packages/core/src/store/ModelConfigStore.ts +136 -0
package/packages/core/src/store/ToolCallStore.ts +164 -0
package/packages/core/src/store/base.ts +75 -0
package/packages/core/src/types/index.ts +133 -0
package/packages/core/tsup.config.ts +18 -0
package/packages/themes/package.json +33 -0
package/packages/themes/src/corporate/index.ts +52 -0
package/packages/themes/src/corporate/theme.css +228 -0
package/packages/themes/src/glass/index.ts +52 -0
package/packages/themes/src/glass/theme.css +237 -0
package/packages/themes/src/gradient/index.ts +53 -0
package/packages/themes/src/gradient/theme.css +218 -0
package/packages/themes/src/index.ts +13 -0
package/packages/themes/src/minimal/index.ts +52 -0
package/packages/themes/src/minimal/theme.css +198 -0
package/packages/themes/src/neon/index.ts +52 -0
package/packages/themes/src/neon/theme.css +233 -0
package/packages/themes/src/terminal/index.ts +52 -0
package/packages/themes/src/terminal/theme.css +235 -0
package/packages/themes/src/types.ts +10 -0
package/packages/themes/src/vite-env.d.ts +9 -0
package/packages/themes/tsup.config.ts +21 -0
package/pnpm-workspace.yaml +4 -0
package/tsconfig.json +27 -0
package/vite.config.ts +25 -0
package/vitest.config.ts +28 -0

package/docs/theme-preview-2-neon.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!--
+  @generated-by AI: edenxpzhang
+  @generated-date 2026-05-13
+  Theme Preview · Neon —— 真实组件 DOM + neon 主题
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>主题预览 · 02 Dark Neon | AI Chat UI Kit</title>
+  <link rel="stylesheet" href="../packages/themes/src/neon/theme.css" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      background: #0a0a0a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      overflow: hidden;
+    }
+    body::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;
+    }
+    .stage { width: 450px; height: 700px; position: relative; z-index: 1; }
+  </style>
+</head>
+<body data-theme="neon">
+  <div class="stage">
+    <div class="ai-chat" data-theme="neon">
+      <header class="ai-chat__header">
+        <div class="ai-chat__avatar"></div>
+        <div class="ai-chat__title-group">
+          <h3 class="ai-chat__title">⚡ NEON AI</h3>
+          <p class="ai-chat__subtitle">● SYSTEM ONLINE</p>
+        </div>
+      </header>
+      <div class="ai-chat__messages">
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">&gt; SYSTEM READY<br />&gt; 您好，我是 Neon AI<br />&gt; 随时准备为您服务_</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--user">
+          <div class="ai-message__body">
+            <div class="ai-message__content">&gt; 帮我分析下数据</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">&gt; 处理中...<br />&gt; 根据数据分析，我认为...</div>
+          </div>
+        </div>
+      </div>
+      <div class="ai-input">
+        <div class="ai-input__wrapper">
+          <textarea class="ai-input__textarea" placeholder="> 输入命令..." rows="1"></textarea>
+          <button class="ai-input__send">SEND ▸</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/docs/theme-preview-3-glass.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!--
+  @generated-by AI: edenxpzhang
+  @generated-date 2026-05-13
+  Theme Preview · Glass —— 真实组件 DOM + glass 主题
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>主题预览 · 03 Glassmorphism | AI Chat UI Kit</title>
+  <link rel="stylesheet" href="../packages/themes/src/glass/theme.css" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      overflow: hidden;
+    }
+    body::before {
+      content: '';
+      position: fixed; inset: 0;
+      pointer-events: none;
+    }
+    body::before {
+      width: 400px; height: 400px;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      top: -100px; left: -100px;
+      filter: blur(60px);
+      position: absolute;
+    }
+    .stage { width: 420px; height: 700px; position: relative; z-index: 1; }
+  </style>
+</head>
+<body data-theme="glass">
+  <div class="stage">
+    <div class="ai-chat" data-theme="glass">
+      <header class="ai-chat__header">
+        <div class="ai-chat__avatar">✨</div>
+        <div class="ai-chat__title-group">
+          <h3 class="ai-chat__title">Glass AI</h3>
+          <p class="ai-chat__subtitle">透明 · 优雅 · 智能</p>
+        </div>
+      </header>
+      <div class="ai-chat__messages">
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">您好！我是 Glass AI，采用最新的毛玻璃设计风格。有什么可以帮您的吗？✨</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--user">
+          <div class="ai-message__body">
+            <div class="ai-message__content">这个透明效果真不错</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">谢谢喜欢！基于 backdrop-filter 实现的现代风格。</div>
+          </div>
+        </div>
+      </div>
+      <div class="ai-input">
+        <div class="ai-input__wrapper">
+          <textarea class="ai-input__textarea" placeholder="输入消息..." rows="1"></textarea>
+          <button class="ai-input__send">➤</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/docs/theme-preview-4-terminal.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!--
+  @generated-by AI: edenxpzhang
+  @generated-date 2026-05-13
+  Theme Preview · Terminal —— 真实组件 DOM + terminal 主题
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>主题预览 · 04 Retro Terminal | AI Chat UI Kit</title>
+  <link rel="stylesheet" href="../packages/themes/src/terminal/theme.css" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      background: #0c0c0c;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+    body::after {
+      content: '';
+      position: fixed; inset: 0;
+      background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 255, 0, 0.03) 0px,
+        rgba(0, 255, 0, 0.03) 1px,
+        transparent 1px,
+        transparent 2px
+      );
+      pointer-events: none;
+      z-index: 100;
+    }
+    .stage { width: 650px; height: 720px; }
+  </style>
+</head>
+<body data-theme="terminal">
+  <div class="stage">
+    <div class="ai-chat" data-theme="terminal">
+      <header class="ai-chat__header">
+        <div class="ai-chat__avatar">●</div>
+        <div class="ai-chat__title-group">
+          <h3 class="ai-chat__title">█ AI TERMINAL v2.0 █</h3>
+          <p class="ai-chat__subtitle">SYSTEM READY &gt;_</p>
+        </div>
+      </header>
+      <div class="ai-chat__messages">
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">系统初始化完成。</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">您好！我是终端 AI 助手。</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">请输入您的指令_</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--user">
+          <div class="ai-message__body">
+            <div class="ai-message__content">help</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">可用命令: status / analyze / report / exit</div>
+          </div>
+        </div>
+      </div>
+      <div class="ai-input">
+        <div class="ai-input__wrapper">
+          <textarea class="ai-input__textarea" placeholder="输入命令..." rows="1"></textarea>
+          <button class="ai-input__send">EXEC</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/docs/theme-preview-5-gradient.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!--
+  @generated-by AI: edenxpzhang
+  @generated-date 2026-05-13
+  Theme Preview · Gradient —— 真实组件 DOM + gradient 主题
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>主题预览 · 05 Gradient Bubbles | AI Chat UI Kit</title>
+  <link rel="stylesheet" href="../packages/themes/src/gradient/theme.css" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      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%; }
+    }
+    .stage { width: 420px; height: 720px; }
+  </style>
+</head>
+<body data-theme="gradient">
+  <div class="stage">
+    <div class="ai-chat" data-theme="gradient">
+      <header class="ai-chat__header">
+        <div class="ai-chat__title-group">
+          <h3 class="ai-chat__title">✨ Gradient AI</h3>
+          <p class="ai-chat__subtitle">多彩 · 活力 · 智能</p>
+        </div>
+      </header>
+      <div class="ai-chat__messages">
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">嗨！我是 Gradient AI 🌈<br />采用最新的渐变色设计，让聊天更有趣！</div>
+            <div class="ai-message__time">14:30</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--user">
+          <div class="ai-message__body">
+            <div class="ai-message__content">真好看 🎨</div>
+            <div class="ai-message__time">14:30</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__body">
+            <div class="ai-message__content">太棒了！🌟 让我来帮您...</div>
+            <div class="ai-message__time">14:31</div>
+          </div>
+        </div>
+      </div>
+      <div class="ai-input">
+        <div class="ai-input__wrapper">
+          <textarea class="ai-input__textarea" placeholder="说点什么..." rows="1"></textarea>
+          <button class="ai-input__send">➤</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/docs/theme-preview-6-corporate.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!--
+  @generated-by AI: edenxpzhang
+  @generated-date 2026-05-13
+  Theme Preview · Corporate —— 真实组件 DOM + corporate 主题
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>主题预览 · 06 Corporate Professional | AI Chat UI Kit</title>
+  <link rel="stylesheet" href="../packages/themes/src/corporate/theme.css" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      background: #f0f2f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+    .stage { width: 480px; height: 720px; }
+  </style>
+</head>
+<body data-theme="corporate">
+  <div class="stage">
+    <div class="ai-chat" data-theme="corporate">
+      <header class="ai-chat__header">
+        <div class="ai-chat__avatar">AI</div>
+        <div class="ai-chat__title-group">
+          <h3 class="ai-chat__title">企业智能助手</h3>
+          <p class="ai-chat__subtitle">Enterprise AI Assistant v3.0</p>
+        </div>
+      </header>
+      <div class="ai-chat__messages">
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__avatar">AI</div>
+          <div class="ai-message__body">
+            <div class="ai-message__content">
+              您好！我是企业智能助手。我可以帮助您处理文档、数据分析、日程安排等工作事务。有什么可以为您服务的吗？
+            </div>
+            <div class="ai-message__time">14:30</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--user">
+          <div class="ai-message__avatar">我</div>
+          <div class="ai-message__body">
+            <div class="ai-message__content">帮我准备一份月度数据报告</div>
+            <div class="ai-message__time">14:31</div>
+          </div>
+        </div>
+        <div class="ai-message ai-message--assistant">
+          <div class="ai-message__avatar">AI</div>
+          <div class="ai-message__body">
+            <div class="ai-message__content">收到您的指令。正在为您查询相关数据，请稍候...</div>
+            <div class="ai-message__time">14:31</div>
+          </div>
+        </div>
+      </div>
+      <div class="ai-input">
+        <div class="ai-input__wrapper">
+          <textarea class="ai-input__textarea" placeholder="输入您的问题..." rows="1"></textarea>
+          <button class="ai-input__send">发送</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>