Todos los componentes (204)

Tarjeta de artefacto

IA · ArtifactCard · .amset-artifact

Qué es y cuándo usarlo

Un fichero que ha generado un asistente, con su vista previa a un clic: la miniatura o el icono según el tipo, el nombre, el tamaño y las acciones de abrir y descargar.

Cuándo usarlo

Debajo de la respuesta de un asistente, para los ficheros que ha creado: informes, páginas, hojas de cálculo, imágenes.
Con una vista previa propia dentro (ArtifactFrame para HTML o PDF, markdown ya pintado, un vídeo).

Cuándo no

Para un fichero que alguien va a adjuntar a un mensaje: es un Attachment.
Para una lista de ficheros con fechas y descarga masiva: es una FileList.

Teclado: si hay vista previa, la cabecera es un botón de despliegue (Intro o Espacio); abrir y descargar son botones aparte, hermanos de la cabecera -un botón dentro de otro botón no es HTML válido-. Una imagen con onView no despliega: abre el visor.

Accesibilidad: el botón lleva aria-expanded y el cuerpo es una región con nombre. Cargando se anuncia y un fallo es una alerta con su texto. Las acciones llevan el nombre del fichero en su etiqueta («Descargar informe.pdf»). Con onVisible se pide el contenido solo de lo que entra en pantalla, y el cuerpo solo se monta mientras está abierto: un iframe no carga hasta que alguien lo pide.

Seguridad: ArtifactFrame aísla lo que muestra con sandbox="allow-scripts" y nunca allow-same-origin, así que lo que haya dentro corre pero no toca la página, sus cookies ni su almacenamiento. Es lo que permite enseñar lo que generó un modelo.

Aspecto fino: variables CSS --amset-artifact-thumb (lado de la miniatura) y --amset-artifact-body-max (alto máximo de la vista previa antes de desplazarse).

Cómo se ve

Despliega la tarjeta para ver la página.

<ArtifactCard
  name="pedidos-semana.html"
  mimeType="text/html"
  size={18_400}
  detail="hace 2 min"
  onDownload={descargar}
>
  <ArtifactFrame title="pedidos-semana.html" html={pagina} height="12rem" />
</ArtifactCard>

Props

Se importa con import { ArtifactCard } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`name`obligatoria	`string`	—
`children`	`ReactNode`	La vista previa. Con esto la cabecera es un botón que despliega; el cuerpo solo se monta mientras está abierto, así que un `iframe` o un vídeo no cargan hasta que alguien los pide.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultExpanded`	`boolean`	—
`detail`	`ReactNode`	Más datos junto al tamaño: la fecha, quién lo generó.
`error`	`string \| boolean`	Por qué no se pudo cargar. Sin texto propio, «No se pudo cargar el fichero».
`expanded`	`boolean`	—
`loading`	`boolean`	El contenido se está pidiendo.
`mimeType`	`string`	—
`onDownload`	`() => void`	Con esto aparece «Descargar».
`onExpandedChange`	`(expanded: boolean) => void`	—
`onOpen`	`() => void`	Con esto aparece «Abrir».
`onRetry`	`() => void`	Con esto, si la carga ha fallado (`error`), aparece «Reintentar» junto a las demas acciones.
`onView`	`() => void`	Se pulsa para ver una imagen en grande.
`onVisible`	`() => void`	Se llama UNA vez cuando la tarjeta entra en pantalla: para pedir la miniatura solo de lo que se ve.
`size`	`number`	En bytes. Se escribe en el idioma: «1,5 MB».
`thumbnailUrl`	`string`	Miniatura de una imagen. Con ella, pulsar la tarjeta llama a `onView` en vez de desplegar.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-artifact-thumb`	`2.5rem`
`--amset-artifact-body-max`	`30rem`

Cómo se cambia

.amset-artifact {
  --amset-artifact-thumb: ...;
  --amset-artifact-body-max: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: