refactor: frontend

docs/UI_Customization.md

@@ -24,8 +24,8 @@ All customization is done through environment variables that can be set at build
 | `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" |
+| `VITE_UI_THEME_DEFAULT` | Default theme when user first visits | "dark" | "light" |
+| `VITE_UI_THEME_OPTIONS` | Available theme options (comma-separated) | "light,dark" | "light" |
 
 ### Bot Name Customization
 
@@ -93,8 +93,8 @@ The logo appears in the navigation header of both chat and admin applications. Y
 
 **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))
+- Light: `VITE_UI_LOGO_PATH_LIGHT` → `VITE_UI_LOGO_PATH` → `/assets/navigation-logo-light.svg` (default asset exists in both apps: [chat](../services/frontend/apps/chat-app/public/assets/navigation-logo-light.svg), [admin](../services/frontend/apps/admin-app/public/assets/navigation-logo-light.svg))
+- Dark: `VITE_UI_LOGO_PATH_DARK` → `VITE_UI_LOGO_PATH` → `/assets/navigation-logo-dark.svg` (default asset exists in both apps: [chat](../services/frontend/apps/chat-app/public/assets/navigation-logo-dark.svg), [admin](../services/frontend/apps/admin-app/public/assets/navigation-logo-dark.svg))
 
 **Examples:**
 
@@ -113,8 +113,8 @@ The application supports a flexible theme system with user preference persistenc
 
 **Available Themes:**
 
-- `light`: Light mode (default)
-- `dark`: Dark mode
+- `light`: Light mode
+- `dark`: Dark mode (default)
 
 **Theme Configuration:**
 
@@ -139,7 +139,7 @@ The application supports a flexible theme system with user preference persistenc
 
 - Theme preference is saved in browser's localStorage
 - Theme persists across browser sessions
-- Theme toggle button appears only when multiple options are available
+- The built-in theme toggle is shown only when both `light` and `dark` are available
 - Manual theme switching overrides the default setting
 
 ## Development Setup
@@ -284,9 +284,12 @@ Bot names and messages support internationalization:
 
 ### 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
+- **Issue**: Bot name stays at the default or shows a placeholder value (e.g. `VITE_BOT_NAME`)
+- **Cause**: Runtime env replacement did not run (Vite env vars are build-time by default)
+- **Solutions**:
+  - Ensure `services/frontend/.env.production` contains placeholders for the variables you want to replace (this repo includes `VITE_BOT_NAME`, `VITE_UI_*`, etc.)
+  - Ensure the container runs `env.sh` after copying the built files into `/usr/share/nginx/html`
+  - Verify the variable is set in the container environment (Kubernetes `ConfigMap`/`Secret`, Docker `-e`, etc.)
 
 ### Logo Not Loading / Wrong for Theme
 
@@ -312,6 +315,7 @@ Bot names and messages support internationalization:
 - **Issue**: Customization works in development but not production
 - **Cause**: Vite environment variables are build-time only
 - **Solutions**:
+  - Ensure the variables exist as placeholders at build time (see `services/frontend/.env.production`)
   - 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

services/frontend/.env.development

@@ -1,6 +1,6 @@
-VITE_API_URL=http://doctopus.localhost/api
-VITE_ADMIN_URL=http://admin.doctopus.localhost/api
-VITE_CHAT_URL=http://localhost:4200
-VITE_AUTH_USERNAME=foo
-VITE_AUTH_PASSWORD=bar
-VITE_CHAT_AUTH_ENABLED=false
+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=VITE_CHAT_AUTH_ENABLED

services/frontend/.env.production

@@ -3,4 +3,10 @@ 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_CHAT_AUTH_ENABLED=VITE_CHAT_AUTH_ENABLED
+VITE_BOT_NAME=VITE_BOT_NAME
+VITE_UI_LOGO_PATH=VITE_UI_LOGO_PATH
+VITE_UI_LOGO_PATH_LIGHT=VITE_UI_LOGO_PATH_LIGHT
+VITE_UI_LOGO_PATH_DARK=VITE_UI_LOGO_PATH_DARK
+VITE_UI_THEME_DEFAULT=VITE_UI_THEME_DEFAULT
+VITE_UI_THEME_OPTIONS=VITE_UI_THEME_OPTIONS

services/frontend/README.md

@@ -91,9 +91,9 @@ To change the theme, open the `tailwind.config.js` file and refer to the availab
 
 ### UI Customization
 - VITE_BOT_NAME = The AI assistant's display name (default: "Knowledge Agent")
-- VITE_UI_LOGO_PATH = Common path to the main navigation logo (default: "/assets/navigation-logo.svg"). Used as a fallback for both light/dark.
-- VITE_UI_LOGO_PATH_LIGHT = Path to the logo used in light mode (fallbacks to VITE_UI_LOGO_PATH)
-- VITE_UI_LOGO_PATH_DARK = Path to the logo used in dark mode (fallbacks to VITE_UI_LOGO_PATH)
+- VITE_UI_LOGO_PATH = Common path to the main navigation logo (fallback for both light/dark, default: "/assets/navigation-logo.svg")
+- VITE_UI_LOGO_PATH_LIGHT = Path to the logo used in light mode (fallbacks to VITE_UI_LOGO_PATH, default: "/assets/navigation-logo-light.svg")
+- VITE_UI_LOGO_PATH_DARK = Path to the logo used in dark mode (fallbacks to VITE_UI_LOGO_PATH, default: "/assets/navigation-logo-dark.svg")
 - VITE_UI_THEME_DEFAULT = Default theme when user first visits (default: "dark")
 - VITE_UI_THEME_OPTIONS = Available theme options, comma-separated (default: "light,dark")
 

services/frontend/apps/admin-app/env.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="vite/client" />
-/* eslint-disable */
 declare module '*.vue' {
-import type { DefineComponent } from 'vue';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const component: DefineComponent<object, object, any>;
-export default component;
-}
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { RouterView } from "vue-router";
-import { LogoContainer, NavigationContainer } from "@shared/ui";
+import { NavigationContainer, OnyxIcon } from "@shared/ui";
 import { useI18n } from "vue-i18n";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+import { iconArrowSmallUpRightTop } from "@sit-onyx/icons";
 
 const { t } = useI18n();
 const chatURL = import.meta.env.VITE_CHAT_URL;
@@ -12,11 +12,11 @@ const chatURL = import.meta.env.VITE_CHAT_URL;
   <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"
+        class="flex gap-2 items-center btn btn-primary btn-sm"
         target="_blank"
         :href="chatURL"
       >
-        <ArrowTopRightOnSquareIcon class="w-4 h-4" />
+        <OnyxIcon :icon="iconArrowSmallUpRightTop" :size="16" />
         {{ t("documents.chat") }}
       </a>
     </NavigationContainer>

services/frontend/apps/chat-app/env.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="vite/client" />
-/* eslint-disable */
 declare module '*.vue' {
-import type { DefineComponent } from 'vue';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const component: DefineComponent<object, object, any>;
-export default component;
-}
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

services/frontend/apps/chat-app/src/App.vue

@@ -1,29 +1,22 @@
 <script lang="ts" setup>
 import { RouterView } from "vue-router";
-import { NavigationContainer } from "@shared/ui";
+import { NavigationContainer, OnyxIcon } from "@shared/ui";
 import { useI18n } from "vue-i18n";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+import { iconArrowSmallUpRightTop } from "@sit-onyx/icons";
 
 const { t } = useI18n();
 const adminURL = import.meta.env.VITE_ADMIN_URL;
-
-import { onMounted } from "vue";
-import { useThemeStore } from "@shared/store/theme.store";
-onMounted(() => {
-  // Initialize theme
-  const themeStore = useThemeStore();
-});
 </script>
 
 <template>
   <main class="bg-base-100 flex flex-col">
     <NavigationContainer>
       <a
-        class="flex gap-2 items-center btn btn-primary border border-opacity-10 border-white btn-sm"
+        class="flex gap-2 items-center btn btn-primary btn-sm"
         target="_blank"
         :href="adminURL"
       >
-        <ArrowTopRightOnSquareIcon class="w-4 h-4" />
+        <OnyxIcon :icon="iconArrowSmallUpRightTop" :size="16" />
         {{ t("chat.documents") }}
       </a>
     </NavigationContainer>

services/frontend/env.sh

@@ -1,11 +1,20 @@
 #!/bin/sh
 # Replace all environment variables starting with VITE_ in the files in /usr/share/nginx/html
-for i in $(env | grep VITE_)
-do
-    key=$(echo $i | cut -d '=' -f 1)
-    value=$(echo $i | cut -d '=' -f 2-)
-    # sed All files
-    # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +
-    # sed JS and CSS only
-    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+#
+# Notes:
+# - This script is used to inject runtime env vars into a Vite-built static app by replacing
+#   placeholder strings (e.g. "VITE_API_URL") in built JS/CSS files.
+# - It must correctly handle values containing spaces and "=".
+
+TARGET_DIR="${TARGET_DIR:-/usr/share/nginx/html}"
+
+env | grep '^VITE_' | while IFS= read -r line; do
+    key="${line%%=*}"
+    value="${line#*=}"
+
+    # Escape replacement string for sed (delimiter is "|")
+    escaped_value=$(printf '%s' "$value" | sed -e 's/[\\&|]/\\&/g')
+
+    find "$TARGET_DIR" -type f \( -name '*.js' -o -name '*.css' \) \
+      -exec sed -i "s|${key}|${escaped_value}|g" '{}' +
 done

services/frontend/libs/admin-app/data-access/document.api.mock.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosProgressEvent } from "axios";
+import type { AxiosProgressEvent } from "axios";
 import { DocumentModel } from "../models/document.model";
 import { newUid } from "@shared/utils";
 

services/frontend/libs/admin-app/data-access/document.api.ts

@@ -9,20 +9,21 @@ axios.defaults.auth = {
 
 // confluence configuration interface
 export interface ConfluenceConfig {
-  spaceKey?: string;
-  cql?: string;
-  token: string;
-  url: string;
-  maxPages?: number;
-  name: string;
+    spaceKey?: string;
+    cql?: string;
+    token: string;
+    url: string;
+    maxPages?: number;
+    name: string;
 }
 
 // sitemap configuration interface
 export interface SitemapConfig {
-  webPath: string;
-  filterUrls: string;
-  headerTemplate: string;
-  name: string;
+    webPath: string;
+    filterUrls: string;
+    headerTemplate: string;
+    name: string;
+    parser?: 'docusaurus' | 'astro' | 'generic';
 }
 
 export class DocumentAPI {
@@ -90,6 +91,14 @@ export class DocumentAPI {
                 { key: 'web_path', value: config.webPath }
             ];
 
+            if (config.parser) {
+                const allowedParsers = new Set(['docusaurus', 'astro', 'generic']);
+                if (!allowedParsers.has(config.parser)) {
+                    throw new Error(`Unsupported sitemap parser: ${config.parser}`);
+                }
+                payload.push({ key: 'sitemap_parser', value: config.parser });
+            }
+
             // add filter_urls only if provided
             if (config.filterUrls && config.filterUrls.trim()) {
                 // Convert multiline string to array and filter out empty lines
@@ -109,7 +118,7 @@ export class DocumentAPI {
                     // Validate JSON format
                     JSON.parse(config.headerTemplate);
                     payload.push({ key: 'header_template', value: config.headerTemplate });
-                } catch (jsonError) {
+                } catch {
                     throw new Error('Header template must be valid JSON format');
                 }
             }