@jskit-ai/assistant-voice 0.1.3 → 0.1.5

package/README.md

@@ -83,9 +83,45 @@ The host's `avatar` slot receives state, mouthLevel, mouthPose, avatar and bindi
 Opening a target does not start capture. Tap Talk for hands-free, or hold it for
 push-to-talk and release to send; connection setup is automatic.
 Pause finishes the current utterance, flushing the audio tail before muting.
-Completed words follow the captured review policy; resume opens a fresh recording.
+Completed words follow the captured review policy. Pending delivery does not disable
+the microphone: tap can resume the existing continuous capture or start another
+one while preserving the prior pending transcript. A busy Pause or hold release
+mutes newer capture and finishes it through the original owner after that prior
+admission settles. Resuming first keeps the capture open. No pending words are
+replaced or appended. The icon reflects actual unmuted capture, not readiness.
 Automatic sends keep the call layout fixed. A failed send exposes the retained
-transcript for review and retry with the same message identity. Captions,
+transcript for review and retry with the same message identity. An application
+can call `beginTranscriptEdit(messageId)` for its exact unsent preview; this
+retains the existing pending transcript and capture destination before cancelling
+only capture. `editTranscript(text, messageId)` updates that pending identity and
+`deliverTranscript()` keeps the original send/retry owner. Hands-free resumes
+through the existing pending-clear watcher after send/discard, not during editing.
+An adapter's `previewMessage.actions` may project `editing`, `update(id, text)`,
+`send(id)`, `canSend` and `sending` alongside its original ×/edit actions. The
+standard transcript uses the same review textarea inside that preview bubble,
+including an empty editor, and reuses its existing action row for pending Send.
+A matching canonical user with `receipt: false` is still unadmitted: it does not
+clear pending words, forbid Edit or acknowledge a speech invitation. Confirmed
+readback (an absent flag or `receipt: true`) retains the original identity-based
+acknowledgement. For a known failed local delivery, a host can cancel that exact
+entry through the original delivery owner only upon explicit Edit, then author
+fresh edited text and intent on Send. Plain Retry retains its original payload;
+uncertain, accepted and sending entries remain fenced.
+When continuous recognition has newer words while an earlier pending send fails,
+both identities remain in their original pending/recording owners. Hosts can
+project these two existing snapshots through `previewMessages`, deduplicated by
+ID, while retaining the singular `previewMessage` contract. `canTakeTranscript(id)`
+checks either exact existing identity with the original admission guards. The
+newer capture is discardable, but cannot replace the occupied pending editor.
+Editing the earlier transcript pauses the newer recording through the original
+mute owner, retaining its words, ID, focus and endpoint. Transient
+`editPausedCaptureId` on the pending transcript owns only this pause; an explicit
+microphone choice supersedes it. Original pending resolution releases only the
+matching Edit-owned pause, and the existing endpoint watcher handles newer words.
+No additional transcript queue, playback owner or capture process is created.
+The app must retain current-target and uncertain-admission guards. Controls use
+`reviewInTranscript` only while that preview is projected, suppressing a duplicate
+inline review; standalone voice retains its original review fallback. Captions,
 review, explicit microphone/sound controls and bounded reconnection share one
 session. Opening the same ID reveals it. Switching targets releases the previous
 audio first; unfinished words require completion or explicit discard. A pending

package/examples/conversation/App.vue

@@ -10,6 +10,7 @@ const closed = ref([]);
 const views = new Map();
 const error = ref("");
 const avatarSize = ref("compact");
+const voicePresentation = ref("dialog");
 const acquireConversation = useAssistantConversationFactory();
 const controller = createVoiceConversationController({ connectSpeech: binding => binding.socketUrl });
 async function openText(id) {
@@ -91,7 +92,7 @@ onScopeDispose(() => { void controller.dispose(); });
         </section>
       </div>
     </main>
-    <VoiceConversationHost v-model:avatar-size="avatarSize" :controller="controller" />
+    <VoiceConversationHost v-model:avatar-size="avatarSize" :controller="controller" :presentation="voicePresentation" />
     <ShellErrorHost />
   </v-app>
 </template>

package/examples/conversation/package.json

@@ -9,14 +9,14 @@
   },
   "dependencies": {
     "@fastify/websocket": "^11.2.0",
-    "@jskit-ai/assistant-core": "0.1.203",
-    "@jskit-ai/assistant-runtime": "0.1.196",
-    "@jskit-ai/assistant-voice": "0.1.3",
-    "@jskit-ai/connectors-catalog": "0.1.42",
-    "@jskit-ai/http-runtime": "0.1.223",
-    "@jskit-ai/kernel": "0.1.225",
-    "@jskit-ai/realtime": "0.1.222",
-    "@jskit-ai/shell-web": "0.1.229",
+    "@jskit-ai/assistant-core": "0.1.205",
+    "@jskit-ai/assistant-runtime": "0.1.198",
+    "@jskit-ai/assistant-voice": "0.1.5",
+    "@jskit-ai/connectors-catalog": "0.1.44",
+    "@jskit-ai/http-runtime": "0.1.225",
+    "@jskit-ai/kernel": "0.1.227",
+    "@jskit-ai/realtime": "0.1.224",
+    "@jskit-ai/shell-web": "0.1.231",
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-query": "^5.90.5",
     "fastify": "^5.8.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-voice",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description": "Duplex voice conversations with application-owned targets, authorization and speech services.",
   "scripts": {
@@ -18,7 +18,7 @@
     "examples"
   ],
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.203",
+    "@jskit-ai/assistant-core": "0.1.205",
     "@mdi/js": "^7.4.47",
     "ws": "^8.20.1"
   },

package/src/client/ConversationDialog.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { mdiClose, mdiMessageTextOutline, mdiMicrophone, mdiMinus } from "@mdi/js";
 import { useDisplay } from "vuetify";
+import { VCard, VDialog } from "vuetify/components";
+import { computed } from "vue";
 
 const { xs } = useDisplay();
 
@@ -11,7 +13,16 @@ const props = defineProps({
   mode: { type: String, default: "talk" },
   showModes: Boolean,
   minimizable: Boolean,
-  closeLabel: { type: String, default: "Close conversation" }
+  closeLabel: { type: String, default: "Close conversation" },
+  presentation: { type: String, default: "dialog", validator: value => ["dialog", "inline"].includes(value) }
+});
+const dialogProps = computed(() => props.presentation === "inline" ? {} : {
+  activator: props.activator, openOnClick: false, modelValue: props.modelValue,
+  transition: false, fullscreen: xs.value, width: xs.value ? "100%" : 620,
+  maxWidth: xs.value ? "100%" : "calc(100% - 32px)", height: xs.value ? "100%" : 860,
+  maxHeight: xs.value ? "100%" : "calc(100% - 32px)",
+  contentProps: { style: { margin: xs.value ? 0 : "16px" } },
+  "aria-hidden": !props.modelValue
 });
 const emit = defineEmits(["update:modelValue", "update:mode", "minimize"]);
 let dismissedFromActivator = false;
@@ -29,18 +40,16 @@ function updateOpen(value) {
 </script>
 
 <template>
-  <v-dialog
-    class="conversation-dialog" :activator="activator" :open-on-click="false"
-    :model-value="modelValue" :transition="false" :fullscreen="xs" :width="xs ? '100%' : 620" :max-width="xs ? '100%' : 'calc(100% - 32px)'"
-    :height="xs ? '100%' : 860" :max-height="xs ? '100%' : 'calc(100% - 32px)'"
-    :content-props="{ style: { margin: xs ? 0 : '16px' } }" :aria-label="`${title} conversation`" :aria-hidden="!modelValue"
+  <component
+    :is="presentation === 'inline' ? 'section' : VDialog" v-bind="dialogProps"
+    class="conversation-dialog" :class="{ 'conversation-dialog--inline': presentation === 'inline' }" :aria-label="`${title} conversation`"
     @click:outside="outsideClick" @update:model-value="updateOpen"
   >
-    <v-card class="conversation-dialog__surface" :rounded="xs ? 0 : 'lg'">
-      <v-card-title class="conversation-dialog__title text-title-large">
+    <component :is="presentation === 'inline' ? 'div' : VCard" class="conversation-dialog__surface" :rounded="presentation === 'inline' ? undefined : xs ? 0 : 'lg'">
+      <v-card-title v-if="presentation !== 'inline'" class="conversation-dialog__title text-title-large">
         <span :title="title">{{ title }}</span>
         <slot name="header-actions" />
-        <v-btn v-if="minimizable" :icon="mdiMinus" variant="text" aria-label="Minimize conversation" title="Minimize conversation" @click="$emit('minimize')" />
+        <v-btn v-if="minimizable" :icon="mdiMinus" variant="text" aria-label="Minimize conversation" title="Minimize conversation" @click="$emit('minimize', $event)" />
         <v-btn :icon="mdiClose" variant="text" :aria-label="closeLabel" :title="closeLabel" @click="$emit('update:modelValue', false)" />
       </v-card-title>
       <v-tabs v-if="showModes" :model-value="mode" class="conversation-dialog__tabs" grow aria-label="Conversation mode" @update:model-value="$emit('update:mode', $event)">
@@ -48,8 +57,8 @@ function updateOpen(value) {
         <v-tab value="text" :prepend-icon="mdiMessageTextOutline">Text</v-tab>
       </v-tabs>
       <div class="conversation-dialog__body"><slot /></div>
-    </v-card>
-  </v-dialog>
+    </component>
+  </component>
 </template>
 
 <style scoped>
@@ -57,11 +66,13 @@ function updateOpen(value) {
 .conversation-dialog :deep(.v-overlay__scrim) { transition: none; opacity: var(--v-overlay-opacity); }
 .conversation-dialog:not(.v-overlay--active) :deep(.v-overlay__scrim) { display: none; }
 .conversation-dialog__surface { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
+.conversation-dialog--inline { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.conversation-dialog--inline .conversation-dialog__surface { height: auto; }
 .conversation-dialog__title { display: flex; align-items: center; flex: 0 0 64px; height: 64px; gap: 8px; padding: 8px 16px; }
 .conversation-dialog__title > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .conversation-dialog__tabs { flex: 0 0 48px; height: 48px; }
 .conversation-dialog__body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
 @media (max-width: 599px) {
-  .conversation-dialog__surface { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
+  .conversation-dialog:not(.conversation-dialog--inline) .conversation-dialog__surface { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
 }
 </style>

package/src/client/VoiceConversation.vue

@@ -1,17 +1,23 @@
 <script setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { AssistantConversationElement } from "@jskit-ai/assistant-core/client/conversation";
 import VoiceAvatar from "./VoiceAvatar.vue";
 import VoiceConversationControls from "./VoiceConversationControls.vue";
+import { mdiMicrophone, mdiVolumeHigh } from "@mdi/js";
 
 const props = defineProps({
   session: { type: Object, required: true }, disabled: { type: Boolean, default: false },
   adapter: { type: Object, default: null },
+  showAvatar: { type: Boolean, default: true },
   avatarSize: { type: String, default: "compact" }
 });
 defineEmits(["update:avatarSize"]);
 const { targetLabel, voice, microphoneMuted, heldTranscript, pendingTranscript, sending,
   avatarVisual, callAudioLevel, voiceWords, voiceAnswer } = props.session;
+const presentationAdapter = computed(() => props.adapter && ({
+  ...props.adapter,
+  composer: { ...props.adapter.composer, canSend: props.adapter.composer?.canSend && !props.session.composerBlocked.value }
+}));
 const toolsTarget = ref(null);
 const voiceWordsTarget = ref(null);
 const voiceAnswerTarget = ref(null);
@@ -27,19 +33,37 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
 
 <template>
   <fieldset v-if="adapter" class="assistant-voice-conversation" :disabled="disabled">
-  <AssistantConversationElement :adapter="adapter" :avatar-size="avatarSize" @update:avatar-size="$emit('update:avatarSize', $event)">
-    <template #avatar="size"><slot name="avatar" v-bind="avatarVisual" :size="size.size" :height="size.height"><VoiceAvatar v-bind="avatarVisual" /></slot></template>
-    <template #composer-tools><div ref="toolsTarget" class="assistant-voice-conversation__tools" /></template>
-    <template #composer-feedback>
-      <VoiceConversationControls :session="session" :disabled="disabled" compact :tools-target="toolsTarget">
-        <template #work-control><slot name="work-control" /></template>
-      </VoiceConversationControls>
-    </template>
-  </AssistantConversationElement>
+    <AssistantConversationElement :adapter="presentationAdapter" :avatar-size="avatarSize" @update:avatar-size="$emit('update:avatarSize', $event)">
+      <template v-if="showAvatar" #avatar="size">
+        <slot name="avatar" v-bind="avatarVisual" :size="size.size" :height="size.height">
+          <VoiceAvatar v-bind="avatarVisual" />
+        </slot>
+      </template>
+      <template v-if="showAvatar" #avatar-tools><div ref="toolsTarget" class="assistant-voice-conversation__tools" /></template>
+      <template #avatar-control="scope">
+        <slot name="avatar-control" v-bind="scope">
+          <span v-if="scope.size === 'hidden' && voice.listening.value && !microphoneMuted" role="img" aria-label="Listening" title="Listening">
+            <v-icon :icon="mdiMicrophone" size="20" aria-hidden="true" />
+          </span>
+          <span v-if="scope.size === 'hidden' && voice.speaking.value" role="img" aria-label="Speaking" title="Speaking">
+            <v-icon :icon="mdiVolumeHigh" size="20" aria-hidden="true" />
+          </span>
+        </slot>
+      </template>
+      <template #composer-feedback>
+        <VoiceConversationControls :session="session" :disabled="disabled" compact :icon-only="showAvatar" :tools-target="toolsTarget" :review-in-transcript="Boolean(presentationAdapter?.conversation?.previewMessage)">
+          <template #work-control><slot name="work-control" /></template>
+          <template #settings-control><slot name="settings-control" /></template>
+        </VoiceConversationControls>
+      </template>
+    </AssistantConversationElement>
   </fieldset>
   <fieldset v-else class="assistant-voice" :disabled="disabled">
-    <section class="assistant-voice__call" :aria-label="`${targetLabel} voice chat controls`">
-      <div class="assistant-voice__call-body">
+    <section
+      class="assistant-voice__call" :class="{ 'assistant-voice__call--without-avatar': !showAvatar }"
+      :aria-label="`${targetLabel} voice chat controls`"
+    >
+      <div v-if="showAvatar" class="assistant-voice__call-body">
         <div class="assistant-voice__call-portrait" :style="{ '--call-audio-scale': 1 + callAudioLevel * .16 }" aria-hidden="true">
           <slot name="avatar" v-bind="avatarVisual"><VoiceAvatar v-bind="avatarVisual" /></slot>
         </div>
@@ -54,7 +78,10 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
           <p class="assistant-voice__caption-text text-body-medium">{{ voiceAnswer }}</p>
         </section>
       </div>
-      <VoiceConversationControls :session="session" :disabled="disabled"><template #work-control><slot name="work-control" /></template></VoiceConversationControls>
+      <VoiceConversationControls :session="session" :disabled="disabled">
+        <template #work-control><slot name="work-control" /></template>
+        <template #settings-control><slot name="settings-control" /></template>
+      </VoiceConversationControls>
     </section>
   </fieldset>
 </template>
@@ -64,12 +91,11 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
 .assistant-voice-conversation__tools { display: flex; flex-wrap: wrap; gap: 4px; }
 .assistant-voice { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border: 0; padding: 0; margin: 0; min-width: 0; }
 .assistant-voice__call { width: 100%; flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) minmax(144px, 30%) auto; }
+.assistant-voice__call--without-avatar { grid-template-rows: minmax(144px, 1fr) auto; }
 .assistant-voice__call-body { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 16px 0; text-align: center; }
 .assistant-voice__call-portrait { position: relative; height: min(240px, calc(100% - 64px)); aspect-ratio: 1; max-width: 100%; margin: 8px auto; isolation: isolate; }
 .assistant-voice__call-portrait::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: rgba(var(--v-theme-primary), .12); transform: scale(var(--call-audio-scale)); transition: transform 80ms linear; z-index: -1; }
 .assistant-voice__call-portrait :deep(svg) { width: 100%; height: 100%; }
-.assistant-voice__call-status-row { display: flex; flex: 0 0 48px; justify-content: center; align-items: center; gap: 8px; height: 48px; }
-.assistant-voice__call-status-row p { margin: 0; max-height: 48px; overflow: hidden; }
 .assistant-voice__captions { min-height: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px; }
 .assistant-voice__caption { min-height: 0; padding: 8px 12px; border-radius: 12px; background: rgba(var(--v-theme-on-surface), .04); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; }
 .assistant-voice__caption > strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

package/src/client/VoiceConversationControls.vue

@@ -3,17 +3,31 @@ import { computed, useId } from "vue";
 import { mdiMicrophone, mdiMicrophoneOff, mdiStop, mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
 import { useVoiceLauncher } from "./voiceLauncher.js";
 
-const props = defineProps({ session: { type: Object, required: true }, disabled: { type: Boolean, default: false }, compact: { type: Boolean, default: false }, toolsTarget: { type: Object, default: null } });
+const props = defineProps({
+  session: { type: Object, required: true },
+  disabled: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  iconOnly: { type: Boolean, default: false },
+  reviewInTranscript: { type: Boolean, default: false },
+  toolsTarget: { type: Object, default: null },
+  feedbackTarget: { type: Object, default: null }
+});
 const {
   targetLabel, voice, error, microphoneMuted, live, starting, callMode,
   callStatus, speechActive, heldTranscript,
   capturing, pendingTranscript, pushHolding, sending,
-  stopSpeech, startPushToTalk, finishPushToTalk, cancelPushToTalk, toggleHandsFree, readAloud, toggleReadAloud,
+  stopSpeech, startPushToTalk, finishPushToTalk, cancelPushToTalk, toggleHandsFree, readAloud, toggleReadAloud, enableSound,
   deliverTranscript, discardHeldRecording, editTranscript
 } = props.session;
-const handsFreeListening = computed(() => live.value && callMode.value === "hands-free" && !microphoneMuted.value);
-const canTalk = computed(() => !props.disabled && !sending.value && !pendingTranscript.value &&
-  (!capturing.value || voice.listening.value || pushHolding.value || starting.value));
+const controlStatus = computed(() => {
+  if (props.iconOnly && voice.listening.value && !starting.value && !error.value && !voice.error.value) return "";
+  if (!props.compact || !props.session.hasUnsentSpeech.value) return callStatus.value;
+  if (pendingTranscript.value) return props.reviewInTranscript ? "" : "Send or discard speech to send text.";
+  if (live.value && callMode.value === "hands-free" && voice.listening.value && !microphoneMuted.value) return "Listening…";
+  return voice.listening.value ? "Recording · finish speech to send text." : "Finish speech to send text.";
+});
+const handsFreeListening = computed(() => live.value && callMode.value === "hands-free" && voice.listening.value && !microphoneMuted.value);
+const canTalk = computed(() => !props.disabled && (!capturing.value || voice.listening.value || pushHolding.value || starting.value));
 const talkLabel = computed(() => starting.value ? "Connecting…" : pushHolding.value ? "Release to send" : handsFreeListening.value ? "Pause" : "Talk");
 const gestureHint = useId();
 const gesture = useVoiceLauncher({
@@ -26,49 +40,83 @@ const gesture = useVoiceLauncher({
 
 <template>
   <fieldset class="assistant-voice-controls" :class="{ 'assistant-voice-controls--compact': compact }" :disabled="disabled">
-    <p v-if="error || voice.error.value" class="assistant-voice__error" role="alert">{{ error || voice.error.value }}</p>
-    <p v-if="callStatus" class="assistant-voice-controls__status text-body-small" role="status">{{ callStatus }}</p>
-    <p v-if="compact && heldTranscript && !pendingTranscript" class="assistant-voice-controls__provisional" role="status" aria-label="Recognized words">Not sent · {{ heldTranscript }}</p>
-      <section v-if="pendingTranscript && (pendingTranscript.reviewBeforeSend || !sending)" class="assistant-voice__review" aria-label="Review voice message">
-        <v-textarea :model-value="pendingTranscript.text" label="Review your message" :disabled="sending" :density="compact ? 'compact' : 'default'" :rows="compact ? 1 : 2" :max-rows="compact ? 2 : 3" auto-grow hide-details @update:model-value="editTranscript" />
-        <div class="assistant-voice__review-actions">
-          <v-btn :disabled="sending" min-height="48" @click="discardHeldRecording">Discard</v-btn>
-          <v-btn :disabled="sending || !pendingTranscript.text.trim()" min-height="48" color="primary" @click="deliverTranscript">{{ sending ? 'Sending…' : 'Send' }}</v-btn>
-        </div>
-      </section>
+    <Teleport :to="feedbackTarget" :disabled="!feedbackTarget">
+      <fieldset class="assistant-voice-controls__feedback" :class="{ 'assistant-voice-controls__feedback--compact': compact }" :disabled="disabled">
+        <p
+          v-if="error || voice.error.value" class="assistant-voice__error"
+          :class="{ 'text-body-small': compact }" role="alert"
+        >
+          {{ error || voice.error.value }}
+        </p>
+        <p v-if="controlStatus" class="assistant-voice-controls__status text-body-small" role="status" :title="callStatus">{{ controlStatus }}</p>
+        <p v-if="compact && !reviewInTranscript && heldTranscript && !pendingTranscript" class="assistant-voice-controls__provisional" role="status" aria-label="Recognized words">Not sent · {{ heldTranscript }}</p>
+        <p v-if="readAloud && voice.playbackBlocked?.value" class="assistant-voice-controls__status" role="status">Sound is blocked. Enable sound to hear future replies.</p>
+        <v-btn v-if="readAloud && voice.playbackBlocked?.value" min-height="48" @click="enableSound">Enable sound</v-btn>
+        <section v-if="!reviewInTranscript && pendingTranscript && (pendingTranscript.reviewBeforeSend || !sending)" class="assistant-voice__review" aria-label="Review voice message">
+          <v-textarea
+            class="assistant-voice__review-input" :model-value="pendingTranscript.text" label="Review your message" :disabled="sending"
+            :density="compact ? 'compact' : 'default'" :rows="compact ? 1 : 2" :max-rows="compact ? 2 : 3"
+            auto-grow hide-details @update:model-value="editTranscript"
+          />
+          <div class="assistant-voice__review-actions">
+            <v-btn :disabled="sending" min-height="48" @click="discardHeldRecording">Discard</v-btn>
+            <v-btn :disabled="sending || !pendingTranscript.text.trim()" min-height="48" color="primary" @click="deliverTranscript">{{ sending ? 'Sending…' : 'Send' }}</v-btn>
+          </div>
+        </section>
+      </fieldset>
+    </Teleport>
     <Teleport :to="toolsTarget" :disabled="!toolsTarget">
-      <fieldset class="assistant-voice-controls__tools" :class="{ 'assistant-voice-controls__tools--compact': compact }" :disabled="disabled" :aria-label="`${targetLabel} voice chat controls`">
+      <fieldset class="assistant-voice-controls__tools" :class="{ 'assistant-voice-controls__tools--compact': compact, 'assistant-voice-controls__tools--icons': iconOnly }" :disabled="disabled" :aria-label="`${targetLabel} voice chat controls`">
+        <div v-if="compact || iconOnly || speechActive" class="assistant-voice-controls__stop">
           <v-btn v-if="speechActive" :icon="mdiStop" variant="text" min-width="48" min-height="48" :aria-label="`Stop ${targetLabel} speaking`" title="Stop speaking" @click="stopSpeech" />
-          <slot name="work-control" />
-      <div class="assistant-voice__talk-action">
-        <v-btn
-          class="assistant-voice__talk" color="primary" :variant="handsFreeListening ? 'tonal' : 'flat'" :min-height="compact ? 48 : 64" rounded="xl"
-          :prepend-icon="voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff" :aria-pressed="handsFreeListening || pushHolding" :aria-describedby="gestureHint"
-          :disabled="!canTalk"
-          @pointerdown="gesture.pointerDown" @pointerup="gesture.pointerUp" @pointercancel="gesture.cancel" @lostpointercapture="gesture.cancel"
-          @keydown.space.prevent="gesture.keyDown" @keyup.space.prevent="gesture.keyUp"
-          @keydown.enter.prevent="gesture.keyDown" @keyup.enter.prevent="gesture.keyUp" @blur="gesture.cancel" @contextmenu.prevent @click="gesture.click"
-        >
-          {{ talkLabel }}
-        </v-btn>
-        <v-btn
-          :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" :aria-pressed="readAloud" variant="tonal" :min-height="compact ? 48 : 64" :min-width="compact ? 48 : 64" rounded="xl"
-          :aria-label="readAloud ? `Turn ${targetLabel} read-aloud off` : `Read ${targetLabel} answers aloud`"
-          :title="readAloud ? 'Spoken replies on' : 'Spoken replies off'" @click="toggleReadAloud"
-        />
-        <p :id="gestureHint" class="text-body-small text-medium-emphasis">{{ handsFreeListening ? 'Tap to pause · hold to speak' : 'Tap for hands-free · hold to speak' }}</p>
-      </div>
+        </div>
+        <slot name="work-control" />
+        <div class="assistant-voice__talk-action">
+          <v-btn
+            class="assistant-voice__talk" color="primary" :variant="iconOnly ? 'text' : handsFreeListening ? 'tonal' : 'flat'" :min-height="iconOnly ? 44 : compact ? 48 : 64" rounded="xl"
+            :icon="iconOnly ? (voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff) : undefined"
+            :prepend-icon="iconOnly ? undefined : (voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff)"
+            :aria-label="iconOnly ? talkLabel : undefined" title="click or long press to talk"
+            :aria-pressed="handsFreeListening || pushHolding" :aria-describedby="gestureHint"
+            :disabled="!canTalk" :slim="compact || iconOnly"
+            :width="iconOnly ? 40 : compact ? 148 : undefined" :min-width="iconOnly ? 40 : compact ? 148 : undefined"
+            @pointerdown="gesture.pointerDown" @pointerup="gesture.pointerUp" @pointercancel="gesture.cancel" @lostpointercapture="gesture.cancel"
+            @keydown.space.prevent="gesture.keyDown" @keyup.space.prevent="gesture.keyUp"
+            @keydown.enter.prevent="gesture.keyDown" @keyup.enter.prevent="gesture.keyUp" @blur="gesture.cancel" @contextmenu.prevent @click="gesture.click"
+          >
+            <span v-if="iconOnly" class="assistant-voice-controls__icon-disc"><v-icon size="20" :icon="voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff" /></span>
+            <template v-else>{{ talkLabel }}</template>
+          </v-btn>
+          <v-btn
+            :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" :aria-pressed="readAloud" :variant="iconOnly ? 'text' : 'tonal'" :color="iconOnly ? 'primary' : undefined" :min-height="iconOnly ? 44 : compact ? 48 : 64" :width="iconOnly ? 40 : undefined" :min-width="iconOnly ? 40 : compact ? 48 : 64" rounded="xl"
+            :aria-label="readAloud ? `Turn ${targetLabel} read-aloud off` : `Read ${targetLabel} answers aloud`"
+            :title="readAloud ? 'Spoken replies on' : 'Spoken replies off'" @click="toggleReadAloud"
+          >
+            <template v-if="iconOnly" #default>
+              <span class="assistant-voice-controls__icon-disc"><v-icon size="20" :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" /></span>
+            </template>
+          </v-btn>
+          <slot name="settings-control" />
+          <p :id="gestureHint" class="text-body-small text-medium-emphasis">{{ handsFreeListening ? 'Tap to pause · hold to speak' : 'Tap for hands-free · hold to speak' }}</p>
+        </div>
       </fieldset>
     </Teleport>
   </fieldset>
 </template>
 
 <style scoped>
-.assistant-voice-controls, .assistant-voice-controls__tools { border: 0; padding: 0; margin: 0; min-width: 0; }
+.assistant-voice-controls, .assistant-voice-controls__feedback, .assistant-voice-controls__tools { border: 0; padding: 0; margin: 0; min-width: 0; }
 .assistant-voice-controls { flex: 0 0 auto; }
 .assistant-voice-controls--compact { flex: 1 1 100%; width: 100%; }
 .assistant-voice-controls__tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
 .assistant-voice-controls__status { text-align: center; margin: 0; }
+.assistant-voice-controls__feedback--compact > .assistant-voice-controls__status { min-height: 1lh; }
+.assistant-voice-controls__stop { display: contents; }
+.assistant-voice-controls__tools--compact .assistant-voice-controls__stop {
+  display: block;
+  flex: 0 0 48px;
+  height: 48px;
+}
 .assistant-voice-controls__provisional { margin: 0; max-height: 3rem; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
 .assistant-voice__talk-action { width: min(288px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 8px; padding: 16px; }
 .assistant-voice__talk { touch-action: none; user-select: none; -webkit-touch-callout: none; }
@@ -76,10 +124,24 @@ const gesture = useVoiceLauncher({
 .assistant-voice__review { flex: 0 0 auto; max-height: 160px; overflow-y: auto; padding: 8px 16px; }
 .assistant-voice__review-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .assistant-voice__error { padding: 8px 16px; color: rgb(var(--v-theme-error)); }
-.assistant-voice-controls__tools--compact { justify-content: flex-start; gap: 4px; }
-.assistant-voice-controls__tools--compact .assistant-voice__talk-action { display: flex; padding: 0; width: auto; gap: 4px; }
+.assistant-voice-controls__tools--compact { justify-content: flex-start; gap: 2px; }
+.assistant-voice-controls__tools--compact .assistant-voice__talk-action { display: flex; padding: 0; width: auto; gap: 0; }
 .assistant-voice-controls__tools--compact .assistant-voice__talk-action p { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-.assistant-voice-controls--compact .assistant-voice__review { max-height: 128px; padding: 0; }
-.assistant-voice-controls--compact .assistant-voice__error { margin: 0; padding: 0; }
+.assistant-voice-controls__tools--icons { position: relative; width: max-content; flex-wrap: nowrap; justify-content: flex-end; gap: 0; }
+.assistant-voice-controls__tools--icons .assistant-voice-controls__stop { position: absolute; right: calc(100% + 2px); top: 0; width: 48px; height: 48px; pointer-events: none; }
+.assistant-voice-controls__tools--icons .assistant-voice-controls__stop > .v-btn { pointer-events: auto; }
+.assistant-voice-controls__icon-disc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--v-theme-primary), .12); }
+.assistant-voice-controls__tools--icons .assistant-voice__talk-action { display: flex; padding: 0; width: auto; gap: 0; }
+.assistant-voice-controls__tools--icons .assistant-voice__talk-action p { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.assistant-voice-controls__feedback--compact .assistant-voice__review {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  max-height: 128px;
+  padding: 0;
+}
+.assistant-voice-controls__feedback--compact .assistant-voice__review-input { flex: 1 1 auto; min-width: 0; }
+.assistant-voice-controls__feedback--compact .assistant-voice__review-actions { flex: 0 0 auto; }
+.assistant-voice-controls__feedback--compact .assistant-voice__error { margin: 0; padding: 0; }
 @media (max-height: 650px) { .assistant-voice__talk-action { padding-top: 8px; } }
 </style>

package/src/client/VoiceConversationHost.vue

@@ -1,9 +1,14 @@
 <script setup>
-import { mdiCog, mdiHeadset, mdiStop } from "@mdi/js";
+import { mdiHeadset, mdiStop } from "@mdi/js";
 import ConversationDialog from "./ConversationDialog.vue";
 import VoiceConversation from "./VoiceConversation.vue";
+import VoiceConversationSettings from "./VoiceConversationSettings.vue";
 
-const props = defineProps({ controller: { type: Object, required: true }, activator: { type: Object, default: null }, avatarSize: { type: String, default: "compact" } });
+const props = defineProps({
+  controller: { type: Object, required: true }, activator: { type: Object, default: null },
+  avatarSize: { type: String, default: "hidden" },
+  presentation: { type: String, default: "dialog", validator: value => ["dialog", "inline"].includes(value) }
+});
 defineEmits(["update:avatarSize"]);
 const state = props.controller.state;
 async function invoke(operation) {
@@ -20,29 +25,16 @@ async function openText() {
 
 <template>
   <ConversationDialog
-    v-if="state.session" :model-value="state.visible" :activator="activator" :title="state.binding.label || 'Assistant'" mode="talk" :show-modes="Boolean(state.binding.openText)"
-    minimizable close-label="Close voice chat" @minimize="controller.minimize()" @update:model-value="invoke(() => controller.end({ discard: true }))"
+    v-if="state.session" :model-value="state.visible" :activator="activator" :presentation="presentation"
+    :title="state.binding.label || 'Assistant'" mode="talk"
+    :show-modes="Boolean(state.binding.openText && !state.binding.adapter)"
+    :minimizable="presentation === 'dialog'" close-label="Close voice chat" @minimize="controller.minimize()" @update:model-value="invoke(() => controller.end({ discard: true }))"
     @update:mode="value => value === 'text' && invoke(openText)"
   >
-    <template #header-actions>
-      <v-menu :close-on-content-click="false" location="bottom end" @update:model-value="open => open && !$slots.settings && invoke(() => state.session.voice.connect())">
-        <template #activator="{ props: settingsButton }">
-          <v-btn v-bind="settingsButton" :icon="mdiCog" variant="text" aria-label="Voice settings" title="Voice settings" />
-        </template>
-        <v-card class="voice-host__settings" role="region" aria-label="Voice settings">
-          <v-card-text>
-            <slot name="settings" :voice="state.session.voice">
-              <v-select
-                v-model="state.session.voice.selectedVoice.value"
-                :items="state.session.voice.availableVoices.value" item-title="label" item-value="id"
-                :disabled="state.session.voice.availableVoices.value.length < 2"
-                label="Speaking voice" density="comfortable"
-                hint="Applies to the next spoken reply" persistent-hint
-              />
-            </slot>
-          </v-card-text>
-        </v-card>
-      </v-menu>
+    <template v-if="!state.binding.adapter" #header-actions>
+      <VoiceConversationSettings :voice="state.session.voice" @error="state.error = $event.message">
+        <template v-if="$slots.settings" #default="settings"><slot name="settings" v-bind="settings" /></template>
+      </VoiceConversationSettings>
     </template>
     <v-alert v-if="state.error" type="error" density="compact" role="alert">{{ state.error }}</v-alert>
     <v-alert v-if="state.nextTarget" type="info" class="voice-host__switch">
@@ -55,16 +47,26 @@ async function openText() {
     </v-alert>
     <div class="voice-host__body">
       <slot name="conversation" :binding="state.binding" :session="state.session" :disabled="state.busy">
-      <VoiceConversation :key="state.binding.id" :session="state.session" :disabled="state.busy" :adapter="state.binding.adapter || null" :avatar-size="avatarSize" @update:avatar-size="$emit('update:avatarSize', $event)">
-        <template v-if="$slots.avatar" #avatar="visual"><slot name="avatar" v-bind="visual" :binding="state.binding" /></template>
-        <template #work-control>
-          <v-btn v-if="state.binding.cancelWork && state.binding.state.status === 'working'" :disabled="state.busy" :icon="mdiStop" variant="text" aria-label="Stop agent work" title="Stop agent work" @click="invoke(state.binding.cancelWork)" />
-        </template>
-      </VoiceConversation>
+        <VoiceConversation
+          :key="state.binding.id" :session="state.session" :disabled="state.busy"
+          :adapter="state.binding.adapter || null" :show-avatar="state.binding.showAvatar !== false"
+          :avatar-size="avatarSize" @update:avatar-size="$emit('update:avatarSize', $event)"
+        >
+          <template v-if="$slots.avatar" #avatar="visual"><slot name="avatar" v-bind="visual" :binding="state.binding" /></template>
+          <template v-if="$slots['avatar-control']" #avatar-control="scope"><slot name="avatar-control" v-bind="scope" :binding="state.binding" :session="state.session" /></template>
+          <template v-if="presentation === 'inline' || state.binding.adapter" #settings-control>
+            <VoiceConversationSettings :voice="state.session.voice" compact @error="state.error = $event.message">
+              <template v-if="$slots.settings" #default="settings"><slot name="settings" v-bind="settings" /></template>
+            </VoiceConversationSettings>
+          </template>
+          <template #work-control>
+            <v-btn v-if="state.binding.cancelWork && state.binding.state.status === 'working'" :disabled="state.busy" :icon="mdiStop" variant="text" aria-label="Stop agent work" title="Stop agent work" @click="invoke(state.binding.cancelWork)" />
+          </template>
+        </VoiceConversation>
       </slot>
     </div>
   </ConversationDialog>
-  <template v-if="state.session && !state.visible">
+  <template v-if="presentation === 'dialog' && state.session && !state.visible">
     <slot v-if="$slots.reopen" name="reopen" :controller="controller" />
     <v-btn v-else class="voice-host__reopen" color="primary" :prepend-icon="mdiHeadset" min-height="56" @click="controller.reveal()">
       {{ state.binding.label || 'Assistant' }} · Voice chat
@@ -76,6 +78,5 @@ async function openText() {
 .voice-host__body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
 .voice-host__switch-actions { display: flex; flex-wrap: wrap; gap: 4px; }
 .voice-host__switch { flex: 0 0 auto; }
-.voice-host__settings { width: 320px; max-width: calc(100vw - 32px); }
 .voice-host__reopen { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); z-index: 1900; }
 </style>