@chai-ui/vue 0.7.1 → 0.9.0

package/dist/style.css

@@ -593,6 +593,75 @@
   opacity: 0.6;
 }
 
+/* Create world's two prompts, side by side (stacked when narrow): each a
+   label and its own Enhance button above a filled box. */
+.chai-composer__world-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--chai-space-4);
+}
+
+.chai-composer__world-field {
+  flex: 1 1 240px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chai-space-2);
+}
+
+.chai-composer__world-field-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+}
+
+.chai-composer__world-field-label {
+  font-size: var(--chai-type-size-xs);
+  font-weight: var(--chai-type-weight-material-medium);
+  line-height: var(--chai-type-leading-label-small);
+  letter-spacing: var(--chai-type-tracking-label-small);
+  color: var(--chai-color-semantic-control-text-strong);
+}
+
+.chai-composer__world-field-label strong {
+  font-weight: var(--chai-type-weight-semibold);
+}
+
+/* In the heading row, not over the text: no absolute position. */
+.chai-composer__world-field-head .chai-composer__optimize {
+  position: static;
+  width: 24px;
+}
+
+.chai-composer__field--boxed {
+  min-height: 144px;
+  padding: var(--chai-space-3);
+  border-radius: var(--chai-radius-md);
+  background: var(--chai-color-semantic-control-field);
+}
+
+/* Smaller text than the bar's prompt, and no room kept for an Enhance button. */
+.chai-composer__field--boxed .chai-composer__type {
+  padding-right: 0;
+  font-size: var(--chai-type-size-body-medium);
+  line-height: var(--chai-type-leading-body-medium);
+  letter-spacing: var(--chai-type-tracking-body-medium);
+}
+
+/* Why submit can't go yet (a world with no environment). */
+.chai-composer__field-hint {
+  margin: 0;
+  font-size: var(--chai-type-size-xs);
+  line-height: var(--chai-type-leading-label-small);
+  letter-spacing: var(--chai-type-tracking-label-small);
+  color: var(--chai-composer-placeholder);
+}
+
+.chai-composer__field--boxed .chai-composer__reveal {
+  inset: var(--chai-space-3);
+}
+
 /* The optimize/undo reveal (Composer.tsx's own doc comment on the overlay
    for the full mechanics) — the real textarea's text goes fully
    transparent so only the overlay's progressive, gradient-lit copy shows
@@ -682,6 +751,99 @@
   flex-wrap: wrap;
 }
 
+.chai-composer__controls-end {
+  display: flex;
+  align-items: center;
+  gap: var(--chai-space-2);
+}
+
+/* Voice input: the mic left of submit. While recording it becomes a stop
+   button (a filled square in a ringed circle) and a waveform replaces the
+   prompt; while transcribing, a spinner. */
+.chai-composer__voice {
+  display: flex;
+  align-items: center;
+}
+
+.chai-composer__voice-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--chai-radius-full);
+  background: transparent;
+  color: var(--chai-composer-text);
+  cursor: pointer;
+  transition: background-color var(--chai-motion-duration-fast) var(--chai-motion-easing-standard);
+}
+
+.chai-composer__voice-button:hover:not(:disabled) {
+  background: var(--chai-composer-hover);
+}
+
+.chai-composer__voice-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.chai-composer__voice-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.chai-composer__voice[data-status="recording"] .chai-composer__voice-button {
+  border-color: var(--chai-composer-text);
+  background: var(--chai-composer-hover);
+}
+
+.chai-composer__voice[data-status="recording"] .chai-composer__voice-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Same row height as the prompt it stands in for. */
+.chai-composer__waveform {
+  display: flex;
+  align-items: center;
+  gap: var(--chai-space-3);
+  min-height: var(--chai-type-leading-body-large);
+}
+
+.chai-composer__waveform-bars {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--chai-type-leading-body-large);
+  min-width: 0;
+}
+
+.chai-composer__waveform-bar {
+  width: 2px;
+  border-radius: var(--chai-radius-full);
+  background: var(--chai-composer-text);
+}
+
+.chai-composer__waveform-time {
+  color: var(--chai-composer-text);
+  font-family: var(--chai-type-family-material);
+  font-size: var(--chai-type-size-label-large);
+  font-weight: var(--chai-type-weight-material-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+.chai-composer__voice-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid var(--chai-color-semantic-control-border-faint);
+  border-top-color: var(--chai-color-semantic-accent);
+  animation: chai-spin var(--chai-motion-duration-steep) linear infinite;
+}
+
 /* Neutral trigger text, not `--md-sys-color-primary` green (account
    holder correction: "don't make dropdown select menu buttons green when
    they don't need to be"). */
@@ -2339,7 +2501,9 @@
    draw `<md-focus-ring>`. The Composer's textarea is the one control that
    had none — its ring goes on the whole pill, matching MD3's ring width
    and color so every ring in a component reads as the same system. */
-.chai-composer:has(.chai-composer__input:focus-visible) {
+.chai-composer:has(.chai-composer__field:not(.chai-composer__field--boxed) .chai-composer__input:focus-visible),
+/* A world's two boxes: the ring marks the box being typed in, not the bar. */
+.chai-composer__field--boxed:has(.chai-composer__input:focus-visible) {
   outline: 3px solid var(--chai-color-semantic-accent);
   outline-offset: 2px;
 }
@@ -2365,6 +2529,7 @@
 }
 
 [data-chai-focus-ring="hidden"] .chai-composer:has(.chai-composer__input:focus-visible),
+[data-chai-focus-ring="hidden"] .chai-composer__field--boxed:has(.chai-composer__input:focus-visible),
 [data-chai-focus-ring="hidden"] :is(
     .chai-composer,
     .chai-media-analyzer,

package/dist/useComposer.d.ts

@@ -12,7 +12,7 @@ export declare function useComposer(options?: MaybeRefOrGetter<UseComposerOption
     submit: (payload: import("@chai-ui/core").ComposerSubmitPayload) => void;
     cancel: () => void;
     /** `undefined` without reasoning, so the Composer hides its Enhance button. */
-    enhance: import("vue").ComputedRef<((value: string) => Promise<string>) | undefined>;
+    enhance: import("vue").ComputedRef<((value: string, field?: import("@chai-ui/core").ComposerPromptField, mode?: import("@chai-ui/core").GenerationUseCase) => Promise<string>) | undefined>;
     enhancing: import("vue").ComputedRef<boolean>;
     routing: import("vue").ComputedRef<boolean>;
     /** Props for an `EditCard`, and `regions` for `Composer`. `null` when there's no `editImage`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chai-ui/vue",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "CHAI UI Vue components — smart, drop-in UI for AI apps: Composer, Media Analyzer, Result Card, Edit Card, and the useComposer composable.",
   "license": "MIT",
   "author": "kazarazat",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@fontsource/roboto": "^5.3.0",
     "@material/web": "^2.5.0",
-    "@chai-ui/tokens": "0.7.1",
-    "@chai-ui/core": "0.7.1"
+    "@chai-ui/core": "0.9.0",
+    "@chai-ui/tokens": "0.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",

package/src/Composer.vue

@@ -9,30 +9,37 @@
  * Some controls show only with somewhere for them to go, so these listeners
  * are props, checked for: `@update:attachments` (add and remove media),
  * `@update:model-id` / `@update:model-ids` (the Model menu),
- * `@update:aspect-ratio`, `@update:use-cases` and `@clear-use-case` (chip
+ * `voiceInput` (the mic), `@update:aspect-ratio`, `@update:character` and `@update:frame-rate` (a
+ * world's fields), `@update:use-cases` and `@clear-use-case` (chip
  * remove), `@update:regions`, `@enhance` (the Enhance button), `@abort` (stop
  * while submitting) and `@attach-menu-select` (the + menu's use cases).
  */
 import "@material/web/fab/fab.js";
-import { computed, onScopeDispose, ref, watch } from "vue";
+import { computed, onScopeDispose, ref, shallowRef, watch } from "vue";
 import {
   composerAttachmentsFromFiles,
   composerAttachMenuItems,
   composerView,
-  enhanceRevealDurationMs,
-  MAX_ANIMATE_ENHANCE_LENGTH,
+  createVoiceInput,
   type ComposerAttachment,
   type ComposerAttachMenuAction,
+  type ComposerPromptField,
+  type GenerationUseCase,
   type ComposerSubmitPayload,
   type ComposerUseCase,
   type EditRegion,
   type MediaKind,
   type ModelOption,
+  type OutputKind,
   type ParameterOption,
+  type VoiceInputConfig,
 } from "@chai-ui/core";
 import AttachMenu from "./composer/AttachMenu.vue";
 import Chip from "./composer/Chip.vue";
-import { ArrowForwardIcon, CloseSymbolIcon, ErrorIcon, ImageIcon, MusicNoteIcon, OptimizeIcon, RetryIcon, StopIcon, UndoIcon, VideocamIcon } from "./icons.js";
+import PromptField from "./composer/PromptField.vue";
+import VoiceButton from "./composer/VoiceButton.vue";
+import VoiceWaveform from "./composer/VoiceWaveform.vue";
+import { ArrowForwardIcon, CloseSymbolIcon, ErrorIcon, ImageIcon, MusicNoteIcon, RetryIcon, StopIcon, VideocamIcon } from "./icons.js";
 import SearchMenu from "./primitives/SearchMenu.vue";
 
 const props = withDefaults(
@@ -55,7 +62,7 @@ const props = withDefaults(
     useCases?: ComposerUseCase[];
     "onUpdate:useCases"?: (next: ComposerUseCase[]) => void;
     /** Models per use-case kind, for `multiSelectUseCases`. A kind left out gets Chai's suggested models. */
-    modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
+    modelsByKind?: Partial<Record<OutputKind, ModelOption[]>>;
     /** The end user can pick several models, each producing its own result, with `modelIds`. */
     multiSelectModels?: boolean;
     modelIds?: string[];
@@ -73,10 +80,16 @@ const props = withDefaults(
     aspectRatios?: ParameterOption<string>[];
     aspectRatio?: string | null;
     "onUpdate:aspectRatio"?: (value: string) => void;
-    /** Shows the Enhance button; your handler runs the rewrite and updates the prompt. Gets the current prompt. */
-    onEnhance?: (value: string) => void;
+    /** Shows the Enhance button; your handler runs the rewrite and updates the prompt. Gets the current text, which field, and the use case on screen (`mode`). */
+    onEnhance?: (value: string, field: ComposerPromptField, mode?: GenerationUseCase) => void;
     /** True while your Enhance handler is running. */
     enhancing?: boolean;
+    /** A world's character field (Create world), beside the environment (`v-model`). Shows with `v-model:character`. */
+    character?: string;
+    "onUpdate:character"?: (value: string) => void;
+    /** A world's frame rate menu, from the selected models' `frameRates`. */
+    frameRate?: number | null;
+    "onUpdate:frameRate"?: (value: number) => void;
     /** The last submit's failure: submit becomes retry, and the message shows inline. */
     submitError?: string | null;
     /** Overrides the built-in "empty prompt and no attachments" check. Ignored while `submitError` is set. */
@@ -90,6 +103,13 @@ const props = withDefaults(
     /** An edit's regions (from `useComposer`'s `edit`), shown as colored chips while editing. */
     regions?: EditRegion[];
     "onUpdate:regions"?: (next: EditRegion[]) => void;
+    /**
+     * The mic, left of submit: the transcript is added to the prompt, never
+     * submitted. `{ model: "fal-ai/wizper" }` goes through your
+     * `/api/chai/fal` route; `{ transcribe }` uses any provider. Off by
+     * default, with no default model.
+     */
+    voiceInput?: VoiceInputConfig;
     disabled?: boolean;
   }>(),
   {
@@ -99,6 +119,8 @@ const props = withDefaults(
     modelIds: () => [],
     modelId: null,
     aspectRatio: null,
+    character: "",
+    frameRate: null,
     submitError: null,
     // Left undefined unless set: Vue would make an absent boolean `false`,
     // which reads as "never disable".
@@ -159,64 +181,29 @@ function toggleModel(id: string) {
   else props["onUpdate:modelId"]?.(id);
 }
 
-// Grows with wrapped text from one line, instead of a fixed row count.
-const textarea = ref<HTMLTextAreaElement>();
-watch(
-  () => props.modelValue,
-  () => {
-    const el = textarea.value;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  },
-  { flush: "post", immediate: true }
-);
+// Which field's Enhance is running: `enhancing` is one flag for the bar.
+const enhancingField = ref<ComposerPromptField>("prompt");
+const enhanceField = (field: ComposerPromptField) =>
+  props.onEnhance &&
+  ((current: string) => {
+    enhancingField.value = field;
+    props.onEnhance?.(current, field, view.value.enhanceMode);
+  });
 
-// Enhance and undo. The prompt already holds the rewrite once `enhancing`
-// drops; the reveal is a decorative overlay painting it in, then gone.
-const originalValue = ref<string | null>(null);
-const enhancedValue = ref<string | null>(null);
-const animatingText = ref<string | null>(null);
-const revealedLength = ref(0);
-let raf = 0;
-
-watch(
-  () => props.enhancing,
-  (now, was) => {
-    if (!was || now || originalValue.value == null || props.modelValue === originalValue.value) return;
-    const value = props.modelValue;
-    enhancedValue.value = value;
-    // Long rewrites and reduced-motion requests appear at once.
-    if (value.length > MAX_ANIMATE_ENHANCE_LENGTH || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
-    animatingText.value = value;
-    revealedLength.value = 0;
-    const duration = enhanceRevealDurationMs(value.length);
-    const start = performance.now();
-    const tick = (time: number) => {
-      revealedLength.value = Math.min(value.length, Math.floor(((time - start) / duration) * value.length));
-      if (revealedLength.value < value.length) raf = requestAnimationFrame(tick);
-      else animatingText.value = null;
-    };
-    raf = requestAnimationFrame(tick);
+// Voice input: a transcript is added to the prompt, never submitted.
+const voice = createVoiceInput(
+  () => props.voiceInput ?? { transcribe: async () => "" },
+  (text) => {
+    const current = props.modelValue;
+    emit("update:modelValue", current.trim() ? `${current.trimEnd()} ${text}` : text);
   }
 );
-onScopeDispose(() => cancelAnimationFrame(raf));
-
-const animating = computed(() => animatingText.value != null);
-const isEnhanced = computed(() => !animating.value && enhancedValue.value != null && props.modelValue === enhancedValue.value);
-const enhanceBusy = computed(() => Boolean(props.enhancing) || animating.value);
-
-function onOptimizeClick() {
-  if (isEnhanced.value) {
-    const original = originalValue.value;
-    enhancedValue.value = null;
-    originalValue.value = null;
-    if (original != null) emit("update:modelValue", original);
-    return;
-  }
-  originalValue.value = props.modelValue; // for undo, before the rewrite lands
-  props.onEnhance?.(props.modelValue);
-}
+const voiceState = shallowRef(voice.getState());
+const stopVoice = voice.subscribe(() => (voiceState.value = voice.getState()));
+onScopeDispose(() => {
+  stopVoice();
+  voice.dispose();
+});
 
 async function onFiles(files: FileList | null) {
   const onAttachments = props["onUpdate:attachments"];
@@ -268,36 +255,44 @@ function onSubmitClick() {
       </li>
     </ul>
 
-    <div class="chai-composer__field">
-      <textarea
-        ref="textarea"
-        :class="['chai-composer__input chai-composer__type', { 'chai-composer__input--revealing': animating }]"
+    <VoiceWaveform v-if="voiceInput && voiceState.status === 'recording'" :levels="voiceState.levels" :elapsed-ms="voiceState.elapsedMs" />
+    <div v-else-if="view.world" class="chai-composer__world-fields">
+      <PromptField
         :value="modelValue"
         :placeholder="view.placeholder"
-        :aria-label="promptLabel ?? view.placeholder"
-        rows="1"
-        :disabled="disabled || animating"
-        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+        heading="Environment"
+        note="(required)"
+        :hint="view.environmentHint"
+        :on-enhance="enhanceField('environment')"
+        :enhancing="Boolean(enhancing) && enhancingField === 'environment'"
+        :disabled="disabled"
+        @change="emit('update:modelValue', $event)"
+      />
+      <PromptField
+        v-if="props['onUpdate:character']"
+        :value="character"
+        :placeholder="view.characterPlaceholder"
+        heading="Character"
+        note="(optional)"
+        :on-enhance="enhanceField('character')"
+        :enhancing="Boolean(enhancing) && enhancingField === 'character'"
+        :disabled="disabled"
+        @change="props['onUpdate:character']?.($event)"
       />
-      <!-- The Enhance reveal: decorative, so hidden from screen readers, which read the textarea's final text. -->
-      <div v-if="animating" class="chai-composer__reveal chai-composer__type" aria-hidden="true">
-        <span class="chai-composer__reveal-text">{{ animatingText!.slice(0, revealedLength) }}</span>
-      </div>
-      <!-- Optimize, or once a rewrite lands, undo it: until the prompt is edited by hand. -->
-      <button
-        v-if="onEnhance"
-        type="button"
-        :class="['chai-composer__optimize', { 'chai-composer__optimize--active': enhanceBusy }]"
-        :disabled="disabled || (isEnhanced ? false : !modelValue.trim() || enhanceBusy)"
-        :aria-label="isEnhanced ? 'Revert to original prompt' : 'Optimize prompt'"
-        :title="isEnhanced ? 'Revert to original prompt' : 'Optimize prompt'"
-        @click="onOptimizeClick"
-      >
-        <UndoIcon v-if="isEnhanced" /><OptimizeIcon v-else />
-      </button>
     </div>
+    <PromptField
+      v-else
+      :value="modelValue"
+      :placeholder="view.placeholder"
+      :label="promptLabel"
+      :on-enhance="enhanceField('prompt')"
+      :enhancing="Boolean(enhancing)"
+      :disabled="disabled"
+      @change="emit('update:modelValue', $event)"
+    />
 
     <p v-if="submitError" class="chai-composer__error" role="alert"><ErrorIcon />{{ submitError }}</p>
+    <p v-if="voiceInput && voiceState.status === 'error'" class="chai-composer__error" role="alert"><ErrorIcon />{{ voiceState.error }}</p>
 
     <div class="chai-composer__controls">
       <div class="chai-composer__controls-start">
@@ -350,10 +345,26 @@ function onSubmitClick() {
           :disabled="disabled"
           @select="props['onUpdate:aspectRatio']?.($event.id)"
         />
+
+        <SearchMenu
+          v-if="view.frameRateOptions.length > 0 && props['onUpdate:frameRate']"
+          :options="view.frameRateOptions.map((r) => ({ id: String(r), label: `${r}fps` }))"
+          :value="view.offeredFrameRate == null ? null : String(view.offeredFrameRate)"
+          :trigger-label="view.offeredFrameRate == null ? 'Frame rate' : `${view.offeredFrameRate}fps`"
+          menu-label="Frame rate"
+          :searchable="false"
+          trigger-variant="text"
+          :disabled="disabled"
+          @select="props['onUpdate:frameRate']?.(Number($event.id))"
+        />
       </div>
 
-      <!-- MD3's md-fab has no disabled state of its own; Chai's unfilled-until-ready look comes from `data-ready` in style.css. `label=""` keeps it a plain icon FAB. -->
+      <div class="chai-composer__controls-end">
+      <VoiceButton v-if="voiceInput" :voice="voice" :state="voiceState" :disabled="disabled" />
+      <!-- MD3's md-fab has no disabled state of its own; Chai's unfilled-until-ready look comes from `data-ready` in style.css. `label=""` keeps it a plain icon FAB.
+           Hidden while a recording is made or transcribed: the transcript is sent once it's in the prompt to check. -->
       <md-fab
+        v-if="!(voiceInput && (voiceState.status === 'recording' || voiceState.status === 'transcribing'))"
         class="chai-composer__submit"
         size="small"
         variant="secondary"
@@ -367,6 +378,7 @@ function onSubmitClick() {
       >
         <span slot="icon"><StopIcon v-if="view.showStop" /><RetryIcon v-else-if="submitError" /><ArrowForwardIcon v-else /></span>
       </md-fab>
+      </div>
     </div>
   </div>
 </template>

package/src/composer/AttachMenu.vue

@@ -3,7 +3,7 @@
 import { ref } from "vue";
 import type { ComposerAttachMenuAction, composerAttachMenuItems } from "@chai-ui/core";
 import { useDismiss } from "../dismiss.js";
-import { AttachFileIcon, CloseSymbolIcon, ContentCutIcon, ImageIcon, PlusIcon, VideocamIcon } from "../icons.js";
+import { AttachFileIcon, CloseSymbolIcon, ContentCutIcon, ImageIcon, PlusIcon, GlobeIcon, VideocamIcon } from "../icons.js";
 
 defineProps<{
   items: ReturnType<typeof composerAttachMenuItems>;
@@ -13,7 +13,7 @@ defineProps<{
 }>();
 const emit = defineEmits<{ select: [action: ComposerAttachMenuAction]; files: [files: FileList | null] }>();
 
-const ICONS = { "add-media": AttachFileIcon, "create-image": ImageIcon, "create-video": VideocamIcon, "edit-media": ContentCutIcon };
+const ICONS = { "add-media": AttachFileIcon, "create-image": ImageIcon, "create-video": VideocamIcon, "create-world": GlobeIcon, "edit-media": ContentCutIcon };
 const open = ref(false);
 const root = ref<HTMLElement>();
 const input = ref<HTMLInputElement>();