@uraiagent/react 0.0.1

package/README.md

@@ -0,0 +1,133 @@
+# uraiagent
+
+The `Agent Widget` in uraiagent is a customizable and embeddable component for creating chat widgets with configurable options and styles. This documentation outlines the properties, types, and usage of the widget.
+
+---
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install uraiagent
+```
+
+---
+
+## Usage
+
+```tsx
+import React from "react";
+import { Root } from "agent-widget";
+
+const Agent = () => {
+  return (
+    <Root
+      options={{
+        token: "your_token",
+        api: "https://your.api.endpoint",
+        socket: "https://your.socket.endpoint",
+        initialMessage: "Hello! How can I assist you?",
+        description: { visible: true, text: "How can we help?" },
+        components: [{ key: "example", component: <div></div> }],
+        containerProps: {
+          style: { position: "fixed", zIndex: 99 },
+        },
+      }}
+      classNames={{
+        shadow: "xl",
+      }}
+    >
+      <Widget />
+    </Root>
+  );
+};
+
+export default Agent;
+```
+
+---
+
+## API
+
+### `OptionsProps`
+
+| **Property**       | **Type**                                                                                             | **Default**          | **Description**                                                    |
+| ------------------ | ---------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------ |
+| `token`            | `string`                                                                                             | **Required**         | Authentication token for API requests.                             |
+| `api`              | `string`                                                                                             | **Required**         | Base URL for the API endpoint.                                     |
+| `socket`           | `string`                                                                                             | **Required**         | URL for the WebSocket connection.                                  |
+| `headers`          | `Record<string, string>`                                                                             | `undefined`          | Custom headers for API requests.                                   |
+| `queryParams`      | `Record<string, string>`                                                                             | `undefined`          | Query parameters to append to API requests.                        |
+| `initialMessage`   | `string`                                                                                             | **Required**         | Initial message to display in the chat widget.                     |
+| `defaultOpen`      | `boolean`                                                                                            | `false`              | Whether the chat widget should be open by default.                 |
+| `debug`            | `boolean`                                                                                            | `false`              | Enables debug mode for logging.                                    |
+| `warn`             | `boolean`                                                                                            | `false`              | Enables warning logs.                                              |
+| `language`         | `string`                                                                                             | `undefined`          | Sets the language of the chat widget.                              |
+| `containerProps`   | `React.DetailedHTMLProps`                                                                            | `undefined`          | Props for the container `<div>` element.                           |
+| `closeOutside`     | `boolean`                                                                                            | `true`               | Allows closing the widget by clicking outside it.                  |
+| `description`      | `{ visible?: boolean; text?: string }`                                                               | `{ visible: false }` | Configures the description text.                                   |
+| `inputPlaceholder` | `string`                                                                                             | `undefined`          | Placeholder text for the input field.                              |
+| `components`       | `ComponentType[]`                                                                                    | `[]`                 | Array of custom components to include in the widget.               |
+| `user`             | `{ name?: string; email?: string; phone: string; avatar?: string; custom?: Record<string, string> }` | `undefined`          | Information about the user interacting with the widget.            |
+| `agent`            | `{ name?: string; logo?: string }`                                                                   | `undefined`          | Information about the agent or bot responding to messages.         |
+| `onClose`          | `() => void`                                                                                         | `undefined`          | Callback when the widget is closed.                                |
+| `onHandoff`        | `(handout: HandoffPayloadType) => void`                                                              | `undefined`          | Callback for when a conversation is handed off to another service. |
+
+---
+
+### `ConfigStyleProps`
+
+| **Property**       | **Type**                                                                                            | **Default** | **Description**                                       |
+| ------------------ | --------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------- |
+| `background`       | `string`                                                                                            | `undefined` | Background color of the widget.                       |
+| `color`            | `string`                                                                                            | `undefined` | Text color for the widget.                            |
+| `borderColor`      | `string`                                                                                            | `undefined` | Color of the widget border.                           |
+| `borderWidth`      | `1 \| 2 \| 3 \| 4`                                                                                  | `1`         | Width of the widget border.                           |
+| `borderRadius`     | `"none" \| "sm" \| "md" \| "xl"`                                                                    | `"none"`    | Border radius for the widget container.               |
+| `shadow`           | `"none" \| "sm" \| "md" \| "xl"`                                                                    | `"none"`    | Shadow style for the widget.                          |
+| `trigger`          | `{ style?: string; icon?: ReactNode }`                                                              | `undefined` | Custom styles and icon for the widget trigger button. |
+| `input`            | `{ style?: string; wrapper?: string }`                                                              | `undefined` | Custom styles for the input field and wrapper.        |
+| `descriptionStyle` | `string`                                                                                            | `undefined` | Custom style for the description text.                |
+| `messages`         | `{ agent?: { wrapper?: string; content?: string }; user?: { wrapper?: string; content?: string } }` | `undefined` | Custom styles for messages sent by the agent or user. |
+
+---
+
+## Example Configurations
+
+### Basic Setup
+
+```tsx
+<Root
+  options={{
+    token: "example_token",
+    api: "https://example.api",
+    socket: "https://example.socket",
+    initialMessage: "Welcome!",
+  }}
+/>
+```
+
+### With Custom Styles
+
+```tsx
+<Root
+  options={{
+    token: "example_token",
+    api: "https://example.api",
+    socket: "https://example.socket",
+    initialMessage: "Welcome!",
+  }}
+  classNames={{
+    background: "#f4f4f4",
+    borderColor: "#ccc",
+    borderWidth: 2,
+    borderRadius: "md",
+    shadow: "sm",
+  }}
+/>
+```
+
+---
+
+Let me know if additional refinements are needed!

package/dist/Root.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { WidgetConfig } from '.';
+type RootProps = {
+    children: React.ReactNode;
+    config: WidgetConfig;
+};
+declare function Root({ children, config }: RootProps): import("react/jsx-runtime").JSX.Element;
+export default Root;

package/dist/Widget.d.ts

@@ -0,0 +1 @@
+export declare function AgentWidget(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Agent/AgentAvatar.d.ts

@@ -0,0 +1 @@
+export declare function AgentAvatar(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Agent/AgentInitialMessage.d.ts

@@ -0,0 +1,3 @@
+export declare function AgentInitialMessage({ message }: {
+    message?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Agent/AgentMaximize.d.ts

@@ -0,0 +1 @@
+export declare function AgentMaximize(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Agent/AgentMessage.d.ts

@@ -0,0 +1,2 @@
+import { AgentMessageProps } from '../../interfaces';
+export declare function AgentMessage(message: AgentMessageProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Agent/AgentMessageWrapper.d.ts

@@ -0,0 +1,9 @@
+type AgentMessage = {
+    children: React.ReactNode;
+    _id?: string;
+    className?: string;
+    isComponent?: boolean;
+    createdAt?: string;
+};
+export declare function AgentMessageWrapper({ children, _id, className, isComponent, createdAt, }: AgentMessage): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Agent/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AgentAvatar';
+export * from './AgentInitialMessage';
+export * from './AgentMaximize';
+export * from './AgentMessage';
+export * from './AgentMessageWrapper';

package/dist/components/Chat/ChatFooter.d.ts

@@ -0,0 +1 @@
+export declare function ChatFooter(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/ChatHeader.d.ts

@@ -0,0 +1 @@
+export declare function ChatHeader(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/ChatLoader.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+interface ChatLoaderProps extends HTMLAttributes<HTMLDivElement> {
+    reachedBottomInitially: boolean;
+}
+export declare const ChatLoader: import('react').ForwardRefExoticComponent<ChatLoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Chat/ChatScreen.d.ts

@@ -0,0 +1 @@
+export declare function ChatScreen(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/ChatWarning.d.ts

@@ -0,0 +1,4 @@
+declare const ChatWarning: ({ onClose }: {
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChatWarning;

package/dist/components/Chat/WidgetTrigger.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    open: boolean;
+    hover: boolean;
+    canSend?: boolean;
+    customIcon?: React.ReactNode;
+    onClick: () => void;
+    onMouseOver: () => void;
+};
+export declare function WidgetTrigger({ open, hover, canSend, customIcon, onClick, onMouseOver, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chat/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ChatFooter';
+export * from './ChatHeader';
+export * from './ChatLoader';
+export * from './ChatScreen';
+export * from './ChatWarning';
+export * from './WidgetTrigger';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,12 @@
+type DialogProps = {
+    open?: boolean;
+    children: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function Dialog({ children, ...props }: DialogProps): import('react').ReactNode;
+declare const DialogTrigger: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const DialogClose: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Dialog, DialogTrigger, DialogOverlay, DialogContent, DialogClose, DialogHeader, };

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './Dialog';

package/dist/components/Event/Confirmation.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, ConfirmationEvent } from '../../interfaces';
+type Props = ComponentProps<ConfirmationEvent>;
+export declare const Confirmation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Event/EventMessage.d.ts

@@ -0,0 +1,2 @@
+import { EventMessageProps } from '../../interfaces';
+export declare function EventMessage(message: EventMessageProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Event/Fallback.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from '../../interfaces';
+type Props = ComponentProps<unknown>;
+/**
+ * The Basic Fallback component (Rendered when Debug is True and the component key is not found)
+ */
+export declare function Fallback(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Event/FollowUp.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FollowUpProps } from '../../interfaces';
+type Props = ComponentProps<FollowUpProps>;
+export declare const FollowUp: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Event/Handoff.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, HandoffPayloadType } from '../../interfaces';
+type Props = ComponentProps<HandoffPayloadType>;
+export declare const Handoff: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Event/Progress.d.ts

@@ -0,0 +1 @@
+export declare function Progress(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Event/Text.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from '../../interfaces';
+type Props = ComponentProps<{
+    message: string;
+}>;
+/**
+ * The Basic Text component
+ */
+export declare function Text({ _id, data, createdAt }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Event/index.d.ts

@@ -0,0 +1,7 @@
+export * from './EventMessage';
+export * from './Confirmation';
+export * from './Fallback';
+export * from './FollowUp';
+export * from './Handoff';
+export * from './Progress';
+export * from './Text';

package/dist/components/Loader.d.ts

@@ -0,0 +1,5 @@
+type LoaderProps = {
+    size?: "sm" | "md";
+};
+declare const Loader: ({ size }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Loader;

package/dist/components/User/UserAvatar.d.ts

@@ -0,0 +1 @@
+export declare function UserAvatar(): import("react/jsx-runtime").JSX.Element;

package/dist/components/User/UserMessage.d.ts

@@ -0,0 +1,2 @@
+import { UserMessageProps } from '../..';
+export declare function UserMessage({ message, _id, createdAt }: UserMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/User/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UserAvatar';
+export * from './UserMessage';

package/dist/components/Voice/VoiceRecorder.d.ts

@@ -0,0 +1,4 @@
+export declare function VoiceRecorder({ onSuccess, disabled, }: {
+    onSuccess?: (text: string) => void;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Voice/index.d.ts

@@ -0,0 +1 @@
+export * from './VoiceRecorder';

package/dist/components/Vote/Vote.d.ts

@@ -0,0 +1,3 @@
+export declare function Vote({ messageId }: {
+    messageId: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Vote/index.d.ts

@@ -0,0 +1 @@
+export * from './Vote';

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Agent';
+export * from './Chat';
+export * from './User';
+export * from './Voice';
+export * from './Vote';
+export * from './Event';

package/dist/contexts/ConfigContext.d.ts

@@ -0,0 +1,10 @@
+import { ConfigProps } from '../interfaces';
+import { ReactNode } from 'react';
+export type ConfigContextType = Omit<ConfigProps, "container">;
+type ConfigProviderProps = {
+    data: ConfigContextType;
+    children: ReactNode;
+};
+export declare const ConfigProvider: ({ children, data }: ConfigProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useConfig: () => ConfigContextType;
+export {};

package/dist/contexts/DialogContext.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type DialogInstanceProps = {
+    open: boolean;
+    set: (val: boolean) => void;
+};
+export declare const DialogProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDialog: () => DialogInstanceProps;
+export {};

package/dist/contexts/LanguageProvider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type LanguageProps = {
+    lang: string;
+    get: (key: string) => string;
+};
+export declare const LanguageProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useLanguage: () => LanguageProps;
+export {};

package/dist/contexts/MessageProvider.d.ts

@@ -0,0 +1,12 @@
+import { ComponentRegistry } from '../helpers/ComponentRegistry';
+import { ChatController } from '../helpers/MessageHandler';
+type Props = {
+    children: React.ReactNode;
+};
+type MessageContextType = {
+    _handler: ChatController;
+    _components: ComponentRegistry;
+};
+export declare const MessageProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const useMessage: () => MessageContextType;
+export {};

package/dist/contexts/WidgetContext.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+type WidgetContextType = {
+    open: boolean;
+    maximize: {
+        value: boolean;
+        component: ReactNode | null;
+    };
+    hover: boolean;
+    setMaximize: (data: {
+        value: boolean;
+        component: ReactNode | null;
+    }) => void;
+    setOpen: (data: boolean) => void;
+    setHover: (data: boolean) => void;
+    toggleWidget: () => void;
+    toggleMaximize: (component: ReactNode | null) => void;
+    onClose: () => void;
+};
+export declare const WidgetProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useWidget: () => WidgetContextType;
+export {};

package/dist/contexts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ConfigContext';
+export * from './MessageProvider';
+export * from './WidgetContext';
+export * from './socket';
+export * from './session';

package/dist/contexts/session/SessionContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+type SessionContextType = {
+    sessionId: string | null;
+    conversationId: string | null;
+    ensureSession: () => Promise<string>;
+    isCreating: boolean;
+};
+export declare function SessionProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSession(): SessionContextType;
+export {};

package/dist/contexts/session/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SessionContext';
+export * from './session.api';

package/dist/contexts/session/session.api.d.ts

@@ -0,0 +1,61 @@
+export interface ChatMessage {
+    id: string;
+    role: "user" | "agent";
+    text: string;
+    createdAt: string;
+    senderName?: string;
+    senderAvatarUrl?: string;
+    /** MessageContentTypeEnum value — 'text' | 'ui_component' | 'mixed'. */
+    type?: string;
+    /** Present for ui_component messages so widget history re-renders. */
+    uiComponent?: {
+        componentType: string;
+        componentId?: string;
+        data?: {
+            structure?: Record<string, unknown>;
+            state?: Record<string, unknown>;
+            [k: string]: unknown;
+        };
+    };
+}
+export interface SessionResponse {
+    sessionId: string;
+    conversationId: string;
+}
+export interface SessionHistoryResponse extends SessionResponse {
+    messages: ChatMessage[];
+}
+export interface CreateSessionOptions {
+    organizationId: string;
+    agentId: string;
+    agentName?: string;
+    user?: {
+        name?: string;
+        email?: string;
+        phone?: string;
+    };
+}
+export declare function createSession(api: string, widgetToken: string, options: CreateSessionOptions): Promise<SessionResponse>;
+export declare function loadSession(api: string, sessionId: string, widgetToken: string, organizationId: string): Promise<SessionHistoryResponse>;
+export interface SendMessageOptions {
+    headers?: Record<string, string>;
+    queryParams?: Record<string, string>;
+}
+export declare function sendMessage(api: string, sessionId: string, message: string, organizationId: string, options?: SendMessageOptions): Promise<{
+    ok: boolean;
+}>;
+export interface WidgetActionRequest {
+    action: {
+        type: string;
+        payload?: unknown;
+    };
+    source: {
+        executionId: string;
+        nodeId?: string;
+        messageId: string;
+    };
+}
+/** Post a widget button action (e.g. approve/reject) back to the backend to resume a workflow. */
+export declare function sendAction(api: string, sessionId: string, organizationId: string, body: WidgetActionRequest): Promise<{
+    ok: boolean;
+}>;

package/dist/contexts/session/session.cookie.d.ts

@@ -0,0 +1,3 @@
+export declare function getSessionId(): string | null;
+export declare function setSessionId(id: string): void;
+export declare function clearSessionId(): void;

package/dist/contexts/socket/SocketContext.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+type EventHandler<T = any> = (data: T) => void;
+/** Mirrors Pusher's native connection state machine. */
+export type WsConnectionState = "initialized" | "connecting" | "connected" | "unavailable" | "failed" | "disconnected";
+type SocketContextType = {
+    wsReady: boolean;
+    connectionState: WsConnectionState;
+    on: <T = unknown>(event: string, handler: EventHandler<T>) => void;
+    off: <T = unknown>(event: string, handler: EventHandler<T>) => void;
+};
+export declare function SocketProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSocketContext(): SocketContextType;
+export {};

package/dist/contexts/socket/channels.d.ts

@@ -0,0 +1,2 @@
+/** Public channel for a guest widget session. No auth required. */
+export declare const widgetSupportChannel: (sessionId: string) => `public-support.${string}`;

package/dist/contexts/socket/index.d.ts

@@ -0,0 +1 @@
+export * from './SocketContext';

package/dist/contexts/socket/pusher.client.d.ts

@@ -0,0 +1,9 @@
+import { default as Pusher } from 'pusher-js';
+interface PusherConfig {
+    wsKey: string;
+    wsHost: string;
+    wsPort: number;
+    forceTls: boolean;
+}
+export declare function createPusherClient({ wsKey, wsHost, wsPort, forceTls, }: PusherConfig): Pusher;
+export {};

package/dist/contexts/socket/ws.config.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Centralized realtime-transport (Soketi / Pusher) configuration.
+ *
+ * These values are intentionally hardcoded here and hidden from the public
+ * widget props — consumers should not need to know our broker details to embed
+ * the widget. This is the single source of truth: if we later need per-deployment
+ * values again, either expose them on the public config or replace these
+ * constants with a `/widget-config` bootstrap fetch, and nothing else changes.
+ */
+export declare const WS_CONFIG: {
+    readonly key: "uraiagent-key";
+    readonly host: "ws.uraiagent.com";
+    readonly port: 443;
+    readonly forceTls: true;
+};

package/dist/helpers/ComponentRegistry.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, OptionsType } from '../interfaces';
+/**
+ * this a singleton  class helps me to easily control the components present/available in the widget.
+ * it also manages the various types of components to be added along the way.
+ */
+export declare class ComponentRegistry {
+    components: ComponentType[];
+    constructor(opts: OptionsType);
+    private get;
+    private getOrFallback;
+    getComponent(key: string, getFallback?: boolean): import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    register(com: ComponentType): this;
+}