@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/ai/attachment/attachment.tsx

@@ -0,0 +1,111 @@
+import { CircleAlert, FileText, X } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { IconAction } from "../internal/icon-action.js";
+
+export type AttachmentStatus = "done" | "uploading" | "error";
+export type AttachmentVariant = "chip" | "preview";
+
+export interface AttachmentProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "children"> {
+  name: string;
+  /** Pre-formatted size, e.g. `240 KB`. */
+  size?: string;
+  /** Image URL (or object URL). Without it a document icon is shown. */
+  previewSrc?: string;
+  status?: AttachmentStatus;
+  /** 0-100, only for `uploading`. */
+  progress?: number;
+  /** `chip` is one compact line; `preview` is a tile with a larger thumbnail. */
+  variant?: AttachmentVariant;
+  /** Shows the remove button. */
+  onRemove?: () => void;
+}
+
+/** File chip or preview tile for prompt attachments, with an optional remove button. */
+export function Attachment({
+  name,
+  size,
+  previewSrc,
+  status = "done",
+  progress,
+  variant = "chip",
+  onRemove,
+  className,
+  ...props
+}: AttachmentProps) {
+  const preview = variant === "preview";
+  const thumb = previewSrc ? (
+    <img src={previewSrc} alt="" className="size-full object-cover" />
+  ) : status === "error" ? (
+    <CircleAlert aria-hidden className="size-4 text-danger" />
+  ) : (
+    <FileText aria-hidden className="size-4 text-ink-3" />
+  );
+  const detail =
+    status === "uploading"
+      ? `Subiendo${progress != null ? ` ${Math.round(progress)}%` : "…"}`
+      : status === "error"
+        ? "Error al subir"
+        : size;
+
+  return (
+    <fieldset
+      aria-label={`Adjunto ${name}`}
+      className={cn(
+        "relative flex min-w-0 max-w-full items-center gap-density-sm bg-surface-control text-ink border-control shadow-control",
+        preview
+          ? "w-40 flex-col items-stretch rounded-card p-1.5"
+          : "h-control-sm rounded-button pl-1.5 pr-1",
+        status === "error" && "text-danger",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className={cn(
+          "grid shrink-0 place-items-center overflow-hidden rounded-badge bg-surface-sunken",
+          preview ? "h-20 w-full" : "size-6",
+        )}
+      >
+        {thumb}
+      </span>
+      <span className="grid min-w-0 flex-1 leading-tight">
+        <span className="truncate text-meta font-medium">{name}</span>
+        {detail && (preview || status !== "done") ? (
+          <span
+            className={cn("truncate text-meta", status === "error" ? "text-danger" : "text-ink-3")}
+          >
+            {detail}
+          </span>
+        ) : null}
+      </span>
+      {status === "uploading" && progress != null ? (
+        <span
+          role="progressbar"
+          aria-label={`Progreso de ${name}`}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(progress)}
+          className="absolute inset-x-1.5 bottom-0.5 h-0.5 overflow-hidden rounded-badge bg-track"
+        >
+          <span
+            className="block h-full bg-accent"
+            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+          />
+        </span>
+      ) : null}
+      {onRemove ? (
+        <IconAction
+          label={`Quitar ${name}`}
+          onClick={onRemove}
+          className={cn(
+            "size-5",
+            preview && "absolute right-2.5 top-2.5 bg-surface-overlay shadow-control",
+          )}
+        >
+          <X aria-hidden />
+        </IconAction>
+      ) : null}
+    </fieldset>
+  );
+}

package/src/ai/attachment/index.ts

@@ -0,0 +1 @@
+export * from "./attachment.js";

package/src/ai/chain-of-thought/chain-of-thought.tsx

@@ -0,0 +1,120 @@
+import { Brain, Check } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+import { Disclosure } from "../internal/disclosure.js";
+import { TextShimmer } from "../text-shimmer/text-shimmer.js";
+
+export type ThoughtStatus = "pending" | "active" | "done";
+
+export interface ThoughtStep {
+  id: string;
+  label: string;
+  detail?: ReactNode;
+  status?: ThoughtStatus;
+}
+
+export interface ChainOfThoughtProps {
+  steps: ThoughtStep[];
+  /** Header text; while any step is `active` it shimmers. */
+  title?: string;
+  /** Pre-formatted total time shown in the header, e.g. `4 s`. */
+  duration?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+/** Collapsible list of reasoning steps with a status rail. */
+export function ChainOfThought({
+  steps,
+  title = "Razonamiento",
+  duration,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+}: ChainOfThoughtProps) {
+  const active = steps.some((step) => step.status === "active");
+  return (
+    <div
+      className={cn(
+        "@container/thought min-w-0 rounded-card bg-surface-sunken p-2 text-ink",
+        className,
+      )}
+    >
+      <Disclosure
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        header={
+          <>
+            <Brain aria-hidden className="size-3.5 shrink-0 text-ink-3" />
+            {active ? (
+              <TextShimmer className="truncate text-meta font-medium">{title}…</TextShimmer>
+            ) : (
+              <span className="truncate text-meta font-medium text-ink-2">{title}</span>
+            )}
+            {duration ? (
+              <span className="ml-auto shrink-0 text-meta text-ink-3">{duration}</span>
+            ) : null}
+          </>
+        }
+      >
+        <ol className="grid gap-0 pt-density-sm">
+          {steps.map((step, index) => {
+            const status = step.status ?? "done";
+            const last = index === steps.length - 1;
+            return (
+              <li key={step.id} className="relative flex gap-density-sm pb-density last:pb-0">
+                {last ? null : (
+                  <span aria-hidden className="absolute bottom-0 left-[9px] top-5 w-px bg-line" />
+                )}
+                <span
+                  aria-hidden
+                  className={cn(
+                    "relative mt-0.5 grid size-[19px] shrink-0 place-items-center rounded-full",
+                    status === "done" && "bg-success-soft text-success",
+                    status === "active" && "bg-accent-soft text-accent-ink",
+                    status === "pending" && "bg-surface-2 text-ink-3",
+                  )}
+                >
+                  {status === "done" ? (
+                    <Check className="size-3" />
+                  ) : (
+                    <span
+                      className={cn(
+                        "size-1.5 rounded-full bg-current",
+                        status === "active" && "animate-pulse",
+                      )}
+                    />
+                  )}
+                </span>
+                <div className="grid min-w-0 flex-1 gap-0.5">
+                  <p
+                    className={cn(
+                      "break-words text-meta font-medium",
+                      status === "pending" ? "text-ink-3" : "text-ink",
+                    )}
+                  >
+                    <span className="sr-only">
+                      {status === "done"
+                        ? "Completado: "
+                        : status === "active"
+                          ? "En curso: "
+                          : "Pendiente: "}
+                    </span>
+                    {step.label}
+                  </p>
+                  {step.detail ? (
+                    <div className="break-words text-meta text-ink-2">{step.detail}</div>
+                  ) : null}
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      </Disclosure>
+    </div>
+  );
+}

package/src/ai/chain-of-thought/index.ts

@@ -0,0 +1 @@
+export * from "./chain-of-thought.js";

package/src/ai/chat-list/chat-list.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Plus, Trash2 } from "lucide-react";
+import { useMemo } from "react";
+import { Button } from "../../atoms/button/button.js";
+import { cn } from "../../utils/cn.js";
+import { IconAction } from "../internal/icon-action.js";
+import { groupByDate } from "./group.js";
+
+export interface ChatListItem {
+  id: string;
+  title: string;
+  updatedAt: Date | string | number;
+  /** Last message excerpt. */
+  preview?: string;
+  unread?: boolean;
+}
+
+export interface ChatListProps {
+  items: ChatListItem[];
+  activeId?: string;
+  onSelect?: (id: string) => void;
+  onNew?: () => void;
+  /** Shows a delete button per row. */
+  onDelete?: (id: string) => void;
+  /** Reference date for the groups; defaults to the current time. Pass it for stable output. */
+  now?: Date | string | number;
+  /** Accessible name of the navigation landmark. */
+  label?: string;
+  emptyText?: string;
+  className?: string;
+}
+
+/** Sidebar list of conversations grouped by date (Hoy, Ayer, Últimos 7 días…). */
+export function ChatList({
+  items,
+  activeId,
+  onSelect,
+  onNew,
+  onDelete,
+  now,
+  label = "Conversaciones",
+  emptyText = "Aún no hay conversaciones.",
+  className,
+}: ChatListProps) {
+  const groups = useMemo(() => groupByDate(items, now ?? Date.now()), [items, now]);
+
+  return (
+    <nav
+      aria-label={label}
+      className={cn("@container/chatlist grid min-w-0 content-start gap-density", className)}
+    >
+      {onNew ? (
+        <Button variant="primary" size="sm" onClick={onNew} className="w-full">
+          <Plus aria-hidden />
+          Nueva conversación
+        </Button>
+      ) : null}
+      {groups.length === 0 ? <p className="px-2 text-meta text-ink-3">{emptyText}</p> : null}
+      {groups.map((group) => (
+        <section key={group.id} aria-labelledby={`chat-group-${group.id}`} className="grid gap-0.5">
+          <h3
+            id={`chat-group-${group.id}`}
+            className="px-2 text-overline font-semibold uppercase text-ink-3"
+          >
+            {group.label}
+          </h3>
+          <ul className="grid gap-0.5">
+            {group.items.map((item) => {
+              const active = item.id === activeId;
+              return (
+                <li key={item.id} className="group/row relative">
+                  <button
+                    type="button"
+                    aria-current={active ? "true" : undefined}
+                    onClick={() => onSelect?.(item.id)}
+                    className={cn(
+                      "grid w-full min-w-0 cursor-pointer gap-0.5 rounded-button px-2 py-1.5 text-left pressable focus-visible:focus-ring",
+                      onDelete && "pr-9",
+                      active
+                        ? "bg-accent-soft text-ink"
+                        : "text-ink-2 hover:bg-surface-2 hover:text-ink",
+                    )}
+                  >
+                    <span className="flex min-w-0 items-center gap-1.5">
+                      {item.unread ? (
+                        <>
+                          <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-accent" />
+                          <span className="sr-only">Sin leer: </span>
+                        </>
+                      ) : null}
+                      <span
+                        className={cn(
+                          "truncate text-body",
+                          item.unread || active ? "font-semibold" : "font-medium",
+                        )}
+                      >
+                        {item.title}
+                      </span>
+                    </span>
+                    {item.preview ? (
+                      <span className="hidden truncate text-meta text-ink-3 @xs/chatlist:block">
+                        {item.preview}
+                      </span>
+                    ) : null}
+                  </button>
+                  {onDelete ? (
+                    <IconAction
+                      label={`Eliminar ${item.title}`}
+                      onClick={() => onDelete(item.id)}
+                      className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 focus-visible:opacity-100 group-hover/row:opacity-100 group-focus-within/row:opacity-100"
+                    >
+                      <Trash2 aria-hidden />
+                    </IconAction>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+      ))}
+    </nav>
+  );
+}

package/src/ai/chat-list/group.ts

@@ -0,0 +1,48 @@
+// Groups conversations by recency for the sidebar list.
+
+export type DateGroupId = "today" | "yesterday" | "week" | "month" | "older";
+
+export const DATE_GROUP_LABELS: Record<DateGroupId, string> = {
+  today: "Hoy",
+  yesterday: "Ayer",
+  week: "Últimos 7 días",
+  month: "Últimos 30 días",
+  older: "Anteriores",
+};
+
+const ORDER: DateGroupId[] = ["today", "yesterday", "week", "month", "older"];
+
+const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+
+export function groupOf(date: Date | string | number, now: Date | string | number): DateGroupId {
+  const days = Math.round((startOfDay(new Date(now)) - startOfDay(new Date(date))) / 86_400_000);
+  if (days <= 0) return "today";
+  if (days === 1) return "yesterday";
+  if (days <= 7) return "week";
+  if (days <= 30) return "month";
+  return "older";
+}
+
+export interface Dated {
+  updatedAt: Date | string | number;
+}
+
+/** Newest first inside each group; empty groups are dropped; groups keep recency order. */
+export function groupByDate<T extends Dated>(
+  items: readonly T[],
+  now: Date | string | number,
+): { id: DateGroupId; label: string; items: T[] }[] {
+  const buckets = new Map<DateGroupId, T[]>();
+  for (const item of items) {
+    const id = groupOf(item.updatedAt, now);
+    buckets.set(id, [...(buckets.get(id) ?? []), item]);
+  }
+  return ORDER.flatMap((id) => {
+    const list = buckets.get(id);
+    if (!list) return [];
+    const sorted = [...list].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+    );
+    return [{ id, label: DATE_GROUP_LABELS[id], items: sorted }];
+  });
+}

package/src/ai/chat-list/index.ts

@@ -0,0 +1,2 @@
+export * from "./chat-list.js";
+export { DATE_GROUP_LABELS, type DateGroupId, groupByDate, groupOf } from "./group.js";

package/src/ai/chat-message/chat-message.tsx

@@ -0,0 +1,116 @@
+import { CircleAlert } from "lucide-react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Avatar } from "../../atoms/avatar/avatar.js";
+import { cn } from "../../utils/cn.js";
+import { Loader } from "../loader/loader.js";
+import { Markdown } from "../markdown/markdown.js";
+
+export type ChatRole = "user" | "assistant" | "system";
+export type ChatMessageStatus = "sending" | "streaming" | "done" | "error";
+
+export interface ChatMessageProps extends Omit<ComponentPropsWithoutRef<"article">, "content"> {
+  author: ChatRole;
+  /** Display name, also the avatar's accessible name. */
+  name?: string;
+  avatarSrc?: string;
+  /** `sending` and `streaming` show activity; `error` shows the failure line. */
+  status?: ChatMessageStatus;
+  /** Time label shown under the bubble (already formatted). */
+  time?: string;
+  /** Markdown text. Assistant messages render it as Markdown; user and system as plain text. */
+  content?: string;
+  /** Rich body; replaces `content`. */
+  children?: ReactNode;
+  /** Slot under the bubble (e.g. MessageActions, sources). */
+  footer?: ReactNode;
+  /** Text of the failure line when `status` is `error`. */
+  errorText?: string;
+}
+
+/** One chat turn: avatar, bubble, status, streaming caret and an optional footer slot. */
+export function ChatMessage({
+  author,
+  name,
+  avatarSrc,
+  status = "done",
+  time,
+  content,
+  children,
+  footer,
+  errorText = "No se pudo enviar el mensaje.",
+  className,
+  ...props
+}: ChatMessageProps) {
+  const streaming = status === "streaming";
+
+  if (author === "system") {
+    return (
+      <article
+        className={cn("flex justify-center", className)}
+        aria-label={name ?? "Sistema"}
+        {...props}
+      >
+        <p className="max-w-full rounded-badge bg-surface-sunken px-3 py-1 text-center text-meta text-ink-3">
+          {children ?? content}
+        </p>
+      </article>
+    );
+  }
+
+  const user = author === "user";
+  const body =
+    children ??
+    (user ? (
+      <p className="whitespace-pre-wrap break-words text-body">{content}</p>
+    ) : (
+      <Markdown streaming={streaming}>{content ?? ""}</Markdown>
+    ));
+  const waiting = !user && streaming && !content && !children;
+
+  return (
+    <article
+      aria-label={name ?? (user ? "Tú" : "Asistente")}
+      aria-busy={streaming || status === "sending" ? "true" : undefined}
+      className={cn(
+        "@container/message flex min-w-0 gap-density-sm",
+        user ? "flex-row-reverse" : "flex-row",
+        className,
+      )}
+      {...props}
+    >
+      <Avatar
+        name={name ?? (user ? "Tú" : "Asistente")}
+        src={avatarSrc}
+        highlighted={!user}
+        className="mt-0.5"
+      />
+      <div
+        className={cn(
+          "grid min-w-0 max-w-[92%] gap-1 @md/message:max-w-[80%]",
+          user && "justify-items-end",
+        )}
+      >
+        <div
+          className={cn(
+            "min-w-0 max-w-full rounded-card px-3 py-2",
+            user ? "bg-accent-soft text-ink" : "bg-surface-card text-ink border-card shadow-card",
+            status === "error" && "bg-danger-soft",
+            status === "sending" && "opacity-70",
+          )}
+        >
+          {waiting ? <Loader size="sm" label="El asistente está escribiendo" /> : body}
+        </div>
+        {status === "error" ? (
+          <p role="alert" className="flex items-center gap-1 text-meta text-danger">
+            <CircleAlert aria-hidden className="size-3.5 shrink-0" />
+            {errorText}
+          </p>
+        ) : null}
+        {time || status === "sending" ? (
+          <p className="text-meta text-ink-3">{status === "sending" ? "Enviando…" : time}</p>
+        ) : null}
+        {footer}
+      </div>
+    </article>
+  );
+}

package/src/ai/chat-message/index.ts

@@ -0,0 +1 @@
+export * from "./chat-message.js";

package/src/ai/code-block/code-block.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { useMemo } from "react";
+import { cn } from "../../utils/cn.js";
+import { IconAction } from "../internal/icon-action.js";
+import { useCopy } from "../internal/use-copy.js";
+import { resolveLanguage, type TokenType, tokenize } from "./highlight.js";
+
+const tokenClasses: Record<TokenType, string> = {
+  plain: "",
+  punctuation: "text-ink-3",
+  keyword: "text-accent-ink font-medium",
+  string: "text-success",
+  comment: "text-ink-3 italic",
+  number: "text-warning",
+  function: "text-pal-cielo-deep",
+  type: "text-pal-orquidea-deep",
+  property: "text-pal-cielo-ink",
+  variable: "text-warning",
+};
+
+const LABELS = {
+  ts: "TypeScript",
+  js: "JavaScript",
+  json: "JSON",
+  bash: "Bash",
+  go: "Go",
+  sql: "SQL",
+};
+
+export interface CodeBlockProps {
+  code: string;
+  /** `ts`, `js`, `json`, `bash`, `go` or `sql` (aliases like `typescript` work); anything else is plain. */
+  language?: string;
+  /** Optional file name shown instead of the language label. */
+  filename?: string;
+  /** Wrap long lines instead of scrolling horizontally. */
+  wrap?: boolean;
+  className?: string;
+}
+
+/** Code with a language label, a copy button and a dependency-free syntax highlighter. */
+export function CodeBlock({ code, language, filename, wrap, className }: CodeBlockProps) {
+  const { copied, copy } = useCopy();
+  const tokens = useMemo(() => tokenize(code, language), [code, language]);
+  const resolved = resolveLanguage(language);
+  const title = filename ?? (resolved ? LABELS[resolved] : language?.trim() || "Texto");
+
+  return (
+    <figure
+      className={cn(
+        "@container/code m-0 min-w-0 max-w-full overflow-hidden rounded-card bg-surface-sunken text-ink border-card shadow-card",
+        className,
+      )}
+    >
+      <figcaption className="flex items-center justify-between gap-density-sm border-b-divider px-3 py-1">
+        <span className="min-w-0 truncate font-mono text-meta text-ink-3">{title}</span>
+        <span aria-live="polite" className="flex items-center gap-1">
+          {copied ? <span className="text-meta text-success">Copiado</span> : null}
+          <IconAction
+            label={copied ? "Código copiado" : "Copiar código"}
+            onClick={() => copy(code)}
+          >
+            {copied ? <Check aria-hidden /> : <Copy aria-hidden />}
+          </IconAction>
+        </span>
+      </figcaption>
+      <pre
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region must be keyboard reachable
+        tabIndex={0}
+        className={cn(
+          "m-0 p-3 font-mono text-[12.5px] leading-relaxed focus-visible:focus-ring",
+          wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+        )}
+      >
+        <code>
+          {tokens.map((token, index) => (
+            <span
+              // biome-ignore lint/suspicious/noArrayIndexKey: tokens are positional and never reorder
+              key={index}
+              className={tokenClasses[token.type] || undefined}
+            >
+              {token.text}
+            </span>
+          ))}
+        </code>
+      </pre>
+    </figure>
+  );
+}