dsh-live-voice 0.2.2 → 0.3.0

package/src/modules/settings/components/LiveVoiceSettings.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useLanguage } from '../../../app/client/i18n/index.js';
+import { ErrorMessage, SettingsTabs } from '../../../shared/design-system/index.js';
+import { useLiveVoiceSettings, useLiveVoiceSettingsActions } from '../hooks/index.js';
+import {
+  ConversationSettingsSection,
+  RecognitionSettingsSection,
+  SpeakSettingsSection,
+} from '../sections/index.js';
+import { SettingsHeader } from './SettingsHeader.js';
+
+export function LiveVoiceSettings({ controller, onClose }: { controller: any; onClose?(): void }) {
+  const { scoped: commons } = useLanguage((ctx) => ctx.commons);
+  const { scoped: settingsLanguage } = useLanguage((ctx) => ctx.settings);
+  const state = useLiveVoiceSettings<any>(controller);
+  const { invoke, error, clearError } = useLiveVoiceSettingsActions(controller);
+  const [activeTab, setActiveTab] = React.useState('conversation');
+  const tabsId = React.useId();
+  const tabs = [
+    { id: 'speech', label: (settingsLanguage as any).tabs.speak() },
+    { id: 'recognition', label: (settingsLanguage as any).tabs.recognition() },
+    { id: 'conversation', label: (settingsLanguage as any).tabs.conversation() },
+  ];
+  const sectionProps = {
+    controller,
+    settings: state.settings,
+    capabilities: state.capabilities,
+    speaking: state.speaking,
+    invoke,
+
+    updateSettings: (next: any) => invoke('updateSettings', next),
+  };
+  return (
+    <section className="dlv-settings" aria-label={(settingsLanguage as any).title()}>
+      <SettingsHeader onClose={onClose} />
+      <SettingsTabs
+        label={(settingsLanguage as any).title()}
+        tabs={tabs}
+        active={activeTab}
+        idPrefix={tabsId}
+        onChange={setActiveTab}
+      />
+      {tabs.map((tab) => (
+        <div
+          key={tab.id}
+          id={`${tabsId}-panel-${tab.id}`}
+          className="dlv-settings-panel"
+          role="tabpanel"
+          aria-labelledby={`${tabsId}-tab-${tab.id}`}
+          hidden={activeTab !== tab.id}
+        >
+          {tab.id === 'speech' ? (
+            <SpeakSettingsSection {...sectionProps} />
+          ) : tab.id === 'recognition' ? (
+            <RecognitionSettingsSection {...sectionProps} />
+          ) : (
+            <ConversationSettingsSection {...sectionProps} />
+          )}
+        </div>
+      ))}
+      <ErrorMessage
+        error={error || state.error}
+        dismissLabel={(commons as any).dismissError()}
+        dismissText={(commons as any).dismiss()}
+        onDismiss={() => {
+          clearError();
+          controller.clearError();
+        }}
+      />
+    </section>
+  );
+}

package/src/modules/settings/components/SettingsHeader.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useLanguage } from '../../../app/client/i18n/index.js';
+import { REPOSITORY_URL } from '../services/releases.js';
+import { IconButton } from '../../../shared/design-system/index.js';
+import { useReleaseStatus } from '../hooks/index.js';
+import { VersionBadges } from './VersionBadges.js';
+export function SettingsHeader({ onClose }: { onClose?(): void }) {
+  const { scoped: commons } = useLanguage((ctx) => ctx.commons);
+  const { scoped: settings } = useLanguage((ctx) => ctx.settings);
+  const { latestRelease, updateAvailable } = useReleaseStatus();
+  return (
+    <div className="dlv-settings-heading">
+      <h3>{(commons as any).pluginName()}</h3>
+      <VersionBadges />
+      <span className="dlv-heading-divider" aria-hidden />
+      {updateAvailable && latestRelease ? (
+        <>
+          <a
+            className="dlv-version-badge dlv-update-badge"
+            href={latestRelease.url}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={(commons as any).update.link({ version: latestRelease.tag })}
+            title={(commons as any).update.version({ version: latestRelease.tag })}
+          >
+            <span className="dlv-update-icon" aria-hidden>
+              ↑
+            </span>
+            {(commons as any).update.label()}
+          </a>
+          <span className="dlv-heading-divider" aria-hidden />
+        </>
+      ) : null}
+      <a
+        className="dlv-version-badge dlv-star-badge"
+        href={REPOSITORY_URL}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={`Star DSH Live Voice on GitHub`}
+        title={(commons as any).repository.starLabel()}
+      >
+        ★ {(commons as any).repository.starLabel()}
+      </a>
+      {onClose ? (
+        <IconButton icon="close" label={(settings as any).close()} onClick={onClose} />
+      ) : null}
+    </div>
+  );
+}

package/src/modules/settings/components/VersionBadges.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useLanguage } from '../../../app/client/i18n/index.js';
+import {
+  CURRENT_VERSION,
+  DSH_BADGE_URL,
+  LIVE_VOICE_BADGE_URL,
+  RELEASES_URL,
+  TESTED_DSH_RELEASE_URL,
+  TESTED_DSH_VERSION,
+} from '../services/releases.js';
+export function VersionBadges() {
+  const { scoped: commons } = useLanguage((ctx) => ctx.commons);
+  return (
+    <div className="dlv-version-badges" aria-label={(commons as any).version.title()}>
+      <a
+        className="dlv-shields-badge"
+        href={RELEASES_URL}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={(commons as any).version.link({ version: CURRENT_VERSION })}
+        title={(commons as any).version.label({ version: CURRENT_VERSION })}
+      >
+        <img src={LIVE_VOICE_BADGE_URL} alt="" />
+        <span>{`v${CURRENT_VERSION}`}</span>
+      </a>
+      <a
+        className="dlv-shields-badge"
+        href={TESTED_DSH_RELEASE_URL}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={(commons as any).version.compatibilityLink({ version: TESTED_DSH_VERSION })}
+        title={(commons as any).version.compatibility({ version: TESTED_DSH_VERSION })}
+      >
+        <img src={DSH_BADGE_URL} alt="" />
+        <span>{`v${TESTED_DSH_VERSION}`}</span>
+      </a>
+    </div>
+  );
+}

package/src/modules/settings/components/createLiveVoiceSettings.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LiveVoiceSettings } from './LiveVoiceSettings.js';
+
+export function createLiveVoiceSettings(..._legacyArguments: unknown[]) {
+  return function SettingsPanel({ controller, onClose }: { controller: any; onClose?(): void }) {
+    return <LiveVoiceSettings controller={controller} onClose={onClose} />;
+  };
+}

package/src/modules/settings/components/index.ts

@@ -0,0 +1,4 @@
+export * from './createLiveVoiceSettings.js';
+export * from './LiveVoiceSettings.js';
+export * from './SettingsHeader.js';
+export * from './VersionBadges.js';

package/src/modules/settings/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useAudioDevices.js';
+export * from './useLiveVoiceSettings.js';
+export * from './useReleaseStatus.js';

package/src/modules/settings/hooks/useAudioDevices.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export function useAudioDevices() {
+  const [audioDevices, setAudioDevices] = React.useState<MediaDeviceInfo[]>([]);
+  React.useEffect(() => {
+    let active = true;
+    const refresh = async () => {
+      try {
+        const devices = await globalThis.navigator?.mediaDevices?.enumerateDevices?.();
+        if (active) setAudioDevices(Array.from(devices || []));
+      } catch {
+        if (active) setAudioDevices([]);
+      }
+    };
+    void refresh();
+    globalThis.navigator?.mediaDevices?.addEventListener?.('devicechange', refresh);
+    return () => {
+      active = false;
+      globalThis.navigator?.mediaDevices?.removeEventListener?.('devicechange', refresh);
+    };
+  }, []);
+  return audioDevices;
+}
+export function createDeviceOptions(
+  devices: readonly MediaDeviceInfo[],
+  kind: MediaDeviceKind,
+  systemDefault: string,
+  fallback: string,
+) {
+  return [
+    { value: '', label: systemDefault },
+    ...devices
+      .filter((device) => device.kind === kind && device.deviceId && device.deviceId !== 'default')
+      .map((device, index) => ({
+        value: device.deviceId,
+        label: device.label || `${fallback} ${index + 1}`,
+      })),
+  ];
+}

package/src/modules/settings/hooks/useLiveVoiceSettings.ts

@@ -0,0 +1,4 @@
+export {
+  useConversationActions as useLiveVoiceSettingsActions,
+  useConversationController as useLiveVoiceSettings,
+} from '../../conversation/hooks/index.js';

package/src/modules/settings/hooks/useReleaseStatus.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { checkLatestRelease, hasNewerRelease } from '../services/releases.js';
+export function useReleaseStatus() {
+  const [latestRelease, setLatestRelease] = React.useState<{ tag: string; url: string } | null>(
+    null,
+  );
+  React.useEffect(() => {
+    let active = true;
+    void checkLatestRelease().then((result) => {
+      if (active) setLatestRelease(result.release);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return { latestRelease, updateAvailable: hasNewerRelease(latestRelease) };
+}

package/src/modules/settings/index.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './models/index.js';
+export * from './sections/index.js';

package/src/modules/settings/models/index.ts

@@ -0,0 +1 @@
+export * from './settingsStorage.js';

package/src/modules/settings/models/settingsStorage.ts

@@ -0,0 +1,14 @@
+import { normalizeSettings } from '../../core/settings.js';
+export const SETTINGS_STORAGE_KEY = 'dsh-live-voice.settings';
+export function readSettings(storage: Pick<Storage, 'getItem'> = localStorage) {
+  try {
+    return normalizeSettings(JSON.parse(storage.getItem(SETTINGS_STORAGE_KEY) || '{}'));
+  } catch {
+    return normalizeSettings({});
+  }
+}
+export function writeSettings(settings: unknown, storage: Pick<Storage, 'setItem'> = localStorage) {
+  const normalized = normalizeSettings(settings);
+  storage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(normalized));
+  return normalized;
+}

package/src/modules/settings/sections/conversation/ConversationDelaySettings.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { SelectField } from '../../../../shared/design-system/index.js';
+const DELAYS = [1, 2, 3, 4, 5, 6, 8, 10];
+export function ConversationDelaySettings({ settings, updateSettings }: any) {
+  const { scoped: commons } = useLanguage((ctx) => ctx.commons);
+  const { scoped: speak } = useLanguage((ctx) => ctx.speak);
+  return (
+    <>
+      <SelectField
+        label={(speak as any).responseDelay.label()}
+        value={String(settings.assistantSpeechDelaySeconds ?? 3)}
+        options={DELAYS.map((seconds) => ({
+          value: String(seconds),
+          label: (commons as any).seconds({ seconds }),
+        }))}
+        onChange={(event) =>
+          updateSettings({ assistantSpeechDelaySeconds: Number(event.target.value) })
+        }
+      />
+      <p className="dlv-setting-description">{(speak as any).responseDelay.help()}</p>
+    </>
+  );
+}

package/src/modules/settings/sections/conversation/ConversationSettingsSection.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SettingsCard } from '../../../../shared/design-system/index.js';
+import { DeliverySettings } from './DeliverySettings.js';
+import { HoldToTalkSettings } from './HoldToTalkSettings.js';
+import { VoiceModeSettings } from './VoiceModeSettings.js';
+import { ConversationDelaySettings } from './ConversationDelaySettings.js';
+import { PlaybackPolicySettings } from '../speak/PlaybackPolicySettings.js';
+export function ConversationSettingsSection(props: {
+  settings: any;
+  updateSettings(value: any): void;
+}) {
+  return (
+    <SettingsCard>
+      <div className="dlv-settings-card-body">
+        <DeliverySettings {...props} />
+        <HoldToTalkSettings {...props} />
+        <VoiceModeSettings {...props} />
+        <PlaybackPolicySettings {...props} />
+        <ConversationDelaySettings {...props} />
+      </div>
+    </SettingsCard>
+  );
+}

package/src/modules/settings/sections/conversation/DeliverySettings.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { SelectField } from '../../../../shared/design-system/index.js';
+export function DeliverySettings({
+  settings,
+  updateSettings,
+}: {
+  settings: any;
+  updateSettings(value: any): void;
+}) {
+  const { scoped } = useLanguage((ctx) => ctx.settings);
+  const mode = settings.sendingMode || 'manual';
+  const seconds = [2, 3, 4, 5, 6, 8, 10];
+  return (
+    <>
+      <SelectField
+        label={(scoped as any).delivery.label()}
+        value={mode}
+        options={[
+          { value: 'manual', label: (scoped as any).delivery.manualLabel() },
+          { value: 'queue', label: (scoped as any).delivery.queueLabel() },
+          { value: 'steer', label: (scoped as any).delivery.steerLabel() },
+        ]}
+        onChange={(event) => updateSettings({ sendingMode: event.target.value })}
+      />
+      {mode !== 'manual' ? (
+        <SelectField
+          label={(scoped as any).autoSend.delay()}
+          value={String(settings.autoSendDelaySeconds || 4)}
+          options={seconds.map((value) => ({ value: String(value), label: String(value) }))}
+          onChange={(event) => updateSettings({ autoSendDelaySeconds: Number(event.target.value) })}
+        />
+      ) : (
+        <p className="dlv-setting-description">{(scoped as any).delivery.manualLabel()}</p>
+      )}
+    </>
+  );
+}

package/src/modules/settings/sections/conversation/HoldToTalkSettings.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { CheckboxField } from '../../../../shared/design-system/index.js';
+export function HoldToTalkSettings({
+  settings,
+  updateSettings,
+}: {
+  settings: any;
+  updateSettings(value: any): void;
+}) {
+  const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
+  return (
+    <CheckboxField
+      label={(recognition as any).holdToTalk.enabled()}
+      description={(recognition as any).holdToTalk.help()}
+      checked={settings.holdToTalkEnabled !== false}
+      onChange={(event) => updateSettings({ holdToTalkEnabled: event.target.checked })}
+    />
+  );
+}

package/src/modules/settings/sections/conversation/VoiceModeSettings.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { SelectField } from '../../../../shared/design-system/index.js';
+export function VoiceModeSettings({
+  settings,
+  updateSettings,
+}: {
+  settings: any;
+  updateSettings(value: any): void;
+}) {
+  const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
+  const mode = settings.mode || 'speaker';
+  return (
+    <>
+      <SelectField
+        label={(recognition as any).mode.label()}
+        value={mode}
+        options={[
+          { value: 'speaker', label: (recognition as any).speakerMode.label() },
+          { value: 'headphones', label: (recognition as any).headphoneMode.label() },
+        ]}
+        onChange={(event) => updateSettings({ mode: event.target.value })}
+      />
+      <p className="dlv-setting-description">
+        {mode === 'headphones'
+          ? (recognition as any).headphoneMode.help()
+          : (recognition as any).speakerMode.help()}
+      </p>
+    </>
+  );
+}

package/src/modules/settings/sections/conversation/index.ts

@@ -0,0 +1,5 @@
+export * from './ConversationSettingsSection.js';
+export * from './ConversationDelaySettings.js';
+export * from './DeliverySettings.js';
+export * from './HoldToTalkSettings.js';
+export * from './VoiceModeSettings.js';

package/src/modules/settings/sections/index.ts

@@ -0,0 +1,3 @@
+export * from './conversation/index.js';
+export * from './recognition/index.js';
+export * from './speak/index.js';

package/src/modules/settings/sections/recognition/RecognitionEngineSettings.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { QwenSettings } from '../../../core/qwen/QwenSettings.js';
+import { WhisperSettings } from '../../../recognition/engines/whisper/WhisperSettings.js';
+import {
+  CheckboxField,
+  SelectField,
+  SettingsSubcard,
+} from '../../../../shared/design-system/index.js';
+import { createDeviceOptions, useAudioDevices } from '../../hooks/useAudioDevices.js';
+export function RecognitionEngineSettings({
+  controller,
+  settings,
+  capabilities = {},
+  updateSettings,
+}: any) {
+  const { scoped: commons } = useLanguage((ctx) => ctx.commons);
+  const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
+  const devices = useAudioDevices();
+  const engine = settings.recognitionEngine || 'browser';
+  const setEngine = (next: string) =>
+    updateSettings(
+      next === 'browser' && settings.recognitionLang === 'auto'
+        ? { recognitionEngine: next, recognitionLang: 'pt-BR' }
+        : { recognitionEngine: next },
+    );
+  return (
+    <>
+      <SelectField
+        label={(recognition as any).engine.label()}
+        value={engine}
+        options={[
+          {
+            value: 'browser',
+            label: (recognition as any).browser.label(),
+            disabled: capabilities.recognition?.supported === false,
+          },
+          {
+            value: 'qwen-http',
+            label: (recognition as any).qwen.label(),
+            disabled: capabilities['qwen-http-recognition']?.supported === false,
+          },
+          {
+            value: 'whisper-http',
+            label: (recognition as any).whisper.label(),
+            disabled: capabilities['whisper-http']?.supported === false,
+          },
+        ]}
+        onChange={(event) => setEngine(event.target.value)}
+      />
+      <SelectField
+        label={(recognition as any).microphone.device()}
+        value={settings.inputDeviceId || ''}
+        options={createDeviceOptions(
+          devices,
+          'audioinput',
+          (commons as any).systemDefault(),
+          (commons as any).device.numberedLabel({ number: '' }),
+        )}
+        onChange={(event) => updateSettings({ inputDeviceId: event.target.value })}
+      />
+      <SelectField
+        label={(recognition as any).language.label()}
+        value={settings.recognitionLang || (engine === 'browser' ? 'pt-BR' : 'auto')}
+        options={[
+          ...(engine === 'browser'
+            ? []
+            : [{ value: 'auto', label: (recognition as any).language.automatic() }]),
+          { value: 'pt-BR', label: 'Português (Brasil)' },
+          { value: 'en-US', label: 'English (US)' },
+        ]}
+        onChange={(event) => updateSettings({ recognitionLang: event.target.value })}
+      />
+      {engine === 'browser' && (
+        <>
+          <p>{(recognition as any).browser.help()}</p>
+          <CheckboxField
+            label={(recognition as any).browser.localProcessing()}
+            checked={settings.recognitionProcessLocally !== false}
+            onChange={(event) =>
+              updateSettings({ recognitionProcessLocally: event.target.checked })
+            }
+          />
+          {settings.recognitionProcessLocally !== false ? (
+            <CheckboxField
+              label={(recognition as any).browser.autoInstallPack()}
+              checked={settings.recognitionAutoInstall !== false}
+              onChange={(event) => updateSettings({ recognitionAutoInstall: event.target.checked })}
+            />
+          ) : (
+            <p role="status">{(recognition as any).browser.remoteServiceWarning()}</p>
+          )}
+        </>
+      )}
+      {engine === 'whisper-http' && (
+        <SettingsSubcard title={(commons as any).connection.title()}>
+          <p>{(recognition as any).whisper.captureHelp()}</p>
+          <WhisperSettings controller={controller} />
+        </SettingsSubcard>
+      )}
+      {engine === 'qwen-http' && (
+        <SettingsSubcard title={(commons as any).connection.title()}>
+          <p>{(recognition as any).qwen.captureHelp()}</p>
+          {settings.engine !== 'qwen-http' && <QwenSettings controller={controller} />}
+        </SettingsSubcard>
+      )}
+    </>
+  );
+}

package/src/modules/settings/sections/recognition/RecognitionFilterSettings.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import {
+  CheckboxField,
+  NumberField,
+  SettingsSubcard,
+} from '../../../../shared/design-system/index.js';
+export function RecognitionFilterSettings({ settings, updateSettings }: any) {
+  const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
+  const enabled = settings.recognitionFilterEnabled !== false;
+  return (
+    <SettingsSubcard title={(recognition as any).minimumWords.label()}>
+      <CheckboxField
+        label={(recognition as any).minimumWords.enabled()}
+        description={(recognition as any).minimumWords.help()}
+        checked={enabled}
+        onChange={(event) => updateSettings({ recognitionFilterEnabled: event.target.checked })}
+      />
+      <NumberField
+        label={(recognition as any).minimumWords.label()}
+        min={1}
+        max={20}
+        value={settings.recognitionMinimumWords ?? 2}
+        disabled={!enabled}
+        onChange={(event) => {
+          const value = Number(event.target.value);
+          if (Number.isInteger(value) && value >= 1 && value <= 20)
+            updateSettings({ recognitionMinimumWords: value });
+        }}
+      />
+    </SettingsSubcard>
+  );
+}

package/src/modules/settings/sections/recognition/RecognitionSettingsSection.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SettingsCard } from '../../../../shared/design-system/index.js';
+import { RecognitionEngineSettings } from './RecognitionEngineSettings.js';
+import { RecognitionFilterSettings } from './RecognitionFilterSettings.js';
+import { SilenceDetectionSettings } from './SilenceDetectionSettings.js';
+import { VoiceCommandSettings } from './VoiceCommandSettings.js';
+import { RecognitionStatus } from './RecognitionStatus.js';
+export function RecognitionSettingsSection(props: any) {
+  return (
+    <SettingsCard>
+      <div className="dlv-settings-card-body">
+        <RecognitionEngineSettings {...props} />
+        <VoiceCommandSettings {...props} />
+        <RecognitionFilterSettings {...props} />
+        <SilenceDetectionSettings {...props} />
+        <RecognitionStatus {...props} />
+      </div>
+    </SettingsCard>
+  );
+}

package/src/modules/settings/sections/recognition/RecognitionStatus.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+export function RecognitionStatus({ capabilities = {} }: any) {
+  const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
+  return (
+    <>
+      {capabilities.capture?.supported === false ? (
+        <p role="status">
+          {(recognition as any).microphone.failure({ reason: capabilities.capture.reason || '' })}
+        </p>
+      ) : capabilities.capture?.permission === 'prompt' ? (
+        <p role="status">{(recognition as any).microphone.permissionHelp()}</p>
+      ) : null}
+      {capabilities.recognition?.supported === false && (
+        <p role="status">{capabilities.recognition.reason}</p>
+      )}
+    </>
+  );
+}