.c-send-message
.c-send-message {
background-color: use-color(base, true-white);
border-top: solid 1px use-color('grey', light-i);
display: flex;
flex-direction: column;
@include element('attachments') {
padding: 8px;
}
@include element('input') {
background: transparent;
border: 0;
height: 40px;
margin: 0;
overflow: hidden;
padding: 8px;
resize: none;
@include if-block-has-modifier('c-send-message', 'genesys') {
padding: 4px 8px 0;
}
&:focus {
box-shadow: none;
}
}
@include element('actions') {
display: flex;
margin-bottom: 8px;
a {
color: use-color('grey', light);
padding: 6px 8px;
text-decoration: none;
&:nth-last-child(1) {
margin-left: auto;
}
}
[class^='icon-'],
[class*=' icon-'] {
font-size: 19px;
padding: 0 8px;
}
}
@include element('closed-chat') {
background-color: use-color('base', 'true-white');
display: none;
height: 100%;
padding-top: 1%;
position: absolute;
text-align: center;
width: 100%;
@include if-block-has-modifier('c-send-message', 'closed-chat') {
display: block;
}
@include modifier('message') {
@include use-font('caption');
color: use-color('grey', 'light');
margin: 4px 0;
}
.c-button {
max-width: 196px;
}
}
// .attachment {
// @include element('item') {
// display: flex;
// height: 80px;
// justify-content: center;
// overflow: hidden;
// position: relative;
// text-align: center;
// width: 80px;
// }
// @include element('image') {
// border-radius: 8px;
// display: inline-block;
// height: 80px;
// }
// @include element('close') {
// background-color: transparentize(use-color(base, 'black'), 0.6);
// border-radius: 50%;
// display: flex;
// height: 14px;
// justify-content: center;
// position: absolute;
// right: 4px;
// top: 4px;
// width: 14px;
// [class^='icon-'],
// [class*=' icon-'] {
// align-self: center;
// color: use-color(base, true-white);
// font-size: 6px;
// }
// }
// }
}
Componente para Envio de Mensajes
Este componente contempla todo lo necesario (soportado) por chattigo
para el envío de mensajes.
.c-send-message
- bloque principal.c-send-message__attachments
- bloque para almacenar elementos adjuntos.attachment__item
- item adjunto.attachment__close
- icono X para cancelar la subida.attachment__image
- imagen del tipo de archivo
.c-send-message__input
- input del tipo textarea.c-send-message__actions
- anchor tags con iconos según acciones
Input behavior
En la implementación real de este componente, el textarea debería crecer según la cantidad de contenido que tenga este, para mantener todo el contenido siempre visible.
Para realizar esta tarea en necesario agregar una pequeña funcionalidad con javascript, usando JS HOOKS para cumplir este cometido.
Agregar las siguientes clases:
- Send Message .c-send-message
.widget-send-message-box-js
- .c-input.c-send-message__input
.widget-message-input-js
- .c-input.c-send-message__input
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
findMessageBox = document.getElementsByClassName('widget-send-message-box-js');
if(findMessageBox.length) {
sendMessageBox = findMessageBox[0];
inputMessage = sendMessageBox.getElementsByClassName('widget-message-input-js')[0];
if (inputMessage) {
inputMessage.addEventListener("keyup", function() {
// set new height of the input message
inputMessage.style.height = "1px";
inputMessage.style.height = (2 + inputMessage.scrollHeight) + "px";
});
}
}
});
</script>
Closed Chat [new]
Agregamos el elemento c-send-message__closed-chat
para cuando un chat este cerrado, puede estar siempre
presente y cuando se agregue la clase modificadora c-send-message--closed-chat
al block c-send-message
se hara visible:
<div class="c-send-message__closed-chat">
*
*
*
<div class="c-send-message__closed-chat">
<p class="c-send-message__closed-chat--message">
Este chat se cerró porque el cliente abandonó la conversación
</p>
<a class="c-button c-button--secondary c-button--thin">
Aceptar
</a>
</div>
</div>
Si quieres ver un ejemplo funcional, puedes visitar Widget Examples.
Examples
<div class="c-send-message widget-send-message-box-js">
<textarea class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-send-message">
<div class="c-send-message__attachments">
<div class="attachment__item">
<div class="attachment__close">
<span class="icon-close"></span>
</div>
<img class="attachment__image" src="https://cdn.chattigo.com/assets/img/attachment/preview/PDF.svg" />
</div>
</div>
<textarea class="c-input c-send-message__input" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button c-send-button--ready" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-send-message c-send-message--closed-chat">
<textarea class="c-input c-send-message__input" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
<div class="c-send-message__closed-chat">
<p class="c-send-message__closed-chat--message">
Este chat se cerró porque el cliente abandonó la conversación
</p>
<a class="c-button c-button--secondary c-button--thin">
Aceptar
</a>
</div>
</div>
.c-input-message
.c-input-message {
align-items: flex-end;
background-color: use-color('grey', light-iii);
border-top: solid 1px use-color('grey', light-i);
display: flex;
flex-direction: row;
justify-content: space-between;
min-height: 48px;
position: relative;
width: 100%;
@include element('main-action') {
align-items: center;
display: flex;
// margin: 0 16px 12px 8px;
margin: 0 16px 0 8px;
.u-icon {
&__message-action {
// margin-left: 22px;
&:first-child {
margin: 0;
}
}
}
[class^='icon-'],
[class*=' icon-'] {
color: use-color('complementary', 'light');
display: flex;
font-size: 22px;
}
}
@include element('sub-actions') {
align-items: center;
display: none;
margin: 0 8px 12px 16px;
position: relative;
@include media-breakpoint-up('tablet') {
display: flex;
}
@include modifier('mobile') {
display: flex;
@include media-breakpoint-up('tablet') {
display: none;
}
[class^='icon-'],
[class*=' icon-'] {
transform: rotate(90deg);
}
// overrides options mobile
.c-dropup {
background-color: use-color('grey', light-iii);
left: 0;
padding: 8px;
top: -40px;
[class^='icon-'],
[class*=' icon-'] {
transform: rotate(0deg);
}
&:hover {
align-items: center;
display: flex;
width: fit-content;
}
}
}
@include if-block-has-modifier('c-input-message', 'whisper') {
.c-switch + label {
background-color: use-color('grey');
&::after {
color: use-color('grey');
content: '\e011';
font-family: 'chattigoicons';
}
}
}
// Overrides
.u-icon {
&__message-action {
margin-left: 22px;
&:first-child {
margin: 0;
}
}
}
span {
display: flex;
}
.c-switch {
+ label {
background-color: use-color('secondary');
text-align: center;
width: 42px;
&::after {
align-items: center;
color: use-color('secondary');
content: '\e007';
display: flex;
font-family: 'chattigoicons';
justify-content: center;
}
}
}
}
@include element('text-sending') {
align-content: center;
display: flex;
width: 100%;
}
@include element('audio-recording') {
display: flex;
margin: 4px;
padding: 8px 16px;
width: 100%;
[class^='icon-'],
[class*=' icon-'] {
color: use-color('complementary', 'light');
display: flex;
font-size: 22px;
}
}
@include element('wave-container') {
align-items: center;
display: flex;
margin-left: 8px;
width: 100%;
}
@include element('textarea') {
background: use-color('base', 'true-white');
border: solid 1px use-color('grey', 'light-i');
border-radius: 32px;
height: auto;
margin: 4px;
max-height: 112px;
min-height: 40px;
overflow: hidden;
overflow-y: scroll;
padding: 8px 16px;
resize: none;
width: 100%;
@include if-block-has-modifier('c-input-message', 'whisper') {
border: dashed 1px use-color('grey', 'light');
}
&:empty {
&::before {
color: use-color('grey', 'light');
content: attr(#{data-placeholder});
}
}
&:focus {
box-shadow: none;
}
}
}
Nuevo input para el envio de mensajes
c-input-message__sub-actions
: contiene las acciones secundariasc-input-message__sub-actions--mobile
: contiene las acciones secundarias version mobile
c-input-message__text-sending
c-input-message__textarea
: div con contenido editable para el ingreso del contenido del mensaje.c-input-message__main-action
: contiene la accion principal.
c-input-message__audio-recording
c-input-message__wave-container
Examples
<div class="c-input-message">
<div class="c-input-message__sub-actions">
<div class="u-icon__message-action">
<input type="checkbox" class="c-switch" id="first">
<label for="first"></label>
</div>
<a class="u-icon__message-action" href="#">
<span class="icon-attachment"></span>
</a>
<a class="u-icon__message-action" href="#" id="emoji">
<span class="icon-emoji"></span>
</a>
<a class="u-icon__message-action" href="#">
<span class="icon-frecuents-answers"></span>
</a>
<a class="u-icon__message-action" href="#">
<span class="icon-edit-font"></span>
</a>
</div>
<div class="c-input-message__sub-actions c-input-message__sub-actions--mobile">
<a class="u-icon__message-action" href="#">
<span class="icon-menu-options"></span>
</a>
</div>
<div class="c-input-message__text-sending">
<div role="textbox" class="c-input c-input-message__textarea u-scrolling-content-scroll-auto" contenteditable data-placeholder="Envia un mensaje..." id="chatText"></div>
<div class="c-input-message__main-action">
<a class="u-icon__message-action">
<span class="icon-microphone"></span>
</a>
<a class="u-icon__message-action" style="display: none">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-input-message__audio-recording" style="display: none;">
<a class="u-icon__message-action">
<span class="icon-trash"></span>
</a>
<div class="c-input-message__wave-container">
<div class="u-sound-wave u-sound-wave--animate">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<a class="u-icon__message-action" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-input-message c-input-message--whisper">
<div class="c-input-message__sub-actions">
<div class="u-icon__message-action">
<input type="checkbox" class="c-switch" id="second" checked>
<label for="second"></label>
</div>
<a class="u-icon__message-action" href="#">
<span class="icon-attachment"></span>
</a>
<a class="u-icon__message-action" href="#" id="emoji">
<span class="icon-emoji"></span>
</a>
<a class="u-icon__message-action" href="#">
<span class="icon-frecuents-answers"></span>
</a>
<a class="u-icon__message-action" href="#">
<span class="icon-edit-font"></span>
</a>
</div>
<div class="c-input-message__sub-actions c-input-message__sub-actions--mobile">
<a class="u-icon__message-action" href="#">
<span class="icon-menu-options"></span>
</a>
</div>
<div class="c-input-message__text-sending">
<div role="textbox" class="c-input c-input-message__textarea u-scrolling-content-scroll-auto" contenteditable data-placeholder="Envia un mensaje..." id="chatText"></div>
<div class="c-input-message__main-action">
<a class="u-icon__message-action" style="display: none">
<span class="icon-microphone"></span>
</a>
<a class="u-icon__message-action">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-input-message__audio-recording" style="display: none;">
<a class="u-icon__message-action">
<span class="icon-trash"></span>
</a>
<div class="c-input-message__wave-container">
<div class="u-sound-wave u-sound-wave--animate">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<a class="u-icon__message-action" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-input-message c-input-message--whisper">
<div class="c-input-message__sub-actions">
<div class="u-icon__message-action">
<input type="checkbox" class="c-switch" id="second" checked>
<label for="second"></label>
</div>
<a class="u-icon__message-action" href="#">
<span class="icon-attachment"></span>
</a>
<a class="u-icon__message-action" href="#" id="emoji">
<span class="icon-emoji"></span>
</a>
<a class="u-icon__message-action" href="#">
<span class="icon-frecuents-answers"></span>
</a>
<a class="u-icon__message-action" href="#">
<span class="icon-edit-font"></span>
</a>
</div>
<div class="c-input-message__sub-actions c-input-message__sub-actions--mobile">
<a class="u-icon__message-action" href="#">
<span class="icon-menu-options"></span>
</a>
</div>
<div class="c-input-message__text-sending" style="display: none;">
<div role="textbox" class="c-input c-input-message__textarea u-scrolling-content-scroll-auto" contenteditable data-placeholder="Envia un mensaje..." id="chatText"></div>
<div class="c-input-message__main-action">
<a class="u-icon__message-action">
<span class="icon-microphone"></span>
</a>
<a class="u-icon__message-action" style="display: none">
<span class="icon-send"></span>
</a>
</div>
</div>
<div class="c-input-message__audio-recording">
<a class="u-icon__message-action">
<span class="icon-trash"></span>
</a>
<div class="c-input-message__wave-container">
<div class="u-sound-wave u-sound-wave--animate">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<a class="u-icon__message-action" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
.c-supervisor-message
.c-supervisor-message {
border: solid 1px use-color('grey', 'light-iii');
border-radius: 8px;
box-shadow: $box-shadow-card-lvl-2;
display: flex;
margin-bottom: 0;
width: 100%;
@include element('mode') {
align-items: center;
background-image: use-color('gradients', 'info-soft');
border-radius: 8px 0 0 8px;
display: flex;
padding: 25px;
@include if-block-has-modifier('c-supervisor-message', 'whisper') {
background-image: use-color('gradients', 'grey-soft');
.c-switch + label {
background-color: use-color('grey');
&::after {
color: use-color('grey') !important;
content: '\e011';
font-family: 'chattigoicons' !important;
}
}
}
// responsive
@include media-breakpoint-down('tablet') {
background-image: use-color('gradients', 'info-soft--vertical');
border-radius: 8px 8px 0 0;
padding: 12px;
@include if-block-has-modifier('c-supervisor-message', 'whisper') {
background-image: use-color('gradients', 'grey-soft--vertical');
}
}
}
@include element('mode-icon') {
color: use-color('secondary');
font-size: 41px;
}
@include element('info') {
@include use-font('caption');
line-height: 14px;
margin-left: 16px;
width: 150px;
@include media-breakpoint-down('tablet') {
width: 100%;
}
span {
@include use-font('body', 'bold');
display: inline-block;
line-height: 8px;
width: 100%;
&::first-letter {
text-transform: uppercase;
}
}
}
@include modifier('whisper') {
border: dashed 1px use-color('grey', 'light') !important;
}
// responsive
@include media-breakpoint-down('tablet') {
flex-direction: column;
}
// overrides
.c-send-message {
border: 0;
// border-radius: 0 8px 8px 0;
width: 100%;
@include element('input') {
// height: 50px;
}
@include media-breakpoint-down('tablet') {
border-radius: 0 0 8px 8px;
}
}
.c-switch {
+ label {
background-color: use-color('secondary');
text-align: center;
width: 46px;
&::after {
align-items: center;
color: use-color('secondary');
content: '\e007';
display: flex;
font-family: 'chattigoicons' !important;
justify-content: center;
}
}
}
}
Desarrollado para la intervención del supervisor en un chat.
El elemento c-supervisor-message__mode
contiene información del modo de intervención.
c-supervisor-message__mode-icon
para el icono.c-supervisor-message__info
para el contenido de texto.
El elemento c-send-message
funciona de la misma manera anteriormente descrita.
Examples
<div class="u-example-padding">
<div class="c-supervisor-message">
<div class="c-supervisor-message__mode">
<span class="c-supervisor-message__mode-icon icon-intervention"></span>
<div class="c-supervisor-message__info">
<span>Modo intervención</span>
Lo que escribas será visible para el cliente
</div>
</div>
<div class="c-send-message">
<textarea class="c-input c-send-message__input" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
</div>
</div>
<div class="u-example-padding">
<div class="c-supervisor-message c-supervisor-message--whisper">
<div class="c-supervisor-message__mode">
<input type="checkbox" class="c-switch" id="first">
<label for="first"></label>
<div class="c-supervisor-message__info">
<span>Modo susurro</span>
Lo que escribas solo será visible para el agente
</div>
<div class="c-supervisor-message__info" style="display: none;">
<span>Modo intervención</span>
Lo que escribas será visible para el cliente
</div>
</div>
<div class="c-send-message">
<textarea class="c-input c-send-message__input" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
</div>
</div>
<div class="u-example-padding">
<div class="c-supervisor-message">
<div class="c-supervisor-message__mode">
<input type="checkbox" class="c-switch" id="first">
<label for="first"></label>
<div class="c-supervisor-message__info" style="display: none;">
<span>Modo susurro</span>
Lo que escribas solo será visible para el agente
</div>
<div class="c-supervisor-message__info">
<span>Modo intervención</span>
Lo que escribas será visible para el cliente
</div>
</div>
<div class="c-send-message">
<textarea class="c-input c-send-message__input" onkeyup="textAreaAdjust(this)" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="icon-attachment"></span>
</a>
<a href="#">
<span class="icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="icon-send"></span>
</a>
</div>
</div>
</div>
</div>