Saltar al contenido
Atajo One

ChatWorkspace

El espacio de consulta de la aplicación: historial agrupado por fecha a la izquierda (se pliega a un riel de iconos con Ctrl/⌘+B y en móvil se abre como panel), la consulta como hoja inset y sólo la conversación con scroll.

import Link from 'next/link';
import {
  ChatWorkspace, ChatSidebar, ChatHeader, ChatThread, ChatWelcome,
} from '@atajo-one/design/chat-workspace';

<ChatWorkspace
  defaultSidebarOpen={cookie !== 'false'}
  sidebar={
    <ChatSidebar
      history={chats}          // { id, title, href, updatedAt }[]
      activeId={activeId}
      newChatHref="/chat"
      link={Link}              // navegación de cliente: sin recargas
      user={{ name, detail }}
      onDelete={deleteChat}    // confirmación incluida
      onSignOut={signOut}
    />
  }
>
  <ChatHeader title={title} />
  <ChatThread followKey={userTurns} composer={<ChatComposer … />}>
    <Conversation>…</Conversation>
  </ChatThread>
</ChatWorkspace>
  • Un solo scroll. La página no se desplaza: el historial y la conversación tienen el suyo. El compositor queda anclado abajo, respetando el área segura.
  • Seguir la respuesta. Mientras se lee el final, la vista sigue el texto que llega. Si se sube a releer, no se mueve y aparece «Ver respuesta nueva».
  • Enlaces del router. link recibe el enlace de la aplicación (next/link) para cambiar de consulta sin recargar.
  • Estado del riel. El sidebar guarda su estado en la cookie sidebar_state; el servidor la lee para pintar sin salto.