@glydeunity/voice-sdk 1.5.15 → 1.5.16

package/dist/index.d.ts

@@ -109,7 +109,7 @@ export declare interface ChatWidgetConfig extends BaseGlydeConfig {
     allowModeSwitch?: boolean;
     /** Custom container element (renders inline in this element) */
     container?: string | HTMLElement;
-    /** Display mode: 'floating' (default), 'modal', or 'inline' */
+    /** Display mode: 'floating' (default), 'modal', 'inline', or 'mobile' */
     displayMode?: DisplayMode;
     /** Widget dimensions for modal/inline modes */
     dimensions?: WidgetDimensions;
@@ -414,8 +414,9 @@ declare interface DeepgramAgentConfig_2 {
  * - 'floating': Chat icon that expands to panel (default)
  * - 'modal': Full modal overlay, opens immediately
  * - 'inline': Embedded in page/container, no floating button
+ * - 'mobile': Full-viewport chat optimized for mobile (safe areas, auto-start, no FAB)
  */
-declare type DisplayMode = 'floating' | 'modal' | 'inline';
+declare type DisplayMode = 'floating' | 'modal' | 'inline' | 'mobile';
 
 /**
  * Individual function call within a FunctionCallRequest
@@ -473,7 +474,7 @@ export declare function getThemeCSSVariables(theme: 'light' | 'dark'): string;
 /**
  * Global CSS styles to inject
  */
-export declare const globalStyles = "\n  @keyframes glyde-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.5; transform: scale(1.2); }\n  }\n\n  @keyframes glyde-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  @keyframes glyde-fade-in {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes glyde-slide-up {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes glyde-bounce {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-5px); }\n  }\n\n  @keyframes glyde-modal-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes glyde-modal-scale-in {\n    from { opacity: 0; transform: scale(0.95); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  .glyde-modal-backdrop {\n    animation: glyde-modal-fade-in 0.2s ease-out;\n  }\n\n  .glyde-modal-content {\n    animation: glyde-modal-scale-in 0.2s ease-out;\n  }\n\n  .glyde-fade-in {\n    animation: glyde-fade-in 0.2s ease-out;\n  }\n\n  .glyde-widget-root {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--glyde-text);\n    box-sizing: border-box;\n  }\n\n  .glyde-widget-root *, .glyde-widget-root *::before, .glyde-widget-root *::after {\n    box-sizing: border-box;\n  }\n\n  .glyde-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid var(--glyde-border);\n    border-top-color: var(--glyde-primary);\n    border-radius: 50%;\n    animation: glyde-spin 1s linear infinite;\n  }\n\n  .glyde-pulse-dot {\n    animation: glyde-pulse 1.5s infinite;\n  }\n\n  .glyde-fade-in {\n    animation: glyde-fade-in 0.3s ease-out;\n  }\n\n  .glyde-slide-up {\n    animation: glyde-slide-up 0.3s ease-out;\n  }\n";
+export declare const globalStyles = "\n  @keyframes glyde-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.5; transform: scale(1.2); }\n  }\n\n  @keyframes glyde-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  @keyframes glyde-fade-in {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes glyde-slide-up {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes glyde-bounce {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-5px); }\n  }\n\n  @keyframes glyde-modal-fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes glyde-modal-scale-in {\n    from { opacity: 0; transform: scale(0.95); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  .glyde-modal-backdrop {\n    animation: glyde-modal-fade-in 0.2s ease-out;\n  }\n\n  .glyde-modal-content {\n    animation: glyde-modal-scale-in 0.2s ease-out;\n  }\n\n  /* Mobile display: full viewport with safe areas, no FAB, auto-start */\n  .glyde-mobile-viewport {\n    position: fixed;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    height: 100dvh;\n    max-height: 100dvh;\n    padding-top: env(safe-area-inset-top, 0);\n    padding-right: env(safe-area-inset-right, 0);\n    padding-bottom: env(safe-area-inset-bottom, 0);\n    padding-left: env(safe-area-inset-left, 0);\n    box-sizing: border-box;\n    z-index: 10000;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: var(--glyde-background);\n  }\n\n  .glyde-mobile-viewport .glyde-widget-root {\n    flex: 1;\n    min-height: 0;\n    border-radius: 0;\n    border: none;\n    box-shadow: none;\n  }\n\n  .glyde-fade-in {\n    animation: glyde-fade-in 0.2s ease-out;\n  }\n\n  .glyde-widget-root {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--glyde-text);\n    box-sizing: border-box;\n  }\n\n  .glyde-widget-root *, .glyde-widget-root *::before, .glyde-widget-root *::after {\n    box-sizing: border-box;\n  }\n\n  .glyde-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid var(--glyde-border);\n    border-top-color: var(--glyde-primary);\n    border-radius: 50%;\n    animation: glyde-spin 1s linear infinite;\n  }\n\n  .glyde-pulse-dot {\n    animation: glyde-pulse 1.5s infinite;\n  }\n\n  .glyde-fade-in {\n    animation: glyde-fade-in 0.3s ease-out;\n  }\n\n  .glyde-slide-up {\n    animation: glyde-slide-up 0.3s ease-out;\n  }\n";
 
 /**
  * GlydeChat - CDN entry point