tinai

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({
    securityLevel: 'loose',
    theme: 'dark',
});

var btn_send = document.getElementById('btn-send');

let response_object = {};

btn_send.onclick = function(){send()}


function send(){
    btn_send.disabled = true;;
    btn_send.textContent = 'Sending...';
    postToApi();
}

async function postToApi() {

    var post_data = {
        "context":[],
        "debug":true
    };

    var text_prompt = document.getElementById("id-prompt").value;

    post_data.query = text_prompt;

    console.log('Sending:', post_data);


    try {
        const response = await fetch('api.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(post_data)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        response_object = result;
        console.log('Response:', response_object);
        updateUi();
    } catch (error) {
        console.error('Error:', error);
    }
}

function updateUi(){

    btn_send.disabled = false;
    btn_send.textContent = 'Send';

    var div_title = document.getElementById('id-div-response-title');
    var div_summary = document.getElementById('id-div-response-summary');
    var div_response = document.getElementById('id-div-response-render');

    if(!('title' in response_object)) return;

    div_title.innerHTML='<h4>'+response_object.title+'</h4>';
    div_summary.innerHTML='<h5>'+response_object.summary+'</h5>';
    div_response.innerHTML='';

    var first = true;
    Object.values(response_object.content).forEach(item => {
        if(!first){
            div_response.innerHTML+='<hr class="hr-chat-response-divider"/>'
        }
        switch (item.type) {
            case 'header':
                div_response.innerHTML+='<h4>'+item.value+'</h4>';
                break;
            case 'text':
                div_response.innerHTML+='<p>'+item.value+'</p>';
                break;
            case 'code':
                div_response.innerHTML+='<h7>'+item.caption+'</h7>';
                const code = document.createElement('pre');
                code.textContent = item.value;
                div_response.appendChild(code);
                break;
            case 'quote':
                div_response.innerHTML+='<h7>'+item.caption+'</h7>';
                const formattedQuote = item.value.replace(/\r?\n/g, '<br>');
                div_response.innerHTML+='<blockquote>'+formattedQuote+'</blockquote>';
                break;
            case 'link':
                var link_title = item.source[0].title;
                var link_href = item.source[0].url;
                if(link_title != null && link_href != null){
                    div_response.innerHTML+='<a target="_blank" href="'+link_href+'">'+link_title+'↗</a>';
                } else {
                    div_response.innerHTML+='<a>'+item.value+'</a>';
                }
                break;
            case 'color-hex':
                div_response.innerHTML+='<h7>'+item.caption+'</h7>';
                div_response.innerHTML+='<span style="color: '+item.value+'">'+item.value+'</span>';
                break;
            case 'list-step':
                if(item.ordered){
                    div_response.innerHTML+='<ol><li value="'+item.index+'">'+item.value+'</li></ol>';
                } else {
                    div_response.innerHTML+='<ul><li>'+item.value+'</li></ul>';
                }
                break;
            case 'diagram-mermaid':
                div_response.innerHTML+='<h7>'+item.caption+'</h7>';
                div_response.innerHTML+='<pre class="div-diagram-mermaid">'+item.value+'</pre>';
                break;
            case 'table':
                if(item.caption){
                    div_response.innerHTML+='<h7>'+item.caption+'</h7>';
                }
                var has_th = item['has-header'];
                var rows = item['table-rows'];
                var thtml = '<table cellspacing="3">';
                if(has_th){
                    var row = rows[0];
                    thtml+='<thead><tr>';
                    for(const title of row){
                        thtml+='<th>'+title+'</th>';
                    }
                    thtml+='</tr></thead>';
                    rows.shift();
                }
                thtml+='<tbody>';
                for(const row of rows){
                    thtml+='<tr>';
                    for(const item of row){
                        thtml+='<td>'+item+'</td>';
                    }
                    thtml+='</tr>';
                }
                thtml+='</tbody></table>';
                div_response.innerHTML+=thtml;
                break;
            default:
                div_response.innerHTML+='<pre>'+item.value+'</pre>';
                break;
        }
        first = false;
    });

    updateMermaid();

}

async function updateMermaid(){
    await mermaid.run({
        querySelector: '.div-diagram-mermaid',
    });
}