hanc-webrtc-widgets 2.4.6 → 2.4.8

package/README.md

@@ -8,7 +8,7 @@ You can use it in **plain HTML**, or integrate it with **React**, **Next.js**, *
 
 ## ✨ Features
 
-- 🎨 **Three Widget Types**: Inline, Floating, and Pill layouts
+- 🎨 **Four Widget Types**: Inline, Floating, Pill, and Pill Floating layouts
 - 🌈 **Audio-Reactive 3D Orb**: WebGL-powered visualization responding to voice
 - 🎭 **Color Presets**: Dark and light theme color palettes
 - 🔧 **Highly Customizable**: Full control over colors, glow, animations, and behavior
@@ -52,6 +52,13 @@ You can use it in **plain HTML**, or integrate it with **React**, **Next.js**, *
       button-start-text="Talk to AI Agent"
       orb-size="48"
     ></hanc-ai-pill-call>
+
+    <!-- Pill Floating Widget (floating pill button in corner) -->
+    <hanc-ai-pill-floating-call
+      agent-id="YOUR_AGENT_ID"
+      position="bottom-right"
+      button-start-text="Talk to AI"
+    ></hanc-ai-pill-floating-call>
   </body>
 </html>
 ```
@@ -75,7 +82,7 @@ npm install @lit/react hanc-webrtc-widgets
 ```tsx
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { InlineCall, FloatingCall, PillCall } from 'hanc-webrtc-widgets';
+import { InlineCall, FloatingCall, PillCall, PillFloatingCall } from 'hanc-webrtc-widgets';
 
 export const HancAiInlineCall = createComponent({
   tagName: 'hanc-ai-inline-call',
@@ -106,6 +113,16 @@ export const HancAiPillCall = createComponent({
     onCallEnd: 'call-end',
   },
 });
+
+export const HancAiPillFloatingCall = createComponent({
+  tagName: 'hanc-ai-pill-floating-call',
+  elementClass: PillFloatingCall,
+  react: React,
+  events: {
+    onCallStart: 'call-start',
+    onCallEnd: 'call-end',
+  },
+});
 ```
 
 3. Use in your components:
@@ -137,6 +154,13 @@ export default function Example() {
         buttonStartText="Talk to AI"
         orbColors={lightPresets.indigo}
       />
+
+      {/* Floating pill button */}
+      <HancAiPillFloatingCall
+        agentId="YOUR_AGENT_ID"
+        position="bottom-right"
+        buttonStartText="Chat with AI"
+      />
     </>
   );
 }
@@ -209,6 +233,23 @@ export const HancAiPillCall = dynamic(
   },
   { ssr: false }
 );
+
+export const HancAiPillFloatingCall = dynamic(
+  async () => {
+    const { PillFloatingCall } = await import('hanc-webrtc-widgets');
+
+    return createComponent({
+      tagName: 'hanc-ai-pill-floating-call',
+      elementClass: PillFloatingCall,
+      react: React,
+      events: {
+        onCallStart: 'call-start',
+        onCallEnd: 'call-end',
+      },
+    });
+  },
+  { ssr: false }
+);
 ```
 
 3. Use in your pages:
@@ -278,6 +319,13 @@ const handleCallEnd = () => {
       agent-id="YOUR_AGENT_ID"
       button-start-text="Chat with AI"
     />
+
+    <!-- Pill floating widget -->
+    <hanc-ai-pill-floating-call
+      agent-id="YOUR_AGENT_ID"
+      position="bottom-right"
+      button-start-text="Talk to AI"
+    />
   </div>
 </template>
 ```
@@ -469,6 +517,65 @@ Same attributes as `<hanc-ai-inline-call>`, plus:
 
 ---
 
+### `<hanc-ai-pill-floating-call>`
+
+A floating pill-shaped button that stays fixed in a corner of the viewport. Combines the compact pill design with floating positioning for persistent AI assistant access.
+
+#### Quick Start Attributes
+
+The essentials to get started:
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `agent-id` **(required)** | string | - | Your Hanc AI agent ID |
+| `position` | string | `"bottom-right"` | Corner position: `"bottom-right"`, `"bottom-left"`, `"top-right"`, `"top-left"`, or `"static"` |
+| `theme` | string | `"default"` | Theme name: `"default"`, `"emerald"`, `"rose"`, `"amber"`, `"cyan"`, `"purple"`, `"blue"` |
+| `theme-mode` | string | `"auto"` | `"auto"` (system), `"dark"`, or `"light"` |
+| `button-start-text` | string | `"Talk to AI Agent"` | Button text when idle |
+| `orb-size` | number | `48` | Orb diameter in pixels |
+
+#### All Attributes
+
+Same attributes as `<hanc-ai-pill-call>`, plus:
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `position` | string | `"bottom-right"` | Corner position: `"bottom-right"`, `"bottom-left"`, `"top-right"`, `"top-left"`, or `"static"` |
+| `button-start-text` | string | `"Talk to AI Agent"` | Button text in idle state |
+| `button-end-text` | string | `"End call"` | Button text when connected |
+| `button-connecting-text` | string | `"Connecting..."` | Button text when connecting |
+| `orb-size` | number | `48` | Orb diameter in pixels |
+| `theme` | string | `"default"` | Theme name - see Themes section |
+| `theme-mode` | string | `"auto"` | Theme mode: `"auto"`, `"dark"`, or `"light"` |
+
+#### Example
+
+```html
+<!-- Bottom-right corner (default) -->
+<hanc-ai-pill-floating-call
+  agent-id="YOUR_AGENT_ID"
+  position="bottom-right"
+  button-start-text="Chat with AI"
+></hanc-ai-pill-floating-call>
+
+<!-- Top-left corner with custom orb size -->
+<hanc-ai-pill-floating-call
+  agent-id="YOUR_AGENT_ID"
+  position="top-left"
+  orb-size="56"
+  button-start-text="Need help?"
+></hanc-ai-pill-floating-call>
+
+<!-- Static positioning (for custom layouts) -->
+<hanc-ai-pill-floating-call
+  agent-id="YOUR_AGENT_ID"
+  position="static"
+  theme="emerald"
+></hanc-ai-pill-floating-call>
+```
+
+---
+
 ## Color Presets
 
 The library includes professional color presets optimized for dark and light backgrounds.