zidane-ui 9.1.1 → 9.1.3

package/src/chat/rich-composer/MentionList.tsx

@@ -1,238 +0,0 @@
-import { forwardRef, lazy, Suspense, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-
-import { Highlighted } from '../../components/Highlighted';
-import { MenuRow, MenuSection } from '../../components/Menu';
-import { FooterHint } from '../../keybindings/KeyHint';
-import { useComposerLabels } from '../composer/ComposerHostProvider';
-
-// The Files tab's icon set (@pierre/trees) loads with the first file row, not with every composer.
-const FileIcon = lazy(() => import('../../code/editor/FileIcon').then((m) => ({ default: m.FileIcon })));
-
-export interface MentionItem {
-  id: string;
-  label: string;
-  description?: string;
-  /** A short value at the row's end (`12 messages`). */
-  meta?: string;
-
-  /**
-   * `/` popover only — distinguishes extension commands and their
-   * argument suggestions from skill mentions. Commands insert plain
-   * text (`insertText`) instead of an atomic mention node so the user
-   * keeps typing arguments after selection.
-   */
-  kind?: 'command' | 'command-arg';
-
-  /** Full replacement text for the suggestion range (commands / args). */
-  insertText?: string;
-
-  /**
-   * Provider section stamped by the canonical `mergeSuggestions`
-   * ("Commands" / "Skills"). Consecutive items sharing a section group
-   * under one section label, mirroring the TUI's `── Commands ──`
-   * separator rows. Labels are chrome: keyboard navigation walks items only.
-   */
-  section?: string;
-}
-
-export type MentionKind = 'files' | 'skills' | 'extensions' | 'chats';
-
-interface Props {
-  items: MentionItem[];
-  command: (item: MentionItem) => void;
-  query: string;
-  kind?: MentionKind;
-  /** The Tab hint (`#` chats: the scope Tab switches to). */
-  scopeLabel?: string;
-}
-
-const KIND_ICON: Record<Exclude<MentionKind, 'files'>, string> = {
-  skills: 'i-ph-book-bookmark',
-  extensions: 'i-ph-puzzle-piece',
-  chats: 'i-ph-chats',
-};
-
-export interface MentionListRef {
-  /**
-   * ↑ / ↓ / Enter / Tab over `items`, the list the renderer has right now
-   * (the rendered props trail it by a frame); `pick` inserts the choice.
-   * The renderer only calls this while the list shows items, so Enter is
-   * always taken.
-   */
-  onKeyDown: (props: { event: KeyboardEvent; items: MentionItem[]; pick: (item: MentionItem) => void }) => boolean;
-}
-
-export const MentionList = forwardRef<MentionListRef, Props>(
-  ({ items: visibleItems, command, query, kind = 'files', scopeLabel: visibleScopeLabel }, ref) => {
-    // The highlight belongs to one list: a new list starts at its first row.
-    const [cursor, setCursor] = useState<{ list: readonly MentionItem[]; index: number } | null>(null);
-    const listRef = useRef<HTMLDivElement>(null);
-    const indexIn = (list: readonly MentionItem[]) => (cursor && cursor.list === list ? cursor.index : 0);
-    const highlight = indexIn(visibleItems);
-
-    useLayoutEffect(() => {
-      listRef.current?.querySelector(`[data-index="${highlight}"]`)?.scrollIntoView({ block: 'nearest' });
-    }, [highlight, visibleItems]);
-
-    const select = (idx: number) => {
-      const item = visibleItems[idx];
-
-      if (item) {
-        command(item);
-      }
-    };
-
-    useImperativeHandle(ref, () => ({
-      onKeyDown({ event, items, pick }) {
-        if (items.length === 0) {
-          return false;
-        }
-
-        const index = Math.min(indexIn(items), items.length - 1);
-
-        if (event.key === 'ArrowDown') {
-          setCursor({ list: items, index: (index + 1) % items.length });
-          return true;
-        }
-
-        if (event.key === 'ArrowUp') {
-          setCursor({ list: items, index: (index - 1 + items.length) % items.length });
-          return true;
-        }
-
-        if (event.key === 'Enter' || event.key === 'Tab') {
-          pick(items[index]!);
-          return true;
-        }
-
-        return false;
-      },
-    }));
-
-    // Consecutive items sharing a section form one group; unsectioned lists are one unlabeled group.
-    const groups: { section?: string; rows: { item: MentionItem; index: number }[] }[] = [];
-    visibleItems.forEach((item, index) => {
-      const last = groups.at(-1);
-
-      if (last && last.section === item.section) {
-        last.rows.push({ item, index });
-      } else {
-        groups.push({ section: item.section, rows: [{ item, index }] });
-      }
-    });
-
-    const needle = matchNeedle(query);
-    const labels = useComposerLabels();
-
-    return (
-      // The floating surface itself (tippy's box is transparent, rich-composer.css `zg-mention`).
-      <div className="zg-float w-[440px] max-w-[80vw] flex flex-col overflow-hidden">
-        <div ref={listRef} role="listbox" className="max-h-[min(20rem,50vh)] overflow-y-auto p-1.5">
-          {visibleItems.length === 0 ? (
-            <p className="m-0 px-2 py-3 text-center text-zg-label text-[var(--zg-text-muted)]">
-              {labels.mentionNoMatches}
-            </p>
-          ) : (
-            groups.map((group, g) => (
-              <MenuSection key={group.section ?? `group-${g}`} label={group.section}>
-                {group.rows.map(({ item, index }) => (
-                  <SuggestionRow
-                    key={item.id}
-                    item={item}
-                    index={index}
-                    active={index === highlight}
-                    kind={kind}
-                    needle={needle}
-                    onHover={(i) => setCursor({ list: visibleItems, index: i })}
-                    onSelect={select}
-                  />
-                ))}
-              </MenuSection>
-            ))
-          )}
-        </div>
-        <div className="flex items-center gap-3 px-3 h-8 shrink-0 shadow-[inset_0_1px_0_var(--zg-hairline)]">
-          <FooterHint keys={['up', 'down']} label={labels.mentionNavigate} />
-          <FooterHint keys={['enter']} label={labels.mentionInsert} />
-          {visibleScopeLabel && <FooterHint keys={['tab']} label={visibleScopeLabel} />}
-          <span className="flex-1" />
-          <FooterHint keys={['esc']} label={labels.mentionClose} />
-        </div>
-      </div>
-    );
-  },
-);
-
-MentionList.displayName = 'MentionList';
-
-/*
- * The word being completed: the query's last segment (a file query's last
- * path part, a command argument after the name).
- */
-function matchNeedle(query: string): string {
-  return (query.split(/[\s/]/).pop() ?? '').toLowerCase();
-}
-
-function matchIndices(label: string, needle: string): number[] {
-  const at = needle ? label.toLowerCase().indexOf(needle) : -1;
-  return at < 0 ? [] : Array.from({ length: needle.length }, (_, i) => at + i);
-}
-
-/*
- * One suggestion: commands (and their arguments) get the command-line
- * glyph and skills the book, so the two `/` groups scan apart at a glance.
- * Files show their file-type icon, the name in mono and the folder after it.
- */
-function SuggestionRow({
-  item,
-  index,
-  active,
-  kind,
-  needle,
-  onHover,
-  onSelect,
-}: {
-  item: MentionItem;
-  index: number;
-  active: boolean;
-  kind: MentionKind;
-  needle: string;
-  onHover: (index: number) => void;
-  onSelect: (index: number) => void;
-}) {
-  const icon =
-    kind === 'files' ? (
-      <Suspense fallback={<span aria-hidden className="inline-block shrink-0 w-3.5 h-3.5" />}>
-        <FileIcon path={item.id} />
-      </Suspense>
-    ) : (
-      <span
-        className={`${item.kind ? 'i-ph-terminal-window' : KIND_ICON[kind]} text-zg-ui text-[var(--zg-text-muted)]`}
-        aria-hidden
-      />
-    );
-
-  return (
-    <MenuRow
-      role="option"
-      aria-selected={active}
-      tabIndex={-1}
-      data-index={index}
-      active={active}
-      size="md"
-      icon={icon}
-      title={
-        <span className={kind === 'files' ? 'font-mono text-zg-label' : undefined}>
-          <Highlighted text={item.label} indices={matchIndices(item.label, needle)} />
-        </span>
-      }
-      description={item.description}
-      trailing={item.meta && <span className="zg-meta">{item.meta}</span>}
-      onMouseMove={() => onHover(index)}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        onSelect(index);
-      }}
-    />
-  );
-}