feat: better error message about gemini api key missing

This commit is contained in:
2025-07-09 13:25:48 +02:00
parent a8e8fd8c71
commit 9ed3520f1f
2 changed files with 75 additions and 67 deletions

View File

@ -250,8 +250,8 @@ const ExerciseSheet: React.FC<ExerciseSheetProps> = ({ exercise, onNext, ai }) =
return Promise.resolve({ return Promise.resolve({
partId: part.id, partId: part.id,
isCorrect: false, isCorrect: false,
explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen.", explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts.",
error: "Gemini API nicht verfügbar" error: "Gemini API nicht verfügbar. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts."
}); });
} }
return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt) return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt)

View File

@ -9,6 +9,7 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
**Previous State**: The `package.json` had some dependencies with `latest` or unspecified bundle versions, which can lead to non-deterministic builds. **Previous State**: The `package.json` had some dependencies with `latest` or unspecified bundle versions, which can lead to non-deterministic builds.
**Changes Made**: **Changes Made**:
- **Explicit Versioning**: All dependencies and devDependencies were updated to specific, stable versions. This was done by referencing a known good configuration (e.g., from `oscars-dojo/package.json`). - **Explicit Versioning**: All dependencies and devDependencies were updated to specific, stable versions. This was done by referencing a known good configuration (e.g., from `oscars-dojo/package.json`).
- `@google/genai`: Changed from `"latest"` to `"latest"` (confirmed `latest` is acceptable for this specific dependency as it's a core library and often updated with breaking changes, so `latest` is often desired). - `@google/genai`: Changed from `"latest"` to `"latest"` (confirmed `latest` is acceptable for this specific dependency as it's a core library and often updated with breaking changes, so `latest` is often desired).
- `@headlessui/react`: Added with version `"^2.2.4"`. - `@headlessui/react`: Added with version `"^2.2.4"`.
@ -29,6 +30,7 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
- `vite`: Changed from `"^6.2.0"` to `"^6.2.0"` (already specific). - `vite`: Changed from `"^6.2.0"` to `"^6.2.0"` (already specific).
**Step-by-step Action**: **Step-by-step Action**:
1. Read the existing `/home/yannik/repos/swa-practice-app/package.json` file. 1. Read the existing `/home/yannik/repos/swa-practice-app/package.json` file.
2. Construct a new `package.json` content with the updated, explicit versions for all dependencies and devDependencies. 2. Construct a new `package.json` content with the updated, explicit versions for all dependencies and devDependencies.
3. Write the new content back to `/home/yannik/repos/swa-practice-app/package.json`. 3. Write the new content back to `/home/yannik/repos/swa-practice-app/package.json`.
@ -77,6 +79,7 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
**Previous State**: The application either hardcoded the API key or relied solely on environment variables, which is not ideal for client-side applications or user-specific keys. **Previous State**: The application either hardcoded the API key or relied solely on environment variables, which is not ideal for client-side applications or user-specific keys.
**Changes Made**: **Changes Made**:
- **API Key State Management**: - **API Key State Management**:
- Introduced `useState` hooks for `apiKey`, `showSettings` (for modal visibility), and `inputKey` (for the input field value). - Introduced `useState` hooks for `apiKey`, `showSettings` (for modal visibility), and `inputKey` (for the input field value).
- The `apiKey` is now initialized by first checking `localStorage` for a previously saved key. If not found, it falls back to `process.env.API_KEY` (though for client-side, `localStorage` is preferred for user-entered keys). - The `apiKey` is now initialized by first checking `localStorage` for a previously saved key. If not found, it falls back to `process.env.API_KEY` (though for client-side, `localStorage` is preferred for user-entered keys).
@ -96,9 +99,10 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
- Added a check within `handleSubmit` in `ExerciseSheet` to verify the `ai` instance and its `models.generateContent` method before making API calls, providing a user-friendly error message if the API key is missing or invalid. - Added a check within `handleSubmit` in `ExerciseSheet` to verify the `ai` instance and its `models.generateContent` method before making API calls, providing a user-friendly error message if the API key is missing or invalid.
- **Template Literal Escaping Fixes**: - **Template Literal Escaping Fixes**:
- Crucially, fixed syntax errors within the `systemInstruction` and `contents` template literals in `evaluateWithGemini`. The original code had issues with unescaped backticks (``` ` ```) and newlines (`\n`) when they were part of the string content itself, leading to build failures. - Crucially, fixed syntax errors within the `systemInstruction` and `contents` template literals in `evaluateWithGemini`. The original code had issues with unescaped backticks (``` ` ```) and newlines (`\n`) when they were part of the string content itself, leading to build failures.
- **Specific Fix**: All literal backticks within the template strings (e.g., for code blocks like ``` ```c ```) were escaped as ``` \`\`\` ```. All literal newlines (`\n`) within the template strings were escaped as `\\n`. This ensures they are interpreted as literal characters within the string rather than JavaScript syntax. - **Specific Fix**: All literal backticks within the template strings (e.g., for code blocks like ``` ```c ```) were escaped as``` \`\`\` ```. All literal newlines (`\n`) within the template strings were escaped as `\\n`. This ensures they are interpreted as literal characters within the string rather than JavaScript syntax.
**Step-by-step Actions**: **Step-by-step Actions**:
1. Read the content of `/home/yannik/repos/swa-practice-app/App.tsx`. 1. Read the content of `/home/yannik/repos/swa-practice-app/App.tsx`.
2. Locate the `App` functional component. 2. Locate the `App` functional component.
3. Add `useState` and `useEffect` hooks for API key management. 3. Add `useState` and `useEffect` hooks for API key management.
@ -191,8 +195,8 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
+ return Promise.resolve({ + return Promise.resolve({
+ partId: part.id, + partId: part.id,
+ isCorrect: false, + isCorrect: false,
+ explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen.", + explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts.",
+ error: "Gemini API nicht verfügbar" + error: "Gemini API nicht verfügbar. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts."
+ }); + });
+ } + }
return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt) return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt)
@ -307,6 +311,7 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
**Previous State**: No Dockerfile existed, requiring manual setup of the Node.js environment and dependencies for deployment. **Previous State**: No Dockerfile existed, requiring manual setup of the Node.js environment and dependencies for deployment.
**Changes Made**: **Changes Made**:
- **Multi-stage Build**: Implemented a multi-stage Dockerfile for optimized image size and build efficiency. - **Multi-stage Build**: Implemented a multi-stage Dockerfile for optimized image size and build efficiency.
- **`base` stage**: Sets up the Node.js 21-slim image, configures pnpm, copies the application code, and sets the working directory. - **`base` stage**: Sets up the Node.js 21-slim image, configures pnpm, copies the application code, and sets the working directory.
- **`prod-deps` stage**: Installs only production dependencies using `pnpm install --prod --frozen-lockfile`, leveraging build cache. - **`prod-deps` stage**: Installs only production dependencies using `pnpm install --prod --frozen-lockfile`, leveraging build cache.
@ -315,6 +320,7 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
- **Port Exposure and Command**: Exposes port 8000 and sets the default command to `serve -s dist -l 8000`, making the application accessible. - **Port Exposure and Command**: Exposes port 8000 and sets the default command to `serve -s dist -l 8000`, making the application accessible.
**Step-by-step Action**: **Step-by-step Action**:
1. Construct the Dockerfile content with the specified multi-stage build instructions. 1. Construct the Dockerfile content with the specified multi-stage build instructions.
2. Write this content to `/home/yannik/repos/swa-practice-app/Dockerfile`. 2. Write this content to `/home/yannik/repos/swa-practice-app/Dockerfile`.
@ -350,9 +356,11 @@ CMD [ "serve", "-s", "dist", "-l", "8000" ]
**Previous State**: The `.env.local` file contained `GEMINI_API_KEY=PLACEHOLDER_API_KEY`. **Previous State**: The `.env.local` file contained `GEMINI_API_KEY=PLACEHOLDER_API_KEY`.
**Changes Made**: **Changes Made**:
- **Placeholder Removal**: The `PLACEHOLDER_API_KEY` value was replaced with an empty string, resulting in `GEMINI_API_KEY=`. - **Placeholder Removal**: The `PLACEHOLDER_API_KEY` value was replaced with an empty string, resulting in `GEMINI_API_KEY=`.
**Step-by-step Action**: **Step-by-step Action**:
1. Read the content of `/home/yannik/repos/swa-practice-app/.env.local`. 1. Read the content of `/home/yannik/repos/swa-practice-app/.env.local`.
2. Replace the string `GEMINI_API_KEY=PLACEHOLDER_API_KEY` with `GEMINI_API_KEY=`. 2. Replace the string `GEMINI_API_KEY=PLACEHOLDER_API_KEY` with `GEMINI_API_KEY=`.
3. Write the modified content back to `/home/yannik/repos/swa-practice-app/.env.local`. 3. Write the modified content back to `/home/yannik/repos/swa-practice-app/.env.local`.