[Feat] Added API key configuration checks and a reminder dialog,Fix the styling of the auth menu. (#24)

1.Added API key configuration checks and a reminder dialog.
2.Fix the styling of the auth menu

Author: ZuoTong-x

app/components/common/Dialog.tsx

@@ -234,23 +234,25 @@ export function ConfirmDialog({
   isOpen,
   onClose,
   onConfirm,
-  title = '确认',
+  title,
   message,
   confirmText = '确认',
   cancelText = '取消',
   type = 'default', // default, danger, warning
   showCancelButton = true,
+  showCloseButton = true,
   onCancel,
 }: {
   isOpen: boolean
   onClose: () => void
   onConfirm: () => void
   title?: string
-  message: string
+  message: string | React.ReactNode
   confirmText?: string | React.ReactNode
   cancelText?: string | React.ReactNode
   type?: 'default' | 'danger' | 'warning'
   showCancelButton?: boolean
+  showCloseButton?: boolean
   onCancel?: () => void
 }) {
   const getButtonStyle = (isConfirm: boolean) => {
@@ -308,6 +310,7 @@ export function ConfirmDialog({
       title={title}
       maxWidth="400px"
       className="confirm-dialog"
+      showCloseButton={showCloseButton}
     >
       <div style={{ marginBottom: '24px' }}>
         <p style={{ margin: 0, color: '#ccc', lineHeight: '1.5' }}>{message}</p>

app/components/layout/Navigation.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/hooks/useGlobalNotification'
 import { useTranslation } from 'react-i18next'
 import LanguageSwitcher from './LanguageSwitch'
+import './Navigation.scss'
 /*
   Top navigation component for the application.
 
@@ -240,10 +241,22 @@ export default function Navigation() {
               </button>
 
               {isAuthenticated && showUserMenu && (
-                <div className="user-menu">
+                <div
+                  className="user-menu"
+                  style={{ position: 'absolute', top: '100%', right: '10px' }}
+                >
                   <div className="user-menu-item">
                     <span>{t('nav.signedInAs')}</span>
-                    <strong>{userInfo.username}</strong>
+                    <strong
+                      style={{
+                        maxWidth: '200px',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {userInfo.username}
+                    </strong>
                   </div>
                   <button
                     className="user-menu-item user-menu-action"

app/i18n/locales/en/fronted.json

@@ -121,6 +121,12 @@
     "message": "We've detected that you're connecting from a location far from our servers, which may result in higher network latency and a suboptimal user experience. For the best performance and experience, we recommend accessing our open-source project and deploying it locally.",
     "confirmText": "Continue"
   },
+  "missingSecret": {
+    "message_llm": "Missing required API keys for large language model features. Please configure the following credentials:",
+    "message_tts": "Missing required API keys for text to speech features. Please configure the following credentials:",
+    "message_asr": "Missing required API keys for auto speech recognition features. Please configure the following credentials:",
+    "confirmText": "Go to Settings"
+  },
   "notification": {
     "editDefaultCharacterNotAllowed": "Editing the default character is not allowed. You must create a copy to make any changes.",
     "updateDefaultCharacterNameNotAllowed": "Cannot update character name for the default character",

app/i18n/locales/zh/fronted.json

@@ -121,6 +121,12 @@
     "message": "检测到你的地理位置距离在线服务很远，这可能导致更高的网络延迟并影响用户体验。为获得最佳性能和体验，我们建议访问我们的开源项目并部署在本地。",
     "confirmText": "仍要访问"
   },
+  "missingSecret": {
+    "message_llm": "缺少大语言模型功能所必须的API密钥，请配置以下凭证：",
+    "message_tts": "缺少文本转语音功能所必须的API密钥，请配置以下凭证：",
+    "message_asr": "缺少自动语音识别功能所必须的API密钥，请配置以下凭证：",
+    "confirmText": "前往配置"
+  },
   "notification": {
     "editDefaultCharacterNotAllowed": "不允许编辑默认角色。请在对话列表创建一个角色副本以修改配置。",
     "updateDefaultCharacterNameNotAllowed": "不允许更新默认角色的名称",

app/page.tsx

@@ -35,11 +35,13 @@ import {
   getIsLogin,
   loadAuthStateFromStorage,
   setAuthState,
+  getUserInfo,
 } from '@/features/auth/authStore'
 import { usePromptingSettings } from '@/hooks/usePromptingSettings'
 import { checkLocation, isSensetimeOrchestrator } from '@/utils/location'
 import { ConfirmDialog } from './components/common/Dialog'
 import { useTranslation } from 'react-i18next'
+import { fetchGetMissingSecret } from '@/request/api'
 
 const link = {
   href: 'https://github.com/dlp3d-ai/dlp3d.ai',
@@ -62,6 +64,7 @@ export default function Home() {
 
   const isChatStarting = useSelector(getIsChatStarting)
   const isLogin = useSelector(getIsLogin)
+  const user = useSelector(getUserInfo)
   const selectedModelIndex = useSelector(getSelectedModelIndex)
   const selectedCharacterId = useSelector(getSelectedCharacterId)
   const isCharacterLoading = useSelector(getIsCharacterLoading)
@@ -86,6 +89,16 @@ export default function Home() {
   const { loadUserCharacters } = usePromptingSettings()
   const [selectedScene, setSelectedScene] = useState(3) // Parameter for scene navigation
   const [locationDialogOpen, setLocationDialogOpen] = useState(false)
+  const [missingSecretDialogOpen, setMissingSecretDialogOpen] = useState(false)
+  const [missingSecret, setMissingSecret] = useState<{
+    llm_requirements: string[]
+    tts_requirements: string[]
+    asr_requirements: string[]
+  }>({
+    llm_requirements: [],
+    tts_requirements: [],
+    asr_requirements: [],
+  })
 
   useEffect(() => {
     setIsGlobalLoading(isLoading || isSceneLoading || isCharacterLoading)
@@ -143,6 +156,8 @@ export default function Home() {
    *
    * Dispatches actions to update loading state and triggers a custom event
    * after a delay to ensure all components are initialized.
+   *
+   * @returns void
    */
   const handleCharacterLoaded = useCallback(() => {
     dispatch(setIsCharacterLoading(false))
@@ -159,6 +174,8 @@ export default function Home() {
    * Handle scene change.
    *
    * @param scene The name of the scene to switch to.
+   *
+   * @returns void
    */
   const handleSceneChange = (scene: string) => {
     dispatch(setIsSceneLoading(true))
@@ -173,6 +190,8 @@ export default function Home() {
    * Handle scene loaded event.
    *
    * Dispatches actions to update loading state when the scene has finished loading.
+   *
+   * @returns void
    */
   const handleSceneLoaded = useCallback(() => {
     dispatch(setIsSceneLoading(false))
@@ -185,6 +204,8 @@ export default function Home() {
    * Validates prerequisites, saves camera and scene state, captures a screenshot,
    * and opens a new window with the chat interface. Handles TTS compatibility checks
    * and location-based warnings for specific server hosts.
+   *
+   * @returns Promise<void> Resolves after the new window is opened or a notice is shown.
    */
   const handleStartConversation = useCallback(async () => {
     if (isCharacterLoading || isSceneLoading) {
@@ -231,6 +252,7 @@ export default function Home() {
           setLocationDialogOpen(true)
           return
         }
+
         try {
           dispatch(setIsChatStarting(true))
           if (typeof window !== 'undefined') {
@@ -242,6 +264,24 @@ export default function Home() {
             await loadUserCharacters()
           }
           await new Promise(r => setTimeout(r, 800))
+          const missingSecret = await fetchGetMissingSecret(
+            user!.id,
+            selectedCharacterId!,
+          )
+          if (
+            missingSecret.llm_requirements.length > 0 ||
+            missingSecret.tts_requirements.length > 0 ||
+            missingSecret.asr_requirements.length > 0
+          ) {
+            const data = {
+              llm_requirements: missingSecret.llm_requirements.sort(),
+              tts_requirements: missingSecret.tts_requirements.sort(),
+              asr_requirements: missingSecret.asr_requirements.sort(),
+            }
+            setMissingSecret(data)
+            setMissingSecretDialogOpen(true)
+            return
+          }
 
           if (babylonViewerRef.current?.takeScreenshot) {
             const screenshotData = await captureScreenshot()
@@ -312,6 +352,14 @@ export default function Home() {
       window.removeEventListener('popstate', handleRouteChange)
     }
   }, [dispatch])
+  /**
+   * Chat action button.
+   *
+   * Renders the primary CTA to start a conversation, disabled when prerequisites
+   * are not met.
+   *
+   * @returns JSX.Element | null The button or null when hidden on mobile during startup.
+   */
   const ChatButton = useCallback(() => {
     if (isChatStarting || (isMobile && isLogin)) return null
     return (
@@ -347,6 +395,77 @@ export default function Home() {
     isCharacterLoading,
     isSceneLoading,
   ])
+  /**
+   * Missing secret requirements renderer.
+   *
+   * Displays lists of required secrets for LLM/TTS/ASR providers if any are missing.
+   *
+   * @returns JSX.Element The message content for the dialog.
+   */
+  const MissingSecretMessage = () => {
+    return (
+      <>
+        {missingSecret.llm_requirements.length > 0 && (
+          <div>
+            {t('missingSecret.message_llm')}
+            <div
+              style={{
+                padding: '20px 10px 20px 30px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+              }}
+            >
+              {missingSecret.llm_requirements.map(requirement => (
+                <div key={requirement}>
+                  <span style={{ fontWeight: 'bold' }}>•</span> {requirement}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {missingSecret.tts_requirements.length > 0 && (
+          <div>
+            {t('missingSecret.message_tts')}
+            <div
+              style={{
+                padding: '20px 10px 20px 30px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+              }}
+            >
+              {missingSecret.tts_requirements.map(requirement => (
+                <div key={requirement}>
+                  <span style={{ fontWeight: 'bold' }}>•</span> {requirement}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {missingSecret.asr_requirements.length > 0 && (
+          <div>
+            {t('missingSecret.message_asr')}
+            <div
+              style={{
+                padding: '20px 10px 20px 30px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+              }}
+            >
+              {missingSecret.asr_requirements.map(requirement => (
+                <div key={requirement}>
+                  <span style={{ fontWeight: 'bold' }}>•</span> {requirement}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </>
+    )
+  }
 
   return (
     <>
@@ -458,6 +577,20 @@ export default function Home() {
         message={t('networkLatencyWarning.message')}
         confirmText={t('networkLatencyWarning.confirmText')}
       />
+      {/* Missing Secret Dialog */}
+      <ConfirmDialog
+        isOpen={missingSecretDialogOpen}
+        onClose={() => {
+          setMissingSecretDialogOpen(false)
+        }}
+        showCloseButton={false}
+        showCancelButton={false}
+        message={<MissingSecretMessage />}
+        confirmText={t('missingSecret.confirmText')}
+        onConfirm={() => {
+          setMissingSecretDialogOpen(false)
+        }}
+      />
       {/* Footer */}
       {!isChatStarting && !isLogin && (
         <footer className={uiFadeOut ? 'fade-out' : ''}>