@chai-ui/vue 0.11.2 → 0.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chai-ui/vue",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "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.11.2",
-    "@chai-ui/tokens": "0.11.2"
+    "@chai-ui/core": "0.11.4",
+    "@chai-ui/tokens": "0.11.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",

package/src/Composer.vue

@@ -27,6 +27,7 @@ import {
   type GenerationUseCase,
   type ComposerSubmitPayload,
   type ComposerUseCase,
+  type ComposerView,
   type EditRegion,
   type MediaKind,
   type MenuPlacement,
@@ -58,13 +59,13 @@ const props = withDefaults(
     onClearUseCase?: () => void;
     /** What a submit means with no use case picked. Defaults to `TEXT_USE_CASE`. Never shown as a chip. */
     defaultUseCase?: ComposerUseCase;
-    /** Several use cases at once, at most one per kind, with `useCases` and `modelsByKind`. */
+    /** Image and Video from one prompt, with `useCases`, `modelsByKind` and `modelIds`: a Model menu each, and a model picked by hand in each (no auto-select). Other use cases run alone (`nextUseCases`). */
     multiSelectUseCases?: boolean;
     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<OutputKind, ModelOption[]>>;
-    /** The end user can pick several models, each producing its own result, with `modelIds`. */
+    /** The end user can pick several models, each producing its own result, with `modelIds`. With `multiSelectUseCases`, several per use case. */
     multiSelectModels?: boolean;
     modelIds?: string[];
     "onUpdate:modelIds"?: (ids: string[]) => void;
@@ -72,7 +73,7 @@ const props = withDefaults(
     models?: ModelOption[];
     modelId?: string | null;
     "onUpdate:modelId"?: (id: string | null) => void;
-    /** The model is chosen at submit: `useComposer` asks the reasoning model. Turning it on clears the pick. */
+    /** The model is chosen at submit: `useComposer` asks the reasoning model. Turning it on clears the pick. Ignored with `multiSelectUseCases`. */
     autoSelectModel?: boolean;
     /** An "Auto-select model" switch at the top of the Model menu, for the end user. */
     showAutoSelectToggle?: boolean;
@@ -166,11 +167,6 @@ const menuItems = computed(() =>
     canSelect: Boolean(props.onAttachMenuSelect),
   })
 );
-const modelMenuOptions = computed(() =>
-  props.multiSelectUseCases
-    ? { sections: view.value.modelSections.map((s) => ({ label: s.label, options: s.options })) }
-    : { options: view.value.modelSections[0]?.options }
-);
 const toMenuOption = (o: { value: string; label: string }) => ({ id: o.value, label: o.label });
 const voiceMenuOptions = computed(() =>
   view.value.voiceSections
@@ -181,7 +177,7 @@ const voiceMenuOptions = computed(() =>
 // Auto-select chooses at submit, so turning it on clears the current pick
 // and the trigger reads "Auto-select" until routing fills in the model.
 watch(
-  () => props.autoSelectModel,
+  () => view.value.autoSelectModel,
   (on, was) => {
     if (!on || was) return;
     if (view.value.multiModel) props["onUpdate:modelIds"]?.([]);
@@ -199,8 +195,8 @@ watch(
   }
 );
 
-function toggleModel(id: string) {
-  if (view.value.multiModel) props["onUpdate:modelIds"]?.(view.value.toggledModelIds(id));
+function pickModel(menu: ComposerView["modelMenus"][number], id: string) {
+  if (view.value.multiModel) props["onUpdate:modelIds"]?.(menu.next(id));
   else props["onUpdate:modelId"]?.(id);
 }
 
@@ -338,25 +334,26 @@ function onSubmitClick() {
           @remove="removeUseCase(u)"
         />
 
-        <!-- The auto-select switch lives inside the Model menu, so with it shown the trigger stays enabled: it's the only way back to the switch. -->
+        <!-- One Model menu, or one per use case with multi-use-case select. The auto-select switch lives inside each, so with it shown the trigger stays enabled: it's the only way back to the switch. -->
         <SearchMenu
+          v-for="menu in view.canPickModel ? view.modelMenus : []"
+          :key="menu.key"
           :placement="menuPlacement"
-          v-if="view.modelSections.length > 0 && view.canPickModel"
-          v-bind="modelMenuOptions"
-          :value="view.multiModel ? view.pickedModelIds : modelId"
-          :multiple="view.multiModel"
+          :options="menu.options"
+          :value="menu.value"
+          :multiple="menu.multiple"
           :toggle-header="
-            showAutoSelectToggle
-              ? { label: 'Auto-select model', value: autoSelectModel, onChange: (v: boolean) => props['onUpdate:autoSelectModel']?.(v) }
+            showAutoSelectToggle && view.offersAutoSelect
+              ? { label: 'Auto-select model', value: view.autoSelectModel, onChange: (v: boolean) => props['onUpdate:autoSelectModel']?.(v) }
               : undefined
           "
-          :trigger-label="view.modelTriggerLabel"
-          :menu-label="view.multiModel ? 'Select models' : 'Select model'"
+          :trigger-label="menu.triggerLabel"
+          :menu-label="menu.menuLabel"
           :searchable="false"
           trigger-variant="text"
-          :disabled="disabled || (autoSelectModel && !showAutoSelectToggle)"
-          :panel-width="showAutoSelectToggle ? 320 : undefined"
-          @select="toggleModel($event.id)"
+          :disabled="disabled || (view.autoSelectModel && !(showAutoSelectToggle && view.offersAutoSelect))"
+          :panel-width="showAutoSelectToggle && view.offersAutoSelect ? 320 : undefined"
+          @select="pickModel(menu, $event.id)"
         />
 
         <SearchMenu

package/src/index.ts

@@ -47,6 +47,8 @@ export {
   suggestedModels,
   promptWithGenres,
   checkSuggestedModels,
+  nextUseCases,
+  combinesWithOthers,
 } from "@chai-ui/core";
 export type {
   AudioUseCase,