feat/redesign-and-improvements

docs/UI_Customization.md

@@ -0,0 +1,293 @@
+# UI Customization Guide
+
+This guide explains how to customize the RAG Template frontend applications, including bot branding, theming, and logo configuration.
+
+## 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` | Path to the main navigation logo | "/assets/navigation-logo.svg" | "/assets/my-logo.png" |
+| `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:**
+```
+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.
+
+**Setting Custom Logo:**
+
+1. **Place your logo file** in the `frontend/apps/[app-name]/public/assets/` directory
+2. **Set the environment variable:**
+   ```bash
+   VITE_UI_LOGO_PATH=/assets/my-company-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
+
+**Example:**
+```bash
+# Using a PNG logo
+VITE_UI_LOGO_PATH=/assets/company-logo.png
+
+# Using an SVG with custom path
+VITE_UI_LOGO_PATH=/assets/branding/main-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
+   ```
+
+2. **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:**
+   ```bash
+   # Bot customization
+   VITE_BOT_NAME=Development Bot
+
+   # Logo customization
+   VITE_UI_LOGO_PATH=/assets/dev-logo.svg
+
+   # Theme customization
+   VITE_UI_THEME_DEFAULT=light
+   VITE_UI_THEME_OPTIONS=light,dark
+   ```
+
+2. **Start development server:**
+   ```bash
+   npm run chat:serve
+   # or
+   npm run admin:serve
+   ```
+
+### Docker Deployment
+
+For Docker deployments, the frontend uses a special script (`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="/assets/prod-logo.svg"
+   ENV VITE_UI_THEME_DEFAULT="light"
+   ```
+
+2. **The env.sh script automatically replaces variables** in built JS/CSS files when the container starts.
+
+### Kubernetes/Helm Deployment
+
+1. **Configure in your Helm values.yaml:**
+   ```yaml
+   frontend:
+     env:
+       VITE_BOT_NAME: "Enterprise Knowledge Bot"
+       VITE_UI_LOGO_PATH: "/assets/enterprise-logo.svg"
+       VITE_UI_THEME_DEFAULT: "dark"
+       VITE_UI_THEME_OPTIONS: "light,dark"
+   ```
+
+2. **Or use ConfigMap/Secret:**
+   ```yaml
+   apiVersion: v1
+   kind: ConfigMap
+   metadata:
+     name: frontend-config
+   data:
+     VITE_BOT_NAME: "K8s Assistant"
+     VITE_UI_LOGO_PATH: "/assets/k8s-logo.svg"
+   ```
+
+## Advanced Customization
+
+### Adding Custom Themes
+
+To add custom themes beyond light/dark:
+
+1. **Update the settings configuration:**
+   ```typescript
+   // frontend/libs/shared/settings.ts
+   const defaultSettings: AppSettings = {
+     ui: {
+       theme: {
+         default: "light",
+         options: ["light", "dark", "custom"], // Add your theme
+       },
+     },
+   };
+   ```
+
+2. **Configure DaisyUI themes** in `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
+   // frontend/libs/i18n/chat/en.json
+   {
+     "chat": {
+       "initialMessage": "Hi 👋, I'm your AI Assistant {bot_name}, here to help!"
+     }
+   }
+   ```
+
+2. **Add language-specific bot names:**
+   ```json
+   // frontend/libs/i18n/chat/de.json
+   {
+     "chat": {
+       "initialMessage": "Hallo 👋, ich bin dein KI-Assistent {bot_name}, hier um zu helfen!"
+     }
+   }
+   ```
+
+## 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
+- **Issue**: Logo doesn't appear or shows broken image
+- **Cause**: Incorrect path or missing asset
+- **Solutions**:
+  - Verify file exists in `public/assets/` directory
+  - Check VITE_UI_LOGO_PATH value
+  - 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="/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="/assets/dev-logo.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.

frontend/README.md

@@ -72,10 +72,20 @@ npm run test
 To change the theme, open the `tailwind.config.js` file and refer to the available color configuration options for DaisyUI at https://daisyui.com/docs/colors/
 
 ## Environment variables
+
+### Application URLs
 - VITE_API_URL = The URL for the backend
 - VITE_ADMIN_URL = The URL where the admin frontend is running
 - VITE_CHAT_URL = The URL where the chat frontend is running
 
+### UI Customization
+- VITE_BOT_NAME = The AI assistant's display name (default: "Knowledge Agent")
+- VITE_UI_LOGO_PATH = Path to the main navigation logo (default: "/assets/navigation-logo.svg")
+- VITE_UI_THEME_DEFAULT = Default theme when user first visits (default: "light")
+- VITE_UI_THEME_OPTIONS = Available theme options, comma-separated (default: "light,dark")
+
+For detailed UI customization instructions, see [UI Customization Guide](../docs/UI_Customization.md).
+
 > Important: 
 >
 > The environment variables are not used after the docker-image is build. 

frontend/apps/admin-app/src/App.vue

@@ -1,29 +1,29 @@
-<script lang="ts"
-        setup>
-        import { RouterView } from 'vue-router'
-        import { LogoContainer, NavigationContainer } from '@shared/ui';
-        import { useI18n } from 'vue-i18n';
-        import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline';
+<script lang="ts" setup>
+import { RouterView } from "vue-router";
+import { LogoContainer, NavigationContainer } from "@shared/ui";
+import { useI18n } from "vue-i18n";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 
-        const { t } = useI18n();
-        const chatURL = import.meta.env.VITE_CHAT_URL;
+const { t } = useI18n();
+const chatURL = import.meta.env.VITE_CHAT_URL;
 </script>
 
 <template>
   <main class="bg-base-100 flex flex-col overflow-hidden">
     <NavigationContainer>
-      <a class="flex gap-2 items-center btn btn-primary border border-opacity-10 border-white btn-sm"
-         target="_blank"
-         :href="chatURL">
+      <a
+        class="flex gap-2 items-center btn btn-primary border border-opacity-10 border-white btn-sm"
+        target="_blank"
+        :href="chatURL"
+      >
         <ArrowTopRightOnSquareIcon class="w-4 h-4" />
-        {{ t('documents.chat') }}
+        {{ t("documents.chat") }}
       </a>
     </NavigationContainer>
-    <LogoContainer />
     <RouterView class="flex-1" />
   </main>
 </template>
 
 <style lang="css">
-@import '@shared/style';
+@import "@shared/style";
 </style>