iatoolkit 1.7.0__py3-none-any.whl → 1.15.3__py3-none-any.whl

iatoolkit/services/storage_service.py

@@ -0,0 +1,92 @@
+# Copyright (c) 2024 Fernando Libedinsky
+# Product: IAToolkit
+#
+# IAToolkit is open source software.
+
+import base64
+import uuid
+import logging
+import mimetypes
+import os
+from injector import inject
+from typing import Dict
+from iatoolkit.infra.connectors.s3_connector import S3Connector
+from iatoolkit.common.exceptions import IAToolkitException
+
+
+class StorageService:
+    """
+    High level service for managing assets storage (images generated, attachments, etc).
+    Provides abstraction for file decoding and naming.
+    """
+
+    @inject
+    def __init__(self):
+        self.connector = self._init_connector()
+
+    def _init_connector(self) -> S3Connector:
+        # We configure S3 directly using environment variables
+        bucket = os.getenv("S3_BUCKET_NAME", "iatoolkit-assets")
+
+        auth = {
+            'aws_access_key_id': os.getenv('AWS_ACCESS_KEY_ID'),
+            'aws_secret_access_key': os.getenv('AWS_SECRET_ACCESS_KEY'),
+            'region_name': os.getenv('AWS_REGION', 'us-east-1')
+        }
+
+        return S3Connector(
+            bucket=bucket,
+            prefix="",   # Empty prefix to allow full control over keys
+            folder="",
+            auth=auth
+        )
+
+    def store_generated_image(self, company_short_name: str, base64_data: str, mime_type: str) -> Dict[str, str]:
+        """
+        Guarda una imagen generada por LLM (Base64) en el storage.
+
+        Returns:
+            Dict con:
+            - 'storage_key': La ruta interna (para guardar en BD)
+            - 'url': La URL firmada (para devolver al frontend inmediatamente)
+        """
+        try:
+            # 1. Decode Base64
+            # Sometimes the string comes with header 'data:image/png;base64,...', clean it
+            if "base64," in base64_data:
+                base64_data = base64_data.split("base64,")[1]
+
+            image_bytes = base64.b64decode(base64_data)
+
+            # 2. Generate unique name
+            ext = mimetypes.guess_extension(mime_type) or ".png"
+            filename = f"{uuid.uuid4()}{ext}"
+
+            # 3. Define folder structure: companies/{company}/generated/{filename}
+            storage_key = f"companies/{company_short_name}/generated_images/{filename}"
+
+            # 4. Upload
+            self.connector.upload_file(
+                file_path=storage_key,
+                content=image_bytes,
+                content_type=mime_type
+            )
+
+            logging.info(f"Generated image saved at: {storage_key}")
+
+            # 5. Generate temporary URL
+            url = self.connector.generate_presigned_url(storage_key)
+
+            return {
+                "storage_key": storage_key,
+                "url": url
+            }
+
+        except Exception as e:
+            error_msg = f"Error saving image to Storage: {str(e)}"
+            logging.error(error_msg)
+            raise IAToolkitException(IAToolkitException.ErrorType.FILE_IO_ERROR, error_msg)
+
+    def get_public_url(self, storage_key: str) -> str:
+        """Gets a fresh signed URL for an existing resource."""
+        return self.connector.generate_presigned_url(storage_key)

iatoolkit/static/js/chat_filepond.js

@@ -1,85 +1,210 @@
-$(document).ready(function () {
-    const paperclipButton = $('#paperclip-button');
-    const viewFilesButtonContainer = $('#view-files-button-container');
-    const viewFilesButton = $('#view-files-button');
-    const uploadedFilesModalElement = $('#uploadedFilesModal');
-    const uploadedFilesModal = uploadedFilesModalElement;  // En Bootstrap 3, el elemento jQuery es el modal
-    const uploadedFilesList = $('#uploaded-files-list');
-
-    // Initialize FilePond
-    window.filePond = FilePond.create(
-        document.querySelector('#file-upload'), {
+document.addEventListener('DOMContentLoaded', function () {
+    // 1. Register FilePond Plugins
+    // Ensure plugin scripts are loaded in your base layout or template
+    if (typeof FilePondPluginFileEncode !== 'undefined') {
+        FilePond.registerPlugin(FilePondPluginFileEncode);
+    }
+    if (typeof FilePondPluginFileValidateSize !== 'undefined') {
+        FilePond.registerPlugin(FilePondPluginFileValidateSize);
+    }
+    if (typeof FilePondPluginFileValidateType !== 'undefined') {
+        FilePond.registerPlugin(FilePondPluginFileValidateType);
+    }
+    if (typeof FilePondPluginImagePreview !== 'undefined') {
+        FilePond.registerPlugin(FilePondPluginImagePreview);
+    }
+
+    // 2. Create FilePond instance on the hidden input
+    const inputElement = document.querySelector('input.filepond');
+
+    // FilePond base configuration
+    const filePond = FilePond.create(inputElement, {
         allowMultiple: true,
-        labelIdle: '',
+        maxFiles: 5,
+        maxFileSize: '30MB',
+
+        // Extensive list of accepted types (Images, PDF, Text, Excel, Word)
+        acceptedFileTypes: [
+            'image/*',
+            'application/pdf',
+            'text/plain',
+            'text/csv',
+            'application/vnd.ms-excel',                                                 // .xls
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',        // .xlsx
+            'application/msword',                                                       // .doc
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'   // .docx
+        ],
+        labelIdle: '', // Left empty because we use our own UI
         credits: false,
-        allowFileSizeValidation: true,
-        maxFileSize: '10MB',
-        stylePanelLayout: null,
-        itemInsertLocation: 'after',
-        instantUpload: false,
+        storeAsFile: true, // Important for encode to work if used
     });
 
-    $('.filepond--root').hide(); // Ocultar la UI de FilePond
+    // Expose globally so chat_main.js can access (getFiles, removeFiles)
+    window.filePond = filePond;
+
+
+    // 3. DOM references for the new custom UI
+    const dropzone = document.getElementById('chat-dropzone');
+    const fileListContainer = document.getElementById('inline-file-list');
+    const fileCounter = document.getElementById('file-counter');
+    const paperclipBtn = document.getElementById('paperclip-button');
+
+
+    // 4. Rendering Functions
+
+    /**
+     * Returns the Bootstrap icon class based on filename or file type.
+     */
+    function getFileIconClass(filename, type) {
+        const ext = filename.split('.').pop().toLowerCase();
+
+        // Images
+        if (type.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
+            return 'bi-file-earmark-image';
+        }
+        // PDF
+        if (type === 'application/pdf' || ext === 'pdf') {
+            return 'bi-file-earmark-pdf';
+        }
+        // Excel / Spreadsheets
+        if (['xls', 'xlsx', 'csv'].includes(ext) || type.includes('spreadsheet') || type.includes('excel')) {
+            return 'bi-file-earmark-excel';
+        }
+        // Word / Documents
+        if (['doc', 'docx'].includes(ext) || type.includes('word') || type.includes('document')) {
+            return 'bi-file-earmark-word';
+        }
+        // Text / Code
+        if (['txt', 'md', 'json', 'py', 'js', 'html', 'css'].includes(ext)) {
+            return 'bi-file-earmark-text';
+        }
+
+        // Default icon
+        return 'bi-file-earmark';
+    }
+
+    /**
+     * Rebuilds the visual file list below the input.
+     */
+    function renderFileList() {
+        if (!fileListContainer) return;
 
-    // Función para actualizar la visibilidad del icono "ver archivos"
-    function updateFileIconsVisibility() {
         const files = filePond.getFiles();
+        fileListContainer.innerHTML = ''; // Clear current list
+
         if (files.length > 0) {
-            viewFilesButtonContainer.show();
-        } else {
-            viewFilesButtonContainer.hide();
-            if (uploadedFilesModalElement.hasClass('in')) { // Si el modal está abierto y no hay archivos, ciérralo
-                uploadedFilesModal.modal('hide');
+            fileListContainer.style.display = 'block';
+
+            // Update counter
+            if (fileCounter) {
+                fileCounter.textContent = `${files.length}/${filePond.maxFiles || 5}`;
+                fileCounter.style.display = 'inline-block';
             }
+
+            files.forEach(fileItem => {
+                const file = fileItem.file;
+                const iconClass = getFileIconClass(file.name, file.type || '');
+
+                // Create file row
+                const row = document.createElement('div');
+                row.className = 'file-list-item';
+
+                row.innerHTML = `
+                    <i class="bi ${iconClass} file-icon"></i>
+                    <span class="file-name" title="${file.name}">${file.name}</span>
+                    <i class="bi bi-x-circle-fill file-remove" role="button" aria-label="Remove file"></i>
+                `;
+
+                // Click event on the remove button of the row
+                const removeBtn = row.querySelector('.file-remove');
+                removeBtn.addEventListener('click', (e) => {
+                    e.stopPropagation(); // Prevent click propagation if nested in a clickable area
+                    filePond.removeFile(fileItem.id);
+                });
+
+                fileListContainer.appendChild(row);
+            });
+        } else {
+            // Hide list and counter if no files
+            fileListContainer.style.display = 'none';
+            if (fileCounter) fileCounter.style.display = 'none';
         }
     }
 
-    // Función para poblar el modal con los archivos y botones de eliminar
-    function populateFilesModal() {
-        uploadedFilesList.empty(); // Limpiar lista anterior
-        const files = filePond.getFiles();
 
-        if (files.length === 0) {
-            uploadedFilesList.append('<li class="list-group-item">No hay archivos adjuntos.</li>');
-            return;
-        }
+    // 5. Interaction Event Management
 
-        files.forEach(file => {
-            const listItem = $(`
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    <span class="file-name-modal">${file.filename}</span>
-                    <button type="button" class="btn btn-sm btn-outline-danger remove-file-btn" data-file-id="${file.id}" title="Eliminar archivo">
-                        <i class="bi bi-trash-fill"></i>
-                    </button>
-                </li>
-            `);
-            uploadedFilesList.append(listItem);
+    // -- Custom Dropzone Robust Handling --
+    if (dropzone) {
+        // Prevent default browser behavior for drag events
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropzone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }, false);
+        });
+
+        // Highlight dropzone on drag enter/over
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropzone.addEventListener(eventName, () => {
+                dropzone.classList.add('drag-over');
+            }, false);
+        });
+
+        // Remove highlight on drag leave or drop
+        // Note: checking relatedTarget prevents flickering when dragging over child elements
+        dropzone.addEventListener('dragleave', (e) => {
+            if (!dropzone.contains(e.relatedTarget)) {
+                dropzone.classList.remove('drag-over');
+            }
+        }, false);
+
+        dropzone.addEventListener('drop', (e) => {
+            dropzone.classList.remove('drag-over');
+
+            // Pass dropped files to FilePond
+            // We convert FileList to Array to ensure compatibility
+            if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+                filePond.addFiles(Array.from(e.dataTransfer.files));
+            }
+        }, false);
+
+        // Click on zone opens native selector
+        dropzone.addEventListener('click', function() {
+            filePond.browse();
+        });
+    }
+
+    // -- "Clip" Button (Legacy design compatibility) --
+    if (paperclipBtn) {
+        paperclipBtn.addEventListener('click', function() {
+            filePond.browse();
         });
     }
 
-        // Event listeners de FilePond
-    window.filePond.on('addfile', () => updateFileIconsVisibility());
-    window.filePond.on('removefile', () => {
-        updateFileIconsVisibility();
-        if (uploadedFilesModalElement.hasClass('in')) {
-            populateFilesModal();
+
+    // 6. FilePond Hooks for Reactivity
+
+    // On file add (even if validation error, FilePond manages array)
+    filePond.on('addfile', (error, file) => {
+        if (error) {
+            console.error('FilePond Error:', error);
+            // Optional: Show error toast if file is invalid (e.g., too large)
+            return;
         }
+        renderFileList();
     });
 
-    // Event listeners de los botones de la UI
-    paperclipButton.on('click', () => window.filePond.browse());
-    viewFilesButton.on('click', () => {
-        populateFilesModal();
-        uploadedFilesModal.modal('show');
-    });
-    uploadedFilesList.on('click', '.remove-file-btn', function () {
-        const fileIdToRemove = $(this).data('file-id');
-        if (fileIdToRemove) {
-            window.filePond.removeFile(fileIdToRemove);
-        }
+    // On file remove
+    filePond.on('removefile', (error, file) => {
+        renderFileList();
     });
 
-    // Inicializar visibilidad al cargar
-    updateFileIconsVisibility();
-});
+    // Event for general error (e.g., type not allowed on drop)
+    filePond.on('warning', (error) => {
+        console.warn('FilePond Warning:', error);
+    });
 
+    // Initialization: Initial render in case browser cached state
+    renderFileList();
+});

iatoolkit/static/js/chat_main.js

@@ -58,7 +58,6 @@ $(document).ready(function () {
 
 });
 
-
 /**
  * Main function to handle sending a chat message.
  */
@@ -93,16 +92,16 @@ const handleChatMessage = async function () {
             if (paramsString) { displayMessage += `: ${paramsString}`; }
         }
 
-        // Simplificado: Si no hay mensaje, el 'finally' se encargará de limpiar.
         if (!displayMessage) {
             return;
         }
 
-        displayUserMessage(displayMessage, isEditable, question);
+        const files = window.filePond.getFiles();
+
+        displayUserMessage(displayMessage, isEditable, question, files);
         showSpinner();
         resetAllInputs();
 
-        const files = window.filePond.getFiles();
         const filesBase64 = await Promise.all(files.map(fileItem => toBase64(fileItem.file)));
 
         const data = {
@@ -112,59 +111,18 @@ const handleChatMessage = async function () {
             files: filesBase64.map(f => ({ filename: f.name, content: f.base64 })),
             user_identifier: window.user_identifier,
             model: (window.currentLlmModel || window.defaultLlmModel || '')
-
         };
 
         const responseData = await callToolkit("/api/llm_query", data, "POST");
-        if (responseData && responseData.answer) {
-                // CAMBIO:  contenedor principal para la respuesta del bot
-                const botMessageContainer = $('<div>').addClass('bot-message-container');
-
-                // 1. Si hay reasoning_content, agregar el acordeón colapsable
-                if (responseData.reasoning_content) {
-                    const uniqueId = 'reasoning-' + Date.now(); // ID único para el collapse
-
-                    const reasoningBlock = $(`
-                            <div class="reasoning-block">
-                                <button class="reasoning-toggle btn btn-sm btn-link text-decoration-none p-0"
-                                    type="button"
-                                    data-bs-toggle="collapse"
-                                    data-bs-target="#${uniqueId}"
-                                    aria-expanded="false"
-                                    aria-controls="${uniqueId}">
-                                    <i class="bi bi-lightbulb me-1"></i> ${t_js('show_reasoning')}
-                                </button>
-                        
-                                <div class="collapse mt-2" id="${uniqueId}">
-                                    <div class="reasoning-card">
-                                        ${responseData.reasoning_content}
-                                    </div>
-                                </div>
-                            </div>
-                        `);
-                    botMessageContainer.append(reasoningBlock);
-                }
-
-                // 2. Agregar la respuesta final
-                const answerSection = $('<div>').addClass('answer-section llm-output').append(responseData.answer);
-                botMessageContainer.append(answerSection);
 
-                // 3. Mostrar el contenedor completo
-                displayBotMessage(botMessageContainer);
+        // Delegamos el procesamiento de la respuesta a la nueva función
+        processBotResponse(responseData);
 
-        }
     } catch (error) {
         if (error.name === 'AbortError') {
-
-            // Usando jQuery estándar para construir el elemento ---
-            const icon = $('<i>').addClass('bi bi-stop-circle me-2'); // Icono sin "fill" para un look más ligero
+            const icon = $('<i>').addClass('bi bi-stop-circle me-2');
             const textSpan = $('<span>').text('La generación de la respuesta ha sido detenida.');
-
-            const abortMessage = $('<div>')
-                .addClass('system-message')
-                .append(icon)
-                .append(textSpan);
-
+            const abortMessage = $('<div>').addClass('system-message').append(icon).append(textSpan);
             displayBotMessage(abortMessage);
         } else {
             console.error("Error in handleChatMessage:", error);
@@ -172,17 +130,78 @@ const handleChatMessage = async function () {
             displayBotMessage(errorSection);
         }
     } finally {
-        // Este bloque se ejecuta siempre, garantizando que el estado se limpie.
         isRequestInProgress = false;
         hideSpinner();
         toggleSendStopButtons(false);
         updateSendButtonState();
         if (window.filePond) {
-             window.filePond.removeFiles();
+            window.filePond.removeFiles();
         }
     }
 };
 
+/**
+ * Processes the response data from the LLM and displays it in the chat.
+ * Handles multimodal content: uses 'answer' for text (HTML) and 'content_parts' for images.
+ * @param {object} responseData - The JSON response from the server.
+ */
+function processBotResponse(responseData) {
+    if (!responseData || (!responseData.answer && !responseData.content_parts)) {
+        return;
+    }
+
+    const botMessageContainer = $('<div>').addClass('bot-message-container');
+
+    // 1. Si hay reasoning_content, agregar el acordeón colapsable
+    if (responseData.reasoning_content) {
+        const uniqueId = 'reasoning-' + Date.now();
+        const reasoningBlock = $(`
+                <div class="reasoning-block">
+                    <button class="reasoning-toggle btn btn-sm btn-link text-decoration-none p-0"
+                        type="button" data-bs-toggle="collapse" data-bs-target="#${uniqueId}"
+                        aria-expanded="false" aria-controls="${uniqueId}">
+                        <i class="bi bi-lightbulb me-1"></i> ${t_js('show_reasoning')}
+                    </button>
+                    <div class="collapse mt-2" id="${uniqueId}">
+                        <div class="reasoning-card">${responseData.reasoning_content}</div>
+                    </div>
+                </div>
+            `);
+        botMessageContainer.append(reasoningBlock);
+    }
+
+    // 2. Agregar la respuesta final
+    const answerSection = $('<div>').addClass('answer-section llm-output');
+
+    // A. Texto: Usamos 'answer' porque contiene el HTML procesado y limpio del backend.
+    // Evitamos usar content_parts[type=text] porque contiene el JSON crudo del LLM.
+    if (responseData.answer) {
+        answerSection.append(responseData.answer);
+    }
+
+    // B. Imágenes: Iteramos content_parts buscando SOLO imágenes para adjuntarlas.
+    if (responseData.content_parts && responseData.content_parts.length > 0) {
+        responseData.content_parts.forEach(part => {
+            if (part.type === 'image' && part.source && part.source.url) {
+                const imgContainer = $('<div>').addClass('image-part my-3 text-center');
+                const img = $('<img>')
+                    .attr('src', part.source.url)
+                    .addClass('img-fluid rounded shadow-sm border')
+                    .css({'max-height': '400px', 'cursor': 'pointer'})
+                    .on('click', () => window.open(part.source.url, '_blank'));
+
+                imgContainer.append(img);
+                answerSection.append(imgContainer);
+            }
+        });
+    }
+
+    botMessageContainer.append(answerSection);
+
+    // 3. Mostrar el contenedor completo
+    displayBotMessage(botMessageContainer);
+}
+
 
 /**
  * Resets all inputs to their initial state.
@@ -316,14 +335,48 @@ const callToolkit = async function(apiPath, data, method, timeoutMs = 500000) {
  * @param {string} message - The full message string to display.
  * @param {boolean} isEditable - Determines if the edit icon should be shown.
  * @param {string} originalQuestion - The original text to put back in the textarea for editing.
+ * @param {Array} [files] - Optional array of FilePond file items.
  */
-const displayUserMessage = function(message, isEditable, originalQuestion) {
+const displayUserMessage = function(message, isEditable, originalQuestion, files = []) {
     const chatContainer = $('#chat-container');
     const userMessage = $('<div>').addClass('message shadow-sm');
     const messageText = $('<span>').text(message);
 
     userMessage.append(messageText);
 
+    // Renderizar previsualizaciones de archivos si existen
+    if (files && files.length > 0) {
+        const attachmentsContainer = $('<div>').addClass('mt-2 d-flex flex-wrap gap-2 ms-3');
+
+        files.forEach(fileItem => {
+            const file = fileItem.file;
+
+            if (file.type && file.type.startsWith('image/')) {
+                // Previsualización de imagen usando URL temporal
+                const imgUrl = URL.createObjectURL(file);
+                const img = $('<img>')
+                    .attr('src', imgUrl)
+                    .addClass('rounded border')
+                    .css({
+                        'max-height': '80px',
+                        'max-width': '120px',
+                        'object-fit': 'cover',
+                        'cursor': 'pointer'
+                    })
+                    .on('click', () => window.open(imgUrl, '_blank')); // Click para ver en grande
+                attachmentsContainer.append(img);
+            } else {
+                // Icono genérico para documentos
+                const badge = $('<span>')
+                    .addClass('badge bg-light text-dark border p-2')
+                    .html(`<i class="bi bi-file-earmark-text me-1"></i> ${file.name}`);
+                attachmentsContainer.append(badge);
+            }
+        });
+
+        userMessage.append(attachmentsContainer);
+    }
+
     if (isEditable) {
         const editIcon = $('<i>').addClass('p-2 bi bi-pencil-fill edit-icon edit-pencil').attr('title', 'Edit query').on('click', function () {
             $('#question').val(originalQuestion)