feat: redesign and make easy rebranding possible (#20)

This pull request introduces several improvements to the frontend applications, focusing on UI customization, environment variable management, Node.js version updates, and better handling of document deletion in the admin app. The most significant changes are the addition of a comprehensive UI customization guide, updates to environment variable documentation and usage, and enhancements to document deletion logic and tests.

**UI Customization and Documentation Improvements**

* Added a new `docs/UI_Customization.md` guide detailing how to customize bot name, logo, and theme for the frontend apps using environment variables, including instructions for Docker and Kubernetes deployments.
* Updated `README.md` and `services/frontend/README.md` to reference the new UI customization guide and document new environment variables for branding and theming. [[1]](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L111-R111) [[2]](diffhunk://#diff-d75aa0c448ddadae4b29e6c34aa5f7331fbacb37d08d956e9c2b23eedd46d3e7R75-R103)

**Environment and Build System Updates**

* Updated Node.js version requirements to 24 in workflow files, Dockerfiles, and documentation for improved compatibility and future-proofing. [[1]](diffhunk://#diff-9a979a1e38ba79e2c75e54c4bf21fe1a2a1b935e1736666565f992e634dadd0fL10-R10) [[2]](diffhunk://#diff-f3e59bc57dbbc3efc3a523180fc10892d015c070e3da98d9c4f4544a46bbe09fL1-R1) [[3]](diffhunk://#diff-28f7bf29a152b8f8fdc5459c9348fc51e5cfcb8c13a7199c9789ddcadbd8577dL1-R1) [[4]](diffhunk://#diff-d75aa0c448ddadae4b29e6c34aa5f7331fbacb37d08d956e9c2b23eedd46d3e7L23-R23)

**Frontend Development Workflow**

* Added a VSCode task (`.vscode/tasks.json`) for running frontend admin linting to streamline developer experience.

**Admin App Document Deletion Logic and Testing**

* Added and updated Cypress E2E tests (`delete-disable.cy.ts`, `delete-processing.cy.ts`, and `app.cy.ts`) to ensure that documents in `PROCESSING` state cannot be deleted, while those in `READY` state can be deleted, improving reliability and user experience. [[1]](diffhunk://#diff-ea1c0a3264e5b41498094ec17883df134f4dad44d474fd3ac2c3cb929d6d86c7R1-R25) [[2]](diffhunk://#diff-4a605b706d35a31bc48f1af8bfdb3360829ba6f0d59c2dd3dd54972333567c3dR1-R20) [[3]](diffhunk://#diff-4edb9e8548cdd91e3f89e64d6c9458fb20da803f73759bc7613c2ccd42abb98eR6-R25)

**Code and Style Consistency**

* Refactored `App.vue` files for both chat and admin apps to use consistent import and style conventions, and improved theme initialization in chat app. [[1]](diffhunk://#diff-aec53716ff6c4f2c234b589983906d2ffddd1cc67eabf7cd5c676fad77ff0751L1-R5) [[2]](diffhunk://#diff-aec53716ff6c4f2c234b589983906d2ffddd1cc67eabf7cd5c676fad77ff0751L15-R28) [[3]](diffhunk://#diff-98ed9fb0f39bd9e26a573ebe1296e1e723eb79275bd4b4d6064c64dbf81dcefaL1-R35)

**[[1]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4R1-R351) [[2]](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L111-R111) [[3]](diffhunk://#diff-d75aa0c448ddadae4b29e6c34aa5f7331fbacb37d08d956e9c2b23eedd46d3e7R75-R103) [[4]](diffhunk://#diff-9a979a1e38ba79e2c75e54c4bf21fe1a2a1b935e1736666565f992e634dadd0fL10-R10) [[5]](diffhunk://#diff-f3e59bc57dbbc3efc3a523180fc10892d015c070e3da98d9c4f4544a46bbe09fL1-R1)**

Author: huhn511

.github/workflows/lint-and-test.yml

@@ -7,7 +7,7 @@ on:
   workflow_dispatch:
 
 env:
-  NODE_VERSION: '22.12.x'
+  NODE_VERSION: '24'
   PYTHON_VERSION: '3.13'
 
 jobs:

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "frontend-admin-lint",
+			"type": "shell",
+			"command": "npm run -w services/frontend eslint",
+			"problemMatcher": [
+				"$eslint-stylish"
+			],
+			"group": "build"
+		}
+	]
+}

README.md

@@ -108,7 +108,7 @@ The frontend provides user-friendly interfaces for both chat and document manage
 - **Chat App**: Interface for interacting with the RAG system
 - **Admin App**: Interface for managing documents and system configuration
 
-For further information, please consult the [Frontend README](./services/frontend/README.md).
+For further information, please consult the [Frontend README](./services/frontend/README.md). For branding, theming, and logo configuration, see the [UI Customization Guide](./docs/UI_Customization.md).
 
 #### 1.1.6 Infrastructure
 

docs/UI_Customization.md

@@ -0,0 +1,351 @@
+# UI Customization Guide
+
+This guide explains how to customize the RAG Template frontend applications, including bot branding, theming, and logo configuration.
+
+Note: In this document, “frontend” refers to the folder at services/frontend in this repository. All links below point to files in that folder or elsewhere in this repo.
+
+## Overview
+
+The RAG Template frontend supports several customization options:
+
+- **Bot Name**: Customize the AI assistant's name in chat messages
+- **Logo/Branding**: Replace the default logo with your organization's branding
+- **Theme System**: Switch between light and dark modes with user preference persistence
+
+## Configuration Options
+
+### Environment Variables
+
+All customization is done through environment variables that can be set at build time or runtime:
+
+| Variable | Description | Default Value | Example |
+|----------|-------------|---------------|---------|
+| `VITE_BOT_NAME` | The AI assistant's display name | "Knowledge Agent" | "DocBot" |
+| `VITE_UI_LOGO_PATH` | Common path to the main navigation logo (fallback for both light/dark) | "/assets/navigation-logo.svg" | "/assets/my-logo.png" |
+| `VITE_UI_LOGO_PATH_LIGHT` | Path to logo used in light mode (falls back to `VITE_UI_LOGO_PATH`) | — | "/assets/logo-light.svg" |
+| `VITE_UI_LOGO_PATH_DARK` | Path to logo used in dark mode (falls back to `VITE_UI_LOGO_PATH`) | — | "/assets/logo-dark.svg" |
+| `VITE_UI_THEME_DEFAULT` | Default theme when user first visits | "light" | "dark" |
+| `VITE_UI_THEME_OPTIONS` | Available theme options (comma-separated) | "light,dark" | "light,dark,auto" |
+
+### Bot Name Customization
+
+The bot name appears in the initial welcome message in the chat interface.
+
+**Default Message:**
+
+```text
+Hi 👋, I'm your AI Assistant Knowledge Agent, here to support you with any questions regarding the provided documents!
+```
+
+**Setting Custom Bot Name:**
+
+1. **Development Environment:**
+
+   ```bash
+   # In your .env file
+   VITE_BOT_NAME=DocBot
+   ```
+
+2. **Docker/Production:**
+
+   ```bash
+   # Environment variable
+   export VITE_BOT_NAME="Your Custom Bot Name"
+   ```
+
+3. **Kubernetes/Helm:**
+
+   ```yaml
+   # In your values.yaml or deployment
+   env:
+     - name: VITE_BOT_NAME
+       value: "Corporate Knowledge Assistant"
+   ```
+
+### Logo Customization
+
+The logo appears in the navigation header of both chat and admin applications. You can configure separate logos for light and dark themes.
+
+**Setting Custom Logos:**
+
+1. Place your logo files in the app assets directory:
+
+- Chat app: services/frontend/apps/chat-app/public/assets/ ([open folder](../services/frontend/apps/chat-app/public/assets))
+- Admin app: services/frontend/apps/admin-app/public/assets/ ([open folder](../services/frontend/apps/admin-app/public/assets))
+
+1. Set the environment variables:
+
+  ```bash
+  # Preferred: specify light and dark explicitly
+  VITE_UI_LOGO_PATH_LIGHT=/assets/my-logo-light.svg
+  VITE_UI_LOGO_PATH_DARK=/assets/my-logo-dark.svg
+
+  # Optional: common fallback used when LIGHT/DARK are not set
+  VITE_UI_LOGO_PATH=/assets/my-logo.svg
+  ```
+
+**Logo Requirements:**
+
+- **Format**: SVG, PNG, or JPG
+- **Size**: Optimized for 128px width (will be scaled to w-32 class)
+- **Background**: Transparent recommended for better theme compatibility
+- **Path**: Must be accessible from the public assets directory
+
+**Fallback order:**
+
+- Light: `VITE_UI_LOGO_PATH_LIGHT` → `VITE_UI_LOGO_PATH` → `/assets/navigation-logo.svg` (default asset exists in both apps: [chat](../services/frontend/apps/chat-app/public/assets/navigation-logo.svg), [admin](../services/frontend/apps/admin-app/public/assets/navigation-logo.svg))
+- Dark: `VITE_UI_LOGO_PATH_DARK` → `VITE_UI_LOGO_PATH` → `/assets/navigation-logo.svg` (default asset exists in both apps: [chat](../services/frontend/apps/chat-app/public/assets/navigation-logo.svg), [admin](../services/frontend/apps/admin-app/public/assets/navigation-logo.svg))
+
+**Examples:**
+
+```bash
+# Separate light/dark logos
+VITE_UI_LOGO_PATH_LIGHT=/assets/company-logo-light.svg
+VITE_UI_LOGO_PATH_DARK=/assets/company-logo-dark.svg
+
+# Only a common logo
+VITE_UI_LOGO_PATH=/assets/company-logo.svg
+```
+
+### Theme System
+
+The application supports a flexible theme system with user preference persistence.
+
+**Available Themes:**
+
+- `light`: Light mode (default)
+- `dark`: Dark mode
+
+**Theme Configuration:**
+
+1. **Set Default Theme:**
+
+   ```bash
+   # Users will see dark mode by default
+   VITE_UI_THEME_DEFAULT=dark
+   ```
+
+1. **Configure Available Options:**
+
+   ```bash
+   # Only allow light mode (remove theme toggle)
+   VITE_UI_THEME_OPTIONS=light
+
+   # Support both themes (default)
+   VITE_UI_THEME_OPTIONS=light,dark
+   ```
+
+**Theme Behavior:**
+
+- Theme preference is saved in browser's localStorage
+- Theme persists across browser sessions
+- Theme toggle button appears only when multiple options are available
+- Manual theme switching overrides the default setting
+
+## Development Setup
+
+### Local Development
+
+1. **Create/modify `.env` file in frontend directory** (services/frontend/.env):
+
+   ```bash
+   # Bot customization
+   VITE_BOT_NAME=Development Bot
+
+   # Logo customization
+   VITE_UI_LOGO_PATH_LIGHT=/assets/dev-logo-light.svg
+   VITE_UI_LOGO_PATH_DARK=/assets/dev-logo-dark.svg
+   # Optional common fallback
+   # VITE_UI_LOGO_PATH=/assets/dev-logo.svg
+
+   # Theme customization
+   VITE_UI_THEME_DEFAULT=light
+   VITE_UI_THEME_OPTIONS=light,dark
+   ```
+
+1. **Start development server** (scripts are defined in [services/frontend/package.json](../services/frontend/package.json)):
+
+   ```bash
+   npm run chat:serve
+   # or
+   npm run admin:serve
+   ```
+
+### Docker Deployment
+
+For Docker deployments, the frontend uses a special script (services/frontend/env.sh) to replace environment variables at runtime:
+
+1. **Set environment variables in your container:**
+
+   ```dockerfile
+   ENV VITE_BOT_NAME="Production Assistant"
+   ENV VITE_UI_LOGO_PATH_LIGHT="/assets/prod-logo-light.svg"
+   ENV VITE_UI_LOGO_PATH_DARK="/assets/prod-logo-dark.svg"
+   ENV VITE_UI_THEME_DEFAULT="light"
+   ```
+
+1. **The env.sh script automatically replaces variables** in built JS/CSS files when the container starts. See [services/frontend/env.sh](../services/frontend/env.sh).
+
+### Kubernetes/Helm Deployment
+
+1. **Configure in your Helm values.yaml** (example chart values at [infrastructure/rag/values.yaml](../infrastructure/rag/values.yaml)):
+
+   ```yaml
+   frontend:
+     env:
+       VITE_BOT_NAME: "Enterprise Knowledge Bot"
+       VITE_UI_LOGO_PATH_LIGHT: "/assets/enterprise-logo-light.svg"
+       VITE_UI_LOGO_PATH_DARK: "/assets/enterprise-logo-dark.svg"
+       VITE_UI_THEME_DEFAULT: "dark"
+       VITE_UI_THEME_OPTIONS: "light,dark"
+   ```
+
+2. **Or use ConfigMap:**
+
+   ```yaml
+   apiVersion: v1
+   kind: ConfigMap
+   metadata:
+     name: frontend-config
+   data:
+     VITE_BOT_NAME: "K8s Assistant"
+     VITE_UI_LOGO_PATH_LIGHT: "/assets/k8s-logo-light.svg"
+     VITE_UI_LOGO_PATH_DARK: "/assets/k8s-logo-dark.svg"
+   ```
+
+## Advanced Customization
+
+### Adding Custom Themes
+
+To add custom themes beyond light/dark:
+
+1. **Update the settings configuration** in [services/frontend/libs/shared/settings.ts](../services/frontend/libs/shared/settings.ts):
+
+   ```typescript
+   // frontend/libs/shared/settings.ts
+   const defaultSettings: AppSettings = {
+     ui: {
+       theme: {
+         default: "light",
+         options: ["light", "dark", "custom"], // Add your theme
+       },
+     },
+   };
+   ```
+
+1. **Configure DaisyUI themes** in [services/frontend/tailwind.config.js](../services/frontend/tailwind.config.js):
+
+   ```javascript
+   module.exports = {
+     daisyui: {
+       themes: [
+         "light",
+         "dark",
+         {
+           custom: {
+             "primary": "#your-color",
+             "secondary": "#your-color",
+             // ... more theme colors
+           }
+         }
+       ],
+     },
+   };
+   ```
+
+### Internationalization
+
+Bot names and messages support internationalization:
+
+1. **Modify translation files:**
+
+  ```json
+  // services/frontend/libs/i18n/chat/en.json
+   {
+     "chat": {
+       "initialMessage": "Hi 👋, I'm your AI Assistant {bot_name}, here to help!"
+     }
+   }
+   ```
+
+1. **Add language-specific bot names:**
+
+  ```json
+  // services/frontend/libs/i18n/chat/de.json
+   {
+     "chat": {
+       "initialMessage": "Hallo 👋, ich bin dein KI-Assistent {bot_name}, hier um zu helfen!"
+     }
+   }
+   ```
+  Files: [en.json](../services/frontend/libs/i18n/chat/en.json), [de.json](../services/frontend/libs/i18n/chat/de.json)
+
+## Troubleshooting
+
+### Bot Name Not Updating
+
+- **Issue**: Bot name shows as `{bot_name}` instead of actual name
+- **Cause**: Vue computed property not accessed correctly
+- **Solution**: Use `initialMessage.value` instead of `initialMessage` in the store
+
+### Logo Not Loading / Wrong for Theme
+
+- **Issue**: Logo doesn't appear or shows broken image
+- **Cause**: Incorrect path or missing asset
+- **Solutions**:
+  - Verify files exist in `public/assets/` directory
+  - Check `VITE_UI_LOGO_PATH_LIGHT` / `VITE_UI_LOGO_PATH_DARK` (or `VITE_UI_LOGO_PATH` fallback)
+  - Ensure path starts with `/assets/`
+  - Check browser network tab for 404 errors
+
+### Theme Not Persisting
+
+- **Issue**: Theme resets to default on page refresh
+- **Cause**: localStorage not being saved/loaded correctly
+- **Solutions**:
+  - Check browser localStorage for `app-theme` key
+  - Verify theme value is in available options
+  - Clear localStorage and try again
+
+### Environment Variables Not Working in Production
+
+- **Issue**: Customization works in development but not production
+- **Cause**: Vite environment variables are build-time only
+- **Solutions**:
+  - For Docker: Ensure `env.sh` script runs after copying files
+  - For Kubernetes: Use ConfigMap/Secret with proper mounting
+  - Verify environment variables are set in container
+
+## Example Configurations
+
+### Corporate Deployment
+
+```bash
+VITE_BOT_NAME="Corporate Knowledge Assistant"
+VITE_UI_LOGO_PATH_LIGHT="/assets/corporate-logo-light.svg"
+VITE_UI_LOGO_PATH_DARK="/assets/corporate-logo-dark.svg"
+# Optional common fallback
+# VITE_UI_LOGO_PATH="/assets/corporate-logo.svg"
+VITE_UI_THEME_DEFAULT="light"
+VITE_UI_THEME_OPTIONS="light,dark"
+```
+
+### Development Environment
+
+```bash
+VITE_BOT_NAME="Dev Bot"
+VITE_UI_LOGO_PATH_LIGHT="/assets/dev-logo-light.png"
+VITE_UI_LOGO_PATH_DARK="/assets/dev-logo-dark.png"
+VITE_UI_THEME_DEFAULT="dark"
+VITE_UI_THEME_OPTIONS="light,dark"
+```
+
+### Minimal Configuration
+
+```bash
+VITE_BOT_NAME="Assistant"
+VITE_UI_THEME_DEFAULT="light"
+VITE_UI_THEME_OPTIONS="light"
+```
+
+This customization system provides flexible branding options while maintaining a clean, maintainable codebase.

services/frontend/.env.production

@@ -1,6 +1,6 @@
-VITE_API_URL = VITE_API_URL
-VITE_ADMIN_URL = VITE_ADMIN_URL
-VITE_CHAT_URL = VITE_CHAT_URL
-VITE_AUTH_USERNAME = VITE_AUTH_USERNAME
-VITE_AUTH_PASSWORD = VITE_AUTH_PASSWORD
-VITE_CHAT_AUTH_ENABLED = true
+VITE_API_URL=VITE_API_URL
+VITE_ADMIN_URL=VITE_ADMIN_URL
+VITE_CHAT_URL=VITE_CHAT_URL
+VITE_AUTH_USERNAME=VITE_AUTH_USERNAME
+VITE_AUTH_PASSWORD=VITE_AUTH_PASSWORD
+VITE_CHAT_AUTH_ENABLED=true