arcane-os 0.1.0-dev.5

package/runtime/arcane/components/chat.html

@@ -0,0 +1,1225 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3" />
+<style>
+    .chat_area {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding: 1em;
+        height: calc(100% - 2em);
+        overflow: hidden;
+    }
+
+    .chat_area .thinking{
+        opacity:.36;
+        overflow-wrap:anywhere;
+        white-space:pre-wrap;
+    }
+
+    .chat_area .thinking.message_progress{
+        display:grid;
+        gap:.38em;
+        width:min(34em,100%);
+        opacity:1;
+    }
+
+    .message_progress_label{
+        display:flex;
+        justify-content:space-between;
+        gap:1em;
+        font-size:.9em;
+        font-variant-numeric:tabular-nums;
+    }
+
+    .message_progress_track{
+        display:block;
+        height:.58em;
+        overflow:hidden;
+        border:1px solid var(--border-color);
+        border-radius:999px;
+        background:var(--background);
+    }
+
+    .message_progress_fill{
+        display:block;
+        width:0;
+        height:100%;
+        border-radius:inherit;
+        background:var(--primary-color);
+        transition:width 240ms ease;
+    }
+
+    .message_progress_content.indeterminate .message_progress_fill{
+        width:32%;
+        animation:message-progress-indeterminate 1.2s ease-in-out infinite;
+    }
+
+    @keyframes message-progress-indeterminate{
+        from{transform:translateX(-120%);}
+        to{transform:translateX(320%);}
+    }
+
+    @media (prefers-reduced-motion:reduce){
+        .message_progress_fill{
+            transition:none;
+        }
+
+        .message_progress_content.indeterminate .message_progress_fill{
+            animation:none;
+            transform:none;
+        }
+    }
+
+    .conversation_timebox{
+        display:block;
+        flex:0 0 auto;
+        align-self:flex-end;
+        margin-block-end:.12em;
+        margin-inline-end:1em;
+        color:var(--text-color);
+        font-size:.68em;
+        line-height:1;
+        pointer-events:none;
+    }
+
+    .conversation_timebox[hidden]{
+        display:none;
+    }
+
+    .chat_area[data-conversation-complete="true"] .conversation_timebox,
+    .chat_area[data-conversation-complete="true"] .chat_input_area,
+    .chat_area[data-conversation-complete="true"] > #speech,
+    .chat_area[data-conversation-complete="true"] > .controls{
+        display:none;
+    }
+
+    .conversation_timebox[data-error="true"]{
+        color:var(--danger-color,var(--text-color));
+    }
+
+    .conversation_timebox output{
+        font-variant-numeric:tabular-nums;
+        font-weight:600;
+        white-space:nowrap;
+    }
+
+    .conversation_timebox_status{
+        position:absolute;
+        width:1px;
+        height:1px;
+        padding:0;
+        margin:-1px;
+        overflow:hidden;
+        clip:rect(0,0,0,0);
+        white-space:nowrap;
+        border:0;
+    }
+
+    .chat_area ul {
+        flex:1 1 auto;
+        min-height:0;
+        list-style: none;
+        overflow-y: auto;
+        padding: 0 1em;
+    }
+
+    .chat_area li {
+        padding: 0.5em;
+        margin: 0 0 1em;
+        width: auto;
+        max-width: 95%;
+        clear: both;
+    }
+
+    .chat_area li.ai {
+        width: 90%;
+        float: left;
+        padding: 10px; /* Ensures padding around the content */
+    }
+
+
+    .chat_area li.user {
+        text-align: right;
+        float: right;
+    }
+
+    .chat_input_area {
+        display: grid;
+        padding-bottom: 2em;
+        grid-template-columns: 1fr auto auto;
+        column-gap: 0.5em;
+    }
+
+    .chat_input {
+        width: calc(100% - 1em);
+        min-height: 48px;
+        max-height: 160px; 
+        padding: 1.1em 1em;
+        margin: 0;
+        border:2px solid var(--border-color);
+        border-radius: 0.5em;
+        font-family: Arial, sans-serif;
+        font-size: 16px;
+        line-height: 20px; 
+        box-sizing: border-box;
+        resize: none;
+        overflow-y: auto;
+    }
+
+    .chat_input:focus {
+        outline:.18em solid var(--focus-color);
+        outline-offset:.12em;
+        border-color:var(--focus-color);
+    }
+
+    .chat_submit,
+    button.chat_upload {
+        display:grid;
+        place-items:center;
+        width:3.75em;
+        height:3.75em;
+        padding:0;
+        margin:0;
+        background-color:var(--primary-color);
+        border:.2em solid var(--primary-color);
+        border-radius:.8em;
+        cursor: pointer;
+        outline: none;
+        box-shadow:0 .18em .45em var(--shadow-color);
+        align-self: end;
+        transition:background-color 180ms,border-color 180ms,box-shadow 180ms,transform 120ms;
+        color:var(--button-text-color,var(--text-color));
+    }
+
+    .chat_submit::before,
+    button.chat_upload::before {
+        content:'';
+        width:1.65em;
+        height:1.65em;
+        background-color:currentColor;
+        mask-position:center;
+        mask-repeat:no-repeat;
+        mask-size:contain;
+        -webkit-mask-position:center;
+        -webkit-mask-repeat:no-repeat;
+        -webkit-mask-size:contain;
+    }
+
+    .chat_submit::before {
+        mask-image:url('./arcane/img/send.svg');
+        -webkit-mask-image:url('./arcane/img/send.svg');
+    }
+
+    button.chat_upload::before {
+        mask-image:url('./arcane/img/upload.svg');
+        -webkit-mask-image:url('./arcane/img/upload.svg');
+    }
+
+    .chat_submit img,
+    button.chat_upload img {
+        display:none;
+    }
+
+    .chat_submit:hover,
+    button.chat_upload:hover {
+        background-color:var(--secondary-color);
+        border-color:var(--secondary-color);
+        color:var(--text-color);
+        box-shadow:0 .25em .6em var(--shadow-color);
+    }
+
+
+    :host(.journal){
+           .chat_output {
+               display:none;
+           }
+    }
+
+    table {
+        width:calc(100% - .5em);
+        margin: auto; /* Center the table horizontally */
+        border-collapse: collapse;
+        overflow-x: auto; /* Enables horizontal scrolling */
+        display:table;
+        background: var(--modal-background);
+        box-shadow: 0 0 0.7em var(--border-color);
+        border-radius: 0.5em 0.5em 0.5em 0.5em;
+        border-spacing: unset;
+    }
+
+    thead, tbody {
+        display: table; /* These elements behave like table rows */
+        width: 100%; /* Table rows take full available space */
+        table-layout: fixed; /* Ensures the table layout respects the width settings */
+    }
+
+    tbody tr{
+        height: 130px;
+    }
+
+    thead tr{
+        background: var(--background);
+        color: var(--platinum);
+        border-radius: .5em .5em 0 0;
+    }
+
+    tr{
+        display: grid;
+        grid-template-columns: 
+                6em 1fr 1fr 1fr;
+    }
+
+    tr:hover{
+        background:var(--secondary-color);
+    }
+
+    th, td {
+        text-align: left;
+        word-wrap: break-word;
+    }
+
+    th{
+        border:none;
+        padding:.4em;
+    }
+
+    td{
+        background: var(--border-color);
+        padding:.4em;
+        border: 1px solid var(--accent-color);
+        max-height: 15em;
+        overflow: auto;
+    }
+</style>
+
+<section class="chat_area">
+    <section
+        id="conversation_timebox"
+        class="conversation_timebox"
+        aria-label="Conversation timer"
+        hidden
+    >
+        <output
+            id="conversation_timebox_elapsed"
+            role="timer"
+            aria-live="off"
+            aria-label="Conversation elapsed time"
+        >00:00</output>
+        <span
+            id="conversation_timebox_status"
+            class="conversation_timebox_status"
+            role="status"
+            aria-live="polite"
+        >Starting the elapsed timer.</span>
+    </section>
+    <ul type='text' class='chat_output' id='chat_output' tabindex='-1' aria-label='Conversation transcript'></ul>
+    <div class="chat_input_area">
+        <textarea type='text' class='chat_input' id='chat_input'></textarea>
+        <button type="button" id="chat_upload" class="chat_upload" title="Upload files" aria-label="Upload files">
+            <img class='upload-icon' src="./arcane/img/upload.svg" />
+        </button>
+        <input type="file" id="file_upload_input" class="chat_upload" accept=".txt, .md, image/*" hidden multiple />
+        <button type="button" id="chat_submit" class="chat_submit" title="Send message" aria-label="Send message">
+            <img class='send-icon' src="./arcane/img/send.svg" />
+        </button>
+    </div>
+    <html-import id="speech" href="./arcane/components/speech.html?v=3"></html-import>
+    <section class="controls">
+        <select id="languages">
+            <option value="english" selected>English</option>
+
+            <!-- American -->
+            <optgroup label="American">
+                <option value="american-spanish">Español (Estados Unidos)</option>
+                <option value="american-southern-dialect">Southern American English</option>
+                <option value="american-ebonics">African-American Vernacular English</option>
+            </optgroup>
+
+            <!-- English Variants -->
+            <optgroup label="English Variants">
+                <option value="british-english">British English</option>
+                <option value="cockney">Cockney</option>
+                <option value="australian-english">Australian English</option>
+                <option value="new-zealand-english">New Zealand English</option>
+                <option value="irish-english">Hiberno-English</option>
+                <option value="canadian-english">Canadian English</option>
+            </optgroup>
+
+            <!-- European -->
+            <optgroup label="European">
+                <option value="albanian">Shqip</option>
+                <option value="armenian">Հայերեն</option>
+                <option value="basque">Euskara</option>
+                <option value="belarusian">Беларуская</option>
+                <option value="bosnian">Bosanski</option>
+                <option value="bulgarian">Български</option>
+                <option value="catalan">Català</option>
+                <option value="croatian">Hrvatski</option>
+                <option value="czech">Čeština</option>
+                <option value="danish">Dansk</option>
+                <option value="dutch">Nederlands</option>
+                <option value="estonian">Eesti</option>
+                <option value="finnish">Suomi</option>
+                <option value="french">Français</option>
+                <option value="galician">Galego</option>
+                <option value="german">Deutsch</option>
+                <option value="greek">Ελληνικά</option>
+                <option value="hungarian">Magyar</option>
+                <option value="icelandic">Íslenska</option>
+                <option value="irish">Gaeilge</option>
+                <option value="italian">Italiano</option>
+                <option value="latvian">Latviešu</option>
+                <option value="lithuanian">Lietuvių</option>
+                <option value="luxembourgish">Lëtzebuergesch</option>
+                <option value="macedonian">Македонски</option>
+                <option value="maltese">Malti</option>
+                <option value="norwegian">Norsk</option>
+                <option value="polish">Polski</option>
+                <option value="portuguese">Português</option>
+                <option value="romanian">Română</option>
+                <option value="russian">Русский</option>
+                <option value="scottish-gaelic">Gàidhlig</option>
+                <option value="serbian">Српски</option>
+                <option value="slovak">Slovenčina</option>
+                <option value="slovenian">Slovenščina</option>
+                <option value="spanish">Español</option>
+                <option value="swedish">Svenska</option>
+                <option value="ukrainian">Українська</option>
+                <option value="welsh">Cymraeg</option>
+            </optgroup>
+
+            <!-- Middle Eastern -->
+            <optgroup label="Middle Eastern">
+                <option value="arabic">العربية</option>
+                <option value="hebrew">עברית</option>
+                <option value="persian">فارسی</option>
+                <option value="kurdish">Kurdî</option>
+                <option value="pashto">پښتو</option>
+                <option value="turkish">Türkçe</option>
+            </optgroup>
+
+            <!-- African -->
+            <optgroup label="African">
+                <option value="afrikaans">Afrikaans</option>
+                <option value="amharic">አማርኛ</option>
+                <option value="hausa">Hausa</option>
+                <option value="igbo">Igbo</option>
+                <option value="swahili">Kiswahili</option>
+                <option value="yoruba">Yorùbá</option>
+                <option value="zulu">IsiZulu</option>
+                <option value="xhosa">IsiXhosa</option>
+                <option value="somali">Soomaali</option>
+            </optgroup>
+
+            <!-- Indian Subcontinent -->
+            <optgroup label="Indian Subcontinent">
+                <option value="assamese">অসমীয়া</option>
+                <option value="bengali">বাংলা</option>
+                <option value="gujarati">ગુજરાતી</option>
+                <option value="hindi">हिन्दी</option>
+                <option value="kannada">ಕನ್ನಡ</option>
+                <option value="malayalam">മലയാളം</option>
+                <option value="marathi">मराठी</option>
+                <option value="nepali">नेपाली</option>
+                <option value="punjabi">ਪੰਜਾਬੀ</option>
+                <option value="sinhala">සිංහල</option>
+                <option value="tamil">தமிழ்</option>
+                <option value="telugu">తెలుగు</option>
+                <option value="urdu">اردو</option>
+            </optgroup>
+
+            <!-- East Asian -->
+            <optgroup label="East Asian">
+                <option value="chinese">中文</option>
+                <option value="japanese">日本語</option>
+                <option value="栃木弁">栃木弁</option>
+                <option value="korean">한국어</option>
+                <option value="mongolian">Монгол</option>
+                <option value="tibetan">བོད་སྐད</option>
+            </optgroup>
+
+            <!-- Southeast Asian -->
+            <optgroup label="Southeast Asian">
+                <option value="burmese">မြန်မာ</option>
+                <option value="indonesian">Bahasa Indonesia</option>
+                <option value="javanese">Basa Jawa</option>
+                <option value="khmer">ខ្មែរ</option>
+                <option value="lao">ລາວ</option>
+                <option value="malay">Bahasa Melayu</option>
+                <option value="tagalog">Tagalog</option>
+                <option value="thai">ไทย</option>
+                <option value="vietnamese">Tiếng Việt</option>
+            </optgroup>
+
+            <!-- Pacific -->
+            <optgroup label="Pacific">
+                <option value="maori">Te Reo Māori</option>
+                <option value="hawaiian">ʻŌlelo Hawaiʻi</option>
+                <option value="samoan">Gagana Samoa</option>
+                <option value="tongan">Lea Faka-Tonga</option>
+            </optgroup>
+
+            <!-- South American -->
+            <optgroup label="South American">
+                <option value="brazilian-portuguese">Português do Brasil</option>
+                <option value="quechua">Runasimi</option>
+                <option value="aymara">Aymar aru</option>
+                <option value="guarani">Avañe'ẽ</option>
+                <option value="mapudungun">Mapudungun</option>
+            </optgroup>
+
+            <!-- Ancient / Constructed -->
+            <optgroup label="Ancient / Constructed">
+                <option value="sumerian">𒅴𒂠 (Sumerian)</option>
+                <option value="akkadian">𒀝𒅗𒁺𒌑 (Akkadian)</option>
+                <option value="latin">Latina</option>
+                <option value="ancient-greek">Ἑλληνικὴ</option>
+                <option value="old-english">Ænglisc</option>
+                <option value="old-norse">Norrœnt mál</option>
+                <option value="gothic">𐌲𐌿𐍄𐌹𐍃𐌺</option>
+                <option value="aramaic">ܐܪܡܝܐ</option>
+                <option value="coptic">Ⲙⲉⲧⲣⲉⲙⲛ̀ⲭⲏⲙⲓ</option>
+                <option value="egyptian">𓂋𓐍𓏏𓊖 (Egyptian)</option>
+                <option value="etruscan">𐌄𐍄𐍂𐌖𐍃𐌂𐌖𐌌</option>
+                <option value="sanskrit">संस्कृतम्</option>
+                <option value="pali">𑀧𑀸𑀮𑀺</option>
+                <option value="elvish-quenya">Quenya</option>
+                <option value="elvish-sindarin">Sindarin</option>
+                <option value="klingon">tlhIngan Hol</option>
+                <option value="dothraki">Dothraki</option>
+                <option value="valyrian">Valyrio</option>
+                <option value="esperanto">Esperanto</option>
+                <option value="interlingua">Interlingua</option>
+                <option value="pirate">Pirate ☠️</option>
+                <option value="leetspeak">1337</option>
+                <option value="emoji">😀📜</option>
+                <option value="binary">01001000 01101001</option>
+                <option value="machine">Machine Language</option>
+                <option value="assembly">Assembly</option>
+                <option value="ai-whisper">AI Whisperer Mode 🤖</option>
+                <option value="zen">Zen Koan</option>
+            </optgroup>
+        </select>
+    </section>
+</section>
+
+<script type="module"> 
+    const host=this;
+    const shadowRoot=host.shadowRoot;
+    const chatArea=shadowRoot.querySelector('.chat_area');
+    const textArea=shadowRoot.querySelector('#chat_input');
+    const chatOutput = shadowRoot.querySelector('#chat_output');
+    const send = shadowRoot.querySelector('#chat_submit');
+    const speech = shadowRoot.querySelector('#speech');
+    const uploadBtn = shadowRoot.querySelector('#chat_upload');
+    const fileInput = shadowRoot.querySelector('#file_upload_input');
+    const conversationTimeboxPanel=shadowRoot.querySelector('#conversation_timebox');
+    const conversationTimeboxElapsed=shadowRoot.querySelector('#conversation_timebox_elapsed');
+    const conversationTimeboxStatus=shadowRoot.querySelector('#conversation_timebox_status');
+    const [
+        {default:MD},
+        {default:FileEntity},
+        {ConversationSubmissionBarrier,requireConversationTimeboxDelivery}
+    ]=await Promise.all([
+        import('../modules/MD.js'),
+        import('../entities/File.js'),
+        import('../modules/ConversationTimebox.js')
+    ]);
+
+    host.language=host.language||'English';
+    host.name = host.name||'User';
+    host.aiName='AI';
+    let requestedInitialSpeechMuted=typeof speech.initialMuted==='boolean'
+        ?speech.initialMuted
+        :true;
+    let initialSpeechMuteListenerInstalled=false;
+    const hostSubmissionBarrier=new ConversationSubmissionBarrier();
+    let programmaticSubmissionQueue=Promise.resolve(true);
+    let conversationTimeboxController=null;
+    let conversationTimeboxUnsubscribe=null;
+    let conversationTimeboxError='';
+    let lastQueuedTimeboxRevision=null;
+    let hostSubmissionGeneration=0;
+    const conversationTimeboxRetryDelays=Object.freeze([0,500,1_500]);
+
+    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')
+    }
+
+    host.languageChanged=host.languageChanged||async function(text=''){
+        console.warn('html-import chat.html `host.languageChanged` method not implemented.\n\nThis can also be done by listening for the "chat-language-changed" event.\n\nIt is still best practice to implement the `.languageChanged` method atleast with an empty function.\n\n')
+    }
+
+    host.streamMessage=streamMessage;
+    host.setMessageProgress=setMessageProgress;
+    host.setAIAvailability=setAIAvailability;
+    host.setInitialSpeechMuted=setInitialSpeechMuted;
+    host.setConversationComplete=setConversationComplete;
+    host.bindConversationTimebox=bindConversationTimebox;
+    host.submitMessage=submitMessage;
+    host.aiAvailability={llm:true,stt:true,tts:true};
+    host.conversationComplete=false;
+
+    function setConversationComplete(complete=true){
+        if(typeof complete!=='boolean'){
+            throw new TypeError('Conversation completion state must be boolean.');
+        }
+
+        host.conversationComplete=complete;
+        chatArea.dataset.conversationComplete=String(complete);
+        textArea.disabled=complete;
+        uploadBtn.disabled=complete;
+        send.disabled=complete||!host.aiAvailability.llm;
+        if(complete){
+            textArea.blur?.();
+            chatOutput.focus?.({preventScroll:true});
+            chatOutput.scrollTop=chatOutput.scrollHeight;
+        }
+        return complete;
+    }
+
+    function setInitialSpeechMuted(initialMuted){
+        if(typeof initialMuted!=='boolean'){
+            throw new TypeError('initialMuted must be boolean');
+        }
+
+        requestedInitialSpeechMuted=initialMuted;
+        speech.initialMuted=initialMuted;
+
+        if(speech.componentReady){
+            speech.configure?.({initialMuted:requestedInitialSpeechMuted});
+        }else if(!initialSpeechMuteListenerInstalled){
+            initialSpeechMuteListenerInstalled=true;
+            speech.addEventListener(
+                'speech-ready',
+                function applyRequestedInitialSpeechMute(){
+                    initialSpeechMuteListenerInstalled=false;
+                    speech.configure?.({initialMuted:requestedInitialSpeechMuted});
+                },
+                {once:true}
+            );
+        }
+
+        return host;
+    }
+
+    function setMessageProgress(
+        id='',
+        {
+            label='Working',
+            current=0,
+            total=0,
+            failed=0,
+            indeterminate=false,
+            status=''
+        }={}
+    ){
+        const messageId=String(id).trim();
+        const normalizedTotal=Number.isFinite(Number(total))
+            ?Math.max(0,Math.floor(Number(total)))
+            :0;
+        const normalizedCurrent=Number.isFinite(Number(current))
+            ?Math.min(normalizedTotal,Math.max(0,Math.floor(Number(current))))
+            :0;
+        const normalizedFailed=Number.isFinite(Number(failed))
+            ?Math.max(0,Math.floor(Number(failed)))
+            :0;
+        const message=messageId
+            ?[...chatOutput.children].find(
+                candidate=>candidate.id===`message-${messageId}`
+            )||null
+            :null;
+        const thinking=message?.querySelector('.thinking');
+
+        if(!thinking){
+            return false;
+        }
+
+        let progress=thinking.querySelector('.message_progress_content');
+        let labelElement;
+        let countElement;
+        let fill;
+
+        if(!progress){
+            const ownerDocument=thinking.ownerDocument;
+            progress=ownerDocument.createElement('span');
+            progress.className='message_progress_content';
+            labelElement=ownerDocument.createElement('span');
+            labelElement.className='message_progress_text';
+            countElement=ownerDocument.createElement('span');
+            countElement.className='message_progress_count';
+            const labelRow=ownerDocument.createElement('span');
+            labelRow.className='message_progress_label';
+            labelRow.append(labelElement,countElement);
+            const track=ownerDocument.createElement('span');
+            track.className='message_progress_track';
+            fill=ownerDocument.createElement('span');
+            fill.className='message_progress_fill';
+            track.append(fill);
+            progress.append(labelRow,track);
+            thinking.replaceChildren(progress);
+            thinking.classList.add('message_progress');
+        }else{
+            labelElement=progress.querySelector('.message_progress_text');
+            countElement=progress.querySelector('.message_progress_count');
+            fill=progress.querySelector('.message_progress_fill');
+        }
+
+        const isIndeterminate=indeterminate===true;
+        const warningLabel=normalizedFailed>0
+            ?` · ${normalizedFailed} warning${normalizedFailed===1?'':'s'}`
+            :'';
+        const progressStatus=isIndeterminate
+            ?`${String(status||'Streaming')}${warningLabel}`
+            :`${normalizedCurrent} of ${normalizedTotal}${warningLabel}`;
+        const percent=normalizedTotal>0
+            ?normalizedCurrent/normalizedTotal*100
+            :0;
+
+        labelElement.textContent=String(label||'Working');
+        countElement.textContent=progressStatus;
+        progress.classList.toggle('indeterminate',isIndeterminate);
+        fill.style.width=isIndeterminate?'32%':`${percent}%`;
+        progress.setAttribute('role','progressbar');
+        progress.setAttribute('aria-label',String(label||'Working'));
+        if(isIndeterminate){
+            progress.removeAttribute('aria-valuemin');
+            progress.removeAttribute('aria-valuemax');
+            progress.removeAttribute('aria-valuenow');
+        }else{
+            progress.setAttribute('aria-valuemin','0');
+            progress.setAttribute('aria-valuemax',String(normalizedTotal));
+            progress.setAttribute('aria-valuenow',String(normalizedCurrent));
+        }
+        progress.setAttribute(
+            'aria-valuetext',
+            `${String(label||'Working')} ${progressStatus}`
+        );
+        chatOutput.scrollTop=chatOutput.scrollHeight;
+        return true;
+    }
+
+    function setAIAvailability(input={}){
+        const availability={
+            llm:Object.prototype.hasOwnProperty.call(input,'llm')
+                ?Boolean(input.llm)
+                :host.aiAvailability.llm,
+            stt:Object.prototype.hasOwnProperty.call(input,'stt')
+                ?Boolean(input.stt)
+                :host.aiAvailability.stt,
+            tts:Object.prototype.hasOwnProperty.call(input,'tts')
+                ?Boolean(input.tts)
+                :host.aiAvailability.tts
+        };
+
+        host.aiAvailability=availability;
+        send.disabled=host.conversationComplete||!availability.llm;
+        send.title=availability.llm
+            ?'Send message'
+            :'The selected language model service is unavailable.';
+        send.setAttribute('aria-label',send.title);
+
+        const configureSpeech=()=>speech.setAvailability?.({
+            stt:availability.stt,
+            tts:availability.tts
+        });
+
+        if(speech.componentReady){
+            configureSpeech();
+        }else{
+            speech.addEventListener('speech-ready',configureSpeech,{once:true});
+        }
+
+        return {...availability};
+    }
+
+    function formatConversationTime(milliseconds=0){
+        const totalSeconds=Math.max(0,Math.floor(milliseconds/1000));
+        const hours=Math.floor(totalSeconds/3600);
+        const minutes=Math.floor((totalSeconds%3600)/60);
+        const seconds=totalSeconds%60;
+        return hours>0
+            ?`${String(hours).padStart(2,'0')}:${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')}`
+            :`${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')}`;
+    }
+
+    function bindConversationTimebox(controller){
+        const requiredMethods=[
+            'snapshot',
+            'start',
+            'subscribe'
+        ];
+        if(
+            !controller
+            ||requiredMethods.some(function missingConversationTimeboxMethod(name){
+                return typeof controller[name]!=='function';
+            })
+            ||typeof controller.limitReachedMessage!=='string'
+        ){
+            throw new TypeError('A compatible conversation timebox controller is required.');
+        }
+        if(conversationTimeboxController===controller){
+            return controller;
+        }
+        conversationTimeboxUnsubscribe?.();
+        conversationTimeboxController=controller;
+        lastQueuedTimeboxRevision=null;
+        clearConversationTimeboxError();
+        conversationTimeboxPanel.hidden=false;
+        conversationTimeboxStatus.textContent='Starting the elapsed timer.';
+        conversationTimeboxUnsubscribe=controller.subscribe(
+            function renderBoundConversationTimebox(state,event){
+                renderConversationTimebox(state,event);
+            }
+        );
+        try{
+            controller.start();
+        }catch(error){
+            conversationTimeboxStatus.textContent='The elapsed timer could not start.';
+            conversationTimeboxPanel.dataset.error='true';
+            conversationTimeboxUnsubscribe?.();
+            conversationTimeboxUnsubscribe=null;
+            conversationTimeboxController=null;
+            throw error;
+        }
+        return controller;
+    }
+
+    function clearConversationTimeboxError(){
+        conversationTimeboxError='';
+        conversationTimeboxPanel.removeAttribute('data-error');
+    }
+
+    function setConversationTimeboxError(message){
+        conversationTimeboxError=message;
+        conversationTimeboxPanel.dataset.error='true';
+        if(conversationTimeboxStatus.textContent!==message){
+            conversationTimeboxStatus.textContent=message;
+        }
+    }
+
+    function renderConversationTimebox(state={},event={}){
+        if(event.type==='change'){
+            clearConversationTimeboxError();
+        }
+        const countsDown=state.status==='armed'||state.status==='due';
+        const displayMilliseconds=countsDown
+            ?state.remainingMs??0
+            :state.elapsedMs||0;
+        conversationTimeboxElapsed.value=formatConversationTime(displayMilliseconds);
+        conversationTimeboxElapsed.textContent=conversationTimeboxElapsed.value;
+        conversationTimeboxPanel.dataset.state=state.status||'idle';
+        let statusMessage='Starting the elapsed timer.';
+        let timerLabel=`Conversation elapsed time ${conversationTimeboxElapsed.value}.`;
+        if(state.status==='armed'){
+            statusMessage=`Check-in set for ${formatConversationTime(state.durationMilliseconds)} from the latest setting.`;
+            timerLabel=`Time remaining until the conversation check-in: ${conversationTimeboxElapsed.value}.`;
+        }else if(state.status==='due'){
+            statusMessage='The time check is due. Asking whether to end or continue.';
+            timerLabel='The conversation time check is due.';
+        }else if(state.status==='disposed'){
+            statusMessage='The elapsed timer has stopped.';
+            timerLabel=`Conversation timer stopped at ${conversationTimeboxElapsed.value}.`;
+        }else if(state.status==='unlimited'){
+            statusMessage='No time limit set. Elapsed time will keep running.';
+        }
+        conversationTimeboxElapsed.setAttribute('aria-label',timerLabel);
+        if(conversationTimeboxError){
+            statusMessage=conversationTimeboxError;
+        }
+        if(conversationTimeboxStatus.textContent!==statusMessage){
+            conversationTimeboxStatus.textContent=statusMessage;
+        }
+
+        if(state.status==='due'&&lastQueuedTimeboxRevision!==state.revision){
+            const dueRevision=state.revision;
+            const dueController=conversationTimeboxController;
+            lastQueuedTimeboxRevision=dueRevision;
+            void queueConversationTimeboxMessage(
+                conversationTimeboxController.limitReachedMessage,
+                {
+                    source:'conversation-timebox-limit',
+                    synthetic:true,
+                    preserveDraft:true,
+                    timeboxRevision:dueRevision
+                },
+                function conversationTimeboxRevisionIsStillDue(){
+                    const current=dueController?.snapshot();
+                    return conversationTimeboxController===dueController
+                        &&current?.status==='due'
+                        &&current.revision===dueRevision;
+                }
+            );
+        }
+    }
+
+    function queueConversationTimeboxMessage(message,context,guard){
+        const prior=programmaticSubmissionQueue.catch(
+            function ignorePriorProgrammaticSubmissionFailure(){
+                return false;
+            }
+        );
+        const queued=prior.then(
+            async function dispatchConversationTimeboxMessage(){
+                let lastError;
+                let attemptedSubmissionGeneration=null;
+                for(
+                    let attempt=0;
+                    attempt<conversationTimeboxRetryDelays.length;
+                    attempt++
+                ){
+                    const retryDelay=conversationTimeboxRetryDelays[attempt];
+                    if(retryDelay>0){
+                        await waitForConversationTimeboxRetry(retryDelay);
+                    }
+                    await hostSubmissionBarrier.waitForIdle();
+                    if(typeof guard==='function'&&!guard()){
+                        return false;
+                    }
+                    if(
+                        attemptedSubmissionGeneration!==null
+                        &&attemptedSubmissionGeneration!==hostSubmissionGeneration
+                    ){
+                        return false;
+                    }
+                    try{
+                        const delivery=submitMessage(
+                            message,
+                            {
+                                ...context,
+                                retry:attempt>0,
+                                reuseVisibleMessage:attempt>0
+                            }
+                        );
+                        attemptedSubmissionGeneration=hostSubmissionGeneration;
+                        const delivered=await delivery;
+                        return requireConversationTimeboxDelivery(delivered);
+                    }catch(error){
+                        lastError=error;
+                    }
+                }
+                throw lastError;
+            }
+        );
+        programmaticSubmissionQueue=queued.then(
+            function finishConversationTimeboxSubmission(result){
+                if(result!==false){
+                    clearConversationTimeboxError();
+                    const current=conversationTimeboxController?.snapshot();
+                    if(current){
+                        renderConversationTimebox(current,{type:'delivery'});
+                    }
+                }
+                return result;
+            },
+            function reportConversationTimeboxSubmissionFailure(error){
+                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}}
+                        }
+                    )
+                );
+                console.error('The conversation timebox message could not be sent.',error);
+                return false;
+            }
+        );
+        return programmaticSubmissionQueue;
+    }
+
+    function waitForConversationTimeboxRetry(delayMilliseconds){
+        return new Promise(function scheduleConversationTimeboxRetry(resolve){
+            setTimeout(resolve,delayMilliseconds);
+        });
+    }
+
+    {
+        const chatReady=new CustomEvent(
+            'chat-ready', {
+                detail: { chat: host }
+            }
+        );
+        
+        host.dispatchEvent(chatReady);
+    }
+
+    host.ready=true;
+
+    async function streamMessage(text='', id='', isThinking){
+        if(!id){
+            console.warn('Streaming messages require ids, none specified.')
+            return false;
+        }
+
+        let message=chatOutput.querySelector(`#message-${id}`);
+        
+        if(!message){
+            await receivedMessage(host.aiName,isThinking?'':text,id);
+            if(!isThinking){
+                return false;
+            }
+            message=chatOutput.querySelector(`#message-${id}`);
+            if(!message){
+                return false;
+            }
+        }
+
+        let target=message.querySelector('.markdown');
+
+        let thinkingHTML=message.querySelector('.thinking');
+        
+        if(isThinking && !thinkingHTML){
+            thinkingHTML=message.ownerDocument.createElement('span');
+            thinkingHTML.className='thinking';
+            message.append(thinkingHTML);
+        }
+
+        if(isThinking){
+            if(thinkingHTML.classList.contains('message_progress')){
+                thinkingHTML.replaceChildren();
+                thinkingHTML.classList.remove('message_progress');
+            }
+            thinkingHTML.append(
+                message.ownerDocument.createTextNode(String(text))
+            );
+            chatOutput.scrollTop = chatOutput.scrollHeight;
+            return true;
+        }
+
+        const clearThinking=thinkingHTML;
+        
+        //console.table(arguments);
+        if(!isThinking&&text&&host.aiAvailability.tts){
+            ai.streamTTS(
+                text
+            )
+        }
+        
+        if(clearThinking){
+            thinkingHTML.remove();
+        }
+        
+        target.raw ? target.raw+=text : target.raw=text;
+
+        target.innerHTML=new MD(target.raw).rendered;
+        
+        chatOutput.scrollTop = chatOutput.scrollHeight;
+    }
+
+    textArea.addEventListener('keyup', resizeTextArea);
+
+    send.addEventListener(
+        'click',
+        function submitChatMessageFromButton(){
+            void submitMessage('',{source:'user'});
+        }
+    );
+
+    uploadBtn.addEventListener(
+        'click',
+        function(){
+            fileInput.click();
+        }
+    );
+
+    fileInput.addEventListener(
+        'change',
+        async function onFileSelected() {
+            if (!fileInput.files.length>0) {
+                return;
+            }
+
+            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);
+            }
+
+            fileInput.value = '';
+        }
+    );
+
+    speech.addEventListener(
+        'speech-transcription-complete',
+        function submitTranscribedChatMessage(event){
+            void submitMessage(
+                event.detail?.text||'',
+                {source:'speech'}
+            );
+        }
+    )
+
+    shadowRoot.querySelector('#languages').addEventListener(
+        'change', 
+        function() {
+            host.language = this.value;
+            console.info("Language changed to:", host.language);
+
+            const chatEvent = new CustomEvent(
+                'chat-language-changed',
+                {
+                    detail: {
+                        message:host.language
+                    },
+                    bubbles: true,
+                    cancelable: true
+                }
+            );
+
+            host.dispatchEvent(chatEvent);
+            host.languageChanged(host.language);
+        }
+    );
+
+    function getMilTime() {
+        const now = new Date();
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        return `${hours}:${minutes}`;
+    }
+
+    async function resizeTextArea(e={}) {
+        if(e.key && e.key == 'Enter' && !e.shiftKey && !send.disabled){
+            e.preventDefault();
+            void submitMessage('',{source:'keyboard'});
+        }
+
+        // Reset height to shrink to content size
+        textArea.style.height = 'auto';
+        let scrollHeight = textArea.scrollHeight;
+        let computedStyle = window.getComputedStyle(textArea);
+        let lineHeight = parseInt(computedStyle.lineHeight, 10) || parseInt(computedStyle.fontSize, 10) * 1.2;
+        let maxHeight = lineHeight * 10;
+        textArea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
+    }
+
+    function observeHostSubmission(result,context){
+        const observed=hostSubmissionBarrier.track(result).catch(
+            function reportHostSubmissionFailure(error){
+                host.dispatchEvent(
+                    new CustomEvent(
+                        'chat-send-error',
+                        {
+                            bubbles:true,
+                            composed:true,
+                            detail:{error,context:{...context}}
+                        }
+                    )
+                );
+                console.error('The chat message could not be submitted.',error);
+                return false;
+            }
+        );
+        return observed;
+    }
+
+    async function submitMessage(textOverride='',context={}) {
+        if(typeof textOverride!=='string'){
+            throw new TypeError('Programmatic chat messages must be strings.');
+        }
+        if(!context||typeof context!=='object'||Array.isArray(context)){
+            throw new TypeError('Chat submission context must be an object.');
+        }
+        if(host.conversationComplete){
+            return false;
+        }
+        const submissionContext=Object.freeze({
+            source:'user',
+            preserveDraft:false,
+            synthetic:false,
+            ...context
+        });
+        const text=textOverride.length>0?textOverride:textArea.value;
+        if(!text.trim()){
+            return false;
+        }
+        const messageTime = getMilTime();
+        console.info("Dispatching message:", text);
+        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',
+            {
+                detail: {
+                    message:text,
+                    context:submissionContext
+                },
+                bubbles: true,
+                composed:true,
+                cancelable: true
+            }
+        );
+
+        ai.stopAudio();
+        ai.resumeAudio?.();
+
+        host.dispatchEvent(chatEvent);
+
+        let result;
+        try{
+            result=host.sendMessage(text,submissionContext);
+        }catch(error){
+            result=Promise.reject(error);
+        }
+        return observeHostSubmission(result,submissionContext);
+    }
+
+    async function receivedMessage(name = 'Assistant', text = '', id=''){
+        const messageTime = getMilTime();
+        //console.log(text)
+        chatOutput.innerHTML += `
+            <li class='ai' ${id? `id="message-${id}"`:''}>
+                <strong>${name} ${messageTime}:</strong>
+                <br>
+                <br>
+                <div class='markdown'>
+                    ${new MD(text).rendered}
+                </div>
+            </li>
+        `;
+        chatOutput.scrollTop = chatOutput.scrollHeight;
+    }
+
+    // Initialize and adjust on input
+    resizeTextArea();
+
+</script>