@chai-ui/react 0.6.0 → 0.7.0

package/src/ChaiProvider.tsx

@@ -1,88 +1,30 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { createOpenRouterEngine, type DroppedMedia, type GenerationEngine, type MediaKind } from "@chai-ui/core";
+import { createReasoning, reasoningEngineFor, type Reasoning, type ReasoningConfig } from "@chai-ui/core";
 
-/**
- * The suggested reasoning model for text and images: prompt enhancement,
- * auto-select routing and image analysis. A default, not a requirement —
- * pass any model id `reasoningEngine` can run.
- */
-export const DEFAULT_REASONING_MODEL = "anthropic/claude-opus-5";
-
-/**
- * Suggested per-kind overrides for media Claude can't read. Gemini takes
- * video and audio directly. For a cheaper option, swap in
- * `"qwen/qwen3.8-omni-flash"`, which takes both too.
- */
-export const DEFAULT_REASONING_MODEL_BY_KIND: Partial<Record<MediaKind, string>> = {
-  video: "google/gemini-3.8-flash",
-  audio: "google/gemini-3.8-flash",
-};
-
-/** The reasoning engine and models every CHAI component shares. */
-export interface Reasoning {
-  engine: GenerationEngine;
-  /** The model for text and any attachment kind without its own entry in `modelByKind`. */
-  model: string;
-  modelByKind: Partial<Record<MediaKind, string>>;
-}
+export {
+  DEFAULT_REASONING_MODEL,
+  DEFAULT_REASONING_MODEL_BY_KIND,
+  reasoningModelFor,
+  type Reasoning,
+} from "@chai-ui/core";
 
 const ReasoningContext = createContext<Reasoning | undefined>(undefined);
 
-export interface ChaiProviderProps {
-  /** Text, image and routing model. Defaults to `DEFAULT_REASONING_MODEL`. */
-  reasoningModel?: string;
-  /**
-   * Per-attachment-kind models, merged over `DEFAULT_REASONING_MODEL_BY_KIND`
-   * one kind at a time, e.g. `{ video: "qwen/qwen3.8-omni-flash" }` keeps
-   * the default for audio. Map a kind to `reasoningModel`'s value to use
-   * one model for everything.
-   */
-  reasoningModelByKind?: Partial<Record<MediaKind, string>>;
-  /**
-   * The engine the reasoning models run on. Defaults to OpenRouter,
-   * independent of the generation engine: Fal's own LLM access is an
-   * OpenRouter proxy, so defaulting to it would double-proxy.
-   */
-  reasoningEngine?: GenerationEngine;
+export interface ChaiProviderProps extends ReasoningConfig {
   children?: ReactNode;
 }
 
 export function ChaiProvider({ reasoningModel, reasoningModelByKind, reasoningEngine, children }: ChaiProviderProps) {
-  const engine = useMemo(() => reasoningEngine ?? createOpenRouterEngine(), [reasoningEngine]);
-  const model = reasoningModel ?? DEFAULT_REASONING_MODEL;
-  const video = reasoningModelByKind?.video;
-  const audio = reasoningModelByKind?.audio;
-  const image = reasoningModelByKind?.image;
-  const text = reasoningModelByKind?.text;
+  const engine = useMemo(() => reasoningEngineFor({ reasoningEngine }), [reasoningEngine]);
+  const { video, audio, image, text } = reasoningModelByKind ?? {};
   const value = useMemo(
-    () => ({
-      engine,
-      model,
-      modelByKind: { ...DEFAULT_REASONING_MODEL_BY_KIND, ...dropUndefined({ video, audio, image, text }) },
-    }),
-    [engine, model, video, audio, image, text]
+    () => createReasoning({ reasoningModel, reasoningModelByKind: { video, audio, image, text } }, engine),
+    [engine, reasoningModel, video, audio, image, text]
   );
   return <ReasoningContext.Provider value={value}>{children}</ReasoningContext.Provider>;
 }
 
-function dropUndefined<T extends object>(obj: T): Partial<T> {
-  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== undefined)) as Partial<T>;
-}
-
 /** The nearest `ChaiProvider`'s reasoning engine and models, or `undefined` outside one. */
 export function useReasoning(): Reasoning | undefined {
   return useContext(ReasoningContext);
 }
-
-/**
- * The reasoning model for a call with these attachments: the first
- * attachment whose kind has its own model wins (a clip plus a still goes
- * to the model that can read the clip), else `reasoning.model`.
- */
-export function reasoningModelFor(reasoning: Reasoning, attachments: DroppedMedia[] = []): string {
-  for (const { kind } of attachments) {
-    const model = reasoning.modelByKind[kind];
-    if (model) return model;
-  }
-  return reasoning.model;
-}

package/src/Composer.tsx

@@ -3,10 +3,29 @@ 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 {
+  composerAttachmentsFromFiles,
+  composerAttachMenuItems,
+  composerView,
+  enhanceRevealDurationMs,
+  MAX_ANIMATE_ENHANCE_LENGTH,
+  regionColor,
+  TEXT_USE_CASE,
+  type ComposerAttachMenuAction,
+} from "@chai-ui/core";
+import type { EditRegion, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
 import { SearchMenu } from "./primitives/SearchMenu.js";
-import { regionColor } from "./regions.js";
+import type { ComposerAttachment, ComposerSubmitPayload, ComposerUseCase } from "@chai-ui/core";
+
+export {
+  EDIT_IMAGE_USE_CASE,
+  TEXT_USE_CASE,
+  type ComposerAttachMenuAction,
+  type ComposerAttachment,
+  type ComposerSelection,
+  type ComposerSubmitPayload,
+  type ComposerUseCase,
+} from "@chai-ui/core";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -16,101 +35,6 @@ const MdFabElement = createComponent({
   events: { onClick: "click" },
 });
 
-const ACCEPTED_KINDS: MediaKind[] = ["image", "video", "audio"];
-
-function detectKind(file: File): MediaKind | undefined {
-  const prefix = file.type.split("/")[0];
-  return ACCEPTED_KINDS.find((k) => k === prefix);
-}
-
-// Past this length the rewritten prompt just appears instantly — a
-// multi-hundred-character reveal reads as sluggish, not delightful, and a
-// long prompt is exactly the case where a person wants the result now, not
-// a show. Picked to comfortably cover a typical Enhance rewrite (usually a
-// sentence or two of added detail) while bailing out before it doesn't.
-const MAX_ANIMATE_ENHANCE_LENGTH = 260;
-
-// Time-driven (see the `requestAnimationFrame` loop that uses this), not
-// count-driven — a fixed ms-per-character reveal on a slow frame would
-// drift or stall instead of just finishing a beat later. Capped on both
-// ends: a two-word rewrite shouldn't take as long as a five-word one to
-// feel intentional, and even a near-max-length one should still resolve
-// under a second.
-function enhanceRevealDurationMs(charCount: number): number {
-  return Math.min(900, Math.max(300, charCount * 6));
-}
-
-function nextAttachmentId(): string {
-  return typeof crypto !== "undefined" && "randomUUID" in crypto
-    ? crypto.randomUUID()
-    : `attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}
-
-export interface ComposerAttachment extends DroppedMedia {
-  id: string;
-}
-
-export type ComposerAttachMenuAction = "add-media" | "create-image" | "create-video" | "edit-media";
-
-/**
- * The selected generation use case, shown as a removable chip (reference:
- * the mock's "Video"/"Image" chip) — deliberately independent of
- * `attachments`: a use case can be picked from the attach menu with nothing
- * attached yet (e.g. "Create video"). Composer never derives this from
- * `attachments` itself (that's app-level policy, not a Composer opinion —
- * the design). With none picked, `defaultUseCase` applies.
- */
-export interface ComposerUseCase {
-  kind: MediaKind;
-  label: string;
-  /**
-   * An edit of the attached image rather than a new one: no aspect ratio,
-   * region chips when `regions` is set, and a submit needs only an image and
-   * either a prompt or a region. Images only for now.
-   */
-  edit?: boolean;
-}
-
-/** A plain text request — what a submit means when no use case is picked, unless the builder sets `defaultUseCase`. */
-export const TEXT_USE_CASE: ComposerUseCase = { kind: "text", label: "Text" };
-
-/** Editing the attached image, the attach menu's "Edit image". Pair it with `useComposer`'s `editImage` and an `EditCard`. */
-export const EDIT_IMAGE_USE_CASE: ComposerUseCase = { kind: "image", label: "Edit image", edit: true };
-
-/** One use case to run and the models picked for it. Empty `modelIds` means the engine's default model. */
-export interface ComposerSelection {
-  useCase: ComposerUseCase;
-  modelIds: string[];
-  /** The models offered for this use case: what auto-select routes among. */
-  models: ModelOption[];
-}
-
-/**
- * Everything Composer itself tracks, assembled into one object at submit
- * time — not the the design `Request` shape (no `mode`/`params`/
- * `presetId`; those belong to the run store this package doesn't have yet,
- * see the package README), just an honest snapshot of this component's own
- * state. Handed to `onSubmit` so a builder doesn't have to re-derive it
- * from five separately-controlled props they already hold — mainly a
- * correctness/ergonomics win for a coding agent wiring this up from the
- * type signature alone.
- */
-export interface ComposerSubmitPayload {
-  value: string;
-  attachments: ComposerAttachment[];
-  /** The use case to run — the picked one, or `defaultUseCase` when none is picked. The first one with `multiSelectUseCases`. */
-  useCase: ComposerUseCase;
-  /** The first picked model, or null for the engine's default. */
-  modelId: string | null;
-  aspectRatio: string | null;
-  /** Everything to run: one entry per use case with its picked models. A single entry unless `multiSelectUseCases` is on. */
-  selections: ComposerSelection[];
-  /** When true, the model is chosen at submit (`useComposer` routes among each selection's `models`), not by the picks. */
-  autoSelectModel: boolean;
-  /** An edit's marked regions, each with its own instruction. Empty unless the use case is an edit. */
-  regions?: EditRegion[];
-}
-
 export interface ComposerProps {
   /** The prompt text. Controlled — Composer owns no text state of its own. */
   value: string;
@@ -292,92 +216,36 @@ export function Composer({
   onRegionsChange,
   disabled = false,
 }: ComposerProps) {
-  // What the person picked, and what actually runs: with nothing picked,
-  // the builder's default use case (a text request unless they chose
-  // otherwise), so a typed prompt always goes somewhere.
-  const pickedUseCases = multiSelectUseCases ? useCases : useCase ? [useCase] : [];
-  const activeUseCases = pickedUseCases.length > 0 ? pickedUseCases : [defaultUseCase];
-  // An edit needs an image, then a change: a prompt for the whole image, a
-  // region with its own instruction, or both.
-  const editing = activeUseCases.some((u) => u.edit);
-  const hasImage = attachments.some((a) => a.kind === "image");
-  const hasContent = editing
-    ? hasImage && (value.trim().length > 0 || regions.length > 0)
-    : value.trim().length > 0 || attachments.length > 0;
-  const isSubmitDisabled = submitError ? disabled : (submitDisabled ?? (disabled || !hasContent));
-  const effectivePlaceholder =
-    placeholder ??
-    (editing
-      ? hasImage
-        ? "Describe a change across the whole image, or leave this empty"
-        : "Attach an image to edit"
-      : "Describe media to create");
-  // The stop icon only appears with somewhere for its click to go — without
-  // `onAbort`, `submitting` just disables the FAB instead (below), same as
-  // it would with no opt-in wired at all.
-  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 : 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. 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`
-      : pickedModels[0]?.label ?? (autoSelectModel ? "Auto-select" : "Select models");
-  // An edit keeps the source image's shape.
-  const showAspectRatio = activeUseCases.some((u) => !u.edit && (u.kind === "image" || u.kind === "video"));
-  // Only ratios every model that might run takes: the picked ones, or with
-  // none picked (or auto-select on) the whole list, so whichever runs can
-  // honor it. A model with no `aspectRatios` sets its own shape: no menu.
-  const ratioModels = pickedModels.length > 0 && !autoSelectModel ? pickedModels : allModels;
-  const sharedRatios =
-    ratioModels.reduce<string[] | null>(
-      (shared, m) => (shared ?? m.aspectRatios ?? []).filter((r) => m.aspectRatios?.includes(r)),
-      null
-    ) ?? [];
-  const aspectOptions = aspectRatios
-    ? aspectRatios.filter((o) => sharedRatios.includes(o.value))
-    : sharedRatios.map((r) => ({ value: r, label: r }));
-  // A pick the current models don't take is shown as unpicked and never sent.
-  const offeredAspect = showAspectRatio && aspectOptions.some((o) => o.value === aspectRatio) ? aspectRatio : null;
-  const selectedAspect = aspectOptions.find((o) => o.value === offeredAspect) ?? null;
+  const view = composerView({
+    value,
+    placeholder,
+    attachments,
+    useCase,
+    defaultUseCase,
+    multiSelectUseCases,
+    useCases,
+    modelsByKind,
+    multiSelectModels,
+    modelIds,
+    models,
+    modelId,
+    onModelChange,
+    onModelIdsChange,
+    autoSelectModel,
+    aspectRatios,
+    aspectRatio,
+    submitError,
+    submitDisabled,
+    submitting,
+    onAbort,
+    regions,
+    disabled,
+  });
+  const { editing, isSubmitDisabled, showStop, multiModel, modelSections, pickedModelIds, aspectOptions, offeredAspect } = view;
 
   function toggleModel(id: string) {
     if (!multiModel) return onModelChange?.(id);
-    onModelIdsChange?.(modelIds.includes(id) ? modelIds.filter((m) => m !== id) : [...modelIds, id]);
-  }
-
-  function buildSelections(): ComposerSelection[] {
-    return activeUseCases.map((u) => ({
-      useCase: u,
-      models: rosterFor(u).options,
-      modelIds: multiSelectUseCases
-        ? pickedModelIds.filter((id) => rosterFor(u).options.some((m) => m.id === id))
-        : pickedModelIds,
-    }));
+    onModelIdsChange?.(view.toggledModelIds(id));
   }
 
   // Auto-select chooses at submit, from the prompt (`useComposer` routes
@@ -466,54 +334,19 @@ export function Composer({
     onEnhance?.(value);
   }
 
-  function handleFilesSelected(fileList: FileList | null) {
+  async function handleFilesSelected(fileList: FileList | null) {
     if (!fileList || fileList.length === 0 || !onAttachmentsChange) return;
     // Edit mode works on one image: a new one replaces it, and the edit starts over.
-    if (editing) {
-      const image = Array.from(fileList).find((f) => detectKind(f) === "image");
-      if (!image) {
-        Array.from(fileList).forEach((f) => onUnsupportedFile?.(f.name));
-        return;
-      }
-      const reader = new FileReader();
-      reader.onload = () =>
-        onAttachmentsChange([{ id: nextAttachmentId(), src: String(reader.result), kind: "image", name: image.name, size: image.size }]);
-      reader.onerror = () => onUnsupportedFile?.(image.name);
-      reader.readAsDataURL(image);
-      return;
-    }
-    const next = [...attachments];
-    let pending = fileList.length;
-    const settle = () => {
-      pending -= 1;
-      if (pending === 0) onAttachmentsChange(next);
-    };
-    Array.from(fileList).forEach((file) => {
-      const kind = detectKind(file);
-      if (!kind) {
-        onUnsupportedFile?.(file.name);
-        settle();
-        return;
-      }
-      const reader = new FileReader();
-      reader.onload = () => {
-        next.push({ id: nextAttachmentId(), src: String(reader.result), kind, name: file.name, size: file.size });
-        settle();
-      };
-      reader.onerror = () => {
-        onUnsupportedFile?.(file.name);
-        settle();
-      };
-      reader.readAsDataURL(file);
-    });
+    const { attachments: next, unsupported } = await composerAttachmentsFromFiles(fileList, attachments, editing);
+    unsupported.forEach((name) => onUnsupportedFile?.(name));
+    if (next) onAttachmentsChange(next);
   }
 
   // Only items that can work: no menu item that silently does nothing.
-  const menuItems = ATTACH_MENU_ITEMS.filter(
-    (item) =>
-      (attachMenuActions ?? ATTACH_MENU_ITEMS.map((i) => i.action)).includes(item.action) &&
-      (item.action === "add-media" ? Boolean(onAttachmentsChange) : Boolean(onAttachMenuSelect))
-  );
+  const menuItems = composerAttachMenuItems(attachMenuActions, {
+    canAddMedia: Boolean(onAttachmentsChange),
+    canSelect: Boolean(onAttachMenuSelect),
+  });
 
   function handleRemoveAttachment(id: string) {
     onAttachmentsChange?.(attachments.filter((a) => a.id !== id));
@@ -553,8 +386,8 @@ export function Composer({
           className={`chai-composer__input chai-composer__type${animating ? " chai-composer__input--revealing" : ""}`}
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          placeholder={effectivePlaceholder}
-          aria-label={promptLabel ?? effectivePlaceholder}
+          placeholder={view.placeholder}
+          aria-label={promptLabel ?? view.placeholder}
           rows={1}
           disabled={disabled || animating}
         />
@@ -610,7 +443,7 @@ export function Composer({
             />
           )}
 
-          {pickedUseCases.map((u) => (
+          {view.pickedUseCases.map((u) => (
             <UseCaseChip
               key={u.kind}
               useCase={u}
@@ -629,7 +462,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 && canPickModel && (
+          {modelSections.length > 0 && view.canPickModel && (
             <SearchMenu
               {...(multiSelectUseCases
                 ? { sections: modelSections.map((s) => ({ label: s.label, options: s.options })) }
@@ -645,7 +478,7 @@ export function Composer({
                     }
                   : undefined
               }
-              triggerLabel={modelTriggerLabel}
+              triggerLabel={view.modelTriggerLabel}
               menuLabel={multiModel ? "Select models" : "Select model"}
               onSelect={(opt) => toggleModel(opt.id)}
               searchable={false}
@@ -655,11 +488,11 @@ export function Composer({
             />
           )}
 
-          {showAspectRatio && aspectOptions.length > 0 && onAspectRatioChange && (
+          {view.showAspectRatio && aspectOptions.length > 0 && onAspectRatioChange && (
             <SearchMenu
               options={aspectOptions.map((o) => ({ id: o.value, label: o.label }))}
               value={offeredAspect}
-              triggerLabel={selectedAspect?.label ?? "Aspect ratio"}
+              triggerLabel={view.selectedAspect?.label ?? "Aspect ratio"}
               menuLabel="Aspect ratio"
               onSelect={(opt) => onAspectRatioChange?.(opt.id)}
               searchable={false}
@@ -724,19 +557,7 @@ export function Composer({
           } as Record<string, unknown>)}
           onClick={() => {
             if (showStop) onAbort?.();
-            else if (!isSubmitDisabled && !submitting) {
-              const selections = buildSelections();
-              onSubmit({
-                value,
-                attachments,
-                useCase: activeUseCases[0]!,
-                modelId: pickedModelIds[0] ?? null,
-                aspectRatio: offeredAspect,
-                selections,
-                autoSelectModel,
-                regions: editing ? regions : [],
-              });
-            }
+            else if (!isSubmitDisabled && !submitting) onSubmit(view.payload());
           }}
         >
           <span slot="icon">
@@ -748,18 +569,12 @@ export function Composer({
   );
 }
 
-const ATTACH_MENU_ITEMS: {
-  action: ComposerAttachMenuAction;
-  label: string;
-  icon: React.ReactNode;
-  /** Reference: "Add media" (`MenuListItem1`) is the only item with `showDivider: true` in the source. */
-  divider?: boolean;
-}[] = [
-  { action: "add-media", label: "Add media", icon: <AttachFileIcon />, divider: true },
-  { action: "create-image", label: "Create image", icon: <ImageIcon /> },
-  { action: "create-video", label: "Create video", icon: <VideocamIcon /> },
-  { action: "edit-media", label: "Edit image", icon: <ContentCutIcon /> },
-];
+const ATTACH_MENU_ICONS: Record<ComposerAttachMenuAction, React.ReactNode> = {
+  "add-media": <AttachFileIcon />,
+  "create-image": <ImageIcon />,
+  "create-video": <VideocamIcon />,
+  "edit-media": <ContentCutIcon />,
+};
 
 /**
  * The "+" / "×" attach control (reference: Composer_01 "Menu open" state,
@@ -775,7 +590,7 @@ function ComposerAttachMenu({
   imagesOnly,
   disabled,
 }: {
-  items: typeof ATTACH_MENU_ITEMS;
+  items: ReturnType<typeof composerAttachMenuItems>;
   onSelect?: (action: ComposerAttachMenuAction) => void;
   onAddMediaFiles: (files: FileList | null) => void;
   /** Edit mode: one image file at a time. */
@@ -832,7 +647,7 @@ function ComposerAttachMenu({
                 className="chai-composer__attach-menu-item"
                 onClick={() => handleItemClick(item.action)}
               >
-                <span className="chai-composer__attach-menu-icon">{item.icon}</span>
+                <span className="chai-composer__attach-menu-icon">{ATTACH_MENU_ICONS[item.action]}</span>
                 {item.label}
               </button>
               {item.divider && i < items.length - 1 && <hr className="chai-composer__attach-menu-divider" role="separator" />}