@centive/aria-sdk 0.3.1 → 0.4.1

package/README.md

@@ -54,49 +54,71 @@ npm install react@^18.0.0 react-dom@^18.0.0
 
 ## 🚀 Quick Start
 
-### 1. Wrap Your App with AriaProvider
+### 1. Simple Integration (Recommended)
+
+The SDK provides an all-in-one container that handles WebSocket connection, state management, and the UI. Just import and drop it in! By default, this includes both the floating trigger button and the assistant widget.
 
 ```tsx
-import { AriaProvider, AriaAssistant, AriaTriggerButton } from '@centive/aria-sdk';
+import { Aria } from '@centive/aria-sdk';
 import '@centive/aria-sdk/styles.css';
 
 function App() {
-  // Note: Persona configuration is now handled by the backend
-  // The backend determines which persona to display based on user context
   const config = {
     websocketUrl: 'ws://localhost:8000/ws',
-    userId: 'user_123', // Required for backend persona selection & message accumulation
+    userId: 'user_123',
     theme: 'light', // or 'dark'
-    
-    // WebSocket event callbacks
-    onWebSocketEvent: (event) => {
-      console.log('Incoming WebSocket event:', event);
-    },
-    onError: (error) => console.error('Error:', error),
-    onSessionReady: () => console.log('Session ready!'),
-    onConnectionStateChange: (connected) => console.log('Connected:', connected),
-    
-    // Message accumulation callbacks
-    onMessageHistoryAck: (messageCount) => {
-      console.log(`Message history saved: ${messageCount} messages`);
-    },
-    onSessionEndAck: (savedCount) => {
-      console.log(`Session ended: ${savedCount} messages saved`);
-    },
-    onSessionEndError: (error, errorType) => {
-      console.error(`Session end failed: ${errorType} - ${error}`);
-    },
+  };
+
+  return (
+    // This automatically renders the Trigger Button and Assistant Widget
+    <Aria config={config}>
+      <YourApp />
+    </Aria>
+  );
+}
+```
+
+### 2. Advanced Integration (Manual Placement)
+
+If you need full control over where components are rendered, you can disable the automatic rendering and place the component yourself:
+
+```tsx
+import { AriaProvider, AriaAssistant } from '@centive/aria-sdk';
+
+function App() {
+  const config = {
+    websocketUrl: 'ws://localhost:8000/ws',
+    userId: 'user_123',
+    showAssistant: false, // Disable automatic rendering
   };
 
   return (
     <AriaProvider config={config}>
       <YourApp />
       
-      {/* Floating trigger button */}
-      <AriaTriggerButton showAvatar={true} />
-      
-      {/* Assistant widget */}
-      <AriaAssistant />
+      {/* AriaAssistant includes both the trigger button and the widget */}
+      <AriaAssistant 
+        showTrigger={true}      // Show floating trigger button
+        showAvatar={true}       // Show avatar in trigger
+        triggerLabel="Chat"     // Custom button label
+      />
+    </AriaProvider>
+  );
+}
+```
+
+### 3. Trigger Button Only (No Auto-Popup)
+
+If you only want the trigger button without the automatic assistant:
+
+```tsx
+import { AriaProvider, AriaTriggerButton } from '@centive/aria-sdk';
+
+function App() {
+  return (
+    <AriaProvider config={config}>
+      <YourApp />
+      <AriaTriggerButton showAvatar={true} label="Help" />
     </AriaProvider>
   );
 }
@@ -177,10 +199,14 @@ Main provider component that wraps your application.
 
 ### AriaAssistant
 
-Main assistant widget component.
+Complete assistant component that includes both the floating trigger button and the assistant widget.
 
 ```tsx
-<AriaAssistant />
+<AriaAssistant 
+  showTrigger={true}      // Show floating trigger button (default: true)
+  showAvatar={true}       // Show avatar in trigger button (default: true)
+  triggerLabel="Chat"     // Optional custom label for trigger button
+/>
 ```
 
 ### AriaTriggerButton
@@ -248,6 +274,10 @@ interface AriaSDKConfig {
   onMessageStreamAck?: () => void;
   onSessionEndAck?: (savedCount: number) => void;
   onSessionEndError?: (error: string, errorType: string) => void;
+  
+  // Rendering options
+  showFloatingButton?: boolean;      // Show the default floating button (default: true)
+  showAssistant?: boolean;           // Show the assistant widget (default: true)
 }
 ```
 

package/dist/components/AriaAssistant.d.ts

@@ -1,3 +1,12 @@
-import React from 'react';
-export declare const AriaAssistant: React.FC;
+import type { FC } from 'react';
+interface AriaAssistantProps {
+    /** Show the floating trigger button (default: true) */
+    showTrigger?: boolean;
+    /** Show avatar in trigger button (default: true) */
+    showAvatar?: boolean;
+    /** Custom label for trigger button */
+    triggerLabel?: string;
+}
+export declare const AriaAssistant: FC<AriaAssistantProps>;
+export {};
 //# sourceMappingURL=AriaAssistant.d.ts.map

package/dist/components/AriaAssistant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAssistant.d.ts","sourceRoot":"","sources":["../../src/components/AriaAssistant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA6CjC,CAAC"}
+{"version":3,"file":"AriaAssistant.d.ts","sourceRoot":"","sources":["../../src/components/AriaAssistant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,UAAU,kBAAkB;IAC1B,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwDhD,CAAC"}

package/dist/components/AriaTriggerButton.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+import type { FC } from 'react';
 import type { ButtonProps } from '@/components/ui/button';
 interface AriaTriggerButtonProps extends Omit<ButtonProps, 'onClick'> {
     label?: string;
     showIcon?: boolean;
     showAvatar?: boolean;
+    onTrigger?: () => void;
 }
-export declare const AriaTriggerButton: React.FC<AriaTriggerButtonProps>;
+export declare const AriaTriggerButton: FC<AriaTriggerButtonProps>;
 export {};
 //# sourceMappingURL=AriaTriggerButton.d.ts.map

package/dist/components/AriaTriggerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaTriggerButton.d.ts","sourceRoot":"","sources":["../../src/components/AriaTriggerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAK1D,UAAU,sBAAuB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgI9D,CAAC"}
+{"version":3,"file":"AriaTriggerButton.d.ts","sourceRoot":"","sources":["../../src/components/AriaTriggerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAK1D,UAAU,sBAAuB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkJxD,CAAC"}

package/dist/components/AriaWidget.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { type FC } from 'react';
 interface AriaWidgetProps {
     onClose: () => void;
 }
-export declare const AriaWidget: React.FC<AriaWidgetProps>;
+export declare const AriaWidget: FC<AriaWidgetProps>;
 export {};
 //# sourceMappingURL=AriaWidget.d.ts.map

package/dist/components/AriaWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaWidget.d.ts","sourceRoot":"","sources":["../../src/components/AriaWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2ThD,CAAC"}
+{"version":3,"file":"AriaWidget.d.ts","sourceRoot":"","sources":["../../src/components/AriaWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAOnD,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2T1C,CAAC"}

package/dist/components/ChatPanel.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-export declare const ChatPanel: React.FC;
+import { type FC } from 'react';
+export declare const ChatPanel: FC;
 //# sourceMappingURL=ChatPanel.d.ts.map

package/dist/components/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAmN7B,CAAC"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ7D,eAAO,MAAM,SAAS,EAAE,EAmNvB,CAAC"}

package/dist/components/SessionInfo.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { FC } from 'react';
 interface SessionInfoProps {
     compact?: boolean;
 }
-export declare const SessionInfo: React.FC<SessionInfoProps>;
+export declare const SessionInfo: FC<SessionInfoProps>;
 export {};
 //# sourceMappingURL=SessionInfo.d.ts.map

package/dist/components/SessionInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionInfo.d.ts","sourceRoot":"","sources":["../../src/components/SessionInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgMlD,CAAC"}
+{"version":3,"file":"SessionInfo.d.ts","sourceRoot":"","sources":["../../src/components/SessionInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAgM5C,CAAC"}

package/dist/components/ShadowContainer.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import { type FC, type ReactNode, type CSSProperties } from 'react';
 interface ShadowContainerProps {
-    children: React.ReactNode;
+    children: ReactNode;
     /** CSS string to inject into the shadow root */
     styles?: string;
     /** Optional class name for the shadow host element */
     className?: string;
     /** Optional inline styles for the shadow host element */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Tag name for the shadow host element */
     as?: 'div' | 'span' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'header' | 'footer';
 }
@@ -20,6 +20,6 @@ interface ShadowContainerProps {
  * - Prevents host app styles from affecting SDK components
  * - Prevents SDK styles from leaking to host app
  */
-export declare const ShadowContainer: React.FC<ShadowContainerProps>;
+export declare const ShadowContainer: FC<ShadowContainerProps>;
 export default ShadowContainer;
 //# sourceMappingURL=ShadowContainer.d.ts.map

package/dist/components/ShadowContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShadowContainer.d.ts","sourceRoot":"","sources":["../../src/components/ShadowContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2CAA2C;IAC3C,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC9F;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuE1D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShadowContainer.d.ts","sourceRoot":"","sources":["../../src/components/ShadowContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGjG,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC9F;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAuEpD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/context/AriaContext.d.ts

@@ -1,4 +1,4 @@
-import type { ChatMessage, AriaSDKConfig, DisplayMode, TriggerMode, Theme, SessionState } from '@/types';
+import type { ChatMessage, AriaSDKConfig, DisplayMode, TriggerMode, Theme, SessionState, TriggerSessionOptions } from '@/types';
 export interface AriaContextType {
     isOpen: boolean;
     isConnected: boolean;
@@ -16,7 +16,7 @@ export interface AriaContextType {
     toggleMute: () => void;
     startSession: () => Promise<void>;
     stopSession: () => Promise<void>;
-    triggerSession: () => void;
+    triggerSession: (options?: TriggerSessionOptions) => void;
     displayMode: DisplayMode;
     triggerMode: TriggerMode;
     theme: Theme;

package/dist/context/AriaContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaContext.d.ts","sourceRoot":"","sources":["../../src/context/AriaContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzG,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,iDAA8C,CAAC"}
+{"version":3,"file":"AriaContext.d.ts","sourceRoot":"","sources":["../../src/context/AriaContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhI,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,iDAA8C,CAAC"}

package/dist/context/AriaProvider.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { type FC, type ReactNode } from 'react';
 import type { AriaSDKConfig } from '@/types';
 interface AriaProviderProps {
     config: AriaSDKConfig;
-    children: React.ReactNode;
+    children?: ReactNode;
 }
-export declare const AriaProvider: React.FC<AriaProviderProps>;
+export declare const AriaProvider: FC<AriaProviderProps>;
 export {};
 //# sourceMappingURL=AriaProvider.d.ts.map

package/dist/context/AriaProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaProvider.d.ts","sourceRoot":"","sources":["../../src/context/AriaProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAmBxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAgGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAugBpD,CAAC"}
+{"version":3,"file":"AriaProvider.d.ts","sourceRoot":"","sources":["../../src/context/AriaProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAoB1F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAM7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgGD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAmiB9C,CAAC"}