chattigo-webkit 1.28.0

.c-send-message

scss 
.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
<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

html 
<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>
html w/ attachments 
<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>
html closed chat 
<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>

Requires

@function use-color()

@mixin element()

.c-input-message

scss 
.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('complementario', '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('complementario', '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;
    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 secundarias
    • c-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

html 
<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>
html whisper 
<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>
html Recording 
<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

scss 
.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

html unassigned 
<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>
html whisper mode 
<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>
html intervention mode 
<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>

Requires

@function use-color()

@mixin element()

@mixin use-font()