OS の言語設定 と Chrome の言語設定がともに（または一方が）英語だと常にマイクが英語読み取りになってしまう不具合がある

[tegnike]

No description provided.

[github-actions]

Issue分析結果:

[
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "このファイルはAIチャットの応答を生成する機能を提供しており、言語設定に関連する可能性があります。OSやブラウザの言語設定によってAIの応答言語が変わる問題に関連している可能性があります。"
  },
  {
    "file_path": "src/features/constants/systemPromptConstants.ts",
    "reason": "システムプロンプトの定義ファイルであり、AIの応答言語や振る舞いに影響を与える可能性があります。言語設定に関連するプロンプトが含まれている可能性があります。"
  },
  {
    "file_path": "src/lib/i18n.js",
    "reason": "多言語サポートの設定ファイルであり、アプリケーションの言語設定に直接関わっています。OSやブラウザの言語設定との連携に問題がある可能性があります。"
  },
  {
    "file_path": "src/pages/_app.tsx",
    "reason": "アプリケーションのエントリーポイントであり、言語設定の初期化と管理を行っています。OSやブラウザの言語設定を読み取り、適用する処理に問題がある可能性があります。"
  },
  {
    "file_path": "src/pages/index.tsx",
    "reason": "メインのアプリケーションコンポーネントであり、言語設定やAIチャットの統合を行っています。言語設定の適用や切り替えに関する問題がここで発生している可能性があります。"
  },
  {
    "file_path": "src/components/settings.tsx",
    "reason": "言語設定を含むアプリケーションの設定を管理するコンポーネントです。言語選択やAIサービスの設定に関する問題が含まれている可能性があります。"
  },
  {
    "file_path": "src/components/introduction.tsx",
    "reason": "多言語対応の導入画面を提供するコンポーネントであり、言語選択機能を含んでいます。言語設定の初期化や切り替えに関連する問題がある可能性があります。"
  },
  {
    "file_path": "src/features/messages/speakCharacter.ts",
    "reason": "音声合成とテキスト処理を行うファイルであり、言語設定に基づいて適切な音声を生成する必要があります。言語設定の問題がここに影響している可能性があります。"
  },
  {
    "file_path": "src/features/chat/openAiChat.ts",
    "reason": "OpenAIのチャットAPIを使用するファイルであり、言語設定に基づいて適切な応答を生成する必要があります。言語設定の問題がここに影響している可能性があります。"
  },
  {
    "file_path": "src/features/chat/anthropicChat.ts",
    "reason": "AnthropicのAI APIを使用するファイルであり、言語設定に基づいて適切な応答を生成する必要があります。言語設定の問題がここに影響している可能性があります。"
  },
  {
    "file_path": "src/features/chat/googleChat.ts",
    "reason": "Google AI APIを使用するファイルであり、言語設定に基づいて適切な応答を生成する必要があります。言語設定の問題がここに影響している可能性があります。"
  },
  {
    "file_path": "src/pages/api/anthropic.ts",
    "reason": "Anthropic APIのサーバーサイドハンドラーであり、言語設定に基づいて適切な応答を生成する必要があります。言語設定の問題がサーバーサイドで発生している可能性があります。"
  },
  {
    "file_path": "src/pages/api/chat.ts",
    "reason": "OpenAI APIのサーバーサイドハンドラーであり、言語設定に基づいて適切な応答を生成する必要があります。言語設定の問題がサーバーサイドで発生している可能性があります。"
  },
  {
    "file_path": "src/pages/api/tts.ts",
    "reason": "テキスト音声変換（TTS）のAPIハンドラーであり、言語設定に基づいて適切な音声を生成する必要があります。言語設定の問題が音声生成に影響している可能性があります。"
  },
  {
    "file_path": "src/features/googletts/googletts.ts",
    "reason": "Google TTSを使用して音声を生成するファイルであり、言語設定に基づいて適切な音声を生成する必要があります。言語設定の問題が音声生成に影響している可能性があります。"
  },
  {
    "file_path": "src/features/koeiromap/koeiromap.ts",
    "reason": "音声合成APIを利用するファイルであり、言語設定に基づいて適切な音声を生成する必要があります。言語設定の問題が音声生成に影響している可能性があります。"
  },
  {
    "file_path": "src/components/messageInput.tsx",
    "reason": "ユーザー入力を処理するコンポーネントであり、多言語対応や音声入力機能を含んでいます。言語設定の問題が入力処理に影響している可能性があります。"
  },
  {
    "file_path": "src/components/messageInputContainer.tsx",
    "reason": "メッセージ入力と音声認識を管理するコンポーネントであり、言語設定に基づいて適切に機能する必要があります。言語設定の問題が入力処理や音声認識に影響している可能性があります。"
  },
  {
    "file_path": "src/features/youtube/youtubeComments.ts",
    "reason": "YouTubeのコメント処理を行うファイルであり、多言語のコメントを扱う可能性があります。言語設定の問題がコメント処理に影響している可能性があります。"
  },
  {
    "file_path": "src/features/youtube/conversationContinuityFunctions.ts",
    "reason": "YouTubeコメントの処理と会話の継続性を管理するファイルであり、多言語での対応が必要です。言語設定の問題が会話の継続性に影響している可能性があります。"
  }
]

コード改善案:

このIssueは、OS言語設定とChromeの言語設定が英語の場合、マイクが常に英語読み取りになってしまう問題を指摘しています。コードを分析した結果、以下の点が問題の原因となっている可能性が高いです：

1. 言語設定の取得方法が不適切である可能性があります。
2. 言語設定の優先順位が明確に定義されていない可能性があります。
3. マイク入力の言語設定が、アプリケーションの言語設定と適切に連携していない可能性があります。

全体的に、言語設定の管理とマイク入力の連携に改善の余地があると考えられます。

1. 言語設定の取得方法の改善 説明: 現在のコードでは、ブラウザの言語設定のみを参照しています。OS設定とChromeの設定を両方考慮する必要があります。

改善後のコード例:

// src/pages/_app.tsx
useEffect(() => {
  const getPreferredLanguage = () => {
    const osLanguage = navigator.language;
    const browserLanguages = navigator.languages;
    
    // OSとブラウザの言語設定を考慮して言語を決定
    const preferredLanguage = browserLanguages.find(lang => 
      isLanguageSupported(lang.split('-')[0])
    ) || osLanguage;

    return isLanguageSupported(preferredLanguage.split('-')[0]) 
      ? preferredLanguage.split('-')[0] 
      : 'ja';
  };

  const language = getPreferredLanguage();
  i18n.changeLanguage(language);
  settingsStore.setState({ selectLanguage: language });
}, []);

2. マイク入力の言語設定の動的更新
   説明: 言語設定が変更された際に、マイク入力の言語設定も更新する必要があります。

   改善後のコード例:

   // src/components/messageInputContainer.tsx
   useEffect(() => {
     const updateRecognitionLanguage = () => {
       if (recognition) {
         const ss = settingsStore.getState();
         recognition.lang = getVoiceLanguageCode(ss.selectLanguage);
       }
     };
   
     updateRecognitionLanguage();
     
     // 言語設定の変更を監視
     const unsubscribe = settingsStore.subscribe(
       state => state.selectLanguage,
       updateRecognitionLanguage
     );
   
     return () => unsubscribe();
   }, [recognition]);

3. 言語設定の優先順位の明確化
   説明: 言語設定の優先順位を明確に定義し、ユーザーが理解しやすいようにします。

   改善後のコード例:

   // src/features/constants/settings.ts
   export const LANGUAGE_PRIORITY = [
     'userPreference', // ユーザーが明示的に設定した言語
     'browserLanguage', // ブラウザの言語設定
     'osLanguage', // OSの言語設定
     'defaultLanguage' // デフォルト言語（日本語）
   ];
   
   export function determineLanguage(userPref: string | null, browserLang: string, osLang: string): string {
     if (userPref && isLanguageSupported(userPref)) return userPref;
     if (isLanguageSupported(browserLang)) return browserLang;
     if (isLanguageSupported(osLang)) return osLang;
     return 'ja'; // デフォルト言語
   }

4. ユーザーインターフェースでの言語設定の表示と制御
   説明: ユーザーが現在の言語設定を確認し、必要に応じて変更できるようにします。

   改善後のコード例:

   // src/components/languageSelector.tsx
   import React from 'react';
   import { useTranslation } from 'react-i18next';
   import settingsStore from '@/features/stores/settings';
   
   export const LanguageSelector: React.FC = () => {
     const { i18n } = useTranslation();
     const currentLanguage = settingsStore(state => state.selectLanguage);
   
     const changeLanguage = (lang: string) => {
       i18n.changeLanguage(lang);
       settingsStore.setState({ selectLanguage: lang });
     };
   
     return (
       <select value={currentLanguage} onChange={(e) => changeLanguage(e.target.value)}>
         <option value="ja">日本語</option>
         <option value="en">English</option>
         <option value="zh">中文</option>
       </select>
     );
   };

これらの改善を実装することで、以下の効果が期待できます：

1. OS言語設定とブラウザ言語設定の両方を考慮した、より正確な言語決定ができるようになります。
2. マイク入力の言語設定がアプリケーションの言語設定と常に同期するため、誤った言語での音声認識を防ぐことができます。
3. 言語設定の優先順位が明確になり、開発者にとっても利用者にとっても理解しやすいシステムになります。
4. ユーザーが直接言語を選択できるようになり、より柔軟な言語設定が可能になります。

これらの改善により、Issueで指摘されている問題が解決され、さらに多言語対応の質が全体的に向上することが期待されます。ユーザーエクスペリエンスが改善され、国際的なユーザーベースに対応したアプリケーションとなるでしょう。