Base de Conocimiento del Agente
Administra la información que tu agente utilizará para responder
{/* Collapsed: Datos Generales */}
{Ico.store(MINT_DEEP)}
Datos Generales
Información básica de tu negocio
{Ico.chev('#8A7E6E')}
{/* Expanded: Horarios */}
0.05 ? MINT : '#E9E5DC'),
boxShadow: p > 0.05 ? '0 0 0 4px ' + MINT_SOFT : 'none',
borderRadius: 8, padding: '12px 14px',
background: '#FFF',
transition: 'all 0.4s ease'
}}>
{Ico.clock(MINT_DEEP)}
Horarios de Operación
Configura los horarios de apertura y cierre
{Ico.chev('#8A7E6E')}
{days.map((d, i) => {
const t0 = 0.04 + i * stagger;
const local = clamp((p - t0) / rowDur);
const togglePhase = clamp(local / 0.35);
const timesPhase = clamp((local - 0.35) / 0.65);
const isOn = local > 0.12;
return (
{d}
0.02 ? typed('08:00 a. m.', timesPhase) : ''}
ghost=""
icon={Ico.clock('#C2BAA8')}
opacity={togglePhase} />
a
0.5 ? typed('11:59 p. m.', clamp((timesPhase - 0.5) / 0.5)) : ''}
ghost=""
icon={Ico.clock('#C2BAA8')}
opacity={togglePhase} />
);
})}
);
}
// ── SCREEN B — Categorías ──────────────────────────────
function ScreenCategorias({ p }) {
const rows = [
{ name: 'Papas a la francesa', count: '1 artículo' },
{ name: 'Hamburguesas', count: '4 artículos' },
{ name: 'Bebidas', count: '4 artículos' },
{ name: 'Combos', count: '3 artículos' },
{ name: 'Aderezos disponibles', count: '20 artículos' },
{ name: 'Especialidades', count: '4 artículos' },
{ name: 'Opciones de modif.', count: '0 artículos' }];
const stagger = 0.085;
const rowDur = 0.32;
// Tabs bar at top
const tabs = ['Disponibilidad', 'Menús', 'Categorías', 'Artículos', 'Modificadores'];
const activeTab = 2;
return (
{/* tabs row */}
{tabs.map((t, i) =>
{t}
)}
Categorías
{/* search */}
{Ico.search('#9A8E7C')}
Buscar…
{/* table head */}
↑ Nombre
Menús
Artículos
{rows.map((r, i) => {
const t0 = 0.08 + i * stagger;
const local = clamp((p - t0) / rowDur);
if (local <= 0) {
return (
);
}
return (
{r.name}
Menu Principal
{r.count}
);
})}
Personaliza tu agente
Configura el tono de voz y los mensajes de tu agente
{/* Card: Tono de Voz */}
0.02 ? MINT : '#E9E5DC'),
boxShadow: p > 0.02 ? '0 0 0 4px ' + MINT_SOFT : 'none',
borderRadius: 8, padding: '12px 14px',
background: '#FFF',
marginBottom: 10,
transition: 'all 0.4s ease'
}}>
{Ico.chat(MINT_DEEP)}
Tono de Voz
Define cómo se comunica tu agente con los clientes
{Ico.chev('#8A7E6E')}
0.1 ? 12 : 0, flexWrap: 'wrap'
}}>
{tonos.map((t, i) => {
const isOn = i === selectedTono && chipsIn > 0.5;
const cIn = clamp(chipsIn * 1.3 - i * 0.06);
return (
{isOn &&
}
{t}
);
})}
Mensajes predeterminados
Textos que envía tu agente en situaciones específicas
{/* Al Saludar — expands and shows typing */}
0.2 ? MINT : '#E9E5DC'),
boxShadow: greetExpand > 0.2 ? '0 0 0 4px ' + MINT_SOFT : 'none',
borderRadius: 8, padding: '12px 14px',
background: '#FFF',
marginBottom: 8,
transition: 'all 0.4s ease'
}}>
👋
Al Saludar
Mensajes de bienvenida para clientes nuevos y recurrentes
{Ico.chev('#8A7E6E')}
0.1 ? 10 : 0
}}>
{typed(greetingText, typeP)}
{typeP < 1 && typeP > 0 &&
}
{/* Collapsed bonus row */}
🚫
Cuando no estés disponible
Mensajes para cuando la tienda está cerrada o pausada
{Ico.chev('#8A7E6E')}
);
}
// ── main demo ──────────────────────────────────────────
function AprendeNegocioDemo() {
const [idx, p, setIdx] = useScreenCycle();
const screen = SCREENS[idx];
// Render the proper inner screen with cross-fade between
const innerByIdx = (i, pp) => {
if (i === 0) return
{/* browser-y top bar */}
app.wapido.ai
/{screen.id}
{/* caption pill */}
{screen.caption}
{/* progress dots */}
{SCREENS.map((s, i) => {
const isActive = i === idx;
return (
);
})}
{idx + 1}/{SCREENS.length}