@chai-ui/react 0.5.0 → 0.6.0

package/src/Composer.tsx

@@ -1,7 +1,9 @@
+import { StopIcon } from "./icons.js";
 import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { createComponent } from "@lit/react";
 import * as React from "react";
 import { MdFab } from "@material/web/fab/fab.js";
+import { deriveGenerationUseCase, suggestedModels } from "@chai-ui/core";
 import type { DroppedMedia, EditRegion, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
 import { SearchMenu } from "./primitives/SearchMenu.js";
 import { regionColor } from "./regions.js";
@@ -134,7 +136,7 @@ export interface ComposerProps {
   multiSelectUseCases?: boolean;
   useCases?: ComposerUseCase[];
   onUseCasesChange?: (next: ComposerUseCase[]) => void;
-  /** Models per use-case kind, for `multiSelectUseCases`. */
+  /** Models per use-case kind, for `multiSelectUseCases`. A kind left out gets Chai's suggested models (see `models`). */
   modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
   /**
    * Builder opt-in, off by default: the end user can pick several models,
@@ -145,7 +147,12 @@ export interface ComposerProps {
   multiSelectModels?: boolean;
   modelIds?: string[];
   onModelIdsChange?: (ids: string[]) => void;
-  /** Models valid for the current use case. The Model menu only renders when this is non-empty. */
+  /**
+   * Models for the current use case. Leave it out and Composer offers Chai's
+   * suggested Fal models for the use case (`suggestedModels`), with the
+   * first one picked until the person picks another. Pass a list to use
+   * your own; pass `[]` for no Model menu.
+   */
   models?: ModelOption[];
   modelId?: string | null;
   /** `null` clears the pick: Composer does this when auto-select turns on, until routing picks a model. */
@@ -311,19 +318,31 @@ export function Composer({
   const showStop = submitting && Boolean(onAbort);
   const multiModel = multiSelectModels || multiSelectUseCases;
   const rawPickedIds = multiModel ? modelIds : modelId ? [modelId] : [];
+  // The app's list for a use case, or Chai's suggested models when it gave none.
+  const rosterFor = (u: ComposerUseCase): { options: ModelOption[]; suggested: boolean } => {
+    const given = multiSelectUseCases ? modelsByKind?.[u.kind] : models;
+    if (given) return { options: given, suggested: false };
+    return { options: suggestedModels(u.edit ? "image-edit" : deriveGenerationUseCase(u, attachments)), suggested: true };
+  };
   // One menu section per use case with multi-use-case select; otherwise one flat roster.
-  const modelSections = multiSelectUseCases
-    ? activeUseCases
-        .map((u) => ({ label: u.label, kind: u.kind, options: modelsByKind?.[u.kind] ?? [] }))
-        .filter((s) => s.options.length > 0)
-    : [{ label: "", kind: activeUseCases[0]!.kind, options: models ?? [] }].filter((s) => s.options.length > 0);
+  const modelSections = (multiSelectUseCases ? activeUseCases : activeUseCases.slice(0, 1))
+    .map((u) => ({ label: multiSelectUseCases ? u.label : "", kind: u.kind, ...rosterFor(u) }))
+    .filter((s) => s.options.length > 0);
   const allModels = modelSections.flatMap((s) => s.options);
   // A pick that isn't in the current list (e.g. the edit model after leaving
   // edit mode) is shown as unpicked and never submitted. With no list at
-  // all, the app's pick is passed through as given.
-  const pickedModelIds =
+  // all, the app's pick is passed through as given. With nothing picked
+  // from a suggested list (and auto-select off), its first model is the pick.
+  const validPicks =
     allModels.length > 0 ? rawPickedIds.filter((id) => allModels.some((m) => m.id === id)) : rawPickedIds;
+  const pickedModelIds =
+    validPicks.length > 0 || autoSelectModel
+      ? validPicks
+      : modelSections.filter((s) => s.suggested).map((s) => s.options[0]!.id);
   const pickedModels = allModels.filter((m) => pickedModelIds.includes(m.id));
+  // No menu that can't change anything: without its handler, the Model menu
+  // hides (the default pick still runs).
+  const canPickModel = multiModel ? Boolean(onModelIdsChange) : Boolean(onModelChange);
   const modelTriggerLabel =
     pickedModels.length > 1
       ? `${pickedModels.length} models`
@@ -354,9 +373,9 @@ export function Composer({
   function buildSelections(): ComposerSelection[] {
     return activeUseCases.map((u) => ({
       useCase: u,
-      models: multiSelectUseCases ? (modelsByKind?.[u.kind] ?? []) : (models ?? []),
+      models: rosterFor(u).options,
       modelIds: multiSelectUseCases
-        ? pickedModelIds.filter((id) => modelsByKind?.[u.kind]?.some((m) => m.id === id))
+        ? pickedModelIds.filter((id) => rosterFor(u).options.some((m) => m.id === id))
         : pickedModelIds,
     }));
   }
@@ -610,7 +629,7 @@ export function Composer({
               trigger stays enabled whenever the switch is shown — it's the
               only way back to the switch. Rows are disabled by `SearchMenu`
               itself while auto-select is on. */}
-          {modelSections.length > 0 && (
+          {modelSections.length > 0 && canPickModel && (
             <SearchMenu
               {...(multiSelectUseCases
                 ? { sections: modelSections.map((s) => ({ label: s.label, options: s.options })) }
@@ -636,7 +655,7 @@ export function Composer({
             />
           )}
 
-          {showAspectRatio && aspectOptions.length > 0 && (
+          {showAspectRatio && aspectOptions.length > 0 && onAspectRatioChange && (
             <SearchMenu
               options={aspectOptions.map((o) => ({ id: o.value, label: o.label }))}
               value={offeredAspect}
@@ -1046,20 +1065,6 @@ function UndoIcon() {
   );
 }
 
-// Real Material Symbols "stop" glyph, the filled variant specifically
-// (`stop-fill`, not the base `stop` — that one traces a hollow square-
-// outline shape even filled with `currentColor`, which read as a thin
-// frame rather than a real stop icon at 24px; design review caught
-// this live). Viewbox `0 -960 960 960` — the submit FAB's in-flight state,
-// its own doc comment above where it's rendered.
-function StopIcon() {
-  return (
-    <svg viewBox="0 -960 960 960" aria-hidden="true">
-      <path d="M240-240v-480h480v480H240Z" fill="currentColor" />
-    </svg>
-  );
-}
-
 function AttachFileIcon() {
   return (
     <svg viewBox="0 -960 960 960" aria-hidden="true">

package/src/EditCard.tsx

@@ -168,6 +168,7 @@ export function EditCard({
   // until the next version's image loads, so the card doesn't jump between.
   const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
   const [expanded, setExpanded] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
   const drag = useRef<Drag | null>(null);
   const viewportRef = useRef<HTMLDivElement>(null);
   const fieldRef = useRef<HTMLTextAreaElement>(null);
@@ -371,7 +372,11 @@ export function EditCard({
 
   const handleShare = async () => {
     if (!version?.src) return;
-    await shareMedia(version.src);
+    // With no share sheet the link is copied; say so, or the click looks like nothing happened.
+    if ((await shareMedia(version.src)) === "copied") {
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 1500);
+    }
     onAction?.("share", version);
   };
 
@@ -509,8 +514,15 @@ export function EditCard({
             <button type="button" className="chai-card-top-btn" aria-label="Download" title="Download" disabled={disabled || !ready} onClick={handleDownload}>
               <DownloadIcon />
             </button>
-            <button type="button" className="chai-card-top-btn" aria-label="Share" title="Share" disabled={disabled || !ready} onClick={handleShare}>
-              <ShareIcon />
+            <button
+              type="button"
+              className="chai-card-top-btn"
+              aria-label={linkCopied ? "Link copied" : "Share"}
+              title={linkCopied ? "Link copied" : "Share"}
+              disabled={disabled || !ready}
+              onClick={handleShare}
+            >
+              {linkCopied ? <CheckSymbolIcon /> : <ShareIcon />}
             </button>
             <button type="button" className="chai-card-top-btn" aria-label="Expand" title="Expand" disabled={!ready} onClick={() => setExpanded(true)}>
               <ExpandIcon />

package/src/MediaAnalyzer.tsx

@@ -2,9 +2,11 @@ import { createComponent } from "@lit/react";
 import * as React from "react";
 import { useEffect, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import { MdFab } from "@material/web/fab/fab.js";
+import { SUGGESTED_ANALYSIS_MODELS } from "@chai-ui/core";
 import type { DroppedMedia, ModelOption, MediaKind } from "@chai-ui/core";
 import type { MediaAnalysisPromptLength } from "@chai-ui/core";
 import { SearchMenu, type SearchMenuSection } from "./primitives/SearchMenu.js";
+import { StopIcon } from "./icons.js";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -113,10 +115,15 @@ export interface MediaAnalyzerProps {
   onAttachmentsChange: (next: MediaAnalyzerAttachment[]) => void;
   onUnsupportedFile?: (fileName: string) => void;
   maxAttachmentsByKind?: Record<MediaKind, number>;
-  /** Flat fallback roster, shown (ungrouped) before any media's kind is known. */
-  models: ModelOption[];
-  /** Per-kind rosters — once a kind is known, only that kind's models show. Before that, all three show as separate sections (reference: Figma "06 Composer from Media Analysis"). */
-  modelsByKind: Partial<Record<MediaKind, ModelOption[]>>;
+  /** Fallback roster for a kind `modelsByKind` doesn't list. Optional. */
+  models?: ModelOption[];
+  /**
+   * Per-kind rosters — once a kind is known, only that kind's models show.
+   * Before that, all three show as separate sections (reference: Figma "06
+   * Composer from Media Analysis"). Defaults to Chai's suggested OpenRouter
+   * models (`SUGGESTED_ANALYSIS_MODELS`); pass your own to replace them.
+   */
+  modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
   /**
    * The picked model. While `autoSelectModel` is on it's `null` until a
    * submit routes, then the routed model, shown by name on the trigger.
@@ -154,6 +161,8 @@ export interface MediaAnalyzerProps {
   submitting?: boolean;
   submitError?: string | null;
   onSubmit: (payload: MediaAnalyzerSubmitPayload) => void;
+  /** Fires when the stop button is pressed while `submitting`. With it, submit turns into stop during an analysis (wire it to `useMediaAnalyzer`'s `cancel`); without it, submit is just disabled. */
+  onAbort?: () => void;
 }
 
 const KIND_LABEL: Record<MediaKind, string> = {
@@ -175,8 +184,8 @@ export function MediaAnalyzer({
   onAttachmentsChange,
   onUnsupportedFile,
   maxAttachmentsByKind = DEFAULT_MAX_ATTACHMENTS_BY_KIND,
-  models,
-  modelsByKind,
+  models = [],
+  modelsByKind = SUGGESTED_ANALYSIS_MODELS,
   modelId,
   onModelChange,
   autoSelectModel,
@@ -188,6 +197,7 @@ export function MediaAnalyzer({
   submitting,
   submitError,
   onSubmit,
+  onAbort,
 }: MediaAnalyzerProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const kind = attachments[0]?.kind;
@@ -199,6 +209,9 @@ export function MediaAnalyzer({
   // children. Active for as long as this is > 0; both drag handlers below
   // clamp at 0 so a stray extra `dragleave` can't go negative.
   const [dragDepth, setDragDepth] = useState(0);
+  // What the last attach replaced (one kind per analysis), shown until the
+  // attachments change some other way.
+  const [replaced, setReplaced] = useState<{ note: string; for: MediaAnalyzerAttachment[] } | null>(null);
   const isDragActive = dragDepth > 0;
 
   /**
@@ -221,9 +234,14 @@ export function MediaAnalyzer({
     const settle = () => {
       pending -= 1;
       if (pending === 0 && resolved.length > 0) {
-        onAttachmentsChange(
-          resolved.reduce((acc, media) => nextMediaAnalyzerAttachments(acc, media, maxAttachmentsByKind), attachments)
+        const next = resolved.reduce(
+          (acc, media) => nextMediaAnalyzerAttachments(acc, media, maxAttachmentsByKind),
+          attachments
         );
+        const removed = attachments.filter((a) => !next.some((n) => n.id === a.id));
+        const added = next.filter((n) => !attachments.some((a) => a.id === n.id));
+        setReplaced(removed.length > 0 && added.length > 0 ? { note: replacedNote(removed, added), for: next } : null);
+        onAttachmentsChange(next);
       }
     };
     files.forEach((file) => {
@@ -278,6 +296,7 @@ export function MediaAnalyzer({
   const selectedLength = promptLengthOptions.find((o) => o.value === promptLength);
   const hasContent = attachments.length > 0;
   const isSubmitDisabled = disabled || !hasContent;
+  const showStop = Boolean(submitting && onAbort);
 
   return (
     <div className="chai-media-analyzer">
@@ -338,6 +357,12 @@ export function MediaAnalyzer({
         </div>
       )}
 
+      {replaced && replaced.for === attachments && (
+        <p className="chai-media-analyzer__note" role="status">
+          {replaced.note}
+        </p>
+      )}
+
       {submitError && (
         <p className="chai-media-analyzer__error" role="alert">
           {submitError}
@@ -390,14 +415,16 @@ export function MediaAnalyzer({
           size="small"
           variant="secondary"
           label=""
-          data-ready={!isSubmitDisabled || undefined}
+          data-ready={showStop || !isSubmitDisabled || undefined}
           data-error={Boolean(submitError) || undefined}
+          data-stop={showStop || undefined}
           {...({
-            ariaLabel: submitError ? "Retry" : "Analyze media",
-            ariaDisabled: submitting ? "true" : isSubmitDisabled ? "true" : "false",
+            ariaLabel: showStop ? "Stop" : submitError ? "Retry" : "Analyze media",
+            ariaDisabled: showStop ? "false" : submitting ? "true" : isSubmitDisabled ? "true" : "false",
           } as Record<string, unknown>)}
           onClick={() => {
-            if (!isSubmitDisabled && !submitting) onSubmit({
+            if (showStop) onAbort?.();
+            else if (!isSubmitDisabled && !submitting) onSubmit({
               attachments,
               modelId,
               autoSelectModel,
@@ -406,9 +433,7 @@ export function MediaAnalyzer({
             });
           }}
         >
-          <span slot="icon">
-            <ArrowForwardIcon />
-          </span>
+          <span slot="icon">{showStop ? <StopIcon /> : <ArrowForwardIcon />}</span>
         </MdFabElement>
       </div>
     </div>
@@ -447,6 +472,14 @@ function MediaAnalyzerThumbnail({
 // Same "trace and inline as a currentColor component" convention Composer.tsx
 // documents — icons aren't shared across files yet in this codebase.
 
+/** "Replaced 2 images with clip.wav." */
+function replacedNote(removed: MediaAnalyzerAttachment[], added: MediaAnalyzerAttachment[]): string {
+  const name = (a: MediaAnalyzerAttachment) => a.name ?? KIND_LABEL[a.kind].toLowerCase();
+  const describe = (list: MediaAnalyzerAttachment[]) =>
+    list.length === 1 ? name(list[0]!) : `${list.length} ${KIND_LABEL[list[0]!.kind].toLowerCase()}s`;
+  return `Replaced ${describe(removed)} with ${describe(added)}.`;
+}
+
 function ArrowForwardIcon() {
   return (
     <svg viewBox="0 -960 960 960" aria-hidden="true">

package/src/ResultCard.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { ROUTING_MODEL_ID, type ModelOption, type Result } from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
-import { DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
+import { CheckSymbolIcon, DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
 import { downloadFilename, downloadMedia, shareMedia } from "./media-actions.js";
 import { PageSlide, usePageSlide } from "./page-slide.js";
 
@@ -125,6 +125,7 @@ export function ResultCard({
   const [flipped, setFlipped] = useState(false);
   const [moreOpen, setMoreOpen] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
   const [mediaExpanded, setMediaExpanded] = useState(false);
   // Not part of `Result` (no engine reports generated-media dimensions
   // today) — measured client-side off the loaded `<img>`/`<video>` itself
@@ -238,7 +239,11 @@ export function ResultCard({
   };
 
   const handleShare = async () => {
-    if (result.output) await shareMedia(result.output.src);
+    // With no share sheet the link is copied; say so, or the click looks like nothing happened.
+    if (result.output && (await shareMedia(result.output.src)) === "copied") {
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 1500);
+    }
     onAction("share", result);
   };
 
@@ -274,6 +279,7 @@ export function ResultCard({
                   mediaExpanded={mediaExpanded}
                   onDownload={handleDownload}
                   onShare={handleShare}
+                  linkCopied={linkCopied}
                   onExpand={() => setMediaExpanded(true)}
                   onDimensions={(w, h) => setMeasured({ id: result.id, width: w, height: h })}
                   videoTimeRef={videoTimeRef}
@@ -458,6 +464,7 @@ function ResultMedia({
   mediaExpanded,
   onDownload,
   onShare,
+  linkCopied,
   onExpand,
   onDimensions,
   videoTimeRef,
@@ -470,6 +477,7 @@ function ResultMedia({
   mediaExpanded: boolean;
   onDownload: () => void;
   onShare: () => void;
+  linkCopied: boolean;
   onExpand: () => void;
   onDimensions: (width: number, height: number) => void;
   videoTimeRef: React.MutableRefObject<number>;
@@ -555,8 +563,8 @@ function ResultMedia({
         <ResultIconButton variant="top" label="Download" disabled={disabled} onClick={onDownload}>
           <DownloadIcon />
         </ResultIconButton>
-        <ResultIconButton variant="top" label="Share" disabled={disabled} onClick={onShare}>
-          <ShareIcon />
+        <ResultIconButton variant="top" label={linkCopied ? "Link copied" : "Share"} disabled={disabled} onClick={onShare}>
+          {linkCopied ? <CheckSymbolIcon /> : <ShareIcon />}
         </ResultIconButton>
         {(isVideo || isImage) && (
           <ResultIconButton variant="top" label="Expand" disabled={disabled} onClick={onExpand}>

package/src/icons.tsx

@@ -113,3 +113,17 @@ export function CloseSymbolIcon() {
     </svg>
   );
 }
+
+// Real Material Symbols "stop" glyph, the filled variant specifically
+// (`stop-fill`, not the base `stop` — that one traces a hollow square-
+// outline shape even filled with `currentColor`, which read as a thin
+// frame rather than a real stop icon at 24px; design review caught
+// this live). Viewbox `0 -960 960 960` — the submit FAB's in-flight state,
+// its own doc comment above where it's rendered.
+export function StopIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M240-240v-480h480v480H240Z" fill="currentColor" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -22,6 +22,13 @@ export {
   DEFAULT_MEDIA_ANALYSIS_PROMPT_LENGTH,
   MEDIA_ANALYSIS_PROMPTS,
   MEDIA_ANALYSIS_PROMPT_LENGTHS,
+  SUGGESTED_IMAGE_MODELS,
+  SUGGESTED_TEXT_TO_VIDEO_MODELS,
+  SUGGESTED_IMAGE_TO_VIDEO_MODELS,
+  SUGGESTED_EDIT_MODELS,
+  SUGGESTED_ANALYSIS_MODELS,
+  suggestedModels,
+  checkSuggestedModels,
 } from "@chai-ui/core";
 export type {
   DroppedMedia,
@@ -40,5 +47,8 @@ export type {
   Result,
   ResultStatus,
   Run,
+  SuggestedModelProblem,
+  SuggestedModelsCheck,
+  FalInputFormat,
   Usage,
 } from "@chai-ui/core";

package/src/media-actions.ts

@@ -24,16 +24,25 @@ export async function downloadMedia(src: string, filename: string): Promise<void
   }
 }
 
-/** The native share sheet where there is one, otherwise the media's URL copied to the clipboard. */
-export async function shareMedia(src: string): Promise<void> {
+/**
+ * The native share sheet where there is one, otherwise the media's URL
+ * copied to the clipboard. Says which, so the button can confirm a copy.
+ */
+export async function shareMedia(src: string): Promise<"shared" | "copied" | "none"> {
   if (navigator.share) {
     try {
       await navigator.share({ url: src });
+      return "shared";
     } catch {
       // Dismissed, or not shareable: same as closing a native share sheet.
+      return "none";
     }
-  } else {
-    navigator.clipboard?.writeText(src).catch(() => {});
+  }
+  try {
+    await navigator.clipboard.writeText(src);
+    return "copied";
+  } catch {
+    return "none";
   }
 }
 

package/src/style.css

@@ -1178,11 +1178,26 @@
   --md-fab-secondary-icon-color: var(--chai-media-analyzer-text);
 }
 
+/* While analyzing, with `onAbort`: submit becomes stop, same as the Composer's.
+   Before `[data-error]`, so an error still wins. */
+.chai-media-analyzer__submit[data-stop] {
+  --md-fab-secondary-container-color: var(--chai-color-semantic-warning-subtle);
+  --md-fab-secondary-icon-color: var(--chai-color-semantic-warning);
+}
+
 .chai-media-analyzer__submit[data-error] {
   --md-fab-secondary-container-color: var(--chai-color-semantic-danger-subtle);
   --md-fab-secondary-icon-color: var(--chai-color-semantic-danger);
 }
 
+/* What the last attach replaced (one kind per analysis). */
+.chai-media-analyzer__note {
+  margin: 0;
+  padding: 2px 2px 0;
+  color: var(--chai-media-analyzer-text);
+  font-size: var(--chai-type-size-label-large);
+}
+
 .chai-media-analyzer__error {
   margin: 0;
   padding: 2px 2px 0;