@vvedantb/ui 0.3.2 → 0.4.0-rc.1

package/src/composer/input-area/composerPrediction.ts

@@ -0,0 +1,51 @@
+/** Trailing-edge debounce: how long the user must pause before asking the model. */
+const PREDICTION_IDLE_MS = 500;
+
+/** Below this, there is not enough text to continue usefully. */
+const PREDICTION_MIN_CHARS = 12;
+
+/**
+ * True when no completion should be requested for this draft. Skips short
+ * drafts, in-progress `@` or `/` tokens (the slash menu owns those), and text
+ * that already ends a sentence.
+ */
+export function shouldSkipPrediction(value: string): boolean {
+  if (value.trim().length < PREDICTION_MIN_CHARS) return true;
+  const lastWord = value.split(/\s/).pop() ?? "";
+  if (lastWord.startsWith("@") || lastWord.startsWith("/")) return true;
+  return /[.!?]\s*$/.test(value);
+}
+
+/**
+ * The model returns a bare continuation. Add the joining space here so the
+ * ghost text matches what accepting it produces.
+ */
+export function ghostSuggestion(value: string, completion: string): string {
+  return /\s$/.test(value) || /^\s/.test(completion)
+    ? completion
+    : ` ${completion}`;
+}
+
+/**
+ * Waits for a typing pause, then asks for a completion. Returns a cancel
+ * function that clears the timer; a late reply is dropped once cancelled.
+ */
+export function scheduleCompletion(
+  value: string,
+  complete: (text: string) => Promise<string>,
+  onResult: (completion: string) => void,
+  idleMs: number = PREDICTION_IDLE_MS,
+): () => void {
+  let cancelled = false;
+  const timer = setTimeout(() => {
+    complete(value)
+      .then((completion) => {
+        if (!cancelled && completion) onResult(completion);
+      })
+      .catch(console.error);
+  }, idleMs);
+  return () => {
+    cancelled = true;
+    clearTimeout(timer);
+  };
+}

package/src/composer/input-area/composerSlashItems.ts

@@ -0,0 +1,206 @@
+import type { ActionFeatures, BannerFeatures, SkillChipPreview } from "./types";
+import { matchesSlashQuery } from "./composerSlashTrigger";
+
+export type SlashGroup = "Actions" | "Skills";
+
+const SLASH_GROUPS: ReadonlyArray<SlashGroup> = ["Actions", "Skills"];
+
+export type SlashIconKey = "plus" | "paperclip" | "lock" | "book" | "file";
+
+type SlashActionKey =
+  | "new-chat"
+  | "attach"
+  | "privacy"
+  | "artifacts"
+  | "new-artifact";
+
+type SlashItemBase = {
+  id: string;
+  label: string;
+  description?: string;
+  group: SlashGroup;
+  icon: SlashIconKey;
+  keywords: string[];
+  active?: boolean;
+  badge?: string;
+  preview?: SkillChipPreview;
+};
+
+export type ComposerSlashItem =
+  | (SlashItemBase & { kind: "action"; action: SlashActionKey })
+  | (SlashItemBase & { kind: "skill-hub"; skillId: string })
+  | (SlashItemBase & { kind: "skill-manual"; skillId: string });
+
+type HubSkill = {
+  _id: string;
+  name: string;
+  description: string;
+  slug: string;
+  icon?: string;
+  kind?: "style" | "persona";
+  installed: boolean;
+  enabled: boolean;
+};
+
+type ManualSkill = {
+  _id: string;
+  name: string;
+  description: string;
+  activation: string;
+};
+
+export function buildComposerSlashItems(args: {
+  actionFeatures: ActionFeatures;
+  bannerFeatures: BannerFeatures;
+  showFileUpload: boolean;
+  includeNewChat: boolean;
+  hubSkills: HubSkill[];
+  manualSkills: ManualSkill[];
+  selectedManualIds: ReadonlyArray<string>;
+  extraItems?: ComposerSlashItem[];
+  includeArtifacts?: boolean;
+}): ComposerSlashItem[] {
+  const actions: ComposerSlashItem[] = [];
+  if (args.includeNewChat) {
+    actions.push({
+      id: "action:new-chat",
+      label: "new-chat",
+      description: "Start a new conversation",
+      group: "Actions",
+      kind: "action",
+      action: "new-chat",
+      icon: "plus",
+      keywords: ["new", "chat", "reset"],
+    });
+  }
+  if (args.showFileUpload) {
+    actions.push({
+      id: "action:attach",
+      label: "attach",
+      description: "Attach a file or image",
+      group: "Actions",
+      kind: "action",
+      action: "attach",
+      icon: "paperclip",
+      keywords: ["file", "upload", "image", "pdf"],
+    });
+  }
+  actions.push(
+    toggleAction(
+      "privacy",
+      "private",
+      "Temporary chat that stays out of the sidebar",
+      "lock",
+      ["privacy", "temporary"],
+      args.bannerFeatures.privacy,
+    ),
+  );
+  if (args.includeArtifacts !== false) {
+    actions.push({
+      id: "action:artifacts",
+      label: "artifacts",
+      description: "Open your Artifacts library",
+      group: "Actions",
+      kind: "action",
+      action: "artifacts",
+      icon: "file",
+      keywords: ["artifact", "document", "html"],
+    });
+    actions.push({
+      id: "action:new-artifact",
+      label: "new-artifact",
+      description: "Create a new artifact",
+      group: "Actions",
+      kind: "action",
+      action: "new-artifact",
+      icon: "file",
+      keywords: ["artifact", "create", "new"],
+    });
+  }
+
+  const hubItems: ComposerSlashItem[] = args.hubSkills
+    .filter((skill) => skill.installed)
+    .map((skill) => ({
+      id: `skill-hub:${skill._id}`,
+      label: skill.slug || skill.name,
+      description: skill.description,
+      group: "Skills",
+      kind: "skill-hub",
+      skillId: skill._id,
+      icon: "book",
+      keywords: [skill.name, skill.slug],
+      active: skill.enabled,
+      badge: "Skill",
+      preview: {
+        id: skill._id,
+        kind: "hub",
+        name: skill.name,
+        description: skill.description,
+        icon: skill.icon,
+        sourceLabel: skill.kind === "persona" ? "Persona" : "Hub",
+        installed: skill.installed,
+        enabled: skill.enabled,
+      },
+    }));
+  const manualItems: ComposerSlashItem[] = args.manualSkills
+    .filter((skill) => skill.activation === "manual")
+    .map((skill) => ({
+      id: `skill-manual:${skill._id}`,
+      label: skill.name,
+      description: skill.description,
+      group: "Skills",
+      kind: "skill-manual",
+      skillId: skill._id,
+      icon: "book",
+      keywords: [skill.name],
+      active: args.selectedManualIds.includes(skill._id),
+      badge: "Manual",
+      preview: {
+        id: skill._id,
+        kind: "manual",
+        name: skill.name,
+        description: skill.description,
+        sourceLabel: "Custom",
+        installed: true,
+        enabled: args.selectedManualIds.includes(skill._id),
+      },
+    }));
+  const skills = [...hubItems, ...manualItems].sort((a, b) =>
+    a.label.localeCompare(b.label),
+  );
+
+  const extras = args.extraItems ?? [];
+  return [...actions, ...skills, ...extras];
+}
+
+export function filterAndGroupSlashItems(
+  items: ComposerSlashItem[],
+  query: string,
+): Array<{ group: SlashGroup; items: ComposerSlashItem[] }> {
+  const filtered = items.filter((item) => matchesSlashQuery(item, query));
+  return SLASH_GROUPS.flatMap((group) => {
+    const groupItems = filtered.filter((item) => item.group === group);
+    return groupItems.length > 0 ? [{ group, items: groupItems }] : [];
+  });
+}
+
+function toggleAction(
+  action: SlashActionKey,
+  label: string,
+  description: string,
+  icon: SlashIconKey,
+  keywords: string[],
+  active: boolean,
+): ComposerSlashItem {
+  return {
+    id: `action:${action}`,
+    label,
+    description,
+    group: "Actions",
+    kind: "action",
+    action,
+    icon,
+    keywords,
+    active,
+  };
+}

package/src/composer/input-area/composerSlashOptionId.ts

@@ -0,0 +1,7 @@
+export function optionId(listboxId: string, itemId: string): string {
+  return `${toIdToken(listboxId)}-option-${toIdToken(itemId)}`;
+}
+
+function toIdToken(value: string): string {
+  return value.replaceAll(/[^A-Za-z0-9_-]/g, "-");
+}

package/src/composer/input-area/composerSlashPosition.ts

@@ -0,0 +1,40 @@
+export interface ComposerSlashPlacement {
+  top: number;
+  left: number;
+  width: number;
+  placement: "above" | "below";
+  maxHeight: number;
+}
+
+const POPUP_GAP = 6;
+const VIEWPORT_PADDING = 8;
+const PANEL_MAX_HEIGHT = 340;
+const PANEL_MIN_ABOVE = 200;
+
+export function computePanelPopupPlacement(
+  anchor: DOMRect,
+  viewport: { width: number; height: number },
+): ComposerSlashPlacement {
+  const spaceAbove = anchor.top - VIEWPORT_PADDING - POPUP_GAP;
+  const spaceBelow =
+    viewport.height - anchor.bottom - VIEWPORT_PADDING - POPUP_GAP;
+  const placeAbove = spaceAbove >= PANEL_MIN_ABOVE || spaceAbove >= spaceBelow;
+  const placement = placeAbove ? "above" : "below";
+  const available = placeAbove ? spaceAbove : spaceBelow;
+
+  return {
+    top: placeAbove ? anchor.top - POPUP_GAP : anchor.bottom + POPUP_GAP,
+    left: anchor.left,
+    width: anchor.width,
+    placement,
+    maxHeight: Math.max(160, Math.min(PANEL_MAX_HEIGHT, available)),
+  };
+}
+
+export function viewportSize(): { width: number; height: number } {
+  const visual = window.visualViewport;
+  return {
+    width: visual?.width ?? window.innerWidth,
+    height: visual?.height ?? window.innerHeight,
+  };
+}

package/src/composer/input-area/composerSlashTrigger.ts

@@ -0,0 +1,50 @@
+export type SlashTrigger = {
+  query: string;
+  startIndex: number;
+};
+
+export function isValidSlashTrigger(
+  value: string,
+  triggerIndex: number,
+): boolean {
+  const textAfter = value.slice(triggerIndex + 1);
+  if (textAfter.includes("\n") || /\s/.test(textAfter)) {
+    return false;
+  }
+  const charBefore = triggerIndex > 0 ? value[triggerIndex - 1] : "";
+  return (
+    triggerIndex === 0 || (charBefore !== undefined && /\s/.test(charBefore))
+  );
+}
+
+export function findSlashTrigger(value: string): SlashTrigger | null {
+  const slashIndex = value.lastIndexOf("/");
+  if (slashIndex === -1 || !isValidSlashTrigger(value, slashIndex)) {
+    return null;
+  }
+  return {
+    query: value.slice(slashIndex + 1),
+    startIndex: slashIndex,
+  };
+}
+
+export function stripSlashTrigger(
+  value: string,
+  startIndex: number,
+  query: string,
+): string {
+  const before = value.slice(0, startIndex);
+  const after = value.slice(startIndex + 1 + query.length);
+  return `${before}${after}`;
+}
+
+export function matchesSlashQuery(
+  item: { label: string; description?: string; keywords: string[] },
+  query: string,
+): boolean {
+  const needle = query.toLowerCase();
+  if (needle.length === 0) return true;
+  const haystack =
+    `${item.label} ${item.description ?? ""} ${item.keywords.join(" ")}`.toLowerCase();
+  return haystack.includes(needle);
+}

package/src/composer/input-area/index.ts

@@ -0,0 +1,30 @@
+export { InputArea, DEFAULT_ATTACH_ACCEPT } from "./InputArea";
+export type { InputAreaProps, InputAreaSlashContext } from "./InputArea";
+export { InputActions } from "./InputActions";
+export type { InputActionsProps } from "./InputActions";
+export { ConnectionStatusMenuItem } from "./ConnectionStatusMenuItem";
+export type { ConnectionStatusMenuItemProps } from "./ConnectionStatusMenuItem";
+export { ComposerSlashMenu } from "./ComposerSlashMenu";
+export { ComposerSlashRow } from "./ComposerSlashRow";
+export { InputBanners, defaultInputBannerStyles } from "./InputBanners";
+export type { InputBannersProps, InputBannerStyles } from "./InputBanners";
+export { PromoBanner } from "./PromoBanner";
+export type { PromoBannerProps } from "./PromoBanner";
+export { FadePresence } from "./FadePresence";
+export type { FadePresenceProps } from "./FadePresence";
+export { motionFast } from "./motion";
+export { isComposerCompact } from "./composerCompact";
+export { useComposerCompact } from "./useComposerCompact";
+export { ghostSuggestion, scheduleCompletion, shouldSkipPrediction } from "./composerPrediction";
+export { useInputAreaPrediction } from "./useInputAreaPrediction";
+export { buildComposerSlashItems, filterAndGroupSlashItems } from "./composerSlashItems";
+export type { ComposerSlashItem, SlashGroup, SlashIconKey } from "./composerSlashItems";
+export { findSlashTrigger, isValidSlashTrigger, matchesSlashQuery, stripSlashTrigger } from "./composerSlashTrigger";
+export type { SlashTrigger } from "./composerSlashTrigger";
+export { computePanelPopupPlacement, viewportSize } from "./composerSlashPosition";
+export type { ComposerSlashPlacement } from "./composerSlashPosition";
+export { optionId as composerSlashOptionId } from "./composerSlashOptionId";
+export { useComposerSlashMenu } from "./useComposerSlashMenu";
+export { MAIN_CHAT_ACTION_FEATURES, CONTEXT_CHAT_ACTION_FEATURES, CONTEXT_CHAT_DISPLAY_OPTIONS } from "./inputPresets";
+export { DEFAULT_BANNER_FEATURES } from "./types";
+export type { ActionFeatures, BannerFeatures, SkillChipPreview } from "./types";

package/src/composer/input-area/inputPresets.ts

@@ -0,0 +1,14 @@
+import type { ActionFeatures } from "./types";
+
+export const MAIN_CHAT_ACTION_FEATURES: ActionFeatures = {
+  dictate: true,
+};
+
+export const CONTEXT_CHAT_ACTION_FEATURES: ActionFeatures = {
+  dictate: true,
+};
+
+export const CONTEXT_CHAT_DISPLAY_OPTIONS = {
+  showBanners: true,
+  showUpgradeBanner: true,
+} satisfies Record<string, boolean>;

package/src/composer/input-area/motion.ts

@@ -0,0 +1,7 @@
+import { motionDuration, motionEase } from "../../motion/presets";
+
+/** Fast transition used by the stop button, slash menu and banners. */
+export const motionFast = {
+  duration: motionDuration.fast,
+  ease: motionEase,
+} as const;

package/src/composer/input-area/types.ts

@@ -0,0 +1,25 @@
+/** Feature flags for the action row. Mirrors the shape the app presets use. */
+export type ActionFeatures = {
+  dictate?: boolean;
+};
+
+/** Feature flags that show a banner above the input. */
+export type BannerFeatures = {
+  privacy: boolean;
+};
+
+export const DEFAULT_BANNER_FEATURES: BannerFeatures = {
+  privacy: false,
+};
+
+/** Data for the hover preview of a skill row. The app renders it through `renderSlashItem`. */
+export type SkillChipPreview = {
+  id: string;
+  kind: "hub" | "manual";
+  name: string;
+  description: string;
+  icon?: string;
+  sourceLabel: string;
+  installed: boolean;
+  enabled: boolean;
+};

package/src/composer/input-area/useComposerCompact.ts

@@ -0,0 +1,46 @@
+import { useRef, type RefObject } from "react";
+import {
+  draftExceedsPillWidth,
+  editorOverflowsHorizontally,
+  isComposerCompact,
+  readEditorInnerWidth,
+} from "./composerCompact";
+
+export function useComposerCompact({
+  value,
+  fileCount,
+  chipCount,
+}: {
+  value: string;
+  fileCount: number;
+  chipCount: number;
+}): { chromeRef: RefObject<HTMLDivElement | null>; compact: boolean } {
+  "use no memo";
+  const chromeRef = useRef<HTMLDivElement>(null);
+  const pillWidthRef = useRef(0);
+  const wasCompactRef = useRef(true);
+
+  const editorNode =
+    chromeRef.current?.querySelector("[data-slot=input-group-control]") ??
+    chromeRef.current?.querySelector("textarea");
+  const editor = editorNode instanceof HTMLElement ? editorNode : null;
+  const font = editor ? getComputedStyle(editor).font : "14px sans-serif";
+  if (editor && wasCompactRef.current) {
+    const inner = readEditorInnerWidth(editor);
+    if (inner > 0) pillWidthRef.current = inner;
+  }
+  const exceedsPill =
+    (editor !== null &&
+      wasCompactRef.current &&
+      editorOverflowsHorizontally(editor)) ||
+    draftExceedsPillWidth(value, pillWidthRef.current, font);
+  const compact = isComposerCompact({
+    value,
+    fileCount,
+    chipCount,
+    exceedsPill,
+  });
+  wasCompactRef.current = compact;
+
+  return { chromeRef, compact };
+}

package/src/composer/input-area/useComposerSlashMenu.ts

@@ -0,0 +1,203 @@
+import {
+  useEffect,
+  useId,
+  useState,
+  type KeyboardEvent,
+  type RefObject,
+} from "react";
+import type { ComposerSlashItem } from "./composerSlashItems";
+import { filterAndGroupSlashItems } from "./composerSlashItems";
+import { optionId } from "./composerSlashOptionId";
+import {
+  computePanelPopupPlacement,
+  viewportSize,
+  type ComposerSlashPlacement,
+} from "./composerSlashPosition";
+import {
+  findSlashTrigger,
+  stripSlashTrigger,
+  type SlashTrigger,
+} from "./composerSlashTrigger";
+
+export function useComposerSlashMenu({
+  value,
+  onValueChange,
+  items,
+  textareaRef,
+  onSelect,
+  enabled = true,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  items: ComposerSlashItem[];
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  onSelect: (item: ComposerSlashItem) => void;
+  /** When false the menu never opens. */
+  enabled?: boolean;
+}) {
+  const listboxId = useId();
+  const trigger = enabled ? findSlashTrigger(value) : null;
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [placement, setPlacement] = useState<ComposerSlashPlacement | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const next = enabled ? findSlashTrigger(value) : null;
+    if (next === null) {
+      setOpen(false);
+      return;
+    }
+    setOpen(true);
+    setSelectedIndex(0);
+  }, [value, enabled]);
+
+  const showPopup = open && trigger !== null;
+  const groups = filterAndGroupSlashItems(items, trigger?.query ?? "");
+  const visibleItems = groups.flatMap((group) => group.items);
+  const activeItem = showPopup ? visibleItems[selectedIndex] : undefined;
+
+  useEffect(() => {
+    if (!showPopup) {
+      setPlacement(null);
+      return;
+    }
+    let attached = false;
+    const update = () => {
+      if (document.visibilityState !== "visible") return;
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (!el) return;
+        const panelAnchor = el.closest("[data-composer-slash-anchor]");
+        const rect = panelAnchor
+          ? panelAnchor.getBoundingClientRect()
+          : el.getBoundingClientRect();
+        setPlacement(computePanelPopupPlacement(rect, viewportSize()));
+      });
+    };
+    const syncLayoutListeners = () => {
+      const shouldAttach = document.visibilityState === "visible";
+      if (shouldAttach && !attached) {
+        window.addEventListener("scroll", update, true);
+        window.addEventListener("resize", update);
+        attached = true;
+      } else if (!shouldAttach && attached) {
+        window.removeEventListener("scroll", update, true);
+        window.removeEventListener("resize", update);
+        attached = false;
+      }
+    };
+    const onVisibilityChange = () => {
+      syncLayoutListeners();
+      update();
+    };
+    update();
+    syncLayoutListeners();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      if (attached) {
+        window.removeEventListener("scroll", update, true);
+        window.removeEventListener("resize", update);
+      }
+    };
+  }, [showPopup, trigger?.query, trigger?.startIndex, value, textareaRef]);
+
+  const close = () => {
+    setOpen(false);
+    setSelectedIndex(0);
+  };
+
+  const applyItem = (item: ComposerSlashItem, current: SlashTrigger) => {
+    onValueChange(stripSlashTrigger(value, current.startIndex, current.query));
+    close();
+    onSelect(item);
+    requestAnimationFrame(() => textareaRef.current?.focus());
+  };
+
+  const insertActiveItem = () => {
+    if (trigger === null) return;
+    const item = visibleItems[selectedIndex];
+    if (item) applyItem(item, trigger);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
+    if (!showPopup) return false;
+    if (visibleItems.length > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prev) =>
+          prev >= visibleItems.length - 1 ? 0 : prev + 1,
+        );
+        return true;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) =>
+          prev <= 0 ? visibleItems.length - 1 : prev - 1,
+        );
+        return true;
+      }
+      if (event.key === "Enter") {
+        if (event.nativeEvent.isComposing) return true;
+        event.preventDefault();
+        event.stopPropagation();
+        insertActiveItem();
+        return true;
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        insertActiveItem();
+        return true;
+      }
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      textareaRef.current?.focus();
+      return true;
+    }
+    return false;
+  };
+
+  const onBlur = () => {
+    if (showPopup) close();
+  };
+
+  return {
+    showPopup,
+    trigger,
+    listboxId,
+    selectedIndex,
+    setSelectedIndex,
+    placement,
+    visibleItems,
+    onKeyDown,
+    onBlur,
+    onSelectItem: (item: ComposerSlashItem) => {
+      if (trigger === null) return;
+      applyItem(item, trigger);
+    },
+    comboboxProps: {
+      role: "combobox",
+      "aria-multiline": true,
+      "aria-haspopup": "listbox",
+      "aria-autocomplete": "list",
+      "aria-expanded": showPopup,
+      "aria-controls": showPopup ? listboxId : undefined,
+      "aria-activedescendant":
+        activeItem && showPopup
+          ? optionId(listboxId, activeItem.id)
+          : undefined,
+    } satisfies {
+      role: "combobox";
+      "aria-multiline": boolean;
+      "aria-haspopup": "listbox";
+      "aria-autocomplete": "list";
+      "aria-expanded": boolean;
+      "aria-controls": string | undefined;
+      "aria-activedescendant": string | undefined;
+    },
+  };
+}