Kōdo
El agente de NUEVAUNO. Su logo son dos ojos cuadrados: el izquierdo navy (blanco sobre fondo oscuro) y el derecho naranja. Como el logo de NUEVAUNO, es un archivo y no se arma.
kodo-app-icon-dark
kodo-app-icon
kodo-avatar-dark
kodo-avatar-light
kodo-estado-error
kodo-estado-escuchando
kodo-estado-listo
kodo-estado-necesita-aprobacion
kodo-estado-pensando
kodo-estado-trabajando
kodo-mark-white.anim
kodo-mark-white
kodo-mark.anim
kodo-mark
Archivos
Kōdo
El logo de Kōdo son dos ojos cuadrados: el izquierdo navy (blanco en fondo oscuro) y el derecho naranja #FE4A23. Es un archivo, no se arma: se usa uno de estos.
| Uso | Archivo |
|---|---|
| Ícono sobre fondo claro | /kodo/kodo-mark.svg (animado: kodo-mark.anim.svg) |
| Ícono sobre fondo oscuro | /kodo/kodo-mark-white.svg (animado: kodo-mark-white.anim.svg) |
| Ícono de app / PWA | /kodo/kodo-app-icon.svg, /kodo/kodo-app-icon-dark.svg |
| Avatar por defecto | /kodo/kodo-avatar-light.svg, /kodo/kodo-avatar-dark.svg |
| Estado del trabajo (imagen fija) | /kodo/kodo-estado-{escuchando,pensando,trabajando,necesita-aprobacion,listo,error}.svg |
| Cara animada (pantallas) | /kodo/kodo-face.js → <kodo-face>; demostración en /kodo/demo.html |
Avatares
Cada empresa crea sus Kōdo y les elige cabeza, ojos, boca, paleta y fondo (19.200 combinaciones). Las piezas están en avatar-spec.json: se dibujan en viewBox 0 0 24 24 en el orden fondo, cabeza, ojos, boca, reemplazando {face} {stroke} {eye} {accent} por los colores de la paleta. Guardar el avatar como esos cinco valores, no como imagen.
Los estados de trabajo reemplazan sólo los ojos y usan siempre los ojos del logo, sea cual sea el avatar: así "pensando" o "necesita tu aprobación" se ven igual en todos los Kōdo.
Todo sale de scripts/generate-kodo-kit.mjs (pnpm run gen:kodo). No editar a mano los archivos generados.
La cara animada: <kodo-face>
En toda pantalla (chat del motor, kodo.uno, sitio) Kōdo se muestra con este componente, no con imágenes sueltas ni animaciones propias. Así se ve y se mueve igual en todos lados.
<script type="module" src="https://ui.nuevauno.com/kodo/kodo-face.js"></script>
<kodo-face avatar="orejas.punto.cursor.miel" state="pensando" size="48" label="Kōdo Ventas"></kodo-face>avatar:cabeza.ojos.boca.paletacon los nombres deavatar-spec.json;.sin-fondoal final quita el fondo. Vacío o inválido = Kōdo por defecto (nunca se rompe).state:reposo(por defecto),escuchando,pensando,trabajando,necesita-aprobacion,listo,error. Se cambia con el atributo o conelemento.state = "...".size: píxeles o cualquier medida CSS.label: nombre para lectores de pantalla.
Cómo se mueve:
- Reposo: muestra los ojos que eligió la empresa, parpadea a intervalos irregulares (a veces dos veces) y de vez en cuando mira a un lado.
- Escuchando: ojos del logo, parpadea.
- Pensando: ojos del logo girando. Trabajando: un ojo y el cursor naranja parpadeando. Necesita aprobación: los dos ojos naranjos, latiendo. Listo: sonríe y salta una vez. Error: se sacude una vez.
- Al cambiar de estado los ojos se achican y vuelven, para que el cambio se note.
- Con "reducir movimiento" activado en el sistema no anima; con la pestaña oculta se pausa.
Para correos, PDF o servidores sin navegador: renderKodoFace(avatar, estado) (exportado por el mismo archivo) devuelve el SVG fijo.
Fuente: scripts/kodo-face.src.js; pnpm run gen:kodo lo publica con las piezas incrustadas.