@traky-app/ui 1.6.1 → 1.6.4

package/registry/traky/ui/internal-chat-panel.tsx

@@ -8,6 +8,7 @@ import {
   IconPackage,
   IconPaperclip,
   IconPlus,
+  IconSparkles,
   IconTrash,
   IconTruckLoading,
   IconX,
@@ -92,9 +93,12 @@ import {
   parseMentionSegment,
   parseSlashMention,
   roomInitialLetter,
+  type BuildMentionListOptions,
+  type InternalChatMentionCatalogState,
   type InternalChatMentionConfig,
   type InternalChatMentionItem,
   type InternalChatMentionKind,
+  type InternalChatMentionListEntry,
 } from "@/components/ui/internal-chat-mention";
 
 export type InternalChatRoom = {
@@ -198,6 +202,7 @@ const DEFAULT_MENTION_CONFIG: InternalChatMentionConfig = {
   kindIcons: {
     guide: IconTruckLoading,
     package: IconPackage,
+    ai: IconSparkles,
   },
   categoryMeta: {
     guide: {
@@ -210,9 +215,40 @@ const DEFAULT_MENTION_CONFIG: InternalChatMentionConfig = {
       hint: "Paquetes de la empresa (WR / tracking)",
       keywords: ["paquete", "paquetes", "package", "trk", "wr"],
     },
+    ai: {
+      label: "Asistencia de IA",
+      hint: "Consultas sobre operación y datos (próximamente)",
+      keywords: ["ia", "ai", "asistencia", "inteligencia", "asistente"],
+      disabled: true,
+    },
   },
 };
 
+function isMentionEntryDisabled(
+  entry: InternalChatMentionListEntry,
+  config: InternalChatMentionConfig,
+): boolean {
+  if (entry.type !== "category") return false;
+  return Boolean(
+    entry.disabled ?? config.categoryMeta[entry.kind]?.disabled,
+  );
+}
+
+function stepMentionHighlight(
+  entries: InternalChatMentionListEntry[],
+  config: InternalChatMentionConfig,
+  current: number,
+  delta: 1 | -1,
+): number {
+  if (entries.length === 0) return 0;
+  let next = current;
+  for (let i = 0; i < entries.length; i++) {
+    next = (next + delta + entries.length) % entries.length;
+    if (!isMentionEntryDisabled(entries[next]!, config)) return next;
+  }
+  return current;
+}
+
 function renderMessageTextWithMentions(text: string): ReactNode {
   const parts = text.split(/(@\[[^\]]+\])/g);
   return parts.map((part, index) => {
@@ -245,6 +281,10 @@ export type InternalChatPanelProps = {
   mentionGuideItems?: InternalChatMentionItem[];
   mentionPackageItems?: InternalChatMentionItem[];
   mentionConfig?: InternalChatMentionConfig;
+  /** Catálogo de ítems ya filtrado en servidor (guías/paquetes). */
+  mentionServerFilteredItems?: boolean;
+  mentionCatalogLoading?: boolean;
+  onMentionCatalogChange?: (state: InternalChatMentionCatalogState) => void;
   typingLine?: string | null;
   onSendMessage: (text: string) => void | Promise<void>;
   onCreateRoom: (name: string) => void | Promise<void>;
@@ -274,6 +314,9 @@ function InternalChatPanel({
   mentionGuideItems = [],
   mentionPackageItems = [],
   mentionConfig = DEFAULT_MENTION_CONFIG,
+  mentionServerFilteredItems = false,
+  mentionCatalogLoading = false,
+  onMentionCatalogChange,
   typingLine = null,
   onSendMessage,
   onCreateRoom,
@@ -310,6 +353,13 @@ function InternalChatPanel({
     [rooms, activeRoomId],
   );
 
+  const mentionListOptions = useMemo((): BuildMentionListOptions | undefined => {
+    if (!mentionServerFilteredItems) return undefined;
+    const seg = parseMentionSegment(mentionQuery, mentionConfig);
+    if (seg.phase !== "item") return undefined;
+    return { serverFilteredItems: true };
+  }, [mentionServerFilteredItems, mentionQuery, mentionConfig]);
+
   const mentionEntries = useMemo(
     () =>
       buildMentionList(
@@ -317,8 +367,15 @@ function InternalChatPanel({
         mentionGuideItems,
         mentionPackageItems,
         mentionConfig,
+        mentionListOptions,
       ),
-    [mentionQuery, mentionGuideItems, mentionPackageItems, mentionConfig],
+    [
+      mentionQuery,
+      mentionGuideItems,
+      mentionPackageItems,
+      mentionConfig,
+      mentionListOptions,
+    ],
   );
 
   const mentionSeg = useMemo(
@@ -329,7 +386,9 @@ function InternalChatPanel({
   const mentionOpen =
     Boolean(activeRoom) &&
     mentionStart !== null &&
-    mentionEntries.length > 0;
+    (mentionEntries.length > 0 ||
+      mentionCatalogLoading ||
+      (mentionServerFilteredItems && mentionSeg.phase === "item"));
 
   const canSend =
     draft.trim().length > 0 &&
@@ -404,6 +463,32 @@ function InternalChatPanel({
     lastMentionQueryRef.current = "";
   }, [activeRoomId]);
 
+  useEffect(() => {
+    if (!onMentionCatalogChange) return;
+    if (mentionStart === null) {
+      onMentionCatalogChange({
+        open: false,
+        phase: "category",
+        filter: "",
+      });
+      return;
+    }
+    if (mentionSeg.phase === "category") {
+      onMentionCatalogChange({
+        open: true,
+        phase: "category",
+        filter: mentionSeg.filter,
+      });
+      return;
+    }
+    onMentionCatalogChange({
+      open: true,
+      phase: "item",
+      kind: mentionSeg.kind,
+      filter: mentionSeg.filter,
+    });
+  }, [mentionStart, mentionQuery, mentionConfig, onMentionCatalogChange]);
+
   function closeMentionMenu() {
     setMentionStart(null);
     setMentionQuery("");
@@ -416,13 +501,22 @@ function InternalChatPanel({
       closeMentionMenu();
       return;
     }
+    const seg = parseMentionSegment(m.query, mentionConfig);
+    const listOptions: BuildMentionListOptions | undefined =
+      mentionServerFilteredItems && seg.phase === "item"
+        ? { serverFilteredItems: true }
+        : undefined;
     const entries = buildMentionList(
       m.query,
       mentionGuideItems,
       mentionPackageItems,
       mentionConfig,
+      listOptions,
     );
-    if (entries.length === 0) {
+    const keepOpenOnEmpty =
+      mentionCatalogLoading ||
+      (mentionServerFilteredItems && seg.phase === "item");
+    if (entries.length === 0 && !keepOpenOnEmpty) {
       closeMentionMenu();
       return;
     }
@@ -453,6 +547,7 @@ function InternalChatPanel({
   }
 
   function applyCategoryPick(kind: InternalChatMentionKind) {
+    if (mentionConfig.categoryMeta[kind]?.disabled) return;
     replaceSlashSegment(`${kind}:`);
     setMentionHighlight(0);
   }
@@ -883,24 +978,49 @@ function InternalChatPanel({
                       )}
                     </div>
                     <div className="min-h-0 flex-1 overflow-y-auto p-1">
+                      {mentionCatalogLoading && mentionEntries.length === 0 ? (
+                        <div className="flex items-center justify-center gap-2 px-2 py-6 text-sm text-muted-foreground">
+                          <IconLoader2 className="size-4 animate-spin" />
+                          Buscando…
+                        </div>
+                      ) : null}
+                      {!mentionCatalogLoading &&
+                      mentionEntries.length === 0 &&
+                      mentionSeg.phase === "item" ? (
+                        <p className="px-2 py-4 text-center text-sm text-muted-foreground">
+                          Sin resultados
+                        </p>
+                      ) : null}
                       {mentionEntries.map((entry, index) => {
                         if (entry.type === "category") {
                           const IconComp = entry.icon;
+                          const categoryDisabled = isMentionEntryDisabled(
+                            entry,
+                            mentionConfig,
+                          );
                           return (
                             <button
                               key={`cat-${entry.kind}`}
                               type="button"
                               role="option"
                               aria-selected={index === mentionHighlight}
+                              aria-disabled={categoryDisabled}
+                              disabled={categoryDisabled}
                               className={cn(
                                 "flex w-full items-start gap-2 rounded-lg px-2 py-2 text-left text-sm",
-                                index === mentionHighlight
-                                  ? "bg-accent text-accent-foreground"
-                                  : "hover:bg-muted/80",
+                                categoryDisabled &&
+                                  "cursor-not-allowed opacity-50",
+                                !categoryDisabled &&
+                                  (index === mentionHighlight
+                                    ? "bg-accent text-accent-foreground"
+                                    : "hover:bg-muted/80"),
                               )}
-                              onMouseEnter={() => setMentionHighlight(index)}
+                              onMouseEnter={() => {
+                                if (!categoryDisabled) setMentionHighlight(index);
+                              }}
                               onMouseDown={(event) => {
                                 event.preventDefault();
+                                if (categoryDisabled) return;
                                 applyCategoryPick(entry.kind);
                               }}
                             >
@@ -985,15 +1105,24 @@ function InternalChatPanel({
                         if (event.key === "ArrowDown") {
                           event.preventDefault();
                           setMentionHighlight((h) =>
-                            (h + 1) % mentionEntries.length,
+                            stepMentionHighlight(
+                              mentionEntries,
+                              mentionConfig,
+                              h,
+                              1,
+                            ),
                           );
                           return;
                         }
                         if (event.key === "ArrowUp") {
                           event.preventDefault();
                           setMentionHighlight((h) =>
-                            (h - 1 + mentionEntries.length) %
-                            mentionEntries.length,
+                            stepMentionHighlight(
+                              mentionEntries,
+                              mentionConfig,
+                              h,
+                              -1,
+                            ),
                           );
                           return;
                         }
@@ -1024,7 +1153,9 @@ function InternalChatPanel({
                         if (event.key === "Enter" && !event.shiftKey) {
                           event.preventDefault();
                           const pick = mentionEntries[mentionHighlight];
-                          if (!pick) return;
+                          if (!pick || isMentionEntryDisabled(pick, mentionConfig)) {
+                            return;
+                          }
                           if (pick.type === "category") {
                             applyCategoryPick(pick.kind);
                           } else {
@@ -1035,7 +1166,9 @@ function InternalChatPanel({
                         if (event.key === "Tab") {
                           event.preventDefault();
                           const pick = mentionEntries[mentionHighlight];
-                          if (!pick) return;
+                          if (!pick || isMentionEntryDisabled(pick, mentionConfig)) {
+                            return;
+                          }
                           if (pick.type === "category") {
                             applyCategoryPick(pick.kind);
                           } else {
@@ -1109,6 +1242,8 @@ export {
 export { initialsFromDisplayName } from "@/components/ui/internal-chat-mention";
 
 export type {
+  BuildMentionListOptions,
+  InternalChatMentionCatalogState,
   InternalChatMentionConfig,
   InternalChatMentionItem,
   InternalChatMentionKind,

package/registry/traky/ui/office-address-form-dialog.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+/** Compat: importa desde `@traky-app/ui/office-address-form` (`surface="modal"`). */
+export {
+  OfficeAddressForm,
+  OfficeAddressForm as OfficeAddressFormDialog,
+  OfficeAddressFormCard,
+  useOfficeAddressForm,
+  EMPTY_OFFICE_ADDRESS_FORM_VALUES,
+  mergeOfficeAddressFormValues,
+  type OfficeAddressFormProps,
+  type OfficeAddressFormDialogProps,
+  type OfficeAddressFormValues,
+  type OfficeAddressEntryMode,
+  type OfficeAddressFormCardProps,
+} from "@/components/ui/office-address-form"