@uipath/apollo-react 4.42.0 → 4.43.0

package/dist/material/stories/chat-story-support.js

@@ -0,0 +1,2381 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import Divider from "@mui/material/Divider";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FontVariantToken } from "../../core/index.js";
+import { ApChat, ApTypography, AutopilotChatEvent, AutopilotChatMode, AutopilotChatRole, AutopilotChatService } from "../components/index.js";
+const CHAT_LOCALES = [
+    'en',
+    'de',
+    'es',
+    'es-MX',
+    'fr',
+    'ja',
+    'ko',
+    'pt',
+    'pt-BR',
+    'ru',
+    'tr',
+    'zh-CN',
+    'zh-TW'
+];
+function mapToChatLocale(globalLocale) {
+    return CHAT_LOCALES.includes(globalLocale) ? globalLocale : 'en';
+}
+function mapToChatTheme(globalTheme) {
+    switch(globalTheme){
+        case 'light':
+            return 'light';
+        case 'light-hc':
+            return 'light-hc';
+        case 'dark':
+            return 'dark';
+        case 'dark-hc':
+            return 'dark-hc';
+        case 'future-light':
+            return 'light';
+        case 'future-dark':
+            return 'dark';
+        default:
+            return 'dark';
+    }
+}
+function Section({ children }) {
+    return /*#__PURE__*/ jsxs(Box, {
+        sx: {
+            mb: 3,
+            '&:last-child': {
+                mb: 0,
+                '& > .MuiDivider-root': {
+                    display: 'none'
+                }
+            }
+        },
+        children: [
+            children,
+            /*#__PURE__*/ jsx(Divider, {
+                sx: {
+                    mt: 3
+                }
+            })
+        ]
+    });
+}
+function SectionTitle({ children }) {
+    return /*#__PURE__*/ jsx(ApTypography, {
+        variant: FontVariantToken.fontSizeMBold,
+        component: "h3",
+        sx: {
+            mb: 2
+        },
+        children: children
+    });
+}
+function ButtonGroup({ children }) {
+    return /*#__PURE__*/ jsx(Box, {
+        sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 1,
+            mb: 1.5
+        },
+        children: children
+    });
+}
+function DemoButton({ primary = false, children, onClick, disabled, title }) {
+    return /*#__PURE__*/ jsx(Button, {
+        variant: primary ? 'contained' : 'outlined',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        title: title,
+        sx: {
+            whiteSpace: 'nowrap'
+        },
+        children: children
+    });
+}
+function DemoInput({ style, type, min, max, value, onChange, placeholder, disabled }) {
+    return /*#__PURE__*/ jsx(TextField, {
+        size: "small",
+        fullWidth: true,
+        type: type,
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        onChange: onChange,
+        inputProps: {
+            min,
+            max
+        },
+        sx: {
+            mb: 1.5
+        },
+        style: style
+    });
+}
+function DemoTextArea({ style, value, onChange, placeholder, disabled }) {
+    return /*#__PURE__*/ jsx(TextField, {
+        size: "small",
+        fullWidth: true,
+        multiline: true,
+        minRows: 3,
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        onChange: onChange,
+        sx: {
+            mb: 1.5
+        },
+        style: style
+    });
+}
+function DemoSelect({ style, children, value, onChange, disabled }) {
+    return /*#__PURE__*/ jsx(TextField, {
+        select: true,
+        size: "small",
+        fullWidth: true,
+        value: value,
+        disabled: disabled,
+        onChange: onChange,
+        SelectProps: {
+            native: true
+        },
+        sx: {
+            mb: 1.5
+        },
+        style: style,
+        children: children
+    });
+}
+function InfoText({ children, style }) {
+    return /*#__PURE__*/ jsx(Typography, {
+        component: "p",
+        variant: "body2",
+        sx: {
+            color: 'text.secondary',
+            mt: 1
+        },
+        style: style,
+        children: children
+    });
+}
+function ChatShowcaseDemo({ theme, instanceName, initialMode = AutopilotChatMode.SideBySide, locale = 'en' }) {
+    const embeddedContainerRef = useRef(null);
+    const [chatService, setChatService] = useState(null);
+    const [chatMode, setChatMode] = useState(initialMode);
+    const [customMessage, setCustomMessage] = useState('Hello, how can I help you today?');
+    const [errorMessage, setErrorMessage] = useState('An error occurred. Please try again.');
+    const [streamingText, setStreamingText] = useState('This is a streaming response that will appear word by word...');
+    const [loadingMessage, setLoadingMessage] = useState('Thinking...');
+    const [waitForMore, setWaitForMore] = useState(false);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [isWaiting, setIsWaiting] = useState(false);
+    const [isShowLoading, setIsShowLoading] = useState(false);
+    const [features, setFeatures] = useState({
+        history: true,
+        settings: true,
+        attachments: true,
+        audio: false,
+        audioStreaming: false,
+        htmlPreview: true,
+        headerSeparator: false,
+        fullHeight: true,
+        resize: true,
+        close: true,
+        feedback: true,
+        model: true,
+        agentMode: true,
+        sendOnClick: false,
+        paginatedMessages: false,
+        compactMode: false,
+        customScrollTheme: false,
+        copy: true,
+        attachmentsAsync: false,
+        readOnly: false
+    });
+    const [selectedAgentMode, setSelectedAgentMode] = useState('agent');
+    const [selectedModel, setSelectedModel] = useState('gpt-4');
+    const [primaryFontToken, setPrimaryFontToken] = useState(FontVariantToken.fontSizeM);
+    const [promptBoxMinRows, setPromptBoxMinRows] = useState(2);
+    const [promptBoxMaxRows, setPromptBoxMaxRows] = useState(12);
+    const [resourcePaginationEnabled, setResourcePaginationEnabled] = useState(true);
+    const [resourcePageSize, setResourcePageSize] = useState(10);
+    const createResourceManager = useCallback(()=>{
+        const topLevelItems = [
+            {
+                id: 'variables',
+                type: 'category',
+                displayName: 'Variables',
+                icon: 'data_object',
+                hasNestedResources: true
+            },
+            {
+                id: 'files',
+                type: 'category',
+                displayName: 'This is an intentionally very very long category name',
+                icon: 'folder',
+                hasNestedResources: true
+            },
+            {
+                id: 'current-user',
+                type: 'context',
+                displayName: 'This is an intentionally very very long resource name',
+                icon: 'person',
+                tooltip: 'The currently logged in user context',
+                hasNestedResources: false
+            },
+            {
+                id: 'current-date',
+                type: 'context',
+                displayName: 'Current Date',
+                icon: 'calendar_today',
+                tooltip: "Today's date in ISO format",
+                hasNestedResources: false
+            }
+        ];
+        const variableIcons = [
+            'text_fields',
+            'mail',
+            'numbers',
+            'toggle_on',
+            'settings',
+            'person',
+            'calendar_today',
+            'list',
+            'data_object',
+            'code'
+        ];
+        const variableItems = Array.from({
+            length: 50
+        }, (_, i)=>({
+                id: `var-${i}`,
+                type: 'variable',
+                displayName: `variable_${i.toString().padStart(2, '0')}`,
+                icon: variableIcons[i % variableIcons.length],
+                tooltip: `Variable ${i} - This is a sample variable for testing pagination`
+            }));
+        const fileIcons = [
+            "description",
+            'table_chart',
+            'picture_as_pdf',
+            'image',
+            'code',
+            'folder'
+        ];
+        const fileExtensions = [
+            '.json',
+            '.csv',
+            '.pdf',
+            '.png',
+            '.ts',
+            '.txt',
+            '.xml',
+            '.yaml'
+        ];
+        const fileItems = Array.from({
+            length: 30
+        }, (_, i)=>({
+                id: `file-${i}`,
+                type: 'file',
+                displayName: `document_${i.toString().padStart(2, '0')}${fileExtensions[i % fileExtensions.length]}`,
+                icon: fileIcons[i % fileIcons.length],
+                tooltip: `File ${i} - Sample file for testing pagination`
+            }));
+        const paginate = (items, skip, pageSize, paginationEnabled)=>{
+            if (!paginationEnabled) return {
+                paginatedItems: items,
+                done: true
+            };
+            const paginatedItems = items.slice(skip, skip + pageSize);
+            const done = skip + pageSize >= items.length;
+            return {
+                paginatedItems,
+                done
+            };
+        };
+        return {
+            getTopLevelResources: ()=>topLevelItems,
+            getNestedResources: async (resourceId, options)=>{
+                await new Promise((resolve)=>setTimeout(resolve, 300));
+                let items = [];
+                if ('variables' === resourceId) items = variableItems;
+                else if ('files' === resourceId) items = fileItems;
+                if (options?.searchText) {
+                    const searchLower = options.searchText.toLowerCase();
+                    items = items.filter((item)=>item.displayName.toLowerCase().includes(searchLower));
+                }
+                const skip = options?.skip ?? 0;
+                const { paginatedItems, done } = paginate(items, skip, resourcePageSize, resourcePaginationEnabled);
+                console.log(`[ResourceManager] getNestedResources: resourceId=${resourceId}, skip=${skip}, returned=${paginatedItems.length}, done=${done}`);
+                return {
+                    items: paginatedItems,
+                    done
+                };
+            },
+            globalSearch: async (options)=>{
+                await new Promise((resolve)=>setTimeout(resolve, 300));
+                let allItems = [
+                    ...variableItems,
+                    ...fileItems
+                ];
+                const skip = options.skip ?? 0;
+                if (options.searchText) {
+                    const searchLower = options.searchText.toLowerCase();
+                    if (0 === skip) {
+                        const matchingTopLevel = topLevelItems.filter((item)=>item.displayName.toLowerCase().includes(searchLower));
+                        allItems = [
+                            ...matchingTopLevel,
+                            ...allItems
+                        ];
+                    }
+                    allItems = allItems.filter((item)=>item.displayName.toLowerCase().includes(searchLower));
+                }
+                const { paginatedItems, done } = paginate(allItems, skip, resourcePageSize, resourcePaginationEnabled);
+                console.log(`[ResourceManager] globalSearch: searchText="${options.searchText ?? ''}", skip=${skip}, returned=${paginatedItems.length}, done=${done}`);
+                return {
+                    items: paginatedItems,
+                    done
+                };
+            },
+            onResourceSelected: (item)=>{
+                console.log('Resource selected:', item.displayName);
+            }
+        };
+    }, [
+        resourcePaginationEnabled,
+        resourcePageSize
+    ]);
+    const createSettingsRenderer = useCallback(()=>(container)=>{
+            const settingsDiv = document.createElement('div');
+            settingsDiv.style.padding = '24px';
+            settingsDiv.style.color = 'var(--color-foreground)';
+            settingsDiv.innerHTML = `
+				<h2 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 600;">Chat Settings</h2>
+
+				<div style="margin-bottom: 24px;">
+					<h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 500;">Appearance</h3>
+					<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px;">
+						<input type="checkbox" id="darkMode" style="cursor: pointer;" />
+						<span>Dark Mode</span>
+					</label>
+					<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+						<input type="checkbox" id="compactMode" checked style="cursor: pointer;" />
+						<span>Compact Mode</span>
+					</label>
+				</div>
+
+				<div style="margin-bottom: 24px;">
+					<h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 500;">Behavior</h3>
+					<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px;">
+						<input type="checkbox" id="autoScroll" checked style="cursor: pointer;" />
+						<span>Auto-scroll to new messages</span>
+					</label>
+					<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+						<input type="checkbox" id="soundEnabled" style="cursor: pointer;" />
+						<span>Enable sound notifications</span>
+					</label>
+				</div>
+
+				<div style="margin-bottom: 24px;">
+					<h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 500;">Advanced</h3>
+					<label style="display: block; margin-bottom: 8px;">
+						<span style="display: block; margin-bottom: 4px;">Max Messages</span>
+						<input type="number" id="maxMessages" value="100" min="10" max="500"
+							style="padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-background); color: var(--color-foreground); width: 100px;" />
+					</label>
+					<label style="display: block;">
+						<span style="display: block; margin-bottom: 4px;">Response Delay (ms)</span>
+						<input type="number" id="responseDelay" value="0" min="0" max="5000" step="100"
+							style="padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-background); color: var(--color-foreground); width: 100px;" />
+					</label>
+				</div>
+
+				<div style="display: flex; gap: 12px;">
+					<button id="saveSettings" style="padding: 8px 16px; background: var(--color-primary); color: var(--color-foreground-on-accent); border: none; border-radius: 4px; cursor: pointer; font-weight: 500;">
+						Save Settings
+					</button>
+					<button id="resetSettings" style="padding: 8px 16px; background: transparent; color: var(--color-foreground); border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer;">
+						Reset to Defaults
+					</button>
+				</div>
+			`;
+            const darkModeCheckbox = settingsDiv.querySelector('#darkMode');
+            darkModeCheckbox?.addEventListener('change', (e)=>{
+                console.log('Dark mode:', e.target.checked);
+            });
+            const saveButton = settingsDiv.querySelector('#saveSettings');
+            saveButton?.addEventListener('click', ()=>{
+                console.log('Settings saved:', {
+                    darkMode: settingsDiv.querySelector('#darkMode').checked,
+                    compactMode: settingsDiv.querySelector('#compactMode').checked,
+                    autoScroll: settingsDiv.querySelector('#autoScroll').checked,
+                    soundEnabled: settingsDiv.querySelector('#soundEnabled').checked,
+                    maxMessages: settingsDiv.querySelector('#maxMessages').value,
+                    responseDelay: settingsDiv.querySelector('#responseDelay').value
+                });
+                console.log('Settings saved successfully!');
+            });
+            const resetButton = settingsDiv.querySelector('#resetSettings');
+            resetButton?.addEventListener('click', ()=>{
+                settingsDiv.querySelector('#darkMode').checked = false;
+                settingsDiv.querySelector('#compactMode').checked = true;
+                settingsDiv.querySelector('#autoScroll').checked = true;
+                settingsDiv.querySelector('#soundEnabled').checked = false;
+                settingsDiv.querySelector('#maxMessages').value = '100';
+                settingsDiv.querySelector('#responseDelay').value = '0';
+                console.log('Settings reset to defaults');
+            });
+            container.appendChild(settingsDiv);
+        }, []);
+    useEffect(()=>{
+        const service = AutopilotChatService.Instantiate({
+            instanceName,
+            config: {
+                mode: initialMode,
+                readOnly: features.readOnly,
+                disabledFeatures: {
+                    history: !features.history,
+                    settings: !features.settings,
+                    attachments: !features.attachments,
+                    audio: !features.audio,
+                    audioStreaming: !features.audioStreaming,
+                    htmlPreview: !features.htmlPreview,
+                    headerSeparator: !features.headerSeparator,
+                    fullHeight: !features.fullHeight,
+                    resize: !features.resize,
+                    close: !features.close,
+                    feedback: !features.feedback,
+                    copy: !features.copy
+                },
+                settingsRenderer: createSettingsRenderer()
+            }
+        });
+        setChatService(service);
+        const unsubscribes = [];
+        service.setModels([
+            {
+                id: 'gpt-4',
+                name: 'GPT-4',
+                description: 'Most capable model'
+            },
+            {
+                id: 'gpt-3.5',
+                name: 'GPT-3.5 Turbo',
+                description: 'Fast and efficient'
+            },
+            {
+                id: 'claude-3',
+                name: 'Claude 3',
+                description: 'Anthropic model'
+            }
+        ]);
+        service.setSelectedModel('gpt-4');
+        service.setAgentModes([
+            {
+                id: 'agent',
+                name: 'Agent',
+                description: 'AI-powered autonomous agent mode',
+                icon: 'smart_toy'
+            },
+            {
+                id: 'plan',
+                name: 'Plan',
+                description: 'Create and review execution plans',
+                icon: 'edit_note'
+            },
+            {
+                id: 'attended',
+                name: 'Attended',
+                description: 'Human assisted execution',
+                icon: 'play_arrow'
+            }
+        ]);
+        service.setAgentMode('agent');
+        service.setCustomHeaderActions([
+            {
+                id: 'export',
+                name: 'Export Chat',
+                icon: 'download'
+            },
+            {
+                id: 'share',
+                name: 'Share',
+                icon: 'share'
+            }
+        ]);
+        service.setSuggestions([
+            {
+                label: 'What can you do?',
+                prompt: 'What can you do?'
+            },
+            {
+                label: 'Show me an example',
+                prompt: 'Show me an example'
+            },
+            {
+                label: 'Help me with code',
+                prompt: 'Help me with code'
+            }
+        ]);
+        service.setDefaultLoadingMessages([
+            'Thinking...',
+            'Processing your request...',
+            'Analyzing...',
+            'Working on it...'
+        ]);
+        service.setResourceManager(createResourceManager());
+        unsubscribes.push(service.on(AutopilotChatEvent.Request, (data)=>{
+            console.log('Request sent:', data);
+        }));
+        unsubscribes.push(service.on(AutopilotChatEvent.ModeChange, (mode)=>{
+            console.log('Mode changed:', mode);
+        }));
+        unsubscribes.push(service.on(AutopilotChatEvent.SetSelectedModel, (model)=>{
+            console.log('Model changed:', model);
+            setSelectedModel(model.id || model);
+        }));
+        unsubscribes.push(service.on(AutopilotChatEvent.SetSelectedAgentMode, (mode)=>{
+            console.log('Agent mode changed:', mode);
+            setSelectedAgentMode(mode.id);
+        }));
+        unsubscribes.push(service.on(AutopilotChatEvent.ModeChange, (mode)=>{
+            console.log('Chat mode changed:', mode);
+            setChatMode(mode);
+        }));
+        unsubscribes.push(service.on('feedback', (data)=>{
+            const { isPositive, message } = data;
+            console.log(`Feedback: ${isPositive ? 'Positive' : 'Negative'}`, message);
+        }));
+        unsubscribes.push(service.on('copy', (message)=>{
+            console.log('Copy event:', message);
+        }));
+        unsubscribes.push(service.on('attachments', (attachments)=>{
+            console.log('Attachments:', attachments);
+        }));
+        unsubscribes.push(service.on('stopResponse', ()=>{
+            console.log('Stop response event');
+        }));
+        const fakeSttPhrases = [
+            'How do I schedule an unattended robot to run every weekday at 9 AM',
+            'Show me the last ten failed jobs and group them by process name',
+            'Can you walk me through setting up Document Understanding for invoices'
+        ];
+        let sttPhraseIndex = 0;
+        let sttDictationInterval = null;
+        unsubscribes.push(service.on(AutopilotChatEvent.SpeechToTextToggle, (isActive)=>{
+            console.log('[STT] toggle:', isActive);
+            if (isActive) {
+                const phrase = fakeSttPhrases[sttPhraseIndex % fakeSttPhrases.length] ?? '';
+                sttPhraseIndex++;
+                const words = phrase.split(' ');
+                let wordIndex = 0;
+                let transcript = '';
+                sttDictationInterval = setInterval(()=>{
+                    if (wordIndex < words.length) {
+                        transcript += (0 === wordIndex ? '' : ' ') + words[wordIndex];
+                        service.setPrompt(transcript);
+                        wordIndex++;
+                    } else if (sttDictationInterval) {
+                        clearInterval(sttDictationInterval);
+                        sttDictationInterval = null;
+                    }
+                }, 150);
+            } else if (sttDictationInterval) {
+                clearInterval(sttDictationInterval);
+                sttDictationInterval = null;
+            }
+        }));
+        unsubscribes.push(()=>{
+            if (sttDictationInterval) {
+                clearInterval(sttDictationInterval);
+                sttDictationInterval = null;
+            }
+        });
+        const fakeVoiceUserTurns = [
+            'How do I debug a workflow in UiPath Studio?',
+            'Can you suggest a retry strategy for flaky selectors?',
+            'What is the difference between Attended and Unattended automations?'
+        ];
+        const fakeVoiceAssistantReplies = [
+            'Start by enabling **Debug mode** in UiPath Studio and setting breakpoints on the activities you want to inspect. Use **Step Into** to walk through each action, and open the **Locals** panel to watch variables change.',
+            'Wrap the click/type activity in a **Retry Scope** with 3-5 attempts and a short delay (500ms-2s). Pair it with a **Check App State** condition so the retry fires only when the expected element is missing.',
+            "**Attended** automations run on a user's machine alongside them. **Unattended** automations run on dedicated VMs without any user present; they're scheduled or queue-driven and scale across a robot fleet."
+        ];
+        let voiceTurnIndex = 0;
+        let voicePendingTimeouts = [];
+        let voicePendingInterval = null;
+        let voiceActiveStreamId = null;
+        const clearVoicePending = ()=>{
+            for (const id of voicePendingTimeouts)clearTimeout(id);
+            voicePendingTimeouts = [];
+            if (voicePendingInterval) {
+                clearInterval(voicePendingInterval);
+                voicePendingInterval = null;
+            }
+        };
+        unsubscribes.push(service.on(AutopilotChatEvent.InputStream, (event)=>{
+            const ev = event;
+            if (ev.activityStart) {
+                console.log('[voice] activityStart', ev.activityStart);
+                const userContent = fakeVoiceUserTurns[voiceTurnIndex % fakeVoiceUserTurns.length] ?? '';
+                const assistantContent = fakeVoiceAssistantReplies[voiceTurnIndex % fakeVoiceAssistantReplies.length] ?? '';
+                voiceTurnIndex++;
+                voiceActiveStreamId = `voice-stream-${voiceTurnIndex}`;
+                voicePendingTimeouts.push(setTimeout(()=>{
+                    service.sendRequest({
+                        content: userContent
+                    });
+                    voicePendingTimeouts.push(setTimeout(()=>{
+                        const words = assistantContent.split(' ');
+                        const streamId = voiceActiveStreamId ?? void 0;
+                        let wordIndex = 0;
+                        voicePendingInterval = setInterval(()=>{
+                            if (wordIndex < words.length) {
+                                service.sendResponse({
+                                    id: streamId,
+                                    content: (words[wordIndex] ?? '') + (wordIndex < words.length - 1 ? ' ' : ''),
+                                    stream: true,
+                                    created_at: new Date().toISOString(),
+                                    widget: 'apollo-markdown-renderer'
+                                });
+                                wordIndex++;
+                            } else {
+                                if (voicePendingInterval) {
+                                    clearInterval(voicePendingInterval);
+                                    voicePendingInterval = null;
+                                }
+                                service.sendResponse({
+                                    id: streamId,
+                                    content: '',
+                                    stream: true,
+                                    done: true,
+                                    created_at: new Date().toISOString(),
+                                    widget: 'apollo-markdown-renderer'
+                                });
+                            }
+                        }, 80);
+                    }, 400));
+                }, 600));
+            }
+            if (ev.mediaChunks) console.log('[voice] mediaChunks', ev.mediaChunks.length);
+            if (ev.activityEnd) {
+                console.log('[voice] activityEnd', ev.activityEnd);
+                const wasStreaming = null !== voicePendingInterval;
+                clearVoicePending();
+                if (wasStreaming && voiceActiveStreamId) service.sendResponse({
+                    id: voiceActiveStreamId,
+                    content: '',
+                    stream: true,
+                    done: true,
+                    created_at: new Date().toISOString(),
+                    widget: 'apollo-markdown-renderer'
+                });
+                voiceActiveStreamId = null;
+            }
+        }));
+        unsubscribes.push(()=>clearVoicePending());
+        unsubscribes.push(service.on('customHeaderActionClicked', (action)=>{
+            const actionData = action;
+            console.log('Custom header action clicked:', actionData);
+            let responseContent = '';
+            switch(actionData.id){
+                case 'export-pdf':
+                    responseContent = '📄 **Exporting as PDF...**\n\nYour conversation has been exported to a PDF file.';
+                    break;
+                case 'export-docx':
+                    responseContent = '📝 **Exporting as DOCX...**\n\nYour conversation has been exported to a Word document.';
+                    break;
+                case 'export-json':
+                    responseContent = '💾 **Exporting as JSON...**\n\nYour conversation has been exported as JSON data.';
+                    break;
+                case 'export-txt':
+                    responseContent = '📋 **Exporting as Text...**\n\nYour conversation has been exported as plain text.';
+                    break;
+                case 'share':
+                    responseContent = '🔗 **Share Conversation**\n\nA shareable link has been generated:\n`https://example.com/chat/abc123`';
+                    break;
+                case 'translate-es':
+                    responseContent = '🇪🇸 **Traduciendo al español...**\n\nSu conversación ha sido traducida al español.';
+                    break;
+                case 'translate-fr':
+                    responseContent = '🇫🇷 **Traduction en français...**\n\nVotre conversation a été traduite en français.';
+                    break;
+                case 'translate-de':
+                    responseContent = '🇩🇪 **Übersetzung ins Deutsche...**\n\nIhre Unterhaltung wurde ins Deutsche übersetzt.';
+                    break;
+                case 'translate-ja':
+                    responseContent = '🇯🇵 **日本語に翻訳中...**\n\n会話が日本語に翻訳されました。';
+                    break;
+                case 'translate-zh':
+                    responseContent = '🇨🇳 **正在翻译成中文...**\n\n您的对话已翻译成中文。';
+                    break;
+                case 'print':
+                    responseContent = '🖨️ **Print Conversation**\n\nPreparing conversation for printing...';
+                    break;
+                default:
+                    responseContent = `✅ Action triggered: **${actionData.name}** (ID: ${actionData.id})`;
+            }
+            service.sendResponse({
+                content: responseContent,
+                groupId: `custom-action-${actionData.id}`,
+                created_at: '22-10-2025',
+                widget: 'apollo-markdown-renderer'
+            });
+        }));
+        return ()=>{
+            for (const unsubscribe of unsubscribes)unsubscribe();
+            service.close();
+        };
+    }, [
+        instanceName,
+        initialMode,
+        createResourceManager,
+        createSettingsRenderer,
+        features.attachments,
+        features.audio,
+        features.audioStreaming,
+        features.close,
+        features.copy,
+        features.feedback,
+        features.fullHeight,
+        features.headerSeparator,
+        features.history,
+        features.htmlPreview,
+        features.resize,
+        features.settings,
+        features.readOnly
+    ]);
+    useEffect(()=>{
+        if (chatService && chatMode === AutopilotChatMode.Embedded && embeddedContainerRef.current) chatService.patchConfig({
+            mode: AutopilotChatMode.Embedded,
+            embeddedContainer: embeddedContainerRef.current
+        });
+    }, [
+        chatService,
+        chatMode
+    ]);
+    useEffect(()=>{
+        if (chatService) {
+            chatService.initialize({
+                mode: chatMode,
+                readOnly: features.readOnly,
+                disabledFeatures: {
+                    history: !features.history,
+                    settings: !features.settings,
+                    attachments: !features.attachments,
+                    audio: !features.audio,
+                    audioStreaming: !features.audioStreaming,
+                    htmlPreview: !features.htmlPreview,
+                    headerSeparator: !features.headerSeparator,
+                    fullHeight: !features.fullHeight,
+                    resize: !features.resize,
+                    close: !features.close,
+                    feedback: !features.feedback,
+                    copy: !features.copy
+                },
+                settingsRenderer: createSettingsRenderer(),
+                ...chatMode === AutopilotChatMode.Embedded && embeddedContainerRef.current && {
+                    embeddedContainer: embeddedContainerRef.current
+                }
+            });
+            if (features.model) {
+                chatService.setModels([
+                    {
+                        id: 'gpt-4',
+                        name: 'GPT-4',
+                        description: 'Most capable model'
+                    },
+                    {
+                        id: 'gpt-3.5',
+                        name: 'GPT-3.5 Turbo',
+                        description: 'Fast and efficient'
+                    },
+                    {
+                        id: 'claude-3',
+                        name: 'Claude 3',
+                        description: 'Anthropic model'
+                    }
+                ]);
+                chatService.setSelectedModel(selectedModel);
+            } else chatService.setModels([]);
+            if (features.agentMode) {
+                chatService.setAgentModes([
+                    {
+                        id: 'agent',
+                        name: 'Agent',
+                        description: 'AI-powered autonomous agent mode',
+                        icon: 'smart_toy'
+                    },
+                    {
+                        id: 'plan',
+                        name: 'Plan',
+                        description: 'Create and review execution plans',
+                        icon: 'edit_note'
+                    },
+                    {
+                        id: 'attended',
+                        name: 'Attended',
+                        description: 'Human assisted execution',
+                        icon: 'play_arrow'
+                    }
+                ]);
+                chatService.setAgentMode(selectedAgentMode);
+            } else chatService.setAgentModes([]);
+            chatService.patchConfig({
+                paginatedMessages: features.paginatedMessages,
+                paginatedResources: resourcePaginationEnabled,
+                spacing: {
+                    compactMode: features.compactMode,
+                    ...features.compactMode ? {} : {
+                        primaryFontToken,
+                        promptBox: {
+                            minRows: promptBoxMinRows,
+                            maxRows: promptBoxMaxRows
+                        }
+                    }
+                },
+                theming: {
+                    scrollBar: features.customScrollTheme ? {
+                        scrollThumbColor: '#000000',
+                        scrollSize: '16px',
+                        scrollHoverColor: '#888888',
+                        scrollBorderRadius: '8px'
+                    } : void 0
+                }
+            });
+            if (features.attachmentsAsync) chatService.on('setAttachments', (attachments)=>{
+                const attachmentsData = attachments;
+                chatService.setAttachmentsLoading([
+                    ...attachmentsData.added.map((attachment)=>({
+                            ...attachment,
+                            loading: true
+                        }))
+                ]);
+                setTimeout(()=>{
+                    chatService.setAttachmentsLoading([
+                        ...attachmentsData.added.map((attachment)=>({
+                                ...attachment,
+                                loading: false
+                            }))
+                    ]);
+                }, 2000);
+            });
+            else chatService.setAttachmentsLoading([]);
+        }
+    }, [
+        features,
+        chatService,
+        selectedModel,
+        selectedAgentMode,
+        createSettingsRenderer,
+        chatMode,
+        primaryFontToken,
+        promptBoxMinRows,
+        promptBoxMaxRows,
+        resourcePaginationEnabled
+    ]);
+    const openChat = ()=>chatService?.open();
+    const closeChat = ()=>chatService?.close();
+    const setFullScreen = ()=>{
+        chatService?.setChatMode(AutopilotChatMode.FullScreen);
+        setChatMode(AutopilotChatMode.FullScreen);
+    };
+    const setSideBySide = ()=>{
+        chatService?.setChatMode(AutopilotChatMode.SideBySide);
+        setChatMode(AutopilotChatMode.SideBySide);
+    };
+    const setEmbedded = ()=>{
+        setChatMode(AutopilotChatMode.Embedded);
+        chatService?.setChatMode(AutopilotChatMode.Embedded);
+    };
+    const sendSimpleRequest = ()=>{
+        chatService?.sendRequest({
+            content: customMessage
+        });
+    };
+    const sendSimpleResponse = ()=>{
+        chatService?.sendResponse({
+            content: customMessage,
+            created_at: '22-10-2025',
+            widget: 'apollo-markdown-renderer',
+            shouldWaitForMoreMessages: waitForMore
+        });
+    };
+    const sendResponseWithActions = ()=>{
+        chatService?.sendResponse({
+            content: 'Here is a response with custom actions. Try the buttons below!',
+            created_at: '22-10-2025',
+            widget: 'apollo-markdown-renderer',
+            actions: [
+                {
+                    name: 'copy-action',
+                    label: 'Copy to Clipboard',
+                    icon: 'content_copy',
+                    eventName: 'copy-custom'
+                },
+                {
+                    name: 'regenerate-action',
+                    label: 'Regenerate',
+                    icon: 'refresh',
+                    eventName: 'regenerate-custom'
+                }
+            ]
+        });
+        chatService?.on('copy-custom', ()=>{
+            navigator.clipboard.writeText('Response copied!');
+            console.log('Copied to clipboard!');
+        });
+        chatService?.on('regenerate-custom', ()=>{
+            console.log('Regenerating response...');
+        });
+    };
+    const sendResponseWithCitations = ()=>{
+        chatService?.sendResponse({
+            content: 'According to research, the sky is blue due to Rayleigh scattering. See references below for more information.',
+            widget: 'default',
+            contentParts: [
+                {
+                    text: 'According to research, the sky is blue due to Rayleigh scattering. ',
+                    citations: [
+                        {
+                            id: 1,
+                            title: 'Why is the Sky Blue?',
+                            url: 'https://example.com/sky'
+                        }
+                    ]
+                },
+                {
+                    text: 'See references below for more information.',
+                    citations: [
+                        {
+                            id: 2,
+                            title: 'Atmospheric Science',
+                            url: 'https://example.com/atmosphere'
+                        }
+                    ]
+                }
+            ]
+        });
+    };
+    const sendStreamingResponse = ()=>{
+        chatService?.sendResponse({
+            content: streamingText,
+            fakeStream: true,
+            shouldWaitForMoreMessages: waitForMore
+        });
+    };
+    const sendCodeBlock = ()=>{
+        const codeContent = `\`\`\`typescript
+// This is a long comment line that should wrap properly when displayed in the code block to test the wrapping functionality
+interface UserProfile {
+  id: number;
+  username: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  createdAt: Date;
+  updatedAt: Date;
+  preferences: { theme: 'light' | 'dark'; language: string; notifications: boolean };
+}
+
+function processUserData(user: UserProfile, additionalMetadata: Record<string, unknown>): string {
+  const fullName = \`\${user.firstName} \${user.lastName}\`;
+  const metadataString = JSON.stringify(additionalMetadata, null, 2);
+
+  return \`User: \${fullName} (\${user.email}) - Created: \${user.createdAt.toISOString()} - Metadata: \${metadataString}\`;
+}
+
+const exampleUser: UserProfile = {
+  id: 12345,
+  username: 'john_doe_with_a_very_long_username_that_should_test_wrapping',
+  email: 'john.doe.with.a.very.long.email.address@example-domain-name.com',
+  firstName: 'John',
+  lastName: 'Doe',
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  preferences: { theme: 'dark', language: 'en-US', notifications: true }
+};
+
+console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.1', userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' }));
+\`\`\``;
+        chatService?.sendResponse({
+            content: `Here's a TypeScript example with long lines to test wrapping:\n\n${codeContent}`,
+            widget: 'default'
+        });
+    };
+    const sendHTMLPreview = ()=>{
+        const htmlContent = `\`\`\`html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello World</title>
+  <style>
+    body { font-family: Arial; text-align: center; padding: 50px; }
+    h1 { color: #fa4616; }
+  </style>
+</head>
+<body>
+  <h1>Hello, World!</h1>
+  <p>This is an HTML preview example.</p>
+</body>
+</html>
+\`\`\``;
+        chatService?.sendResponse({
+            content: `Here's an HTML example with live preview:\n\n${htmlContent}`,
+            widget: 'default'
+        });
+    };
+    const showLoading = ()=>{
+        chatService?.setLoadingMessage(loadingMessage);
+    };
+    const hideLoading = ()=>{
+        chatService?.setLoadingMessage('');
+    };
+    const showError = ()=>{
+        chatService?.setError(errorMessage);
+    };
+    const showWarning = ()=>{
+        chatService?.setError('This is a warning message.');
+    };
+    const clearErrors = ()=>{
+        chatService?.clearError();
+    };
+    const toggleHistory = ()=>{
+        chatService?.toggleHistory();
+    };
+    const addHistoryItems = ()=>{
+        chatService?.setHistory([
+            {
+                id: '1',
+                name: 'Previous Conversation 1',
+                timestamp: new Date(Date.now() - 86400000).toISOString()
+            },
+            {
+                id: '2',
+                name: 'Previous Conversation 2',
+                timestamp: new Date(Date.now() - 172800000).toISOString()
+            },
+            {
+                id: '3',
+                name: 'Previous Conversation 3',
+                timestamp: new Date(Date.now() - 259200000).toISOString()
+            }
+        ]);
+    };
+    const clearChat = ()=>{
+        chatService?.newChat();
+    };
+    const toggleFeature = (feature)=>{
+        setFeatures((prev)=>({
+                ...prev,
+                [feature]: !prev[feature]
+            }));
+    };
+    const setPrompt = ()=>{
+        chatService?.setPrompt('I need something to be done');
+    };
+    const resetPrompt = ()=>{
+        chatService?.setPrompt('');
+    };
+    const stopResponse = ()=>{
+        chatService?.stopResponse();
+    };
+    const toggleAutoScroll = ()=>{
+        const newValue = !autoScroll;
+        setAutoScroll(newValue);
+        chatService?.toggleAutoScroll(newValue);
+    };
+    const setAllowedAttachments = ()=>{
+        chatService?.setAllowedAttachments({
+            types: {
+                'text/csv': [
+                    '.csv'
+                ]
+            },
+            maxSize: 1048576,
+            multiple: false
+        });
+        console.log('Allowed attachments set to: CSV files only, max 1MB');
+    };
+    const setFirstRunExperience = ()=>{
+        chatService?.setFirstRunExperience({
+            title: 'Welcome to UiPath Autopilot',
+            description: "I'm here to help you build, understand, and troubleshoot your automation projects.",
+            suggestions: [
+                {
+                    label: 'New process',
+                    prompt: 'Can you provide a detailed step-by-step guide on how to create a new automation process?'
+                },
+                {
+                    label: 'Debug workflow',
+                    prompt: "I'm having trouble with my workflow execution. Can you explain debugging techniques?"
+                },
+                {
+                    label: 'Studio updates',
+                    prompt: 'What are the latest features in UiPath Studio?'
+                }
+            ]
+        });
+    };
+    const setConversation = ()=>{
+        chatService?.setConversation([
+            {
+                id: '1',
+                role: AutopilotChatRole.User,
+                content: 'How do I create a workflow that extracts data from invoices?',
+                created_at: '22-10-2022',
+                widget: ''
+            },
+            {
+                id: '2',
+                role: AutopilotChatRole.Assistant,
+                content: 'To extract data from invoices, you can use UiPath Document Understanding. Here\'s a step-by-step approach:\n\n1. Install the Document Understanding package\n2. Create a new workflow and add the "Digitize Document" activity\n3. Configure it to use ML skills\n4. Use the "Data Extraction" activity\n5. Validate the extracted data',
+                created_at: '23-10-2022',
+                widget: ''
+            }
+        ]);
+    };
+    const setSuggestions = ()=>{
+        chatService?.setSuggestions([
+            {
+                label: 'What can you do?',
+                prompt: 'What can you do?'
+            },
+            {
+                label: 'Show me an example',
+                prompt: 'Show me an example'
+            },
+            {
+                label: 'Help me with code',
+                prompt: 'Help me with code'
+            }
+        ], true);
+    };
+    const sendToolCall = ()=>{
+        chatService?.sendResponse({
+            content: 'Tool call response',
+            widget: 'apollo-agents-tool-call',
+            meta: {
+                input: {
+                    provider: 'GoogleCustomSearch',
+                    query: 'most interesting scientific fact discovered recently 2025',
+                    num: 5
+                },
+                output: {
+                    results: [
+                        {
+                            snippet: 'Breaking science news and articles...',
+                            title: 'ScienceDaily: Latest Research News',
+                            url: 'https://www.sciencedaily.com/'
+                        }
+                    ]
+                },
+                isError: false,
+                startTime: new Date().toISOString(),
+                endTime: new Date().toISOString(),
+                toolName: 'Web_Search'
+            }
+        });
+    };
+    const sendResponseDisabledActions = ()=>{
+        chatService?.sendResponse({
+            content: 'Message with no actions',
+            disableActions: true
+        });
+    };
+    const setPreHook = ()=>{
+        const actions = [
+            'new-chat',
+            'toggle-history',
+            'toggle-chat',
+            'close-chat',
+            'feedback'
+        ];
+        actions.forEach((action)=>{
+            chatService?.setPreHook(action, async ()=>window.confirm(`${action} pre hook. Continue?`));
+        });
+        console.log('Pre-hooks set for all actions');
+    };
+    const setCustomHeaderActions = ()=>{
+        chatService?.setCustomHeaderActions([
+            {
+                id: 'export',
+                name: 'Export',
+                icon: 'download',
+                description: 'Export conversation in various formats',
+                children: [
+                    {
+                        id: 'export-pdf',
+                        name: 'Export as PDF',
+                        icon: 'picture_as_pdf',
+                        description: 'Download conversation as PDF file'
+                    },
+                    {
+                        id: 'export-docx',
+                        name: 'Export as DOCX',
+                        icon: "description",
+                        description: 'Download conversation as Word document'
+                    },
+                    {
+                        id: 'export-json',
+                        name: 'Export as JSON',
+                        icon: 'data_object',
+                        description: 'Download conversation as JSON file'
+                    },
+                    {
+                        id: 'export-txt',
+                        name: 'Export as Text',
+                        icon: 'text_snippet',
+                        description: 'Download conversation as plain text'
+                    }
+                ]
+            },
+            {
+                id: 'share',
+                name: 'Share Conversation',
+                icon: 'share',
+                description: 'Share this conversation with others'
+            },
+            {
+                id: 'translate',
+                name: 'Translate',
+                icon: 'translate',
+                description: 'Translate conversation to different languages',
+                children: [
+                    {
+                        id: 'translate-es',
+                        name: 'Spanish',
+                        icon: 'language',
+                        description: 'Translate to Spanish'
+                    },
+                    {
+                        id: 'translate-fr',
+                        name: 'French',
+                        icon: 'language',
+                        description: 'Translate to French'
+                    },
+                    {
+                        id: 'translate-de',
+                        name: 'German',
+                        icon: 'language',
+                        description: 'Translate to German'
+                    },
+                    {
+                        id: 'translate-ja',
+                        name: 'Japanese',
+                        icon: 'language',
+                        description: 'Translate to Japanese'
+                    },
+                    {
+                        id: 'translate-zh',
+                        name: 'Chinese',
+                        icon: 'language',
+                        description: 'Translate to Chinese'
+                    }
+                ]
+            },
+            {
+                id: 'print',
+                name: 'Print',
+                icon: 'print',
+                description: 'Print conversation'
+            },
+            {
+                id: 'advanced',
+                name: 'Advanced Settings',
+                icon: 'tune',
+                description: 'Advanced configuration options',
+                disabled: true
+            }
+        ]);
+        console.log('Custom header actions set');
+    };
+    const clearCustomHeaderActions = ()=>{
+        chatService?.setCustomHeaderActions([]);
+        console.log('Custom header actions cleared');
+    };
+    const setResourceManager = ()=>{
+        chatService?.setResourceManager(createResourceManager());
+        console.log('Resource manager set');
+    };
+    const clearResourceManager = ()=>{
+        chatService?.setResourceManager(null);
+        console.log('Resource manager cleared');
+    };
+    useEffect(()=>{
+        if (chatService) {
+            chatService.setResourceManager(createResourceManager());
+            console.log(`Resource manager updated: pagination=${resourcePaginationEnabled}, pageSize=${resourcePageSize}`);
+        }
+    }, [
+        chatService,
+        createResourceManager,
+        resourcePaginationEnabled,
+        resourcePageSize
+    ]);
+    const sendResponseWithVariables = ()=>{
+        chatService?.sendResponse({
+            content: 'I will update [[resource-token:{"id":"var-email","type":"variable","icon":"mail","displayName":"email"}]] and [[resource-token:{"id":"var-long","type":"variable","icon":"data_object","displayName":"this_is_a_very_long_variable_name_that_should_test_truncation"}]] in the system, then notify [[resource-token:{"id":"var-username","type":"variable","icon":"person","displayName":"username"}]] when complete.',
+            created_at: '02-02-2026',
+            widget: 'default'
+        });
+        console.log('Sent response with resource tokens');
+    };
+    const streamWithResourceTokens = ()=>{
+        const messageId = `streaming-resources-${Date.now()}`;
+        let chunkIndex = 0;
+        const chunks = [
+            'I will update the ',
+            '[[resource-token:',
+            '{"id":"var-',
+            'email","type":"variable",',
+            '"icon":"mail","displayName":"email"}]]',
+            ' variable in the system.\n\n',
+            "Then I'll notify ",
+            '[[resource-token:{',
+            '"id":"var-username",',
+            '"type":"variable","icon":"person",',
+            '"displayName":"username"}]]',
+            ' when the process is complete.\n\n',
+            "I'll also update ",
+            '[[resource-token:{',
+            '"id":"var-long","type":"variable",',
+            '"icon":"data_object","displayName":',
+            '"this_is_a_very_long_variable_name_that_should_test_truncation"}]]',
+            ' for testing.\n\n',
+            "Finally, I'll log the result to ",
+            '[[resource-token:{"id":"var-log","type":"variable","icon":"description","displayName":"activity_log"}]]',
+            '.'
+        ];
+        const streamChunk = ()=>{
+            if (chunkIndex >= chunks.length) return;
+            const chunk = chunks[chunkIndex] ?? '';
+            const isDone = chunkIndex === chunks.length - 1;
+            chatService?.sendResponse({
+                id: messageId,
+                content: chunk,
+                stream: true,
+                done: isDone,
+                created_at: '02-02-2026',
+                widget: 'default'
+            });
+            const preview = chunk.slice(0, 30);
+            const suffix = chunk.length > 30 ? '...' : '';
+            console.log(`[StreamWithResourceTokens] Chunk ${chunkIndex + 1}/${chunks.length}: "${preview}${suffix}" (done: ${isDone})`);
+            chunkIndex++;
+            if (!isDone) setTimeout(streamChunk, 150);
+        };
+        streamChunk();
+    };
+    const streamWithCitations = ()=>{
+        const messageId = `streaming-citations-${Date.now()}`;
+        let streamIndex = 0;
+        const streamingParts = [
+            {
+                index: 0,
+                text: 'Based on the search results'
+            },
+            {
+                index: 0,
+                text: ", I'll"
+            },
+            {
+                index: 0,
+                text: ' create a comprehensive'
+            },
+            {
+                index: 0,
+                text: ' summary about UiPath with'
+            },
+            {
+                index: 0,
+                text: ' citations:\n\n##'
+            },
+            {
+                index: 0,
+                text: ' Company Background'
+            },
+            {
+                index: 0,
+                text: '\n- '
+            },
+            {
+                index: 1,
+                text: '**UiPath Inc**'
+            },
+            {
+                index: 1,
+                text: '. is a global'
+            },
+            {
+                index: 1,
+                text: ' software company that was'
+            },
+            {
+                index: 1,
+                text: ' founded in '
+            },
+            {
+                index: 1,
+                text: '_Bucharest, Romania_'
+            },
+            {
+                index: 1,
+                text: ', by'
+            },
+            {
+                index: 1,
+                text: ' **Daniel Dines**'
+            },
+            {
+                index: 1,
+                text: '',
+                citation: {
+                    id: 1,
+                    title: 'UiPath - Wikipedia',
+                    url: 'https://en.wikipedia.org/wiki/UiPath'
+                }
+            },
+            {
+                index: 2,
+                text: '. '
+            },
+            {
+                index: 3,
+                text: 'The'
+            },
+            {
+                index: 3,
+                text: ' company starte'
+            },
+            {
+                index: 3,
+                text: 'd its journey'
+            },
+            {
+                index: 3,
+                text: ' in 2005'
+            },
+            {
+                index: 3,
+                text: ' and has'
+            },
+            {
+                index: 3,
+                text: ' grown to become a leading'
+            },
+            {
+                index: 3,
+                text: ' enterprise automation software ven'
+            },
+            {
+                index: 3,
+                text: 'dor',
+                citation: {
+                    id: 1,
+                    title: 'UiPath - Wikipedia',
+                    url: 'https://en.wikipedia.org/wiki/UiPath'
+                }
+            },
+            {
+                index: 3,
+                text: '',
+                citation: {
+                    id: 2,
+                    title: 'UiPath, Inc. (PATH)',
+                    url: 'https://ir.uipath.com/'
+                }
+            },
+            {
+                index: 4,
+                text: '. \n\n## Core'
+            },
+            {
+                index: 4,
+                text: ' Business'
+            },
+            {
+                index: 4,
+                text: '\nU'
+            },
+            {
+                index: 4,
+                text: 'iPath special'
+            },
+            {
+                index: 4,
+                text: 'izes in several'
+            },
+            {
+                index: 4,
+                text: ' key areas:\n\n1'
+            },
+            {
+                index: 4,
+                text: '. **Rob'
+            },
+            {
+                index: 4,
+                text: 'otic Process Automation'
+            },
+            {
+                index: 4,
+                text: ':**'
+            },
+            {
+                index: 4,
+                text: '\n'
+            },
+            {
+                index: 5,
+                text: 'R'
+            },
+            {
+                index: 5,
+                text: 'PA has'
+            },
+            {
+                index: 5,
+                text: ' revolutionized how work'
+            },
+            {
+                index: 5,
+                text: ' gets done globally'
+            },
+            {
+                index: 5,
+                text: ' by eliminating time'
+            },
+            {
+                index: 5,
+                text: '-consuming, repet'
+            },
+            {
+                index: 5,
+                text: 'itive tasks from employees'
+            },
+            {
+                index: 5,
+                text: "' worklo"
+            },
+            {
+                index: 5,
+                text: 'ads',
+                citation: {
+                    id: 3,
+                    title: 'Discovery Phase Guide',
+                    download_url: 'https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf',
+                    page_number: 2
+                }
+            },
+            {
+                index: 6,
+                text: '.'
+            },
+            {
+                index: 6,
+                text: '\n\n2. **'
+            },
+            {
+                index: 6,
+                text: 'Business Automation Platform**'
+            },
+            {
+                index: 6,
+                text: '\n'
+            },
+            {
+                index: 7,
+                text: 'The platform'
+            },
+            {
+                index: 7,
+                text: ' offers en'
+            },
+            {
+                index: 7,
+                text: 'd-to-en'
+            },
+            {
+                index: 7,
+                text: 'd process transformation'
+            },
+            {
+                index: 7,
+                text: ' capabilities on'
+            },
+            {
+                index: 7,
+                text: ' a single platform,'
+            },
+            {
+                index: 7,
+                text: ' featuring fully'
+            },
+            {
+                index: 7,
+                text: ' governed agentic'
+            },
+            {
+                index: 7,
+                text: ' automation that integ'
+            },
+            {
+                index: 7,
+                text: 'rates with existing systems'
+            },
+            {
+                index: 7,
+                text: '',
+                citation: {
+                    id: 4,
+                    title: 'UiPath Business Automation Platform | UiPath',
+                    url: 'https://www.uipath.com/product'
+                }
+            }
+        ];
+        const streamChunk = ()=>{
+            if (streamIndex >= streamingParts.length) return;
+            const chunk = streamingParts[streamIndex];
+            if (!chunk) return;
+            chatService?.sendResponse({
+                id: messageId,
+                contentPartChunk: {
+                    index: chunk.index,
+                    text: chunk.text,
+                    ...chunk.citation && {
+                        citation: chunk.citation
+                    }
+                },
+                stream: true,
+                done: streamIndex === streamingParts.length - 1
+            });
+            streamIndex++;
+            if (streamIndex < streamingParts.length) setTimeout(streamChunk, 100);
+        };
+        streamChunk();
+    };
+    const handleAgentModeChange = (mode)=>{
+        setSelectedAgentMode(mode);
+        chatService?.setAgentMode(mode);
+    };
+    const handleModelChange = (modelId)=>{
+        setSelectedModel(modelId);
+        chatService?.setSelectedModel(modelId);
+    };
+    return /*#__PURE__*/ jsxs(Box, {
+        sx: {
+            display: 'flex',
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Box, {
+                sx: {
+                    display: chatMode === AutopilotChatMode.FullScreen ? 'none' : 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    gap: 1,
+                    maxHeight: '100vh',
+                    overflowY: 'auto',
+                    p: '16px 0 0 16px',
+                    boxSizing: 'border-box'
+                },
+                children: [
+                    /*#__PURE__*/ jsx(ApTypography, {
+                        variant: FontVariantToken.fontSizeH3Bold,
+                        component: "h2",
+                        sx: {
+                            mb: 3
+                        },
+                        children: "ApChat Showcase"
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Chat Mode Controls"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        primary: true,
+                                        onClick: openChat,
+                                        children: "Open Chat"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: closeChat,
+                                        children: "Close Chat"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setSideBySide,
+                                        children: "Side by Side"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setFullScreen,
+                                        children: "Full Screen"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setEmbedded,
+                                        children: "Embedded"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: toggleAutoScroll,
+                                        children: "Toggle Auto Scroll"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: clearChat,
+                                        children: "Clear Chat"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Chat Setup"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setAllowedAttachments,
+                                        children: "Set Allowed Attachments"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setPreHook,
+                                        children: "Set Pre Hook"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ButtonGroup, {
+                                children: /*#__PURE__*/ jsx(DemoButton, {
+                                    onClick: setFirstRunExperience,
+                                    children: "Set First Run Experience"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Custom Header Actions"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setCustomHeaderActions,
+                                        children: "Set Custom Header Actions"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: clearCustomHeaderActions,
+                                        children: "Clear Custom Header Actions"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Resource Manager"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setResourceManager,
+                                        children: "Set Resource Manager"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: clearResourceManager,
+                                        children: "Clear Resource Manager"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: resourcePaginationEnabled,
+                                    onChange: ()=>setResourcePaginationEnabled(!resourcePaginationEnabled)
+                                }),
+                                label: "Enable Pagination (50 vars, 30 files)"
+                            }),
+                            /*#__PURE__*/ jsxs(InfoText, {
+                                style: {
+                                    marginTop: 8
+                                },
+                                children: [
+                                    "Page Size: ",
+                                    resourcePageSize
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DemoInput, {
+                                type: "number",
+                                min: 1,
+                                max: 20,
+                                value: resourcePageSize,
+                                onChange: (e)=>setResourcePageSize(Number(e.target.value)),
+                                style: {
+                                    width: 80
+                                }
+                            }),
+                            /*#__PURE__*/ jsx(InfoText, {
+                                children: "Type @ in the chat input to trigger the picker. Test keyboard navigation (↑/↓), selection (Enter/Tab), and escape behavior."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Model Selection"
+                            }),
+                            /*#__PURE__*/ jsxs(DemoSelect, {
+                                value: selectedModel,
+                                onChange: (e)=>handleModelChange(e.target.value),
+                                children: [
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: "gpt-4",
+                                        children: "GPT-4"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: "gpt-3.5",
+                                        children: "GPT-3.5 Turbo"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: "claude-3",
+                                        children: "Claude 3"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Agent Mode"
+                            }),
+                            /*#__PURE__*/ jsxs(DemoSelect, {
+                                value: selectedAgentMode,
+                                onChange: (e)=>handleAgentModeChange(e.target.value),
+                                children: [
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: "agent",
+                                        children: "Agent"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: "plan",
+                                        children: "Plan"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: "attended",
+                                        children: "Attended"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Input Styling"
+                            }),
+                            /*#__PURE__*/ jsx(InfoText, {
+                                children: "Primary Font Token"
+                            }),
+                            /*#__PURE__*/ jsxs(DemoSelect, {
+                                value: primaryFontToken,
+                                onChange: (e)=>setPrimaryFontToken(e.target.value),
+                                children: [
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: FontVariantToken.fontSizeXs,
+                                        children: "XS (fontSizeXs)"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: FontVariantToken.fontSizeS,
+                                        children: "S (fontSizeS)"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: FontVariantToken.fontSizeM,
+                                        children: "M (fontSizeM)"
+                                    }),
+                                    /*#__PURE__*/ jsx("option", {
+                                        value: FontVariantToken.fontSizeL,
+                                        children: "L (fontSizeL)"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(InfoText, {
+                                style: {
+                                    marginTop: 12
+                                },
+                                children: [
+                                    "Prompt Box Min Rows: ",
+                                    promptBoxMinRows
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DemoInput, {
+                                type: "number",
+                                min: 1,
+                                max: 10,
+                                value: promptBoxMinRows,
+                                onChange: (e)=>setPromptBoxMinRows(Number(e.target.value))
+                            }),
+                            /*#__PURE__*/ jsxs(InfoText, {
+                                style: {
+                                    marginTop: 12
+                                },
+                                children: [
+                                    "Prompt Box Max Rows: ",
+                                    promptBoxMaxRows
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DemoInput, {
+                                type: "number",
+                                min: 1,
+                                max: 20,
+                                value: promptBoxMaxRows,
+                                onChange: (e)=>setPromptBoxMaxRows(Number(e.target.value))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Message Controls"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setPrompt,
+                                        children: "Set Prompt"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: resetPrompt,
+                                        children: "Reset Prompt"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DemoInput, {
+                                placeholder: "Custom message",
+                                value: customMessage,
+                                onChange: (e)=>setCustomMessage(e.target.value)
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendSimpleRequest,
+                                        children: "Send Request"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendSimpleResponse,
+                                        children: "Send Response"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: stopResponse,
+                                        children: "Stop Response"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendResponseWithActions,
+                                        children: "With Actions"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendResponseWithCitations,
+                                        children: "With Citations"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendResponseWithVariables,
+                                        children: "With Resource Tokens"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendCodeBlock,
+                                        children: "Code Block"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendHTMLPreview,
+                                        children: "HTML Preview"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendToolCall,
+                                        children: "Send Tool Call"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendResponseDisabledActions,
+                                        children: "Disabled Actions"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setConversation,
+                                        children: "Set Conversation"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: setSuggestions,
+                                        children: "Set Suggestions"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: waitForMore,
+                                    onChange: ()=>setWaitForMore(!waitForMore)
+                                }),
+                                label: "Wait For More Messages"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Streaming"
+                            }),
+                            /*#__PURE__*/ jsx(DemoTextArea, {
+                                placeholder: "Text to stream",
+                                value: streamingText,
+                                onChange: (e)=>setStreamingText(e.target.value)
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: sendStreamingResponse,
+                                        children: "Stream Response"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: streamWithCitations,
+                                        children: "Stream With Citations"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: streamWithResourceTokens,
+                                        children: "Stream Resource Tokens"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(InfoText, {
+                                children: 'Streams text progressively. "Stream Resource Tokens" demonstrates buffering of incomplete tokens to prevent flickering.'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Loading & Error States"
+                            }),
+                            /*#__PURE__*/ jsx(DemoInput, {
+                                placeholder: "Loading message",
+                                value: loadingMessage,
+                                onChange: (e)=>setLoadingMessage(e.target.value)
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: showLoading,
+                                        children: "Show Loading"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: hideLoading,
+                                        children: "Hide Loading"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DemoInput, {
+                                placeholder: "Error message",
+                                value: errorMessage,
+                                onChange: (e)=>setErrorMessage(e.target.value)
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: showError,
+                                        children: "Show Error"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: showWarning,
+                                        children: "Show Warning"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: clearErrors,
+                                        children: "Clear Errors"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "History"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: addHistoryItems,
+                                        children: "Add History Items"
+                                    }),
+                                    /*#__PURE__*/ jsx(DemoButton, {
+                                        onClick: toggleHistory,
+                                        children: "Toggle History Panel"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "Feature Toggles"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.history,
+                                    onChange: ()=>toggleFeature('history')
+                                }),
+                                label: "History"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.settings,
+                                    onChange: ()=>toggleFeature('settings')
+                                }),
+                                label: "Settings"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.attachments,
+                                    onChange: ()=>toggleFeature('attachments')
+                                }),
+                                label: "Attachments"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.audio,
+                                    onChange: ()=>toggleFeature('audio')
+                                }),
+                                label: "STT Dictate"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.audioStreaming,
+                                    onChange: ()=>toggleFeature('audioStreaming')
+                                }),
+                                label: "Voice Interaction"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.htmlPreview,
+                                    onChange: ()=>toggleFeature('htmlPreview')
+                                }),
+                                label: "HTML Preview"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.headerSeparator,
+                                    onChange: ()=>toggleFeature('headerSeparator')
+                                }),
+                                label: "Header Separator"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.fullHeight,
+                                    onChange: ()=>toggleFeature('fullHeight')
+                                }),
+                                label: "Full Height"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.resize,
+                                    onChange: ()=>toggleFeature('resize')
+                                }),
+                                label: "Resize"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.close,
+                                    onChange: ()=>toggleFeature('close')
+                                }),
+                                label: "Close"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.feedback,
+                                    onChange: ()=>toggleFeature('feedback')
+                                }),
+                                label: "Feedback"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.model,
+                                    onChange: ()=>toggleFeature('model')
+                                }),
+                                label: "Model"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.agentMode,
+                                    onChange: ()=>toggleFeature('agentMode')
+                                }),
+                                label: "Agent Mode"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.sendOnClick,
+                                    onChange: ()=>toggleFeature('sendOnClick')
+                                }),
+                                label: "Send On Click"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.paginatedMessages,
+                                    onChange: ()=>toggleFeature('paginatedMessages')
+                                }),
+                                label: "Paginated Messages"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.compactMode,
+                                    onChange: ()=>toggleFeature('compactMode')
+                                }),
+                                label: "Compact Mode"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.customScrollTheme,
+                                    onChange: ()=>toggleFeature('customScrollTheme')
+                                }),
+                                label: "Custom Scroll Theme"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.copy,
+                                    onChange: ()=>toggleFeature('copy')
+                                }),
+                                label: "Copy"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.attachmentsAsync,
+                                    onChange: ()=>toggleFeature('attachmentsAsync')
+                                }),
+                                label: "Attachments Async"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: features.readOnly,
+                                    onChange: ()=>toggleFeature('readOnly')
+                                }),
+                                label: "Read Only"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(SectionTitle, {
+                                children: "State Controls"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: isWaiting,
+                                    onChange: ()=>{
+                                        setIsWaiting(!isWaiting);
+                                        chatService?.setWaiting(!isWaiting);
+                                    }
+                                }),
+                                label: "Set Waiting"
+                            }),
+                            /*#__PURE__*/ jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ jsx(Checkbox, {
+                                    size: "small",
+                                    checked: isShowLoading,
+                                    onChange: ()=>{
+                                        setIsShowLoading(!isShowLoading);
+                                        chatService?.setShowLoading(!isShowLoading);
+                                    }
+                                }),
+                                label: "Set Show Loading"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            chatService && /*#__PURE__*/ jsx(Box, {
+                sx: {
+                    justifySelf: 'flex-end',
+                    background: 'var(--color-background)'
+                },
+                children: /*#__PURE__*/ jsx(ApChat, {
+                    chatServiceInstance: chatService,
+                    locale: locale,
+                    theme: theme
+                })
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                ref: embeddedContainerRef,
+                sx: {
+                    position: 'fixed',
+                    bottom: 24,
+                    right: 24,
+                    width: 400,
+                    height: 600,
+                    boxShadow: 'var(--shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.35))',
+                    borderRadius: '12px',
+                    overflow: 'hidden',
+                    zIndex: 1000,
+                    '& > *': {
+                        position: 'relative'
+                    }
+                },
+                style: {
+                    background: 'var(--color-background)',
+                    display: chatMode === AutopilotChatMode.Embedded ? 'block' : 'none'
+                }
+            })
+        ]
+    });
+}
+export { ChatShowcaseDemo, mapToChatLocale, mapToChatTheme };