Vite + React + TS

├── src ├── vite-env.d.ts ├── index.ts ├── assets │ ├── chatbox.gif │ ├── icons │ │ ├── pen.svg │ │ └── expand.svg │ └── parlant-logo-full.svg ├── theme.ts ├── utils │ ├── object.ts │ └── utils.ts ├── components │ ├── ui │ │ ├── Textarea.tsx │ │ ├── Markdown.tsx │ │ ├── Button.tsx │ │ └── Popover.tsx │ └── chat │ │ ├── footer │ │ └── ChatFooter.tsx │ │ ├── header │ │ └── ChatHeader.tsx │ │ ├── input │ │ └── ChatInput.tsx │ │ ├── message │ │ └── Message.tsx │ │ ├── message-list │ │ └── MessageList.tsx │ │ └── Chat.tsx └── App.tsx ├── public ├── parlant-logo.png └── icons │ └── send.svg ├── tsconfig.tsbuildinfo ├── .gitignore ├── index.html ├── tsconfig.json ├── eslint.config.js ├── biome.json ├── LICENSE ├── vite.config.ts ├── package.json └── README.md /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Chatbox from '@/App'; 2 | 3 | export default Chatbox; 4 | -------------------------------------------------------------------------------- /src/assets/chatbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emcie-co/parlant-chat-react/HEAD/src/assets/chatbox.gif -------------------------------------------------------------------------------- /public/parlant-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emcie-co/parlant-chat-react/HEAD/public/parlant-logo.png -------------------------------------------------------------------------------- /src/theme.ts: -------------------------------------------------------------------------------- 1 | export const COLORS = { 2 | primaryText: '#151515', 3 | darkGrey: '#282828', 4 | accent: '#006E53', 5 | mutedText: '#A9A9A9', 6 | backgroundLight: '#F5F9F7', 7 | }; -------------------------------------------------------------------------------- /public/icons/send.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /tsconfig.tsbuildinfo: -------------------------------------------------------------------------------- 1 | {"root":["./src/app.tsx","./src/index.ts","./src/vite-env.d.ts","./src/components/chat/chat.tsx","./src/components/chat/message/message.tsx","./src/components/ui/button.tsx","./src/components/ui/shadow-wrapper.tsx","./src/components/ui/textarea.tsx","./src/utils/object.ts","./src/utils/utils.ts"],"version":"5.7.3"} -------------------------------------------------------------------------------- /src/utils/object.ts: -------------------------------------------------------------------------------- 1 | export function groupBy(array: T[], keyFn: (item: T) => string | number): Record { 2 | return array.reduce((result: Record, item: T) => { 3 | let key = keyFn(item); 4 | if (!key) key = key?.toString(); 5 | if (!result[key]) { 6 | result[key] = []; 7 | } 8 | result[key].push(item); 9 | return result; 10 | }, {}); 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # VS Code settings 27 | .vscode/settings.json 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/icons/pen.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/expand.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "rootDirs": ["."], 4 | // "module": "ES2022", 5 | // "moduleResolution": "Bundler", 6 | "target": "ES2015", 7 | "module": "ESNext", 8 | "moduleResolution": "Node", 9 | "strict": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "outDir": "dist", 13 | "allowJs": true, 14 | "declaration": true, 15 | "declarationMap": true, 16 | "emitDeclarationOnly": true, 17 | "skipLibCheck": true, 18 | "esModuleInterop": true, 19 | "allowSyntheticDefaultImports": true, 20 | "lib": ["DOM", "ESNext", "ES2022"], 21 | "baseUrl": ".", 22 | "paths": { 23 | "@/*": ["./src/*"] 24 | }, 25 | "jsx": "react-jsx" 26 | }, 27 | "include": ["src/**/*"], 28 | "exclude": ["dist", "node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import reactHooks from 'eslint-plugin-react-hooks'; 3 | import reactRefresh from 'eslint-plugin-react-refresh'; 4 | import globals from 'globals'; 5 | 6 | export default [ 7 | {ignores: ['dist']}, 8 | { 9 | files: ['**/*.{js,jsx}'], 10 | languageOptions: { 11 | ecmaVersion: 2020, 12 | globals: globals.browser, 13 | parserOptions: { 14 | ecmaVersion: 'latest', 15 | ecmaFeatures: {jsx: true}, 16 | sourceType: 'module', 17 | }, 18 | }, 19 | plugins: { 20 | 'react-hooks': reactHooks, 21 | 'react-refresh': reactRefresh, 22 | }, 23 | rules: { 24 | ...js.configs.recommended.rules, 25 | ...reactHooks.configs.recommended.rules, 26 | 'no-unused-vars': ['error', {varsIgnorePattern: '^[A-Z_]'}], 27 | 'react-refresh/only-export-components': ['warn', {allowConstantExport: true}], 28 | }, 29 | }, 30 | ]; 31 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json", 3 | "organizeImports": { 4 | "enabled": true 5 | }, 6 | "linter": { 7 | "enabled": true, 8 | "rules": { 9 | "recommended": true 10 | } 11 | }, 12 | "formatter": { 13 | "enabled": true, 14 | "formatWithErrors": false, 15 | "indentStyle": "space", 16 | "indentWidth": 2, 17 | "lineWidth": 80 18 | }, 19 | "javascript": { 20 | "formatter": { 21 | "quoteStyle": "single" 22 | } 23 | }, 24 | "files": { 25 | "include": [ 26 | "src/**/*.{ts,tsx,js,jsx}" 27 | ], 28 | "ignore": [ 29 | "**/node_modules/**", 30 | "**/dist/**" 31 | ] 32 | }, 33 | "vcs": { 34 | "enabled": true, 35 | "clientKind": "git", 36 | "useIgnoreFile": true 37 | } 38 | } -------------------------------------------------------------------------------- /src/utils/utils.ts: -------------------------------------------------------------------------------- 1 | import {clsx, type ClassValue} from 'clsx'; 2 | 3 | export function cn(...inputs: ClassValue[]) { 4 | return clsx(inputs); 5 | } 6 | 7 | export function messageSound(reversed?: boolean) { 8 | const AudioCtx = window.AudioContext || (window as any)['webkitAudioContext']; 9 | const ctx = new AudioCtx(); 10 | 11 | const blip = (startTime: number, freq: number) => { 12 | const osc = ctx.createOscillator(); 13 | const gain = ctx.createGain(); 14 | osc.type = 'sine'; 15 | osc.frequency.setValueAtTime(freq, startTime); 16 | gain.gain.setValueAtTime(0.5, startTime); 17 | gain.gain.exponentialRampToValueAtTime(0.001, startTime + 0.15); 18 | osc.connect(gain); 19 | gain.connect(ctx.destination); 20 | osc.start(startTime); 21 | osc.stop(startTime + 0.15); 22 | }; 23 | 24 | const now = ctx.currentTime; 25 | if (reversed) { 26 | blip(now, 660); 27 | blip(now + 0.2, 880); 28 | return; 29 | } 30 | blip(now, 880); 31 | blip(now + 0.2, 660); 32 | } -------------------------------------------------------------------------------- /src/components/ui/Textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { createUseStyles } from 'react-jss'; 4 | import clsx from 'clsx'; 5 | 6 | const useStyles = createUseStyles({ 7 | textArea: { 8 | display: 'flex', 9 | minHeight: '80px', 10 | width: '100%', 11 | borderRadius: '6px', 12 | border: '1px solid', 13 | paddingInline: '0.75rem', 14 | paddingBlock: '0.5rem', 15 | fontSize: '0.875rem', 16 | fontFamily: 'Inter !important', 17 | outline: 'none', 18 | } 19 | }); 20 | 21 | export interface TextareaProps 22 | extends React.TextareaHTMLAttributes {} 23 | 24 | const Textarea = React.forwardRef( 25 | ({ className, ...props }, ref) => { 26 | const classes = useStyles(); 27 | return ( 28 |

33 |     );
34 |   }
35 | );
36 | Textarea.displayName = 'Textarea';
37 | 
38 | export { Textarea };
39 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.

--------------------------------------------------------------------------------
/src/components/ui/Markdown.tsx:
--------------------------------------------------------------------------------
 1 | import type { JSX } from 'react';
 2 | import clsx from 'clsx';
 3 | import { useEffect, useState, lazy, Suspense } from 'react';
 4 | import remarkGfm from 'remark-gfm';
 5 | import rehypeHighlight from 'rehype-highlight';
 6 | import remarkBreaks from 'remark-breaks';
 7 | import remarkEmoji from 'remark-emoji';
 8 | 
 9 | const ReactMarkdown = lazy(() => import('react-markdown'));
10 | 
11 | const useClientSideStyles = () => {
12 |   useEffect(() => {
13 |     import('highlight.js/styles/github.css');
14 |   }, []);
15 | };
16 | 
17 | interface MarkdownProps {
18 | 	children: string;
19 | 	className?: string;
20 | }
21 | 
22 | const Markdown = ({ children, className }: MarkdownProps): JSX.Element => {
23 | 	const [isMounted, setIsMounted] = useState(false);
24 | 	useClientSideStyles();
25 | 
26 | 	useEffect(() => {
27 | 		setIsMounted(true);
28 | 	}, []);
29 | 
30 | 	if (!isMounted) {
31 | 		return <div className={clsx('leading-[19px]', className)} />;
32 | 	}
33 | 
34 | 	return (
35 | 		<div className={clsx('leading-[19px]', className)}>
36 | 			<Suspense fallback={<div>Loading...</div>}>
37 | 				<ReactMarkdown
38 | 					components={{
39 | 						p: 'div',
40 | 						img: ({ node, src, alt, ...props }) => (
41 | 							<img 
42 | 								{...props} 
43 | 								src={src} 
44 | 								alt={alt || 'Image'} 
45 | 								loading="lazy" 
46 | 								style={{ maxWidth: '100%' }}
47 | 							/>
48 | 						),
49 | 					}}
50 | 					rehypePlugins={[rehypeHighlight]}
51 | 					remarkPlugins={[remarkGfm, remarkBreaks, remarkEmoji]}>
52 | 					{children}
53 | 				</ReactMarkdown>
54 | 			</Suspense>
55 | 		</div>
56 | 	);
57 | };
58 | 
59 | export default Markdown;
60 |

--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import react from "@vitejs/plugin-react";
 2 | import path, { resolve } from "node:path";
 3 | import { defineConfig } from "vite";
 4 | import dts from 'vite-plugin-dts';
 5 | 
 6 | 
 7 | // https://vite.dev/config/
 8 | export default defineConfig({
 9 | 	plugins: [react(), dts({ insertTypesEntry: true })],
10 | 	resolve: {
11 | 		alias: {
12 | 			"@": path.resolve(".", "./src"),
13 |       "node-fetch": "cross-fetch",
14 | 		},
15 | 	},
16 |   build: {
17 |     lib: {
18 |       // Could also be a dictionary or array of multiple entry points
19 |       entry: resolve(__dirname, 'src/index.js'), // Your library's entry point
20 |       name: 'ParlantChatReact', // The UMD global variable name
21 |       // the proper extensions will be added
22 |       // (fileName) => `my-lib.${format}.js` // More specific naming if needed
23 |       fileName: 'parlant-chat-react',
24 |     },
25 |     rollupOptions: {
26 |       // Make sure to externalize dependencies that shouldn't be bundled
27 |       // into your library (usually React and ReactDOM)
28 |       external: ['react', 'react-dom', 'react/jsx-runtime'],
29 |       output: {
30 |         // Provide global variables to use in the UMD build
31 |         // for externalized dependencies
32 |         globals: {
33 |           react: 'React',
34 |           'react-dom': 'ReactDOM',
35 |           'react/jsx-runtime': 'ReactJsxRuntime' // Check casing if issues arise
36 |         },
37 |         // Optional: Configure assets (like CSS) naming if not using injection plugin
38 |         // assetFileNames: (assetInfo) => {
39 |         //   if (assetInfo.name === 'style.css') return 'my-component-styles.css';
40 |         //   return assetInfo.name;
41 |         // },
42 |       },
43 |     },
44 |     // Optional: Minify settings, sourcemaps, etc.
45 |     sourcemap: true, // Recommended for debugging
46 |     emptyOutDir: true, // Cleans the output directory before building
47 |   },
48 | });
49 |

--------------------------------------------------------------------------------
/src/components/ui/Button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Slot } from '@radix-ui/react-slot';
 3 | import { cva, type VariantProps } from 'class-variance-authority';
 4 | import { cn } from '@/utils/utils';
 5 | 
 6 | const buttonVariants = cva(
 7 |   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
12 |         destructive:
13 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
14 |         outline:
15 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
16 |         secondary:
17 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
18 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
19 |         link: 'text-primary underline-offset-4 hover:underline',
20 |       },
21 |       size: {
22 |         default: 'h-10 px-4 py-2',
23 |         sm: 'h-9 rounded-md px-3',
24 |         lg: 'h-11 rounded-md px-8',
25 |         icon: 'h-10 w-10',
26 |       },
27 |     },
28 |     defaultVariants: {
29 |       variant: 'default',
30 |       size: 'default',
31 |     },
32 |   }
33 | );
34 | 
35 | export interface ButtonProps
36 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
37 |     VariantProps<typeof buttonVariants> {
38 |   asChild?: boolean
39 | }
40 | 
41 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
42 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
43 |     const Comp = asChild ? Slot : 'button';
44 |     return (
45 |       <Comp
46 |         className={cn(buttonVariants({ variant, size, className }))}
47 |         ref={ref}
48 |         {...props}
49 |       />
50 |     );
51 |   }
52 | );
53 | Button.displayName = 'Button';
54 | 
55 | // eslint-disable-next-line react-refresh/only-export-components
56 | export { Button, buttonVariants };
57 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parlant-chat-react",
 3 |   "private": false,
 4 |   "version": "1.0.11",
 5 |   "description": "Integrate Parlant agents seamlessly into your React app",
 6 |   "type": "module",
 7 |   "main": "dist/parlant-chat-react.umd.js",
 8 |   "module": "dist/parlant-chat-react.js",
 9 |   "types": "dist/index.d.ts",
10 |   "author": "Menachem Brichta <menachem@emcie.co>",
11 |   "license": "MIT",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/emcie-co/parlant-chat-react"
15 |   },
16 |   "exports": {
17 |     ".": {
18 |       "types": "./dist/App.d.ts",
19 |       "import": "./dist/parlant-chat-react.js",
20 |       "require": "./dist/parlant-chat-react.umd.js"
21 |     },
22 |     "./style.css": "./dist/parlant-chat-react.css"
23 |   },
24 |   "files": [
25 |     "dist"
26 |   ],
27 |   "keywords": [],
28 |   "homepage": "https://parlant.io",
29 |   "scripts": {
30 |     "dev": "vite",
31 |     "build": "tsc -b && vite build",
32 |     "preview": "vite preview",
33 |     "lint": "biome check .",
34 |     "format": "biome format .",
35 |     "ladle": "ladle serve"
36 |   },
37 |   "dependencies": {
38 |     "@radix-ui/react-popover": "^1.1.7",
39 |     "@radix-ui/react-slot": "^1.1.2",
40 |     "@tanstack/react-query": "^5.69.0",
41 |     "@types/node": "^22.13.13",
42 |     "class-variance-authority": "^0.7.1",
43 |     "clsx": "^2.1.1",
44 |     "cross-fetch": "^4.1.0",
45 |     "jss": "^10.10.0",
46 |     "jss-preset-default": "^10.10.0",
47 |     "lucide-react": "^0.484.0",
48 |     "parlant-client": "^0.10.0",
49 |     "react-jss": "^10.10.0",
50 |     "react-markdown": "^10.1.0",
51 |     "rehype-highlight": "^7.0.2",
52 |     "remark-breaks": "^4.0.0",
53 |     "remark-emoji": "^5.0.1"
54 |   },
55 |   "devDependencies": {
56 |     "@eslint/js": "^9.21.0",
57 |     "@ladle/react": "^5.0.3",
58 |     "@types/react": "^19.0.12",
59 |     "@types/react-dom": "^19.0.4",
60 |     "@vitejs/plugin-react": "^4.3.4",
61 |     "autoprefixer": "^10.4.21",
62 |     "biome": "^0.2.2",
63 |     "eslint": "^9.21.0",
64 |     "eslint-plugin-react-hooks": "^5.1.0",
65 |     "eslint-plugin-react-refresh": "^0.4.19",
66 |     "globals": "^15.15.0",
67 |     "postcss": "^8.5.3",
68 |     "react": "^19.0.0",
69 |     "react-dom": "^19.0.0",
70 |     "typescript": "~5.7.3",
71 |     "typescript-eslint": "^8.24.1",
72 |     "vite": "^7.1.5",
73 |     "vite-plugin-dts": "^4.5.4"
74 |   }
75 | }
76 |

--------------------------------------------------------------------------------
/src/components/chat/footer/ChatFooter.tsx:
--------------------------------------------------------------------------------
 1 | import { createUseStyles } from 'react-jss';
 2 | import type { JSX } from 'react';
 3 | import clsx from 'clsx';
 4 | import ParlantLogoFull from '@/assets/parlant-logo-full.svg';
 5 | import { COLORS } from '@/theme';
 6 | 
 7 | interface ChatFooterProps {
 8 |   showInfo?: string;
 9 |   className?: string;
10 | }
11 | 
12 | const useStyles = createUseStyles({
13 |   bottomLine: {
14 |     paddingInline: '25px',
15 |     left: '1rem',
16 |     bottom: '-20px',
17 |     margin: 0,
18 |     lineHeight: 'normal',
19 |     fontSize: '11px',
20 |     fontWeight: '500',
21 |     color: COLORS.mutedText,
22 |     alignItems: 'center',
23 |     height: '37px',
24 |     display: 'flex',
25 |     '& > div': {
26 |       flex: 1,
27 |     }
28 |   },
29 |   statusInvisible: {
30 |     visibility: 'hidden',
31 |   },
32 |   statusVisible: {
33 |     visibility: 'visible',
34 |   },
35 |   poweredBy: {
36 |     fontSize: '12px',
37 |     fontWeight: '400',
38 |     color: COLORS.mutedText,
39 |     lineHeight: '18px',
40 |     textAlign: 'center',
41 |     width: 'fit-content',
42 |     margin: 'auto',
43 |     marginBottom: '0.5rem',
44 |   },
45 |   poweredByContainer: {
46 |     display: 'flex',
47 |     alignItems: 'center',
48 |     justifyContent: 'end',
49 |     whiteSpace: 'nowrap',
50 |     gap: '0.375rem',
51 |     height: '20px'
52 |   },
53 | });
54 | 
55 | const ChatFooter = ({ showInfo, className }: ChatFooterProps): JSX.Element => {
56 |   const classes = useStyles();
57 | 
58 |   return (
59 |     <footer className={clsx(classes.bottomLine, className)} role="contentinfo">
60 |       <div 
61 |         role="status"
62 |         aria-live="polite"
63 |         className={clsx(classes.statusInvisible)}
64 |       >
65 |         {showInfo}
66 |       </div>
67 |       <div className={classes.poweredBy}>
68 |         <div className={classes.poweredByContainer}>
69 |           Powered by open-source
70 |           <a href="https://parlant.io" target="_blank" style={{width: 'max-content'}}>
71 |             <img 
72 |               src={ParlantLogoFull} 
73 |               alt="" 
74 |               height={15} 
75 |               width={65} 
76 |               style={{ objectFit: 'contain', marginTop: '2px' }}
77 |               aria-hidden="true"
78 |             />
79 |           </a>
80 |         </div>
81 |       </div>
82 |     </footer>
83 |   );
84 | };
85 | 
86 | export default ChatFooter;

--------------------------------------------------------------------------------
/src/components/ui/Popover.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import * as React from 'react';
 4 | import * as PopoverPrimitive from '@radix-ui/react-popover';
 5 | import {createUseStyles} from 'react-jss';
 6 | import clsx from 'clsx';
 7 | 
 8 | const useStyles = createUseStyles({
 9 | 	popoverContent: {
10 | 		zIndex: 9999,
11 | 		width: '18rem',
12 | 		borderRadius: '0.375rem',
13 | 		border: '1px solid var(--border)',
14 | 		backgroundColor: 'var(--popover)',
15 | 		padding: '1rem',
16 | 		color: 'var(--popover-foreground)',
17 | 		boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
18 | 		outline: 'none',
19 | 		transformOrigin: 'var(--radix-popover-content-transform-origin)',
20 | 		willChange: 'transform, opacity',
21 | 		'&[data-state="open"]': {
22 | 			animation: '$animateIn 300ms cubic-bezier(0.16, 1, 0.3, 1)',
23 | 		},
24 | 		'&[data-state="closed"]': {
25 | 			animation: '$animateOut 100ms ease-in',
26 | 		},
27 | 	},
28 | 	'@keyframes animateIn': {
29 | 		from: {transform: 'scale(0)'},
30 | 		to: {transform: 'scale(1)'},
31 | 	},
32 | 	'@keyframes animateOut': {
33 | 		from: {transform: 'scale(1)'},
34 | 		to: {transform: 'scale(0)'},
35 | 	}
36 | });
37 | 
38 | const Popover = PopoverPrimitive.Root;
39 | 
40 | const PopoverTrigger = PopoverPrimitive.Trigger;
41 | 
42 | const PopoverContent = React.forwardRef<React.ElementRef<typeof PopoverPrimitive.Content>, React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>>(
43 | 	({className, align = 'center', sideOffset = 4, ...props}, ref) => {
44 | 		const classes = useStyles();
45 | 
46 | 		return (
47 | 			<PopoverPrimitive.Portal>
48 | 				<PopoverPrimitive.Content 
49 | 					ref={ref} 
50 | 					align={align} 
51 | 					sideOffset={sideOffset} 
52 | 					className={clsx(classes.popoverContent, className)} 
53 | 					{...props}
54 | 					onCloseAutoFocus={(event) => {
55 | 						event.preventDefault();
56 | 						props.onCloseAutoFocus?.(event);
57 | 					}}
58 | 					onEscapeKeyDown={(event) => {
59 | 						event.preventDefault();
60 | 						props.onEscapeKeyDown?.(event);
61 | 					}}
62 | 					onOpenAutoFocus={(event) => {
63 | 						event.preventDefault();
64 | 						props.onOpenAutoFocus?.(event);
65 | 					}}
66 | 					forceMount
67 | 				>
68 | 					{props.children}
69 | 				</PopoverPrimitive.Content>
70 | 			</PopoverPrimitive.Portal>
71 | 		);
72 | 	},
73 | );
74 | 
75 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
76 | 
77 | export {Popover, PopoverTrigger, PopoverContent};

--------------------------------------------------------------------------------
/src/components/chat/header/ChatHeader.tsx:
--------------------------------------------------------------------------------
  1 | import { createUseStyles } from 'react-jss';
  2 | import type { JSX } from 'react';
  3 | import ExpandIcon from '@/assets/icons/expand.svg';
  4 | import { COLORS } from '@/theme';
  5 | 
  6 | interface ChatHeaderProps {
  7 |   agentName?: string;
  8 |   agentAvatar?: JSX.Element;
  9 |   changeIsExpanded: () => void;
 10 |   isExpanded?: boolean;
 11 |   className?: string;
 12 | }
 13 | 
 14 | const useStyles = createUseStyles({
 15 |   header: {
 16 |     height: '4rem',
 17 |     borderRadius: `20px 20px 0 0`,
 18 |     borderBottom: `1px solid #EEEEEE`,
 19 |     color: 'white',
 20 |     justifyContent: 'space-between',
 21 |     display: 'flex',
 22 |     alignItems: 'center',
 23 |     paddingInline: '20px',
 24 |     fontSize: '1.2rem',
 25 |   },
 26 |   headerAgentName: {
 27 |     fontSize: '1rem',
 28 |     fontWeight: '500',
 29 |     color: COLORS.primaryText,
 30 |     display: 'flex',
 31 |     alignItems: 'center',
 32 |   },
 33 |   headerAgentNameInitials: {
 34 |     fontSize: '20px',
 35 |     fontWeight: '700',
 36 |     color: 'white',
 37 |     backgroundColor: COLORS.darkGrey,
 38 |     borderRadius: '6.5px',
 39 |     paddingInline: '7.8px',
 40 |     paddingBlock: '5px',
 41 |     marginInlineEnd: '18px',
 42 |     lineHeight: '100%',
 43 |     width: 'fit-content',
 44 |   },
 45 |   expandButton: {
 46 |     background: 'none',
 47 |     border: 'none',
 48 |     padding: 0,
 49 |     cursor: 'pointer',
 50 |     display: 'flex',
 51 |     alignItems: 'center',
 52 |     justifyContent: 'center',
 53 |     '&:focus': {
 54 |       outline: 'none',
 55 |     },
 56 |     '&:focus-visible': {
 57 |       outline: 'none',
 58 |     },
 59 |   },
 60 |   expandIcon: {
 61 |     width: '20px',
 62 |     height: '20px',
 63 |     objectFit: 'contain',
 64 |     '&:focus-visible': {
 65 |       outline: 'none',
 66 |     },
 67 |   },
 68 | });
 69 | 
 70 | const ChatHeader = ({
 71 |   agentName,
 72 |   agentAvatar,
 73 |   changeIsExpanded,
 74 |   isExpanded,
 75 |   className
 76 | }: ChatHeaderProps): JSX.Element => {
 77 |   const classes = useStyles();
 78 |   
 79 |   const ariaLabel = isExpanded ? 'Collapse chat window' : 'Expand chat window';
 80 | 
 81 |   return (
 82 |     <header 
 83 |       className={`${classes.header} ${className || ''}`}
 84 |       role="banner"
 85 |       aria-labelledby="chat-header-title"
 86 |     >
 87 |       <div className={classes.headerAgentName} id="chat-header-title">
 88 |         {agentAvatar || (agentName && (
 89 |             <div className={classes.headerAgentNameInitials} aria-hidden="true">
 90 |               {agentName?.[0]?.toUpperCase()}
 91 |             </div>
 92 |         ))}
 93 |         {agentName && <div>{agentName}</div>}
 94 |       </div>
 95 |       <button
 96 |         type="button"
 97 |         className={classes.expandButton}
 98 |         onClick={changeIsExpanded}
 99 |         aria-label={ariaLabel}
100 |         aria-expanded={isExpanded}
101 |         title={ariaLabel}
102 |       >
103 |         <img src={ExpandIcon} alt="" className={classes.expandIcon} aria-hidden="true" />
104 |       </button>
105 |     </header>
106 |   );
107 | };
108 | 
109 | export default ChatHeader;

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # parlant-chat-react
  2 | 
  3 | 
  6 | 
  7 | A flexible and customizable React chat component for integrating Parlant agents seamlessly into your website.
  8 | 
  9 | <img src="src/assets/chatbox.gif" alt="Parlant Chatbox Demo" width="300">
 10 | 
 11 | 
 12 | ## Installation
 13 | 
 14 | ```bash
 15 | npm install parlant-chat-react
 16 | # or
 17 | yarn add parlant-chat-react
 18 | ```
 19 | 
 20 | ## Quick Start
 21 | 
 22 | Here's how to quickly add the chat component to your React application:
 23 | 
 24 | ```jsx
 25 | import React from 'react';
 26 | import ParlantChatbox from 'parlant-chat-react';
 27 | 
 28 | function App() {
 29 |   return (
 30 |     <div>
 31 |       <h1>My Application</h1>      
 32 |       <ParlantChatbox 
 33 |         agentId="AGENT_ID"
 34 |         server="PARLANT_SERVER_URL" 
 35 |       />
 36 |     </div>
 37 |   );
 38 | }
 39 | 
 40 | export default App;
 41 | ```
 42 | 
 43 | ## Usage Examples
 44 | 
 45 | ### Basic Embedded Chat
 46 | 
 47 | Add a chat interface directly in your page layout:
 48 | 
 49 | ```jsx
 50 | <ParlantChatbox 
 51 |   agentId="AGENT_ID"
 52 |   server="PARLANT_SERVER_URL" 
 53 | />
 54 | ```
 55 | 
 56 | ### Popup Chat
 57 | 
 58 | Display the chat as a popup that can be toggled with a button:
 59 | 
 60 | ```jsx
 61 | <ParlantChatbox 
 62 |   float 
 63 |   agentId="AGENT_ID"
 64 |   server="PARLANT_SERVER_URL" 
 65 | />
 66 | ```
 67 | 
 68 | ### Customized Popup Button
 69 | 
 70 | Use a custom button component:
 71 | 
 72 | ```jsx
 73 | import { Send } from 'lucide-react';
 74 | 
 75 | <ParlantChatbox 
 76 |   float 
 77 |   agentId="AGENT_ID"
 78 |   server="PARLANT_SERVER_URL"
 79 |   popupButton={<Send color="white" size={24} />} 
 80 | />
 81 | ```
 82 | 
 83 | ### Advanced Styling
 84 | 
 85 | Apply custom class names to various parts of the chat:
 86 | 
 87 | ```jsx
 88 | <ParlantChatbox 
 89 |   agentId="AGENT_ID"
 90 |   server="PARLANT_SERVER_URL"
 91 |   classNames={{
 92 |     chatboxWrapper: "my-chatbox-wrapper-class",
 93 |     chatbox: "my-chatbox-class",
 94 |     messagesArea: "my-messages-class",
 95 |     agentMessage: "agent-bubble",
 96 |     customerMessage: "customer-bubble",
 97 |     textarea: "my-input-class",
 98 |     popupButton: "my-button-class",
 99 |     popupButtonIcon: "my-icon-class",
100 |     chatDescription: "my-description-class",
101 |     bottomLine: "my-footer-class"
102 |   }}
103 | />
104 | ```
105 | 
106 | ### Custom Component Replacement
107 | 
108 | Replace default UI components with your own:
109 | 
110 | ```jsx
111 | <ParlantChatbox 
112 |   agentId="AGENT_ID"
113 |   server="PARLANT_SERVER_URL"
114 |   components={{
115 |     popupButton: ({ toggleChatOpen }) => (
116 |       <button onClick={toggleChatOpen}>Chat with us</button>
117 |     ),
118 |     agentMessage: ({ message }) => (
119 |       <div>
120 |         <p>{message.data.message}</p>
121 |         <span>Agent</span>
122 |       </div>
123 |     ),
124 |     customerMessage: ({ message }) => (
125 |       <div>
126 |         <p>{message.data.message}</p>
127 |         <span>You</span>
128 |       </div>
129 |     ),
130 |     header: ({ changeIsExpanded }) => (
131 |       <div>
132 |         <h2>Custom Header</h2>
133 |         <button onClick={changeIsExpanded}>Toggle Expanded</button>
134 |       </div>
135 |     )
136 |   }}
137 | />
138 | ```
139 | 
140 | ## Props
141 | 
142 | | Prop                   | Type           | Required | Default | Description                                                                 |
143 | |------------------------|----------------|----------|---------|-----------------------------------------------------------------------------|
144 | | `server`               | string         | Yes      | -       | API endpoint for chat communication                                         |
145 | | `sessionId`            | string         | No       | -       | Unique identifier for an existing chat session                              |
146 | | `customerId`           | string         | No       | -       | Unique identifier for the customer                                          |
147 | | `titleFn`              | function       | No       | -       | Function that returns a string to generate dynamic chat session titles       |
148 | | `agentId`

--------------------------------------------------------------------------------
/src/components/chat/input/ChatInput.tsx:
--------------------------------------------------------------------------------
  1 | import { createUseStyles } from 'react-jss';
  2 | import type { JSX } from 'react';
  3 | import { useRef, useState, useEffect } from 'react';
  4 | import { Textarea } from '@/components/ui/Textarea';
  5 | import PenIcon from '@/assets/icons/pen.svg';
  6 | import clsx from 'clsx';
  7 | import { COLORS } from '@/theme';
  8 | 
  9 | interface ChatInputProps {
 10 |   onSendMessage: (message: string) => Promise<void>;
 11 |   sendIcon?: JSX.Element;
 12 |   className?: string;
 13 |   float?: boolean;
 14 |   focusTrigger?: boolean;
 15 | }
 16 | 
 17 | const useStyles = createUseStyles({
 18 |   textareaWrapper: {
 19 |     marginInline: '20px',
 20 |     flex: 'none',
 21 |     position: 'relative',
 22 |     border: `1px solid #EEEEEE`,
 23 |     borderRadius: '10px',
 24 |     display: 'flex',
 25 |     justifyContent: 'center',
 26 |     alignItems: 'center',
 27 |     backgroundColor: 'white',
 28 |     lineHeight: '3rem',
 29 |     paddingInlineStart: '1.125rem',
 30 |     marginTop: '1rem',
 31 |     boxShadow: '0px 3px 3px 0px #00000005',
 32 |     paddingRight: '0',
 33 |     height: '3.375rem',
 34 |     maxWidth: '1000px',
 35 |     gap: '4px',
 36 |   },
 37 |   textArea: {
 38 |     boxShadow: 'none',
 39 |     color: 'black',
 40 |     resize: 'none',
 41 |     border: 'none',
 42 |     height: '100%',
 43 |     borderRadius: '0',
 44 |     minHeight: 'unset',
 45 |     padding: '0',
 46 |     whiteSpace: 'nowrap',
 47 |     fontFamily: 'Inter',
 48 |     fontSize: '1rem',
 49 |     lineHeight: '52px',
 50 |     backgroundColor: 'white',
 51 |     fontWeight: '300',
 52 |     '&::placeholder': {
 53 |       color: COLORS.darkGrey,
 54 |       fontSize: '14px',
 55 |       fontWeight: '500'
 56 |     },
 57 |     '&::-webkit-scrollbar': {
 58 |       display: 'none',
 59 |     },
 60 |   },
 61 |   penIcon: {
 62 |     width: '20px',
 63 |     height: '20px',
 64 |     marginRight: '8px',
 65 |     color: COLORS.darkGrey,
 66 |   },
 67 |   sendButton: {
 68 |     marginRight: '10px',
 69 |     maxWidth: '60px',
 70 |     background: 'none',
 71 |     borderRadius: '100%',
 72 |     border: 'none !important',
 73 |     height: '100%',
 74 |     display: 'flex',
 75 |     alignItems: 'center',
 76 |     justifyContent: 'center',
 77 |     width: '40px',
 78 |     cursor: 'pointer',
 79 |     padding: 0,
 80 |     '&:hover': {
 81 |       background: 'white !important',
 82 |       border: 'none !important',
 83 |     },
 84 |     '&:focus': {
 85 |       outline: `2px solid ${COLORS.accent}`,
 86 |       borderRadius: '4px',
 87 |     },
 88 |     '&[disabled]': {
 89 |       opacity: 0.5,
 90 |       cursor: 'default',
 91 |     },
 92 |   },
 93 | });
 94 | 
 95 | const ChatInput = ({
 96 |   onSendMessage,
 97 |   sendIcon,
 98 |   className,
 99 |   float,
100 |   focusTrigger,
101 | }: ChatInputProps): JSX.Element => {
102 |   const classes = useStyles();
103 |   const [message, setMessage] = useState('');
104 |   const submitButtonRef = useRef<HTMLButtonElement>(null);
105 |   const textareaRef = useRef<HTMLTextAreaElement>(null);
106 |   const formRef = useRef<HTMLFormElement>(null);
107 | 
108 |   useEffect(() => {
109 |     if (float || focusTrigger) {
110 |       textareaRef?.current?.focus();
111 |     }
112 |   }, [float, focusTrigger]);
113 | 
114 |   const handleTextareaKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
115 |     if (e.key === 'Enter' && !e.shiftKey) {
116 |       e.preventDefault();
117 |       submitButtonRef?.current?.click();
118 |     } else if (e.key === 'Enter' && e.shiftKey) {
119 |       e.preventDefault();
120 |     }
121 |   };
122 | 
123 |   const handleSubmit = async (e?: React.FormEvent): Promise<void> => {
124 |     if (e) e.preventDefault();
125 |     if (!message.trim()) return;
126 |     await onSendMessage(message);
127 |     setMessage('');
128 |     // Refocus the textarea after sending for better UX
129 |     textareaRef?.current?.focus();
130 |   };
131 | 
132 |   return (
133 |     <form 
134 |       ref={formRef}
135 |       onSubmit={handleSubmit}
136 |       className={clsx(classes.textareaWrapper, className)}
137 |       aria-label="Message input form"
138 |     >
139 |       <Textarea
140 |         role="textbox"
141 |         ref={textareaRef}
142 |         placeholder="Message..."
143 |         value={message}
144 |         onKeyDown={handleTextareaKeydown}
145 |         onChange={(e) => setMessage(e.target.value)}
146 |         rows={1}
147 |         className={classes.textArea}
148 |         aria-label="Type your message"
149 |         aria-multiline="false"
150 |         aria-autocomplete="none"
151 |       />
152 |       <button
153 |         type="submit"
154 |         ref={submitButtonRef}
155 |         className={classes.sendButton}
156 |         disabled={!message.trim()}
157 |         aria-label="Send message"
158 |       >
159 |         {sendIcon || (
160 |           <svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
161 |             <path
162 |               d="M0.533203 0.333373L22.5332 10.3334L0.533202 20.3334L2.40554 12.3334L9.42682 10.3334L2.40554 8.33337L0.533203 0.333373Z"
163 |               fill={COLORS.darkGrey}
164 |             />
165 |           </svg>
166 |         )}
167 |       </button>
168 |     </form>
169 |   );
170 | };
171 | 
172 | export default ChatInput;

--------------------------------------------------------------------------------
/src/components/chat/message/Message.tsx:
--------------------------------------------------------------------------------
  1 | import type {MessageInterface} from '@/components/chat/Chat';
  2 | import type {JSX} from 'react';
  3 | import {createUseStyles} from 'react-jss';
  4 | import clsx from 'clsx';
  5 | import Markdown from '@/components/ui/Markdown';
  6 | import { COLORS } from '@/theme';
  7 | 
  8 | const useStyles = createUseStyles({
  9 | 	markdown: {
 10 | 		'& *': {
 11 | 			fontSize: 'revert',
 12 | 			fontWeight: 'revert',
 13 | 			padding: 'revert',
 14 | 			lineHeight: '1.375rem',
 15 | 			margin: 'revert',
 16 | 			listStyleType: 'revert',
 17 | 			color: 'revert',
 18 | 			textDecoration: 'revert'
 19 | 		},
 20 | 		'& code': {
 21 | 			whiteSpace: 'break-spaces',
 22 | 			maxWidth: '100%',
 23 | 			wordBreak: 'break-word',
 24 | 			background: 'transparent !important',
 25 | 			fontSize: '14px'
 26 | 		},
 27 | 		'& p': {
 28 | 			wordBreak: 'break-word'
 29 | 		},
 30 | 		'& ul': {
 31 | 			all: 'revert',
 32 | 			margin: 0,
 33 | 			padding: 0,
 34 | 			listStyle: 'inside'
 35 | 		},
 36 | 		'& h2': {
 37 | 			fontWeight: 'bold'
 38 | 		},
 39 | 		'& table': {
 40 | 			whiteSpace: 'nowrap',
 41 | 			display: 'block',
 42 | 			overflow: 'scroll',
 43 | 			borderRadius: '2px',
 44 | 			scrollbarWidth: 'thin',
 45 | 			scrollbarColor: '#e8e8e8 transparent',
 46 | 			'&:hover': {
 47 | 				scrollbarColor: 'gray transparent'
 48 | 			},
 49 | 			'& th, & td': {
 50 | 				paddingInline: '10px',
 51 | 				textAlign: 'start'
 52 | 			},
 53 | 			'& th': {
 54 | 				padding: '10px'
 55 | 			},
 56 | 			'& tr:last-child td': {
 57 | 				paddingBottom: '10px'
 58 | 			},
 59 | 			'& thead': {
 60 | 				border: '1px solid lightgray',
 61 | 				borderBottom: 'none',
 62 | 				borderRadius: '3px 3px 0 0',
 63 | 				padding: '10px'
 64 | 			},
 65 | 			'& tbody': {
 66 | 				border: '1px solid lightgray',
 67 | 				borderTop: 'none',
 68 | 				borderRadius: '0 0 3px 3px',
 69 | 				padding: '10px'
 70 | 			}
 71 | 		}
 72 | 	},
 73 | 	wrapper: {
 74 | 		width: '100%',
 75 | 		textAlign: 'start',
 76 | 		display: 'flex',
 77 | 		color: COLORS.primaryText,
 78 | 		paddingBlock: '20px',
 79 | 	},
 80 | 	messageWrapper: {
 81 | 		minWidth: 'min(50%, 384px)',
 82 | 		maxWidth: 'min(80%, 384px)',
 83 | 		// border: '1px solid #e8e8e8',
 84 | 		borderRadius: '12px',
 85 | 		lineHeight: '1.35rem',
 86 | 		padding: '10px',
 87 | 		position: 'relative',
 88 | 		margin: '10px',
 89 | 		marginInline: '20px',
 90 | 		background: COLORS.backgroundLight,
 91 | 		color: COLORS.primaryText,
 92 | 		'& .message-metadata': {
 93 | 			transform: 'translateY(-100%)',
 94 | 			position: 'absolute',
 95 | 			top: '-8px',
 96 | 			left: '3px',
 97 | 			display: 'flex',
 98 | 			justifyContent: 'space-between',
 99 | 			color: COLORS.primaryText,
100 | 			width: 'calc(100% - 10px)',
101 | 			fontSize: '0.85rem',
102 | 		},
103 | 	},
104 | 	continuationWrapper: {
105 | 		paddingTop: '0px',
106 | 	},
107 | 	continuationMessageWrapper: {
108 | 		marginTop: '5px',
109 | 	},
110 | 	nextSourceSameWrapper: {
111 | 		paddingBottom: '0px',
112 | 	},
113 | 	customerWrapper: {
114 | 		justifyContent: 'end',
115 | 		paddingTop: '0rem',
116 | 	},
117 | 	nextSourceSameMessageWrapper: {
118 | 		marginBottom: '0px',
119 | 	},
120 | 	agentName: {
121 | 		display: 'flex',
122 | 		fontSize: '14px',
123 | 		alignItems: 'center',
124 | 		fontWeight: '500',
125 | 		color: COLORS.darkGrey,
126 | 	},
127 | 	agentNameInitial: {
128 | 		backgroundColor: COLORS.darkGrey,
129 | 		color: 'white',
130 | 		display: 'flex',
131 | 		justifyContent: 'center',
132 | 		alignItems: 'center',
133 | 		width: '26px',
134 | 		height: '26px',
135 | 		lineHeight: '100%',
136 | 		borderRadius: '6.5px',
137 | 		marginInlineEnd: '8px',
138 | 	},
139 | 	messageTime: {
140 | 		color: COLORS.mutedText,
141 | 	},
142 | 	customerMessageWrapper: {
143 | 		// background: '#4a90e2',
144 | 		// color: 'white',
145 | 	},
146 | });
147 | 
148 | interface MessageProps {
149 | 	message: MessageInterface;
150 | 	agentName?: string;
151 | 	agentAvatar?: JSX.Element;
152 | 	isSameSourceAsPrevious?: boolean;
153 | 	isNextSourceSame?: boolean;
154 | 	className?: string;
155 | }
156 | 
157 | const Message = ({message, agentName, agentAvatar, className, isSameSourceAsPrevious, isNextSourceSame}: MessageProps): JSX.Element => {
158 | 	const classes = useStyles();
159 | 	const isCustomerMessage = message?.source === 'customer';
160 | 
161 | 	const messageContent = (message.data as {message?: string})?.message || '';
162 | 	const userName = agentName || (message?.data as any)?.participant?.display_name;
163 | 	const formattedUserName = userName === '<guest>' ? 'Guest' : userName;
164 | 	
165 | 	const messageId = `message-${message.id || Math.random().toString(36).substring(2, 9)}`;
166 | 	const sourceText = isCustomerMessage ? 'You' : formattedUserName || 'Agent';
167 | 
168 | 	return (
169 | 		<div 
170 | 			className={clsx(classes.wrapper, isSameSourceAsPrevious && classes.continuationWrapper, isNextSourceSame && classes.nextSourceSameWrapper, isCustomerMessage && classes.customerWrapper)}
171 | 			role="listitem"
172 | 			aria-labelledby={messageId}
173 | 		>
174 | 			<div 
175 | 				className={clsx(classes.messageWrapper, isNextSourceSame && classes.nextSourceSameMessageWrapper, isSameSourceAsPrevious && classes.continuationMessageWrapper, isCustomerMessage && classes.customerMessageWrapper, className)}
176 | 				role="group"
177 | 				aria-label={`Message from ${sourceText}`}
178 | 			>
179 | 				{!isCustomerMessage && !isSameSourceAsPrevious &&
180 | 				<div className="message-metadata">
181 | 					<div className={classes.agentName} id={messageId}>
182 | 						 {agentAvatar || 
183 | 						 <div 
184 | 						 	aria-hidden="true" 
185 | 							className={classes.agentNameInitial}
186 | 						 >
187 | 							{formattedUserName?.[0]?.toUpperCase()}
188 | 						 </div>}
189 | 						<span>{formattedUserName}</span>
190 | 					</div>
191 | 				</div>}
192 | 				<div aria-live={isCustomerMessage ? "off" : "polite"}>
193 | 					<Markdown className={classes.markdown}>{messageContent}</Markdown>
194 | 				</div>
195 | 			</div>
196 | 		</div>
197 | 	);
198 | };
199 | 
200 | export default Message;
201 |

--------------------------------------------------------------------------------
/src/components/chat/message-list/MessageList.tsx:
--------------------------------------------------------------------------------
  1 | import { createUseStyles } from 'react-jss';
  2 | import type { JSX } from 'react';
  3 | import type { MessageInterface } from '@/components/chat/Chat';
  4 | import Message from '@/components/chat/message/Message';
  5 | import clsx from 'clsx';
  6 | import { useEffect, useRef } from 'react';
  7 | import { COLORS } from '@/theme';
  8 | 
  9 | interface MessageListProps {
 10 |   messages: MessageInterface[];
 11 |   showInfo?: string;
 12 |   agentName?: string;
 13 |   agentAvatar?: JSX.Element;
 14 |   components?: {
 15 |     customerMessage?: typeof Message;
 16 |     agentMessage?: typeof Message;
 17 |   };
 18 |   classNames?: {
 19 |     messagesArea?: string;
 20 |     customerMessage?: string;
 21 |     agentMessage?: string;
 22 |     chatDescription?: string;
 23 |   };
 24 |   chatDescription?: string;
 25 |   isExpanded?: boolean;
 26 | }
 27 | 
 28 | const useStyles = createUseStyles({
 29 |   messagesArea: {
 30 |     flex: 1,
 31 |     overflow: 'auto',
 32 |     scrollbarWidth: 'thin',
 33 |     scrollbarColor: 'gray transparent',
 34 |     scrollbarGutter: 'stable',
 35 |     marginTop: '10px',
 36 |     '&::-webkit-scrollbar': {
 37 |       width: '6px',
 38 |     },
 39 |     '&::-webkit-scrollbar-track': {
 40 |       background: 'transparent',
 41 |     },
 42 |     '&::-webkit-scrollbar-thumb': {
 43 |       background: COLORS.accent,
 44 |       borderRadius: '3px',
 45 |     },
 46 |   },
 47 |   messageAreagExpanded: {
 48 |     marginInline: '20px'
 49 |   },
 50 |   chatDescription: {
 51 |     width: '340px',
 52 |     marginTop: '20px',
 53 |     marginBottom: '30px',
 54 |     margin: 'auto',
 55 |     textAlign: 'center',
 56 |     fontSize: '14px',
 57 |     fontWeight: '400',
 58 |     color: COLORS.mutedText,
 59 |     lineHeight: '22px',
 60 |   },
 61 |   bubblesWrapper: {
 62 |     height: 'fit-content',
 63 |     width: 'fit-content',
 64 |     backgroundColor: COLORS.backgroundLight,
 65 |     padding: '10px',
 66 |     margin: '10px',
 67 |     marginInlineStart: '20px',
 68 |     marginInlineEnd: '0px',
 69 |     borderRadius: '15px',
 70 |   },
 71 |   bubbles: {
 72 |     height: '15px',
 73 |     width: '31px',
 74 |     aspectRatio: '2.5',
 75 |     '--_g': `no-repeat radial-gradient(farthest-side, ${COLORS.darkGrey} 90%,#0000)`,
 76 |     background: 'var(--_g), var(--_g), var(--_g)',
 77 |     backgroundSize: '25% 50%',
 78 |     animation: '$l43 1s infinite linear',
 79 |   },
 80 |   statusInfoWrapper: {
 81 |     display: 'flex',
 82 |     alignItems: 'center',
 83 |     gap: '10px',
 84 |     marginTop: '-25px'
 85 |   },
 86 |   infoText: {
 87 |     fontSize: '11px',
 88 |     color: COLORS.mutedText,
 89 |   },
 90 |   '@keyframes l43': {
 91 |     '0%': {
 92 |       backgroundPosition: 'calc(0*100%/2) 50%, calc(1*100%/2) 50%, calc(2*100%/2) 50%',
 93 |     },
 94 |     '20%': {
 95 |       backgroundPosition: 'calc(0*100%/2) 0, calc(1*100%/2) 50%, calc(2*100%/2) 50%',
 96 |     },
 97 |     '40%': {
 98 |       backgroundPosition: 'calc(0*100%/2) 100%, calc(1*100%/2) 0, calc(2*100%/2) 50%',
 99 |     },
100 |     '60%': {
101 |       backgroundPosition: 'calc(0*100%/2) 50%, calc(1*100%/2) 100%, calc(2*100%/2) 0',
102 |     },
103 |     '80%': {
104 |       backgroundPosition: 'calc(0*100%/2) 50%, calc(1*100%/2) 50%, calc(2*100%/2) 100%',
105 |     },
106 |     '100%': {
107 |       backgroundPosition: 'calc(0*100%/2) 50%, calc(1*100%/2) 50%, calc(2*100%/2) 50%',
108 |     },
109 |   },
110 | });
111 | 
112 | const defaultChatDescription = 'I’m an AI-powered agent here to help you with your questions. Let me know if I can help!';
113 | 
114 | const MessageList = ({
115 |   messages,
116 |   showInfo,
117 |   agentName,
118 |   agentAvatar,
119 |   components,
120 |   isExpanded,
121 |   classNames,
122 |   chatDescription,
123 | }: MessageListProps): JSX.Element => {
124 |   const classes = useStyles();
125 |   const messageListRef = useRef<HTMLDivElement>(null);
126 | 
127 |   useEffect(() => {
128 |     // const top = messageListRef?.current?.scrollHeight;
129 |     setTimeout(() => {
130 |       messageListRef?.current?.scrollTo({top: messageListRef?.current?.scrollHeight})
131 |     }, 0);
132 |     setTimeout(() => {
133 |       messageListRef?.current?.scrollTo({top: messageListRef?.current?.scrollHeight})
134 |     }, 500);
135 |     // setTimeout(() => messageListRef?.current?.scrollTo({top}), 500);
136 |   }, [agentName])
137 | 
138 |   useEffect(() => {
139 |     setTimeout(() => {
140 |       messageListRef?.current?.scrollTo({top: messageListRef.current.scrollHeight, behavior: !messageListRef.current.scrollTop ? 'auto' : 'smooth'});
141 |     }, 100);
142 |   }, [messages?.length, showInfo]);
143 | 
144 |   return (
145 |     <div 
146 |       className={clsx('fixed-scroll', classes.messagesArea, isExpanded && classes.messageAreagExpanded, classNames?.messagesArea)}
147 |       role="log"
148 |       ref={messageListRef}
149 |       aria-live="polite"
150 |       aria-label="Chat messages"
151 |       aria-relevant="additions"
152 |     >
153 |       <div className={clsx(classes.chatDescription, classNames?.chatDescription)}>
154 |         {chatDescription || defaultChatDescription}
155 |       </div>
156 |       <div role="list">
157 |         {messages.map((message, index) => {
158 |           const Component = (message?.source === 'customer' ? components?.customerMessage : components?.agentMessage) || Message;
159 | 
160 |           return (
161 |             <div key={message.id || index}>
162 |               <Component
163 |                 isSameSourceAsPrevious={message?.source === messages[index - 1]?.source}
164 |                 isNextSourceSame={message?.source === messages[index + 1]?.source}
165 |                 agentAvatar={agentAvatar}
166 |                 agentName={agentName}
167 |                 message={message}
168 |                 className={message?.source === 'customer' ? classNames?.customerMessage : classNames?.agentMessage}
169 |               />
170 |             </div>
171 |           );
172 |         })}
173 |       </div>
174 |       {showInfo && (
175 |         <div className={classes.statusInfoWrapper}>
176 |           <div 
177 |             className={classes.bubblesWrapper} 
178 |             aria-hidden="true"
179 |           >
180 |             <div className={classes.bubbles} />
181 |           </div>
182 |           <span className={classes.infoText} aria-live="polite">{showInfo}</span>
183 |         </div>
184 |       )}
185 |     </div>
186 |   );
187 | };
188 | 
189 | export default MessageList; 
190 |

--------------------------------------------------------------------------------
/src/assets/parlant-logo-full.svg:
--------------------------------------------------------------------------------
1 | <svg width="164" height="38" viewBox="0 0 164 38" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M20.8835 10.0317C27.0224 10.0317 31.9992 15.0772 31.9992 21.3009C31.9992 27.5246 27.0224 32.5699 20.8835 32.5699H18.2973L9.49227 37.5L11.3075 32.0998C6.71989 30.712 3.37502 26.403 3.375 21.3009C3.375 15.0772 8.35157 10.0318 14.4905 10.0317H20.8835Z" fill="#006E53"/>
3 | <path d="M24.2579 12.7204C23.7537 11.6695 22.7728 10.5904 21.75 10.1178C18.7821 8.74648 15.1545 8.90864 13.0734 10.1177L13.0739 10.1178C18.8263 9.44902 21.8441 11.4934 22.773 13.4297C23.7205 15.4049 23.8231 17.7951 23.0158 19.5654C22.1967 21.3613 20.9096 22.5742 19.3194 23.2124C17.719 23.8547 15.7494 23.9387 13.548 23.3538L12.8201 23.1605L9.28111 32.9225L10.83 33.4873L13.8634 25.1201C16.0628 25.5823 18.1408 25.4621 19.9365 24.7414C21.9411 23.9369 23.5314 22.4085 24.5148 20.2521C25.5543 17.9729 25.3837 15.0673 24.2579 12.7204Z" fill="white"/>
4 | <path d="M26.6092 0.516201C23.7804 0.248955 21.3333 3.30412 18.3867 8.48946C18.3867 8.48946 21.273 8.41115 23.5784 8.90993C27.0862 9.66889 28.6297 11.1522 28.6297 11.1522C28.6297 11.1522 28.8076 8.86538 29.3032 7.86544C30.1748 6.10701 32.2779 5.8611 33.681 5.52704C31.3237 4.6919 31.3237 4.35784 30.987 3.85676C30.6502 3.35567 30.1451 0.850258 26.6092 0.516201Z" fill="#006E53"/>
5 | <path d="M63.3132 19.5422C63.3132 21.4583 62.9187 23.2167 62.1297 24.8172C61.3407 26.3952 60.2136 27.6463 58.7483 28.5706C57.283 29.4949 55.5698 29.957 53.6085 29.957C53.0675 29.957 52.4814 29.9119 51.8502 29.8217C51.219 29.7316 50.7118 29.6188 50.3285 29.4836L50.43 32.324V35.7392L53.9467 36.1112V37.7681H44.5125V36.1112L46.9471 35.7392V13.4218L44.4787 12.8131V10.9871L49.2803 10.3785H49.3479L50.058 10.9871V12.9822C50.7343 12.2383 51.5684 11.6071 52.5603 11.0886C53.5747 10.5701 54.7019 10.3109 55.9417 10.3109C57.2717 10.3109 58.4891 10.6377 59.5937 11.2915C60.7208 11.9452 61.6225 12.9596 62.2988 14.3348C62.9751 15.7099 63.3132 17.4457 63.3132 19.5422ZM54.5553 12.6779C53.6987 12.6779 52.8984 12.8582 52.1545 13.2189C51.4106 13.5796 50.8358 13.9741 50.43 14.4024V27.1504C50.5878 27.4209 50.9823 27.6689 51.6135 27.8943C52.2672 28.0972 52.9773 28.1986 53.7438 28.1986C55.4796 28.1986 56.8772 27.5111 57.9368 26.136C59.0188 24.7608 59.5599 22.6869 59.5599 19.9141C59.5599 17.4795 59.0865 15.6648 58.1396 14.47C57.2154 13.2752 56.0206 12.6779 54.5553 12.6779ZM66.2527 24.5129C66.2527 22.3938 67.3122 20.8384 69.4313 19.8465C71.5503 18.8321 74.2329 18.291 77.4791 18.2234V17.2766C77.4791 16.2171 77.3663 15.383 77.1409 14.7743C76.9155 14.1657 76.521 13.7261 75.9574 13.4556C75.4164 13.1625 74.6387 13.016 73.6242 13.016C72.4745 13.016 71.4376 13.1851 70.5133 13.5232C69.6116 13.8388 68.7099 14.2333 67.8082 14.7067L66.9628 12.9484C67.2559 12.7004 67.7969 12.3735 68.5859 11.9678C69.3749 11.562 70.2879 11.2013 71.3249 10.8857C72.3618 10.5701 73.3988 10.4123 74.4358 10.4123C76.0363 10.4123 77.2987 10.6377 78.223 11.0886C79.1698 11.5169 79.8461 12.2157 80.2518 13.1851C80.6576 14.1544 80.8605 15.4506 80.8605 17.0737V27.9281H82.8555V29.416C82.4047 29.5287 81.8298 29.6414 81.131 29.7541C80.4547 29.8668 79.8573 29.9232 79.3389 29.9232C78.7077 29.9232 78.2793 29.8217 78.0539 29.6188C77.8285 29.4385 77.7158 29.0214 77.7158 28.3677V27.2518C77.0395 27.9281 76.2054 28.548 75.2135 29.1116C74.2442 29.6752 73.1396 29.957 71.8997 29.957C70.2766 29.957 68.924 29.4949 67.842 28.5706C66.7825 27.6238 66.2527 26.2712 66.2527 24.5129ZM73.3537 27.6576C73.9398 27.6576 74.6161 27.4773 75.3826 27.1166C76.149 26.7559 76.8479 26.3276 77.4791 25.8316V20.0156C75.0219 20.0156 73.1621 20.3988 71.8997 21.1653C70.6598 21.9092 70.0399 22.8898 70.0399 24.1071C70.0399 25.3244 70.333 26.2261 70.9191 26.8122C71.5277 27.3758 72.3393 27.6576 73.3537 27.6576ZM85.2749 27.9281L87.8109 27.7252V13.4218L85.3763 12.8131V10.9871L90.0427 10.3785H90.1103L90.8542 10.9871V11.5958L90.7528 14.2333H90.8542C91.0796 13.8501 91.4854 13.3541 92.0715 12.7455C92.6576 12.1368 93.4128 11.5845 94.3371 11.0886C95.2613 10.5701 96.2645 10.3109 97.3466 10.3109C97.7974 10.3109 98.1694 10.3672 98.4624 10.4799V14.2671C98.3046 14.1544 98.0454 14.053 97.6847 13.9628C97.3466 13.8501 96.9633 13.7937 96.535 13.7937C94.664 13.7937 92.9282 14.3686 91.3276 15.5183V27.6914L95.622 27.9619V29.585H85.2749V27.9281ZM101.134 4.35953L98.3951 3.98758V2.53356L103.839 1.89109H103.907L104.651 2.39831V27.6576L107.525 27.9281V29.585H98.3951V27.9281L101.134 27.6238V4.35953ZM109.926 24.5129C109.926 22.3938 110.986 20.8384 113.105 19.8465C115.224 18.8321 117.906 18.291 121.152 18.2234V17.2766C121.152 16.2171 121.04 15.383 120.814 14.7743C120.589 14.1657 120.194 13.7261 119.631 13.4556C119.09 13.1625 118.312 13.016 117.298 13.016C116.148 13.016 115.111 13.1851 114.187 13.5232C113.285 13.8388 112.383 14.2333 111.481 14.7067L110.636 12.9484C110.929 12.7004 111.47 12.3735 112.259 11.9678C113.048 11.562 113.961 11.2013 114.998 10.8857C116.035 10.5701 117.072 10.4123 118.109 10.4123C119.71 10.4123 120.972 10.6377 121.896 11.0886C122.843 11.5169 123.519 12.2157 123.925 13.1851C124.331 14.1544 124.534 15.4506 124.534 17.0737V27.9281H126.529V29.416C126.078 29.5287 125.503 29.6414 124.804 29.7541C124.128 29.8668 123.531 29.9232 123.012 29.9232C122.381 29.9232 121.953 29.8217 121.727 29.6188C121.502 29.4385 121.389 29.0214 121.389 28.3677V27.2518C120.713 27.9281 119.879 28.548 118.887 29.1116C117.917 29.6752 116.813 29.957 115.573 29.957C113.95 29.957 112.597 29.4949 111.515 28.5706C110.456 27.6238 109.926 26.2712 109.926 24.5129ZM117.027 27.6576C117.613 27.6576 118.289 27.4773 119.056 27.1166C119.822 26.7559 120.521 26.3276 121.152 25.8316V20.0156C118.695 20.0156 116.835 20.3988 115.573 21.1653C114.333 21.9092 113.713 22.8898 113.713 24.1071C113.713 25.3244 114.006 26.2261 114.592 26.8122C115.201 27.3758 116.013 27.6576 117.027 27.6576ZM130.909 13.4218L128.475 12.8131V10.9871L133.31 10.3785H133.412L134.122 10.9871V12.4073L134.088 13.2189C134.899 12.4975 135.97 11.8438 137.3 11.2577C138.63 10.6715 139.904 10.3785 141.121 10.3785C142.542 10.3785 143.635 10.649 144.401 11.19C145.19 11.7311 145.743 12.5651 146.058 13.6923C146.374 14.7969 146.532 16.296 146.532 18.1896V27.6576L148.899 27.8943V29.585H140.885V27.9281L142.981 27.6576V18.1558C142.981 16.8257 142.891 15.7888 142.711 15.0449C142.53 14.2784 142.192 13.7148 141.696 13.3541C141.2 12.9709 140.479 12.7793 139.532 12.7793C138.72 12.7793 137.853 12.9822 136.928 13.388C136.004 13.7937 135.181 14.2671 134.46 14.8082V27.6238L136.759 27.9281V29.585H128.779V27.9281L130.909 27.6238V13.4218ZM157.118 29.9232C155.833 29.9232 154.875 29.6301 154.243 29.044C153.612 28.4579 153.297 27.4547 153.297 26.0345V13.0498H150.862V11.5282C150.975 11.5056 151.29 11.4267 151.809 11.2915C152.327 11.1562 152.677 11.0322 152.857 10.9195C153.218 10.7166 153.499 10.3109 153.702 9.7022C153.883 9.27388 154.097 8.58633 154.345 7.63952C154.593 6.69272 154.739 6.12915 154.784 5.94881H156.779L156.847 10.8181H162.494V13.0498H156.847V23.4308C156.847 24.7158 156.881 25.6175 156.949 26.136C157.039 26.6544 157.208 26.9926 157.456 27.1504C157.726 27.3082 158.177 27.3871 158.808 27.3871C159.417 27.3871 160.082 27.3082 160.803 27.1504C161.547 26.9926 162.122 26.8235 162.528 26.6432L163.035 28.1648C162.494 28.5706 161.615 28.9651 160.398 29.3483C159.203 29.7316 158.109 29.9232 157.118 29.9232Z" fill="#006E53"/>
6 | </svg>
7 |

--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
  2 | import {useEffect, useRef, useState} from 'react';
  3 | import type {JSX, ReactElement} from 'react';
  4 | import {ChevronDown, ChevronUp} from 'lucide-react';
  5 | import Chat from '@/components/chat/Chat';
  6 | import type {MessageInterface} from '@/components/chat/Chat';
  7 | import {Button} from '@/components/ui/Button';
  8 | import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/Popover';
  9 | import {createUseStyles} from 'react-jss';
 10 | import clsx from 'clsx';
 11 | 
 12 | import { COLORS } from '@/theme';
 13 | import { ParlantClient } from 'parlant-client';
 14 | import { EventCreationParams, SessionCreationParams } from 'parlant-client/src/api';
 15 | import { messageSound } from './utils/utils';
 16 | 
 17 | const useStyles = createUseStyles({
 18 | 	root: {
 19 | 		fontFamily: 'Inter',
 20 | 		'& .fixed-scroll': {
 21 | 			scrollbarWidth: 'thin',
 22 | 			scrollbarColor: '#ebecf0 transparent',
 23 | 		},
 24 | 	},
 25 | 	popupButton: {
 26 | 		background: COLORS.primaryText,
 27 | 		border: 'none',
 28 | 		outline: '0 !important',
 29 | 		borderRadius: '50%',
 30 | 		minWidth: 'fit-content',
 31 | 		height: '50px',
 32 | 		width: '50px',
 33 | 		padding: '10px',
 34 | 		margin: '10px',
 35 | 	},
 36 | 	iconComponent: {
 37 | 		minWidth: '30px',
 38 | 		minHeight: '30px',
 39 | 		userSelect: 'none',
 40 | 	},
 41 | 	chatWrapper: {
 42 | 		width: '27.75rem',
 43 | 		boxShadow: '0px 8px 36px 0px #0000001A',
 44 | 		transition: 'width 0.3s ease-in-out',
 45 | 		background: '#FBFBFB',
 46 | 		borderRadius: '20px',
 47 | 		padding: '0',
 48 | 	},
 49 | 	expandedChatWrapper: {
 50 | 		width: '920px',
 51 | 		maxWidth: '95vw',
 52 | 	}
 53 | });
 54 | 
 55 | interface MessageComponentProps {
 56 | 	message: MessageInterface;
 57 | 	className?: string;
 58 | }
 59 | 
 60 | interface PopupButtonComponentProps {
 61 | 	toggleChatOpen: () => void;
 62 | }
 63 | 
 64 | export interface ChatProps {
 65 | 	server: string;
 66 | 	sessionId?: string;
 67 | 	agentName?: string;
 68 | 	agentAvatar?: JSX.Element;
 69 | 	chatDescription?: string;
 70 | 	float?: boolean;
 71 | 	onPopupButtonClick?: () => void;
 72 | 	agentOpeningMessage?: string;
 73 | 	titleFn?: () => string;
 74 | 	popupButton?: JSX.Element;
 75 | 	sendIcon?: JSX.Element;
 76 | 	agentId?: string;
 77 | 	customerId?: string;
 78 | 	classNames?: {
 79 | 		chatboxWrapper?: string;
 80 | 		chatbox?: string;
 81 | 		messagesArea?: string;
 82 | 		agentMessage?: string;
 83 | 		customerMessage?: string;
 84 | 		textarea?: string;
 85 | 		popupButton?: string;
 86 | 		popupButtonIcon?: string;
 87 | 		chatDescription?: string;
 88 | 		bottomLine?: string;
 89 | 	};
 90 | 	components?: {
 91 | 		popupButton?: (props: PopupButtonComponentProps) => ReactElement;
 92 | 		agentMessage?: (props: MessageComponentProps) => ReactElement;
 93 | 		customerMessage?: (props: MessageComponentProps) => ReactElement;
 94 | 		header?: ({changeIsExpanded, agentName}: {changeIsExpanded: () => void; agentName: string | undefined;}) => ReactElement;
 95 | 	};
 96 | 	onSessionCreated?: (sessionId: string) => void;
 97 | }
 98 | 
 99 | const queryClient = new QueryClient();
100 | 
101 | const Chatbox = ({server, titleFn, agentId, customerId, sessionId, agentName, agentAvatar, onPopupButtonClick, agentOpeningMessage, chatDescription, float = false, popupButton, components, sendIcon, classNames, onSessionCreated}: ChatProps): JSX.Element => {
102 | 	const classes = useStyles();
103 | 	const [sessionIdToUse, setSessionIdToUse] = useState(sessionId);
104 | 	const popupButtonRef = useRef<HTMLButtonElement>(null);
105 | 	const [open, setOpen] = useState<boolean>(false);
106 | 	const [isClosing, setIsClosing] = useState<boolean>(false);
107 | 	const [isExpanded, setIsExpanded] = useState<boolean>(false);
108 | 	const [origin, setOrigin] = useState<string>('bottom right');
109 | 	const isOriginInBottom = origin.includes('bottom');
110 | 	const [messages, setMessages] = useState<MessageInterface[]>([]);
111 | 	const IconComponent = open ?  (isOriginInBottom ? ChevronUp : ChevronDown) : (isOriginInBottom ? ChevronDown : ChevronUp);
112 | 
113 | 	const parlantClient = new ParlantClient({
114 | 		environment: server,
115 | 	});
116 | 
117 | 	const setTransformOrigin = (): void => {
118 | 		if (!popupButtonRef.current) return;
119 | 		const rect = popupButtonRef.current.getBoundingClientRect();
120 | 		const vertical = rect.top < window.innerHeight / 2 ? 'top' : 'bottom';
121 | 		const horizontal = rect.left < window.innerWidth / 2 ? 'left' : 'right';
122 | 		setOrigin(`${vertical} ${horizontal}`);
123 | 	};
124 | 
125 | 	useEffect(setTransformOrigin, []);
126 | 	
127 | 
128 | 	const toggleChat = (): void => {
129 | 			if (open) {
130 | 				setIsClosing(true);
131 | 				setTimeout(() => {
132 | 					setIsClosing(false);
133 | 					setOpen(false);
134 | 				}, 0);
135 | 			} else {
136 | 				setOpen(true);
137 | 			}
138 | 			onPopupButtonClick?.();
139 | 	};
140 | 
141 | 	const handleOnOpenChange = (open: boolean): void => {
142 | 		setOpen(open);
143 | 		setIsExpanded(false);
144 | 	};
145 | 
146 | 	const createSession = async (message: EventCreationParams) => {
147 | 		if (!agentId) {
148 | 			console.error('agentId is required when sessionId is not provided');
149 | 			return;
150 | 		}
151 | 		const newSessionData: SessionCreationParams = {agentId, allowGreeting: false, title: titleFn?.() || `New Session - ${new Date().toISOString()}`};
152 | 		if (customerId) newSessionData.customerId = customerId;
153 | 		const newSession = await parlantClient.sessions.create(newSessionData);
154 | 		if (!newSession?.id) {
155 | 			console.error('session was not created');
156 | 			return;
157 | 
158 | 		}
159 | 		if (agentOpeningMessage) {
160 | 			await parlantClient.sessions.createEvent(newSession.id, {kind: 'message', message: agentOpeningMessage, source: 'human_agent_on_behalf_of_ai_agent'});
161 | 		}
162 | 		const event = await parlantClient.sessions.createEvent(newSession.id, message);
163 | 		if (event?.id) {
164 | 			setSessionIdToUse(newSession.id);
165 | 			onSessionCreated?.(newSession.id);
166 | 		}
167 | 		// messageSound();
168 | 	}
169 | 
170 | 	const PopupButtonComponent = components?.popupButton && <components.popupButton toggleChatOpen={toggleChat} />;
171 | 	const sessionToUse = sessionId || sessionIdToUse;
172 | 
173 | 	return (
174 | 		<QueryClientProvider client={queryClient}>
175 | 			<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
176 | 			<span className={classes.root}>
177 | 				{float ? (
178 | 					<Popover open={open || isClosing} onOpenChange={handleOnOpenChange}>
179 | 						<PopoverTrigger ref={popupButtonRef} asChild>
180 | 							<div>
181 | 								{PopupButtonComponent || (
182 | 									<Button onClick={() => toggleChat()} className={clsx(classes.popupButton, classNames?.popupButton)}>
183 | 										{popupButton || <IconComponent size={30} color="white" className={clsx(classes.iconComponent, classNames?.popupButtonIcon)} />}
184 | 									</Button>
185 | 								)}
186 | 							</div>
187 | 						</PopoverTrigger>
188 | 						<PopoverContent className={clsx(classes.chatWrapper, isExpanded && classes.expandedChatWrapper, classNames?.chatboxWrapper)} style={{transformOrigin: origin, margin: '0 10px'}} sideOffset={18}>
189 | 							<Chat createSession={createSession} agentId={agentId} server={server} float={float} sessionId={sessionToUse} agentName={agentName} agentAvatar={agentAvatar} agentOpeningMessage={agentOpeningMessage} chatDescription={chatDescription} classNames={classNames} components={components} sendIcon={sendIcon} changeIsExpanded={() => setIsExpanded(!isExpanded)} messages={messages} setMessages={setMessages} />
190 | 						</PopoverContent>
191 | 					</Popover>
192 | 				) : (
193 | 					<div className={clsx(classes.chatWrapper, isExpanded && classes.expandedChatWrapper, classNames?.chatboxWrapper)}>
194 | 						<Chat createSession={createSession} agentId={agentId} server={server} sessionId={sessionToUse} agentName={agentName} agentAvatar={agentAvatar} agentOpeningMessage={agentOpeningMessage} chatDescription={chatDescription} classNames={classNames} components={components} sendIcon={sendIcon} changeIsExpanded={() => setIsExpanded(!isExpanded)} messages={messages} setMessages={setMessages} />
195 | 					</div>
196 | 				)}
197 | 			</span>
198 | 		</QueryClientProvider>
199 | 	);
200 | };
201 | 
202 | export default Chatbox;
203 |

--------------------------------------------------------------------------------
/src/components/chat/Chat.tsx:
--------------------------------------------------------------------------------
  1 | import {groupBy} from '@/utils/object';
  2 | import {useQuery} from '@tanstack/react-query';
  3 | import {ParlantClient} from 'parlant-client';
  4 | import type {Agent, Event, EventCreationParams, Session} from 'parlant-client/src/api';
  5 | import {useEffect, useRef, useState, useCallback, useMemo} from 'react';
  6 | import React, {type JSX} from 'react';
  7 | import type {ChatProps} from '@/App';
  8 | import {createUseStyles} from 'react-jss';
  9 | import clsx from 'clsx';
 10 | import ChatHeader from '@/components/chat/header/ChatHeader';
 11 | import MessageList from '@/components/chat/message-list/MessageList';
 12 | import ChatInput from '@/components/chat/input/ChatInput';
 13 | import ChatFooter from '@/components/chat/footer/ChatFooter';
 14 | import { messageSound } from '@/utils/utils';
 15 | 
 16 | const useStyles = createUseStyles({
 17 | 	chatbox: {
 18 | 		background: 'white',
 19 | 		height: 'min(48.75rem,70vh)',
 20 | 		borderRadius: '20px',
 21 | 		display: 'flex',
 22 | 		fontFamily: 'Inter',
 23 | 		flexDirection: 'column',
 24 | 		transition: 'all 0.3s ease-in-out',
 25 | 		width: '27.75rem',
 26 | 	},
 27 | 	expandedChatbox: {
 28 | 		width: '920px',
 29 | 		height: 'min(880px,80vh)',
 30 | 		maxWidth: '95vw',
 31 | 	}
 32 | });
 33 | 
 34 | export interface MessageInterface extends Event {
 35 | 	status: string | null;
 36 | 	error?: string;
 37 | }
 38 | 
 39 | interface StatusEventData {
 40 | 	status?: string;
 41 | 	exception?: string;
 42 | }
 43 | 
 44 | export const createEmptyPendingMessage = (): Partial<Event & {serverStatus: string}> => ({
 45 | 	kind: 'message',
 46 | 	source: 'customer',
 47 | 	creationUtc: new Date(),
 48 | 	serverStatus: 'pending',
 49 | 	offset: 0,
 50 | 	correlationId: '',
 51 | 	data: {
 52 | 		message: '',
 53 | 	},
 54 | });
 55 | 
 56 | export const getInitialMessages = (agentOpeningMessage?: string): MessageInterface[] => {
 57 | 	if (!agentOpeningMessage) return [];
 58 | 	return [
 59 | 		{
 60 | 			kind:'message',
 61 | 			source: 'human_agent_on_behalf_of_ai_agent',
 62 | 			creationUtc: new Date(),
 63 | 			id: '',
 64 | 			deleted: false,
 65 | 			offset: 0,
 66 | 			correlationId: '',
 67 | 			data: {
 68 | 				message: agentOpeningMessage,
 69 | 			},
 70 | 			status: 'ready',
 71 | 		},
 72 | 	];
 73 | }
 74 | 
 75 | const Chat = ({server, sessionId, agentId, agentName, agentAvatar, components, agentOpeningMessage, sendIcon, createSession, classNames, float, changeIsExpanded, chatDescription, messages, setMessages}: ChatProps & {changeIsExpanded?: () => void; createSession: (message: EventCreationParams) => void; messages: MessageInterface[]; setMessages: React.Dispatch<React.SetStateAction<MessageInterface[]>>}): JSX.Element => {
 76 | 	const classes = useStyles();
 77 | 
 78 | 	const [isExpanded, setIsExpanded] = useState<boolean>(false);
 79 | 	const [lastOffset, setLastOffset] = useState<number>(0);
 80 | 	const [showInfo, setShowInfo] = useState<string>('');
 81 | 	const [pendingMessage, setPendingMessage] = useState<Partial<Event>>(createEmptyPendingMessage());
 82 | 
 83 | 	const parlantClient = new ParlantClient({
 84 | 		environment: server,
 85 | 	});
 86 | 
 87 | 	const {data} = useQuery<Event[]>({
 88 | 		enabled: !!sessionId,
 89 | 		queryKey: ['events', lastOffset],
 90 | 		queryFn: () => parlantClient.sessions.listEvents(sessionId || '', {waitForData: 60, minOffset: lastOffset}),
 91 | 	});
 92 | 	const {data: sessionData} = useQuery<Session>({
 93 | 		enabled: !!sessionId,
 94 | 		queryKey: ['session'],
 95 | 		queryFn: () => parlantClient.sessions.retrieve(sessionId || ''),
 96 | 	});
 97 | 
 98 | 	const agentIdToFetch = sessionData?.agentId || agentId;
 99 | 	const {data: agentData} = useQuery<Partial<Agent> | null>({
100 | 		queryKey: ['agent'],
101 | 		queryFn: () => agentName ? {name: agentName} : agentIdToFetch ? fetch(`${server}/agents/${agentIdToFetch}`).then(res => res.json()) : null,
102 | 		enabled: !!agentIdToFetch,
103 | 	});
104 | 
105 | 	const correlationsMap = useMemo(
106 | 		() => groupBy(data || [], (item: Event) => item?.correlationId.split('::')[0]),
107 | 		[data]
108 | 	);
109 | 	const messageEvents = useMemo(
110 | 		() => data?.filter((e) => e.kind === 'message') || [],
111 | 		[data]
112 | 	);
113 | 	const withStatusMessages = useMemo(() => messageEvents.map((newMessage, i) => {
114 | 			const messageData: MessageInterface = { ...newMessage, status: '' };
115 | 			const correlationItems = correlationsMap[newMessage.correlationId.split('::')[0]];
116 | 			const lastCorrelationItem = (correlationItems?.at(-1)?.data) as StatusEventData | undefined;
117 | 			messageData.status = lastCorrelationItem?.status || (messageEvents[i + 1] ? 'ready' : null);
118 | 			if (messageData.status === 'error') {
119 | 				messageData.error = lastCorrelationItem?.exception;
120 | 			}
121 | 			return messageData;
122 | 		}),
123 | 		[messageEvents, correlationsMap]
124 | 	);
125 | 
126 | 	const postMessage = async (content: string): Promise<void> => {
127 | 		if (!content.trim()) return;
128 | 
129 | 		setPendingMessage((prev) => ({
130 | 			...prev,
131 | 			sessionId,
132 | 			data: {message: content},
133 | 		}));
134 | 
135 | 		const message: EventCreationParams = {
136 | 			kind: 'message',
137 | 			message: content,
138 | 			source: 'customer',
139 | 		};
140 | 		
141 | 		if (sessionId) {
142 | 			await parlantClient.sessions.createEvent(sessionId, message);
143 | 			// messageSound();
144 | 		} else createSession(message);
145 | 	};
146 | 
147 | 	const formatMessagesFromEvents = useCallback((): void => {
148 | 		const lastEvent = data?.at(-1);
149 | 		const lastStatusEvent = data?.findLast((e) => e.kind === 'status');
150 | 
151 | 		if (!lastEvent) return;
152 | 
153 | 		const offset = lastEvent?.offset;
154 | 		if (offset !== undefined) setLastOffset(offset + 1);
155 | 
156 | 		setMessages((currentMessages: MessageInterface[]) => {
157 | 			const lastMessage = currentMessages.at(-1);
158 | 
159 | 			if (lastMessage?.source === 'customer' && correlationsMap[lastMessage.correlationId]) {
160 | 				const lastCorrelationItem = (correlationsMap[lastMessage.correlationId].at(-1)?.data) as StatusEventData;
161 | 				lastMessage.status = lastCorrelationItem?.status || lastMessage.status;
162 | 
163 | 				if (lastMessage.status === 'error') {
164 | 					lastMessage.error = lastCorrelationItem?.exception;
165 | 				}
166 | 			}
167 | 
168 | 			if (!withStatusMessages.length) return [...currentMessages];
169 | 
170 | 			if ((pendingMessage?.data as {message?: string})?.message) {
171 | 				setPendingMessage(createEmptyPendingMessage());
172 | 			}
173 | 
174 | 			const mergedMessages: (Event | undefined)[] = [];
175 | 
176 | 			for (const messageArray of [currentMessages, withStatusMessages]) {
177 | 				for (const message of messageArray) {
178 | 					mergedMessages[message.offset] = message;
179 | 				}
180 | 			}
181 | 
182 | 			const newMessages = mergedMessages.filter((message): message is MessageInterface => !!message);
183 | 			// if (currentMessages.length && newMessages.length > currentMessages.length && newMessages[newMessages.length - 1].source === 'ai_agent') {
184 | 			// 	messageSound(true);
185 | 			// }
186 | 			return newMessages;
187 | 		});
188 | 
189 | 		const lastStatusEventStatus = (lastStatusEvent?.data as StatusEventData)?.status;
190 | 		setShowInfo(
191 | 			!!messages.length && lastStatusEventStatus === 'processing'
192 | 				? `${(lastStatusEvent?.data as any)?.data?.stage || 'Thinking'}...`
193 | 				: lastStatusEventStatus === 'typing'
194 | 				? 'Typing...'
195 | 				: ''
196 | 		);
197 | 	}, [data, pendingMessage, withStatusMessages, correlationsMap]);
198 | 
199 | 	useEffect(() => {
200 | 		formatMessagesFromEvents();
201 | 	}, [data, formatMessagesFromEvents]);
202 | 
203 | 	const changeIsExpandedFn = (): void => {
204 | 		setIsExpanded(!isExpanded);
205 | 		changeIsExpanded?.();
206 | 	};
207 | 
208 | 	return (
209 | 		<div className={clsx(classes.chatbox, isExpanded && classes.expandedChatbox, classNames?.chatbox)}>
210 | 			{(!sessionId && !agentId) ? 
211 | 			<div className='flex justify-center mt-[20px] h-full text-[20px] font-medium'>
212 | 				<h1>Either sessionId or agentId is required</h1>
213 | 			</div>
214 | 			:
215 | 			<>
216 | 			{components?.header ?
217 | 				<components.header changeIsExpanded={changeIsExpandedFn} agentName={agentData?.name || agentName} /> :
218 | 				<ChatHeader
219 | 					agentName={agentData?.name || agentName}
220 | 					agentAvatar={agentAvatar}
221 | 					changeIsExpanded={changeIsExpandedFn}
222 | 					isExpanded={isExpanded}
223 | 				/>}
224 | 				<MessageList
225 | 					messages={!messages?.length && agentOpeningMessage? getInitialMessages(agentOpeningMessage) : messages}
226 | 					showInfo={showInfo}
227 | 					agentName={agentData?.name}
228 | 					agentAvatar={agentAvatar}
229 | 					components={components}
230 | 					classNames={classNames}
231 | 					isExpanded={isExpanded}
232 | 					chatDescription={chatDescription}
233 | 				/>
234 | 
235 | 			<ChatInput
236 | 				onSendMessage={postMessage}
237 | 				sendIcon={sendIcon}
238 | 				className={classNames?.textarea}
239 | 				float={float}
240 | 				focusTrigger={isExpanded}
241 | 			/>
242 | 			<ChatFooter
243 | 				showInfo={showInfo}
244 | 				className={classNames?.bottomLine}
245 | 			/>
246 | 			</>}
247 | 		</div>
248 | 	);
249 | };
250 | 
251 | export default Chat;
252 |

--------------------------------------------------------------------------------