@kaltura-apps/genie-chat-react 1.3.3 → 1.5.0-tools.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaltura-apps/genie-chat-react",
-  "version": "1.3.3",
+  "version": "1.5.0-tools.0",
   "author": "kaltura",
   "license": "AGPL-3.0",
   "repository": {
@@ -9,9 +9,8 @@
   },
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@unisphere/genie-types": "^1.13.1",
-    "@unisphere/runtime": "^1.90.1",
-    "@unisphere/runtime-react": "^1.83.4",
+    "@unisphere/genie-types": "^1.22.0-tools.1",
+    "@unisphere/runtime-react": "^1.89.0",
     "react": "^19.0.0"
   },
   "module": "./index.esm.js",

package/src/lib/genie-chat-component.d.ts

@@ -1,9 +1,58 @@
 import React from 'react';
 import { PageVisualSettings } from '@unisphere/genie-types';
+/**
+ * Visual settings for GenieChat component, excluding internal schema version.
+ */
 type GenieChatSettings = Omit<PageVisualSettings, 'schemaVersion'>;
+/**
+ * Standalone Genie chat component with page visual display.
+ *
+ * This component provides a complete chat interface in page mode,
+ * rendering the chat visual with customizable settings and appearance.
+ * Use this for embedding chat directly in your application pages.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <GenieChat />
+ * ```
+ *
+ * @example
+ * With custom settings and styling:
+ * ```tsx
+ * <GenieChat
+ *   settings={{
+ *     customization: {
+ *       scroll: 'container',
+ *       theme: { translucent: true }
+ *     }
+ *   }}
+ *   style={{ maxWidth: '800px', margin: '0 auto' }}
+ * />
+ * ```
+ *
+ * @example
+ * With custom loading and error components:
+ * ```tsx
+ * <GenieChat
+ *   loadingComponent={<CustomSpinner />}
+ *   errorComponent={<CustomError />}
+ *   style={{ height: '600px' }}
+ * />
+ * ```
+ *
+ * @param settings - Page visual settings for customizing chat behavior
+ * @param initialSettings - Initial visual settings loaded before runtime
+ * @param loadingComponent - Custom component to show while chat is loading
+ * @param errorComponent - Custom component to show when chat errors occur
+ * @param style - Custom CSS styles to apply to the chat container
+ * @returns JSX element rendering the Genie chat interface
+ */
 export declare const GenieChat: React.FC<{
     settings?: GenieChatSettings;
     initialSettings?: GenieChatSettings;
+    loadingComponent?: React.ReactNode;
+    errorComponent?: React.ReactNode;
     style?: React.CSSProperties;
 }>;
 export {};

package/src/lib/genie-chat-provider.d.ts

@@ -1,10 +1,67 @@
 import React from 'react';
 import { ChatRuntimeSettings } from '@unisphere/genie-types';
+/**
+ * Props for the GenieChatProvider component.
+ */
 export type GenieChatProviderProps = {
+    /** Environment to connect to (e.g., 'nvp1', 'irp2'). Defaults to 'nvp1' */
     env?: string;
+    /** Language code (e.g., 'en', 'es'). Defaults to 'en' */
     lang?: string;
+    /** Theme mode ('light', 'dark') or custom theme object. Defaults to 'light' */
     theme?: 'light' | 'dark' | object;
+    /** Runtime configuration settings for the chat. Required. */
     runtimeSettings?: Omit<ChatRuntimeSettings, 'schemaVersion'>;
-    runtimeErrorComponent?: React.ReactNode;
+    /** Callback when sandbox status changes */
+    onStatusChange?: (status: 'idle' | 'loading' | 'ready' | 'error') => void;
+    /** Child components to render */
+    children: React.ReactNode;
 };
-export declare const GenieChatProvider: React.FC<React.PropsWithChildren<GenieChatProviderProps>>;
+/**
+ * Provider component that initializes the Genie chat workspace and runtime.
+ *
+ * This component sets up the Unisphere sandbox, loads the chat runtime,
+ * and provides context for child components. Wrap your application with
+ * this provider to use Genie chat features.
+ *
+ * @param props - Component props
+ * @returns JSX element
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <GenieChatProvider runtimeSettings={{ /* chat settings *\/ }}>
+ *   <GenieChatVisual />
+ * </GenieChatProvider>
+ * ```
+ *
+ * @example
+ * With optional configuration:
+ * ```tsx
+ * <GenieChatProvider
+ *   env="irp2"
+ *   lang="es"
+ *   theme="dark"
+ *   runtimeSettings={{ /* chat settings *\/ }}
+ *   onStatusChange={(status) => console.log(status)}
+ * >
+ *   <GenieChatVisual />
+ * </GenieChatProvider>
+ * ```
+ */
+export declare const GenieChatProvider: React.FC<GenieChatProviderProps>;
+/**
+ * Visual component that renders the Genie chat interface.
+ *
+ * This component must be used within a GenieChatProvider. It renders
+ * the actual chat UI with all interactive elements.
+ *
+ * @example
+ * ```tsx
+ * <GenieChatProvider runtimeSettings={{ /* settings *\/ }}>
+ *   <GenieChatVisual />
+ * </GenieChatProvider>
+ * ```
+ */
+export declare const GenieChatVisual: React.FC<import("@unisphere/runtime-react").UnisphereSandboxVisualProps>;
+export declare const GenieChatSandboxContext: React.Context<import("@unisphere/runtime-react").SandboxContextValue | null>;