<script type="text/javascript" src="/assets/plugins/golden-layout/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="/assets/plugins/golden-layout/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="/assets/plugins/golden-layout/goldenlayout-dark-theme.css" />

<script type="module" src="/web_components/js/chat-bots/Chatbot_OpenAI.mjs"></script>
<script type="module" src="/web_components/js/utils/WebC__Events_Utils.mjs"></script>
<script type="module" src="/web_components/js/elements/WebC__Chat_Input.mjs"></script>
<script src="/assets/plugins/marked/marked.min.js"></script>

<div id="layout" style="widxth: 100%; height: 100vh;"></div>
<webc-events-utils></webc-events-utils>

<script>
    $(function() {

        var chatbotConfig = [
            { name: "chatbot (Google)"   , platform: "Groq (Free)", provider: "3. Google"   , model: "gemma-7b-it"        , channel: "MODEL-1" },
            { name: "chatbot (Meta)"     , platform: "Groq (Free)", provider: "1. Meta"     , model: "llama3-70b-8192"    , channel: "MODEL-2" },
            { name: "chatbot (Microsoft)", platform: "Groq (Free)", provider: "2. Mistral"  , model: "mixtral-8x7b-32768" , channel: "MODEL-3" }
        ];
        var components = chatbotConfig.map(function(config) {
            return {
                url: "{{ url_athena }}",
                name: config.name,
                model: config.model,
                platform: config.platform,
                provider: config.provider,
                channel: config.channel
            };
        });

        component_1 = components[0]
        component_2 = components[1]
        component_3 = components[2]

        var config = {
        content: [{
            type: 'column',
            content:[{  type: 'component',
                        componentName: 'user_prompt',
                        componentState: {},
                        height: '10'
                    },
                {
                type: 'row',
                content:[ { type: 'component',
                            componentName: 'chatbot',
                            componentState: component_1,
                            width: 40 },
                          { type: 'component',
                            componentName: 'chatbot',
                            componentState: component_2,
                            width: 30} ,
                          { type: 'component',
                            componentName: 'chatbot',
                            componentState: component_3,
                            width: 30 }]
            }]
        }]
    };

    var myLayout = new GoldenLayout( config , "#layout");

    window.myLayout = myLayout
       myLayout.registerComponent('user_prompt', function(container, componentState) {
           html = `<webc-chat-input></webc-chat-input>`
           container.getElement().html(html)
       })

       myLayout.registerComponent('chatbot', function(container, componentState) {
           html = `<chatbot-openai name="${componentState.name}"
                                   channel="${componentState.channel}"
                                   platform="${componentState.platform}"
                                   provider="${componentState.provider}"
                                   model="${componentState.model}"
                                   show_sent_messages='true'
                                   edit_mode='false'>
                   </chatbot-openai>`

           container.getElement().html(html)
    });
    setTimeout(()=>{
        //myLayout.destroy();
        myLayout.init()
        //let initial_prompt = 'what is 40+2'
        //send_message_to_llms(initial_prompt)
        hook_send_button()
    }, 1)

    function send_message_to_llm(channel, user_prompt) {
        events_utils.send_to_channel("new_input_message", channel, {'user_prompt': user_prompt})
    }
    function send_message_to_llms(message) {
        send_message_to_llm('MODEL-1',message )
        send_message_to_llm('MODEL-2',message )
        send_message_to_llm('MODEL-3',message )
    }
    function hook_send_button() {
        function on_click() {
            current_text = $('webc-chat-input')[0].input.value
            send_message_to_llms(current_text)
        }

        $('webc-chat-input')[0].send_user_message_event = on_click
        $('webc-chat-input')[0].on_action_button = on_click

        $('webc-chat-input')[0].input.value = 'What is OWASP?'
    }

});


</script>