hanc-webrtc-widgets 2.0.0 → 2.0.2

package/README.md

@@ -6,6 +6,38 @@ It provides ready-to-use, customizable, and lightweight UI widgets for initiatin
 
 You can use it in **plain HTML**, or integrate it with **React**, **Next.js**, or any other modern frontend stack.
 
+## What's New
+
+- Light/dark orb color overrides via `orb-color-light` and `orb-color-dark`.
+- Active-state overrides per theme via `active-orb-color-light` and `active-orb-color-dark`.
+- Smoother neural-network transitions between connected and idle states.
+
+### Examples
+
+Inline (different colors per theme):
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  orb-color-light="#6d28d9"
+  orb-color-dark="#8b5cf6"
+  active-orb-color-light="#16a34a"
+  active-orb-color-dark="#22c55e"
+></hanc-ai-inline-call>
+```
+
+Floating (same behavior, colors optional per theme):
+
+```html
+<hanc-ai-floating-call
+  agent-id="YOUR_AGENT_ID"
+  orb-color-light="var(--brand-accent-600)"
+  orb-color-dark="var(--brand-accent-400)"
+  active-orb-color-light="#0ea5e9"
+  active-orb-color-dark="#38bdf8"
+></hanc-ai-floating-call>
+```
+
 ## Quick Start
 
 ### HTML Example
@@ -153,6 +185,15 @@ An “inline” widget that you embed directly in page content (often as a hero
 | `agent-id` (required)    | string | Agent ID for Twilio calls                                |
 | `button-start-text`      | string | Custom start button text (default: `Start Call with ai`) |
 | `button-connecting-text` | string | Custom connecting button text (default: `Connecting...`) |
+| `button-end-text`        | string | End button text (default: `End call`)                    |
+| `hide-button`            | bool   | Hide the button (orb click still toggles the call)       |
+| `button-position`        | string | Button placement: `top` or `bottom`                      |
+| `orb-color`              | string | Base orb color in idle state                             |
+| `active-orb-color`       | string | Orb color applied when the call becomes active           |
+| `button-color`           | string | Base button color (also used to derive hover/active)      |
+| `button-hover-color`     | string | Button hover color override                              |
+| `button-active-color`    | string | Button active color override                             |
+| `button-text-color`      | string | Button text color                                        |
 
 #### Available Events:
 
@@ -205,11 +246,11 @@ Below are the new properties and examples you can add to the widgets.
 
 ### Theme and visual style
 
-Themes: `liquid-purple` (default), `liquid-cyan`, `liquid-pink`, `neural-green`,
-`neural-blue`, `orbit-blue`, `synaptic-purple`, `minimal-dark`, `minimal-light`, `custom`.
+Themes: `liquid-purple` , `liquid-cyan`, `liquid-pink`, `neural-green`,
+`neural-blue`(default), `orbit-blue`, `synaptic-purple`, `minimal-dark`, `minimal-light`, `custom`.
 
-Visual styles: `liquid-glass` (default), `liquid-glass-premium`, `neural-liquid`,
-`neural-orbit`, `neural-network`, `synaptic-core`, `organic-sphere`, `morphing-blob`.
+Visual styles: `liquid-glass` , `liquid-glass-premium`, `neural-liquid`,
+`neural-orbit`, `neural-network`(default), `synaptic-core`, `organic-sphere`, `morphing-blob`.
 
 ```html
 <hanc-ai-inline-call
@@ -227,6 +268,18 @@ Visual styles: `liquid-glass` (default), `liquid-glass-premium`, `neural-liquid`
 - `visual-style`
 - `orb-size`
 - `button-end-text`
+- `hide-button`
+- `button-position`
+- `orb-color`
+- `orb-color-light`
+- `orb-color-dark`
+- `active-orb-color`
+- `active-orb-color-light`
+- `active-orb-color-dark`
+- `button-color`
+- `button-hover-color`
+- `button-active-color`
+- `button-text-color`
 
 ```html
 <hanc-ai-inline-call
@@ -248,6 +301,18 @@ Visual styles: `liquid-glass` (default), `liquid-glass-premium`, `neural-liquid`
 - `offset-x`
 - `offset-y`
 - `orb-size`
+- `hide-button`
+- `button-position`
+- `orb-color`
+- `orb-color-light`
+- `orb-color-dark`
+- `active-orb-color`
+- `active-orb-color-light`
+- `active-orb-color-dark`
+- `button-color`
+- `button-hover-color`
+- `button-active-color`
+- `button-text-color`
 - `minimized`
 
 ```html
@@ -276,15 +341,90 @@ hanc-ai-inline-call {
   --hanc-button-shadow: rgba(14, 165, 233, 0.35);
   --hanc-button-shadow-hover: rgba(14, 165, 233, 0.45);
   --hanc-button-shadow-active: rgba(239, 68, 68, 0.45);
+  --hanc-orb-active-glow: rgba(14, 165, 233, 0.35);
+  --hanc-orb-z-index: 10000;
+  --hanc-widget-z-index: 9999;
 }
 
 hanc-ai-floating-call {
   --hanc-background: rgba(10, 10, 20, 0.9);
   --hanc-glow-shadow: rgba(14, 165, 233, 0.2);
   --hanc-orb-size: 140px;
+  --hanc-orb-active-glow: rgba(14, 165, 233, 0.35);
+  --hanc-orb-z-index: 10000;
+  --hanc-widget-z-index: 9999;
 }
 ```
 
+#### Custom theme examples
+
+Tip: set `theme="custom"` and override only the variables you need. All other values fall back to defaults.
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  theme="custom"
+  visual-style="neural-network"
+  active-orb-color="#22c55e"
+></hanc-ai-inline-call>
+
+<style>
+  hanc-ai-inline-call {
+    --hanc-background: rgba(10, 15, 20, 0.8);
+    --hanc-orb-size: 220px;
+    --hanc-button: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
+    --hanc-button-hover: linear-gradient(135deg, #0284c7 0%, #16a34a 100%);
+    --hanc-button-active: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    --hanc-button-text: #ffffff;
+    --hanc-orb-active-glow: rgba(34, 197, 94, 0.4);
+  }
+</style>
+```
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  theme="custom"
+  visual-style="neural-orbit"
+  button-position="top"
+></hanc-ai-inline-call>
+
+<style>
+  hanc-ai-inline-call {
+    --hanc-orb-size: 260px;
+    --hanc-button-radius: 999px;
+    --hanc-button: linear-gradient(135deg, #111827 0%, #374151 100%);
+    --hanc-button-hover: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+    --hanc-button-active: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+    --hanc-button-text: #f9fafb;
+    --hanc-orb-active-glow: rgba(59, 130, 246, 0.35);
+  }
+</style>
+```
+
+```html
+<hanc-ai-floating-call
+  agent-id="YOUR_AGENT_ID"
+  theme="custom"
+  position="top-right"
+  button-position="top"
+  active-orb-color="#f97316"
+></hanc-ai-floating-call>
+
+<style>
+  hanc-ai-floating-call {
+    --hanc-background: rgba(255, 255, 255, 0.92);
+    --hanc-text: rgba(24, 24, 27, 0.8);
+    --hanc-glow-shadow: rgba(249, 115, 22, 0.2);
+    --hanc-orb-size: 120px;
+    --hanc-button: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
+    --hanc-button-hover: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
+    --hanc-button-active: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
+    --hanc-button-text: #ffffff;
+  }
+</style>
+```
+
 ---
 
 ### `<hanc-ai-floating-call>`
@@ -301,6 +441,14 @@ A persistent, docked widget that floats in the corner and launches the same voic
 | `button-start-text`      | string | Start button text (default: `Start Call with ai`)        |
 | `button-connecting-text` | string | Custom connecting button text (default: `Connecting...`) |
 | `button-end-text`        | string | End button text (default: `End call`)                    |
+| `hide-button`            | bool   | Hide the button (orb click still toggles the call)       |
+| `button-position`        | string | Button placement: `top` or `bottom`                      |
+| `orb-color`              | string | Base orb color in idle state                             |
+| `active-orb-color`       | string | Orb color applied when the call becomes active           |
+| `button-color`           | string | Base button color (also used to derive hover/active)      |
+| `button-hover-color`     | string | Button hover color override                              |
+| `button-active-color`    | string | Button active color override                             |
+| `button-text-color`      | string | Button text color                                        |
 
 #### Available Events: