Anteriormente creamos el listado de mensajes para la aplicacion, ahora vamos a crear la caja de texto, que es, donde colocaremos los mensajes, estará compuesta de dos columnas, una de ellas de tamaño automático para que ocupe solamente el tamaño necesario; en el de tamaño fijo, colocamos el TEXTAREA con el redondeado en las esquinas:

<div class="col-8" id="right">
    *** CHATS
    <form action="" class="form-message">
        <div class="row">
            <div class="col">
                <textarea  class="form-control rounded-pill"></textarea>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary rounded-circle send-button">
                    <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
                        </svg>
                        
                </button>
            </div>
        </div>
    </form>
</div>

Y usaremos el siguiente CSS:

css/style.css

.form-message{
    margin-top: 15px;
}

.form-message button.send-button svg {
    width: 40px;
    height: 40px;
}
.form-message textarea{
   overflow: hidden;
   resize: none;
}

Y tendremos:

El siguiente paso a realizar es, crear un listado genérico para pasar del proceso principal a la página web

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js