Chat

import { AiLauncher } from "sebs7n-ui/ai-button"
import { Popover, PopoverContent, PopoverTrigger } from "sebs7n-ui/popover"
import { XIcon } from "lucide-react"
import { useState } from "react"

function Asistente() {
  const [abierto, setAbierto] = useState(false)
  const [respondiendo, setRespondiendo] = useState(false)
  return (
    <div className="flex h-24 w-full items-center justify-end pr-4">
      <Popover onOpenChange={setAbierto} open={abierto}>
        <PopoverTrigger render={<AiLauncher active={respondiendo} label={abierto ? "Cerrar asistente" : "Asistente"} />}>
          {abierto ? <XIcon /> : undefined}
        </PopoverTrigger>
        <PopoverContent
          align="end"
          aria-label="Asistente"
          // Material grueso: es de lo más grande que flota. `p-0` y `gap-0` porque el aire lo
          // ponen las piezas del chat, que llegan hasta el borde con sus líneas divisorias.
          className="h-[min(560px,var(--available-height))] w-[min(400px,var(--available-width))] gap-0 overflow-hidden rounded-panel p-0"
          side="top"
          sideOffset={12}
        >
          <Conversacion onBusyChange={setRespondiendo} onClose={() => setAbierto(false)} />
        </PopoverContent>
      </Popover>
    </div>
  )
}

import { Card } from "sebs7n-ui/card"

function EnTarjeta() {
  return (
    <Card className="h-[480px] w-full max-w-md gap-0 overflow-hidden py-0">
      <Conversacion />
    </Card>
  )
}

import { Card } from "sebs7n-ui/card"
import { Chat, ChatError, ChatFooter, ChatInput, ChatMessage, ChatMessages, ChatTyping } from "sebs7n-ui/chat"

function Estados() {
  return (
    <Card className="w-full max-w-md gap-0 overflow-hidden py-0">
      <Chat busy>
        <ChatMessages className="max-h-80">
          <ChatMessage from="user">¿Cuál fue el cliente que más compró?</ChatMessage>
          <ChatTyping />
          <ChatMessage from="user">¿Y el mes pasado?</ChatMessage>
          <ChatError onRetry={() => {}}>No pude responder ahora. Probá de nuevo en un rato.</ChatError>
        </ChatMessages>
        <ChatFooter>
          <ChatInput onStop={() => {}} />
        </ChatFooter>
      </Chat>
    </Card>
  )
}