@eventcatalog/core 5.0.0-beta.2 → 5.0.0-beta.4

package/eventcatalog/src/components/Tables/RowActionsMenu.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CodeBracketIcon, DocumentTextIcon, MapIcon } from '@heroicons/react/24/solid';
+import { EllipsisVerticalIcon, StarIcon } from '@heroicons/react/24/outline';
+import { useStore } from '@nanostores/react';
+import { favoritesStore, toggleFavorite } from '@stores/favorites-store';
+
+const MENU_WIDTH = 280;
+const MENU_GAP = 6;
+
+interface RowActionsMenuProps {
+  title: string;
+  /** Link to the resource's documentation page. */
+  href: string;
+  /** Link to the resource in the visualiser. The menu leaves the visualiser out when absent. */
+  visualiserHref?: string;
+  /** Link to the resource's schema page. The menu leaves the schema out when absent. */
+  schemaHref?: string;
+  favorite: { nodeKey: string; badge: string };
+}
+
+/** The "..." menu at the end of a table row, with links to the resource and a favorite toggle. */
+export function RowActionsMenu({ title, href, visualiserHref, schemaHref, favorite }: RowActionsMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
+  const favorites = useStore(favoritesStore);
+  const isFavorite = favorites.some((fav) => fav.nodeKey === favorite.nodeKey);
+
+  // The table lives inside scrollable, overflow-hidden containers, so the menu is
+  // rendered in a portal with fixed positioning to avoid being clipped.
+  const updatePosition = () => {
+    const button = buttonRef.current;
+    if (!button) return;
+    const rect = button.getBoundingClientRect();
+    const menuHeight = menuRef.current?.offsetHeight ?? 0;
+    const spaceBelow = window.innerHeight - rect.bottom;
+
+    // Flip above the trigger when there isn't enough room below it.
+    const openUpwards = menuHeight > 0 && spaceBelow < menuHeight + MENU_GAP && rect.top > spaceBelow;
+    const top = openUpwards ? rect.top - menuHeight - MENU_GAP : rect.bottom + MENU_GAP;
+    const left = Math.max(MENU_GAP, rect.right - MENU_WIDTH);
+
+    setMenuPosition({ top, left });
+  };
+
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updatePosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (!menuRef.current?.contains(target) && !buttonRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    const handleReposition = () => updatePosition();
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleEscape);
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleEscape);
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
+    };
+  }, [isOpen]);
+
+  const handleToggleFavorite = () => {
+    toggleFavorite({ nodeKey: favorite.nodeKey, path: [], title, badge: favorite.badge, href });
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="relative flex justify-end">
+      <button
+        ref={buttonRef}
+        type="button"
+        aria-label="Actions"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="rounded-md p-1.5 text-[rgb(var(--ec-icon-color))] transition-colors hover:bg-[rgb(var(--ec-content-hover)/0.5)] hover:text-[rgb(var(--ec-page-text))]"
+      >
+        <EllipsisVerticalIcon className="h-4 w-4" />
+      </button>
+
+      {isOpen &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            ref={menuRef}
+            role="menu"
+            style={{
+              position: 'fixed',
+              top: menuPosition?.top ?? -9999,
+              left: menuPosition?.left ?? -9999,
+              width: MENU_WIDTH,
+              visibility: menuPosition ? 'visible' : 'hidden',
+            }}
+            className="z-50 overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] shadow-xl"
+          >
+            <a
+              href={href}
+              className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+            >
+              <DocumentTextIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+              View documentation
+            </a>
+            {visualiserHref && (
+              <a
+                href={visualiserHref}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+              >
+                <MapIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+                View in visualiser
+              </a>
+            )}
+            {schemaHref && (
+              <a
+                href={schemaHref}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+              >
+                <CodeBracketIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+                View schema
+              </a>
+            )}
+            <button
+              type="button"
+              onClick={handleToggleFavorite}
+              className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+            >
+              <StarIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+              {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+            </button>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+}

package/eventcatalog/src/components/Tables/TablePagination.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import type { Table } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+
+/** Page size for a table, remembered in the browser under `storageKey`. */
+export function useStoredPageSize(storageKey: string) {
+  const [pageSize, setPageSize] = useState<number>(() => {
+    if (typeof window === 'undefined') return 10;
+    const stored = Number(window.localStorage.getItem(storageKey));
+    return PAGE_SIZE_OPTIONS.includes(stored) ? stored : 10;
+  });
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(storageKey, String(pageSize));
+    }
+  }, [pageSize, storageKey]);
+  return [pageSize, setPageSize] as const;
+}
+
+interface TablePaginationProps<TData> {
+  table: Table<TData>;
+  pageSize: number;
+  onPageSizeChange: (pageSize: number) => void;
+}
+
+/** Footer with the result count, page size picker and previous/next page controls. */
+export function TablePagination<TData>({ table, pageSize, onPageSizeChange }: TablePaginationProps<TData>) {
+  const totalResults = table.getPrePaginationRowModel().rows.length;
+
+  return (
+    <div className="flex-shrink-0 flex items-center justify-between px-6 py-3 border-t border-[rgb(var(--ec-page-border))]">
+      <div className="flex items-center gap-3 text-xs text-[rgb(var(--ec-page-text-muted))]">
+        {totalResults > 0 && (
+          <span>
+            <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getRowModel().rows.length}</span> of{' '}
+            <span className="font-medium text-[rgb(var(--ec-page-text))]">{totalResults}</span> results
+          </span>
+        )}
+        {totalResults > 0 && <span aria-hidden className="h-3 w-px bg-[rgb(var(--ec-page-border))]" />}
+        <label className="flex items-center gap-1.5">
+          <span>Per page</span>
+          <select
+            value={pageSize}
+            onChange={(e) => onPageSizeChange(Number(e.target.value))}
+            className="cursor-pointer rounded bg-transparent px-1 py-0.5 font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] focus:bg-[rgb(var(--ec-content-hover))] focus:outline-none"
+          >
+            {PAGE_SIZE_OPTIONS.map((size) => (
+              <option key={size} value={size}>
+                {size}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <button
+          className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+          title="Previous page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+        <span className="text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))] min-w-[60px] text-center">
+          <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getState().pagination.pageIndex + 1}</span>
+          {' / '}
+          <span>{table.getPageCount() || 1}</span>
+        </span>
+        <button
+          className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+          title="Next page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/eventcatalog/src/features/ai/chat-api.ts

@@ -127,10 +127,10 @@ The user will ask you some questions about the software architecture catalog, yo
 
 At point the referer url (${referrer}) will be the URL of the page the user is on, you should use this to help you answer the question,
 You may be able to get the resource from the URL
-  - Example if the url is like /docs|visualiser|architecture/{collection}/{id}/{version} 
+  - Example if the url is like /docs|visualiser/{collection}/{id}/{version} 
     - (e.g /docs/events/MyEvent/1.0.0) in this case the id is MyEvent and the version is 1.0.0 and collection is events.
     - (e.g /visualiser/domains/MyDomain/1.0.0) in this case the id is MyDomain and the version is 1.0.0 and collection is domains.
-    - (e.g /architecture/services/MyService/1.0.0) in this case the id is MyService and the version is 1.0.0 and collection is services.
+    - (e.g /docs/services/MyService/1.0.0/resources) in this case the id is MyService and the version is 1.0.0 and collection is services; the user is looking at the resources the service uses.
 
 The referer URL is: ${referrer}
 
@@ -159,7 +159,7 @@ When responding:
     - The link options are:
         - If you want to get the documentation for a resource use the /docs/ prefix (e.g /docs/{collection}/{id}/{version})
         - If you want to let the user know they can visualize a resource use the /visualiser/ prefix (e.g /visualiser/{collection}/{id}/{version})
-        - If you want to let the user know they can see the architecture of a resource use the /architecture/ prefix (e.g /architecture/{collection}/{id}/{version})
+        - If you want to show the user everything a domain, system, service, flow, channel or message (event, command, query) contains, uses or connects to, link its Resources page (e.g /docs/{collection}/{id}/{version}/resources). Only those collections have a Resources page.
     - If you don't know the version, use the getResource tool to fetch the resource and get the actual version number before creating the link.
 7. When you return a schema, use code blocks to render the schema to the user too, for example if the schema is in JSON format use \`\`\`json and if the schema is in YAML format use \`\`\`yaml
 8. IMPORTANT: After answering each question, ALWAYS use the suggestFollowUpQuestions tool to suggest 2-3 relevant follow-up questions the user might want to ask next. These should be contextual to the conversation and help the user explore related topics.