voicebot/containercontent/opt/chatbot_engine/templates/template_ae.html

{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Prototyp VoiceBot</title>

    <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "css/css/common-page.css" %}">
    <link rel="stylesheet" href="{% static "css/font-awesome-4.7.0/css/font-awesome.min.css" %}">

    <!--für den chatbot-->
    <link rel="stylesheet" href="{% static "css/toastr.css" %}">
    <link rel="stylesheet" href="{% static "css/css/chat.css" %}">
    <link rel="stylesheet" href="{% static "css/css/home.css" %}">

    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Source+Sans+Pro:wght@600&display=swap">
    <!-- ======= Icon Chat =======-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="{% static "css/custom.css" %}">
    <script src="{% static "script/jquery-1.10.2.js" %}"></script>
    <script src="{% static "script/bootstrap.min.js" %}"></script>
    <script src="{% static "script/toastr.js" %}"></script>


    <!-- Fonts menu nav-->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>


</head>

<body>
<!--====== id de la ventana ======-->
<div class="ventana" id="vent">
    <div id="cerrar"><a href="javascript:cerrar()"><img src="{% static "img/error_2.png" %}"></a>
    </div>
    <div class="letras">
        <h1>Prototyp Voicebot</h1>
        <h2>©KommHUB, Stuttgart 2022</h2>
    </div>
</div>

<header>
    <nav class="hauptmenu">
        <!--=======  Responsive Menu Nav ======-->
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <ul>
            <li><a href="{% url 'index' %}">Home</a></li>
            <li>
                <a title="Ziel ist es, Barrierefreiheit möglichst weitestgehend zu gewährleisten. Daher bietet KOMMI zwei unterschiedliche Funktionsweisen an, in denen mehr oder weniger Text vorgelesen wird. "
                   href="{% url 'barrierefrei' %}" target="_blank">Barrierefrei </a></li>
            <!--Ventana Modal-->
            <li><a title="Prototyp Voicebot ©KommHUB, Stuttgart 2022
" href="#">Über</a>

            </li>
            <li><a href="mailto:KommHUB@komm.one">Kontakt</a></li>
        </ul>
    </nav>
</header>
<!-- href=#   title="Prototyp Voicebot ©KommHUB, Stuttgart 2022" -->

<!-- ====== Logo DA ====== -->
<div class="logohome">
    <label class="logo"><a target="_blank" href="https://www.digitalakademie-bw.de"><img
            src="https://www.digitalakademie-bw.de/wp-content/uploads/2018/04/digitalakademie_logo-1.png"
            alt="Digitalakademie@bw"></a>
    </label>
</div>
<!--======= End Responsive Menu Nav ======-->

<!-- ======= Logo Kommi =======-->
<img class="kommi" src="{% static "img/Voicebot_mitHintergrund.png" %}" width="500" height="400">

<!-- ====== CHAT BAR BLOCK ====== -->
<div class="chat-bar-collapsible">
    <button id="chat-button" type="button" class="collapsible">Starten Sie KOMMI!
        <i id="chat-icon" style="color: #fff;" class="fa fa-fw fa-comments-o"></i>
    </button>

    <div class="content">
        <div class="full-chat-block">
            <!-- Message Container -->
            <div class="outer-container">
                <div class="chat-container">
                    <input type="hidden" id="userId">
                    <!-- Messages -->
                    <div class="col-md-12">
                        <div class="row" id="MessageContent">
                        </div>
                    </div>

                    <!-- User input box -->
                    <div class="chat-bar-input-block">
                        <div id="userInput">
                            <input id="Message" class="input-box" type="text" name="msg"
                                   placeholder="Geben Sie hier Ihre Frage ein oder nutzen Sie die Sprachfunktion">
                            <p></p>
                        </div>

                        <div class="chat-bar-icons">
                            <i id="chat-icon" style="color: #333;" class="fa fa-fw fa-send"
                               onclick="Reply()"></i>
                            <i id="chat-icon" style="color: crimson;" class="fa fa-microphone"
                               onclick="myFunction2()"></i>
                            <i id="play" style="color: #333;" class="fa fa-play"
                                    onclick="play()"></i>

                                <i id="stop" style="color: #333;" class="fa fa-stop"
                                    onclick="stop()"></i>

                        </div>
                    </div>

                    <div id="chat-bar-bottom">
                        <p></p>
                    </div>

                </div>
            </div>

        </div>
    </div>

</div>
<!-- ====== end Chat Bar Block ====== -->

<!--======= JS  =======-->
<script>
    toastr.options.positionClass = 'toast-bottom-left';
    var pref='{{request.path}}';
    pref =pref.replace("chatbot/", "prodae_")+'#';
    var sesid = pref+ Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9);
              sesid =sesid.substr(1)
    console.log(sesid)
                $("#userId").val(sesid);
                sessionStorage.setItem("chatbot.sessionid", sesid);

    var msgText = $('#Message');
    $("#Message").keypress(function (e) {
    if (e.which == 13) {
        Reply();
    }
});
  var idaktuell ;
  var frageaktuell ;
    function set_id(x){
    idaktuell = x;
}

function set_frage(x){
    frageaktuell = x;
}
    function Reply() {
    var msg = msgText.val()
        if (msg == '') {
            toastr.error("Message can not be empty")
            return;
        }

        var data = {
            "msg": msg, "userId":$("#userId").val(), "startcontext": ""
        }
        var id= $("#userId").val()
        set_id(id)
        set_frage(msg)

        $.ajax({
            url: '/kommi/kommi',
            data: JSON.stringify(data),
            method: 'POST',
            success: function (res) {
                drawMessage(res)

            },
            error: function (err) {
                if (err.desc == null)
                    err.desc = "Something went wrong"
                toastr.error(err.desc)
            }
        })

}


function isObject(obj) {
    return (typeof obj === "object" && obj !== null) || typeof obj === "function";
}
var intentbutton = document.getElementsByClassName('btn-ortena');

function toCorona(){
    var cdata = document.getElementById("chatbot-button").dataset;
    var sessionId = sessionStorage.getItem("ortena.sessionid");
    user = "corona_" + cdata.chat + "#" + sessionId;

}
function toOrtena(){
    var cdata = document.getElementById("chatbot-button").dataset;
    var sessionId = sessionStorage.getItem("ortena.sessionid");
    user = cdata.system + "_" + cdata.chat + "#" + sessionId;
}

function positiv() {

        var q= jQuery("<div></div>")
        q.addClass("col-md-6").addClass("guest-message")
    q.append("<p>Vielen Dank für Ihre Rückmeldung!</p>")
    q.appendTo(msgContent)
        scrollDown();

        console.log('id dfvkdj', idaktuell)
    console.log('frage dfvkdj', frageaktuell)

    var data = {
            "msg": frageaktuell, "userId":idaktuell, "startcontext": ""
        }
        $.ajax({
            url: '/kommi/positiv',
            data: JSON.stringify(data),
            method: 'POST',
            success: function (res) {


            },
            error: function (err) {
                if (err.desc == null)
                    err.desc = "Something went wrong"
                toastr.error(err.desc)
            }
        })


    }

    function negativ() {

        var q= jQuery("<div></div>")
        q.addClass("col-md-6").addClass("guest-message")
    q.append("<p>Vielen Dank für Ihre Rückmeldung.</p><p>Es tut uns leid, dass Ihnen diese Antwort nicht weitergeholfen hat. Wir arbeiten kontinuierlich daran, Kommi zu verbessern.</p>")
    q.appendTo(msgContent)
        scrollDown();

        console.log('id dfvkdj', idaktuell)
    console.log('frage dfvkdj', frageaktuell)

    var data = {
            "msg": frageaktuell, "userId":idaktuell, "startcontext": ""
        }
        $.ajax({
            url: '/kommi/negativ',
            data: JSON.stringify(data),
            method: 'POST',
            success: function (res) {


            },
            error: function (err) {
                if (err.desc == null)
                    err.desc = "Something went wrong"
                toastr.error(err.desc)
            }
        })


    }

    function myFunction(intent_message) {

        console.log(intent_message)
        "$('.btn-ortena').data('intent');"
        var msg =  intent_message;

        if (msg == '') {
            toastr.error("Message can not be empty")
            return;
        }

        var data = {
            "msg": msg, "userId":$("#userId").val()
        }
        $.ajax({
            url: '/kommi/kommi',
            data: JSON.stringify(data),
            method: 'POST',
            success: function (res) {
                drawAnswer(res)
            },
            error: function (err) {
                if (err.desc == null)
                    err.desc = "Something went wrong"
                toastr.error(err.desc)
            }
        })

    }
    for (var i = 0; i < intentbutton.length; i++) {
   intentbutton[i].addEventListener('click', myFunction);
}

    var msgContent = $('#MessageContent');

    function drawMessage(res) {
        msgContent.append("<div class='col-md-6 owner-message'><p>"+res.ques+"</p></div>");

        scrollDown();
        drawAnswer(res)
    }
    function drawAnswer(res) {

        var q= jQuery("<div></div>")
        q.addClass("col-md-6").addClass("guest-message")

        if (Array.isArray(res.res)) {
            q.append("<p>"+paint(res.res[0])+"</p>")
        } else q.append("<p>"+paint(res.res)+"</p>");


     	  msgText.val('')

        q.append('<div class="feedback"><ul class="feedback__buttons"><li><button class="feedback__button feedback__button--positive gut" aria-label="Positives Feedback für die Antwort abgeben" onclick="positiv()"><i class="fa fa-thumbs-up"></i></button></li><li><button class="feedback__button feedback__button--negative schlecht" aria-label="Negatives Feedback für die Antwort abgeben" onclick="negativ()"><i class="fa fa-thumbs-down"></i></button></li></ul></div>\n')


        q.appendTo(msgContent)
        scrollDown();
        console.log('res.res[0]', res.res[1])
        if (Array.isArray(res.res)) {
            botVoice(res.res[1])
        } else botVoice(res.res);


    }

    function scrollDown() {
       $chatbotMessageWindow = document.querySelector(".full-chat-block");
$chatbotMessages = document.querySelector("#MessageContent");
var distanceToScroll = $chatbotMessageWindow.scrollHeight - ($chatbotMessages.lastChild.offsetHeight + 60);
//jQuery("#MessageContent").animate({scrollTop: distanceToScroll}, 500);
$chatbotMessageWindow.scrollTop = distanceToScroll;
    }


jQuery(document.body).on('click', '.btn-abfallja', function (e) {
       var el= jQuery(this).parent().parent().parent().parent();
       jQuery(el).find(".abfallja").show()
       jQuery(el).find(".abfallnein").hide()
});
    jQuery(document.body).on('click', '.btn-abfallnein', function (e) {
   var el= jQuery(this).parent().parent().parent().parent();
       jQuery(el).find(".abfallnein").show()
       jQuery(el).find(".abfallja").hide()
    });
	function paintStrukturierteAntwort(obj) {

    let xstr="";
    var items = obj["atwst"];

    items.sort(function (a, b) {
        return a.pgx - b.pgx;
    });
    if (items.length > 0) {

        xstr += "<div class=\"chatbot-card chatbot-card--antwst\">";

        items.forEach(function (item) {
            let typ = item.typ;
            if (!typ) typ = "atwst"
            xstr += paintItem(item, typ)

        })
        xstr+="</div>";
    }

return xstr;
}
function paintItem(item, typ) {
    let xstr = "<div class=\"chatbot-card--" + typ + "\">";
    let xcls = "selection"
    if (Number(item.pgx) < 1)
        xcls = "selection"

    if (item.titel)
        xstr+="<div class=\"chatbot-card__header\"><div class=\"chatbot-card__title\">" + item.titel + "</div></div>"
      xstr+="<div class=\"chatbot-card__body\">"
    if (item.intro)
        xstr+="<div class=\"chatbot-intro\">" + item.intro + "</div>"
    if (item.btn && item.btn.length > 0) {

        xstr+="<div class=\"chatbot-card__" + xcls + "\"><nav><ul class=\"" + xcls + "__items\">"
        let btn = item.btn;
        btn.sort(function (a, b) {
            return Number(a.lfnr) - Number(b.lfnr);
        });
        btn.forEach(function (element) {
            xstr+="<li class=\"" + xcls + "__item\"><button class=\"btn-ortena\" data-intent=\"" + element.bint + "\""
            xstr+="   onclick=\"myFunction('" + element.bint + "')\">" + element.bzn + "</button></li>"

        });
        xstr+="</ul></nav></div>";
    }
    xstr+="</div>";
    xstr+="</div>";

    return xstr;
}
function paint (val) {
        let str = "";
        if (val) {
            if (Array.isArray(val)) {
                if (val.length) {

                    val.forEach(function (t) {
                        str = str + paint(t);
                    });

                }
            } else if (isObject(val)) {
                if(val["atwst"])
                {

                    return  paintStrukturierteAntwort(val);}

                else
                    return val;
            } else
                return val;
        }

        return str;
    }

function paintItemBtn(item, typ) {
    let xstr = "<div class=\"chatbot-card--" + typ + "\">";
    let xcls = typ
	let intro =jQuery(item).data(typ)
	let titel=jQuery(item).text()
    if (titel)
        xstr+="<div class=\"chatbot-card__header\"><div class=\"chatbot-card__title\">" + titel + "</div></div>"
      xstr+="<div class=\"chatbot-card__body\">"
    if (intro)
        xstr+="<div class=\"chatbot-intro\">" + intro + "</div>"
    xstr+="</div>";
    xstr+="</div>";

    return xstr;
}
const voice = document.querySelector(".voice");
    const voice2text = document.querySelector(".voice2text");

    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recorder = new SpeechRecognition();
    recorder.lang = 'de-DE';

    function addHumanText(text) {
        text= 'Du: ' + text
        const chatContainer = document.createElement("div");
        chatContainer.classList.add("chat-container");
        const chatBox = document.createElement("p");
        chatBox.classList.add("voice2text");
        const chatText = document.createTextNode(text);
        chatBox.appendChild(chatText);
        chatContainer.appendChild(chatBox);
        return chatContainer;
    }

    function addBotText(text) {
        text = 'Elisa: ' + text
        const chatContainer1 = document.createElement("div");
        chatContainer1.classList.add("chat-container");
        chatContainer1.classList.add("darker");
        const chatBox1 = document.createElement("p");
        chatBox1.classList.add("voice2text");
        const chatText1 = document.createTextNode(text);
        chatBox1.appendChild(chatText1);
        chatContainer1.appendChild(chatBox1);
        return chatContainer1;
    }
var voiceaktuell;

//function to call inside ajax callback
function set_voiceaktuell(x){
    voiceaktuell = x;
}
    function botVoice(message) {
        const speech = new SpeechSynthesisUtterance();
        console.log(message)
        speech.text = message
        set_voiceaktuell(message)
        speech.volume = 1;
        speech.rate = 1;
        speech.pitch = 1;
        window.speechSynthesis.speak(speech);

    }

    var playEle = document.querySelector('#play');
    var pauseEle = document.querySelector('#pause');
    var stopEle = document.querySelector('#stop');
    var flag = false;

function play(){

console.log('sdkfcsdfvkdj', voiceaktuell)
        const speech = new SpeechSynthesisUtterance();

        speech.text = voiceaktuell

        speech.volume = 1;
        speech.rate = 1;
        speech.pitch = 1;
        window.speechSynthesis.speak(speech);

}


function stop(){

        speechSynthesis.cancel();

};


/* Button start*/
        function myFunction2 (){

        recorder.start();
        console.log('Ready to receive the voice.');
    }

    recorder.onresult = function (event) {
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
        var str = event.results[i][0].transcript;
var newstr = str.replace(/Conny/i, "Kommi");
      Message.value += newstr;
    }

  }
}

/* ====== Ventana Modal Flotante ====== */
    function abrir() {
        document.getElementById("vent").style.display = "block";
    }

    function cerrar() {
        document.getElementById("vent").style.display = "none";

    }

</script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="{% static "script/responses.js" %}"></script>
    <script src="{% static "script/chat.js" %}"></script>


</body>
</html>
voicbot 3 years ago			`{% load static %}`
			`<!DOCTYPE html>`
. 3 years ago			`<html lang="de">`
voicbot 3 years ago			`<head>`
			`<meta charset="UTF-8">`
. 3 years ago			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
voicbot 3 years ago
. 3 years ago			`<title>Prototyp VoiceBot</title>`
voicbot 3 years ago
. 3 years ago			`<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">`
voicbot 3 years ago			`<link rel="stylesheet" href="{% static "css/css/common-page.css" %}">`
			`<link rel="stylesheet" href="{% static "css/font-awesome-4.7.0/css/font-awesome.min.css" %}">`
. 3 years ago
			`<!--für den chatbot-->`
voicbot 3 years ago			`<link rel="stylesheet" href="{% static "css/toastr.css" %}">`
			`<link rel="stylesheet" href="{% static "css/css/chat.css" %}">`
			`<link rel="stylesheet" href="{% static "css/css/home.css" %}">`
. 3 years ago
			`<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Source+Sans+Pro:wght@600&display=swap">`
			`<!-- ======= Icon Chat =======-->`
voicbot 3 years ago			`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">`

			`<link rel="stylesheet" href="{% static "css/custom.css" %}">`
			`<script src="{% static "script/jquery-1.10.2.js" %}"></script>`
			`<script src="{% static "script/bootstrap.min.js" %}"></script>`
			`<script src="{% static "script/toastr.js" %}"></script>`

. 3 years ago
			`<!-- Fonts menu nav-->`
			`<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>`


			`</head>`
voicbot 3 years ago
			`<body>`
. 3 years ago			`<!--====== id de la ventana ======-->`
			`<div class="ventana" id="vent">`
			`<div id="cerrar"><a href="javascript:cerrar()"><img src="{% static "img/error_2.png" %}"></a>`
			`</div>`
			`<div class="letras">`
			`<h1>Prototyp Voicebot</h1>`
			`<h2>©KommHUB, Stuttgart 2022</h2>`
			`</div>`
			`</div>`
voicbot 3 years ago
. 3 years ago			`<header>`
. 3 years ago			`<nav class="hauptmenu">`
. 3 years ago			`<!--======= Responsive Menu Nav ======-->`
			`<input type="checkbox" id="check">`
			`<label for="check" class="checkbtn">`
			`<i class="fa fa-bars"></i>`
			`</label>`
			`<ul>`
			`<li><a href="{% url 'index' %}">Home</a></li>`
. 3 years ago			`<li>`
			`<a title="Ziel ist es, Barrierefreiheit möglichst weitestgehend zu gewährleisten. Daher bietet KOMMI zwei unterschiedliche Funktionsweisen an, in denen mehr oder weniger Text vorgelesen wird. "`
			`href="{% url 'barrierefrei' %}" target="_blank">Barrierefrei </a></li>`
			`<!--Ventana Modal-->`
			`<li><a title="Prototyp Voicebot ©KommHUB, Stuttgart 2022`
			`" href="#">Über</a>`

			`</li>`
. 3 years ago			`<li><a href="mailto:KommHUB@komm.one">Kontakt</a></li>`
voicbot 3 years ago			`</ul>`
. 3 years ago			`</nav>`
			`</header>`
. 3 years ago			`<!-- href=# title="Prototyp Voicebot ©KommHUB, Stuttgart 2022" -->`
. 3 years ago
			`<!-- ====== Logo DA ====== -->`
			`<div class="logohome">`
. 3 years ago			`<label class="logo"><a target="_blank" href="https://www.digitalakademie-bw.de"><img`
. 3 years ago			`src="https://www.digitalakademie-bw.de/wp-content/uploads/2018/04/digitalakademie_logo-1.png"`
			`alt="Digitalakademie@bw"></a>`
			`</label>`
			`</div>`
			`<!--======= End Responsive Menu Nav ======-->`

			`<!-- ======= Logo Kommi =======-->`
			`<img class="kommi" src="{% static "img/Voicebot_mitHintergrund.png" %}" width="500" height="400">`

			`<!-- ====== CHAT BAR BLOCK ====== -->`
			`<div class="chat-bar-collapsible">`
			`<button id="chat-button" type="button" class="collapsible">Starten Sie KOMMI!`
			`<i id="chat-icon" style="color: #fff;" class="fa fa-fw fa-comments-o"></i>`
			`</button>`

			`<div class="content">`
			`<div class="full-chat-block">`
			`<!-- Message Container -->`
			`<div class="outer-container">`
			`<div class="chat-container">`
			`<input type="hidden" id="userId">`
			`<!-- Messages -->`
			`<div class="col-md-12">`
voicbot 3 years ago			`<div class="row" id="MessageContent">`
			`</div>`
			`</div>`

. 3 years ago			`<!-- User input box -->`
			`<div class="chat-bar-input-block">`
			`<div id="userInput">`
			`<input id="Message" class="input-box" type="text" name="msg"`
			`placeholder="Geben Sie hier Ihre Frage ein oder nutzen Sie die Sprachfunktion">`
			`<p></p>`
voicbot 3 years ago			`</div>`

. 3 years ago			`<div class="chat-bar-icons">`
			`<i id="chat-icon" style="color: #333;" class="fa fa-fw fa-send"`
			`onclick="Reply()"></i>`
			`<i id="chat-icon" style="color: crimson;" class="fa fa-microphone"`
			`onclick="myFunction2()"></i>`
			`<i id="play" style="color: #333;" class="fa fa-play"`
			`onclick="play()"></i>`

			`<i id="stop" style="color: #333;" class="fa fa-stop"`
			`onclick="stop()"></i>`

voicbot 3 years ago			`</div>`
. 3 years ago			`</div>`
voicbot 3 years ago
. 3 years ago			`<div id="chat-bar-bottom">`
			`<p></p>`
voicbot 3 years ago			`</div>`

. 3 years ago			`</div>`
voicbot 3 years ago			`</div>`

. 3 years ago			`</div>`
voicbot 3 years ago			`</div>`

. 3 years ago			`</div>`
			`<!-- ====== end Chat Bar Block ====== -->`
voicbot 3 years ago
. 3 years ago			`<!--======= JS =======-->`
voicbot 3 years ago			`<script>`
			`toastr.options.positionClass = 'toast-bottom-left';`
			`var pref='{{request.path}}';`
			`pref =pref.replace("chatbot/", "prodae_")+'#';`
			`var sesid = pref+ Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9);`
			`sesid =sesid.substr(1)`
			`console.log(sesid)`
			`$("#userId").val(sesid);`
			`sessionStorage.setItem("chatbot.sessionid", sesid);`

			`var msgText = $('#Message');`
			`$("#Message").keypress(function (e) {`
			`if (e.which == 13) {`
			`Reply();`
			`}`
			`});`
. 3 years ago			`var idaktuell ;`
			`var frageaktuell ;`
			`function set_id(x){`
			`idaktuell = x;`
			`}`

			`function set_frage(x){`
			`frageaktuell = x;`
			`}`
voicbot 3 years ago			`function Reply() {`
			`var msg = msgText.val()`
			`if (msg == '') {`
			`toastr.error("Message can not be empty")`
			`return;`
			`}`

			`var data = {`
			`"msg": msg, "userId":$("#userId").val(), "startcontext": ""`
			`}`
. 3 years ago			`var id= $("#userId").val()`
			`set_id(id)`
			`set_frage(msg)`

voicbot 3 years ago			`$.ajax({`
. 3 years ago			`url: '/kommi/kommi',`
voicbot 3 years ago			`data: JSON.stringify(data),`
			`method: 'POST',`
			`success: function (res) {`
			`drawMessage(res)`

			`},`
			`error: function (err) {`
			`if (err.desc == null)`
			`err.desc = "Something went wrong"`
			`toastr.error(err.desc)`
			`}`
			`})`
. 3 years ago
voicbot 3 years ago			`}`


			`function isObject(obj) {`
			`return (typeof obj === "object" && obj !== null) \|\| typeof obj === "function";`
			`}`
			`var intentbutton = document.getElementsByClassName('btn-ortena');`

			`function toCorona(){`
			`var cdata = document.getElementById("chatbot-button").dataset;`
			`var sessionId = sessionStorage.getItem("ortena.sessionid");`
			`user = "corona_" + cdata.chat + "#" + sessionId;`

			`}`
			`function toOrtena(){`
			`var cdata = document.getElementById("chatbot-button").dataset;`
			`var sessionId = sessionStorage.getItem("ortena.sessionid");`
			`user = cdata.system + "_" + cdata.chat + "#" + sessionId;`
			`}`

. 3 years ago			`function positiv() {`

			`var q= jQuery("<div></div>")`
			`q.addClass("col-md-6").addClass("guest-message")`
			`q.append("<p>Vielen Dank für Ihre Rückmeldung!</p>")`
			`q.appendTo(msgContent)`
			`scrollDown();`

			`console.log('id dfvkdj', idaktuell)`
			`console.log('frage dfvkdj', frageaktuell)`

			`var data = {`
			`"msg": frageaktuell, "userId":idaktuell, "startcontext": ""`
			`}`
			`$.ajax({`
			`url: '/kommi/positiv',`
			`data: JSON.stringify(data),`
			`method: 'POST',`
			`success: function (res) {`


			`},`
			`error: function (err) {`
			`if (err.desc == null)`
			`err.desc = "Something went wrong"`
			`toastr.error(err.desc)`
			`}`
			`})`


			`}`

			`function negativ() {`

			`var q= jQuery("<div></div>")`
			`q.addClass("col-md-6").addClass("guest-message")`
			`q.append("<p>Vielen Dank für Ihre Rückmeldung.</p><p>Es tut uns leid, dass Ihnen diese Antwort nicht weitergeholfen hat. Wir arbeiten kontinuierlich daran, Kommi zu verbessern.</p>")`
			`q.appendTo(msgContent)`
			`scrollDown();`

			`console.log('id dfvkdj', idaktuell)`
			`console.log('frage dfvkdj', frageaktuell)`

			`var data = {`
			`"msg": frageaktuell, "userId":idaktuell, "startcontext": ""`
			`}`
			`$.ajax({`
			`url: '/kommi/negativ',`
			`data: JSON.stringify(data),`
			`method: 'POST',`
			`success: function (res) {`


			`},`
			`error: function (err) {`
			`if (err.desc == null)`
			`err.desc = "Something went wrong"`
			`toastr.error(err.desc)`
			`}`
			`})`


			`}`
voicbot 3 years ago
			`function myFunction(intent_message) {`

			`console.log(intent_message)`
			`"$('.btn-ortena').data('intent');"`
			`var msg = intent_message;`

			`if (msg == '') {`
			`toastr.error("Message can not be empty")`
			`return;`
			`}`

			`var data = {`
			`"msg": msg, "userId":$("#userId").val()`
			`}`
			`$.ajax({`
. 3 years ago			`url: '/kommi/kommi',`
voicbot 3 years ago			`data: JSON.stringify(data),`
			`method: 'POST',`
			`success: function (res) {`
			`drawAnswer(res)`
			`},`
			`error: function (err) {`
			`if (err.desc == null)`
			`err.desc = "Something went wrong"`
			`toastr.error(err.desc)`
			`}`
			`})`

			`}`
			`for (var i = 0; i < intentbutton.length; i++) {`
			`intentbutton[i].addEventListener('click', myFunction);`
			`}`

			`var msgContent = $('#MessageContent');`

			`function drawMessage(res) {`
			`msgContent.append("<div class='col-md-6 owner-message'><p>"+res.ques+"</p></div>");`
. 3 years ago
			`scrollDown();`
voicbot 3 years ago			`drawAnswer(res)`
			`}`
			`function drawAnswer(res) {`

			`var q= jQuery("<div></div>")`
			`q.addClass("col-md-6").addClass("guest-message")`

			`if (Array.isArray(res.res)) {`
			`q.append("<p>"+paint(res.res[0])+"</p>")`
			`} else q.append("<p>"+paint(res.res)+"</p>");`



			`msgText.val('')`

. 3 years ago			`q.append('<div class="feedback"><ul class="feedback__buttons"><li><button class="feedback__button feedback__button--positive gut" aria-label="Positives Feedback für die Antwort abgeben" onclick="positiv()"><i class="fa fa-thumbs-up"></i></button></li><li><button class="feedback__button feedback__button--negative schlecht" aria-label="Negatives Feedback für die Antwort abgeben" onclick="negativ()"><i class="fa fa-thumbs-down"></i></button></li></ul></div>\n')`


voicbot 3 years ago
			`q.appendTo(msgContent)`
. 3 years ago			`scrollDown();`
voicbot 3 years ago			`console.log('res.res[0]', res.res[1])`
			`if (Array.isArray(res.res)) {`
			`botVoice(res.res[1])`
			`} else botVoice(res.res);`

. 3 years ago
			`}`

			`function scrollDown() {`
			`$chatbotMessageWindow = document.querySelector(".full-chat-block");`
			`$chatbotMessages = document.querySelector("#MessageContent");`
			`var distanceToScroll = $chatbotMessageWindow.scrollHeight - ($chatbotMessages.lastChild.offsetHeight + 60);`
			`//jQuery("#MessageContent").animate({scrollTop: distanceToScroll}, 500);`
			`$chatbotMessageWindow.scrollTop = distanceToScroll;`
voicbot 3 years ago			`}`

. 3 years ago




voicbot 3 years ago			`jQuery(document.body).on('click', '.btn-abfallja', function (e) {`
			`var el= jQuery(this).parent().parent().parent().parent();`
			`jQuery(el).find(".abfallja").show()`
			`jQuery(el).find(".abfallnein").hide()`
			`});`
			`jQuery(document.body).on('click', '.btn-abfallnein', function (e) {`
			`var el= jQuery(this).parent().parent().parent().parent();`
			`jQuery(el).find(".abfallnein").show()`
			`jQuery(el).find(".abfallja").hide()`
			`});`
			`function paintStrukturierteAntwort(obj) {`

			`let xstr="";`
			`var items = obj["atwst"];`

			`items.sort(function (a, b) {`
			`return a.pgx - b.pgx;`
			`});`
			`if (items.length > 0) {`

			`xstr += "<div class=\"chatbot-card chatbot-card--antwst\">";`

			`items.forEach(function (item) {`
			`let typ = item.typ;`
			`if (!typ) typ = "atwst"`
			`xstr += paintItem(item, typ)`

			`})`
			`xstr+="</div>";`
			`}`

			`return xstr;`
			`}`
			`function paintItem(item, typ) {`
			`let xstr = "<div class=\"chatbot-card--" + typ + "\">";`
. 3 years ago			`let xcls = "selection"`
voicbot 3 years ago			`if (Number(item.pgx) < 1)`
			`xcls = "selection"`

			`if (item.titel)`
			`xstr+="<div class=\"chatbot-card__header\"><div class=\"chatbot-card__title\">" + item.titel + "</div></div>"`
			`xstr+="<div class=\"chatbot-card__body\">"`
			`if (item.intro)`
			`xstr+="<div class=\"chatbot-intro\">" + item.intro + "</div>"`
			`if (item.btn && item.btn.length > 0) {`

			`xstr+="<div class=\"chatbot-card__" + xcls + "\"><nav><ul class=\"" + xcls + "__items\">"`
			`let btn = item.btn;`
			`btn.sort(function (a, b) {`
			`return Number(a.lfnr) - Number(b.lfnr);`
			`});`
			`btn.forEach(function (element) {`
. 3 years ago			`xstr+="<li class=\"" + xcls + "__item\"><button class=\"btn-ortena\" data-intent=\"" + element.bint + "\""`
voicbot 3 years ago			`xstr+=" onclick=\"myFunction('" + element.bint + "')\">" + element.bzn + "</button></li>"`

			`});`
			`xstr+="</ul></nav></div>";`
			`}`
			`xstr+="</div>";`
			`xstr+="</div>";`

			`return xstr;`
			`}`
			`function paint (val) {`
			`let str = "";`
			`if (val) {`
			`if (Array.isArray(val)) {`
			`if (val.length) {`

			`val.forEach(function (t) {`
			`str = str + paint(t);`
			`});`

			`}`
			`} else if (isObject(val)) {`
			`if(val["atwst"])`
			`{`

			`return paintStrukturierteAntwort(val);}`

			`else`
			`return val;`
			`} else`
			`return val;`
			`}`

			`return str;`
			`}`

			`function paintItemBtn(item, typ) {`
			`let xstr = "<div class=\"chatbot-card--" + typ + "\">";`
			`let xcls = typ`
			`let intro =jQuery(item).data(typ)`
			`let titel=jQuery(item).text()`
			`if (titel)`
			`xstr+="<div class=\"chatbot-card__header\"><div class=\"chatbot-card__title\">" + titel + "</div></div>"`
			`xstr+="<div class=\"chatbot-card__body\">"`
			`if (intro)`
			`xstr+="<div class=\"chatbot-intro\">" + intro + "</div>"`
			`xstr+="</div>";`
			`xstr+="</div>";`

			`return xstr;`
			`}`
			`const voice = document.querySelector(".voice");`
			`const voice2text = document.querySelector(".voice2text");`

			`const SpeechRecognition = window.SpeechRecognition \|\| window.webkitSpeechRecognition;`
			`const recorder = new SpeechRecognition();`
			`recorder.lang = 'de-DE';`

			`function addHumanText(text) {`
			`text= 'Du: ' + text`
			`const chatContainer = document.createElement("div");`
			`chatContainer.classList.add("chat-container");`
			`const chatBox = document.createElement("p");`
			`chatBox.classList.add("voice2text");`
			`const chatText = document.createTextNode(text);`
			`chatBox.appendChild(chatText);`
			`chatContainer.appendChild(chatBox);`
			`return chatContainer;`
			`}`

			`function addBotText(text) {`
			`text = 'Elisa: ' + text`
			`const chatContainer1 = document.createElement("div");`
			`chatContainer1.classList.add("chat-container");`
			`chatContainer1.classList.add("darker");`
			`const chatBox1 = document.createElement("p");`
			`chatBox1.classList.add("voice2text");`
			`const chatText1 = document.createTextNode(text);`
			`chatBox1.appendChild(chatText1);`
			`chatContainer1.appendChild(chatBox1);`
			`return chatContainer1;`
			`}`
. 3 years ago			`var voiceaktuell;`
voicbot 3 years ago
. 3 years ago			`//function to call inside ajax callback`
			`function set_voiceaktuell(x){`
			`voiceaktuell = x;`
			`}`
voicbot 3 years ago			`function botVoice(message) {`
			`const speech = new SpeechSynthesisUtterance();`
			`console.log(message)`
			`speech.text = message`
. 3 years ago			`set_voiceaktuell(message)`
voicbot 3 years ago			`speech.volume = 1;`
			`speech.rate = 1;`
			`speech.pitch = 1;`
			`window.speechSynthesis.speak(speech);`

			`}`

. 3 years ago			`var playEle = document.querySelector('#play');`
			`var pauseEle = document.querySelector('#pause');`
			`var stopEle = document.querySelector('#stop');`
			`var flag = false;`

			`function play(){`

			`console.log('sdkfcsdfvkdj', voiceaktuell)`
			`const speech = new SpeechSynthesisUtterance();`

			`speech.text = voiceaktuell`

			`speech.volume = 1;`
			`speech.rate = 1;`
			`speech.pitch = 1;`
			`window.speechSynthesis.speak(speech);`

			`}`


			`function stop(){`

			`speechSynthesis.cancel();`

			`};`


voicbot 3 years ago			`/* Button start*/`
			`function myFunction2 (){`
. 3 years ago
voicbot 3 years ago			`recorder.start();`
			`console.log('Ready to receive the voice.');`
			`}`

			`recorder.onresult = function (event) {`
			`for (var i = event.resultIndex; i < event.results.length; ++i) {`
			`if (event.results[i].isFinal) {`
. 3 years ago			`var str = event.results[i][0].transcript;`
			`var newstr = str.replace(/Conny/i, "Kommi");`
			`Message.value += newstr;`
voicbot 3 years ago			`}`
. 3 years ago
voicbot 3 years ago			`}`
			`}`

. 3 years ago			`/* ====== Ventana Modal Flotante ====== */`
			`function abrir() {`
			`document.getElementById("vent").style.display = "block";`
			`}`

			`function cerrar() {`
			`document.getElementById("vent").style.display = "none";`

			`}`

voicbot 3 years ago			`</script>`
			`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>`
			`<script src="{% static "script/responses.js" %}"></script>`
			`<script src="{% static "script/chat.js" %}"></script>`


			`</body>`
			`</html>`