Upload 7 files

templates/chat.html

@@ -1,152 +1,182 @@
-{% extends 'base.html' %}
-
-{% block content %}
-
-<style>
-    /* Ensure full-page setup */
-    html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-    }
-
-    .container {
-        display: flex;
-        height: 75vh; /* Increased height from 50vh to 75vh */
-        margin-top: 50px;
-    }
-
-    /* Styling for left and right panes */
-    .card {
-        height: 100%; /* Ensures cards fill the container height */
-        overflow: hidden; /* Prevents overflow of content */
-    }
-
-    .row {
-        height: 100%; /* Ensures the row fills the container */
-        margin: auto;
-    }
-
-    .col-md-5 {
-        display: flex;
-        flex-direction: column;
-        gap: 20px; /* Adds space between left and right containers */
-        max-height: 100%;
-    }
-
-    .card-body {
-        display: flex;
-        flex-direction: column;
-        height: auto; /* Occupies full height of the card */
-    }
-
-    /* Scrollable left pane's history section */
-    .history-section {
-        overflow-y: auto; /* Adds vertical scrolling */
-        flex: 1; /* Ensures this section takes up remaining space */
-        overflow-x: hidden;
-    }
-
-    /* Scrollbar customization */
-    .history-section::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    .history-section::-webkit-scrollbar-thumb {
-        background-color: #888;
-        border-radius: 4px;
-    }
-
-    .history-section::-webkit-scrollbar-thumb:hover {
-        background-color: #555;
-    }
-
-    .history-section::-webkit-scrollbar-track {
-        background-color: #f1f1f1;
-    }
-
-    /* Space between left and right columns */
-    .row > .col-md-5:not(:last-child) {
-        margin-right: 20px; /* Adds space between left and right pane */
-    }
-
-    /* Form input and button adjustments */
-    .form-group input {
-        border-radius: 4px;
-    }
-
-    .btn-primary {
-        background-color: #007bff;
-        border-color: #007bff;
-    }
-
-    .btn-primary:hover {
-        background-color: #0056b3;
-        border-color: #0056b3;
-    }
-
-    /* Scrollable left section for queries */
-    .answer-section {
-        background: #2c2c3e;
-        padding: 10px;
-        border-radius: 4px;
-        border: 1px solid #2c2c3e;
-    }
-</style>
-
-<div class="container">
-    <div class="row justify-content-center">
-        <!-- Left Pane -->
-        <div class="col-md-5">
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">Document AI</h5>
-                    <p class="card-text">Enter a query and get an answer based on the stored context.</p>
-
-                    <form method="POST" action="{{ url_for('chat') }}">
-                        <div class="form-group">
-                            <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}"
-                                required class="form-control">
-                        </div>
-                        <div class="form-group mt-2">
-                            <button type="submit" class="btn btn-primary">Submit</button>
-                        </div>
-                    </form>
-
-                    {% if answer %}
-                    <div class="answer-section mt-3">
-                        <h6>Answer:</h6>
-                        <div class="answer">{{ answer }}</div>
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-
-        <!-- Right Pane -->
-        <div class="col-md-5">
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">Previous Queries</h5>
-                    <div class="history-section">
-                        {% for question, answer in history %}
-                        <div class="card mb-3">
-                            <div class="card-body">
-                                <div class="question">
-                                    <strong>Query:</strong> {{ question }}
-                                </div>
-                                <hr>
-                                <div class="answer mt-2">
-                                    <strong>Answer:</strong> {{ answer }}
-                                </div>
-                            </div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
+{% extends 'base.html' %}
+
+{% block content %}
+
+<style>
+    /* Ensure full-page setup */
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        background-color: #1e1e2e;
+        color: white;
+        font-family: Arial, sans-serif;
+    }
+
+    .container {
+        display: flex;
+        height: 80vh;
+        margin-top: 40px;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+    }
+
+    .card {
+        background: #2c2c3e;
+        border-radius: 10px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+        padding: 20px;
+        width: 45%;
+        height: 100%;
+    }
+
+    .card-title {
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .form-group input {
+        border-radius: 6px;
+        padding: 10px;
+    }
+
+    .btn-primary {
+        background-color: #007bff;
+        border-color: #007bff;
+        width: 100%;
+        padding: 10px;
+        border-radius: 6px;
+    }
+
+    .btn-primary:hover {
+        background-color: #0056b3;
+        border-color: #0056b3;
+    }
+
+    /* Loader */
+    .loader {
+        display: none;
+        border: 4px solid rgba(255, 255, 255, 0.3);
+        border-top: 4px solid #007bff;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+        margin: auto;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    /* Answer Section */
+    .answer-section{
+        overflow-y: auto;
+        max-height: 70vh;
+        padding: 10px;
+        border-radius: 6px;
+        background: #2c2c3e;
+    }
+
+    .answer-section h6 {
+        color: #ffffff;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .answer-item {
+        background: #1a1a2e;
+        padding: 10px;
+        border-radius: 6px;
+        margin-bottom: 10px;
+    }
+
+    /* History Section */
+    .history-section {
+        overflow-y: auto;
+        max-height: 70vh;
+        padding: 10px;
+        border-radius: 6px;
+        background: #2c2c3e;
+    }
+
+    .history-item {
+        background: #1a1a2e;
+        padding: 10px;
+        border-radius: 6px;
+        margin-bottom: 10px;
+    }
+
+    .alert-error {
+        background-color: #ff4d4d;
+        color: white;
+    }
+
+    .alert-table_selected {
+        background-color: #4dff74;
+        color: white;
+    }
+
+</style>
+
+<div class="container">
+    <!-- Left Pane -->
+    <div class="card">
+        <h5 class="card-title">Document AI</h5>
+        <p>Enter a query and get an answer based on stored context.</p>
+        
+        <form method="POST" action="{{ url_for('chat') }}" onsubmit="showLoader()">
+            <div class="form-group">
+                <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}" required class="form-control">
+            </div>
+            <div class="form-group mt-2">
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </div>
+        </form>
+
+        <div class="loader" id="loader"></div>
+        
+        {% if answer %}
+        <div class="answer-section">
+            <div class="answer-item">
+            <h6><strong>Answer:</strong></h6>
+            <hr>
+            {{ answer }}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Right Pane -->
+    <div class="card">
+        <h5 class="card-title">Previous Queries</h5>
+        <div class="history-section">
+            {% for question, answer in history %}
+            <div class="history-item">
+                <div><strong>Query:</strong> {{ question }}</div>
+                <hr>
+                <div><strong>Answer:</strong> {{ answer }}</div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<script>
+    function showLoader() {
+        document.getElementById('loader').style.display = 'block';
+        document.querySelector('.answer-section')?.classList.add('d-none');
+    }
+
+    // Ensure the answer section is visible when an answer is displayed
+    window.onload = function() {
+        if (document.querySelector('.answer-section')) {
+            document.querySelector('.answer-section').classList.remove('d-none');
+        }
+    };
+</script>
+
 {% endblock %}

templates/create_db.html

@@ -1,215 +1,198 @@
-{% extends 'base.html' %}
-
-{% block content %}
-<style>
-    html, body {
-        height: 100%;
-        margin: 0;
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: 80vh; /* Fill the viewport height */
-    }
-
-    .card {
-        margin: auto;
-        background-color: #2c2c3e;
-        color: #f5f5f5;
-        border: none;
-        width: 50%;
-        height: 70%; /* Fixed height for the card */
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        padding: 1rem;
-    }
-
-    .card-header {
-        background-color: #181831;
-        border-bottom: 2px solid #444;
-        padding: 1rem;
-        text-align: center;
-    }
-
-    .form-label {
-        font-weight: bold;
-        color: #cfcfcf;
-    }
-
-    .form-control {
-        background-color: #1e1e2f;
-        color: #f5f5f5;
-        border: 1px solid #444;
-    }
-
-    .form-control:focus {
-        background-color: #1e1e2f;
-        color: #f5f5f5;
-        border-color: #4c4cff;
-        box-shadow: 0 0 4px #4c4cff;
-    }
-
-    .btn-primary {
-        background-color: #4c4cff;
-        border-color: #4c4cff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-    }
-
-    .btn-primary:hover {
-        background-color: #3838e8;
-        border-color: #3838e8;
-    }
-
-    .toggle-switch {
-        margin: 1rem 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .toggle-switch input {
-        display: none;
-    }
-
-    .toggle-label {
-        background-color: #444;
-        color: #cfcfcf;
-        padding: 0.5rem 1.5rem;
-        border: 1px solid #555;
-        cursor: pointer;
-        margin-right: 1rem;
-        text-align: center;
-        border-radius: 4px;
-    }
-
-    .toggle-label.active {
-        background-color: #4c4cff;
-        color: #fff;
-    }
-
-    .hidden {
-        display: none;
-    }
-
-    .text-center.d-flex {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100px;
-    }
-
-    /* Spinner style */
-    .button-spinner {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        border: 4px solid #f5f5f5;
-        border-top: 4px solid #4c4cff;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        display: none;
-    }
-
-    /* Animation for the spinner */
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-
-    /* Hide spinner when not loading */
-    .btn-loading .button-spinner {
-        display: inline-block;
-    }
-
-    .btn-loading .btn-text {
-        display: none;
-    }
-</style>
-
-<div class="container mt-5">
-    <div class="card shadow">
-        <div class="card-header">
-            <h3>Create a New Vector Database</h3>
-        </div>
-        <div class="card-body">
-            <form id="db-form" method="post" enctype="multipart/form-data">
-                <!-- Database Name Input -->
-                <div class="form-group">
-                    <label for="db_name" class="form-label">Database Name</label>
-                    <input type="text" id="db_name" name="db_name" class="form-control" placeholder="Enter database name" required>
-                </div>
-
-                <!-- Toggle Upload Mode -->
-                <div class="toggle-switch">
-                    <label class="toggle-label active" id="folder-label" for="upload-folder">Upload Folder</label>
-                    <label class="toggle-label" id="file-label" for="upload-file">Upload Files</label>
-                </div>
-
-                <!-- Folder Upload Input -->
-                <div id="folder-upload" class="form-group mt-3">
-                    <label for="folder" class="form-label">Upload Folder</label>
-                    <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple>
-                    <small class="text-muted">Note: You can upload a folder containing multiple files.</small>
-                </div>
-
-                <!-- Single File Upload Input -->
-                <div id="file-upload" class="form-group mt-3 hidden">
-                    <label for="file" class="form-label">Upload Files</label>
-                    <input type="file" id="file" name="file" class="form-control" multiple>
-                    <small class="text-muted">Note: You can upload one or more files.</small>
-                </div>
-
-                <!-- Submit Button -->
-                <div class="mt-4 text-center d-flex justify-content-center align-items-center">
-                    <button type="submit" class="btn btn-primary px-5" id="submit-button">
-                        <span class="btn-text">Create</span>
-                        <div class="button-spinner"></div>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<script>
-    const folderLabel = document.getElementById('folder-label');
-    const fileLabel = document.getElementById('file-label');
-    const folderUpload = document.getElementById('folder-upload');
-    const fileUpload = document.getElementById('file-upload');
-    const submitButton = document.getElementById('submit-button');
-    const buttonSpinner = submitButton.querySelector('.button-spinner');
-
-    // Toggle upload mode
-    folderLabel.addEventListener('click', () => {
-        folderLabel.classList.add('active');
-        fileLabel.classList.remove('active');
-        folderUpload.classList.remove('hidden');
-        fileUpload.classList.add('hidden');
-    });
-
-    fileLabel.addEventListener('click', () => {
-        fileLabel.classList.add('active');
-        folderLabel.classList.remove('active');
-        fileUpload.classList.remove('hidden');
-        folderUpload.classList.add('hidden');
-    });
-
-    // Handle form submission
-    document.getElementById('db-form').addEventListener('submit', function(event) {
-        event.preventDefault(); // Prevent form submission for demonstration
-        submitButton.classList.add('btn-loading');
-        // Simulate loading
-        setTimeout(() => {
-            // After form is "submitted" and loading is complete
-            submitButton.classList.remove('btn-loading');
-            alert("Form submitted successfully!"); // Simulate success
-        }, 2000); // 2 seconds for loading simulation
-    });
-</script>
-
-{% endblock %}
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+    html, body {
+        height: 50%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 80vh; /* Fill the viewport height */
+    }
+
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%;
+        height: 70%; /* Fixed height for the card */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 1rem;
+    }
+
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+    }
+
+    .form-label {
+        font-weight: bold;
+        color: #cfcfcf;
+    }
+
+    .form-control {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border: 1px solid #444;
+    }
+
+    .form-control:focus {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border-color: #4c4cff;
+        box-shadow: 0 0 4px #4c4cff;
+    }
+
+    .button-spinner {
+        display: none;
+        border: 2px solid #f5f5f5;
+        border-radius: 50%;
+        border-top: 2px solid #4c4cff;
+        width: 24px;
+        height: 24px;
+        animation: spin 1s linear infinite;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+    .btn:active .button-spinner {
+        display: block;
+    }
+
+
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+
+    .toggle-switch {
+        margin: 1rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .toggle-switch input {
+        display: none;
+    }
+
+    .toggle-label {
+        background-color: #444;
+        color: #cfcfcf;
+        padding: 0.5rem 1.5rem;
+        border: 1px solid #555;
+        cursor: pointer;
+        margin-right: 1rem;
+        text-align: center;
+        border-radius: 4px;
+    }
+
+    .toggle-label.active {
+        background-color: #4c4cff;
+        color: #fff;
+    }
+
+    .toggle-label:hover {
+        background-color: #3838e8;
+        color: #fff;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .text-center.d-flex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px;
+    }
+</style>
+
+<div class="container mt-5">
+    <div class="card shadow">
+        <div class="card-header">
+            <h3>Create a New Vector Database</h3>
+        </div>
+        <div class="card-body">
+            <form id="db-form" method="post" enctype="multipart/form-data">
+                <!-- Database Name Input -->
+                <div class="form-group">
+                    <label for="db_name" class="form-label">Database Name</label>
+                    <input type="text" id="db_name" name="db_name" class="form-control" placeholder="Enter database name" required>
+                </div>
+
+                <!-- Toggle Upload Mode -->
+                <div class="toggle-switch">
+                    <label class="toggle-label active" id="folder-label" for="folder">Upload Folder</label>
+                    <label class="toggle-label" id="file-label" for="file">Upload Files</label>
+                </div>
+
+                <!-- Folder Upload Input -->
+                <div id="folder-upload" class="form-group mt-3 hidden">
+                    <label for="folder" class="form-label">Upload Folder</label>
+                    <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple>
+                    <small class="text-muted">Note: You can upload a folder containing multiple files.</small>
+                </div>
+
+                <!-- Single File Upload Input -->
+                <div id="file-upload" class="form-group mt-3 hidden">
+                    <label for="file" class="form-label">Upload Files</label>
+                    <input type="file" id="file" name="file" class="form-control" multiple >
+                    <small class="text-muted">Note: You can upload one or more files.</small>
+                </div>
+
+                <!-- Submit Button -->
+                <div class="mt-4 text-center d-flex justify-content-center align-items-center">
+                    <button type="submit" class="btn btn-primary px-5">
+                        <span class="btn-text">Create</span>
+                        <div class="button-spinner"></div>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    const folderLabel = document.getElementById('folder-label');
+    const fileLabel = document.getElementById('file-label');
+    const folderUpload = document.getElementById('folder-upload');
+    const fileUpload = document.getElementById('file-upload');
+
+    // Toggle upload mode
+    folderLabel.addEventListener('click', () => {
+        folderLabel.classList.add('active');
+        fileLabel.classList.remove('active');
+        folderUpload.classList.remove('hidden');
+        fileUpload.classList.add('hidden');
+    });
+
+    fileLabel.addEventListener('click', () => {
+        fileLabel.classList.add('active');
+        folderLabel.classList.remove('active');
+        fileUpload.classList.remove('hidden');
+        folderUpload.classList.add('hidden');
+    });
+</script>
+
+{% endblock %}

templates/list_dbs.html

@@ -1,130 +1,157 @@
-{% extends 'base.html' %}
-
-{% block content %}
-<style>
-    /* Full-page setup */
-    html, body {
-        height: 100%;
-        margin: 0;
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: 50vh; /* Full viewport height */
-        justify-content: center;
-        align-items: center;
-    }
-
-    /* Card styling */
-    .card {
-        margin: auto;
-        background-color: #2c2c3e;
-        color: #f5f5f5;
-        border: none;
-        width: 50%;
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Refined shadow effect */
-        max-height: calc(50vh - 50px); /* Adjust to fit within view */
-        overflow: hidden; /* Ensures no overflow from child elements */
-    }
-
-    /* Fixed header */
-    .card-header {
-        background-color: #181831;
-        border-bottom: 2px solid #444;
-        padding: 1rem;
-        text-align: center;
-        position: sticky; /* Keeps header fixed */
-        top: 0;
-        z-index: 1000; /* Ensures it stays above scrollable content */
-    }
-
-    .card-body {
-        max-height: 60vh; /* Limits height of scrollable area */
-        overflow-y: auto; /* Adds vertical scrolling */
-    }
-
-    /* Scrollbar customization */
-    .card-body::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    .card-body::-webkit-scrollbar-thumb {
-        background-color: #444; /* Thumb color */
-        border-radius: 4px; /* Rounded scrollbar edges */
-    }
-
-    .card-body::-webkit-scrollbar-thumb:hover {
-        background-color: #555; /* Thumb hover color */
-    }
-
-    .card-body::-webkit-scrollbar-track {
-        background-color: #2c2c3e; /* Track background */
-    }
-
-    /* List group items */
-    .list-group-item {
-        background-color: #2c2c3e;
-        color: #f5f5f5;
-        border: 1px solid #444;
-        transition: background-color 0.3s ease;
-    }
-
-    .list-group-item:hover {
-        background-color: #383850;
-    }
-
-    /* Button styling */
-    .btn-primary {
-        background-color: #4c4cff;
-        border-color: #4c4cff;
-    }
-
-    .btn-primary:hover {
-        background-color: #3838e8;
-        border-color: #3838e8;
-    }
-    /* Align buttons side-by-side */
-    .button-container {
-        display: flex;
-        gap: 0.5rem; /* Adds space between buttons */
-    }
-
-    .btn-primary {
-        flex: 1; /* Ensures buttons have the same width */
-    }
-
-    /* Optional: Adjust margin and padding for better spacing */
-    .list-group-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-</style>
-
-<div class="container">
-    <div class="card shadow">
-        <div class="card-header">
-            <h3>Available Vector Databases</h3>
-        </div>
-        <div class="card-body">
-            <h4 class="text-center mb-4">Select a Vector Database</h4>
-            <ul class="list-group">
-                {% for db in vector_dbs %}
-                <li class="list-group-item">
-                    <span>{{ db }}</span>
-                    <div class="button-container">
-                        <!--form method="post" action="{{ url_for('update_db', db_name=db) }}" class="mb-0">
-                            <button type="submit" class="btn btn-primary btn-sm">Update</button>
-                        </form-->
-                        <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
-                            <button type="submit" class="btn btn-primary btn-sm">Select</button>
-                        </form>
-                    </div>
-                </li>
-                {% endfor %}
-            </ul>
-        </div>
-    </div>
-</div>
-{% endblock %}
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+    /* Full-page setup */
+    html, body {
+        height: 100%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 50vh; /* Full viewport height */
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* Card styling */
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Refined shadow effect */
+        max-height: calc(50vh - 50px); /* Adjust to fit within view */
+        overflow: hidden; /* Ensures no overflow from child elements */
+    }
+
+    /* Fixed header */
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+        position: sticky; /* Keeps header fixed */
+        top: 0;
+        z-index: 1000; /* Ensures it stays above scrollable content */
+    }
+
+    .card-body {
+        max-height: 60vh; /* Limits height of scrollable area */
+        overflow-y: auto; /* Adds vertical scrolling */
+    }
+
+    /* Scrollbar customization */
+    .card-body::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .card-body::-webkit-scrollbar-thumb {
+        background-color: #444; /* Thumb color */
+        border-radius: 4px; /* Rounded scrollbar edges */
+    }
+
+    .card-body::-webkit-scrollbar-thumb:hover {
+        background-color: #555; /* Thumb hover color */
+    }
+
+    .card-body::-webkit-scrollbar-track {
+        background-color: #2c2c3e; /* Track background */
+    }
+
+    /* List group items */
+    .list-group-item {
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: 1px solid #444;
+        transition: background-color 0.3s ease;
+    }
+
+    .list-group-item:hover {
+        background-color: #383850;
+    }
+
+    /* Button styling */
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+    /* Align buttons side-by-side */
+    .button-container {
+        display: flex;
+        gap: 0.5rem; /* Adds space between buttons */
+    }
+
+    .btn-primary {
+        flex: 1; /* Ensures buttons have the same width */
+    }
+
+    /* Optional: Adjust margin and padding for better spacing */
+    .list-group-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .alert {
+        padding: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        text-align: center;
+    }
+
+    .alert-error {
+        background-color: #ff4d4d;
+        color: white;
+    }
+
+    .alert-table_selected {
+        background-color: #4dff74;
+        color: white;
+    }
+</style>
+
+{% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+        {% for category, message in messages %}
+            <div class="alert alert-{{ category }}">
+                {{ message }}
+            </div>
+        {% endfor %}
+    {% endif %}
+{% endwith %}
+
+<div class="container">
+    <div class="card shadow">
+        <div class="card-header">
+            <h3>Available Vector Databases</h3>
+        </div>
+        <div class="card-body">
+            <h4 class="text-center mb-4">Select a Vector Database</h4>
+            <ul class="list-group">
+                {% for db in vector_dbs %}
+                <li class="list-group-item">
+                    <span>{{ db }}</span>
+                    <div class="button-container">
+                        <!-- <form method="post" action="{{ url_for('update_db', db_name=db) }}" class="mb-0">
+                            <button type="submit" class="btn btn-primary btn-sm">Update</button>
+                        </form> -->
+                        <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
+                            <button type="submit" class="btn btn-primary btn-sm">Select</button>
+                        </form>
+                    </div>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/update_db.html

@@ -1,107 +1,107 @@
-{% extends 'base.html' %}
-
-{% block content %}
-<style>
-    html, body {
-        height: 100%;
-        margin: 0;
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: 50vh;
-        overflow: hidden;
-    }
-
-    .card {
-        margin: auto;
-        background-color: #2c2c3e;
-        color: #f5f5f5;
-        border: none;
-        width: 50%;
-        max-height: calc(50vh - 50px);
-        overflow-y: auto;
-    }
-
-    .card-header {
-        background-color: #181831;
-        border-bottom: 2px solid #444;
-        padding: 1rem;
-        text-align: center;
-        position: sticky;
-        top: 0;
-        z-index: 1000;
-    }
-
-    .text-muted {
-        color: rgb(121 136 151 / 75%) !important;
-    }
-
-    .form-label {
-        font-weight: bold;
-        color: #cfcfcf;
-    }
-
-    .form-control {
-        background-color: #1e1e2f;
-        color: #f5f5f5;
-        border: 1px solid #444;
-    }
-
-    .form-control:focus {
-        background-color: #1e1e2f;
-        color: #f5f5f5;
-        border-color: #4c4cff;
-        box-shadow: 0 0 4px #4c4cff;
-    }
-
-    .btn-primary {
-        background-color: #4c4cff;
-        border-color: #4c4cff;
-    }
-
-    .btn-primary:hover {
-        background-color: #3838e8;
-        border-color: #3838e8;
-    }
-
-    .card::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    .card::-webkit-scrollbar-thumb {
-        background-color: #444;
-        border-radius: 4px;
-    }
-</style>
-
-<div class="container mt-5">
-    <div class="card shadow">
-        <div class="card-header">
-            <h3>Update the Vector Database</h3>
-        </div>
-        <div class="card-body">
-            <form method="post" enctype="multipart/form-data">
-                <!-- Database Name Display -->
-                <div class="form-group">
-                    <label for="db_name" class="form-label">Database Name</label>
-                    <input type="text" id="db_name" name="db_name" class="form-control" value="{{ db_name }}" readonly>
-                </div>
-            
-                <!-- File or Folder Upload -->
-                <div class="form-group mt-3">
-                    <label for="files" class="form-label">Upload Files or Folder</label>
-                    <input type="file" id="files" name="files" class="form-control" webkitdirectory directory multiple>
-                    <small class="text-muted">Note: You can upload multiple files, a folder, or a single file.</small>
-                </div>
-            
-                <!-- Submit Button -->
-                <div class="mt-4 text-center">
-                    <button type="submit" class="btn btn-primary px-5">Update</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-{% endblock %}
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+    html, body {
+        height: 100%;
+        margin: 0;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 50vh;
+        overflow: hidden;
+    }
+
+    .card {
+        margin: auto;
+        background-color: #2c2c3e;
+        color: #f5f5f5;
+        border: none;
+        width: 50%;
+        max-height: calc(50vh - 50px);
+        overflow-y: auto;
+    }
+
+    .card-header {
+        background-color: #181831;
+        border-bottom: 2px solid #444;
+        padding: 1rem;
+        text-align: center;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+    .text-muted {
+        color: rgb(121 136 151 / 75%) !important;
+    }
+
+    .form-label {
+        font-weight: bold;
+        color: #cfcfcf;
+    }
+
+    .form-control {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border: 1px solid #444;
+    }
+
+    .form-control:focus {
+        background-color: #1e1e2f;
+        color: #f5f5f5;
+        border-color: #4c4cff;
+        box-shadow: 0 0 4px #4c4cff;
+    }
+
+    .btn-primary {
+        background-color: #4c4cff;
+        border-color: #4c4cff;
+    }
+
+    .btn-primary:hover {
+        background-color: #3838e8;
+        border-color: #3838e8;
+    }
+
+    .card::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .card::-webkit-scrollbar-thumb {
+        background-color: #444;
+        border-radius: 4px;
+    }
+</style>
+
+<div class="container mt-5">
+    <div class="card shadow">
+        <div class="card-header">
+            <h3>Update the Vector Database</h3>
+        </div>
+        <div class="card-body">
+            <form method="post" enctype="multipart/form-data">
+                <!-- Database Name Display -->
+                <div class="form-group">
+                    <label for="db_name" class="form-label">Database Name</label>
+                    <input type="text" id="db_name" name="db_name" class="form-control" value="{{ db_name }}" readonly>
+                </div>
+            
+                <!-- File or Folder Upload -->
+                <div class="form-group mt-3">
+                    <label for="files" class="form-label">Upload Files or Folder</label>
+                    <input type="file" id="files" name="files" class="form-control" webkitdirectory directory multiple>
+                    <small class="text-muted">Note: You can upload multiple files, a folder, or a single file.</small>
+                </div>
+            
+                <!-- Submit Button -->
+                <div class="mt-4 text-center">
+                    <button type="submit" class="btn btn-primary px-5">Update</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}