refactor: frontend (#184)

This pull request introduces several improvements and fixes to the
frontend UI customization system, environment variable handling, and
document upload features. The most significant changes are the overhaul
of environment variable usage for runtime customization, updates to
theme and logo configuration, and the addition of a configurable parser
option for sitemap uploads. There are also UI improvements, including
icon updates and minor code cleanups.

**Environment Variable Handling and Customization:**

* Updated `.env.development` and `.env.production` files to use
placeholder values (e.g., `VITE_API_URL=VITE_API_URL`) instead of
hardcoded values, enabling runtime environment variable replacement in
built frontend assets. (Fef0a99bL3R3,
[[1]](diffhunk://#diff-d75aa0c448ddadae4b29e6c34aa5f7331fbacb37d08d956e9c2b23eedd46d3e7L94-R96)
[[2]](diffhunk://#diff-cb142dded0e67e187c53e2de9036d0f6c65432835579422c35ff1dad08c78473L1-R1)
* Improved `env.sh` script to robustly replace all `VITE_` variables in
built JS/CSS files, correctly handling values with spaces or `=`
characters, and added documentation comments.
* Enhanced documentation in `UI_Customization.md` with troubleshooting
steps for runtime environment variable injection, clarifying the need
for placeholders at build time and the use of `env.sh` in
Docker/Kubernetes deployments.
[[1]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4L287-R292)
[[2]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4R318)

**Theme and Logo Configuration:**

* Changed the default theme to "dark", updated theme and logo fallback
logic, and clarified the available theme options and their defaults in
both documentation and `.env` files.
[[1]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4L27-R28)
[[2]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4L96-R97)
[[3]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4L116-R117)
[[4]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4L142-R142)
[[5]](diffhunk://#diff-d75aa0c448ddadae4b29e6c34aa5f7331fbacb37d08d956e9c2b23eedd46d3e7L94-R96)
* Updated logo fallback order to use theme-specific assets
(`navigation-logo-light.svg`, `navigation-logo-dark.svg`) as defaults.
[[1]](diffhunk://#diff-a4d41f884f97f18943db8c18e934c6fbba2c61f180314fae2211a771d11054e4L96-R97)
[[2]](diffhunk://#diff-d75aa0c448ddadae4b29e6c34aa5f7331fbacb37d08d956e9c2b23eedd46d3e7L94-R96)

**Document Upload and Sitemap Parser:**

* Added support for specifying a sitemap parser (`docusaurus`, `astro`,
or `generic`) in the document upload UI and API, with validation on both
frontend and backend.
[[1]](diffhunk://#diff-0f7547155cd6592b947aae6327e72dbe57073ae43aba24e82ad7ef78fee08153R26)
[[2]](diffhunk://#diff-0f7547155cd6592b947aae6327e72dbe57073ae43aba24e82ad7ef78fee08153R94-R101)
[[3]](diffhunk://#diff-a6fc8bcaabdced0bd0b5b642bd5a4aa9cb124a5bbebd0762e76f9dcb0df884c1R35-R42)
[[4]](diffhunk://#diff-a6fc8bcaabdced0bd0b5b642bd5a4aa9cb124a5bbebd0762e76f9dcb0df884c1R93-R104)

**UI and Icon Updates:**

* Replaced Heroicons with Onyx icon components throughout the admin and
chat app navigation and document upload UI for consistency and improved
appearance.
[[1]](diffhunk://#diff-aec53716ff6c4f2c234b589983906d2ffddd1cc67eabf7cd5c676fad77ff0751L3-R5)
[[2]](diffhunk://#diff-aec53716ff6c4f2c234b589983906d2ffddd1cc67eabf7cd5c676fad77ff0751L15-R19)
[[3]](diffhunk://#diff-98ed9fb0f39bd9e26a573ebe1296e1e723eb79275bd4b4d6064c64dbf81dcefaL3-R19)
[[4]](diffhunk://#diff-a6fc8bcaabdced0bd0b5b642bd5a4aa9cb124a5bbebd0762e76f9dcb0df884c1L2-R4)
[[5]](diffhunk://#diff-a6fc8bcaabdced0bd0b5b642bd5a4aa9cb124a5bbebd0762e76f9dcb0df884c1L133-R152)
[[6]](diffhunk://#diff-a6fc8bcaabdced0bd0b5b642bd5a4aa9cb124a5bbebd0762e76f9dcb0df884c1L165-R177)
[[7]](diffhunk://#diff-a6fc8bcaabdced0bd0b5b642bd5a4aa9cb124a5bbebd0762e76f9dcb0df884c1L180-R192)

**Code Quality and Cleanup:**

* Removed unused imports and cleaned up component initialization code in
`App.vue` files.
[[1]](diffhunk://#diff-cb142dded0e67e187c53e2de9036d0f6c65432835579422c35ff1dad08c78473L1-R1)
[[2]](diffhunk://#diff-98ed9fb0f39bd9e26a573ebe1296e1e723eb79275bd4b4d6064c64dbf81dcefaL3-R19)

These changes collectively improve the flexibility, maintainability, and
user experience of the frontend application.

Author: robodev-r2d2

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";