<template>
    <div id="lechat">
        <div class="row">
            <h3>{{ messages.get("ai_services_config", "ai_services_config_infos_params") }}</h3>
        </div>

        <!-- serveur -->
        <div class="row">
            <div class="colonne4">
                <label for="url_server">
                    {{ messages.get("ai_services_config", "ai_services_config_url_server") }}
                    <span :aria-label="messages.get('ai_services_config', 'ai_services_required_message')">
                        {{ messages.get("ai_services_config", "ai_services_required_symbol") }}
                    </span>
                </label>
            </div>
            <div class="colonne_suite">
                <div class="row">
                    <input id="url_server" name="url_server" type="text" class="saisie-80em" required
                        v-model="aiserviceconfig.url_server" />
                </div>
            </div>
            <div class="colonne_suite">
                <input @click="getModels" class="bouton" type="button"
                    :value="messages.get('ai_services_config', 'ai_services_config_load_models')" />
            </div>
        </div>

        <!-- Auth token -->
        <div class="row">
            <div class="colonne4">
                <label for="auth_token">{{ messages.get("ai_services_config", "ai_services_config_auth_token") }}</label>
                <div class="row"><p>{{ messages.get("ai_services_config", "ai_services_config_auth_token_description") }}</p></div>
            </div>
            <div class="colonne_suite">
                <div class="row">
                    <input id="auth_token" name="auth_token" type="text" class="saisie-80em"
                        v-model="aiserviceconfig.auth_token" />
                </div>
            </div>
        </div>

        <!-- model -->
        <div class="row">
            <div class="colonne4">
                <label for="chat_model">
                    {{ messages.get("ai_services_config", "ai_services_config_chat_model") }}
                    <span :aria-label="messages.get('ai_services_config', 'ai_services_required_message')">
                        {{ messages.get("ai_services_config", "ai_services_required_symbol") }}
                    </span>
                </label>
            </div>
            <div class="colonne_suite">
                <div class="row">
                    <select id="chat_model" name="chat_model" class="saisie-80em" v-model="aiserviceconfig.chat_model"
                        required>
                        <option value="">{{ messages.get("ai_services_config", "ai_services_config_model_select") }}
                        </option>
                        <option v-if="listmodels" v-for="model in listmodels" :value="model">{{ model }}</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Embeddings model -->
        <div class="row">
            <div class="colonne4">
                <label for="embeddings_model">
                    {{ messages.get("ai_services_config", "ai_services_config_embeddings_model") }}
                    <span :aria-label="messages.get('ai_services_config', 'ai_services_required_message')">
                        {{ messages.get("ai_services_config", "ai_services_required_symbol") }}
                    </span>
                </label>
            </div>
            <div class="colonne_suite">
                <div class="row">
                    <select id="embeddings_model" name="embeddings_model" class="saisie-80em"
                        v-model="aiserviceconfig.embeddings_model" required>
                        <option value="">{{ messages.get("ai_services_config", "ai_services_config_model_select") }}
                        </option>
                        <option v-if="listmodels" v-for="model in listmodels" :value="model">{{ model }}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <h3>
                <img class="img_plus" :src="visibleOptions ? 'images/minus.gif' : 'images/plus.gif'" @click="toggle">
                {{ messages.get("ai_services_config", "ai_services_config_infos_options") }}
            </h3>
        </div>

        <div v-show="visibleOptions">
            <p>{{ messages.get("ai_services_config", "ai_services_config_infos_options_description") }}</p>

            <!-- num_ctx -->
            <div class="row">
                <div class="colonne4">
                    <label for="num_ctx">
                        {{ messages.get("ai_services_config", "ai_services_config_num_ctx") }}
                    </label>
                </div>
                <div class="colonne_suite">
                    <div class="row">
                        <input
                            v-model.number="aiserviceconfig.options.num_ctx"
                            id="num_ctx" name="num_ctx"
                            type="number"
                            class="saisie-80em"
                            :placeholder="messages.get('ai_services_config', 'ai_services_config_num_ctx_placeholder')">
                    </div>
                </div>
            </div>

            <!-- temperature -->
            <div class="row">
                <div class="colonne4">
                    <div class="row">
                        <label for="temperature">{{ messages.get("ai_services_config", "ai_services_config_temperature") }}</label>
                    </div>
                    <div class="row">
                        <p>{{ messages.get("ai_services_config", "ai_services_config_temperature_description") }}</p>
                    </div>
                </div>
                <div class="colonne_suite">
                    <div class="row">
                        <input
                            v-model.number="aiserviceconfig.options.temperature"
                            id="temperature"
                            name="temperature"
                            type="number"
                            class="saisie-80em"
                            step="0.1"
                            :placeholder="messages.get('ai_services_config', 'ai_services_config_temperature_placeholder')">
                    </div>
                </div>
            </div>

            <!-- top_k -->
            <div class="row">
                <div class="colonne4">
                    <div class="row">
                        <label for="top_k">{{ messages.get("ai_services_config", "ai_services_config_top_k") }}</label>
                    </div>
                    <div class="row"><p>{{ messages.get("ai_services_config", "ai_services_config_top_k_description") }}</p></div>
                </div>
                <div class="colonne_suite">
                    <div class="row">
                        <input
                            v-model.number="aiserviceconfig.options.top_k"
                            id="top_k"
                            name="top_k"
                            type="number"
                            class="saisie-80em"
                            :placeholder="messages.get('ai_services_config', 'ai_services_config_top_k_placeholder')">
                    </div>
                </div>
            </div>


            <!-- top_p -->
            <div class="row">
                <div class="colonne4">
                    <div class="row">
                        <label for="top_p">{{ messages.get("ai_services_config", "ai_services_config_top_p") }}</label>
                    </div>
                    <div class="row"><p>{{ messages.get("ai_services_config", "ai_services_config_top_p_description") }}</p></div>
                </div>
                <div class="colonne_suite">
                    <div class="row">
                        <input
                            v-model.number="aiserviceconfig.options.top_p"
                            id="top_p"
                            name="top_p"
                            type="number"
                            class="saisie-80em"
                            step="0.1"
                            :placeholder="messages.get('ai_services_config', 'ai_services_config_top_p_placeholder')">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["aiserviceconfig"],
    data() {
        return {
            listmodels: false,
            visibleOptions: false,
        }
    },
    created: function () {
        if (typeof this.aiserviceconfig.auth_token == 'undefined') {
            this.$set(this.aiserviceconfig, "auth_token", '');
        }
        if (typeof this.aiserviceconfig.url_server == 'undefined') {
            this.$set(this.aiserviceconfig, "url_server", '');
        }
        if (typeof this.aiserviceconfig.chat_model == 'undefined') {
            this.$set(this.aiserviceconfig, "chat_model", '');
        }
        if (typeof this.aiserviceconfig.auth_token == 'undefined') {
            this.$set(this.aiserviceconfig, "auth_token", '');
        }
        if (typeof this.aiserviceconfig.embeddings_model == 'undefined') {
            this.$set(this.aiserviceconfig, "embeddings_model", '');
        }

        this.initOptions();

        if (this.aiserviceconfig.url_server) {
           this.getModels();
        }
    },
    methods: {
        toggle() {
            this.visibleOptions = !this.visibleOptions;
        },
        initOptions() {
            if (typeof this.aiserviceconfig.options == 'undefined') {
                this.$set(this.aiserviceconfig, "options", {});
            }

            if (typeof this.aiserviceconfig.options.num_ctx == 'undefined') {
                this.$set(this.aiserviceconfig.options, "num_ctx", '');
            }

            if (typeof this.aiserviceconfig.options.temperature == 'undefined') {
                this.$set(this.aiserviceconfig.options, "temperature", '');
            }

            if (typeof this.aiserviceconfig.options.top_k == 'undefined') {
                this.$set(this.aiserviceconfig.options, "top_k", '');
            }

            if (typeof this.aiserviceconfig.options.top_p == 'undefined') {
                this.$set(this.aiserviceconfig.options, "top_p", '');
            }
        },
        async getModels() {
            this.showLoader();

            let formData = new FormData();
            formData.append('data', JSON.stringify({
                id: this.aiserviceconfig.id,
                parameters: {
                    url_server: this.aiserviceconfig.url_server,
                    auth_token: this.aiserviceconfig.auth_token,
                },
            }));

            const response = await fetch("./ajax.php?module=admin&categ=ai&sub=services_ai_config&action=getmodels", {
                method: 'POST',
                body: formData,
            });
            const data = await response.json();
            this.hiddenLoader();

            if (data.listModels) {
                this.$set(this, "listmodels", data.listModels);
            } else {
                this.notif.error(this.messages.get('ai_services_config', 'ai_services_config_get_models_failed'));
            }
        }
    }
}
</script>
