@traky-app/ui 1.6.0 → 1.6.3

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

@@ -0,0 +1,233 @@
+import type { Icon } from "@tabler/icons-react";
+
+export type InternalChatMentionKind = "guide" | "package" | "ai";
+
+export type InternalChatMentionItem = {
+  id: string;
+  kind: InternalChatMentionKind;
+  label: string;
+  subtitle: string;
+  insertLabel: string;
+  icon: Icon;
+};
+
+export type InternalChatMentionCategoryMeta = {
+  label: string;
+  hint: string;
+  keywords: string[];
+  /** Visible en el menú de tipo pero no seleccionable (p. ej. próximamente). */
+  disabled?: boolean;
+};
+
+export type InternalChatMentionListEntry =
+  | {
+      type: "category";
+      kind: InternalChatMentionKind;
+      label: string;
+      hint: string;
+      icon: Icon;
+      disabled?: boolean;
+    }
+  | { type: "item"; data: InternalChatMentionItem };
+
+export type InternalChatMentionCatalogState = {
+  open: boolean;
+  phase: "category" | "item";
+  kind?: InternalChatMentionKind;
+  filter: string;
+};
+
+export type BuildMentionListOptions = {
+  /** Si true, los ítems ya vienen filtrados del servidor (sin filtro local por texto). */
+  serverFilteredItems?: boolean;
+};
+
+export const DEFAULT_MENTION_KIND_ORDER: InternalChatMentionKind[] = [
+  "guide",
+  "package",
+  "ai",
+];
+
+export const DEFAULT_MENTION_KIND_LABEL: Record<
+  InternalChatMentionKind,
+  string
+> = {
+  guide: "Guías",
+  package: "Paquetes",
+  ai: "Asistencia de IA",
+};
+
+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",
+    ia: "ai",
+    ai: "ai",
+    asistencia: "ai",
+    ...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],
+    disabled: config.categoryMeta[kind].disabled,
+  }));
+  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[],
+  skipTextFilter = false,
+): InternalChatMentionListEntry[] {
+  const q = filterText.trim().toLowerCase();
+  let items = catalog.filter((i) => i.kind === kind);
+  if (!skipTextFilter && 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,
+  options?: BuildMentionListOptions,
+): InternalChatMentionListEntry[] {
+  const seg = parseMentionSegment(query, config);
+  if (seg.phase === "category") {
+    return filterCategoryEntries(seg.filter, config);
+  }
+  if (seg.kind === "ai" || config.categoryMeta[seg.kind]?.disabled) {
+    return [];
+  }
+  const pool = seg.kind === "guide" ? guideItems : packageItems;
+  return filterItemsByKind(
+    seg.kind,
+    seg.filter,
+    pool,
+    Boolean(options?.serverFilteredItems),
+  );
+}
+
+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));
+}