<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>

<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: 'row',
            content:[{  type: 'component',
                        componentName: 'chatbot',
                        componentState: component_1,
                        width: 66.66
                    },
                {
                type: 'column',
                content:[{type: 'component',
                        componentName: 'chatbot',
                        componentState: component_2,
                        width: 66.66
                    }
                    ,{type: 'component',
                        componentName: 'chatbot',
                        componentState: component_3,
                        width: 66.66
                    }]
            }]
        }]
    };

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

    window.myLayout = myLayout

           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='false'
                                       edit_mode='false'>
                       </chatbot-openai>`

               container.getElement().html(html)
        });
    setTimeout(()=>{
        //myLayout.destroy();
        myLayout.init()
        send_message_to_llms()
    }, 1)

    function send_message_to_llm(channel, user_prompt) {
        events_utils.send_to_channel("new_input_message", 'MODEL-1', {'user_prompt': user_prompt})
        events_utils.send_to_channel("new_input_message", 'MODEL-2', {'user_prompt': user_prompt})
        events_utils.send_to_channel("new_input_message", 'MODEL-3', {'user_prompt': user_prompt})
    }
    function send_message_to_llms() {
        send_message_to_llm('MODEL-1', 'what is 2+2')
    }
});


</script>