iatoolkit 0.11.0__py3-none-any.whl → 0.66.2__py3-none-any.whl

iatoolkit/static/js/chat_main.js

@@ -1,38 +1,41 @@
 // Global variables for request management
-let currentAbortController = null;
 let isRequestInProgress = false;
-
+let abortController = null;
 let selectedPrompt = null; // Will hold a lightweight prompt object
 
 $(document).ready(function () {
-    // --- MAIN EVENT HANDLERS ---
-    $('#send-button').on('click', handleChatMessage);
-    $('#stop-button').on('click', abortCurrentRequest);
+    // Si viene un Token retornado por login con APY-KEY se gatilla el redeem a una sesion de flask
+        if (window.redeemToken) {
+            const url = '/api/redeem_token';
+            // No await: dejamos que callToolkit maneje todo internamente
+            callToolkit(url, {'token': window.redeemToken}, "POST").catch(() => {});
+        }
 
-// --- PROMPT ASSISTANT FUNCTIONALITY ---
-    $('.input-area').on('click', '.dropdown-menu a.dropdown-item', function (event) {
-        event.preventDefault();
-        const promptData = $(this).data();
+    const layoutContainer = document.querySelector('.chat-layout-container');
+    const promptAssistantCollapse = document.getElementById('prompt-assistant-collapse');
 
-        const promptObject = {
-            prompt: promptData.promptName,
-            description: promptData.promptDescription,
-            custom_fields: typeof promptData.customFields === 'string' ? JSON.parse(promptData.customFields) : promptData.customFields
-        };
+    if (layoutContainer && promptAssistantCollapse) {
+        promptAssistantCollapse.addEventListener('show.bs.collapse', function () {
+            layoutContainer.classList.add('prompt-assistant-open');
+            setTimeout(() => {
+                window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+            }, 300);
+        });
 
-        selectPrompt(promptObject);
-    });
+        promptAssistantCollapse.addEventListener('hide.bs.collapse', function () {
+            layoutContainer.classList.remove('prompt-assistant-open');
+        });
+    }
 
-    // Handles the 'clear' button for the prompt selector
-    $('#clear-selection-button').on('click', function() {
-        resetPromptSelection();
-        updateSendButtonState();
-    });
+    // --- chat main event hadlers ---
+    $('#send-button').on('click', handleChatMessage);
+    $('#stop-button').on('click', abortCurrentRequest);
+    if (window.sendButtonColor)
+        $('#send-button i').css('color', window.sendButtonColor);
 
-    // --- TEXTAREA FUNCTIONALITY ---
-    const questionTextarea = $('#question');
 
     // Handles Enter key press to send a message
+    const questionTextarea = $('#question');
     questionTextarea.on('keypress', function (event) {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
@@ -52,141 +55,101 @@ $(document).ready(function () {
 
     // Set the initial disabled state of the send button
     updateSendButtonState();
-});
-
-
-/**
- * Handles the selection of a prompt from the dropdown.
- * @param {object} prompt The prompt object read from data attributes.
- */
-function selectPrompt(prompt) {
-    selectedPrompt = prompt;
-
-    // Update the dropdown button to show the selected prompt's description
-    $('#prompt-select-button').text(prompt.description).addClass('item-selected');
-    $('#clear-selection-button').show();
-
-    // Clear the main textarea, as we are now in "prompt mode"
-    $('#question').val('');
-    autoResizeTextarea($('#question')[0]); // Reset height after clearing
-
-    // Store values in hidden fields for backward compatibility or other uses
-    $('#prompt-select-value').val(prompt.prompt);
-    $('#prompt-select-description').val(prompt.description);
-
-    // Render the dynamic input fields required by the selected prompt
-    renderDynamicInputs(prompt.custom_fields || []);
-    updateSendButtonState();
-}
 
-/**
- * Resets the prompt selection and clears associated UI elements.
- */
-function resetPromptSelection() {
-    selectedPrompt = null;
-
-    $('#prompt-select-button').text('Prompts disponibles ....').removeClass('item-selected');
-    $('#clear-selection-button').hide();
-    $('#prompt-select-value').val('');
-    $('#prompt-select-description').val('');
-
-    // Clear any dynamically generated input fields
-    $('#dynamic-inputs-container').empty();
-}
-
-/**
- * Renders the custom input fields for the selected prompt.
- * @param {Array<object>} fields The array of custom field configurations.
- */
-function renderDynamicInputs(fields) {
-    const container = $('#dynamic-inputs-container');
-    container.empty();
-
-    const row = $('<div class="row g-2"></div>');
-    fields.forEach(field => {
-        const colDiv = $('<div class="col-md"></div>');
-        const formFloating = $('<div class="form-floating"></div>');
-        const input = $(`<input type="${field.type || 'text'}" class="form-control form-control-soft" id="${field.data_key}-id" ">`);
-        const label = $(`<label for="${field.data_key}-id">${field.label}</label>`);
-
-        formFloating.append(input, label);
-        colDiv.append(formFloating);
-        row.append(colDiv);
-    });
-
-    container.append(row);
-}
+});
 
 
 /**
  * Main function to handle sending a chat message.
  */
 const handleChatMessage = async function () {
-    if (isRequestInProgress || $('#send-button').hasClass('disabled')) return;
-
-    const question = $('#question').val().trim();
-    const promptName = selectedPrompt ? selectedPrompt.prompt : null;
+    if (isRequestInProgress || $('#send-button').hasClass('disabled')) {
+        return;
+    }
 
-    let displayMessage = question;
-    let isEditable = true;
-    const clientData = {};
+    isRequestInProgress = true;
+    toggleSendStopButtons(true);
 
-    if (selectedPrompt) {
-        displayMessage = selectedPrompt.description;
-        isEditable = false; // Prompts are not editable
+    try {
+        const question = $('#question').val().trim();
+        const promptName = selectedPrompt ? selectedPrompt.prompt : null;
 
-        (selectedPrompt.custom_fields || []).forEach(field => {
-            const value = $('#' + field.data_key + '-id').val().trim();
-            if (value) {
-                clientData[field.data_key] = value;
-            }
-        });
+        let displayMessage = question;
+        let isEditable = true;
+        const clientData = {};
 
-        // Append the collected parameter values to the display message
-        const paramsString = Object.values(clientData).join(', ');
-        if (paramsString) {
-            displayMessage += `: ${paramsString}`;
+        if (selectedPrompt) {
+            displayMessage = selectedPrompt.description;
+            isEditable = false;
+
+            (selectedPrompt.custom_fields || []).forEach(field => {
+                const value = $('#' + field.data_key + '-id').val().trim();
+                if (value) {
+                    clientData[field.data_key] = value;
+                }
+            });
+
+            const paramsString = Object.values(clientData).join(', ');
+            if (paramsString) { displayMessage += `: ${paramsString}`; }
         }
-    }
 
-    // Si no hay pregunta libre Y no se ha seleccionado un prompt, no hacer nada.
-    if (!displayMessage) return;
-
-    displayUserMessage(displayMessage, isEditable, question);
-    showSpinner();
-    toggleSendStopButtons(true);
+        // Simplificado: Si no hay mensaje, el 'finally' se encargará de limpiar.
+        if (!displayMessage) {
+            return;
+        }
 
-    resetAllInputs();
+        displayUserMessage(displayMessage, isEditable, question);
+        showSpinner();
+        resetAllInputs();
 
-    const files = window.filePond.getFiles();
-    const filesBase64 = await Promise.all(files.map(fileItem => toBase64(fileItem.file)));
+        const files = window.filePond.getFiles();
+        const filesBase64 = await Promise.all(files.map(fileItem => toBase64(fileItem.file)));
 
-    // Prepare data payload
-    const data = {
-        question: question,
-        prompt_name: promptName,
-        client_data: clientData,
-        files: filesBase64.map(f => ({ filename: f.name, content: f.base64 })),
-        external_user_id: window.externalUserId
-    };
+        const data = {
+            question: question,
+            prompt_name: promptName,
+            client_data: clientData,
+            files: filesBase64.map(f => ({ filename: f.name, content: f.base64 })),
+            user_identifier: window.user_identifier
+        };
 
-    try {
-        const responseData = await callLLMAPI("/llm_query", data, "POST");
+        const responseData = await callToolkit("/api/llm_query", data, "POST");
         if (responseData && responseData.answer) {
             const answerSection = $('<div>').addClass('answer-section llm-output').append(responseData.answer);
             displayBotMessage(answerSection);
         }
     } catch (error) {
-        console.error("Error in handleChatMessage:", error);
-        // Implement error display logic as needed
+        if (error.name === 'AbortError') {
+            console.log('Petición abortada por el usuario.');
+
+            // 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 textSpan = $('<span>').text('La generación de la respuesta ha sido detenida.');
+
+            const abortMessage = $('<div>')
+                .addClass('system-message')
+                .append(icon)
+                .append(textSpan);
+
+            displayBotMessage(abortMessage);
+        } else {
+            console.error("Error in handleChatMessage:", error);
+            const errorSection = $('<div>').addClass('error-section').append('<p>Ocurrió un error al procesar la solicitud.</p>');
+            displayBotMessage(errorSection);
+        }
     } finally {
+        // Este bloque se ejecuta siempre, garantizando que el estado se limpie.
+        isRequestInProgress = false;
         hideSpinner();
         toggleSendStopButtons(false);
         updateSendButtonState();
-        window.filePond.removeFiles();
+        if (window.filePond) {
+             window.filePond.removeFiles();
+        }
     }
 };
 
+
 /**
  * Resets all inputs to their initial state.
  */
@@ -236,28 +199,6 @@ const toggleSendStopButtons = function (showStop) {
     $('#stop-button-container').toggle(showStop);
 };
 
-/**
- * Resets the prompt selector to its default state.
- */
-function resetPromptSelect() {
-    $('#prompt-select-button').text('Prompts disponibles ....').removeClass('item-selected');
-    $('#prompt-select-value').val('');
-    $('#prompt-select-description').val('');
-    $('#clear-selection-button').hide();
-}
-
-/**
- * Resets the company-specific data input field.
- */
-function resetSpecificDataInput() {
-    if (specificDataConfig && specificDataConfig.enabled) {
-        const input = $('#' + specificDataConfig.id);
-        input.val('').removeClass('has-content');
-        $('#clear-' + specificDataConfig.id + '-button').hide();
-    }
-}
-
-
 /**
  * Generic function to make API calls to the backend.
  * @param {string} apiPath - The API endpoint path.
@@ -266,32 +207,47 @@ function resetSpecificDataInput() {
  * @param {number} timeoutMs - Timeout in milliseconds.
  * @returns {Promise<object|null>} The response data or null on error.
  */
-const callLLMAPI = async function(apiPath, data, method, timeoutMs = 500000) {
+const callToolkit = async function(apiPath, data, method, timeoutMs = 500000) {
     const url = `${window.iatoolkit_base_url}/${window.companyShortName}${apiPath}`;
 
-    const headers = {"Content-Type": "application/json"};
-    if (window.sessionJWT) {
-        headers['X-Chat-Token'] = window.sessionJWT;
-    }
-
-    const controller = new AbortController();
-    currentAbortController = controller;
-    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), timeoutMs);
 
     try {
-        const response = await fetch(url, {
-            method: method,
-            headers: headers,
-            body: JSON.stringify(data),
-            signal: controller.signal,
-            credentials: 'include'
-        });
+        const fetchOptions = {
+                method: method,
+                signal: abortController.signal,
+                credentials: 'include'
+            };
+
+        // Solo agrega body si el método lo soporta y hay datos
+        const methodUpper = (method || '').toUpperCase();
+        const canHaveBody = !['GET', 'HEAD'].includes(methodUpper);
+        if (canHaveBody && data !== undefined && data !== null) {
+            fetchOptions.body = JSON.stringify(data);
+            fetchOptions.headers = {"Content-Type": "application/json"};
+
+        }
+        const response = await fetch(url, fetchOptions);
+
         clearTimeout(timeoutId);
 
         if (!response.ok) {
-            const errorData = await response.json();
-            const endpointError = $('<div>').addClass('error-section').append(`<p>${errorData.error_message || 'Unknown server error'}</p>`);
-            displayBotMessage(endpointError);
+            try {
+                // Intentamos leer el error como JSON, que es el formato esperado de nuestra API.
+                const errorData = await response.json();
+                const errorMessage = errorData.error_message || t_js('unknown_server_error'); // <-- Translation
+                const errorIcon = '<i class="bi bi-exclamation-triangle"></i>';
+                const endpointError = $('<div>').addClass('error-section').html(errorIcon + `<p>${errorMessage}</p>`);
+                displayBotMessage(endpointError);
+            } catch (e) {
+                // Si response.json() falla, es porque el cuerpo no era JSON (ej. un 502 con HTML).
+                // Mostramos un error genérico y más claro para el usuario.
+                const errorMessage = `Error de comunicación con el servidor (${response.status}). Por favor, intente de nuevo más tarde.`;
+                const errorIcon = '<i class="bi bi-exclamation-triangle"></i>';
+                const infrastructureError = $('<div>').addClass('error-section').html(errorIcon + `<p>${errorMessage}</p>`);
+                displayBotMessage(infrastructureError);
+            }
             return null;
         }
         return await response.json();
@@ -300,7 +256,17 @@ const callLLMAPI = async function(apiPath, data, method, timeoutMs = 500000) {
         if (error.name === 'AbortError') {
             throw error; // Re-throw to be handled by handleChatMessage
         } else {
-            const commError = $('<div>').addClass('error-section').append(`<p>Connection error: ${error.message}</p>`);
+            // Log detallado en consola
+                console.error('Network error in callToolkit:', {
+                    url,
+                    method,
+                    error,
+                    message: error?.message,
+                    stack: error?.stack,
+                });
+            const friendlyMessage = t_js('network_error');
+            const errorIcon = '<i class="bi bi-exclamation-triangle"></i>';
+            const commError = $('<div>').addClass('error-section').html(errorIcon + `<p>${friendlyMessage}</p>`);
             displayBotMessage(commError);
         }
         return null;
@@ -322,10 +288,13 @@ const displayUserMessage = function(message, isEditable, originalQuestion) {
     userMessage.append(messageText);
 
     if (isEditable) {
-        const editIcon = $('<i>').addClass('p-2 bi bi-pencil-fill edit-icon').attr('title', 'Edit query').on('click', function () {
-            $('#question').val(originalQuestion).focus();
+        const editIcon = $('<i>').addClass('p-2 bi bi-pencil-fill edit-icon edit-pencil').attr('title', 'Edit query').on('click', function () {
+            $('#question').val(originalQuestion)
             autoResizeTextarea($('#question')[0]);
-            updateSendButtonState();
+            $('#send-button').removeClass('disabled');
+
+            if (window.innerWidth > 768)
+                $('#question').focus();
         });
         userMessage.append(editIcon);
     }
@@ -347,9 +316,8 @@ function displayBotMessage(section) {
  * Aborts the current in-progress API request.
  */
 const abortCurrentRequest = function () {
-    if (currentAbortController && isRequestInProgress) {
-        window.isManualAbort = true;
-        currentAbortController.abort();
+    if (isRequestInProgress && abortController) {
+        abortController.abort();
     }
 };
 
@@ -359,12 +327,13 @@ const abortCurrentRequest = function () {
 const showSpinner = function () {
     if ($('#spinner').length) return;
     const accessibilityClass = (typeof bootstrap !== 'undefined') ? 'visually-hidden' : 'sr-only';
+    const spinnerText = t_js('loading');
     const spinner = $(`
         <div id="spinner" style="display: flex; align-items: center; justify-content: start; margin: 10px 0; padding: 10px;">
-            <div class="spinner-border text-primary" role="status" style="width: 1.5rem; height: 1.5rem; margin-right: 15px;">
+            <div class="spinner-border" role="status" style="width: 1.5rem; height: 1.5rem; margin-right: 15px;">
                 <span class="${accessibilityClass}">Loading...</span>
             </div>
-            <span style="font-weight: bold; font-size: 15px;">Loading...</span>
+            <span style="font-weight: bold; font-size: 15px;">${spinnerText}</span>
         </div>
     `);
     $('#chat-container').append(spinner).scrollTop($('#chat-container')[0].scrollHeight);
@@ -393,44 +362,3 @@ function toBase64(file) {
     });
 }
 
-/**
- * Displays the document validation results.
- * @param {Array<object>} document_list
- */
-function display_document_validation(document_list) {
-    const requiredFields = ['document_name', 'document_type', 'causes', 'is_valid'];
-    for (const doc of document_list) {
-        if (!requiredFields.every(field => field in doc)) {
-            console.warn("Document with incorrect structure:", doc);
-            continue;
-        }
-        const docValidationSection = $('<div>').addClass('document-section card mt-2 mb-2');
-        const cardBody = $('<div>').addClass('card-body');
-        const headerDiv = $('<div>').addClass('d-flex justify-content-between align-items-center mb-2');
-        const filenameSpan = $(`
-                <div>
-                    <span class="text-primary fw-bold">File: </span>
-                    <span class="text-secondary">${doc.document_name}</span>
-                </div>`);
-        const badge_style = doc.is_valid ? 'bg-success' : 'bg-danger';
-        const documentBadge = $('<span>')
-            .addClass(`badge ${badge_style} p-2`)
-            .text(doc.document_type);
-        headerDiv.append(filenameSpan).append(documentBadge);
-        cardBody.append(headerDiv);
-
-        if (!doc.is_valid && doc.causes && doc.causes.length > 0) {
-            const rejectionSection = $('<div>').addClass('rejection-reasons mt-2');
-            rejectionSection.append('<h6 class="text-danger">Rejection Causes:</h6>');
-            const causesList = doc.causes.map(cause => `<li class="text-secondary">${cause}</li>`).join('');
-            rejectionSection.append(`<ul class="list-unstyled">${causesList}</ul>`);
-            cardBody.append(rejectionSection);
-        } else if (doc.is_valid) {
-            const validSection = $('<div>').addClass('mt-2');
-            validSection.append('<p class="text-success fw-bold">Valid document.</p>');
-            cardBody.append(validSection);
-        }
-        docValidationSection.append(cardBody);
-        displayBotMessage(docValidationSection);
-    }
-}

iatoolkit/static/js/chat_onboarding_button.js

@@ -0,0 +1,97 @@
+(function (global) {
+  function qs(root, sel) { return (typeof sel === 'string') ? root.querySelector(sel) : sel; }
+
+  function createDots(container, count, activeIdx, activeColor) {
+    container.innerHTML = '';
+    for (let i = 0; i < count; i++) {
+      const d = document.createElement('div');
+      if (i === activeIdx) d.classList.add('active');
+      d.style.width = '10px';
+      d.style.height = '10px';
+      d.style.borderRadius = '50%';
+      d.style.backgroundColor = i === activeIdx ? (activeColor || 'var(--brand-primary-color, #FF5100)') : '#ddd';
+      d.style.transition = 'background-color .3s';
+      container.appendChild(d);
+    }
+  }
+
+  function initOnboarding(opts) {
+    const {
+      mode = 'modal',
+      cards = [],
+      ui = {},
+      autoRotateMs = 5000,
+      shell = {}
+    } = opts;
+
+    const root = document;
+    const elIcon = qs(root, ui.icon);
+    const elTitle = qs(root, ui.title);
+    const elText = qs(root, ui.text);
+    const elDots = qs(root, ui.dots);
+    const elPrev = qs(root, ui.prev);
+    const elNext = qs(root, ui.next);
+
+    let idx = 0;
+    let autoTimer = null;
+
+    function hasCards() { return Array.isArray(cards) && cards.length > 0; }
+
+    function render() {
+      if (!hasCards()) return;
+      const c = cards[idx] || {};
+      if (elIcon) elIcon.innerHTML = `<i class="${c.icon || 'bi bi-lightbulb'}"></i>`;
+      if (elTitle) elTitle.textContent = c.title || '';
+      if (elText) elText.innerHTML = c.text || '';
+      if (elDots) createDots(elDots, cards.length, idx);
+    }
+
+    function next() { if (!hasCards()) return; idx = (idx + 1) % cards.length; render(); }
+    function prev() { if (!hasCards()) return; idx = (idx - 1 + cards.length) % cards.length; render(); }
+
+    function startAuto() {
+      stopAuto();
+      if (!hasCards()) return;
+      autoTimer = setInterval(next, autoRotateMs);
+    }
+    function stopAuto() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } }
+
+    function setupShellIfNeeded() {
+      if (mode !== 'shell') return;
+      const loader = ui.loader ? qs(root, ui.loader) : null;
+      const container = ui.container ? qs(root, ui.container) : null;
+      if (!container || !shell.iframeSrc) return;
+
+      const iframe = document.createElement('iframe');
+      iframe.src = shell.iframeSrc;
+      iframe.style.width = '100%';
+      iframe.style.height = '100%';
+      iframe.style.border = 'none';
+      iframe.style.display = 'none';
+
+      iframe.onload = function () {
+        iframe.style.display = 'block';
+        if (loader) {
+          loader.style.opacity = '0';
+          setTimeout(() => loader.style.display = 'none', 500);
+        }
+      };
+      container.appendChild(iframe);
+    }
+
+    if (elPrev) elPrev.addEventListener('click', () => { prev(); startAuto(); });
+    if (elNext) elNext.addEventListener('click', () => { next(); startAuto(); });
+
+    function start() {
+      idx = 0;
+      render();
+      startAuto();
+      if (mode === 'shell') setupShellIfNeeded();
+    }
+
+    return { start, stop: stopAuto, next, prev, hasCards };
+  }
+
+  // Export global
+  global.initOnboarding = initOnboarding;
+})(window);

iatoolkit/static/js/chat_prompt_manager.js

@@ -0,0 +1,94 @@
+$(document).ready(function () {
+// --- PROMPT ASSISTANT FUNCTIONALITY ---
+    const $promptCollapse = $('#prompt-assistant-collapse');
+
+    if ($promptCollapse.length) {
+        $promptCollapse.on('shown.bs.collapse', function () {
+            // Scroll to bottom smoothly when the collapse is shown
+            $('html, body').animate(
+                { scrollTop: $(document).height() },
+                'slow'
+            );
+        });
+    }
+
+    $('.input-area').on('click', '.dropdown-menu a.dropdown-item', function (event) {
+        event.preventDefault();
+        const promptData = $(this).data();
+
+        const promptObject = {
+            prompt: promptData.promptName,
+            description: promptData.promptDescription,
+            custom_fields: typeof promptData.customFields === 'string' ? JSON.parse(promptData.customFields) : promptData.customFields
+        };
+        selectPrompt(promptObject);
+    });
+
+    // Handles the 'clear' button for the prompt selector
+    $('#clear-selection-button').on('click', function() {
+        resetPromptSelection();
+        updateSendButtonState();
+    });
+});
+
+/**
+ * Handles the selection of a prompt from the dropdown.
+ * @param {object} prompt The prompt object read from data attributes.
+ */
+function selectPrompt(prompt) {
+    selectedPrompt = prompt;
+
+    // Update the dropdown button to show the selected prompt's description
+    $('#prompt-select-button').text(prompt.description).addClass('item-selected');
+    $('#clear-selection-button').show();
+
+    // Clear the main textarea, as we are now in "prompt mode"
+    $('#question').val('');
+    autoResizeTextarea($('#question')[0]); // Reset height after clearing
+
+    // Store values in hidden fields for backward compatibility or other uses
+    $('#prompt-select-value').val(prompt.prompt);
+    $('#prompt-select-description').val(prompt.description);
+
+    // Render the dynamic input fields required by the selected prompt
+    renderDynamicInputs(prompt.custom_fields || []);
+    updateSendButtonState();
+}
+
+/**
+ * Resets the prompt selection and clears associated UI elements.
+ */
+function resetPromptSelection() {
+    selectedPrompt = null;
+
+    $('#prompt-select-button').text('Prompts disponibles ....').removeClass('item-selected');
+    $('#clear-selection-button').hide();
+    $('#prompt-select-value').val('');
+    $('#prompt-select-description').val('');
+
+    // Clear any dynamically generated input fields
+    $('#dynamic-inputs-container').empty();
+}
+
+/**
+ * Renders the custom input fields for the selected prompt.
+ * @param {Array<object>} fields The array of custom field configurations.
+ */
+function renderDynamicInputs(fields) {
+    const container = $('#dynamic-inputs-container');
+    container.empty();
+
+    const row = $('<div class="row g-2"></div>');
+    fields.forEach(field => {
+        const colDiv = $('<div class="col-md"></div>');
+        const formFloating = $('<div class="form-floating"></div>');
+        const input = $(`<input type="${field.type || 'text'}" class="form-control form-control-soft" id="${field.data_key}-id" ">`);
+        const label = $(`<label for="${field.data_key}-id">${field.label}</label>`);
+
+        formFloating.append(input, label);
+        colDiv.append(formFloating);
+        row.append(colDiv);
+    });
+
+    container.append(row);
+}