@agent-native/core 0.110.2 → 0.111.0

package/corpus/core/src/client/composer/MentionPopover.tsx

@@ -1,412 +0,0 @@
-import {
-  IconFile,
-  IconFolder,
-  IconStack2,
-  IconFileText,
-  IconCheckbox,
-  IconMail,
-  IconUser,
-  IconPresentation,
-  IconMessageChatbot,
-  IconTrash,
-  IconPlus,
-  IconHelp,
-  IconHistory,
-  IconTerminal2,
-  IconClipboardList,
-  IconPencil,
-} from "@tabler/icons-react";
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useImperativeHandle,
-  forwardRef,
-} from "react";
-import { createPortal } from "react-dom";
-
-import type { MentionItem, SkillResult, SlashCommand } from "./types.js";
-
-export interface MentionPopoverRef {
-  moveUp: () => void;
-  moveDown: () => void;
-  getSelectedIndex: () => number;
-  getSelectedMention: () => MentionItem | null;
-  getSelectedCommand: () => SlashCommand | null;
-}
-
-interface MentionPopoverProps {
-  type: "@" | "/";
-  position: { top: number; left: number } | null;
-  mentionItems: MentionItem[];
-  skills: SkillResult[];
-  commands?: SlashCommand[];
-  hint?: string;
-  isLoading: boolean;
-  query: string;
-  onSelectMention: (item: MentionItem) => void;
-  onSelectSkill: (skill: SkillResult) => void;
-  onSelectCommand?: (command: SlashCommand) => void;
-  onClose: () => void;
-}
-
-const iconProps = { size: 14, className: "shrink-0 text-muted-foreground" };
-
-function MentionItemIcon({ icon }: { icon?: string }) {
-  switch (icon) {
-    case "folder":
-      return <IconFolder {...iconProps} />;
-    case "document":
-      return <IconFileText {...iconProps} />;
-    case "form":
-      return <IconCheckbox {...iconProps} />;
-    case "email":
-      return <IconMail {...iconProps} />;
-    case "user":
-      return <IconUser {...iconProps} />;
-    case "deck":
-      return <IconPresentation {...iconProps} />;
-    case "agent":
-      return <IconMessageChatbot {...iconProps} />;
-    case "file":
-      return <IconFile {...iconProps} />;
-    default:
-      return <IconFile {...iconProps} />;
-  }
-}
-
-function CommandIcon({ icon }: { icon?: string }) {
-  switch (icon) {
-    case "clear":
-      return <IconTrash {...iconProps} />;
-    case "new":
-      return <IconPlus {...iconProps} />;
-    case "help":
-      return <IconHelp {...iconProps} />;
-    case "history":
-      return <IconHistory {...iconProps} />;
-    case "plan":
-      return <IconClipboardList {...iconProps} />;
-    case "act":
-      return <IconPencil {...iconProps} />;
-    default:
-      return <IconTerminal2 {...iconProps} />;
-  }
-}
-
-function HintWithLink({ hint }: { hint: string }) {
-  // If hint contains a URL, split it and render the URL as a link
-  const urlMatch = hint.match(/(https?:\/\/\S+)/);
-  if (!urlMatch) return <>{hint}</>;
-  const before = hint.slice(0, urlMatch.index);
-  const url = urlMatch[1];
-  return (
-    <>
-      {before}
-      <a
-        href={url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="underline hover:text-foreground"
-      >
-        Learn more
-      </a>
-    </>
-  );
-}
-
-function LoadingSkeleton() {
-  return (
-    <div className="space-y-1 p-1">
-      {[1, 2, 3].map((i) => (
-        <div key={i} className="flex items-center gap-2 rounded px-2 py-1.5">
-          <div className="h-3.5 w-3.5 rounded bg-muted animate-pulse" />
-          <div
-            className="h-3 rounded bg-muted animate-pulse"
-            style={{ width: `${60 + i * 20}px` }}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function LoadingSkeletonRow() {
-  return (
-    <div className="flex items-center gap-2 rounded px-2 py-1.5">
-      <div className="h-3.5 w-3.5 rounded bg-muted animate-pulse" />
-      <div className="h-3 w-24 rounded bg-muted animate-pulse" />
-    </div>
-  );
-}
-
-export const MentionPopover = forwardRef<
-  MentionPopoverRef,
-  MentionPopoverProps
->(function MentionPopover(props, ref) {
-  const {
-    type,
-    position,
-    mentionItems,
-    skills,
-    commands = [],
-    hint,
-    isLoading,
-    query,
-    onSelectMention,
-    onSelectSkill,
-    onSelectCommand,
-    onClose,
-  } = props;
-
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const itemCount =
-    type === "@" ? mentionItems.length : commands.length + skills.length;
-
-  // Group mention items by section for @ popover
-  const groupedMentions = React.useMemo(() => {
-    if (type !== "@") return [];
-    const groups = new Map<string, MentionItem[]>();
-    for (const item of mentionItems) {
-      const section = item.section || "Other";
-      if (!groups.has(section)) groups.set(section, []);
-      groups.get(section)!.push(item);
-    }
-    // Sort: Agents first, then Connected Agents, then template-specific,
-    // then Files, then Other
-    const sorted: { section: string; items: MentionItem[] }[] = [];
-    const knownSections = new Set([
-      "Agents",
-      "Connected Agents",
-      "Files",
-      "Other",
-    ]);
-    // Agents first
-    if (groups.has("Agents")) {
-      sorted.push({ section: "Agents", items: groups.get("Agents")! });
-      groups.delete("Agents");
-    }
-    if (groups.has("Connected Agents")) {
-      sorted.push({
-        section: "Connected Agents",
-        items: groups.get("Connected Agents")!,
-      });
-      groups.delete("Connected Agents");
-    }
-    // Template-specific sections (anything not in knownSections)
-    for (const [section, items] of groups) {
-      if (!knownSections.has(section)) {
-        sorted.push({ section, items });
-      }
-    }
-    // Files
-    if (groups.has("Files")) {
-      sorted.push({ section: "Files", items: groups.get("Files")! });
-    }
-    // Other
-    if (groups.has("Other")) {
-      sorted.push({ section: "Other", items: groups.get("Other")! });
-    }
-    return sorted;
-  }, [type, mentionItems]);
-
-  // Flat list of mention items in section order for keyboard index tracking
-  const flatMentionItems = React.useMemo(() => {
-    return groupedMentions.flatMap((g) => g.items);
-  }, [groupedMentions]);
-
-  // Reset selection when items change
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [commands, mentionItems, skills, query]);
-
-  // Scroll selected item into view
-  useEffect(() => {
-    const container = listRef.current;
-    if (!container) return;
-    // Find the actual item element by data attribute
-    const selected = container.querySelector(
-      `[data-mention-index="${selectedIndex}"]`,
-    ) as HTMLElement | undefined;
-    if (selected) {
-      selected.scrollIntoView({ block: "nearest" });
-    }
-  }, [selectedIndex]);
-
-  useImperativeHandle(ref, () => ({
-    moveUp: () => {
-      setSelectedIndex((prev) =>
-        prev <= 0 ? Math.max(0, itemCount - 1) : prev - 1,
-      );
-    },
-    moveDown: () => {
-      setSelectedIndex((prev) => (prev >= itemCount - 1 ? 0 : prev + 1));
-    },
-    getSelectedIndex: () => selectedIndex,
-    getSelectedMention: () => flatMentionItems[selectedIndex] ?? null,
-    getSelectedCommand: () => {
-      if (type !== "/" || selectedIndex >= commands.length) return null;
-      return commands[selectedIndex] ?? null;
-    },
-  }));
-
-  if (!position) return null;
-
-  const content = (
-    <>
-      {/* Backdrop to capture outside clicks */}
-      <div className="fixed inset-0 z-[9998]" onClick={onClose} />
-      <div
-        data-agent-native-composer-popover="true"
-        className="fixed z-[9999] w-[320px] overflow-y-auto rounded-lg border border-border bg-popover shadow-lg"
-        style={{
-          bottom: `calc(100vh - ${position.top}px + 4px)`,
-          left: Math.max(8, Math.min(position.left, window.innerWidth - 336)),
-          maxHeight: Math.min(320, position.top - 8),
-        }}
-      >
-        {isLoading && itemCount === 0 ? (
-          <LoadingSkeleton />
-        ) : itemCount === 0 ? (
-          <div className="px-3 py-4 text-center text-xs text-muted-foreground">
-            {type === "@" ? (
-              query ? (
-                "No results found"
-              ) : (
-                "Type to search..."
-              )
-            ) : hint ? (
-              <HintWithLink hint={hint} />
-            ) : (
-              "No skills available"
-            )}
-          </div>
-        ) : (
-          <div ref={listRef} className="p-1">
-            {isLoading && <LoadingSkeletonRow />}
-            {type === "@"
-              ? (() => {
-                  let flatIndex = 0;
-                  return groupedMentions.map((group) => (
-                    <div key={group.section}>
-                      <div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                        {group.section}
-                      </div>
-                      {group.items.map((item) => {
-                        const idx = flatIndex++;
-                        return (
-                          <button
-                            key={item.id}
-                            data-mention-index={idx}
-                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
-                              idx === selectedIndex
-                                ? "bg-accent text-accent-foreground"
-                                : "hover:bg-accent/50"
-                            }`}
-                            onMouseEnter={() => setSelectedIndex(idx)}
-                            onClick={() => onSelectMention(item)}
-                          >
-                            <MentionItemIcon icon={item.icon} />
-                            <span className="truncate text-sm">
-                              {item.label}
-                            </span>
-                            {item.description && (
-                              <span className="ms-auto shrink-0 truncate max-w-[160px] text-xs text-muted-foreground">
-                                {item.description}
-                              </span>
-                            )}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  ));
-                })()
-              : (() => {
-                  let idx = 0;
-                  return (
-                    <>
-                      {commands.length > 0 && (
-                        <div>
-                          <div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                            Commands
-                          </div>
-                          {commands.map((cmd) => {
-                            const i = idx++;
-                            return (
-                              <button
-                                key={cmd.name}
-                                data-mention-index={i}
-                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
-                                  i === selectedIndex
-                                    ? "bg-accent text-accent-foreground"
-                                    : "hover:bg-accent/50"
-                                }`}
-                                onMouseEnter={() => setSelectedIndex(i)}
-                                onClick={() => onSelectCommand?.(cmd)}
-                              >
-                                <CommandIcon icon={cmd.icon} />
-                                <span className="min-w-0 flex-1">
-                                  <span className="block truncate text-sm">
-                                    /{cmd.name}
-                                  </span>
-                                  {cmd.description && (
-                                    <span className="block truncate text-xs text-muted-foreground">
-                                      {cmd.description}
-                                    </span>
-                                  )}
-                                </span>
-                              </button>
-                            );
-                          })}
-                        </div>
-                      )}
-                      {skills.length > 0 && (
-                        <div>
-                          {commands.length > 0 && (
-                            <div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                              Skills
-                            </div>
-                          )}
-                          {(skills as SkillResult[]).map((skill) => {
-                            const i = idx++;
-                            return (
-                              <button
-                                key={skill.path}
-                                data-mention-index={i}
-                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
-                                  i === selectedIndex
-                                    ? "bg-accent text-accent-foreground"
-                                    : "hover:bg-accent/50"
-                                }`}
-                                onMouseEnter={() => setSelectedIndex(i)}
-                                onClick={() => onSelectSkill(skill)}
-                              >
-                                <IconStack2 {...iconProps} />
-                                <span className="min-w-0 flex-1">
-                                  <span className="block truncate text-sm">
-                                    {skill.name}
-                                  </span>
-                                  {skill.description && (
-                                    <span className="block truncate text-xs text-muted-foreground">
-                                      {skill.description}
-                                    </span>
-                                  )}
-                                </span>
-                              </button>
-                            );
-                          })}
-                        </div>
-                      )}
-                    </>
-                  );
-                })()}
-          </div>
-        )}
-      </div>
-    </>
-  );
-
-  return createPortal(content, document.body);
-});

package/corpus/core/src/client/composer/PastedTextChip.tsx

@@ -1,150 +0,0 @@
-import type { Attachment } from "@assistant-ui/react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { IconClipboardText, IconX } from "@tabler/icons-react";
-import { useCallback, useEffect, useState } from "react";
-
-import { cn } from "../utils.js";
-import { countLines, unwrapAttachmentEnvelope } from "./pasted-text.js";
-
-function readAttachmentText(attachment: Attachment): Promise<string> | string {
-  if ("file" in attachment && attachment.file instanceof File) {
-    return attachment.file.text();
-  }
-  const textPart = attachment.content?.find(
-    (p): p is { type: "text"; text: string } =>
-      p.type === "text" && "text" in p && typeof p.text === "string",
-  );
-  return textPart ? unwrapAttachmentEnvelope(textPart.text) : "";
-}
-
-function usePastedAttachmentText(attachment: Attachment): {
-  text: string;
-  lines: number;
-  chars: number;
-} {
-  const [text, setText] = useState("");
-
-  useEffect(() => {
-    let cancelled = false;
-    const result = readAttachmentText(attachment);
-    if (typeof result === "string") {
-      setText(result);
-      return;
-    }
-    result
-      .then((value) => {
-        if (!cancelled) setText(value);
-      })
-      .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
-  }, [attachment]);
-
-  return { text, lines: countLines(text), chars: text.length };
-}
-
-export interface PastedTextChipProps {
-  attachment: Attachment;
-  onRemove?: (id: string) => void;
-  /** Compact variant rendered inside sent user messages. */
-  compact?: boolean;
-}
-
-export function PastedTextChip({
-  attachment,
-  onRemove,
-  compact = false,
-}: PastedTextChipProps) {
-  const [open, setOpen] = useState(false);
-  const { text, lines, chars } = usePastedAttachmentText(attachment);
-
-  const handleRemove = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-      onRemove?.(attachment.id);
-    },
-    [attachment.id, onRemove],
-  );
-
-  const summary = lines > 0 ? `${lines} lines` : `${chars} chars`;
-
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
-      <PopoverPrimitive.Trigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "group relative inline-flex items-center gap-2 rounded-md border border-border/70 bg-muted/50 text-start text-foreground hover:bg-muted/70 cursor-pointer",
-            compact
-              ? "max-w-[220px] px-2 py-1.5 text-xs"
-              : "max-w-[260px] px-2.5 py-2 text-xs",
-            onRemove && !compact && "pe-7",
-          )}
-          aria-label="Preview pasted text"
-        >
-          <span
-            className={cn(
-              "flex shrink-0 items-center justify-center rounded bg-background text-muted-foreground",
-              compact ? "h-6 w-6" : "h-8 w-8",
-            )}
-          >
-            <IconClipboardText
-              className={compact ? "h-3.5 w-3.5" : "h-4 w-4"}
-            />
-          </span>
-          <span className="min-w-0 flex-1">
-            <span className="block truncate font-medium">Pasted text</span>
-            <span className="block text-[11px] text-muted-foreground">
-              {summary}
-            </span>
-          </span>
-          {onRemove && (
-            <span
-              role="button"
-              tabIndex={-1}
-              onClick={handleRemove}
-              aria-label="Remove pasted text"
-              className={cn(
-                "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground",
-                compact ? "" : "absolute end-1.5 top-1.5",
-              )}
-            >
-              <IconX className="h-3 w-3" />
-            </span>
-          )}
-        </button>
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          side="top"
-          align="start"
-          sideOffset={6}
-          collisionPadding={12}
-          className="z-50 w-[min(560px,calc(100vw-32px))] rounded-lg border border-border bg-popover text-popover-foreground shadow-lg origin-[var(--radix-popover-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
-        >
-          <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
-            <div className="flex items-center gap-2 min-w-0">
-              <IconClipboardText className="h-4 w-4 shrink-0 text-muted-foreground" />
-              <span className="text-sm font-medium truncate">Pasted text</span>
-              <span className="text-[11px] text-muted-foreground shrink-0">
-                {lines} lines · {chars} chars
-              </span>
-            </div>
-            <button
-              type="button"
-              onClick={() => setOpen(false)}
-              aria-label="Close preview"
-              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
-            >
-              <IconX className="h-3.5 w-3.5" />
-            </button>
-          </div>
-          <pre className="max-h-[60vh] overflow-auto px-3 py-2 text-[12px] leading-[1.5] whitespace-pre-wrap break-words font-mono text-foreground">
-            {text}
-          </pre>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-}