@chai-ui/vue 0.0.0-stage → 0.7.1

package/src/result-card/ResultMedia.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/** The card's front: the result's image, video, audio or text, or its pending, stopped or failed state, with Download, Share and Expand over it. */
+import { computed } from "vue";
+import type { Result } from "@chai-ui/core";
+import { CheckSymbolIcon, DownloadIcon, ExpandIcon, ShareIcon } from "../icons.js";
+import IconButton from "./IconButton.vue";
+import ResultText from "./ResultText.vue";
+import VideoPlayer from "./VideoPlayer.vue";
+
+const props = defineProps<{
+  result: Result;
+  alt: string;
+  disabled?: boolean;
+  mediaExpanded: boolean;
+  linkCopied: boolean;
+  videoTime: { current: number };
+  videoWasPlaying: boolean;
+}>();
+const emit = defineEmits<{
+  download: [];
+  share: [];
+  expand: [];
+  dimensions: [width: number, height: number];
+  videoPlayingChange: [playing: boolean];
+}>();
+
+const kind = computed(() => props.result.output?.kind);
+// "Running with output" is a text result streaming in: show the partial text, not the spinner.
+const streaming = computed(() => props.result.status === "running" && kind.value === "text");
+const pending = computed(() => (props.result.status === "queued" || props.result.status === "running") && !streaming.value);
+
+function onImageLoad(e: Event) {
+  const img = e.currentTarget as HTMLImageElement;
+  emit("dimensions", img.naturalWidth, img.naturalHeight);
+}
+</script>
+
+<template>
+  <div v-if="pending" class="chai-result-card__media chai-result-card__media--pending">
+    <span class="chai-result-card__spinner" role="img" :aria-label="result.status === 'running' ? 'Running' : 'Queued'" />
+  </div>
+  <!-- Stopped before any output. A stopped stream keeps its partial text and renders below like any other. -->
+  <div v-else-if="result.status === 'cancelled' && !result.output" class="chai-result-card__media chai-result-card__media--cancelled">
+    <p class="chai-result-card__cancelled-text">Stopped</p>
+  </div>
+  <div v-else-if="result.status === 'error'" class="chai-result-card__media chai-result-card__media--error">
+    <p class="chai-result-card__error-text">{{ result.error?.message ?? "Something went wrong." }}</p>
+  </div>
+  <div v-else-if="!result.output" class="chai-result-card__media" />
+  <div v-else :class="['chai-result-card__media', { 'chai-result-card__media--fixed-height': kind === 'audio' || kind === 'text' }]">
+    <template v-if="kind === 'video'">
+      <!-- While expanded, the playing video is in the overlay; a still frame holds the layout here. -->
+      <img v-if="mediaExpanded" class="chai-result-card__image" :src="result.output.src" alt="" />
+      <VideoPlayer
+        v-else
+        :src="result.output.src"
+        :time="videoTime"
+        :was-playing="videoWasPlaying"
+        @playing-change="emit('videoPlayingChange', $event)"
+        @dimensions="(w, h) => emit('dimensions', w, h)"
+      />
+    </template>
+    <audio v-else-if="kind === 'audio'" class="chai-result-card__audio" :src="result.output.src" controls />
+    <ResultText v-else-if="kind === 'text'" :text="result.output.src" :streaming="streaming" />
+    <img v-else class="chai-result-card__image" :src="result.output.src" :alt="alt" @load="onImageLoad" />
+
+    <div v-if="!mediaExpanded && !streaming" class="chai-card-top chai-card-top--end">
+      <IconButton variant="top" label="Download" :disabled="disabled" @click="emit('download')"><DownloadIcon /></IconButton>
+      <IconButton variant="top" :label="linkCopied ? 'Link copied' : 'Share'" :disabled="disabled" @click="emit('share')">
+        <CheckSymbolIcon v-if="linkCopied" /><ShareIcon v-else />
+      </IconButton>
+      <IconButton v-if="kind === 'video' || kind === 'image'" variant="top" label="Expand" :disabled="disabled" @click="emit('expand')">
+        <ExpandIcon />
+      </IconButton>
+    </div>
+  </div>
+</template>

package/src/result-card/ResultText.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * A text result, streaming or finished. One element for both states, so the
+ * scroll position survives the moment a stream completes. Past its max
+ * height it scrolls; while streaming it follows the newest text, unless the
+ * person has scrolled up to read, in which case it stays where they are.
+ */
+import { onMounted, ref, watch } from "vue";
+
+const props = defineProps<{ text: string; streaming: boolean }>();
+const el = ref<HTMLElement>();
+let follow = true;
+
+function followNewest() {
+  if (el.value && props.streaming && follow) el.value.scrollTop = el.value.scrollHeight;
+}
+// A frame later on mount: set during mount, before the card's first paint,
+// the scroll position didn't stick in Chromium (React's effect runs after paint).
+onMounted(() => requestAnimationFrame(followNewest));
+watch(() => [props.text, props.streaming], followNewest, { flush: "post" });
+
+function onScroll(e: Event) {
+  const p = e.currentTarget as HTMLElement;
+  follow = p.scrollTop + p.clientHeight >= p.scrollHeight - 24;
+}
+</script>
+
+<template>
+  <!-- aria-busy: screen readers wait for the finished text instead of announcing every chunk. tabindex: keyboard users can scroll a long answer. -->
+  <p
+    ref="el"
+    :class="['chai-result-card__text-output', { 'chai-result-card__text-output--streaming': streaming }]"
+    :aria-busy="streaming"
+    tabindex="0"
+    @scroll="onScroll"
+  >{{ text }}</p>
+</template>

package/src/result-card/VideoPlayer.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * A real `<video>` with slim play/pause and scrubber chrome built on its own
+ * playback API, not the browser's heavier native controls. Mounted twice
+ * (inline, and in the expand overlay), so `time` and `wasPlaying` carry the
+ * position and play state across the swap.
+ */
+import { ref } from "vue";
+import { PlayIcon } from "../icons.js";
+
+const props = defineProps<{ src: string; expanded?: boolean; time: { current: number }; wasPlaying: boolean }>();
+const emit = defineEmits<{ playingChange: [playing: boolean]; dimensions: [width: number, height: number] }>();
+const video = ref<HTMLVideoElement>();
+const playing = ref(props.wasPlaying);
+const progress = ref(0);
+
+function togglePlay() {
+  const el = video.value!;
+  if (el.paused) el.play();
+  else el.pause();
+}
+
+function onLoadedMetadata() {
+  const el = video.value!;
+  el.currentTime = props.time.current;
+  if (props.wasPlaying) el.play().catch(() => {});
+  emit("dimensions", el.videoWidth, el.videoHeight);
+}
+
+function setPlaying(value: boolean) {
+  playing.value = value;
+  emit("playingChange", value);
+}
+
+function onTimeUpdate() {
+  const el = video.value!;
+  props.time.current = el.currentTime;
+  if (el.duration) progress.value = el.currentTime / el.duration;
+}
+
+function scrub(e: MouseEvent) {
+  const el = video.value!;
+  if (!el.duration) return;
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  el.currentTime = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)) * el.duration;
+}
+
+// Keyboard seeking, the slider pattern: arrows move 5s, Home/End jump.
+const STEPS: Record<string, number> = { ArrowRight: 5, ArrowUp: 5, ArrowLeft: -5, ArrowDown: -5 };
+function onScrubKey(e: KeyboardEvent) {
+  const el = video.value!;
+  if (!el.duration) return;
+  const step = STEPS[e.key];
+  if (step != null) el.currentTime = Math.min(el.duration, Math.max(0, el.currentTime + step));
+  else if (e.key === "Home") el.currentTime = 0;
+  else if (e.key === "End") el.currentTime = el.duration;
+  else return;
+  e.preventDefault();
+}
+</script>
+
+<template>
+  <video
+    ref="video"
+    class="chai-result-card__video"
+    :src="src"
+    @loadedmetadata="onLoadedMetadata"
+    @play="setPlaying(true)"
+    @pause="setPlaying(false)"
+    @timeupdate="onTimeUpdate"
+  />
+  <!-- One control over the whole video: click, or Tab then Space/Enter, to play or pause. The round Play badge is just its paused look. -->
+  <button type="button" class="chai-result-card__video-toggle" :aria-label="playing ? 'Pause' : 'Play'" @click="togglePlay">
+    <span v-if="!playing" class="chai-result-card__play"><PlayIcon /></span>
+  </button>
+  <div
+    :class="['chai-result-card__scrubber', { 'chai-result-card__scrubber--expanded': expanded }]"
+    role="slider"
+    tabindex="0"
+    aria-label="Seek"
+    :aria-valuemin="0"
+    :aria-valuemax="100"
+    :aria-valuenow="Math.round(progress * 100)"
+    :aria-valuetext="`${Math.round(progress * 100)}%`"
+    @click="scrub"
+    @keydown="onScrubKey"
+  >
+    <div class="chai-result-card__scrubber-fill" :style="{ width: `${progress * 100}%` }" />
+  </div>
+</template>

package/src/result-card/types.ts

@@ -0,0 +1,10 @@
+import type { Component } from "vue";
+
+/** One row in the "more" (⋯) menu, for app-specific actions (e.g. "Flag content"). Each one just emits `action` with this `id`. */
+export interface ResultCardMoreAction {
+  id: string;
+  label: string;
+  icon?: Component;
+}
+
+export type ResultCardVote = "like" | "dislike" | null;

package/src/useComposer.ts

@@ -0,0 +1,38 @@
+import { computed, onScopeDispose, shallowRef, toValue, type MaybeRefOrGetter } from "vue";
+import { createComposerStore, pickReasoning, type ComposerOptions } from "@chai-ui/core";
+import { useReasoning } from "./reasoning.js";
+
+export type UseComposerOptions = ComposerOptions;
+
+/**
+ * The Vue binding for `createComposerStore` in `@chai-ui/core`: turns a
+ * `Composer`'s submit payload into a real `Request` → `Run` → `Result`.
+ * Pass a getter (or ref) for options that change, e.g. `() => ({ engine, editImage: image.value })`.
+ */
+export function useComposer(options: MaybeRefOrGetter<UseComposerOptions> = {}) {
+  const provided = useReasoning();
+  const store = createComposerStore(
+    () => toValue(options),
+    () => provided.value
+  );
+  const state = shallowRef(store.getState());
+  onScopeDispose(
+    store.subscribe(() => (state.value = store.getState())),
+    true
+  );
+
+  return {
+    run: computed(() => state.value.runs[0] ?? null),
+    runs: computed(() => state.value.runs),
+    submit: store.submit,
+    cancel: store.cancel,
+    /** `undefined` without reasoning, so the Composer hides its Enhance button. */
+    enhance: computed(() => (pickReasoning(toValue(options), provided.value) ? store.enhance : undefined)),
+    enhancing: computed(() => state.value.enhancing),
+    routing: computed(() => state.value.routing),
+    /** Props for an `EditCard`, and `regions` for `Composer`. `null` when there's no `editImage`. */
+    edit: computed(() => store.edit(state.value, toValue(options).editImage)),
+  };
+}
+
+export type UseComposerReturn = ReturnType<typeof useComposer>;

package/src/useMediaAnalyzer.ts

@@ -0,0 +1,33 @@
+import { computed, onScopeDispose, shallowRef, toValue, type MaybeRefOrGetter } from "vue";
+import { createMediaAnalyzerStore, type MediaAnalyzerOptions } from "@chai-ui/core";
+import { useReasoning } from "./reasoning.js";
+
+export type UseMediaAnalyzerOptions = MediaAnalyzerOptions;
+
+/**
+ * The Vue binding for `createMediaAnalyzerStore` in `@chai-ui/core`, behind
+ * `MediaAnalyzer`'s submit: `prompt` fills in as the text streams.
+ */
+export function useMediaAnalyzer(options: MaybeRefOrGetter<UseMediaAnalyzerOptions> = {}) {
+  const provided = useReasoning();
+  const store = createMediaAnalyzerStore(
+    () => toValue(options),
+    () => provided.value
+  );
+  const state = shallowRef(store.getState());
+  onScopeDispose(
+    store.subscribe(() => (state.value = store.getState())),
+    true
+  );
+
+  return {
+    analyzing: computed(() => state.value.analyzing),
+    error: computed(() => state.value.error),
+    prompt: computed(() => state.value.prompt),
+    submit: store.submit,
+    cancel: store.cancel,
+    reset: store.reset,
+  };
+}
+
+export type UseMediaAnalyzerReturn = ReturnType<typeof useMediaAnalyzer>;