@echothink-ui/search 0.1.0

package/src/components/SearchResultsPanel.tsx

@@ -0,0 +1,327 @@
+import type * as React from "react";
+import type {
+  SearchResultGroup,
+  SearchResultItem,
+  SearchResultMetadata,
+  SearchResultsPanelProps,
+} from "./types";
+
+function getGroupItems(group: SearchResultGroup) {
+  return group.results ?? group.items ?? [];
+}
+
+function getGroupLabel(group: SearchResultGroup) {
+  return (
+    group.label ?? group.title ?? group.entityType ?? group.type ?? "Results"
+  );
+}
+
+function getGroupDomId(group: SearchResultGroup, index: number) {
+  const seed = String(group.id ?? getGroupLabel(group))
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+
+  return `search-results-${seed || "group"}-${index}`;
+}
+
+function getResultTitle(result: SearchResultItem) {
+  return result.title ?? result.name ?? result.label ?? "Untitled result";
+}
+
+function getResultDescription(result: SearchResultItem) {
+  return result.description ?? result.excerpt;
+}
+
+function getResultHref(result: SearchResultItem) {
+  return result.href ?? result.url;
+}
+
+function getResultId(
+  result: SearchResultItem,
+  group: SearchResultGroup,
+  index: number,
+) {
+  return (
+    result.id ??
+    `${group.id ?? getGroupLabel(group)}-${getResultTitle(result)}-${index}`
+  );
+}
+
+function getTotalCount(groups: SearchResultGroup[], totalCount?: number) {
+  if (typeof totalCount === "number") {
+    return totalCount;
+  }
+
+  return groups.reduce((sum, group) => sum + getGroupItems(group).length, 0);
+}
+
+function getEntityInitial(label: string) {
+  return label.trim().slice(0, 1).toUpperCase();
+}
+
+function isLabeledMetadata(
+  metadata: SearchResultMetadata,
+): metadata is { label?: React.ReactNode; value?: React.ReactNode } {
+  return (
+    typeof metadata === "object" &&
+    metadata !== null &&
+    !Array.isArray(metadata) &&
+    "value" in metadata
+  );
+}
+
+function normalizeMetadataValue(
+  metadata: SearchResultMetadata,
+): React.ReactNode {
+  if (isLabeledMetadata(metadata)) {
+    if (metadata.label && metadata.value !== undefined) {
+      return (
+        <>
+          {metadata.label}: {metadata.value}
+        </>
+      );
+    }
+
+    return metadata.value;
+  }
+
+  return metadata as React.ReactNode;
+}
+
+function hasMetadataSourceValue(
+  metadata: unknown,
+): metadata is SearchResultMetadata {
+  return (
+    metadata !== null &&
+    metadata !== undefined &&
+    metadata !== false &&
+    metadata !== ""
+  );
+}
+
+function hasRenderableMetadata(metadata: React.ReactNode) {
+  return (
+    metadata !== null &&
+    metadata !== undefined &&
+    metadata !== false &&
+    metadata !== ""
+  );
+}
+
+function getMetadata(result: SearchResultItem): React.ReactNode[] {
+  const source = result.meta ?? result.metadata;
+  const values: SearchResultMetadata[] = Array.isArray(source)
+    ? [...source]
+    : [];
+
+  if (!Array.isArray(source) && hasMetadataSourceValue(source)) {
+    values.push(source);
+  }
+
+  if (result.owner) {
+    values.push({ label: "Owner", value: result.owner });
+  }
+
+  if (result.status) {
+    values.push(result.status);
+  }
+
+  if (result.updatedAt) {
+    values.push({ label: "Updated", value: result.updatedAt });
+  }
+
+  if (result.version) {
+    values.push(`v${result.version}`);
+  }
+
+  return values.map(normalizeMetadataValue).filter(hasRenderableMetadata);
+}
+
+export function SearchResultsPanel({
+  groups = [],
+  query,
+  totalCount,
+  isLoading = false,
+  emptyLabel = "No results found",
+  className,
+  onResultSelect,
+  onSelect,
+  ...props
+}: SearchResultsPanelProps) {
+  const count = getTotalCount(groups, totalCount);
+  const hasResults = groups.some((group) => getGroupItems(group).length > 0);
+  const classes = ["eth-search-results-panel", className]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleSelect = (
+    result: SearchResultItem,
+    group: SearchResultGroup,
+    resultId: string,
+  ) => {
+    onResultSelect?.(result, group);
+    onSelect?.(result.id ?? resultId);
+  };
+
+  return (
+    <section
+      {...props}
+      className={classes}
+      aria-label={props["aria-label"] ?? "Search results"}
+      data-eth-component="SearchResultsPanel"
+    >
+      <header className="eth-search-results-panel__summary">
+        <div>
+          <p className="eth-search-results-panel__eyebrow">Search results</p>
+          <h3 className="eth-search-results-panel__title">
+            {isLoading
+              ? "Searching..."
+              : `${count} result${count === 1 ? "" : "s"}`}
+          </h3>
+        </div>
+        {query ? (
+          <span className="eth-search-results-panel__query">"{query}"</span>
+        ) : null}
+      </header>
+
+      {isLoading ? (
+        <div className="eth-search-results-panel__state" role="status">
+          <p className="eth-search-results-panel__loading-copy">
+            Loading results
+          </p>
+          <span className="eth-search-results-panel__skeleton" />
+          <span className="eth-search-results-panel__skeleton" />
+          <span className="eth-search-results-panel__skeleton" />
+        </div>
+      ) : hasResults ? (
+        <div className="eth-search-results-panel__groups">
+          {groups.map((group, groupIndex) => {
+            const items = getGroupItems(group);
+            const groupLabel = getGroupLabel(group);
+            const groupId = getGroupDomId(group, groupIndex);
+
+            if (items.length === 0) {
+              return null;
+            }
+
+            return (
+              <section
+                className="eth-search-results-panel__group"
+                key={group.id ?? `${groupLabel}-${groupIndex}`}
+                aria-labelledby={groupId}
+              >
+                <div className="eth-search-results-panel__group-header">
+                  <h4
+                    className="eth-search-results-panel__group-title"
+                    id={groupId}
+                  >
+                    {groupLabel}
+                  </h4>
+                  <span className="eth-search-results-panel__count">
+                    {group.count ?? items.length}
+                  </span>
+                </div>
+
+                <div className="eth-search-results-panel__list">
+                  {items.map((result, index) => {
+                    const metadata = getMetadata(result);
+                    const resultId = getResultId(result, group, index);
+                    const description = getResultDescription(result);
+                    const href = getResultHref(result);
+                    const title = getResultTitle(result);
+                    const resultContent = (
+                      <>
+                        <span
+                          className="eth-search-results-panel__entity"
+                          aria-hidden="true"
+                        >
+                          {getEntityInitial(
+                            result.entityType ??
+                              result.type ??
+                              group.entityType ??
+                              groupLabel,
+                          )}
+                        </span>
+                        <span className="eth-search-results-panel__body">
+                          <span className="eth-search-results-panel__name">
+                            {title}
+                          </span>
+                          {description ? (
+                            <span className="eth-search-results-panel__description">
+                              {description}
+                            </span>
+                          ) : null}
+                        </span>
+                        {metadata.length > 0 ? (
+                          <span className="eth-search-results-panel__metadata">
+                            {metadata.map((item, metaIndex) => (
+                              <span
+                                className="eth-search-results-panel__meta"
+                                key={metaIndex}
+                              >
+                                {item}
+                              </span>
+                            ))}
+                          </span>
+                        ) : null}
+                      </>
+                    );
+
+                    if (href) {
+                      return (
+                        <a
+                          className="eth-search-results-panel__item"
+                          href={href}
+                          key={resultId}
+                          onClick={
+                            onResultSelect || onSelect
+                              ? () => handleSelect(result, group, resultId)
+                              : undefined
+                          }
+                        >
+                          {resultContent}
+                        </a>
+                      );
+                    }
+
+                    if (onResultSelect || onSelect) {
+                      return (
+                        <button
+                          className="eth-search-results-panel__item"
+                          key={resultId}
+                          type="button"
+                          onClick={() => handleSelect(result, group, resultId)}
+                        >
+                          {resultContent}
+                        </button>
+                      );
+                    }
+
+                    return (
+                      <article
+                        className="eth-search-results-panel__item"
+                        key={resultId}
+                      >
+                        {resultContent}
+                      </article>
+                    );
+                  })}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="eth-search-results-panel__state">
+          <p className="eth-search-results-panel__empty-title">{emptyLabel}</p>
+          {query ? (
+            <p className="eth-search-results-panel__empty-copy">
+              Try another keyword or remove a filter.
+            </p>
+          ) : null}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/SemanticSearchResult.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import type { SemanticSearchResultProps } from "./types";
+
+export function SemanticSearchResult({ result, className, ...props }: SemanticSearchResultProps) {
+  const evidence = result.evidence ?? [];
+
+  return (
+    <article
+      {...props}
+      className={`eth-search-semantic-result ${className ?? ""}`}
+      data-eth-component="SemanticSearchResult"
+    >
+      <p className="eth-search-semantic-result__snippet">
+        {renderHighlightedSnippet(result.snippet, result.highlights ?? [])}
+      </p>
+      {evidence.length > 0 ? (
+        <div className="eth-search-semantic-result__evidence">
+          <span className="eth-search-semantic-result__evidence-label">Evidence</span>
+          <ul className="eth-search-semantic-result__evidence-list">
+            {evidence.map((item) => (
+              <li key={item.id}>
+                {item.href ? (
+                  <a className="eth-search-semantic-result__evidence-item" href={item.href}>
+                    {item.label}
+                  </a>
+                ) : (
+                  <span className="eth-search-semantic-result__evidence-item">{item.label}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+function renderHighlightedSnippet(snippet: string, highlights: Array<[number, number]>) {
+  if (!highlights.length) return snippet;
+  const sorted = [...highlights].sort((a, b) => a[0] - b[0]);
+  const parts: React.ReactNode[] = [];
+  let cursor = 0;
+  sorted.forEach(([start, end], index) => {
+    const safeStart = Math.max(cursor, Math.min(snippet.length, start));
+    const safeEnd = Math.max(safeStart, Math.min(snippet.length, end));
+    if (safeStart > cursor) parts.push(snippet.slice(cursor, safeStart));
+    parts.push(<mark key={index}>{snippet.slice(safeStart, safeEnd)}</mark>);
+    cursor = safeEnd;
+  });
+  if (cursor < snippet.length) parts.push(snippet.slice(cursor));
+  return parts;
+}

package/src/components/searchUtils.ts

@@ -0,0 +1,20 @@
+import type { CommandItem } from "./types";
+
+export function filterCommands(commands: CommandItem[], query: string) {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) return commands;
+  return commands.filter((command) =>
+    [command.label, command.hint, command.group, command.shortcut]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(normalized))
+  );
+}
+
+export function groupBy<T>(items: T[], getKey: (item: T) => string) {
+  const groups = new Map<string, T[]>();
+  items.forEach((item) => {
+    const key = getKey(item);
+    groups.set(key, [...(groups.get(key) ?? []), item]);
+  });
+  return Array.from(groups.entries());
+}

package/src/components/types.ts

@@ -0,0 +1,208 @@
+import type * as React from "react";
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  hint?: string;
+  group?: string;
+  shortcut?: string;
+  onSelect: () => void;
+}
+
+export type AppCommandKind = "app-domain" | "resource" | "action";
+
+export interface AppCommandItem {
+  id: string;
+  label: string;
+  description?: React.ReactNode;
+  domain?: string;
+  kind?: AppCommandKind;
+  shortcut?: string;
+  status?: React.ReactNode;
+  onSelect?: () => void;
+}
+
+export interface AppCommandSearchProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "defaultValue" | "onChange" | "onSelect" | "onSubmit"
+> {
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  commands?: AppCommandItem[];
+  kbdHint?: React.ReactNode;
+  scopeLabel?: React.ReactNode;
+  emptyText?: React.ReactNode;
+  onChange?: (value: string) => void;
+  onSelect?: (id: string) => void;
+  onSubmit?: (value: string) => void;
+}
+
+export interface GlobalCommandPaletteProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "onSelect"
+> {
+  open: boolean;
+  onClose: () => void;
+  commands: CommandItem[];
+  heading?: React.ReactNode;
+  contextLabel?: React.ReactNode;
+  query?: string;
+  searchPlaceholder?: string;
+  onQueryChange?: (query: string) => void;
+}
+
+export interface ProjectCommandPaletteProps extends GlobalCommandPaletteProps {
+  projectRef: string;
+}
+
+export type SearchResultMetadata =
+  | React.ReactNode
+  | {
+      label?: React.ReactNode;
+      value?: React.ReactNode;
+    };
+
+export interface SearchResultItem {
+  id?: string;
+  label?: string;
+  title?: string;
+  name?: string;
+  description?: React.ReactNode;
+  excerpt?: React.ReactNode;
+  href?: string;
+  url?: string;
+  entityType?: string;
+  type?: string;
+  meta?: SearchResultMetadata | SearchResultMetadata[];
+  metadata?: SearchResultMetadata | SearchResultMetadata[];
+  owner?: React.ReactNode;
+  status?: React.ReactNode;
+  updatedAt?: React.ReactNode;
+  version?: string | number;
+}
+
+export interface SearchResultGroup {
+  id?: string;
+  label?: string;
+  title?: string;
+  type?: string;
+  entityType?: string;
+  count?: number;
+  results?: SearchResultItem[];
+  items?: SearchResultItem[];
+}
+
+export interface SearchResultsPanelProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "onSelect"
+> {
+  groups?: SearchResultGroup[];
+  query?: string;
+  totalCount?: number;
+  isLoading?: boolean;
+  emptyLabel?: React.ReactNode;
+  onResultSelect?: (result: SearchResultItem, group: SearchResultGroup) => void;
+  onSelect?: (id: string) => void;
+}
+
+export interface SearchFacetOption {
+  value: string;
+  label: string;
+  count?: number;
+  disabled?: boolean;
+}
+
+export interface SearchFacet {
+  id: string;
+  label: string;
+  options: SearchFacetOption[];
+}
+
+export interface SearchFacetPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+  facets: SearchFacet[];
+  selected: Record<string, string[]>;
+  onChange: (selected: Record<string, string[]>) => void;
+}
+
+export interface SavedSearch extends Record<string, unknown> {
+  id: string;
+  label: string;
+  query: string;
+  updatedAt: string;
+}
+
+export interface SavedSearchesProps extends React.HTMLAttributes<HTMLElement> {
+  searches: SavedSearch[];
+  onRun?: (id: string) => void;
+  onDelete?: (id: string) => void;
+}
+
+export interface RecentItem extends Record<string, unknown> {
+  id: string;
+  label: string;
+  kind: string;
+  description?: React.ReactNode;
+  href?: string;
+  visitedAt: string;
+}
+
+export interface RecentItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  items: RecentItem[];
+  emptyText?: React.ReactNode;
+  onSelect?: (id: string) => void;
+}
+
+export interface EntitySuggestion {
+  id: string;
+  label: string;
+  kind?: string;
+  meta?: React.ReactNode;
+}
+
+export interface EntitySearchInputProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "defaultValue" | "onChange" | "onSelect"
+> {
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onSearch?: (q: string) => void;
+  suggestions?: EntitySuggestion[];
+  suggestionsLabel?: string;
+  resultsLabel?: React.ReactNode;
+  loadingLabel?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  loading?: boolean;
+  emptyText?: React.ReactNode;
+  onChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+  onSelect?: (suggestion: EntitySuggestion) => void;
+}
+
+export interface AppDomainSearchProps extends EntitySearchInputProps {
+  appDomainRef?: string;
+}
+
+export interface ResourceSearchProps extends EntitySearchInputProps {
+  resourceScope?: string;
+}
+
+export interface SemanticSearchResultProps extends React.HTMLAttributes<HTMLElement> {
+  result: {
+    id: string;
+    snippet: string;
+    highlights?: Array<[number, number]>;
+    evidence: Array<{ id: string; label: string; href?: string }>;
+  };
+}
+
+export interface AgentSearchSuggestionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  suggestion: {
+    id: string;
+    label: string;
+    rationale?: string;
+    onSelect?: () => void;
+  };
+}