@chai-ui/vue 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chai-ui/vue",
-  "version": "0.13.0",
+  "version": "0.14.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",
@@ -47,8 +47,8 @@
   "dependencies": {
     "@fontsource/roboto": "^5.3.0",
     "@material/web": "^2.5.0",
-    "@chai-ui/core": "0.13.0",
-    "@chai-ui/tokens": "0.13.0"
+    "@chai-ui/core": "0.14.0",
+    "@chai-ui/tokens": "0.14.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",

package/src/Composer.vue

@@ -18,6 +18,7 @@ import "@material/web/fab/fab.js";
 import { computed, onScopeDispose, ref, shallowRef, watch } from "vue";
 import {
   composerAttachmentsFromFiles,
+  composerEvents,
   composerAttachMenuItems,
   composerView,
   createVoiceInput,
@@ -28,6 +29,7 @@ import {
   type ComposerSubmitPayload,
   type ComposerUseCase,
   type ComposerView,
+  type ChaiEvent,
   type EditRegion,
   type MediaKind,
   type MenuPlacement,
@@ -113,6 +115,8 @@ const props = withDefaults(
     submitting?: boolean;
     onAbort?: () => void;
     onAttachMenuSelect?: (action: ComposerAttachMenuAction) => void;
+    /** Front-end analytics (`@event`): what the person does in the bar, one `ChaiEvent` each, for any analytics tool. No prompt text or file contents, only lengths and counts. */
+    onEvent?: (event: ChaiEvent) => void;
     /** Which + menu items to show. Each still shows only when it can work. */
     attachMenuActions?: ComposerAttachMenuAction[];
     /** An edit's regions (from `useComposer`'s `edit`), shown as colored chips while editing. */
@@ -196,6 +200,7 @@ watch(
 );
 
 function pickModel(menu: ComposerView["modelMenus"][number], id: string) {
+  props.onEvent?.(composerEvents.modelPicked(menu.key, id));
   if (view.value.multiModel) props["onUpdate:modelIds"]?.(menu.next(id));
   else props["onUpdate:modelId"]?.(id);
 }
@@ -205,6 +210,7 @@ const enhancingField = ref<ComposerPromptField>("prompt");
 const enhanceField = (field: ComposerPromptField) =>
   props.onEnhance &&
   ((current: string) => {
+    props.onEvent?.(composerEvents.enhanceClicked(field, current.length));
     enhancingField.value = field;
     props.onEnhance?.(current, field, view.value.enhanceMode);
   });
@@ -227,20 +233,54 @@ onScopeDispose(() => {
 async function onFiles(files: FileList | null) {
   const onAttachments = props["onUpdate:attachments"];
   if (!files || files.length === 0 || !onAttachments) return;
+  // Counted now: the input is cleared for the next pick, which empties its live FileList.
+  const picked = files.length;
   // Edit mode works on one image: a new one replaces it, and the edit starts over.
   const { attachments, unsupported } = await composerAttachmentsFromFiles(files, props.attachments, view.value.editing);
   unsupported.forEach((name) => emit("unsupportedFile", name));
+  props.onEvent?.(composerEvents.mediaAttached(picked - unsupported.length, unsupported.length));
   if (attachments) onAttachments(attachments);
 }
 
 function removeUseCase(useCase: ComposerUseCase) {
+  props.onEvent?.(composerEvents.useCaseRemoved(useCase));
   if (props.multiSelectUseCases) props["onUpdate:useCases"]?.(props.useCases.filter((u) => u.kind !== useCase.kind));
   else props.onClearUseCase?.();
 }
 
 function onSubmitClick() {
-  if (view.value.showStop) props.onAbort?.();
-  else if (!view.value.isSubmitDisabled && !props.submitting) emit("submit", view.value.payload());
+  if (view.value.showStop) {
+    props.onEvent?.(composerEvents.stopped());
+    props.onAbort?.();
+  } else if (!view.value.isSubmitDisabled && !props.submitting) {
+    const payload = view.value.payload();
+    props.onEvent?.(composerEvents.submitted(payload, Boolean(props.submitError)));
+    emit("submit", payload);
+  }
+}
+
+function onMenuSelect(action: ComposerAttachMenuAction) {
+  if (action !== "add-media") props.onEvent?.(composerEvents.useCasePicked(action));
+  props.onAttachMenuSelect?.(action);
+}
+
+function toggleAutoSelect(on: boolean) {
+  props.onEvent?.(composerEvents.autoSelectToggled(on));
+  props["onUpdate:autoSelectModel"]?.(on);
+}
+
+function revertField(field: ComposerPromptField) {
+  props.onEvent?.(composerEvents.enhanceReverted(field));
+}
+
+function onVoiceStart() {
+  props.onEvent?.(composerEvents.voiceStarted());
+}
+
+/** An option menu's pick, reported, then passed to its handler. */
+function pickOption(option: "aspect_ratio" | "voice" | "genre" | "frame_rate", id: string, apply: () => unknown) {
+  props.onEvent?.(composerEvents.optionPicked(option, id));
+  apply();
 }
 </script>
 
@@ -283,6 +323,7 @@ function onSubmitClick() {
         note="(required)"
         :hint="view.environmentHint"
         :on-enhance="enhanceField('environment')"
+        :on-revert="() => revertField('environment')"
         :enhancing="Boolean(enhancing) && enhancingField === 'environment'"
         :disabled="disabled"
         @change="emit('update:modelValue', $event)"
@@ -294,6 +335,7 @@ function onSubmitClick() {
         heading="Character"
         note="(optional)"
         :on-enhance="enhanceField('character')"
+        :on-revert="() => revertField('character')"
         :enhancing="Boolean(enhancing) && enhancingField === 'character'"
         :disabled="disabled"
         @change="props['onUpdate:character']?.($event)"
@@ -305,6 +347,7 @@ function onSubmitClick() {
       :placeholder="view.placeholder"
       :label="promptLabel"
       :on-enhance="enhanceField('prompt')"
+      :on-revert="() => revertField('prompt')"
       :enhancing="Boolean(enhancing)"
       :disabled="disabled"
       @change="emit('update:modelValue', $event)"
@@ -321,7 +364,7 @@ function onSubmitClick() {
           :images-only="view.editing"
           :disabled="disabled"
           :placement="menuPlacement"
-          @select="onAttachMenuSelect?.($event)"
+          @select="onMenuSelect($event)"
           @files="onFiles"
         />
 
@@ -344,7 +387,7 @@ function onSubmitClick() {
           :multiple="menu.multiple"
           :toggle-header="
             showAutoSelectToggle && view.offersAutoSelect
-              ? { label: 'Auto-select model', value: view.autoSelectModel, onChange: (v: boolean) => props['onUpdate:autoSelectModel']?.(v) }
+              ? { label: 'Auto-select model', value: view.autoSelectModel, onChange: toggleAutoSelect }
               : undefined
           "
           :trigger-label="menu.triggerLabel"
@@ -366,7 +409,7 @@ function onSubmitClick() {
           :searchable="false"
           trigger-variant="text"
           :disabled="disabled"
-          @select="props['onUpdate:aspectRatio']?.($event.id)"
+          @select="pickOption('aspect_ratio', $event.id, () => props['onUpdate:aspectRatio']?.($event.id))"
         />
 
         <SearchMenu
@@ -379,7 +422,7 @@ function onSubmitClick() {
           :searchable="view.voiceOptions.length > view.searchableAt"
           trigger-variant="text"
           :disabled="disabled"
-          @select="props['onUpdate:speechVoice']?.($event.id)"
+          @select="pickOption('voice', $event.id, () => props['onUpdate:speechVoice']?.($event.id))"
         />
 
         <SearchMenu
@@ -393,7 +436,7 @@ function onSubmitClick() {
           :searchable="view.genreOptions.length > view.searchableAt"
           trigger-variant="text"
           :disabled="disabled"
-          @select="props['onUpdate:genres']?.(view.toggledGenres($event.id))"
+          @select="pickOption('genre', $event.id, () => props['onUpdate:genres']?.(view.toggledGenres($event.id)))"
         />
 
         <SearchMenu
@@ -406,12 +449,18 @@ function onSubmitClick() {
           :searchable="false"
           trigger-variant="text"
           :disabled="disabled"
-          @select="props['onUpdate:frameRate']?.(Number($event.id))"
+          @select="pickOption('frame_rate', $event.id, () => props['onUpdate:frameRate']?.(Number($event.id)))"
         />
       </div>
 
       <div class="chai-composer__controls-end">
-      <VoiceButton v-if="voiceInput" :voice="voice" :state="voiceState" :disabled="disabled" />
+      <VoiceButton
+        v-if="voiceInput"
+        :voice="voice"
+        :state="voiceState"
+        :disabled="disabled"
+        :on-start="onVoiceStart"
+      />
       <!-- 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

package/src/ResultCard.vue

@@ -13,8 +13,10 @@ import {
   formatCost,
   formatDuration,
   formatTokens,
+  resultCardEvents,
   resultModelLabel,
   shareMedia,
+  type ChaiEvent,
   type ModelOption,
   type Result,
 } from "@chai-ui/core";
@@ -46,6 +48,8 @@ const props = defineProps<{
   /** Extra items in the ⋯ menu. Omit to hide the menu. */
   moreActions?: ResultCardMoreAction[];
   disabled?: boolean;
+  /** Front-end analytics (`@event`): a result appearing, result actions, paging and opening the details side, one `ChaiEvent` each. */
+  onEvent?: (event: ChaiEvent) => void;
 }>();
 const emit = defineEmits<{
   /** `"like"`, `"dislike"`, `"download"`, `"share"`, `"copy-prompt"`, `"retry"`, or a `moreActions` id. */
@@ -98,7 +102,38 @@ const { slide, endSlide } = usePageSlide(() => ({
   image: kind.value === "image" ? result.value!.output!.src : undefined,
 }));
 
-const act = (action: string) => emit("action", action, result.value!);
+/** A result action: reported, then emitted with the result it's for. */
+function report(action: string, r: Result) {
+  props.onEvent?.(resultCardEvents.action(action));
+  emit("action", action, r);
+}
+const act = (action: string) => report(action, result.value!);
+
+/** Paging to another result, reported. */
+function goTo(next: number) {
+  if (next !== index.value) props.onEvent?.(resultCardEvents.paged(next, props.results.length));
+  activeIndex.value = next;
+}
+
+function openInfo() {
+  props.onEvent?.(resultCardEvents.infoOpened());
+  flipped.value = true;
+}
+
+// Each result reports once, the first time it's shown done or failed.
+const shownIds = new Set<string>();
+watch(
+  () => props.results,
+  (results) => {
+    for (const r of results) {
+      if ((r.status === "done" || r.status === "error") && !shownIds.has(r.id)) {
+        shownIds.add(r.id);
+        props.onEvent?.(resultCardEvents.shown(r.status, r.output?.kind, results.length));
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
 
 function flash(flag: typeof copied) {
   flag.value = true;
@@ -114,14 +149,14 @@ function copyPrompt() {
 async function download() {
   const r = result.value!;
   if (r.output) await downloadMedia(r.output.src, downloadFilename(r.id, r.output.kind, r.output.src));
-  emit("action", "download", r);
+  report("download", r);
 }
 
 async function share() {
   const r = result.value!;
   // With no share sheet the link is copied; say so, or the click looks like nothing happened.
   if (r.output && (await shareMedia(r.output.src)) === "copied") flash(linkCopied);
-  emit("action", "share", r);
+  report("share", r);
 }
 
 // Flipping moves focus to the side now showing, so a keyboard user isn't left on a button that just turned away.
@@ -206,7 +241,7 @@ function onOverlayKeydown(e: KeyboardEvent) {
               :index="index"
               label="Results"
               :disabled="disabled"
-              @update:index="activeIndex = $event"
+              @update:index="goTo($event)"
             />
           </div>
 
@@ -223,7 +258,7 @@ function onOverlayKeydown(e: KeyboardEvent) {
                 <IconButton variant="pill" label="Retry" :disabled="disabled" @click="act('retry')"><RefreshIcon /></IconButton>
                 <MoreMenu v-if="moreActions?.length" :actions="moreActions" :disabled="disabled" @select="act($event.id)" />
               </div>
-              <IconButton variant="round" label="Show details" :disabled="disabled" @click="flipped = true"><InfoIcon /></IconButton>
+              <IconButton variant="round" label="Show details" :disabled="disabled" @click="openInfo"><InfoIcon /></IconButton>
             </div>
           </div>
         </div>

package/src/composer/PromptField.vue

@@ -19,6 +19,8 @@ const props = defineProps<{
   /** Shown under a headed field, e.g. why submit can't go yet. */
   hint?: string | null;
   onEnhance?: (value: string) => void;
+  /** After an Enhance, the button's "Revert to original" click. */
+  onRevert?: () => void;
   enhancing: boolean;
   disabled: boolean;
 }>();
@@ -81,6 +83,7 @@ function onOptimizeClick() {
     enhancedValue.value = null;
     originalValue.value = null;
     if (original != null) emit("change", original);
+    props.onRevert?.();
     return;
   }
   originalValue.value = props.value; // for undo, before the rewrite lands

package/src/composer/VoiceButton.vue

@@ -4,7 +4,7 @@ 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 props = defineProps<{ voice: VoiceInput; state: VoiceInputState; disabled?: boolean; onStart?: () => void }>();
 
 const label = computed(() =>
   props.state.status === "recording"
@@ -20,6 +20,7 @@ function onClick() {
   else if (status === "transcribing") props.voice.cancel();
   else {
     props.voice.dismiss();
+    props.onStart?.();
     void props.voice.start();
   }
 }

package/src/index.ts

@@ -51,6 +51,8 @@ export {
   combinesWithOthers,
   buildJudgePrompt,
   DEFAULT_EVALUATION_CHECKS,
+  composerEvents,
+  resultCardEvents,
 } from "@chai-ui/core";
 export type {
   AudioUseCase,
@@ -66,6 +68,8 @@ export type {
   Evaluation,
   EvaluationCheck,
   JudgePromptInput,
+  ChaiEvent,
+  ChaiEventName,
   GenerationEngine,
   GenerationUseCase,
   MediaAnalysisKind,