@opencx/widget-react 4.0.0

package/README.md

@@ -0,0 +1,5 @@
+# OpenCX Widget - React
+
+The default React widget. Usable as a React component, or embedded in HTML.
+
+For more information, check [the documentation](https://docs.open.cx/widget/getting-started)

package/dist/WidgetPopoverAnchor.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function WidgetPopoverAnchor(): React.JSX.Element;

package/dist/WidgetPopoverContent.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare function WidgetContent(): React.JSX.Element;
+export declare function WidgetPopoverContent(): React.JSX.Element;

package/dist/WidgetPopoverTrigger.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare function WidgetPopoverTrigger(): React.JSX.Element;
+export { WidgetPopoverTrigger };

package/dist/components/AgentOrBotAvatar.d.ts

@@ -0,0 +1,6 @@
+import { AgentOrBotType } from '@opencx/widget-core';
+import { default as React } from 'react';
+import { AvatarProps } from '@radix-ui/react-avatar';
+export declare function AgentOrBotAvatar({ agent, ...props }: AvatarProps & {
+    agent: AgentOrBotType | undefined;
+}): React.JSX.Element;

package/dist/components/AttachmentPreview.d.ts

@@ -0,0 +1,7 @@
+import { MessageAttachmentType } from '@opencx/widget-core';
+import { default as React } from 'react';
+type Props = {
+    attachment: MessageAttachmentType;
+};
+export declare function AttachmentPreview({ attachment }: Props): React.JSX.Element;
+export {};

package/dist/components/BotOrAgentMessage.d.ts

@@ -0,0 +1,7 @@
+import { WidgetComponentProps } from '@opencx/widget-react-headless';
+import { default as React } from 'react';
+export declare function BotOrAgentMessage({ isFirstInGroup, isLastInGroup, isAloneInGroup, ...props }: WidgetComponentProps & {
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    isAloneInGroup: boolean;
+}): React.JSX.Element;

package/dist/components/BotOrAgentMessageGroup.d.ts

@@ -0,0 +1,7 @@
+import { AgentMessageType, AgentOrBotType, BotMessageType } from '@opencx/widget-core';
+import { default as React } from 'react';
+export declare function BotOrAgentMessageGroup({ messages, agent, suggestedReplies, }: {
+    messages: BotMessageType[] | AgentMessageType[];
+    agent: AgentOrBotType | undefined;
+    suggestedReplies?: string[];
+}): React.JSX.Element;

package/dist/components/Header.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare function Header__Buttons(): React.JSX.Element;
+export declare function Header(): React.JSX.Element;

package/dist/components/MightSolveUserIssueSuggestedReplies.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function MightSolveUserIssueSuggestedReplies(): React.JSX.Element;

package/dist/components/PoweredByOpen.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare function PoweredByOpen({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/components/SuggestedReplyButton.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ButtonProps } from './lib/button.js';
+export declare function SuggestedReplyButton({ suggestion, className, ...props }: ButtonProps & {
+    suggestion: string;
+}): React.JSX.Element;

package/dist/components/UserMessage.d.ts

@@ -0,0 +1,8 @@
+import { UserMessageType } from '@opencx/widget-core';
+import { default as React } from 'react';
+export declare function UserMessage({ message, isFirstInGroup, isLastInGroup, isAloneInGroup, }: {
+    message: UserMessageType;
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    isAloneInGroup: boolean;
+}): React.JSX.Element;

package/dist/components/UserMessageGroup.d.ts

@@ -0,0 +1,5 @@
+import { UserMessageType } from '@opencx/widget-core';
+import { default as React } from 'react';
+export declare function UserMessageGroup({ messages, }: {
+    messages: UserMessageType[];
+}): React.JSX.Element;

package/dist/components/custom-components/BotOrAgentTextResponse.component.d.ts

@@ -0,0 +1,16 @@
+import { OpenCxComponentNameU } from '@opencx/widget-core';
+import { WidgetComponentProps } from '@opencx/widget-react-headless';
+import { default as React } from 'react';
+export declare function BotOrAgentResponse({ data, id, type, attachments, isFirstInGroup, isLastInGroup, isAloneInGroup, dataComponentNames, classNames, }: WidgetComponentProps & {
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    isAloneInGroup: boolean;
+    dataComponentNames?: {
+        messageContainer?: OpenCxComponentNameU;
+        message?: OpenCxComponentNameU;
+    };
+    classNames?: {
+        messageContainer?: string;
+        message?: string;
+    };
+}): React.JSX.Element;

package/dist/components/custom-components/Fallback.component.d.ts

@@ -0,0 +1,6 @@
+import { WidgetComponentProps } from '@opencx/widget-react-headless';
+import { default as React } from 'react';
+/**
+ * The Basic Fallback component (Rendered when Debug is True and the component key is not found)
+ */
+export declare function FallbackComponent(props: WidgetComponentProps): React.JSX.Element;

package/dist/components/custom-components/Handoff.component.d.ts

@@ -0,0 +1,3 @@
+import { WidgetComponentProps } from '@opencx/widget-react-headless';
+import { default as React } from 'react';
+export declare function HandoffComponent({ data }: WidgetComponentProps): React.JSX.Element;

package/dist/components/custom-components/Loading.component.d.ts

@@ -0,0 +1,6 @@
+import { AgentOrBotType } from '@opencx/widget-core';
+import { default as React } from 'react';
+export type LoadingComponentProps = {
+    agent: AgentOrBotType | undefined;
+};
+export declare function BotLoadingComponent({ agent }: LoadingComponentProps): React.JSX.Element;

package/dist/components/lib/DynamicIcon.d.ts

@@ -0,0 +1,6 @@
+import { IconNameU } from '@opencx/widget-core';
+import { default as React } from 'react';
+export declare function DynamicIcon({ name, className, }: {
+    name: IconNameU | undefined;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/lib/LoadingSpinner.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare function LoadingSpinner({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/components/lib/MotionDiv.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ComponentProps } from 'react';
+import { motion, Target } from 'framer-motion';
+type MotionProps = ComponentProps<typeof motion.div>;
+type AnimationDirection = 'right' | 'left' | 'up' | 'down';
+type MotionDivProps = MotionProps & {
+    fadeIn?: AnimationDirection;
+    distance?: number;
+    snapExit?: boolean;
+    overrides?: Overrides;
+    delay?: number;
+};
+type Overrides = {
+    initial?: Target;
+    animate?: Target;
+    exit?: Target;
+};
+export declare const ANIMATION_DISTANCE_PX = 10;
+declare const MotionDiv: React.ForwardRefExoticComponent<Omit<MotionDivProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MotionDiv };

package/dist/components/lib/avatar.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/components/lib/button.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "fit" | "free" | "selfless" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/lib/dialog.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    withClose?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogBody: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/components/lib/dropdown-menu.d.ts

@@ -0,0 +1,27 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/components/lib/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/lib/popover.d.ts

@@ -0,0 +1,8 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    animate?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/lib/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export { Skeleton };

package/dist/components/lib/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/components/lib/tooltip.d.ts

@@ -0,0 +1,10 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare function Tooltippy({ children, content, side, align, }: {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    side?: TooltipPrimitive.TooltipContentProps['side'];
+    align?: TooltipPrimitive.TooltipContentProps['align'];
+}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export { TooltipProvider, Tooltippy };

package/dist/components/lib/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/components/lib/widget-portal.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+declare function WidgetPortal(): null;
+declare namespace WidgetPortal {
+    var Portal: ({ children }: {
+        children: React.ReactNode;
+    }) => React.ReactPortal | null;
+    var Container: () => React.JSX.Element;
+}
+export { WidgetPortal };

package/dist/components/lib/wobble.d.ts

@@ -0,0 +1,26 @@
+import { default as React, ReactElement } from 'react';
+/**
+ * The maximum number of pixels the element can move in the x and y directions
+ *
+ * This would make very small elements wobble more visibly, and large elements would wobble more subtly
+ */
+export declare const WOBBLE_MAX_MOVEMENT_PIXELS: {
+    x: number;
+    y: number;
+};
+type ChildProps = {
+    onMouseMove?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    ref: React.ForwardedRef<HTMLElement>;
+};
+export interface WobbleProps {
+    children: ReactElement<ChildProps>;
+    className?: string;
+    scale?: number;
+    off?: boolean;
+}
+declare const Wobble: React.NamedExoticComponent<WobbleProps & React.RefAttributes<HTMLElement>>;
+export { Wobble };

package/dist/components/markdown.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { default as ReactMarkdown } from 'react-markdown';
+export declare const MemoizedReactMarkdown: React.MemoExoticComponent<typeof ReactMarkdown>;

package/dist/components/svg/ChatBubbleSvg.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare function ChatBubbleSvg({ className, style, }: {
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;

package/dist/components/svg/OpenLogoSvg.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare function OpenLogoSvg({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/hooks/useCanvas.d.ts

@@ -0,0 +1,3 @@
+export declare function useCanvas(): {
+    isCanvasOpen: boolean;
+};

package/dist/hooks/useIsSmallScreen.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsSmallScreen(): {
+    isSmallScreen: boolean;
+};

package/dist/hooks/useLocale.d.ts

@@ -0,0 +1,6 @@
+import { TranslationKeysU } from '../translation/translation.types';
+import { Locale } from '../translation';
+export declare function useLocale(): {
+    get: (key: TranslationKeysU) => string;
+    lang: Locale;
+};

package/dist/hooks/useSetWidgetSize.d.ts

@@ -0,0 +1,8 @@
+export declare function useSetWidgetSizeFn(): {
+    setWidth: (width: string) => void;
+    setHeight: (height: string) => void;
+};
+export declare function useSetWidgetSize({ width, height, }: {
+    width?: string;
+    height?: string;
+}): void;

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,62 @@
+import { CSSProperties } from 'react';
+/**
+ * @returns The widget config theme with fallback default value
+ */
+export declare function useTheme(): {
+    theme: {
+        palette: "neutral" | "stone" | "zinc" | "slate";
+        primaryColor: string;
+        widgetTrigger: {
+            zIndex: number;
+            offset: {
+                bottom: number;
+                right: number;
+            };
+            size: {
+                button: number;
+                icon: number;
+            };
+        };
+        widgetContentContainer: {
+            borderRadius: string;
+            zIndex: number;
+            outline: string;
+            outlineColor: string;
+            boxShadow: string;
+            transitionProperty: string;
+            transitionTimingFunction: string;
+            transitionDuration: string;
+            offset: {
+                side: number;
+                align: number;
+            };
+        };
+        screens: {
+            welcome: {
+                width: string;
+                minHeight: string;
+            };
+            sessions: {
+                width: string;
+                height: string;
+            };
+            chat: {
+                width: string;
+                height: string;
+                withCanvas: {
+                    width: string;
+                    height: string;
+                    transitionTimingFunction: string;
+                    transitionDuration: string;
+                };
+            };
+        };
+    };
+    computed: {
+        maxHeight: string;
+        maxWidth: string;
+        minHeight: string;
+        minWidth: string;
+    };
+    cssVars: CSSProperties;
+};

package/dist/hooks/useWidgetContentHeight.d.ts

@@ -0,0 +1,3 @@
+export declare function useWidgetContentHeight(): {
+    observedElementRef: import('react').RefObject<HTMLDivElement | null>;
+};