2:I[7012,["4765","static/chunks/4765-f5afdf8061f456f3.js","9856","static/chunks/9856-3b185291364d9bef.js","6687","static/chunks/app/docs/%5B...slug%5D/page-e07536548216bee4.js"],"MarkdownRenderer"]
4:I[9856,["4765","static/chunks/4765-f5afdf8061f456f3.js","9856","static/chunks/9856-3b185291364d9bef.js","6687","static/chunks/app/docs/%5B...slug%5D/page-e07536548216bee4.js"],""]
5:I[4126,[],""]
7:I[9630,[],""]
8:I[4278,["9856","static/chunks/9856-3b185291364d9bef.js","8172","static/chunks/8172-b3a2d6fe4ae10d40.js","3185","static/chunks/app/layout-2814fa5d15b84fe4.js"],"HeadingProvider"]
9:I[1476,["9856","static/chunks/9856-3b185291364d9bef.js","8172","static/chunks/8172-b3a2d6fe4ae10d40.js","3185","static/chunks/app/layout-2814fa5d15b84fe4.js"],"Header"]
a:I[3167,["9856","static/chunks/9856-3b185291364d9bef.js","8172","static/chunks/8172-b3a2d6fe4ae10d40.js","3185","static/chunks/app/layout-2814fa5d15b84fe4.js"],"Sidebar"]
b:I[7409,["9856","static/chunks/9856-3b185291364d9bef.js","8172","static/chunks/8172-b3a2d6fe4ae10d40.js","3185","static/chunks/app/layout-2814fa5d15b84fe4.js"],"PageFrame"]
3:T1ead,
# Thinking Tone Settings
Voice Mode v4.1 introduces multi-modal feedback during AI processing to keep users informed that the system is working.
## Overview
When the AI is processing a request (thinking), users can receive feedback through:
1. **Audio tones**: Subtle sounds generated via Web Audio API
2. **Visual indicators**: Animated UI elements
3. **Haptic feedback**: Vibration patterns on mobile devices
All feedback modalities are optional and user-configurable.
## Audio Feedback
### Tone Presets
| Preset | Description | Duration | Frequency |
| ------------- | ---------------------------- | -------- | --------- |
| `gentle_beep` | Soft sine wave at A4 (440Hz) | 150ms | Every 3s |
| `soft_chime` | Major chord (C5, E5, G5) | 500ms | Every 3s |
| `subtle_tick` | Descending triangle wave | 50ms | Every 3s |
| `none` | No audio feedback | - | - |
### Implementation
The `useThinkingTone` hook generates audio using the Web Audio API:
```typescript
import { useThinkingTone } from '@/hooks/useThinkingTone';
function VoicePanel({ isThinking }: { isThinking: boolean }) {
// Hook handles audio playback automatically
useThinkingTone(isThinking, {
preset: 'gentle_beep',
volume: 0.3, // 0-1 normalized
interval: 3000 // ms between tones
});
return ...
;
}
```
### TTS Conflict Prevention
Audio tones are automatically muted when TTS is playing to prevent audio overlap:
```typescript
const shouldPlayAudio = settings.thinkingToneEnabled && !isTTSPlaying && isThinking;
useThinkingTone(shouldPlayAudio, options);
```
This ensures a clean audio experience where thinking tones only play during silence, not over the AI's spoken responses. The `isTTSPlaying` state is managed by the voice state store and updated by the TTS playback hooks.
**Default Behavior**: Thinking tones are muted by default during any TTS playback. Users cannot override this behavior to prevent audio conflicts.
## Visual Feedback
### Visual Styles
| Style | Description | Animation |
| ---------- | ------------------------------- | ------------------- |
| `dots` | Three bouncing dots | Staggered bounce |
| `pulse` | Pulsing circle with ping effect | Scale + opacity |
| `spinner` | Rotating border spinner | Continuous rotation |
| `progress` | Indeterminate progress bar | Left-right sweep |
### Component Usage
```tsx
import { ThinkingVisualIndicator } from "@/components/voice/ThinkingVisualIndicator";
;
```
### Unified Panel
The `ThinkingFeedbackPanel` combines audio, visual, and haptic feedback:
```tsx
import { ThinkingFeedbackPanel } from "@/components/voice/ThinkingFeedbackPanel";
;
```
## Haptic Feedback
### Vibration Patterns
| Pattern | Description | Vibration Array |
| ---------- | ------------------------- | --------------- |
| `gentle` | Single soft pulse | `[50]` |
| `rhythmic` | Short-pause-short pattern | `[50, 100, 50]` |
| `none` | No haptic feedback | `[]` |
### Mobile Detection
Haptic feedback is only available on mobile devices with vibration support:
```typescript
function useHapticSupport(): boolean {
return typeof navigator !== "undefined" && "vibrate" in navigator;
}
function useIsMobile(): boolean {
return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || window.matchMedia("(max-width: 768px)").matches;
}
```
### Implementation
```typescript
// Trigger haptic feedback
function triggerHaptic(pattern: "gentle" | "rhythmic" | "none") {
const PATTERNS = {
gentle: [50],
rhythmic: [50, 100, 50],
none: [],
};
if (pattern !== "none") {
navigator.vibrate(PATTERNS[pattern]);
}
}
```
## User Settings
### Settings State
All settings are persisted in `voiceSettingsStore`:
```typescript
interface ThinkingFeedbackSettings {
thinkingToneEnabled: boolean; // Master toggle for audio
thinkingTonePreset: "gentle_beep" | "soft_chime" | "subtle_tick" | "none";
thinkingToneVolume: number; // 0-100
thinkingToneOnToolCalls: boolean; // Play during tool execution
thinkingVisualEnabled: boolean; // Show visual indicator
thinkingVisualStyle: "dots" | "pulse" | "spinner" | "progress";
thinkingHapticEnabled: boolean; // Enable haptic feedback
thinkingHapticPattern: "gentle" | "rhythmic" | "none";
}
```
### Default Values
```typescript
const defaults = {
thinkingToneEnabled: true,
thinkingTonePreset: "gentle_beep",
thinkingToneVolume: 30, // Low volume by default
thinkingToneOnToolCalls: true,
thinkingVisualEnabled: true,
thinkingVisualStyle: "dots",
thinkingHapticEnabled: true,
thinkingHapticPattern: "gentle",
};
```
### Settings UI
The `ThinkingFeedbackSettings` component provides a user interface:
```tsx
import { ThinkingFeedbackSettings } from "@/components/voice/ThinkingFeedbackPanel";
;
```
This renders:
- Audio toggle + preset selector + volume slider
- Visual toggle + style selector
- Haptic toggle + pattern selector (mobile only)
### Settings Panel Integration
The thinking feedback settings are integrated into the main Voice Settings panel (`settings-panel.js`). Users can access these controls via the gear icon in the voice mode interface.
The settings panel includes:
1. **Audio Section**: Master toggle, preset dropdown, volume slider (0-100)
2. **Visual Section**: Toggle and style selector
3. **Haptic Section** (mobile only): Toggle and pattern selector
All changes are persisted immediately to `voiceSettingsStore` and take effect without requiring a page refresh.
## Accessibility Considerations
### Screen Readers
Visual indicators include ARIA attributes:
```tsx
Processing...
```
### Reduced Motion
Respect user's motion preferences:
```css
@media (prefers-reduced-motion: reduce) {
.animate-bounce,
.animate-ping,
.animate-spin {
animation: none;
}
}
```
### Audio Accessibility
- Default volume is low (30%)
- Users can disable audio entirely
- Visual/haptic alternatives available
## Integration Example
Complete integration in a voice mode component:
```tsx
function VoiceMode() {
const { isThinking, isTTSPlaying } = useVoiceState();
const settings = useVoiceSettingsStore();
return (
{/* Main voice UI */}
{/* Thinking feedback */}
{isThinking && (
)}
{/* Settings panel */}
);
}
```
## Feature Flag
Enable thinking feedback via feature flag:
```typescript
import { useFeatureFlag } from '@/hooks/useFeatureFlags';
function VoiceMode() {
const showThinkingPanel = useFeatureFlag('voice_v4_thinking_feedback_panel');
return (
{showThinkingPanel && isThinking && (
)}
);
}
```
## Related Documentation
- [Voice Mode v4.1 Overview](./voice-mode-v4-overview.md)
- [Voice First Input Bar](./voice-first-input-bar.md)
- [Latency Budgets Guide](./latency-budgets-guide.md)
6:["slug","voice/thinking-tone-settings","c"]
0:["X7oMT3VrOffzp0qvbeOas",[[["",{"children":["docs",{"children":[["slug","voice/thinking-tone-settings","c"],{"children":["__PAGE__?{\"slug\":[\"voice\",\"thinking-tone-settings\"]}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["docs",{"children":[["slug","voice/thinking-tone-settings","c"],{"children":["__PAGE__",{},[["$L1",["$","div",null,{"children":[["$","div",null,{"className":"mb-6 flex items-center justify-between gap-4","children":[["$","div",null,{"children":[["$","p",null,{"className":"text-sm text-gray-500 dark:text-gray-400","children":"Docs / Raw"}],["$","h1",null,{"className":"text-3xl font-bold text-gray-900 dark:text-white","children":"Thinking Tone Settings"}],["$","p",null,{"className":"text-sm text-gray-600 dark:text-gray-400","children":["Sourced from"," ",["$","code",null,{"className":"font-mono text-xs","children":["docs/","voice/thinking-tone-settings.md"]}]]}]]}],["$","a",null,{"href":"https://github.com/mohammednazmy/VoiceAssist/edit/main/docs/voice/thinking-tone-settings.md","target":"_blank","rel":"noreferrer","className":"inline-flex items-center gap-2 rounded-md border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:border-primary-500 dark:hover:border-primary-400 hover:text-primary-700 dark:hover:text-primary-300","children":"Edit on GitHub"}]]}],["$","div",null,{"className":"rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6","children":["$","$L2",null,{"content":"$3"}]}],["$","div",null,{"className":"mt-6 flex flex-wrap gap-2 text-sm","children":[["$","$L4",null,{"href":"/reference/all-docs","className":"inline-flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700","children":"← All documentation"}],["$","$L4",null,{"href":"/","className":"inline-flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700","children":"Home"}]]}]]}],null],null],null]},[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","docs","children","$6","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","docs","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/7f586cdbbaa33ff7.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","className":"h-full","children":["$","body",null,{"className":"__className_f367f3 h-full bg-white dark:bg-gray-900","children":[["$","a",null,{"href":"#main-content","className":"skip-to-content","children":"Skip to main content"}],["$","$L8",null,{"children":[["$","$L9",null,{}],["$","$La",null,{}],["$","main",null,{"id":"main-content","className":"lg:pl-64","role":"main","aria-label":"Documentation content","children":["$","$Lb",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]]}]]}]}]],null],null],["$Lc",null]]]]
c:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Thinking Tone Settings | Docs | VoiceAssist Docs"}],["$","meta","3",{"name":"description","content":"Configuration guide for thinking feedback during AI processing"}],["$","meta","4",{"name":"keywords","content":"VoiceAssist,documentation,medical AI,voice assistant,healthcare,HIPAA,API"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow"}],["$","link","7",{"rel":"canonical","href":"https://assistdocs.asimo.io"}],["$","meta","8",{"property":"og:title","content":"VoiceAssist Documentation"}],["$","meta","9",{"property":"og:description","content":"Comprehensive documentation for VoiceAssist - Enterprise Medical AI Assistant"}],["$","meta","10",{"property":"og:url","content":"https://assistdocs.asimo.io"}],["$","meta","11",{"property":"og:site_name","content":"VoiceAssist Docs"}],["$","meta","12",{"property":"og:type","content":"website"}],["$","meta","13",{"name":"twitter:card","content":"summary"}],["$","meta","14",{"name":"twitter:title","content":"VoiceAssist Documentation"}],["$","meta","15",{"name":"twitter:description","content":"Comprehensive documentation for VoiceAssist - Enterprise Medical AI Assistant"}],["$","meta","16",{"name":"next-size-adjust"}]]
1:null