Merge pull request #145 from tegnike/feature/update-ui-visible-setting

UIコンポーネントの表示切替調整
tegnike · Aug 26, 2024 · 144ac08 · 144ac08
2 parents 490155e + 76479bc
commit 144ac08
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 150 deletions.
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -100,10 +100,11 @@
   "ElevenLabsVoiceId": "ElevenLabs Voice ID",
   "ElevenLabsVoiceIdInfo": "Voice ID can be selected from the URL below.",
   "CharacterName": "Character name",
+  "ShowAssistantText": "Show answer box",
   "ShowCharacterName": "Show character name in the answer box",
   "AdvancedSettings": "Advanced Settings",
-  "ShowSettingsButton": "Show settings button",
-  "ShowSettingsButtonInfo": "The settings screen can be displayed by pressing Cmd + . (Mac) / Ctrl + . (Windows) .",
+  "ShowControlPanel": "Show settings button",
+  "ShowControlPanelInfo": "The settings screen can be displayed by pressing Cmd + . (Mac) / Ctrl + . (Windows) .",
   "SlideMode": "Slide Mode",
   "SelectedSlideDocs": "Selected Slide Documents",
   "SlideModeDescription": "This is a mode where AI automatically presents slides. It is only available when the selected AI service is OpenAI, Anthropic, or Google Gemini.",

diff --git a/locales/ja/translation.json b/locales/ja/translation.json
@@ -101,10 +101,11 @@
   "ElevenLabsVoiceId": "ElevenLabs ボイスID",
   "ElevenLabsVoiceIdInfo": "ボイスIDは下記のURLから選択してください。",
   "CharacterName": "キャラクター名",
+  "ShowAssistantText": "回答欄を表示する",
   "ShowCharacterName": "回答欄にキャラクター名を表示する",
   "AdvancedSettings": "詳細設定",
-  "ShowSettingsButton": "設定ボタンを表示",
-  "ShowSettingsButtonInfo": "設定画面は Cmd + . (Mac) / Ctrl + . (Windows) で表示することができます。",
+  "ShowControlPanel": "操作パネルを表示する",
+  "ShowControlPanelInfo": "設定画面は Cmd + . (Mac) / Ctrl + . (Windows) で表示することができます。",
   "SlideMode": "スライドモード",
   "SelectedSlideDocs": "使用するスライド",
   "SlideModeDescription": "AIが自動でスライドを発表するモードです。選択しているAIサービスがOpenAIまたはAnthropicまたはGoogle Geminiの場合のみ有効です。",

diff --git a/locales/ko/translation.json b/locales/ko/translation.json
@@ -100,10 +100,11 @@
   "ElevenLabsVoiceId": "ElevenLabs 보이스ID",
   "ElevenLabsVoiceIdInfo": "보이스ID는 아래 URL에서 선택하십시오.",
   "CharacterName": "캐릭터 이름",
+  "ShowAssistantText": "답변란 표시",
   "ShowCharacterName": "답변란에 캐릭터 이름을 표시",
   "AdvancedSettings": "고급 설정",
-  "ShowSettingsButton": "설정 버튼 표시",
-  "ShowSettingsButtonInfo": "설정 화면은 Cmd + . (Mac) / Ctrl + . (Windows)를 눌러 표시할 수 있습니다.",
+  "ShowControlPanel": "설정 버튼 표시",
+  "ShowControlPanelInfo": "설정 화면은 Cmd + . (Mac) / Ctrl + . (Windows)를 눌러 표시할 수 있습니다.",
   "SlideMode": "슬라이드 모드",
   "SelectedSlideDocs": "사용할 슬라이드",
   "SlideModeDescription": "AI가 자동으로 슬라이드를 발표하는 모드입니다. 선택한 AI 서비스가 OpenAI, Anthropic 또는 Google Gemini인 경우에만 사용 가능합니다.",

diff --git a/locales/zh/translation.json b/locales/zh/translation.json
@@ -100,10 +100,11 @@
   "ElevenLabsVoiceId": "ElevenLabs 语音ID",
   "ElevenLabsVoiceIdInfo": "请从下面的URL选择语音ID。",
   "CharacterName": "角色名字",
+  "ShowAssistantText": "顯示回答框",
   "ShowCharacterName": "在回答框中显示角色名称",
   "AdvancedSettings": "高级设置",
-  "ShowSettingsButton": "显示设置按钮",
-  "ShowSettingsButtonInfo": "可以通过按 Cmd + . (Mac) / Ctrl + . (Windows) 来显示设置界面。",
+  "ShowControlPanel": "显示设置按钮",
+  "ShowControlPanelInfo": "可以通过按 Cmd + . (Mac) / Ctrl + . (Windows) 来显示设置界面。",
   "SlideMode": "投影片模式",
   "SelectedSlideDocs": "使用的投影片",
   "SlideModeDescription": "這是一個 AI 自動展示投影片的模式。僅在選擇的 AI 服務為 OpenAI、Anthropic 或 Google Gemini 時有效。",

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -22,8 +22,9 @@ export const Menu = () => {
   const chatLog = homeStore((s) => s.chatLog)
   const assistantMessage = homeStore((s) => s.assistantMessage)
   const showWebcam = menuStore((s) => s.showWebcam)
-  const showSettingsButton = menuStore((s) => s.showSettingsButton)
+  const showControlPanel = menuStore((s) => s.showControlPanel)
   const slidePlaying = slideStore((s) => s.isPlaying)
+  const showAssistantText = settingsStore((s) => s.showAssistantText)
 
   const [showSettings, setShowSettings] = useState(false)
   const [showChatLog, setShowChatLog] = useState(false)
@@ -116,107 +117,110 @@ export const Menu = () => {
           className="grid md:grid-flow-col gap-[8px] mb-40"
           style={{ width: 'max-content' }}
         >
-          <div className="md:order-1 order-2">
-            {showSettingsButton && (
-              <IconButton
-                iconName="24/Settings"
-                isProcessing={false}
-                onClick={() => setShowSettings(true)}
-              ></IconButton>
-            )}
-          </div>
-          <div className="md:order-2 order-1">
-            {showChatLog ? (
-              <IconButton
-                iconName="24/CommentOutline"
-                label={t('ChatLog')}
-                isProcessing={false}
-                onClick={() => setShowChatLog(false)}
-              />
-            ) : (
-              <IconButton
-                iconName="24/CommentFill"
-                label={t('ChatLog')}
-                isProcessing={false}
-                disabled={chatLog.length <= 0}
-                onClick={() => setShowChatLog(true)}
-              />
-            )}
-          </div>
-          {selectAIService === 'openai' && !youtubeMode && (
+          {showControlPanel && (
             <>
-              <div className="order-3">
+              <div className="md:order-1 order-2">
                 <IconButton
-                  iconName="24/Camera"
+                  iconName="24/Settings"
                   isProcessing={false}
-                  onClick={() =>
-                    menuStore.setState(({ showWebcam }) => ({
-                      showWebcam: !showWebcam,
-                    }))
-                  }
-                />
+                  onClick={() => setShowSettings(true)}
+                ></IconButton>
               </div>
-              <div className="order-4">
-                <IconButton
-                  iconName="24/AddImage"
-                  isProcessing={false}
-                  onClick={() => imageFileInputRef.current?.click()}
-                />
-                <input
-                  type="file"
-                  className="hidden"
-                  accept="image/*"
-                  ref={imageFileInputRef}
-                  onChange={(e) => {
-                    const file = e.target.files?.[0]
-                    if (file) {
-                      const reader = new FileReader()
-                      reader.onload = (e) => {
-                        const imageUrl = e.target?.result as string
-                        homeStore.setState({ modalImage: imageUrl })
+              <div className="md:order-2 order-1">
+                {showChatLog ? (
+                  <IconButton
+                    iconName="24/CommentOutline"
+                    label={t('ChatLog')}
+                    isProcessing={false}
+                    onClick={() => setShowChatLog(false)}
+                  />
+                ) : (
+                  <IconButton
+                    iconName="24/CommentFill"
+                    label={t('ChatLog')}
+                    isProcessing={false}
+                    disabled={chatLog.length <= 0}
+                    onClick={() => setShowChatLog(true)}
+                  />
+                )}
+              </div>
+              {selectAIService === 'openai' && !youtubeMode && (
+                <>
+                  <div className="order-3">
+                    <IconButton
+                      iconName="24/Camera"
+                      isProcessing={false}
+                      onClick={() =>
+                        menuStore.setState(({ showWebcam }) => ({
+                          showWebcam: !showWebcam,
+                        }))
                       }
-                      reader.readAsDataURL(file)
+                    />
+                  </div>
+                  <div className="order-4">
+                    <IconButton
+                      iconName="24/AddImage"
+                      isProcessing={false}
+                      onClick={() => imageFileInputRef.current?.click()}
+                    />
+                    <input
+                      type="file"
+                      className="hidden"
+                      accept="image/*"
+                      ref={imageFileInputRef}
+                      onChange={(e) => {
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          const reader = new FileReader()
+                          reader.onload = (e) => {
+                            const imageUrl = e.target?.result as string
+                            homeStore.setState({ modalImage: imageUrl })
+                          }
+                          reader.readAsDataURL(file)
+                        }
+                      }}
+                    />
+                  </div>
+                </>
+              )}
+              {youtubeMode && (
+                <div className="order-5">
+                  <IconButton
+                    iconName={youtubePlaying ? '24/PauseAlt' : '24/Video'}
+                    isProcessing={false}
+                    onClick={() =>
+                      settingsStore.setState({
+                        youtubePlaying: !youtubePlaying,
+                      })
                     }
-                  }}
-                />
-              </div>
+                  />
+                </div>
+              )}
+              {slideMode && (
+                <div className="order-5">
+                  <IconButton
+                    iconName="24/FrameEffect"
+                    isProcessing={false}
+                    onClick={() =>
+                      menuStore.setState({ slideVisible: !slideVisible })
+                    }
+                    disabled={slidePlaying}
+                  />
+                </div>
+              )}
             </>
           )}
-          {youtubeMode && (
-            <div className="order-5">
-              <IconButton
-                iconName={youtubePlaying ? '24/PauseAlt' : '24/Video'}
-                isProcessing={false}
-                onClick={() =>
-                  settingsStore.setState({
-                    youtubePlaying: !youtubePlaying,
-                  })
-                }
-              />
-            </div>
-          )}
-          {slideMode && (
-            <div className="order-5">
-              <IconButton
-                iconName="24/FrameEffect"
-                isProcessing={false}
-                onClick={() =>
-                  menuStore.setState({ slideVisible: !slideVisible })
-                }
-                disabled={slidePlaying}
-              />
-            </div>
-          )}
         </div>
       </div>
       <div className="relative">
         {slideMode && slideVisible && <Slides markdown={markdownContent} />}
       </div>
       {webSocketMode ? showChatLog && <ChatLog /> : showChatLog && <ChatLog />}
       {showSettings && <Settings onClickClose={() => setShowSettings(false)} />}
-      {!showChatLog && assistantMessage && (!slideMode || !slideVisible) && (
-        <AssistantText message={assistantMessage} />
-      )}
+      {!showChatLog &&
+        assistantMessage &&
+        (!slideMode || !slideVisible) &&
+        showAssistantText && <AssistantText message={assistantMessage} />}
       {showWebcam && navigator.mediaDevices && <Webcam />}
       {showPermissionModal && (
         <div className="modal">