arcane-os 0.1.0-dev.5

package/runtime/arcane/components/speech.html

@@ -0,0 +1,365 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3" />
+<style>
+    button{
+        width:16em;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    button:active{
+        opacity:.5;
+    } 
+
+    button.pressed{
+        opacity:.6;
+        border:.2em;
+        border-color:var(--border-color);
+    }
+
+    .end{
+        background-color:var(--danger-color);
+        margin-left:1em;
+    }
+
+    .mute{
+        float:right;
+    }
+    
+    @media (max-width: 48em) {
+        body {
+            grid-template-columns: 2.2em 1fr;
+        }
+        
+        button {
+            width:100%;
+        }
+        
+        .end{
+            margin:0;
+        }
+    }
+    
+    
+</style>
+
+<p class="hidden">Will auto send after X seconds of silence set in code.</p>
+<button id="recordButton" type="button">Push To Talk</button>
+<button id="stopButton" type="button" class='hidden' disabled>Send</button>
+<button id="endButton" type="button" class="end">Complete</button>
+<button id="muteButton" type="button" class="mute" aria-pressed="true" aria-label="Unmute AI voice">Unmute</button>
+
+<script type="module">
+    import('../modules/DBLS.js');
+    import('../modules/AI.js?v=7');
+
+    const audioElement = new Audio();
+    const host=this;
+    const shadowRoot=host.shadowRoot;
+    const recordButton = shadowRoot.querySelector('#recordButton');
+    const stopButton = shadowRoot.querySelector('#stopButton');
+    const muteButton = shadowRoot.querySelector('#muteButton');
+    const sourceNodes = [];
+    const audioRecordingChunks=[];
+    const silenceDuration=0;//2000;
+    
+    let mediaRecorder=null;
+    let activeStream=null;
+    let audioMessageChunks = '';
+    let isSpeaking = false;
+    let silenceTimer;
+    
+    /**
+     * Configure the initial AI speech state. The default remains muted for
+     * compatibility with existing consumers. Apps own preference persistence.
+     */
+    host.initialMuted=typeof host.initialMuted==='boolean'?host.initialMuted:true;
+    host.muted=host.initialMuted;
+    host.configure=configure;
+    host.setAvailability=setAvailability;
+    host.setMuted=setMuted;
+    host.availability={
+        microphone:Boolean(navigator.mediaDevices?.getUserMedia&&globalThis.MediaRecorder),
+        stt:true,
+        tts:true
+    };
+    setAvailability({});
+    setMuted(host.initialMuted);
+    void observeMicrophonePermission();
+    host.componentReady=true;
+    host.dispatchEvent(new CustomEvent('speech-ready',{
+        bubbles:true,
+        composed:true,
+        detail:{speech:host}
+    }));
+
+    recordButton.addEventListener(
+        'mousedown', 
+        record
+    );
+
+    recordButton.addEventListener(
+        'touchstart', 
+        record
+    );
+
+    recordButton.addEventListener(
+        'mouseup', 
+        stop
+    );
+
+    recordButton.addEventListener(
+        'touchend', 
+        stop
+    );
+
+    // recordButton.addEventListener(
+    //     'click', 
+    //     record
+    // );
+
+    // stopButton.addEventListener(
+    //     'click', 
+    //     stop
+    // );
+
+    muteButton.addEventListener(
+        'click', 
+        muteToggle
+    );
+
+    shadowRoot.querySelector('#endButton').addEventListener(
+        'click',
+        function submitCompletionCommand(event){
+            event.target.disabled=true;
+            transcribe('End now, run all tool functions.');
+        }
+    );
+
+    window.addEventListener(
+        'ai-ready',
+        function aiReadyHandler(){
+            setMuted(host.muted);
+        }
+    );
+
+    if(window.ai?.ready){
+        setMuted(host.muted);
+    }
+
+    function configure(options={}){
+        if(Object.prototype.hasOwnProperty.call(options,'initialMuted')){
+            if(typeof options.initialMuted!=='boolean'){
+                throw new TypeError('initialMuted must be boolean');
+            }
+
+            host.initialMuted=options.initialMuted;
+            setMuted(host.initialMuted);
+        }
+
+        if(
+            Object.prototype.hasOwnProperty.call(options,'stt')
+            ||Object.prototype.hasOwnProperty.call(options,'tts')
+            ||Object.prototype.hasOwnProperty.call(options,'microphone')
+        ){
+            setAvailability(options);
+        }
+
+        return host;
+    }
+
+    function setAvailability(input={}){
+        const availability={
+            microphone:Object.prototype.hasOwnProperty.call(input,'microphone')
+                ?Boolean(input.microphone)
+                :host.availability.microphone,
+            stt:Object.prototype.hasOwnProperty.call(input,'stt')
+                ?Boolean(input.stt)
+                :host.availability.stt,
+            tts:Object.prototype.hasOwnProperty.call(input,'tts')
+                ?Boolean(input.tts)
+                :host.availability.tts
+        };
+
+        host.availability=availability;
+        recordButton.disabled=!availability.stt||!availability.microphone;
+        stopButton.disabled=recordButton.disabled;
+        recordButton.title=!availability.stt
+            ?'The selected transcription service is unavailable.'
+            :!availability.microphone
+                ?'Microphone access is unavailable. Text chat is still available.'
+                :'Push to talk';
+        recordButton.setAttribute('aria-label',recordButton.title);
+        muteButton.disabled=!availability.tts;
+
+        if(!availability.tts){
+            muteButton.textContent='Voice unavailable';
+            muteButton.setAttribute('aria-label','Selected speech service unavailable');
+            if(window.ai){
+                window.ai.muted=true;
+                window.ai.stopAudio?.();
+            }
+        }else{
+            setMuted(host.muted);
+        }
+
+        return {...availability};
+    }
+
+    async function observeMicrophonePermission(){
+        if(!navigator.permissions?.query||!navigator.mediaDevices?.getUserMedia){
+            return;
+        }
+
+        try{
+            const permission=await navigator.permissions.query({name:'microphone'});
+            const synchronize=()=>setAvailability({
+                microphone:permission.state!=='denied'
+            });
+            permission.addEventListener?.('change',synchronize);
+            synchronize();
+        }catch{
+            // Some supported browsers do not expose microphone through the
+            // Permissions API. getUserMedia remains the authoritative check.
+        }
+    }
+
+    function setMuted(muted){
+        if(typeof muted!=='boolean'){
+            throw new TypeError('muted must be boolean');
+        }
+
+        host.muted=muted;
+        if(host.availability.tts){
+            muteButton.textContent=muted?'Unmute':'Mute';
+            muteButton.setAttribute('aria-pressed',String(muted));
+            muteButton.setAttribute('aria-label',muted?'Unmute AI voice':'Mute AI voice');
+        }
+
+        if(window.ai){
+            window.ai.muted=host.availability.tts?muted:true;
+
+            if(muted&&typeof window.ai.stopAudio==='function'){
+                window.ai.stopAudio();
+            }
+        }
+
+        return host;
+    }
+
+    function muteToggle(){
+        const muted=!host.muted;
+        setMuted(muted);
+
+        if(!muted){
+            window.ai?.resumeAudio?.();
+        }
+    }
+
+    async function transcribe(transcription=''){
+        const transcriptionEvent = new CustomEvent(
+            'speech-transcription-complete', 
+            {
+                detail: { text: transcription }
+            }
+        );
+
+        host.dispatchEvent(transcriptionEvent);
+    }
+
+    async function record() {
+        if(!host.availability.stt||!host.availability.microphone){
+            return false;
+        }
+        ai.stopAudio();
+        audioRecordingChunks.splice(0);
+        try{
+            activeStream=await navigator.mediaDevices.getUserMedia({audio:true});
+        }catch(error){
+            if(['NotAllowedError','NotFoundError','NotReadableError','SecurityError'].includes(error?.name)){
+                setAvailability({microphone:false});
+                host.dispatchEvent(new CustomEvent('speech-microphone-unavailable',{
+                    bubbles:true,
+                    composed:true,
+                    detail:{reason:error.name}
+                }));
+                return false;
+            }
+            throw error;
+        }
+        mediaRecorder=new MediaRecorder(activeStream);
+        
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const source = audioContext.createMediaStreamSource(activeStream);
+        const processor = audioContext.createScriptProcessor(4096, 1, 1);
+        
+        source.connect(processor);
+        processor.connect(audioContext.destination);
+
+        processor.onaudioprocess = function(event) {
+            const input = event.inputBuffer.getChannelData(0);
+            const isSilent = input.every(sample => Math.abs(sample) < 0.05); // Threshold for silence
+            
+            if (isSilent&&silenceDuration) {
+                console.log('silent');
+                if(!silenceTimer){
+                    silenceTimer = setTimeout(() => {
+                        
+                        //console.log('TIMER SAYS STOPPING');
+                        stop();
+                        clearTimeout(silenceTimer);
+                    }, silenceDuration); // wait for specified milliseconds of silence
+                }
+            } else {
+                clearTimeout(silenceTimer);
+                silenceTimer=false;
+            }
+        };
+
+        mediaRecorder.ondataavailable = event => {
+            audioRecordingChunks.push(event.data);
+        };
+        
+        mediaRecorder.onstop = async () => {
+            processor.disconnect();
+            source.disconnect();
+            activeStream?.getTracks().forEach(track=>track.stop());
+            activeStream=null;
+            
+            const audioBlob = new Blob(audioRecordingChunks, { type: 'audio/webm; codecs=opus' });
+            const audioFile = new File([audioBlob], 'audio.webm', { type: 'audio/webm' });
+            //console.log(audioFile)
+
+            //playBackAudio(audioBlob);
+
+            const transcription = await ai.fetchSTT(audioFile);
+
+            transcribe(transcription);
+
+            console.log(transcription);
+        };
+        
+        mediaRecorder.start();
+        // recordButton.disabled = true;
+        // stopButton.disabled = false;
+    }
+
+    async function stop() {
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+            mediaRecorder.stop();
+        }
+        // recordButton.disabled = false;
+        // stopButton.disabled = true;
+    }
+
+    async function playBackAudio(audioBlob) {
+        const audioUrl = URL.createObjectURL(audioBlob);
+        audioElement.src = audioUrl;
+        audioElement.play();
+    }
+
+    
+</script>

package/runtime/arcane/components/summary-strip.html

@@ -0,0 +1,177 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block}
+    .summary-strip{list-style:none;margin:0;padding:0}
+    .summary-strip{
+        display:grid;
+        gap:1px;
+        grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
+        overflow:hidden;
+    }
+    .summary-item{
+        background:var(--arcane-surface-raised);
+        border:0;
+        border-radius:0;
+        box-sizing:border-box;
+        color:inherit;
+        display:grid;
+        font:inherit;
+        gap:var(--arcane-space-1);
+        min-height:6.25rem;
+        min-width:0;
+        padding:var(--arcane-space-4);
+        text-align:start;
+        width:100%;
+    }
+    button.summary-item{cursor:pointer}
+    button.summary-item:hover{background:var(--arcane-surface-muted)}
+    button.summary-item:focus-visible{outline:3px solid var(--arcane-focus);outline-offset:-3px}
+    .summary-value{font-size:clamp(1.35rem,4vw,2rem);font-weight:750;line-height:1.1;overflow-wrap:anywhere}
+    .summary-label{font-weight:650;overflow-wrap:anywhere}
+    .summary-detail{color:var(--arcane-muted);font-size:.85rem;overflow-wrap:anywhere}
+    .summary-status{justify-self:start;margin-top:var(--arcane-space-1)}
+    .empty{grid-column:1/-1;margin:0}
+</style>
+
+<section id="region" aria-label="Summary" part="region">
+    <ul id="items" class="summary-strip arcane-card" part="strip"></ul>
+</section>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const region=root.querySelector('#region');
+    const list=root.querySelector('#items');
+    let items=[];
+    let options={};
+
+    host.clear=clear;
+    host.configure=configure;
+    host.setItems=setItems;
+    host.updateItem=updateItem;
+
+    Object.defineProperties(host,{
+        items:{get:getItems,set:setItems},
+        options:{get:()=>({...options}),set:configure}
+    });
+
+    list.addEventListener('click',selectItem);
+
+    function datasetOptions(){
+        return {
+            ariaLabel:host.dataset.ariaLabel||'Summary',
+            emptyLabel:host.dataset.emptyLabel||'No summary available.'
+        };
+    }
+
+    function configure(input={}){
+        options={...datasetOptions(),...options,...input};
+        region.setAttribute('aria-label',`${options.ariaLabel||'Summary'}`);
+        render();
+        return {...options};
+    }
+
+    function setItems(values=[]){
+        items=Array.from(values||[]).map((value,index)=>normalizeItem(value,index));
+        render();
+        host.dispatchEvent(new CustomEvent('summary-strip-change',{
+            bubbles:true,
+            composed:true,
+            detail:{items:getItems()}
+        }));
+        return getItems();
+    }
+
+    function updateItem(id,update={}){
+        const index=typeof id==='number'?id:items.findIndex(item=>item.id===`${id}`);
+        if(index<0||index>=items.length){
+            return null;
+        }
+        items[index]=normalizeItem({...items[index],...update,id:items[index].id},index);
+        render();
+        return {...items[index]};
+    }
+
+    function normalizeItem(value={},index=0){
+        return {
+            action:Boolean(value.action||value.actionable),
+            detail:`${value.detail??''}`,
+            disabled:Boolean(value.disabled),
+            id:`${value.id??`summary-${index+1}`}`,
+            label:`${value.label??''}`,
+            status:`${value.status??''}`,
+            value:`${value.value??''}`
+        };
+    }
+
+    function render(){
+        const fragment=document.createDocumentFragment();
+        if(!items.length){
+            const empty=document.createElement('li');
+            empty.className='empty arcane-state arcane-state--empty';
+            empty.innerText=`${options.emptyLabel||'No summary available.'}`;
+            fragment.append(empty);
+        }
+        for(const item of items){
+            const row=document.createElement('li');
+            const content=document.createElement(item.action?'button':'div');
+            const value=document.createElement('span');
+            const label=document.createElement('span');
+            const detail=document.createElement('span');
+
+            content.className='summary-item';
+            content.setAttribute('part','item');
+            content.dataset.summaryId=item.id;
+            if(item.action){
+                content.type='button';
+                content.disabled=item.disabled;
+            }
+            value.className='summary-value';
+            value.setAttribute('part','value');
+            value.innerText=item.value;
+            label.className='summary-label';
+            label.setAttribute('part','label');
+            label.innerText=item.label;
+            detail.className='summary-detail';
+            detail.setAttribute('part','detail');
+            detail.innerText=item.detail;
+            detail.hidden=!item.detail;
+            content.append(value,label,detail);
+            if(item.status){
+                const status=document.createElement('span');
+                status.className='summary-status arcane-badge';
+                status.dataset.status=item.status;
+                status.innerText=item.status;
+                content.append(status);
+            }
+            row.append(content);
+            fragment.append(row);
+        }
+        list.replaceChildren(fragment);
+    }
+
+    function selectItem(event){
+        const target=event.target.closest('button[data-summary-id]');
+        const item=items.find(candidate=>candidate.id===target?.dataset.summaryId);
+        if(!target||!item||item.disabled){
+            return;
+        }
+        host.dispatchEvent(new CustomEvent('summary-strip-select',{
+            bubbles:true,
+            composed:true,
+            detail:{id:item.id,item:{...item}}
+        }));
+    }
+
+    function getItems(){
+        return items.map(item=>({...item}));
+    }
+
+    function clear(){
+        return setItems([]);
+    }
+
+    configure(datasetOptions());
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('summary-strip-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/table.html

@@ -0,0 +1,77 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3" />
+<style>
+    
+    input.search-users{
+        margin-bottom: 15px;
+    }
+
+</style>
+
+<table id="" class="notes">
+    <thead>
+        
+    </thead>
+    <tbody>
+        
+    </tbody>
+</table>
+
+<script typr="module">
+    const host = this;
+    const shadowRoot=this.shadowRoot;
+    host.buildHeader=buildHeader;
+    host.buildTable=buildTable;
+    host.ready=false;
+
+    const tableReady=new CustomEvent(
+        'table-ready', {
+            detail: {  }
+        }
+    );
+
+    const headerUpdate=new CustomEvent(
+        'header-update', {
+            detail: {  }
+        }
+    );
+
+    const bodyUpdate=new CustomEvent(
+        'body-update', {
+            detail: {  }
+        }
+    );
+
+    async function buildHeader(headerArray=['','']){
+        const tableHead = shadowRoot.querySelector('thead');
+        tableHead.innerHTML = '';
+        const th = tableHead.insertRow();
+                
+        headerArray.forEach(
+            (header)=>{
+                th.insertCell(-1).innerText=header;
+            }
+        );
+        host.dispatchEvent(headerUpdate);
+    }
+
+    async function buildTable(tableArray=[['', ''], ['','']]){
+        const tableBody = shadowRoot.querySelector('tbody');
+        tableBody.innerHTML = '';
+
+        tableArray.forEach(
+            (row)=>{ console.log('row',row);
+                const tr = tableBody.insertRow();
+                row.forEach(
+                    (cellValue)=>{
+                        tr.insertCell(-1).innerText=cellValue;
+                    }
+                );
+            }
+        );
+        host.dispatchEvent(bodyUpdate);
+    }
+    
+    host.ready=true;
+    host.dispatchEvent(tableReady);
+
+</script>