No se encuentra thread_id<div class="chat-wrapper">
    <button type="button" class="btn btn-primary" id="deleteCookieBtn" data-id="283c01f58b66a8ac36f514f169e0b9bf" style="margin: 10px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;margin-bottom: -10px; background-color: #2F184B !important;border-color: #2F184B !important; color: white;">Nueva Conversación</button>
    <!-- Contenedor de mensajes con ID -->
    <div class="chat-container" id="chat-messages" style="background-color: white; border: 1px solid #E2D8ED;box-shadow: 0 6px 12px rgb(0, 0, 0, 0.1); display: flex; flex-direction: column;align-items: flex-start;padding: 20px;margin:10px;border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;margin-bottom: 4px;">
                <div style="display: flex;flex-wrap: nowrap;">
            <div style="margin-top: 15px;display: flex;align-items: flex-start;"><img src="/uploads/images/67655e4fd1388.jpg" style="width: 50px;height: 50px;margin-top: -7px;" class="d-inline-block align-top" alt="Tabulacion Dashboard">
            </div>
            <div class="bot-message">
                Hola soy el Asistente de MRW Alcoy.
            </div>
        </div>
                <div id="typing-indicator" style="display: none;">
            <div style="display: flex; flex-wrap: nowrap;">
                <div style="margin-top: 8px; display: flex; align-items: flex-start;">
                    <img src="/uploads/images/67655e4fd1388.jpg" style="width: 50px;height: 50px;" alt="Tabulacion Dashboard">
                </div>
                <div class="bot-message">
                    <img src="/uploads/images/typing-black.gif" alt="Typing">
                </div>
            </div>
        </div>
    </div>  
    <!-- Caja de escritura -->
    <div class="write-box" style="margin-left: 10px;margin-bottom: 0px;margin-right: 10px;margin-top: -5px;border-top-left-radius: 0px;border-top-right-radius: 0px;">
        <div class="add-write-box">
            <label for="upload-image" style="cursor: pointer;">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
                    <path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
                </svg>
            </label>
            <input type="file" id="upload-image" name="image" style="display: none;" accept=".jpg, .jpeg, .png" 
            >
        </div>
        <div class="form-group" style="width: 100%; margin-left: 10px; margin-right: 10px;">
            <div style="display: flex; align-items: center;">  
                <img src="" id="image-preview-img" style="max-width: 60px;max-height: 40px;border-radius: 5px;margin-bottom: -24px; margin-right: 10px;">  
                <textarea maxlength="650" class="form-control" id="message-user" name="message-user" type="textarea" placeholder="Escribe aquí tu mensaje" style="width: 100%; padding-left: 10px; margin-bottom: -1.5rem;"></textarea>
            </div>
        </div>
        <!-- Botón de envío -->
        <div class="send-write-box">
            <a onclick="sendMessage()">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
                    <path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939"/>
                </svg>
            </a>
        </div>      
    </div>
</div>

<style>
    .chat-wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100%;
    }
    .chat-container {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        background-color: white;
        border: 1px solid #E2D8ED;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .bot-message {
        margin: 10px 0;
        display: flex;
        align-items: center;
    }
    .bot-message img {
        margin-right: 10px;
        height: 30px;
    }
    .human-message {
        margin: 10px 0;
        text-align: right;
    }
    .write-box {
        display: flex;
        align-items: center;
        padding: 10px;
        background-color: #ffffff;
        border-top: 1px solid #ddd;
        position: sticky;
        bottom: 0;
    }
    .write-box input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-right: 10px;
    }
    .write-box button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .write-box button:hover {
        background-color: #45a049;
    }
</style>

<script>const procesarMensajesUrl = "/usuario/chat/283c01f58b66a8ac36f514f169e0b9bf/procesar-mensajes";</script>
<script>const idembed = "283c01f58b66a8ac36f514f169e0b9bf";</script>
<script src="/js/chat_embed.js" defer></script>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-icons.min.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">