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>
                        <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1" data-toggle="tab" href="#tuning-tab" role="tab" aria-controls="html-chunking" aria-selected="false">
                                Tuning
                            </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="generateNewApiKey()">Register API Key</button>
                        <!-- API Key Display Field -->
                        <div id="api-key-field" style="display:none;">
                            <label for="api-key">API Key:</label>
                            <input type="text" id="api-key" class="form-control" readonly>
                            <button type="button" id="copy-button" class="btn btn-primary">Copy to Clipboard</button>
                            <p id="copy-message" style="display:none;color:green;">API key copied to clipboard</p>
                        </div>
                    </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>
                    <!-- Tuning Settings Tab -->
                    <div class="tab-pane fade" id="tuning-tab" role="tabpanel">
                        {% set tuning_fields = ['embed_tuning', 'rag_tuning', ] %}
                        {% for field in form %}
                            {{ render_included_field(field, disabled_fields=tuning_fields, include_fields=tuning_fields) }}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}


{% block content_footer %}

{% endblock %}

{% block scripts %}
<script>
    function generateNewApiKey() {
        $.ajax({
            url: '/user/generate_chat_api_key',
            type: 'POST',
            contentType: 'application/json',
            success: function(response) {
                $('#api-key').val(response.api_key);
                $('#api-key-field').show();
            },
            error: function(error) {
                alert('Error generating new API key: ' + error.responseText);
            }
        });
    }

    function copyToClipboard(selector) {
        const element = document.querySelector(selector);
        if (element) {
            const text = element.value;
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function() {
                    showCopyMessage();
                }).catch(function(error) {
                    alert('Failed to copy text: ' + error);
                });
            } else {
                fallbackCopyToClipboard(text);
            }
        } else {
            console.error('Element not found for selector:', selector);
        }
    }

    function fallbackCopyToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            showCopyMessage();
        } catch (err) {
            alert('Fallback: Oops, unable to copy', err);
        }
        document.body.removeChild(textArea);
    }

    function showCopyMessage() {
        const message = document.getElementById('copy-message');
        if (message) {
            message.style.display = 'block';
            setTimeout(function() {
                message.style.display = 'none';
            }, 2000);
        }
    }

    document.getElementById('copy-button').addEventListener('click', function() {
        copyToClipboard('#api-key');
    });
</script>
<script>
    // JavaScript to detect user's timezone
    document.addEventListener('DOMContentLoaded', (event) => {
        // Detect timezone
        const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

        // Send timezone to the server via a POST request
        fetch('/set_user_timezone', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ timezone: userTimezone })
        }).then(response => {
            if (response.ok) {
                console.log('Timezone sent to server successfully');
            } else {
                console.error('Failed to send timezone to server');
            }
        });
    });
</script>
{% endblock %}