@chai-ui/vue 0.7.1 → 0.8.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
@@ -2339,7 +2408,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 +2436,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) => 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.8.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.8.0",
+    "@chai-ui/tokens": "0.8.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",

package/src/Composer.vue

@@ -9,30 +9,32 @@
  * 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
+ * `@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, ref, watch } from "vue";
 import {
   composerAttachmentsFromFiles,
   composerAttachMenuItems,
   composerView,
-  enhanceRevealDurationMs,
-  MAX_ANIMATE_ENHANCE_LENGTH,
   type ComposerAttachment,
   type ComposerAttachMenuAction,
+  type ComposerPromptField,
   type ComposerSubmitPayload,
   type ComposerUseCase,
   type EditRegion,
   type MediaKind,
   type ModelOption,
+  type OutputKind,
   type ParameterOption,
 } 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 { ArrowForwardIcon, CloseSymbolIcon, ErrorIcon, ImageIcon, MusicNoteIcon, RetryIcon, StopIcon, VideocamIcon } from "./icons.js";
 import SearchMenu from "./primitives/SearchMenu.vue";
 
 const props = withDefaults(
@@ -55,7 +57,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 +75,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, and with a world which field it's for. */
+    onEnhance?: (value: string, field: ComposerPromptField) => 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. */
@@ -99,6 +107,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 +169,14 @@ 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 }
-);
-
-// 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);
-  }
-);
-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);
-}
+// 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);
+  });
 
 async function onFiles(files: FileList | null) {
   const onAttachments = props["onUpdate:attachments"];
@@ -268,34 +228,40 @@ function onSubmitClick() {
       </li>
     </ul>
 
-    <div class="chai-composer__field">
-      <textarea
-        ref="textarea"
-        :class="['chai-composer__input chai-composer__type', { 'chai-composer__input--revealing': animating }]"
+    <div v-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>
 
@@ -350,6 +316,18 @@ 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. -->

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>();

package/src/composer/PromptField.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+/**
+ * One prompt textarea with its Enhance button: grows with wrapped text,
+ * reveals a rewrite as it lands, and offers undo until the text is edited by
+ * hand. A `heading` gives it a visible label above a filled box (a world's
+ * Environment and Character); without one it's the bar's plain prompt.
+ */
+import { computed, onScopeDispose, ref, useId, watch } from "vue";
+import { enhanceRevealDurationMs, MAX_ANIMATE_ENHANCE_LENGTH } from "@chai-ui/core";
+import { OptimizeIcon, UndoIcon } from "../icons.js";
+
+const props = defineProps<{
+  value: string;
+  placeholder: string;
+  /** Accessible name for the plain prompt. Defaults to `placeholder`. */
+  label?: string;
+  heading?: string;
+  note?: string;
+  /** Shown under a headed field, e.g. why submit can't go yet. */
+  hint?: string | null;
+  onEnhance?: (value: string) => void;
+  enhancing: boolean;
+  disabled: boolean;
+}>();
+const emit = defineEmits<{ change: [value: string] }>();
+const id = useId();
+
+// Grows with wrapped text from one line, instead of a fixed row count.
+const textarea = ref<HTMLTextAreaElement>();
+watch(
+  () => props.value,
+  () => {
+    const el = textarea.value;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  },
+  { flush: "post", immediate: true }
+);
+
+// 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.value === originalValue.value) return;
+    const value = props.value;
+    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);
+  }
+);
+onScopeDispose(() => cancelAnimationFrame(raf));
+
+const animating = computed(() => animatingText.value != null);
+const isEnhanced = computed(() => !animating.value && enhancedValue.value != null && props.value === enhancedValue.value);
+const enhanceBusy = computed(() => props.enhancing || animating.value);
+const optimizeName = computed(
+  () => `${isEnhanced.value ? "Revert to original" : "Optimize"} ${props.heading ? props.heading.toLowerCase() : "prompt"}`
+);
+
+function onOptimizeClick() {
+  if (isEnhanced.value) {
+    const original = originalValue.value;
+    enhancedValue.value = null;
+    originalValue.value = null;
+    if (original != null) emit("change", original);
+    return;
+  }
+  originalValue.value = props.value; // for undo, before the rewrite lands
+  props.onEnhance?.(props.value);
+}
+</script>
+
+<template>
+  <!-- A world's labeled field: heading and Enhance above a filled box. -->
+  <div v-if="heading" class="chai-composer__world-field">
+    <div class="chai-composer__world-field-head">
+      <label :for="id" class="chai-composer__world-field-label"><strong>{{ heading }}</strong> {{ note }}</label>
+      <!-- Optimize, or once a rewrite lands, undo it: until the text is edited by hand. -->
+      <button
+        v-if="onEnhance"
+        type="button"
+        :class="['chai-composer__optimize', { 'chai-composer__optimize--active': enhanceBusy }]"
+        :disabled="disabled || (isEnhanced ? false : !value.trim() || enhanceBusy)"
+        :aria-label="optimizeName"
+        :title="optimizeName"
+        @click="onOptimizeClick"
+      >
+        <UndoIcon v-if="isEnhanced" /><OptimizeIcon v-else />
+      </button>
+    </div>
+    <div class="chai-composer__field chai-composer__field--boxed">
+      <textarea
+        :id="id"
+        ref="textarea"
+        :class="['chai-composer__input chai-composer__type', { 'chai-composer__input--revealing': animating }]"
+        :value="value"
+        :placeholder="placeholder"
+        :aria-describedby="hint ? `${id}-hint` : undefined"
+        rows="1"
+        :disabled="disabled || animating"
+        @input="emit('change', ($event.target as HTMLTextAreaElement).value)"
+      />
+      <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>
+    </div>
+    <p v-if="hint" :id="`${id}-hint`" class="chai-composer__field-hint">{{ hint }}</p>
+  </div>
+
+  <div v-else class="chai-composer__field">
+    <textarea
+      :id="id"
+      ref="textarea"
+      :class="['chai-composer__input chai-composer__type', { 'chai-composer__input--revealing': animating }]"
+      :value="value"
+      :placeholder="placeholder"
+      :aria-label="label ?? placeholder"
+      rows="1"
+      :disabled="disabled || animating"
+      @input="emit('change', ($event.target as HTMLTextAreaElement).value)"
+    />
+    <!-- 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 : !value.trim() || enhanceBusy)"
+      :aria-label="optimizeName"
+      :title="optimizeName"
+      @click="onOptimizeClick"
+    >
+      <UndoIcon v-if="isEnhanced" /><OptimizeIcon v-else />
+    </button>
+  </div>
+</template>

package/src/icons.ts

@@ -50,6 +50,8 @@ export const OptimizeIcon = icon("0 0 25 24", [{ "d": "M5 19H6.425L16.2 9.225L14
 export const UndoIcon = icon("0 -960 960 960", [{ "d": "M259-200v-60h310q70 0 120.5-46.5T740-422q0-69-50.5-115.5T569-584H274l114 114-42 42-186-186 186-186 42 42-114 114h294q95 0 163.5 64T800-422q0 94-68.5 158T568-200H259Z", "fill": "currentColor" }]);
 export const AttachFileIcon = icon("0 -960 960 960", [{ "d": "M728-326q0 103-72.18 174.5-72.17 71.5-175 71.5Q378-80 305.5-151.5T233-326v-380q0-72.5 51.5-123.25T408-880q72 0 123.5 50.75T583-706v360q0 42-30 72t-72.5 30q-42.5 0-72.5-29.67-30-29.68-30-72.33v-370h60v370q0 17 12.5 29.5t30.64 12.5q18.14 0 30-12.5T523-346v-360q0-48-33.5-81t-81.71-33q-48.21 0-81.5 33.06T293-706v380q0 78 54.97 132T481-140q77.92 0 132.46-54Q668-248 668-326v-390h60v390Z", "fill": "currentColor" }]);
 export const ImageIcon = icon("0 -960 960 960", [{ "d": "M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z", "fill": "currentColor" }]);
+/** Material Symbols "globe" — Create world. */
+export const GlobeIcon = icon("0 -960 960 960", [{ "d": "M480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm-.27-60q142.38 0 241.19-99.5T820-480v-13q-6 26-27.41 43.5Q771.19-432 742-432h-80q-33 0-56.5-23.5T582-512v-40H422v-80q0-33 23.5-56.5T502-712h40v-22q0-16 13.5-40t30.5-29q-25-8-51.36-12.5Q508.29-820 480-820q-141 0-240.5 98.81T140-480h150q66 0 113 47t47 113v40H330v105q34 17 71.7 26t78.3 9Z", "fill": "currentColor" }]);
 export const VideocamIcon = icon("0 -960 960 960", [{ "d": "M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h520q24 0 42 18t18 42v215l160-160v410L720-435v215q0 24-18 42t-42 18H140Zm0-60h520v-520H140v520Zm0 0v-520 520Z", "fill": "currentColor" }]);
 export const ContentCutIcon = icon("0 -960 960 960", [{ "d": "M782-114 481-415 364-298q11 17 13.5 33t2.5 35q0 64-43 107T230-80q-64 0-107-43T80-230q0-64 43-107t107-43q18 0 35.5 5t36.5 15l116-116-118-118q-17 8-34.5 11t-35.5 3q-64 0-107-43T80-730q0-64 43-107t107-43q64 0 107 43t43 107q0 19-2.5 36T367-662l514 514v34h-99ZM599-527l-66-66 249-249h99v33L599-527ZM294-666q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Zm202.5 203.5Q502-468 502-476t-5.5-13.5Q491-495 483-495t-13.5 5.5Q464-484 464-476t5.5 13.5Q475-457 483-457t13.5-5.5ZM294-166q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Z", "fill": "currentColor" }]);
 export const MusicNoteIcon = icon("0 -960 960 960", [{ "d": "M286.5-163.5Q243-207 243-270t43.5-106.5Q330-420 393-420q28 0 50.5 8t39.5 22v-450h234v135H543v435q0 63-43.5 106.5T393-120q-63 0-106.5-43.5Z", "fill": "currentColor" }]);

package/src/index.ts

@@ -46,6 +46,7 @@ export {
 } from "@chai-ui/core";
 export type {
   ComposerAttachMenuAction,
+  ComposerPromptField,
   ComposerAttachment,
   ComposerSelection,
   ComposerSubmitPayload,
@@ -62,6 +63,7 @@ export type {
   MediaAnalyzerSubmitPayload,
   MediaKind,
   ModelOption,
+  OutputKind,
   ParameterOption,
   Reasoning,
   RegionBox,