@chai-ui/vue 0.8.0 → 0.9.0

package/dist/style.css

@@ -751,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"). */

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, field?: import("@chai-ui/core").ComposerPromptField) => 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.8.0",
+  "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/core": "0.8.0",
-    "@chai-ui/tokens": "0.8.0"
+    "@chai-ui/core": "0.9.0",
+    "@chai-ui/tokens": "0.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",

package/src/Composer.vue

@@ -9,20 +9,22 @@
  * 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:character` and `@update:frame-rate` (a
+ * `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, ref, watch } from "vue";
+import { computed, onScopeDispose, ref, shallowRef, watch } from "vue";
 import {
   composerAttachmentsFromFiles,
   composerAttachMenuItems,
   composerView,
+  createVoiceInput,
   type ComposerAttachment,
   type ComposerAttachMenuAction,
   type ComposerPromptField,
+  type GenerationUseCase,
   type ComposerSubmitPayload,
   type ComposerUseCase,
   type EditRegion,
@@ -30,10 +32,13 @@ import {
   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 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";
 
@@ -75,8 +80,8 @@ 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 text, and with a world which field it's for. */
-    onEnhance?: (value: string, field: ComposerPromptField) => 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`. */
@@ -98,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;
   }>(),
   {
@@ -175,9 +187,24 @@ const enhanceField = (field: ComposerPromptField) =>
   props.onEnhance &&
   ((current: string) => {
     enhancingField.value = field;
-    props.onEnhance?.(current, field);
+    props.onEnhance?.(current, field, view.value.enhanceMode);
   });
 
+// 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);
+  }
+);
+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"];
   if (!files || files.length === 0 || !onAttachments) return;
@@ -228,7 +255,8 @@ function onSubmitClick() {
       </li>
     </ul>
 
-    <div v-if="view.world" class="chai-composer__world-fields">
+    <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"
@@ -264,6 +292,7 @@ function onSubmitClick() {
     />
 
     <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">
@@ -330,8 +359,12 @@ function onSubmitClick() {
         />
       </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"
@@ -345,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/VoiceButton.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/** The mic: click to record; while recording, a stop button that transcribes; while transcribing, a spinner that cancels. */
+import { computed } from "vue";
+import type { VoiceInput, VoiceInputState } from "@chai-ui/core";
+import { MicIcon, StopIcon } from "../icons.js";
+
+const props = defineProps<{ voice: VoiceInput; state: VoiceInputState; disabled?: boolean }>();
+
+const label = computed(() =>
+  props.state.status === "recording"
+    ? "Stop recording and transcribe"
+    : props.state.status === "transcribing"
+      ? "Cancel transcription"
+      : "Start voice input"
+);
+
+function onClick() {
+  const { status } = props.state;
+  if (status === "recording") props.voice.stop();
+  else if (status === "transcribing") props.voice.cancel();
+  else {
+    props.voice.dismiss();
+    void props.voice.start();
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && props.state.status === "recording") props.voice.cancel();
+}
+</script>
+
+<template>
+  <div class="chai-composer__voice" :data-status="state.status">
+    <button
+      type="button"
+      class="chai-composer__voice-button"
+      :disabled="disabled"
+      :aria-label="label"
+      :title="label"
+      @click="onClick"
+      @keydown="onKeydown"
+    >
+      <span v-if="state.status === 'transcribing'" class="chai-composer__voice-spinner" aria-hidden="true" /><StopIcon
+        v-else-if="state.status === 'recording'"
+      /><MicIcon v-else />
+    </button>
+    <!-- Announces each change of state once, not every tick of the timer. -->
+    <span class="chai-visually-hidden" role="status">{{ state.status === "recording" ? "Recording" : state.status === "transcribing" ? "Transcribing" : "" }}</span>
+  </div>
+</template>

package/src/composer/VoiceWaveform.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/** What replaces the prompt while recording: recent mic loudness as bars, newest on the right, and the time. Decorative. */
+import { computed } from "vue";
+import { formatVoiceElapsed, VOICE_LEVEL_COUNT } from "@chai-ui/core";
+
+const props = defineProps<{ levels: number[]; elapsedMs: number }>();
+const bars = computed(() => [...Array<number>(Math.max(0, VOICE_LEVEL_COUNT - props.levels.length)).fill(0), ...props.levels]);
+</script>
+
+<template>
+  <div class="chai-composer__waveform" aria-hidden="true">
+    <div class="chai-composer__waveform-bars">
+      <span v-for="(level, i) in bars" :key="i" class="chai-composer__waveform-bar" :style="{ height: `${Math.max(20, level * 100)}%` }" />
+    </div>
+    <span class="chai-composer__waveform-time">{{ formatVoiceElapsed(elapsedMs) }}</span>
+  </div>
+</template>

package/src/icons.ts

@@ -28,6 +28,8 @@ export const VisibilityIcon = icon("0 -960 960 960", [{ "d": "M600.5-379.5Q650-4
 export const VisibilityOffIcon = icon("0 -960 960 960", [{ "d": "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z", "fill": "currentColor" }]);
 export const CheckSymbolIcon = icon("0 -960 960 960", [{ "d": "M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z", "fill": "currentColor" }]);
 export const CloseSymbolIcon = icon("0 -960 960 960", [{ "d": "m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z", "fill": "currentColor" }]);
+/** Material Symbols "mic" — voice input. */
+export const MicIcon = icon("0 -960 960 960", [{ "d": "M408-453.92q-29-30.91-29-75.08v-251q0-41.67 29.44-70.83Q437.88-880 479.94-880t71.56 29.17Q581-821.67 581-780v251q0 44.17-29 75.08Q523-423 480-423t-72-30.92ZM480-651Zm-30 531v-136q-106-11-178-89t-72-184h60q0 91 64.29 153t155.5 62q91.21 0 155.71-62Q700-438 700-529h60q0 106-72 184t-178 89v136h-60Zm59.5-376.5Q521-510 521-529v-251q0-17-11.79-28.5T480-820q-17.42 0-29.21 11.5T439-780v251q0 19 11.5 32.5T480-483q18 0 29.5-13.5Z", "fill": "currentColor" }]);
 export const StopIcon = icon("0 -960 960 960", [{ "d": "M240-240v-480h480v480H240Z", "fill": "currentColor" }]);
 export const ThumbUpIcon = icon("0 0 18 18", [{ "d": "M5.25039 15.7502V6.00019L10.5004 0.750193L11.8879 2.13769L10.9129 6.00019H17.2504V9.30019L14.5129 15.7502H5.25039ZM6.75039 14.2502H13.5004L15.7504 9.00019V7.50019H9.00039L10.0129 3.37519L6.75039 6.63769V14.2502ZM1.50039 15.7502V6.00019H5.25039V7.50019H3.00039V14.2502H5.25039V15.7502H1.50039Z", "fill": "currentColor" }], true);
 export const ThumbDownIcon = icon("0 0 18 18", [{ "d": "M2.24961 12C1.84961 12 1.49961 11.85 1.19961 11.55C0.899615 11.25 0.749615 10.9 0.749615 10.5V9C0.749615 8.9125 0.762115 8.81875 0.787115 8.71875C0.812115 8.61875 0.837115 8.525 0.862115 8.4375L3.11211 3.15C3.22461 2.9 3.41211 2.6875 3.67461 2.5125C3.93711 2.3375 4.21211 2.25 4.49961 2.25H12.7496V12L8.24961 16.4625C8.06211 16.65 7.84024 16.7594 7.58399 16.7906C7.32774 16.8219 7.08086 16.775 6.84336 16.65C6.60586 16.525 6.43086 16.35 6.31836 16.125C6.20586 15.9 6.18086 15.6688 6.24336 15.4313L7.08711 12H2.24961ZM11.2496 11.3625V3.75H4.49961L2.24961 9V10.5H8.99961L7.98711 14.625L11.2496 11.3625ZM14.9996 2.25C15.4121 2.25 15.7652 2.39688 16.059 2.69063C16.3527 2.98438 16.4996 3.3375 16.4996 3.75V10.5C16.4996 10.9125 16.3527 11.2656 16.059 11.5594C15.7652 11.8531 15.4121 12 14.9996 12H12.7496V10.5H14.9996V3.75H12.7496V2.25H14.9996Z", "fill": "currentColor" }], true);

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./useMediaAnalyzer.js";
 // to import from @chai-ui/vue.
 export {
   createFalEngine,
+  createFalTranscriber,
   createOpenRouterEngine,
   createMockEngine,
   mockEngine,
@@ -64,6 +65,9 @@ export type {
   MediaKind,
   ModelOption,
   OutputKind,
+  Transcribe,
+  VoiceClip,
+  VoiceInputConfig,
   ParameterOption,
   Reasoning,
   RegionBox,