11 | | WidgetAgentMessage
12 | | WidgetSystemMessageU;
13 |
14 | export type WidgetComponentType = {
15 | key: WidgetComponentKey;
16 | component: React.ElementType;
17 | };
18 |
--------------------------------------------------------------------------------
/packages/react-headless/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@opencx/tsconfig/tsconfig.base.json",
3 | "exclude": ["node_modules", "dist"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-headless/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// OpenCX Widget
8 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@opencx/widget-react",
3 | "private": false,
4 | "version": "4.0.30",
5 | "type": "module",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/openchatai/widget"
9 | },
10 | "scripts": {
11 | "clean": "rm -rf node_modules dist .turbo",
12 | "clean:dist": "rm -rf dist .turbo",
13 | "dev": "vite --host",
14 | "build": "vite build -c vite.config.ts",
15 | "test": "vitest run",
16 | "type-check": "tsc --noEmit",
17 | "lint": "eslint .",
18 | "format": "prettier --write ."
19 | },
20 | "files": [
21 | "dist"
22 | ],
23 | "exports": {
24 | ".": {
25 | "types": "./dist/index.d.ts",
26 | "import": "./dist/index.js",
27 | "require": "./dist/index.cjs"
28 | }
29 | },
30 | "dependencies": {
31 | "@opencx/widget-core": "workspace:*",
32 | "@opencx/widget-react-headless": "workspace:*",
33 | "@radix-ui/react-avatar": "^1.1.0",
34 | "@radix-ui/react-dropdown-menu": "^2.1.4",
35 | "@radix-ui/react-popover": "^1.1.2",
36 | "@radix-ui/react-slot": "^1.1.0",
37 | "@radix-ui/react-switch": "^1.1.0",
38 | "@radix-ui/react-tooltip": "^1.1.2",
39 | "@uiw/react-iframe": "^1.0.3",
40 | "class-variance-authority": "^0.7.0",
41 | "clsx": "^2.1.1",
42 | "framer-motion": "^11.3.30",
43 | "lucide-react": "^0.436.0",
44 | "react-dropzone": "^14.3.5",
45 | "react-markdown": "^9.0.1",
46 | "react-use": "^17.5.1",
47 | "rehype-raw": "^7.0.0",
48 | "remark-gfm": "^4.0.0",
49 | "tailwind-merge": "^2.4.0",
50 | "tinycolor2": "^1.6.0",
51 | "zod": "^3.23.8"
52 | },
53 | "peerDependencies": {
54 | "@types/react": ">=18 <20",
55 | "@types/react-dom": ">=18 <20",
56 | "react": ">=18 <20",
57 | "react-dom": ">=18 <20"
58 | },
59 | "devDependencies": {
60 | "@opencx/eslint-config": "workspace:*",
61 | "@opencx/tsconfig": "workspace:*",
62 | "@tailwindcss/typography": "^0.5.15",
63 | "@types/tinycolor2": "^1.4.6",
64 | "postcss": "^8.4.41",
65 | "tailwindcss": "^3.4.6",
66 | "tailwindcss-animate": "^1.0.7"
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/packages/react/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | },
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react/src/WidgetPopoverAnchor.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as PopoverPrimitive from '@radix-ui/react-popover';
3 | import { useDocumentDir } from '@opencx/widget-react-headless';
4 |
5 | export function WidgetPopoverAnchor() {
6 | const { dir } = useDocumentDir();
7 |
8 | return (
9 |
14 |
17 | {agent?.name?.slice(0, 1)?.toUpperCase()}
18 |
19 | )}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/packages/react/src/components/AttachmentPreview.tsx:
--------------------------------------------------------------------------------
1 | import type { MessageAttachmentType } from '@opencx/widget-core';
2 | import React from 'react';
3 | import { cn } from './lib/utils/cn';
4 | import { Wobble } from './lib/wobble';
5 | import { Dialoger, DialogerContent } from './Dialoger';
6 |
7 | type Props = {
8 | attachment: MessageAttachmentType;
9 | };
10 |
11 | export function AttachmentPreview({ attachment }: Props) {
12 | const { name, size, type, url } = attachment;
13 |
14 | const isImage = type.startsWith('image/');
15 | const isVideo = type.startsWith('video/');
16 | const isAudio = type.startsWith('audio/');
17 |
18 | if (isAudio) {
19 | return (
20 |
21 |
22 |
23 |
26 |
28 | );
29 | }
30 |
31 | if (isVideo) {
32 | return (
33 |
34 |
35 |
36 |
39 |
40 |
41 | );
42 | }
43 |
44 | if (!isImage && !isVideo && !isAudio) {
45 | return (
46 |
47 |
65 |
66 | );
67 | }
68 |
69 | return (
70 |
73 |
74 |
75 | {isImage && (
76 |
77 | )}
78 |
80 |
81 | }
82 | >
83 |
87 | {isImage && (
88 |
89 |
90 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/packages/react/src/components/BotOrAgentMessage.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useWidget,
3 | type WidgetComponentProps,
4 | } from '@opencx/widget-react-headless';
5 | import React from 'react';
6 | import { BotOrAgentMessageDefaultComponent } from './custom-components/BotOrAgentMessageDefaultComponent';
7 |
8 | export function BotOrAgentMessage({
9 | isFirstInGroup,
10 | isLastInGroup,
11 | isAloneInGroup,
12 | ...props
13 | }: WidgetComponentProps & {
14 | isFirstInGroup: boolean;
15 | isLastInGroup: boolean;
16 | isAloneInGroup: boolean;
17 | }) {
18 | const { componentStore } = useWidget();
19 | if (props.type !== 'AGENT' && props.type !== 'AI') return null;
20 |
21 | // Try to use custom components first
22 | if (props.data.action) {
23 | const Component = componentStore.getComponent(props.data.action.name);
24 | if (Component) {
25 | return (
26 |
29 |
30 |
36 |
37 |
38 |
42 |
43 |
48 |
52 | {messages.map((message, index, array) => (
53 |
63 |
64 |
65 | {suggestedReplies && suggestedReplies.length > 0 && (
66 |
70 | {suggestedReplies?.map((suggestion, index) => (
71 |
77 | )}
78 |
79 |
44 |
45 | {formattedTimestamp}
46 |
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/packages/react/src/components/MemoizedReactMarkdown.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 |
4 | export const MemoizedReactMarkdown = React.memo(
5 | ReactMarkdown,
6 | (prev, next) =>
7 | prev.children === next.children && prev.className === next.className,
8 | );
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/MightSolveUserIssueSuggestedReplies.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useTranslation } from '../hooks/useTranslation';
3 | import { SuggestedReplyButton } from './SuggestedReplyButton';
4 | import { dc } from '../utils/data-component';
5 |
6 | export function MightSolveUserIssueSuggestedReplies() {
7 | const { t } = useTranslation();
8 | const options = [t('i_need_more_help'), t('this_was_helpful')];
9 |
10 | return (
11 |
15 | {options.map((option) => (
16 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/packages/react/src/components/PoweredByOpen.tsx:
--------------------------------------------------------------------------------
1 | import { useConfig } from '@opencx/widget-react-headless';
2 | import * as React from 'react';
3 | import { cn } from './lib/utils/cn.js';
4 | import { Wobble } from './lib/wobble.js';
5 | import { OpenLogoSvg } from './svg/OpenLogoSvg.js';
6 |
7 | export function PoweredByOpen({ className }: { className?: string }) {
8 | const { token } = useConfig();
9 |
10 | return (
11 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/packages/react/src/components/RichText.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import remarkGfm from 'remark-gfm';
3 | import { MemoizedReactMarkdown } from './MemoizedReactMarkdown';
4 | import rehypeRaw from 'rehype-raw';
5 | import { useConfig } from '@opencx/widget-react-headless';
6 |
7 | export function RichText({
8 | children,
9 | messageType,
10 | messageId,
11 | }: {
12 | children: string;
13 | messageType?: string;
14 | messageId?: string;
15 | }) {
16 | const { anchorTarget } = useConfig();
17 |
18 | return (
19 | {
26 | return (
27 |
28 | {children}
29 |
30 | );
31 | },
32 | }}
33 | // Do not pass className directly to ReactMarkdown component because that will create a container div wrapping the rich text
34 | >
35 | {children}
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react/src/components/SuggestedReplyButton.tsx:
--------------------------------------------------------------------------------
1 | import { useMessages } from '@opencx/widget-react-headless';
2 | import React from 'react';
3 | import { dc } from '../utils/data-component.js';
4 | import { Button, type ButtonProps } from './lib/button.js';
5 | import { cn } from './lib/utils/cn.js';
6 |
7 | export function SuggestedReplyButton({
8 | suggestion,
9 | className,
10 | ...props
11 | }: ButtonProps & { suggestion: string }) {
12 | const { sendMessage } = useMessages();
13 |
14 | const handleSend = () => {
15 | const trimmed = suggestion.trim();
16 | if (!trimmed) return;
17 | sendMessage({ content: trimmed });
18 | };
19 |
20 | return (
21 |
28 | {suggestion}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/packages/react/src/components/UserMessage.tsx:
--------------------------------------------------------------------------------
1 | import type { WidgetUserMessage } from '@opencx/widget-core';
2 | import React from 'react';
3 | import { dc } from '../utils/data-component';
4 | import { AttachmentPreview } from './AttachmentPreview';
5 | import { cn } from './lib/utils/cn';
6 |
7 | export function UserMessage({
8 | message,
9 | isFirstInGroup,
10 | isLastInGroup,
11 | isAloneInGroup,
12 | }: {
13 | message: WidgetUserMessage;
14 | isFirstInGroup: boolean;
15 | isLastInGroup: boolean;
16 | isAloneInGroup: boolean;
17 | }) {
18 | return (
19 |
23 | {message.attachments && message.attachments.length > 0 && (
24 |
25 | {message.attachments?.map((attachment) => (
26 |
27 | ))}
28 |
29 | )}
30 | {message.content.length > 0 && (
31 |
53 | {message.content}
54 |
55 | )}
56 |
18 | {messages.map((message, index, array) => (
19 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/packages/react/src/components/custom-components/BotOrAgentMessageDefaultComponent.tsx:
--------------------------------------------------------------------------------
1 | import type { OpenCxComponentNameU } from '@opencx/widget-core';
2 | import type { WidgetComponentProps } from '@opencx/widget-react-headless';
3 | import React from 'react';
4 | import { dc } from '../../utils/data-component.js';
5 | import { AttachmentPreview } from '../AttachmentPreview.js';
6 | import { cn } from '../lib/utils/cn.js';
7 | import { RichText } from '../RichText.js';
8 |
9 | export function BotOrAgentMessageDefaultComponent({
10 | data,
11 | id,
12 | type,
13 | attachments,
14 | isFirstInGroup,
15 | isLastInGroup,
16 | isAloneInGroup,
17 | dataComponentNames,
18 | classNames,
19 | }: WidgetComponentProps & {
20 | isFirstInGroup: boolean;
21 | isLastInGroup: boolean;
22 | isAloneInGroup: boolean;
23 | dataComponentNames?: {
24 | messageContainer?: OpenCxComponentNameU;
25 | message?: OpenCxComponentNameU;
26 | };
27 | classNames?: {
28 | messageContainer?: string;
29 | message?: string;
30 | };
31 | }) {
32 | if (type !== 'AI' && type !== 'AGENT') return null;
33 |
34 | const { message, variant = 'default' } = data;
35 |
36 | return (
37 |
44 | {attachments && attachments.length > 0 && (
45 |
46 | {attachments?.map((attachment) => (
47 |
48 | ))}
49 |
50 | )}
51 | {message.length > 0 && (
52 |
79 |
80 | {message}
81 |
82 |
83 | )}
84 |
10 |
11 | {JSON.stringify(props, null, 1)}
12 |
13 |
7 |
Handoff Custom Component
8 |
9 | {JSON.stringify({ ...data }, null, 2)}
10 |
11 |
16 |
20 |
28 |
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/DynamicIcon.tsx:
--------------------------------------------------------------------------------
1 | import { isExhaustive, type IconNameU } from '@opencx/widget-core';
2 | import {
3 | CheckCheckIcon,
4 | CheckIcon,
5 | CircleCheckBigIcon,
6 | CircleCheckIcon,
7 | CircleDashedIcon,
8 | CircleXIcon,
9 | ExpandIcon,
10 | Maximize2Icon,
11 | MaximizeIcon,
12 | Minimize2Icon,
13 | MinimizeIcon,
14 | ShrinkIcon,
15 | SquareCheckBigIcon,
16 | SquareCheckIcon,
17 | SquareXIcon,
18 | XIcon,
19 | type LucideIcon,
20 | } from 'lucide-react';
21 | import React from 'react';
22 | import { cn } from './utils/cn';
23 |
24 | const FallbackIcon = CircleDashedIcon;
25 |
26 | export function DynamicIcon({
27 | name,
28 | className,
29 | }: {
30 | name: IconNameU | undefined;
31 | className?: string;
32 | }) {
33 | const Icon: LucideIcon = (() => {
34 | switch (name) {
35 | case 'Check':
36 | return CheckIcon;
37 | case 'CheckCheck':
38 | return CheckCheckIcon;
39 | case 'CircleCheck':
40 | return CircleCheckIcon;
41 | case 'CircleCheckBig':
42 | return CircleCheckBigIcon;
43 | case 'CircleX':
44 | return CircleXIcon;
45 | case 'Expand':
46 | return ExpandIcon;
47 | case 'Maximize':
48 | return MaximizeIcon;
49 | case 'Maximize2':
50 | return Maximize2Icon;
51 | case 'Minimize':
52 | return MinimizeIcon;
53 | case 'Minimize2':
54 | return Minimize2Icon;
55 | case 'Shrink':
56 | return ShrinkIcon;
57 | case 'SquareCheck':
58 | return SquareCheckIcon;
59 | case 'SquareCheckBig':
60 | return SquareCheckBigIcon;
61 | case 'SquareX':
62 | return SquareXIcon;
63 | case 'X':
64 | return XIcon;
65 |
66 | case undefined:
67 | return FallbackIcon;
68 |
69 | default:
70 | isExhaustive(name, DynamicIcon.name);
71 | return FallbackIcon;
72 | }
73 | })();
74 |
75 | return ;
6 | type AnimationDirection = 'right' | 'left' | 'up' | 'down';
7 | export type MotionDivProps = MotionProps & {
8 | fadeIn?: AnimationDirection;
9 | distance?: number;
10 | snapExit?: boolean;
11 | overrides?: Overrides;
12 | delay?: number;
13 | };
14 |
15 | type Overrides = {
16 | initial?: Target;
17 | animate?: Target;
18 | exit?: Target;
19 | };
20 |
21 | export const ANIMATION_DISTANCE_PX = 10;
22 |
23 | const fadeInRight = (
24 | distance: number,
25 | overrides: Overrides,
26 | delay: number,
27 | ): MotionProps => ({
28 | initial: { opacity: 0, x: -distance, ...overrides.initial },
29 | animate: { opacity: 1, x: 0, ...overrides.animate, transition: { delay } },
30 | exit: { opacity: 0, x: distance, ...overrides.exit },
31 | });
32 |
33 | const fadeInLeft = (
34 | distance: number,
35 | overrides: Overrides,
36 | delay: number,
37 | ): MotionProps => ({
38 | initial: { opacity: 0, x: distance, ...overrides.initial },
39 | animate: { opacity: 1, x: 0, ...overrides.animate, transition: { delay } },
40 | exit: { opacity: 0, x: -distance, ...overrides.exit },
41 | });
42 |
43 | const fadeInUp = (
44 | distance: number,
45 | overrides: Overrides,
46 | delay: number,
47 | ): MotionProps => ({
48 | initial: { opacity: 0, y: distance, ...overrides.initial },
49 | animate: { opacity: 1, y: 0, ...overrides.animate, transition: { delay } },
50 | exit: { opacity: 0, y: -distance, ...overrides.exit },
51 | });
52 |
53 | const fadeInDown = (
54 | distance: number,
55 | overrides: Overrides,
56 | delay: number,
57 | ): MotionProps => ({
58 | initial: { opacity: 0, y: -distance, ...overrides.initial },
59 | animate: { opacity: 1, y: 0, ...overrides.animate, transition: { delay } },
60 | exit: { opacity: 0, y: distance, ...overrides.exit },
61 | });
62 |
63 | const treasureMap: Record<
64 | AnimationDirection,
65 | (distance: number, overrides: Overrides, delay: number) => MotionProps
66 | > = {
67 | right: fadeInRight,
68 | left: fadeInLeft,
69 | up: fadeInUp,
70 | down: fadeInDown,
71 | };
72 |
73 | const MotionDiv = forwardRef(
74 | (
75 | {
76 | fadeIn = 'down',
77 | distance = ANIMATION_DISTANCE_PX,
78 | children,
79 | snapExit = false,
80 | overrides = {},
81 | delay = 0,
82 | ...props
83 | },
84 | ref,
85 | ) => {
86 | const fadeInProps: MotionProps = fadeIn
87 | ? treasureMap[fadeIn](distance, overrides, delay)
88 | : {};
89 |
90 | if (
91 | snapExit &&
92 | fadeInProps.exit &&
93 | typeof fadeInProps.exit === 'object' &&
94 | !Array.isArray(fadeInProps.exit)
95 | ) {
96 | fadeInProps.exit.transition = { duration: 0 };
97 | }
98 |
99 | return (
100 |
101 | {children}
102 |
103 | );
104 | },
105 | );
106 | MotionDiv.displayName = 'MotionDiv';
107 |
108 | export { MotionDiv };
109 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/MotionDiv__VerticalReveal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { MotionDiv, type MotionDivProps } from './MotionDiv';
3 | import { cn } from './utils/cn';
4 |
5 | export const MotionDiv__VerticalReveal = React.forwardRef(
6 | (props, ref) => {
7 | return (
8 | ,
7 | React.ComponentPropsWithoutRef
8 | >(({ className, ...props }, ref) => (
9 | ,
23 | React.ComponentPropsWithoutRef
24 | >(({ className, ...props }, ref) => (
25 | ,
35 | React.ComponentPropsWithoutRef
36 | >(({ className, ...props }, ref) => (
37 | ,
51 | VariantProps {
52 | asChild?: boolean;
53 | }
54 |
55 | const Button = React.forwardRef(
56 | (
57 | { className, variant = 'default', size, asChild = false, ...props },
58 | ref,
59 | ) => {
60 | const Comp = asChild ? Slot : 'button';
61 | return (
62 |
63 |
70 | );
71 | },
72 | );
73 | Button.displayName = 'Button';
74 |
75 | export { Button, buttonVariants };
76 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useIsSmallScreen } from '../../hooks/useIsSmallScreen.js';
3 | import { cn } from './utils/cn.js';
4 | import { Wobble } from './wobble.js';
5 |
6 | export type InputProps = React.InputHTMLAttributes;
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | const { isSmallScreen } = useIsSmallScreen();
11 |
12 | return (
13 |
14 |
27 | );
28 | },
29 | );
30 | Input.displayName = 'Input';
31 |
32 | export { Input };
33 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/popover.tsx:
--------------------------------------------------------------------------------
1 | import * as PopoverPrimitive from '@radix-ui/react-popover';
2 | import * as React from 'react';
3 | import { cn } from './utils/cn';
4 |
5 | const Popover = PopoverPrimitive.Root;
6 |
7 | const PopoverTrigger = PopoverPrimitive.Trigger;
8 |
9 | const PopoverContent = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef & {
12 | animate?: boolean;
13 | }
14 | >(
15 | (
16 | { className, align = 'end', sideOffset = 4, animate = true, ...props },
17 | ref,
18 | ) => (
19 | ) {
8 | return (
9 |
13 | );
14 | }
15 |
16 | export { Skeleton };
17 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/switch.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as SwitchPrimitives from '@radix-ui/react-switch';
3 | import { cn } from './utils/cn';
4 | import { Wobble } from './wobble';
5 |
6 | const Switch = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, ...props }, ref) => (
10 |
11 |
19 |
26 |
27 | ));
28 | Switch.displayName = SwitchPrimitives.Root.displayName;
29 |
30 | export { Switch };
31 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as TooltipPrimitive from '@radix-ui/react-tooltip';
2 | import * as React from 'react';
3 | import { cn } from './utils/cn.js';
4 | import { useConfig } from '@opencx/widget-react-headless';
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider;
7 |
8 | const Tooltip = TooltipPrimitive.Root;
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger;
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |
44 | {children}
45 |
51 | {content}
52 |
53 |
54 | );
55 | }
56 |
57 | export { TooltipProvider, Tooltippy };
58 |
--------------------------------------------------------------------------------
/packages/react/src/components/lib/utils/cn.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/packages/react/src/components/special-components/ChatBottomComponents.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSpecialComponentProps } from '../../hooks/useSpecialComponentProps';
3 |
4 | export function ChatBottomComponents() {
5 | const { props } = useSpecialComponentProps();
6 | const components = props.config.specialComponents?.chatBottomComponents;
7 |
8 | if (!components) return null;
9 |
10 | return (
11 |
12 | {components.map(({ key, component: Component }) => (
13 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/packages/react/src/components/special-components/HeaderBottomComponent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSpecialComponentProps } from '../../hooks/useSpecialComponentProps';
3 |
4 | export function HeaderBottomComponent() {
5 | const { props } = useSpecialComponentProps();
6 | const Component = props.config.specialComponents?.headerBottom;
7 |
8 | if (!Component) return null;
9 |
10 | return
21 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/packages/react/src/components/svg/OpenLogoSvg.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { cn } from '../lib/utils/cn';
3 |
4 | export function OpenLogoSvg({ className }: { className?: string }) {
5 | return (
6 |
14 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/useCanvas.ts:
--------------------------------------------------------------------------------
1 | import { useMessages } from '@opencx/widget-react-headless';
2 | import { useIsSmallScreen } from './useIsSmallScreen';
3 | import { useModes } from '@opencx/widget-react-headless';
4 |
5 | export function useCanvas() {
6 | const {
7 | messagesState: { isInitialFetchLoading },
8 | } = useMessages();
9 | const { isSmallScreen } = useIsSmallScreen();
10 | const { activeMode, Component } = useModes();
11 |
12 | const isCanvasOpen =
13 | !isInitialFetchLoading && !isSmallScreen && !!activeMode && !!Component;
14 |
15 | return {
16 | isCanvasOpen,
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/useIsSmallScreen.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const THRESHOLD_PIXELS = 450;
4 |
5 | export function useIsSmallScreen() {
6 | const [isSmallScreen, setIsSmallScreen] = React.useState(() => {
7 | return (window.top || window).innerWidth < THRESHOLD_PIXELS;
8 | });
9 |
10 | React.useEffect(() => {
11 | const topWindow = window.top || window;
12 |
13 | const checkScreenSize = () => {
14 | setIsSmallScreen(topWindow.innerWidth < THRESHOLD_PIXELS);
15 | };
16 |
17 | checkScreenSize();
18 |
19 | topWindow.addEventListener('resize', checkScreenSize);
20 |
21 | return () => {
22 | topWindow.removeEventListener('resize', checkScreenSize);
23 | };
24 | }, []);
25 |
26 | return { isSmallScreen };
27 | }
28 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/useSetWidgetSize.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useIsSmallScreen } from './useIsSmallScreen';
3 | import { useConfig, useWidget } from '@opencx/widget-react-headless';
4 |
5 | export function useSetWidgetSizeFn() {
6 | const { contentIframeRef } = useWidget();
7 | const { inline } = useConfig();
8 |
9 | return {
10 | setWidth: (width: string) => {
11 | contentIframeRef?.current?.style.setProperty(
12 | '--opencx-widget-width',
13 | inline ? '100%' : width,
14 | );
15 | },
16 | setHeight: (height: string) => {
17 | contentIframeRef?.current?.style.setProperty(
18 | '--opencx-widget-height',
19 | inline ? '100%' : height,
20 | );
21 | },
22 | };
23 | }
24 |
25 | export function useSetWidgetSize({
26 | width,
27 | height,
28 | }: {
29 | width?: string;
30 | height?: string;
31 | }) {
32 | const { isSmallScreen } = useIsSmallScreen();
33 | const { setWidth, setHeight } = useSetWidgetSizeFn();
34 |
35 | useEffect(() => {
36 | if (width) setWidth(width);
37 |
38 | if (height) setHeight(height);
39 | }, [isSmallScreen, height, width, setWidth, setHeight]);
40 | }
41 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/useSpecialComponentProps.ts:
--------------------------------------------------------------------------------
1 | import type { SpecialComponentProps } from '@opencx/widget-core';
2 | import {
3 | useSessions,
4 | useConfig,
5 | useWidget,
6 | useMessages,
7 | useWidgetRouter,
8 | } from '@opencx/widget-react-headless';
9 | import React from 'react';
10 |
11 | export function useSpecialComponentProps(): { props: SpecialComponentProps } {
12 | const {
13 | widgetCtx: { org },
14 | } = useWidget();
15 | const {
16 | sessionState: { session },
17 | } = useSessions();
18 | const config = useConfig();
19 | const {
20 | messagesState: { messages },
21 | } = useMessages();
22 | const {
23 | routerState: { screen },
24 | } = useWidgetRouter();
25 |
26 | return {
27 | props: {
28 | react: React,
29 | org,
30 | session,
31 | config,
32 | messages,
33 | currentScreen: screen,
34 | },
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/useTranslation.ts:
--------------------------------------------------------------------------------
1 | import { useConfig, useDocumentDir } from '@opencx/widget-react-headless';
2 | import { useMemo } from 'react';
3 | import {
4 | getTranslation,
5 | isSupportedLanguage,
6 | type Language,
7 | type TranslationKeyU,
8 | } from '@opencx/widget-core';
9 |
10 | export function useTranslation() {
11 | const { dir: hostDocumentDir } = useDocumentDir();
12 | const config = useConfig();
13 |
14 | return useMemo(() => {
15 | const language: Language = isSupportedLanguage(config.language)
16 | ? config.language
17 | : 'en';
18 | return {
19 | t: (key: TranslationKeyU) => getTranslation(key, language, config.translationOverrides),
20 | language: language,
21 | dir: language === 'ar' ? 'rtl' : 'ltr',
22 | hostDocumentDir,
23 | };
24 | }, [config.language, hostDocumentDir]);
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/useWidgetContentHeight.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import { useConfig, useWidget } from '@opencx/widget-react-headless';
3 |
4 | export function useWidgetContentHeight() {
5 | const { contentIframeRef } = useWidget();
6 | const { inline } = useConfig();
7 | /**
8 | * This is the element that we will observe for height changes
9 | */
10 | const observedElementRef = useRef(null);
11 |
12 | useEffect(() => {
13 | const contentRoot = contentIframeRef?.current;
14 |
15 | if (contentRoot && observedElementRef.current) {
16 | const observedElement = observedElementRef.current;
17 |
18 | let animationFrame: number;
19 | const observer = new ResizeObserver(() => {
20 | animationFrame = requestAnimationFrame(() => {
21 | const height = observedElement.offsetHeight;
22 | contentRoot.style.setProperty(
23 | '--opencx-widget-height',
24 | inline ? '100%' : `${height.toFixed(1)}px`,
25 | );
26 | });
27 | });
28 | observer.observe(observedElement);
29 |
30 | return () => {
31 | cancelAnimationFrame(animationFrame);
32 | observer.unobserve(observedElement);
33 | };
34 | }
35 | }, [contentIframeRef, inline]);
36 |
37 | return { observedElementRef };
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as PopoverPrimitive from '@radix-ui/react-popover';
2 | import React from 'react';
3 | import type {
4 | ExternalStorage,
5 | LiteralWidgetComponentKey,
6 | WidgetConfig,
7 | } from '@opencx/widget-core';
8 | import {
9 | useWidgetTrigger,
10 | WidgetProvider,
11 | WidgetTriggerProvider,
12 | type WidgetComponentType,
13 | } from '@opencx/widget-react-headless';
14 | import { BotOrAgentMessageDefaultComponent } from './components/custom-components/BotOrAgentMessageDefaultComponent';
15 | import { FallbackDefaultComponent } from './components/custom-components/FallbackDefaultComponent';
16 | import { LoadingDefaultComponent } from './components/custom-components/LoadingDefaultComponent';
17 | import { WidgetContent, WidgetPopoverContent } from './WidgetPopoverContent';
18 | import { WidgetPopoverTrigger } from './WidgetPopoverTrigger';
19 | import { WidgetPopoverAnchor } from './WidgetPopoverAnchor';
20 |
21 | function WidgetPopoverTriggerAndContent() {
22 | const { isOpen, setIsOpen } = useWidgetTrigger();
23 |
24 | return (
25 |
26 |
30 | );
31 | }
32 |
33 | const defaultComponents: WidgetComponentType[] = [
34 | {
35 | key: 'loading' satisfies LiteralWidgetComponentKey,
36 | component: LoadingDefaultComponent,
37 | },
38 | {
39 | key: 'fallback' satisfies LiteralWidgetComponentKey,
40 | component: FallbackDefaultComponent,
41 | },
42 | {
43 | key: 'bot_message' satisfies LiteralWidgetComponentKey,
44 | component: BotOrAgentMessageDefaultComponent,
45 | },
46 | {
47 | key: 'agent_message' satisfies LiteralWidgetComponentKey,
48 | component: BotOrAgentMessageDefaultComponent,
49 | },
50 | ];
51 |
52 | const storage: ExternalStorage = {
53 | get: async (key: string) => {
54 | return localStorage.getItem(key);
55 | },
56 | set: async (key: string, value: string) => {
57 | localStorage.setItem(key, value);
58 | },
59 | remove: async (key: string) => {
60 | localStorage.removeItem(key);
61 | },
62 | };
63 |
64 | function WidgetWrapper({
65 | options,
66 | components = [],
67 | loadingComponent,
68 | }: {
69 | options: WidgetConfig;
70 | components?: WidgetComponentType[];
71 | loadingComponent?: React.ReactNode;
72 | }) {
73 | return (
74 |
80 |
81 | {options.inline ? (
82 |
87 |
88 | );
89 | }
90 |
91 | export { WidgetWrapper as Widget };
92 |
--------------------------------------------------------------------------------
/packages/react/src/screens/chat/AdvancedInitialMessages.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { WidgetAiMessage } from '@opencx/widget-core';
3 | import { useMessages, useConfig } from '@opencx/widget-react-headless';
4 | import { BotOrAgentMessageGroup } from '../../components/BotOrAgentMessageGroup';
5 |
6 | export function AdvancedInitialMessages() {
7 | const {
8 | messagesState: { messages },
9 | } = useMessages();
10 |
11 | const {
12 | advancedInitialMessages = [],
13 | initialQuestionsPosition,
14 | initialQuestions,
15 | bot,
16 | } = useConfig();
17 |
18 | return (
19 | <>
20 | {messages.length === 0 && advancedInitialMessages.length > 0 && (
21 |
24 | ({
25 | component: 'bot_message',
26 | data: { message },
27 | id: `${index}-${message}`,
28 | type: 'AI',
29 | timestamp: null,
30 | }) satisfies WidgetAiMessage,
31 | )}
32 | suggestedReplies={
33 | messages.length === 0 &&
34 | initialQuestionsPosition === 'below-initial-messages'
35 | ? initialQuestions
36 | : undefined
37 | }
38 | agent={bot ? { ...bot, isAi: true, id: null } : undefined}
39 | />
40 | )}
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/packages/react/src/screens/chat/ChatBannerItems.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMessages, useConfig } from '@opencx/widget-react-headless';
3 | import { RichText } from '../../components/RichText';
4 |
5 | export function ChatBannerItems() {
6 | const {
7 | messagesState: { messages },
8 | } = useMessages();
9 | const { chatBannerItems } = useConfig();
10 |
11 | if (!chatBannerItems?.length) return null;
12 | if (
13 | messages.length > 0 &&
14 | chatBannerItems.every((item) => !item.persistent)
15 | ) {
16 | return null;
17 | }
18 |
19 | return (
20 |
21 | {chatBannerItems.map(({ message, persistent }, index) =>
22 | messages.length > 0 && !persistent ? null : (
23 |
24 | {message}
25 |
26 | ),
27 | )}
28 |
[0]) => {
12 | try {
13 | setIsSendingMessage(true);
14 | await sendMessage(args);
15 | } catch (error) {
16 | console.error(error);
17 | } finally {
18 | setIsSendingMessage(false);
19 | }
20 | };
21 |
22 | if (!activeMode || !Component) return null;
23 |
24 | return (
25 |
16 | {chatFooterItems?.map((item, i) => {
17 | if (item.showWhenSessionIsOpen === false && isSessionOpen) {
18 | return null;
19 | }
20 | if (item.showWhenSessionIsResolved === false && isSessionResolved) {
21 | return null;
22 | }
23 |
24 | return (
25 |
26 |
27 | {item.message}
28 |
29 |
30 | );
31 | })}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/packages/react/src/screens/chat/InitialMessages.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { WidgetAiMessage } from '@opencx/widget-core';
3 | import { useMessages, useConfig } from '@opencx/widget-react-headless';
4 | import { BotOrAgentMessageGroup } from '../../components/BotOrAgentMessageGroup';
5 |
6 | export function InitialMessages() {
7 | const {
8 | messagesState: { messages },
9 | } = useMessages();
10 | const config = useConfig();
11 | const {
12 | advancedInitialMessages = [],
13 | initialQuestions,
14 | initialQuestionsPosition,
15 | } = config;
16 |
17 | const initialMessages = (() => {
18 | if (advancedInitialMessages.length) return [];
19 | if (messages.length) return [];
20 | // TODO translate default welcome message
21 | if (!config.initialMessages?.length) return ['Hello, how can I help you?'];
22 | return config.initialMessages;
23 | })();
24 |
25 | return (
26 | <>
27 | {messages.length === 0 && initialMessages.length > 0 && (
28 |
31 | ({
32 | component: 'bot_message',
33 | data: { message: m },
34 | id: `${index}-${m}`,
35 | type: 'AI',
36 | timestamp: null,
37 | }) satisfies WidgetAiMessage,
38 | )}
39 | suggestedReplies={
40 | initialQuestionsPosition === 'below-initial-messages'
41 | ? initialQuestions
42 | : undefined
43 | }
44 | agent={
45 | config.bot ? { ...config.bot, isAi: true, id: null } : undefined
46 | }
47 | />
48 | )}
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/packages/react/src/screens/index.tsx:
--------------------------------------------------------------------------------
1 | import { isExhaustive } from '@opencx/widget-core';
2 | import { useWidgetRouter } from '@opencx/widget-react-headless';
3 | import { AnimatePresence } from 'framer-motion';
4 | import React from 'react';
5 | import { MotionDiv } from '../components/lib/MotionDiv';
6 | import { ChatScreen } from './chat';
7 | import { SessionsScreen } from './sessions';
8 | import { WelcomeScreen } from './welcome';
9 |
10 | export function RootScreen() {
11 | const {
12 | routerState: { screen },
13 | } = useWidgetRouter();
14 |
15 | return (
16 |
17 |
18 | {(() => {
19 | switch (screen) {
20 | case 'welcome':
21 | return (
22 |
28 |
30 | );
31 |
32 | case 'sessions':
33 | return (
34 |
40 |
42 | );
43 |
44 | case 'chat':
45 | return (
46 |
52 |
54 | );
55 | default: {
56 | isExhaustive(screen, RootScreen.name);
57 | return null;
58 | }
59 | }
60 | })()}
61 |
62 |