@ensembleapp/client-sdk 0.0.39 → 0.0.40

package/lib/chat/ChatWidget.css

@@ -1,27 +1,56 @@
 :root[data-chat-widget],
 [data-chat-widget] {
+  /* Primary colors */
   --chat-primary: #3b82f6;
   --chat-primary-text: #ffffff;
   --chat-primary-hover: #2563eb;
+  --chat-primary-subtle: rgba(59, 130, 246, 0.1);
+
+  /* Backgrounds */
   --chat-background: #ffffff;
+  --chat-background-secondary: #f9fafb;
+  --chat-background-tertiary: #f3f4f6;
+
+  /* Borders */
   --chat-border: #e5e7eb;
+  --chat-border-light: #f3f4f6;
+
+  /* Text colors */
+  --chat-text: #111827;
+  --chat-text-secondary: #4b5563;
+  --chat-text-muted: #6b7280;
+  --chat-text-disabled: #9ca3af;
+
+  /* Semantic colors */
+  --chat-success: #22c55e;
+  --chat-success-bg: rgba(34, 197, 94, 0.1);
+  --chat-error: #ef4444;
+  --chat-error-bg: rgba(239, 68, 68, 0.1);
+
+  /* Component-specific (mapped from above) */
   --chat-header-text: #ffffff;
   --chat-user-text: #ffffff;
   --chat-assistant-bg: transparent;
-  --chat-assistant-text: #111827;
+  --chat-assistant-text: var(--chat-text);
+  --chat-input-bg: var(--chat-background);
+  --chat-input-text: var(--chat-text);
+  --chat-input-placeholder: var(--chat-text-muted);
+  --chat-thought-border: var(--chat-border);
+
+  /* Typography */
   --chat-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --chat-radius: 0.75rem;
-  --chat-input-bg: #ffffff;
-  --chat-input-text: #111827;
-  --chat-input-placeholder: #6b7280;
-  --chat-thought-border: #d1d5db;
-
-  /* font */
   --chat-font-size: 0.925rem;
   --chat-thought-font-size: 0.75rem;
+
+  /* Shadows (use semi-transparent for both light/dark) */
+  --chat-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
+  --chat-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --chat-overlay-bg: rgba(0, 0, 0, 0.3);
 }
 
 .chat-widget {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -30,7 +59,7 @@
   background: var(--chat-background);
   border: 1px solid var(--chat-border);
   border-radius: var(--chat-radius);
-  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
+  box-shadow: var(--chat-shadow);
   overflow: hidden;
   font-family: var(--chat-font-family);
   color: var(--chat-assistant-text);
@@ -141,7 +170,7 @@
   color: var(--chat-primary-text);
   border: none;
   border-radius: 999px;
-  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
+  box-shadow: var(--chat-shadow);
   cursor: pointer;
   font-weight: 600;
   z-index: 99999;
@@ -178,11 +207,20 @@
   max-width: calc(100vw - 40px);
   height: 500px;
   max-height: calc(100vh - 140px);
-  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
+  box-shadow: var(--chat-shadow);
   border-radius: 12px;
   overflow: hidden;
 }
 
+.chat-widget__markdown a {
+  color: var(--chat-primary);
+  text-decoration: underline;
+}
+
+.chat-widget__markdown a:hover {
+  color: var(--chat-primary-hover);
+}
+
 .chat-widget__markdown table {
   width: 100%;
   border-collapse: collapse;
@@ -220,7 +258,7 @@
   align-items: center;
   gap: 0.35rem;
   cursor: pointer;
-  color: #6b7280;
+  color: var(--chat-text-muted);
   font-size: 0.8125rem;
 }
 
@@ -230,7 +268,7 @@
 
 .chat-widget__thoughts-icon-container {
   display: flex;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--chat-border);
   border-radius: 999px;
   align-items: center;
   justify-content: center;
@@ -263,7 +301,7 @@
 .chat-widget__thoughts-text {
   margin: 0;
   line-height: 1.5;
-  color: #4b5563;
+  color: var(--chat-text-secondary);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   white-space: pre-wrap;
   word-break: break-word;
@@ -293,7 +331,7 @@
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 999px;
-  background: #9ca3af;
+  background: var(--chat-text-disabled);
   animation: chat-widget-bounce 1s infinite ease-in-out;
 }
 
@@ -377,7 +415,7 @@
 }
 
 .chat-widget__submit:disabled {
-  color: #9ca3af;
+  color: var(--chat-text-disabled);
   cursor: not-allowed;
 }
 
@@ -404,13 +442,13 @@
 }
 
 .chat-widget__mic-button:disabled {
-  color: #9ca3af;
+  color: var(--chat-text-disabled);
   cursor: not-allowed;
 }
 
 .chat-widget__mic-button--active {
   color: var(--chat-primary-hover);
-  background: rgba(59, 130, 246, 0.08);
+  background: var(--chat-primary-subtle);
 }
 
 .chat-widget__mic-icon {
@@ -425,7 +463,7 @@
   width: 16px;
   height: 2px;
   border-radius: 999px;
-  background: rgba(148, 163, 184, 0.4);
+  background: var(--chat-border);
   overflow: hidden;
   display: block;
   transform: translateX(-50%);
@@ -460,7 +498,7 @@
 }
 
 .chat-widget__voice-button:disabled {
-  color: #9ca3af;
+  color: var(--chat-text-disabled);
   cursor: not-allowed;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ensembleapp/client-sdk",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "React client SDK for chat functionality",
   "type": "module",
   "main": "dist/index.js",