eveAI/eveai_app/templates/user/tenant_overview.html

{% extends 'base.html' %}
{% from "macros.html" import render_field, render_included_field %}

{% block title %}Tenant Overview{% endblock %}

{% block content_title %}Tenant Overview{% endblock %}
{% block content_description %}Tenant information{% endblock %}

{% block content %}
    <form method="post">
        {{ form.hidden_tag() }}
        <!-- Main Tenant Information -->
        {% set main_fields = ['name', 'website', 'default_language', 'allowed_languages'] %}
        {% for field in form %}
            {{ render_included_field(field, disabled_fields=main_fields, include_fields=main_fields) }}
        {% endfor %}

        <!-- Nav Tabs -->
        <div class="row">
            <div class="col-lg-12">
                <div class="nav-wrapper position-relative end-0">
                    <ul class="nav nav-pills nav-fill p-1" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link mb-0 px-0 py-1 active" data-toggle="tab" href="#model-info-tab" role="tab" aria-controls="model-info" aria-selected="true">
                                Model Information
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#license-info-tab" role="tab" aria-controls="license-info" aria-selected="false">
                                License Information
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#html-chunking-tab" role="tab" aria-controls="html-chunking" aria-selected="false">
                                HTML Chunking
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#embedding-search-tab" role="tab" aria-controls="html-chunking" aria-selected="false">
                                Embedding Search
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content tab-space">
                    <!-- Model Information Tab -->
                    <div class="tab-pane fade show active" id="model-info-tab" role="tabpanel">
                        {% set model_fields = ['embedding_model', 'llm_model'] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=model_fields, include_fields=model_fields) }}
                        {% endfor %}
                    </div>
                    <!-- License Information Tab -->
                    <div class="tab-pane fade" id="license-info-tab" role="tabpanel">
                        {% set license_fields = ['license_start_date', 'license_end_date', 'allowed_monthly_interactions', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=license_fields, include_fields=license_fields) }}
                        {% endfor %}
                        <!-- Register API Key Button -->
                        <button type="button" class="btn btn-primary" onclick="checkAndRegisterApiKey()">Register API Key</button>
                    </div>
                    <!-- HTML Chunking Settings Tab -->
                    <div class="tab-pane fade" id="html-chunking-tab" role="tabpanel">
                        {% set html_fields = ['html_tags', 'html_end_tags', 'html_included_elements', 'html_excluded_elements', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=html_fields, include_fields=html_fields) }}
                        {% endfor %}
                    </div>
                    <!-- Embedding Search Settings Tab -->
                    <div class="tab-pane fade" id="embedding-search-tab" role="tabpanel">
                        {% set es_fields = ['es_k', 'es_similarity_threshold', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=es_fields, include_fields=es_fields) }}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- Modal HTML -->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirm New API Key</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body-content">
                    Are you sure you want to register a new API key? This will replace the existing key.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmNewKeyBtn">Confirm</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block content_footer %}

{% endblock %}

{% block scripts %}
<script>
        function checkAndRegisterApiKey() {
            // First, check if an API key already exists
            $.ajax({
                url: '/user/check_chat_api_key',
                type: 'POST',
                contentType: 'application/json',
                success: function(response) {
                    if (response.api_key_exists) {
                        $('#confirmModal').modal('show');
                    } else {
                        generateNewApiKey();
                    }
                },
                error: function(error) {
                    alert('Error checking API key: ' + error.responseText);
                }
            });
        }

        document.getElementById('confirmNewKeyBtn').addEventListener('click', function () {
            generateNewApiKey();
        });

        function generateNewApiKey() {
            $.ajax({
                url: '/user/generate_chat_api_key',
                type: 'POST',
                contentType: 'application/json',
                success: function(response) {
                    $('#modal-body-content').html(`
                    <p>New API key generated: <span id="new-api-key">${response.api_key}</span></p>
                    <button class="btn btn-primary" onclick="copyToClipboard('#new-api-key')">Copy to Clipboard</button>
                    <p id="copy-message" style="display:none;color:green;">API key copied to clipboard</p>
                    `);
                    $('#confirmNewKeyBtn').hide();
                    $('.btn-secondary').text('OK');
                },
                error: function(error) {
                    alert('Error generating new API key: ' + error.responseText);
                }
            });
        }

        function copyToClipboard(element) {
        const text = $(element).text();
        navigator.clipboard.writeText(text).then(function() {
            $('#copy-message').show().delay(2000).fadeOut();
        }).catch(function(error) {
            alert('Failed to copy text: ' + error);
        });
    }
    </script>
{% endblock %}