Kōdo · kodo-panel

Panel de Kōdo con contexto

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

Kōdo vive en cada empresa y se abre en cualquier pantalla. Sabe lo que estás viendo (la ficha 'Viendo') y lo usa sin que lo repitas.

Vista · datos de ejemplo

Anatomía

Cabecera con la marca de Kōdo, nombre y empresa
Conversación
Herramientas usadas en etiqueta de sistema
Tarjeta de aprobación cuando importa
Ficha 'Viendo: App · Registro'
Redactor con Enviar

Sí

La misma conversación que /kodo (no otra)
La ficha de contexto viaja con cada mensaje como dato, no pegada en el texto
Aprobación sólo para emitir, publicar, borrar en masa o dinero

No pidas al cliente elegir modelo
No abras Kōdo en una pestaña nueva

HTML exacto

<aside class="nu-panel-kodo" aria-label="Kōdo">
  <section class="nu-chat nu-chat--panel">
    <div class="nu-chat__cabeza">
      <img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="20" height="20">
      <div class="nu-chat__quien"><span class="nu-chat__nombre">Kōdo</span><span class="nu-etiqueta">Ejemplo SpA</span></div>
      <button type="button" class="nu-chat__cerrar" aria-label="Cerrar Kōdo"><span class="nu-icono nu-icono--chico" data-icono="close"></span></button>
    </div>
    <ol class="nu-chat__mensajes">
      <li class="nu-chat__fila nu-chat__fila--persona"><p class="nu-chat__texto">Hazme una guía con lo de siempre.</p></li>
      <li class="nu-chat__fila nu-chat__fila--kodo">
        <p class="nu-chat__herramienta">Leyó la ficha de Juanito SpA · 3 guías anteriores</p>
        <p class="nu-chat__texto nu-chat__texto--kodo">Preparé la guía GD-00064 para Juanito SpA con las 16 unidades de la última vez. ¿La emito?</p>
        <div class="nu-aprobacion" role="group" aria-label="Aprobar emitir la guía">
          <p class="nu-aprobacion__accion">Kōdo quiere emitir la guía de despacho.</p>
          <dl class="nu-aprobacion__datos">
            <div class="nu-aprobacion__dato"><dt>Cliente</dt><dd>Juanito SpA</dd></div>
            <div class="nu-aprobacion__dato"><dt>Guía</dt><dd>GD-00064 · 16 unidades</dd></div>
            <div class="nu-aprobacion__dato"><dt>Destino</dt><dd>Av. Ejemplo 123, Talca</dd></div>
          </dl>
          <div class="nu-aprobacion__botones">
            <button type="button" class="nu-aprobacion__aprobar">Aprobar</button>
            <button type="button" class="nu-aprobacion__rechazar">Rechazar</button>
          </div>
        </div>
      </li>
    </ol>
    <p class="nu-chat__viendo"><span class="nu-etiqueta">Viendo</span><span class="nu-chat__viendo-que">Contactos · Juanito SpA</span></p>
    <form class="nu-chat__redactor">
      <textarea class="nu-chat__campo" rows="1" placeholder="Pídele algo a Kōdo"></textarea>
      <button type="submit" class="nu-kodo__enviar"><span class="nu-kodo__enviar-texto">Enviar</span> →</button>
    </form>
  </section>
</aside>

Clases: .nu-panel-kodo .nu-chat--panel .nu-chat__viendo .nu-chat__redactor .nu-boton-kodo · Fragmento: snippets/kodo-panel.html