feat(web): add web demo and polish Lit web components UI and demo tooling

2026-03-07 08:15:23 +00:00
parent dd04edb420
commit 54f9cea7f9
15 changed files with 994 additions and 100 deletions
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>smartchat — Web Demo</title>
+
+  <!-- Put your Anthropic API key here -->
+  <meta name="anthropic-token" content="YOUR_KEY_HERE">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    html, body {
+      height: 100%;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      background: #050508;
+      color: #e4e4e7;
+      overflow: hidden;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      position: relative;
+    }
+
+    /* Subtle gradient background */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background:
+        radial-gradient(ellipse 600px 400px at 30% 20%, rgba(99, 102, 241, 0.06), transparent),
+        radial-gradient(ellipse 500px 300px at 70% 80%, rgba(139, 92, 246, 0.04), transparent);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .page-header {
+      text-align: center;
+      margin-bottom: 20px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .page-title {
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: rgba(255, 255, 255, 0.3);
+      margin-bottom: 4px;
+    }
+
+    .page-subtitle {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.15);
+    }
+
+    smartchat-window {
+      width: 100%;
+      max-width: 680px;
+      height: min(75vh, 640px);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 16px;
+      box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.03),
+        0 8px 40px rgba(0, 0, 0, 0.4),
+        0 2px 12px rgba(0, 0, 0, 0.2);
+      position: relative;
+      z-index: 1;
+    }
+  </style>
+
+  <script type="module" src="./demo.web.js"></script>
+</head>
+<body>
+  <div class="page-header">
+    <div class="page-title">smartchat</div>
+    <div class="page-subtitle">Web Component Demo</div>
+  </div>
+
+  <smartchat-window
+    placeholder="Ask me anything..."
+    header-title="SmartChat AI"
+  ></smartchat-window>
+</body>
+</html>