arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/chat.html

@@ -684,7 +684,31 @@
 </section>
 
 <script type="module"> 
+    const {
+        createArcaneEventSource,
+        projectArcaneDOMEvent
+    }=await import('arcane-os/event-manager');
+
     const host=this;
+    const events=createArcaneEventSource(
+        host,
+        {
+            source:'arcane.component.chat',
+            eventTypes:[
+                'chat-ready',
+                'chat-send-message',
+                'chat-send-error',
+                'chat-file-uploaded',
+                'chat-file-upload-error',
+                'chat-language-changed',
+                'chat-language-change-error',
+                'chat-ai-activation-request',
+                'chat-ai-activation-error',
+                'chat-speech-synthesis-error',
+                'conversation-timebox-error'
+            ]
+        }
+    );
     const shadowRoot=host.shadowRoot;
     const chatArea=shadowRoot.querySelector('.chat_area');
     const textArea=shadowRoot.querySelector('#chat_input');
@@ -728,7 +752,176 @@
     let conversationTimeboxError='';
     let lastQueuedTimeboxRevision=null;
     let hostSubmissionGeneration=0;
+    let eventOperationSequence=0;
+    let destroyed=false;
+    const activeSubmissionOwnerships=new Set();
     const conversationTimeboxRetryDelays=Object.freeze([0,500,1_500]);
+    const chatReasons=Object.freeze({
+        ready:'chat-ready',
+        messageSubmissionRequested:'message-submission-requested',
+        messageSubmissionCancelled:'message-submission-cancelled',
+        callerSignalAborted:'caller-signal-aborted',
+        componentDestroyed:'component-destroyed',
+        hostMessageSubmissionRejected:'host-message-submission-rejected',
+        fileStorageCompleted:'file-storage-completed',
+        fileStorageRejected:'file-storage-rejected',
+        languageChangeRequested:'language-change-requested',
+        languageChangeCallbackRejected:'language-change-callback-rejected',
+        languageModelActivationRequested:'language-model-activation-requested',
+        languageModelActivationRejected:'language-model-activation-rejected',
+        speechSynthesisRejected:'speech-synthesis-rejected',
+        conversationTimeboxDeliveryRejected:'conversation-timebox-delivery-rejected'
+    });
+    const chatErrorCodes=Object.freeze({
+        messageSubmissionAborted:'ARCANE_CHAT_MESSAGE_SUBMISSION_ABORTED',
+        languageModelActivationRejected:'ARCANE_CHAT_LANGUAGE_MODEL_ACTIVATION_REQUEST_REJECTED',
+        hostMessageSubmissionRejected:'ARCANE_CHAT_HOST_MESSAGE_SUBMISSION_REJECTED',
+        fileStorageRejected:'ARCANE_CHAT_FILE_STORAGE_REJECTED',
+        languageChangeCallbackRejected:'ARCANE_CHAT_LANGUAGE_CHANGE_CALLBACK_REJECTED',
+        speechSynthesisRejected:'ARCANE_CHAT_SPEECH_SYNTHESIS_REQUEST_REJECTED',
+        conversationTimeboxDeliveryRejected:'ARCANE_CHAT_CONVERSATION_TIMEBOX_DELIVERY_REJECTED'
+    });
+
+    function nextChatOperationId(kind){
+        eventOperationSequence+=1;
+        return `${events.descriptor.instanceId}:${kind}:${eventOperationSequence}`;
+    }
+
+    function dispatchChatEvent(
+        type,
+        compatibilityDetail={},
+        {
+            publicDetail={},
+            operationId=null,
+            bubbles=false,
+            composed=false,
+            cancelable=false
+        }={}
+    ){
+        if(destroyed){
+            return false;
+        }
+        const publication=events.dispatch(
+            type,
+            compatibilityDetail,
+            {
+                publicDetail,
+                operationId,
+                cancelable
+            }
+        );
+        if(!publication.accepted){
+            return false;
+        }
+        return projectArcaneDOMEvent(
+            host,
+            publication.occurrence,
+            {
+                bubbles,
+                composed,
+                cancelable
+            }
+        );
+    }
+
+    function publicErrorFields(error,boundaryCode){
+        let causeCode='';
+        try{
+            causeCode=typeof error?.code==='string'?error.code.trim():'';
+        }catch{}
+        return Object.freeze({
+            code:boundaryCode,
+            ...(causeCode&&causeCode!==boundaryCode?{causeCode}:{})
+        });
+    }
+
+    function isAbortSignal(value){
+        return value!==null
+            &&typeof value==='object'
+            &&typeof value.aborted==='boolean'
+            &&typeof value.addEventListener==='function'
+            &&typeof value.removeEventListener==='function';
+    }
+
+    function createChatSubmissionAbort(reason,message){
+        const error=new Error(message);
+        error.name='AbortError';
+        error.code=chatErrorCodes.messageSubmissionAborted;
+        error.reason=reason;
+        return error;
+    }
+
+    function createChatSubmissionOwnership(callerSignal=null){
+        if(callerSignal!==null&&callerSignal!==undefined&&!isAbortSignal(callerSignal)){
+            throw new TypeError('Chat submission signal must be an AbortSignal.');
+        }
+        const controller=new AbortController();
+        const subscriptions=[];
+        let released=false;
+
+        function releaseChatSubmissionOwnership(){
+            if(released){
+                return false;
+            }
+            released=true;
+            for(const {signal,listener} of subscriptions.splice(0)){
+                signal.removeEventListener('abort',listener);
+            }
+            activeSubmissionOwnerships.delete(ownership);
+            return true;
+        }
+
+        function abortChatSubmission(reason){
+            if(!controller.signal.aborted){
+                controller.abort(reason);
+            }
+            releaseChatSubmissionOwnership();
+            return true;
+        }
+
+        const ownership=Object.freeze({
+            signal:controller.signal,
+            abort:abortChatSubmission,
+            release:releaseChatSubmissionOwnership
+        });
+        activeSubmissionOwnerships.add(ownership);
+
+        function followAbortSignal(signal,fallbackReason){
+            if(!signal||controller.signal.aborted){
+                return;
+            }
+            if(signal.aborted){
+                abortChatSubmission(signal.reason??fallbackReason);
+                return;
+            }
+            function forwardChatSubmissionAbort(){
+                abortChatSubmission(signal.reason??fallbackReason);
+            }
+            subscriptions.push({signal,listener:forwardChatSubmissionAbort});
+            signal.addEventListener('abort',forwardChatSubmissionAbort,{once:true});
+        }
+
+        try{
+            followAbortSignal(
+                aiRuntimeStateAbortController.signal,
+                createChatSubmissionAbort(
+                    chatReasons.componentDestroyed,
+                    'The chat component was destroyed before message submission settled.'
+                )
+            );
+            followAbortSignal(
+                callerSignal,
+                createChatSubmissionAbort(
+                    chatReasons.callerSignalAborted,
+                    'The caller canceled the chat message submission.'
+                )
+            );
+        }catch(error){
+            releaseChatSubmissionOwnership();
+            throw error;
+        }
+        return ownership;
+    }
 
     host.sendMessage=host.sendMessage||async function(text=''){
         console.warn('html-import chat.html `host.sendMessage` method not implemented.\n\nThis can also be done by listening for the "chat-send-message" event.\n\nIt is still best practice to implement the `.sendMessage` method atleast with an empty function.\n\n')
@@ -767,7 +960,11 @@
             signal:aiRuntimeStateAbortController.signal
         }
     );
-    window.addEventListener('pagehide',destroy,{once:true});
+    window.addEventListener(
+        'pagehide',
+        destroy,
+        {once:true,signal:aiRuntimeStateAbortController.signal}
+    );
 
     function setConversationComplete(complete=true){
         if(typeof complete!=='boolean'){
@@ -805,7 +1002,7 @@
                     initialSpeechMuteListenerInstalled=false;
                     speech.configure?.({initialMuted:requestedInitialSpeechMuted});
                 },
-                {once:true}
+                {once:true,signal:aiRuntimeStateAbortController.signal}
             );
         }
 
@@ -944,10 +1141,22 @@
         send.setAttribute('aria-label',send.title);
     }
 
-    function createAIActivationController({host,panel,title,status,button,EventClass=CustomEvent}){
+    function createAIActivationController({
+        host,
+        panel,
+        title,
+        status,
+        button,
+        publish=dispatchChatEvent,
+        createOperationId=nextChatOperationId,
+        readErrorFields=publicErrorFields,
+        reasons=chatReasons,
+        errorCodes=chatErrorCodes
+    }){
         let role=null;
         let requestPending=false;
         let requestError='';
+        let requestGeneration=0;
         let destroyed=false;
 
         function visibleError(error,fallback){
@@ -981,6 +1190,10 @@
         }
 
         function render(){
+            if(destroyed){
+                panel.hidden=true;
+                return;
+            }
             const visible=selected()&&role.state!=='ready';
             panel.hidden=!visible;
             panel.setAttribute(
@@ -1047,16 +1260,27 @@
             requestError='';
             const intent=Object.freeze({role:'llm',action,reason:'user'});
             const request=Object.freeze({intent,state:role});
-            const activationEvent=new EventClass(
+            const operationId=typeof role?.operationId==='string'&&role.operationId
+                ?role.operationId
+                :createOperationId('llm-activation');
+            const generation=++requestGeneration;
+            const accepted=publish(
                 'chat-ai-activation-request',
+                request,
                 {
                     bubbles:true,
                     composed:true,
                     cancelable:true,
-                    detail:request
+                    operationId,
+                    publicDetail:{
+                        role:'llm',
+                        action,
+                        reason:reasons.languageModelActivationRequested,
+                        state:role.state
+                    }
                 }
             );
-            if(!host.dispatchEvent(activationEvent)){
+            if(!accepted||destroyed||generation!==requestGeneration){
                 render();
                 return false;
             }
@@ -1064,8 +1288,14 @@
             render();
             try{
                 await host.requestAIActivation(intent);
+                if(destroyed||generation!==requestGeneration){
+                    return false;
+                }
                 return true;
             }catch(error){
+                if(destroyed||generation!==requestGeneration){
+                    return false;
+                }
                 if(action==='load'
                     &&cancellation(error)
                     &&['unloaded','unloading'].includes(role?.state)){
@@ -1076,20 +1306,30 @@
                     `The language model ${action} request failed.`
                 );
                 requestError=message;
-                host.dispatchEvent(
-                    new EventClass(
-                        'chat-ai-activation-error',
-                        {
-                            bubbles:true,
-                            composed:true,
-                            detail:Object.freeze({request,error,message})
+                publish(
+                    'chat-ai-activation-error',
+                    Object.freeze({request,error,message}),
+                    {
+                        bubbles:true,
+                        composed:true,
+                        operationId,
+                        publicDetail:{
+                            role:'llm',
+                            action,
+                            reason:reasons.languageModelActivationRejected,
+                            ...readErrorFields(
+                                error,
+                                errorCodes.languageModelActivationRejected
+                            )
                         }
-                    )
+                    }
                 );
                 return false;
             }finally{
-                requestPending=false;
-                render();
+                if(!destroyed&&generation===requestGeneration){
+                    requestPending=false;
+                    render();
+                }
             }
         }
 
@@ -1104,7 +1344,9 @@
             }
             if(role?.state!==nextRole.state
                 ||role?.providerId!==nextRole.providerId
-                ||role?.modelId!==nextRole.modelId){
+                ||role?.modelId!==nextRole.modelId
+                ||role?.operationId!==nextRole.operationId){
+                requestGeneration+=1;
                 requestError='';
                 requestPending=false;
             }
@@ -1117,6 +1359,8 @@
                 return;
             }
             destroyed=true;
+            requestGeneration+=1;
+            requestPending=false;
             button.removeEventListener('click',activateSelectedAI);
             panel.hidden=true;
         }
@@ -1256,6 +1500,10 @@
     }
 
     function queueConversationTimeboxMessage(message,context,guard){
+        const operationId=typeof context?.operationId==='string'&&context.operationId
+            ?context.operationId
+            :nextChatOperationId('conversation-timebox');
+        const deliveryContext=Object.freeze({...context,operationId});
         const prior=programmaticSubmissionQueue.catch(
             function ignorePriorProgrammaticSubmissionFailure(){
                 return false;
@@ -1263,6 +1511,12 @@
         );
         const queued=prior.then(
             async function dispatchConversationTimeboxMessage(){
+                if(destroyed||aiRuntimeStateAbortController.signal.aborted){
+                    return false;
+                }
+                if(typeof guard==='function'&&!guard()){
+                    return false;
+                }
                 let lastError;
                 let attemptedSubmissionGeneration=null;
                 for(
@@ -1271,10 +1525,13 @@
                     attempt++
                 ){
                     const retryDelay=conversationTimeboxRetryDelays[attempt];
-                    if(retryDelay>0){
-                        await waitForConversationTimeboxRetry(retryDelay);
+                    if(retryDelay>0&&!(await waitForConversationTimeboxRetry(retryDelay))){
+                        return false;
                     }
                     await hostSubmissionBarrier.waitForIdle();
+                    if(destroyed||aiRuntimeStateAbortController.signal.aborted){
+                        return false;
+                    }
                     if(typeof guard==='function'&&!guard()){
                         return false;
                     }
@@ -1288,15 +1545,24 @@
                         const delivery=submitMessage(
                             message,
                             {
-                                ...context,
+                                ...deliveryContext,
                                 retry:attempt>0,
                                 reuseVisibleMessage:attempt>0
                             }
                         );
                         attemptedSubmissionGeneration=hostSubmissionGeneration;
                         const delivered=await delivery;
+                        if(destroyed||aiRuntimeStateAbortController.signal.aborted){
+                            return false;
+                        }
+                        if(typeof guard==='function'&&!guard()){
+                            return false;
+                        }
                         return requireConversationTimeboxDelivery(delivered);
                     }catch(error){
+                        if(destroyed||aiRuntimeStateAbortController.signal.aborted){
+                            return false;
+                        }
                         lastError=error;
                     }
                 }
@@ -1305,6 +1571,12 @@
         );
         programmaticSubmissionQueue=queued.then(
             function finishConversationTimeboxSubmission(result){
+                if(destroyed||aiRuntimeStateAbortController.signal.aborted){
+                    return false;
+                }
+                if(typeof guard==='function'&&!guard()){
+                    return false;
+                }
                 if(result!==false){
                     clearConversationTimeboxError();
                     const current=conversationTimeboxController?.snapshot();
@@ -1315,21 +1587,31 @@
                 return result;
             },
             function reportConversationTimeboxSubmissionFailure(error){
+                if(destroyed||aiRuntimeStateAbortController.signal.aborted){
+                    return false;
+                }
                 if(typeof guard==='function'&&!guard()){
                     return false;
                 }
                 setConversationTimeboxError(
                     'The time check could not reach the AI.'
                 );
-                host.dispatchEvent(
-                    new CustomEvent(
-                        'conversation-timebox-error',
-                        {
-                            bubbles:true,
-                            composed:true,
-                            detail:{error,context:{...context}}
+                dispatchChatEvent(
+                    'conversation-timebox-error',
+                    {error,context:{...deliveryContext}},
+                    {
+                        bubbles:true,
+                        composed:true,
+                        operationId,
+                        publicDetail:{
+                            source:deliveryContext.source||'conversation-timebox',
+                            reason:chatReasons.conversationTimeboxDeliveryRejected,
+                            ...publicErrorFields(
+                                error,
+                                chatErrorCodes.conversationTimeboxDeliveryRejected
+                            )
                         }
-                    )
+                    }
                 );
                 console.error('The conversation timebox message could not be sent.');
                 return false;
@@ -1339,22 +1621,46 @@
     }
 
     function waitForConversationTimeboxRetry(delayMilliseconds){
+        const signal=aiRuntimeStateAbortController.signal;
+        if(signal.aborted){
+            return Promise.resolve(false);
+        }
         return new Promise(function scheduleConversationTimeboxRetry(resolve){
-            setTimeout(resolve,delayMilliseconds);
-        });
-    }
-
-    {
-        const chatReady=new CustomEvent(
-            'chat-ready', {
-                detail: { chat: host }
+            let settled=false;
+            let timer=null;
+            function finishRetryWait(completed){
+                if(settled){
+                    return;
+                }
+                settled=true;
+                if(timer!==null){
+                    clearTimeout(timer);
+                }
+                signal.removeEventListener('abort',cancelRetryWait);
+                resolve(completed);
             }
-        );
-        
-        host.dispatchEvent(chatReady);
+            function cancelRetryWait(){
+                finishRetryWait(false);
+            }
+            timer=setTimeout(function completeRetryWait(){
+                finishRetryWait(true);
+            },delayMilliseconds);
+            signal.addEventListener('abort',cancelRetryWait,{once:true});
+            if(signal.aborted){
+                cancelRetryWait();
+            }
+        });
     }
 
     host.ready=true;
+    dispatchChatEvent(
+        'chat-ready',
+        {chat:host},
+        {
+            operationId:nextChatOperationId('ready'),
+            publicDetail:{ready:true,reason:chatReasons.ready}
+        }
+    );
 
     async function streamMessage(text='', id='', isThinking){
         if(!id){
@@ -1429,20 +1735,26 @@
         chatOutput.scrollTop = chatOutput.scrollHeight;
     }
 
-    textArea.addEventListener('keyup', resizeTextArea);
+    textArea.addEventListener(
+        'keyup',
+        resizeTextArea,
+        {signal:aiRuntimeStateAbortController.signal}
+    );
 
     send.addEventListener(
         'click',
         function submitChatMessageFromButton(){
             void submitMessage('',{source:'user'});
-        }
+        },
+        {signal:aiRuntimeStateAbortController.signal}
     );
 
     uploadBtn.addEventListener(
         'click',
         function(){
             fileInput.click();
-        }
+        },
+        {signal:aiRuntimeStateAbortController.signal}
     );
 
     fileInput.addEventListener(
@@ -1455,23 +1767,51 @@
             for(let i=0;i<fileInput.files.length;i++){
                 const file=fileInput.files[i];
                 const newFile=new FileEntity(file.name, 'documents');
-                newFile.save(file);
-
-                const uploadEvent = new CustomEvent(
-                    'chat-file-uploaded',
-                    {
-                        detail: { file },
-                        bubbles: true,
-                        composed: true,
-                        cancelable: true
-                    }
-                );
-
-                host.dispatchEvent(uploadEvent);
+                const operationId=nextChatOperationId('file-upload');
+                try{
+                    await newFile.save(file);
+                    if(destroyed)return;
+                    dispatchChatEvent(
+                        'chat-file-uploaded',
+                        {file},
+                        {
+                            bubbles:true,
+                            composed:true,
+                            cancelable:true,
+                            operationId,
+                            publicDetail:{
+                                size:Number.isFinite(file.size)?file.size:null,
+                                type:String(file.type||''),
+                                reason:chatReasons.fileStorageCompleted
+                            }
+                        }
+                    );
+                }catch(error){
+                    if(destroyed)return;
+                    dispatchChatEvent(
+                        'chat-file-upload-error',
+                        {file,error},
+                        {
+                            bubbles:true,
+                            composed:true,
+                            operationId,
+                            publicDetail:{
+                                size:Number.isFinite(file.size)?file.size:null,
+                                type:String(file.type||''),
+                                reason:chatReasons.fileStorageRejected,
+                                ...publicErrorFields(
+                                    error,
+                                    chatErrorCodes.fileStorageRejected
+                                )
+                            }
+                        }
+                    );
+                }
             }
 
             fileInput.value = '';
-        }
+        },
+        {signal:aiRuntimeStateAbortController.signal}
     );
 
     speech.addEventListener(
@@ -1481,29 +1821,62 @@
                 event.detail?.text||'',
                 {source:'speech'}
             );
-        }
+        },
+        {signal:aiRuntimeStateAbortController.signal}
     )
 
     shadowRoot.querySelector('#languages').addEventListener(
         'change', 
         function() {
-            host.language = this.value;
-            console.info("Language changed to:", host.language);
-
-            const chatEvent = new CustomEvent(
+            const language=this.value;
+            const operationId=nextChatOperationId('language-change');
+            const accepted=dispatchChatEvent(
                 'chat-language-changed',
+                {message:language},
                 {
-                    detail: {
-                        message:host.language
-                    },
-                    bubbles: true,
-                    cancelable: true
+                    bubbles:true,
+                    cancelable:true,
+                    operationId,
+                    publicDetail:{
+                        language,
+                        reason:chatReasons.languageChangeRequested
+                    }
                 }
             );
-
-            host.dispatchEvent(chatEvent);
-            host.languageChanged(host.language);
-        }
+            if(!accepted){
+                this.value=host.language;
+                return;
+            }
+            host.language=language;
+            console.info("Language changed to:",host.language);
+            let result;
+            try{result=host.languageChanged(host.language);}
+            catch(error){result=Promise.reject(error);}
+            void Promise.resolve(result).catch(
+                function reportLanguageChangeCallbackFailure(error){
+                    if(destroyed)return false;
+                    dispatchChatEvent(
+                        'chat-language-change-error',
+                        {error,language},
+                        {
+                            bubbles:true,
+                            composed:true,
+                            operationId,
+                            publicDetail:{
+                                language,
+                                reason:chatReasons.languageChangeCallbackRejected,
+                                ...publicErrorFields(
+                                    error,
+                                    chatErrorCodes.languageChangeCallbackRejected
+                                )
+                            }
+                        }
+                    );
+                    return false;
+                }
+            );
+        },
+        {signal:aiRuntimeStateAbortController.signal}
     );
 
     function getMilTime() {
@@ -1528,27 +1901,50 @@
         textArea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
     }
 
-    function observeHostSubmission(result,context){
-        const observed=hostSubmissionBarrier.track(result).catch(
+    function observeHostSubmission(result,context,ownership){
+        const observed=hostSubmissionBarrier.track(result).then(
+            function settleHostSubmission(value){
+                if(destroyed||context.signal.aborted){
+                    return false;
+                }
+                return value;
+            },
             function reportHostSubmissionFailure(error){
-                host.dispatchEvent(
-                    new CustomEvent(
-                        'chat-send-error',
-                        {
-                            bubbles:true,
-                            composed:true,
-                            detail:{error,context:{...context}}
+                if(destroyed||context.signal.aborted){
+                    return false;
+                }
+                dispatchChatEvent(
+                    'chat-send-error',
+                    {error,context:{...context}},
+                    {
+                        bubbles:true,
+                        composed:true,
+                        operationId:context.operationId||null,
+                        publicDetail:{
+                            source:context.source||'user',
+                            reason:chatReasons.hostMessageSubmissionRejected,
+                            ...publicErrorFields(
+                                error,
+                                chatErrorCodes.hostMessageSubmissionRejected
+                            )
                         }
-                    )
+                    }
                 );
                 console.error('The chat message could not be submitted.');
                 return false;
             }
+        ).finally(
+            function releaseHostSubmissionOwnership(){
+                ownership.release();
+            }
         );
         return observed;
     }
 
     async function submitMessage(textOverride='',context={}) {
+        if(destroyed){
+            return false;
+        }
         if(typeof textOverride!=='string'){
             throw new TypeError('Programmatic chat messages must be strings.');
         }
@@ -1571,60 +1967,104 @@
         if(!text.trim()){
             return false;
         }
-        const messageTime = getMilTime();
-        if(!submissionContext.preserveDraft){
-            textArea.value='';
-        }
-        
-        //console.log(host,host.name);
-        // console.log(forceText,text,1);
-        if(!submissionContext.synthetic&&!submissionContext.reuseVisibleMessage){
-            hostSubmissionGeneration++;
-            chatOutput.innerHTML += `
-                <li class='user'>
-                    <strong>${host.name} ${messageTime}:</strong>
-                    <br>
-                    <br>
-                    <div class='markdown'>
-                        ${new MD(text).rendered}
-                    </div>
-                </li>
-            `;
-        }
-        chatOutput.scrollTop = chatOutput.scrollHeight;
-
-        const chatEvent = new CustomEvent(
-            'chat-send-message',
+        const operationId=typeof submissionContext.operationId==='string'
+            &&submissionContext.operationId
+            ?submissionContext.operationId
+            :nextChatOperationId('message');
+        const ownership=createChatSubmissionOwnership(submissionContext.signal??null);
+        const eventContext=Object.freeze(
             {
-                detail: {
+                ...submissionContext,
+                operationId,
+                signal:ownership.signal
+            }
+        );
+        if(ownership.signal.aborted){
+            ownership.release();
+            return false;
+        }
+        let accepted;
+        try{
+            accepted=dispatchChatEvent(
+                'chat-send-message',
+                {
                     message:text,
-                    context:submissionContext
+                    context:eventContext
                 },
-                bubbles: true,
-                composed:true,
-                cancelable: true
+                {
+                    bubbles:true,
+                    composed:true,
+                    cancelable:true,
+                    operationId,
+                    publicDetail:{
+                        messageLength:text.length,
+                        source:eventContext.source,
+                        synthetic:eventContext.synthetic===true,
+                        reason:chatReasons.messageSubmissionRequested
+                    }
+                }
+            );
+        }catch(error){
+            ownership.release();
+            throw error;
+        }
+        if(!accepted){
+            ownership.abort(
+                createChatSubmissionAbort(
+                    chatReasons.messageSubmissionCancelled,
+                    'The chat message submission was canceled before delivery.'
+                )
+            );
+            return false;
+        }
+        if(destroyed||ownership.signal.aborted){
+            ownership.release();
+            return false;
+        }
+        try{
+            const messageTime = getMilTime();
+            if(!eventContext.preserveDraft){
+                textArea.value='';
             }
-        );
-
-        if(host.aiAvailability.tts&&speech.muted===false){
-            const aiRuntime=globalThis.ai;
-            aiRuntime?.stopAudio?.();
-            if(typeof aiRuntime?.resumeAudio==='function'){
-                void Promise.resolve(aiRuntime.resumeAudio()).catch(
-                    reportTTSError
-                );
+            
+            //console.log(host,host.name);
+            // console.log(forceText,text,1);
+            if(!eventContext.synthetic&&!eventContext.reuseVisibleMessage){
+                hostSubmissionGeneration++;
+                chatOutput.innerHTML += `
+                    <li class='user'>
+                        <strong>${host.name} ${messageTime}:</strong>
+                        <br>
+                        <br>
+                        <div class='markdown'>
+                            ${new MD(text).rendered}
+                        </div>
+                    </li>
+                `;
             }
-        }
+            chatOutput.scrollTop = chatOutput.scrollHeight;
 
-        host.dispatchEvent(chatEvent);
+            if(host.aiAvailability.tts&&speech.muted===false){
+                const aiRuntime=globalThis.ai;
+                aiRuntime?.stopAudio?.();
+                if(typeof aiRuntime?.resumeAudio==='function'){
+                    void Promise.resolve(aiRuntime.resumeAudio()).catch(
+                        reportTTSError
+                    );
+                }
+            }
 
-        let result;
-        try{
-            result=host.sendMessage(text,submissionContext);
+            let result;
+            try{
+                result=host.sendMessage(text,eventContext);
+            }catch(error){
+                result=Promise.reject(error);
+            }
+            return observeHostSubmission(result,eventContext,ownership);
         }catch(error){
-            result=Promise.reject(error);
+            ownership.release();
+            throw error;
         }
-        return observeHostSubmission(result,submissionContext);
     }
 
     async function receivedMessage(name = 'Assistant', text = '', id=''){
@@ -1644,32 +2084,62 @@
     }
 
     function reportTTSError(error){
+        if(destroyed){
+            return false;
+        }
         if(typeof speech.reportTTSError==='function'){
-            speech.reportTTSError(error);
-            return;
+            try{
+                speech.reportTTSError(error);
+                return true;
+            }catch(reportingError){
+                error=reportingError;
+            }
         }
 
         const message=typeof error?.message==='string'&&error.message.trim()
             ?error.message.trim().slice(0,240)
             :'Speech synthesis failed.';
-        host.dispatchEvent(
-            new CustomEvent(
-                'chat-speech-synthesis-error',
-                {
-                    bubbles:true,
-                    composed:true,
-                    detail:{error,message}
+        dispatchChatEvent(
+            'chat-speech-synthesis-error',
+            {error,message},
+            {
+                bubbles:true,
+                composed:true,
+                operationId:nextChatOperationId('speech-synthesis'),
+                publicDetail:{
+                    reason:chatReasons.speechSynthesisRejected,
+                    ...publicErrorFields(
+                        error,
+                        chatErrorCodes.speechSynthesisRejected
+                    )
                 }
-            )
+            }
         );
         console.error('Speech synthesis failed.');
+        return false;
     }
 
     function destroy(){
-        aiRuntimeStateAbortController.abort();
+        if(destroyed){
+            return;
+        }
+        destroyed=true;
+        const destroyReason=createChatSubmissionAbort(
+            chatReasons.componentDestroyed,
+            'The chat component was destroyed before message submission settled.'
+        );
+        for(const ownership of [...activeSubmissionOwnerships]){
+            ownership.abort(destroyReason);
+        }
+        aiRuntimeStateAbortController.abort(destroyReason);
         aiActivationController.destroy();
         window.removeEventListener('pagehide',destroy);
+        conversationTimeboxUnsubscribe?.();
+        conversationTimeboxUnsubscribe=null;
+        conversationTimeboxController=null;
+        initialSpeechMuteListenerInstalled=false;
         speech.destroy?.();
+        events.dispose();
         host.ready=false;
     }