@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-assistant/xplor-assistant.js

@@ -0,0 +1,675 @@
+import { Host, h } from "@stencil/core";
+import { sendMessageToAPI, generateSessionId } from "./utils/api";
+import { SpeechRecognitionManager, SpeechSynthesisManager, detectBrowserCapabilities } from "./utils/speech";
+import { AssistantMessage } from "./internal/AssistantMessage";
+import { AssistantInput } from "./internal/AssistantInput";
+import { QuickReplies } from "./internal/QuickReplies";
+import { TypingIndicator } from "./internal/TypingIndicator";
+export class XplorAssistant {
+    constructor() {
+        this.placeholder = 'Type your message...';
+        this.enableVoiceInput = true;
+        this.enableTextToSpeech = true;
+        this.autoSpeak = false;
+        this.maxHeight = '600px';
+        this.disabled = false;
+        // State
+        this.messages = [];
+        this.internalSessionId = '';
+        this.isLoading = false;
+        this.isListening = false;
+        this.isSpeaking = false;
+        this.error = '';
+        this.inputValue = '';
+        this.hasVoiceSupport = false;
+        this.hasTTSSupport = false;
+        this.handleSendMessage = async (messageText) => {
+            console.log('[XplorAssistant] handleSendMessage called with:', messageText);
+            if (this.disabled || this.isLoading || !messageText.trim()) {
+                console.log('[XplorAssistant] Message blocked - disabled:', this.disabled, 'isLoading:', this.isLoading, 'hasValue:', !!messageText.trim());
+                return;
+            }
+            // Clear the input immediately
+            this.inputValue = '';
+            console.log('[XplorAssistant] Input cleared, proceeding with message');
+            const userMessage = {
+                id: `user-${Date.now()}`,
+                role: 'user',
+                content: messageText.trim(),
+                timestamp: new Date(),
+            };
+            // Add user message to the conversation
+            this.messages = [...this.messages, userMessage];
+            this.error = '';
+            this.isLoading = true;
+            // Emit message sent event
+            this.assistantMessageSent.emit({
+                message: userMessage.content,
+                sessionId: this.internalSessionId,
+                timestamp: userMessage.timestamp,
+            });
+            try {
+                // Call the API
+                const response = await sendMessageToAPI(this.apiEndpoint, userMessage.content, this.internalSessionId, this.userId, this.userEmail, this.userName);
+                // Update session ID if changed
+                if (response.sessionId && response.sessionId !== this.internalSessionId) {
+                    this.internalSessionId = response.sessionId;
+                }
+                // Add assistant response to conversation
+                const assistantMessage = {
+                    id: `assistant-${Date.now()}`,
+                    role: 'assistant',
+                    content: response.message,
+                    timestamp: new Date(),
+                };
+                this.messages = [...this.messages, assistantMessage];
+                // Emit message received event
+                this.assistantMessageReceived.emit({
+                    message: assistantMessage.content,
+                    sessionId: this.internalSessionId,
+                    timestamp: assistantMessage.timestamp,
+                });
+                // Auto-speak if enabled
+                if (this.autoSpeak && this.enableTextToSpeech) {
+                    this.speechSynthesis.speak(assistantMessage.content);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to send message';
+                this.handleError(errorMessage, 'api');
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.handleVoiceInput = (transcript) => {
+            if (transcript && transcript.trim()) {
+                this.handleSendMessage(transcript);
+            }
+        };
+        this.handleError = (error, type) => {
+            this.error = error;
+            this.assistantError.emit({
+                error,
+                type,
+                timestamp: new Date(),
+            });
+        };
+        this.handleStartListening = () => {
+            if (this.speechRecognition && this.enableVoiceInput && !this.disabled && !this.isLoading) {
+                this.speechRecognition.start();
+            }
+        };
+        this.handleStopListening = () => {
+            if (this.speechRecognition) {
+                this.speechRecognition.stop();
+            }
+        };
+        this.handleSpeak = (text) => {
+            if (this.speechSynthesis && this.enableTextToSpeech) {
+                this.speechSynthesis.speak(text);
+            }
+        };
+        this.handleStopSpeaking = () => {
+            if (this.speechSynthesis) {
+                this.speechSynthesis.stop();
+            }
+        };
+        this.handleQuickReply = (reply) => {
+            this.handleSendMessage(reply);
+        };
+        this.setInputValue = (value) => {
+            this.inputValue = value;
+        };
+    }
+    componentWillLoad() {
+        // Validate required props
+        if (!this.apiEndpoint) {
+            console.error('xplor-assistant: apiEndpoint prop is required');
+            this.error = 'Configuration error: API endpoint not provided';
+            return;
+        }
+        if (!this.userId || !this.userEmail || !this.userName) {
+            console.error('xplor-assistant: userId, userEmail, and userName props are required');
+            this.error = 'Configuration error: User information not provided';
+            return;
+        }
+        // Initialize session
+        if (this.sessionId) {
+            this.internalSessionId = this.sessionId;
+        }
+        else {
+            this.internalSessionId = generateSessionId();
+            this.assistantSessionCreated.emit({
+                sessionId: this.internalSessionId,
+                timestamp: new Date(),
+            });
+        }
+        // Detect browser capabilities
+        const capabilities = detectBrowserCapabilities();
+        this.hasVoiceSupport = capabilities.voiceInput;
+        this.hasTTSSupport = capabilities.textToSpeech;
+        // Disable features if not supported
+        if (!this.hasVoiceSupport) {
+            this.enableVoiceInput = false;
+        }
+        if (!this.hasTTSSupport) {
+            this.enableTextToSpeech = false;
+        }
+        // Initialize speech managers
+        this.speechRecognition = new SpeechRecognitionManager();
+        this.speechSynthesis = new SpeechSynthesisManager();
+        // Setup speech recognition callbacks
+        this.speechRecognition.onStart(() => {
+            this.isListening = true;
+        });
+        this.speechRecognition.onEnd(() => {
+            this.isListening = false;
+        });
+        this.speechRecognition.onResult((transcript) => {
+            this.handleVoiceInput(transcript);
+        });
+        this.speechRecognition.onError((error) => {
+            this.isListening = false;
+            this.handleError(error, 'voice');
+        });
+        // Setup speech synthesis callbacks
+        this.speechSynthesis.onStart(() => {
+            this.isSpeaking = true;
+        });
+        this.speechSynthesis.onEnd(() => {
+            this.isSpeaking = false;
+        });
+    }
+    handleSessionIdChange(newSessionId) {
+        if (newSessionId && newSessionId !== this.internalSessionId) {
+            this.internalSessionId = newSessionId;
+        }
+    }
+    componentDidUpdate() {
+        // Auto-scroll to bottom when new messages arrive
+        this.scrollToBottom();
+    }
+    disconnectedCallback() {
+        // Cleanup speech synthesis
+        if (this.speechSynthesis) {
+            this.speechSynthesis.stop();
+        }
+    }
+    // Public Methods
+    async sendMessage(message) {
+        if (!message || !message.trim()) {
+            return;
+        }
+        await this.handleSendMessage(message);
+    }
+    async clearHistory() {
+        this.messages = [];
+        this.error = '';
+    }
+    async speak(text) {
+        if (this.enableTextToSpeech && this.speechSynthesis) {
+            this.speechSynthesis.speak(text);
+        }
+    }
+    async stopSpeaking() {
+        if (this.speechSynthesis) {
+            this.speechSynthesis.stop();
+        }
+    }
+    // Private Methods
+    scrollToBottom() {
+        if (this.messagesContainerRef) {
+            setTimeout(() => {
+                this.messagesContainerRef.scrollTop = this.messagesContainerRef.scrollHeight;
+            }, 100);
+        }
+    }
+    render() {
+        // Show error state if critical error
+        if (this.error && !this.apiEndpoint) {
+            return (h(Host, null, h("div", { class: "xplor-assistant xplor-assistant--error" }, h("div", { class: "xplor-assistant__error-message" }, this.error))));
+        }
+        return (h(Host, null, h("div", { class: {
+                'xplor-assistant': true,
+                'xplor-assistant--disabled': this.disabled,
+            }, style: { maxHeight: this.maxHeight } }, h("div", { class: "xplor-assistant__messages", ref: (el) => (this.messagesContainerRef = el) }, this.messages.map((message) => (h(AssistantMessage, { message: message, enableTextToSpeech: this.enableTextToSpeech, autoSpeak: false, isSpeaking: this.isSpeaking, onSpeak: this.handleSpeak, onStopSpeaking: this.handleStopSpeaking }))), this.isLoading && (h("div", { class: "xplor-assistant__message xplor-assistant__message--assistant" }, h(TypingIndicator, null))), this.error && this.apiEndpoint && (h("div", { class: "xplor-assistant__error-banner" }, this.error))), this.quickReplies && this.quickReplies.length > 0 && (h(QuickReplies, { replies: this.quickReplies, disabled: this.disabled || this.isLoading, onReplyClick: this.handleQuickReply })), h(AssistantInput, { placeholder: this.placeholder, disabled: this.disabled, isLoading: this.isLoading, enableVoiceInput: this.enableVoiceInput && this.hasVoiceSupport, isListening: this.isListening, onSendMessage: this.handleSendMessage, onStartListening: this.handleStartListening, onStopListening: this.handleStopListening, inputValue: this.inputValue, setInputValue: this.setInputValue }))));
+    }
+    static get is() { return "xplor-assistant"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-assistant.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-assistant.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apiEndpoint": {
+                "type": "string",
+                "attribute": "api-endpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "userId": {
+                "type": "string",
+                "attribute": "user-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "userEmail": {
+                "type": "string",
+                "attribute": "user-email",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "userName": {
+                "type": "string",
+                "attribute": "user-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "sessionId": {
+                "type": "string",
+                "attribute": "session-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "quickReplies": {
+                "type": "unknown",
+                "attribute": "quick-replies",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Type your message...'"
+            },
+            "enableVoiceInput": {
+                "type": "boolean",
+                "attribute": "enable-voice-input",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableTextToSpeech": {
+                "type": "boolean",
+                "attribute": "enable-text-to-speech",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "autoSpeak": {
+                "type": "boolean",
+                "attribute": "auto-speak",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'600px'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "messages": {},
+            "internalSessionId": {},
+            "isLoading": {},
+            "isListening": {},
+            "isSpeaking": {},
+            "error": {},
+            "inputValue": {},
+            "hasVoiceSupport": {},
+            "hasTTSSupport": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "assistantMessageSent",
+                "name": "assistantMessageSent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AssistantMessageSentEvent",
+                    "resolved": "AssistantMessageSentEvent",
+                    "references": {
+                        "AssistantMessageSentEvent": {
+                            "location": "import",
+                            "path": "./internal/types",
+                            "id": "src/components/xplor-assistant/internal/types.ts::AssistantMessageSentEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "assistantMessageReceived",
+                "name": "assistantMessageReceived",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AssistantMessageReceivedEvent",
+                    "resolved": "AssistantMessageReceivedEvent",
+                    "references": {
+                        "AssistantMessageReceivedEvent": {
+                            "location": "import",
+                            "path": "./internal/types",
+                            "id": "src/components/xplor-assistant/internal/types.ts::AssistantMessageReceivedEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "assistantError",
+                "name": "assistantError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AssistantErrorEvent",
+                    "resolved": "AssistantErrorEvent",
+                    "references": {
+                        "AssistantErrorEvent": {
+                            "location": "import",
+                            "path": "./internal/types",
+                            "id": "src/components/xplor-assistant/internal/types.ts::AssistantErrorEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "assistantSessionCreated",
+                "name": "assistantSessionCreated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AssistantSessionEvent",
+                    "resolved": "AssistantSessionEvent",
+                    "references": {
+                        "AssistantSessionEvent": {
+                            "location": "import",
+                            "path": "./internal/types",
+                            "id": "src/components/xplor-assistant/internal/types.ts::AssistantSessionEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sendMessage": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearHistory": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "speak": {
+                "complexType": {
+                    "signature": "(text: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "text",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "stopSpeaking": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "sessionId",
+                "methodName": "handleSessionIdChange"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-assistant.js.map