@traky-app/ui 1.5.0 → 1.6.1

package/registry/traky/ui/option-combobox.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn, commandFilterAccentInsensitive } from "@/lib/utils"
+
+export type OptionComboboxOption = {
+  value: string
+  label: string
+  icon?: ComponentType<{ className?: string; stroke?: number }>
+  iconClassName?: string
+  /** Pastilla de color, por ejemplo una etiqueta. */
+  color?: string
+  /** Sangría para una opción hija. */
+  indented?: boolean
+}
+
+function OptionGlyph({
+  icon: Icon,
+  className,
+}: {
+  icon?: OptionComboboxOption["icon"]
+  className?: string
+}) {
+  if (!Icon) return null
+  return <Icon className={cn("size-4 shrink-0", className)} stroke={1.75} />
+}
+
+function OptionFace({ option }: { option: OptionComboboxOption }) {
+  if (option.color) {
+    return (
+      <span
+        className="inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium"
+        style={{
+          color: option.color,
+          borderColor: option.color,
+          backgroundColor: `${option.color}1A`,
+        }}
+      >
+        {option.label}
+      </span>
+    )
+  }
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <OptionGlyph icon={option.icon} className={option.iconClassName} />
+      <span className="truncate">{option.label}</span>
+    </span>
+  )
+}
+
+export function OptionCombobox({
+  value = "",
+  options,
+  onChange,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyLabel = "No se encontraron resultados.",
+  groupHeading,
+  allowEmpty = false,
+  emptyValueLabel,
+  emptyValueIcon,
+  clearLabel,
+  clearOption,
+  allOption,
+  groups,
+  multiple = false,
+  values = [],
+  onValuesChange,
+  className,
+  disabled = false,
+  modal = false,
+  title,
+}: {
+  value?: string
+  options: OptionComboboxOption[]
+  onChange?: (value: string) => void
+  /** Varias opciones a la vez. El menú no se cierra al marcar. */
+  multiple?: boolean
+  values?: string[]
+  onValuesChange?: (values: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: string
+  groupHeading?: string
+  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */
+  allowEmpty?: boolean
+  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */
+  emptyValueLabel?: string
+  emptyValueIcon?: OptionComboboxOption["icon"]
+  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */
+  clearLabel?: string
+  /** Opción para vaciar el valor, visible también en el botón. */
+  clearOption?: OptionComboboxOption
+  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */
+  allOption?: OptionComboboxOption
+  /** Varios grupos, por ejemplo persona y empresa. */
+  groups?: { heading?: string; options: OptionComboboxOption[] }[]
+  className?: string
+  disabled?: boolean
+  modal?: boolean
+  title?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const blankLabel = emptyValueLabel || placeholder
+  const realOptions = allowEmpty
+    ? options.filter((option) => option.value !== "")
+    : options
+  const grouped = (groups ?? []).filter((group) => group.options.length > 0)
+  const catalog = grouped.length
+    ? grouped.flatMap((group) => group.options)
+    : realOptions
+  const listOptions = allOption ? [allOption, ...catalog] : catalog
+  const emptyChoice: OptionComboboxOption = {
+    value: "",
+    label: blankLabel,
+    icon: emptyValueIcon,
+  }
+  const selected = allowEmpty && value === ""
+    ? emptyChoice
+    : clearOption && value === ""
+      ? clearOption
+      : listOptions.find((option) => option.value === value)
+        ?? (!value ? allOption : undefined)
+  const selectedMany = multiple
+    ? values.flatMap((id) => {
+        const option = listOptions.find((item) => item.value === id)
+        return option ? [option] : []
+      })
+    : []
+
+  const chosen = (optionValue: string) =>
+    multiple ? values.includes(optionValue) : value === optionValue
+
+  const choose = (next: string) => {
+    if (multiple) {
+      onValuesChange?.(
+        values.includes(next)
+          ? values.filter((item) => item !== next)
+          : [...values, next],
+      )
+      return
+    }
+    onChange?.(next)
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={disabled ? undefined : setOpen}
+      modal={modal}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          title={title}
+          className={cn(
+            "w-full justify-between font-normal",
+            multiple && "h-auto py-2",
+            className,
+          )}
+        >
+          {multiple ? (
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+              {selectedMany.length ? (
+                selectedMany.map((option) => (
+                  <OptionFace key={option.value} option={option} />
+                ))
+              ) : (
+                <span className="truncate text-muted-foreground">
+                  {placeholder}
+                </span>
+              )}
+            </span>
+          ) : selected ? (
+            <OptionFace option={selected} />
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      {disabled ? null : (
+        <PopoverContent
+          align="start"
+          className="z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
+        >
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyLabel}</CommandEmpty>
+              {grouped.length ? (
+                grouped.map((group) => (
+                  <CommandGroup
+                    key={group.heading ?? group.options[0]?.value}
+                    heading={group.heading}
+                  >
+                    {group.options.map((option) => (
+                      <CommandItem
+                        key={option.value || option.label}
+                        value={`${option.label} ${option.value}`}
+                        className={option.indented ? "pl-6" : undefined}
+                        onSelect={() => choose(option.value)}
+                      >
+                        <OptionFace option={option} />
+                        <IconCheck
+                          className={cn(
+                            "ml-auto size-4",
+                            chosen(option.value) ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ))
+              ) : (
+                <CommandGroup heading={groupHeading}>
+                  {allowEmpty ? (
+                    <CommandItem
+                      value={`__empty__ ${blankLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph icon={emptyValueIcon} />
+                      {blankLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {clearOption ? (
+                    <CommandItem
+                      value={`__clear__ ${clearOption.label}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph
+                        icon={clearOption.icon}
+                        className={clearOption.iconClassName}
+                      />
+                      {clearOption.label}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : clearLabel ? (
+                    <CommandItem
+                      value={`__clear__ ${clearLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      {clearLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {listOptions.map((option) => (
+                    <CommandItem
+                      key={option.value || option.label}
+                      value={`${option.label} ${option.value}`}
+                      className={option.indented ? "pl-6" : undefined}
+                      onSelect={() => choose(option.value)}
+                    >
+                      <OptionFace option={option} />
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          chosen(option.value) ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  )
+}

package/src/ui/internal-chat-mention.ts

@@ -0,0 +1,202 @@
+import type { Icon } from "@tabler/icons-react";
+
+export type InternalChatMentionKind = "guide" | "package";
+
+export type InternalChatMentionItem = {
+  id: string;
+  kind: InternalChatMentionKind;
+  label: string;
+  subtitle: string;
+  insertLabel: string;
+  icon: Icon;
+};
+
+export type InternalChatMentionCategoryMeta = {
+  label: string;
+  hint: string;
+  keywords: string[];
+};
+
+export type InternalChatMentionListEntry =
+  | {
+      type: "category";
+      kind: InternalChatMentionKind;
+      label: string;
+      hint: string;
+      icon: Icon;
+    }
+  | { type: "item"; data: InternalChatMentionItem };
+
+export const DEFAULT_MENTION_KIND_ORDER: InternalChatMentionKind[] = [
+  "guide",
+  "package",
+];
+
+export const DEFAULT_MENTION_KIND_LABEL: Record<
+  InternalChatMentionKind,
+  string
+> = {
+  guide: "Guías",
+  package: "Paquetes",
+};
+
+export type InternalChatMentionConfig = {
+  kindOrder: InternalChatMentionKind[];
+  categoryMeta: Record<
+    InternalChatMentionKind,
+    InternalChatMentionCategoryMeta
+  >;
+  kindIcons: Record<InternalChatMentionKind, Icon>;
+  kindAliases?: Record<string, InternalChatMentionKind>;
+};
+
+function resolveKindAlias(
+  raw: string,
+  config: InternalChatMentionConfig,
+): InternalChatMentionKind | null {
+  const s = raw.trim().toLowerCase();
+  if (!s) return null;
+
+  const aliases: Record<string, InternalChatMentionKind> = {
+    guide: "guide",
+    guía: "guide",
+    guia: "guide",
+    paquete: "package",
+    paquetes: "package",
+    package: "package",
+    ...config.kindAliases,
+  };
+
+  const direct = aliases[s];
+  if (direct) return direct;
+
+  for (const kind of config.kindOrder) {
+    const meta = config.categoryMeta[kind];
+    if (kind === s) return kind;
+    if (meta.label.toLowerCase() === s) return kind;
+    if (meta.keywords.some((k) => k === s)) return kind;
+  }
+
+  return null;
+}
+
+export function parseMentionSegment(
+  query: string,
+  config: InternalChatMentionConfig,
+):
+  | { phase: "category"; filter: string }
+  | { phase: "item"; kind: InternalChatMentionKind; filter: string } {
+  const colon = query.indexOf(":");
+  if (colon === -1) {
+    return { phase: "category", filter: query };
+  }
+  const head = query.slice(0, colon).trim().toLowerCase();
+  const tail = query.slice(colon + 1);
+  if (head === "") {
+    return { phase: "category", filter: query.replace(":", "") };
+  }
+  const kind = resolveKindAlias(head, config);
+  if (!kind) {
+    return { phase: "category", filter: query };
+  }
+  return { phase: "item", kind, filter: tail };
+}
+
+export function parseSlashMention(
+  draft: string,
+  cursor: number,
+): { start: number; query: string } | null {
+  const before = draft.slice(0, cursor);
+  const lastSlash = before.lastIndexOf("/");
+  if (lastSlash === -1) return null;
+  const charBefore = lastSlash === 0 ? " " : draft[lastSlash - 1];
+  if (charBefore !== " " && charBefore !== "\n" && lastSlash !== 0) {
+    return null;
+  }
+  const afterSlash = before.slice(lastSlash + 1);
+  if (afterSlash.includes("\n")) return null;
+  return { start: lastSlash, query: afterSlash };
+}
+
+function filterCategoryEntries(
+  filterText: string,
+  config: InternalChatMentionConfig,
+): InternalChatMentionListEntry[] {
+  const q = filterText.trim().toLowerCase();
+  const rows: InternalChatMentionListEntry[] = config.kindOrder.map((kind) => ({
+    type: "category",
+    kind,
+    label: config.categoryMeta[kind].label,
+    hint: config.categoryMeta[kind].hint,
+    icon: config.kindIcons[kind],
+  }));
+  if (!q) return rows;
+  const byAlias = resolveKindAlias(q, config);
+  return rows.filter((row) => {
+    if (row.type !== "category") return false;
+    if (byAlias && row.kind === byAlias) return true;
+    return (
+      row.label.toLowerCase().includes(q) ||
+      row.hint.toLowerCase().includes(q) ||
+      config.categoryMeta[row.kind].keywords.some(
+        (k) => k.includes(q) || q.includes(k),
+      )
+    );
+  });
+}
+
+function filterItemsByKind(
+  kind: InternalChatMentionKind,
+  filterText: string,
+  catalog: InternalChatMentionItem[],
+): InternalChatMentionListEntry[] {
+  const q = filterText.trim().toLowerCase();
+  let items = catalog.filter((i) => i.kind === kind);
+  if (q) {
+    items = items.filter(
+      (item) =>
+        item.label.toLowerCase().includes(q) ||
+        item.subtitle.toLowerCase().includes(q) ||
+        item.insertLabel.toLowerCase().includes(q),
+    );
+  }
+  return items.map((data) => ({ type: "item", data }));
+}
+
+export function buildMentionList(
+  query: string,
+  guideItems: InternalChatMentionItem[],
+  packageItems: InternalChatMentionItem[],
+  config: InternalChatMentionConfig,
+): InternalChatMentionListEntry[] {
+  const seg = parseMentionSegment(query, config);
+  if (seg.phase === "category") {
+    return filterCategoryEntries(seg.filter, config);
+  }
+  const pool = seg.kind === "guide" ? guideItems : packageItems;
+  return filterItemsByKind(seg.kind, seg.filter, pool);
+}
+
+export function roomInitialLetter(name: string): string {
+  const t = name.trim();
+  if (!t) return "?";
+  const ch = [...t][0];
+  return ch && /\p{L}/u.test(ch) ? ch.toUpperCase() : "?";
+}
+
+export function initialsFromDisplayName(name: string): string {
+  const t = name.trim();
+  if (!t) return "?";
+  const parts = t.split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return `${parts[0]![0]!}${parts[parts.length - 1]![0]!}`.toUpperCase();
+}
+
+export function formatMessageTime(iso: string, locale = "es"): string {
+  return new Intl.DateTimeFormat(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(new Date(iso));
+}