diff --git a/.github/workflows/lint-and-test.yml b/.github/workflows/lint-and-test.yml index d9dfdeee..902698e8 100644 --- a/.github/workflows/lint-and-test.yml +++ b/.github/workflows/lint-and-test.yml @@ -27,7 +27,7 @@ jobs: - name: Detect changes id: changes - uses: dorny/paths-filter@v2 + uses: dorny/paths-filter@v3 with: filters: | services: diff --git a/.gitignore b/.gitignore index 574a8463..d2452241 100644 --- a/.gitignore +++ b/.gitignore @@ -158,3 +158,6 @@ dmypy.json cython_debug/ **/.DS_Store + +# Nx workspace caches (frontend uses a nested Nx workspace) +**/.nx/ diff --git a/docs/UI_Customization.md b/docs/UI_Customization.md index ca3644fe..0af3a8a6 100644 --- a/docs/UI_Customization.md +++ b/docs/UI_Customization.md @@ -8,9 +8,9 @@ Note: In this document, “frontend” refers to the folder at services/frontend 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 +- **Bot name** and **initial message** +- **Logos** for light and dark mode +- **Brand colors and themes** (Tailwind v4 + daisyUI v5) ## Configuration Options @@ -107,40 +107,26 @@ VITE_UI_LOGO_PATH_DARK=/assets/company-logo-dark.svg VITE_UI_LOGO_PATH=/assets/company-logo.svg ``` -### Theme System +### Theme System (Tailwind v4 + daisyUI v5) -The application supports a flexible theme system with user preference persistence. +The frontend uses Tailwind v4 with daisyUI v5. In the following, we describe how to customize the theme using central CSS (recommended for brand colors shared by both apps): -**Available Themes:** +- File: `services/frontend/libs/ui-styles/src/tailwind.css` +- This file loads Tailwind v4 and defines daisyUI themes via CSS `@plugin` blocks. +- Update semantic tokens under the `@plugin "daisyui/theme"` blocks: -- `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 - ``` +```css +--color-primary: #a90303; /* CTA/buttons */ +--color-primary-content: #ffffff; /* readable text on primary */ +--color-base-100: #ffffff; /* page background */ +--color-base-200: #EDEDED; /* cards */ +``` -**Theme Behavior:** +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 +- Default theme and options are set by env vars: `VITE_UI_THEME_DEFAULT`, `VITE_UI_THEME_OPTIONS` +- The selected theme is stored in `localStorage` under `app-theme` +- Theme switching updates `html[data-theme]` so daisyUI variables apply ## Development Setup @@ -217,7 +203,7 @@ For Docker deployments, the frontend uses a special script (services/frontend/en ### Adding Custom Themes -To add custom themes beyond light/dark: +To add themes beyond light/dark, update both the settings and the theme source: 1. **Update the settings configuration** in [services/frontend/libs/shared/settings.ts](../services/frontend/libs/shared/settings.ts): @@ -227,31 +213,24 @@ To add custom themes beyond light/dark: ui: { theme: { default: "light", - options: ["light", "dark", "custom"], // Add your theme + options: ["light", "dark", "brand-red"], // 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 - } - } - ], - }, - }; - ``` +2. Define the theme either e.g. in CSS (recommended for shared branding): + +CSS (Tailwind v4): + +```css +@plugin "daisyui/theme" { + name: "brand-red"; + --color-primary: #a90303; + --color-primary-content: #ffffff; + /* ... other tokens ... */ +} +``` ### Internationalization diff --git a/services/frontend/.gitignore b/services/frontend/.gitignore index ade1c5f1..2e7c1398 100644 --- a/services/frontend/.gitignore +++ b/services/frontend/.gitignore @@ -37,4 +37,4 @@ testem.log .DS_Store Thumbs.db -.nx/cache \ No newline at end of file +.nx/ diff --git a/services/frontend/apps/admin-app/Dockerfile b/services/frontend/apps/admin-app/Dockerfile index cfaae0b0..9452d670 100644 --- a/services/frontend/apps/admin-app/Dockerfile +++ b/services/frontend/apps/admin-app/Dockerfile @@ -18,8 +18,6 @@ COPY --from=builder /usr/src/app/dist/apps/admin-app /app/frontend COPY --from=builder /usr/src/app/dist/libs /app/frontend/libs COPY ./services/frontend/default.nginx.conf /etc/nginx/conf.d/default.conf - - COPY ./services/frontend/env.sh /app/env.sh EXPOSE 8080 diff --git a/services/frontend/apps/admin-app/env.d.ts b/services/frontend/apps/admin-app/env.d.ts index 64399764..f26577d4 100644 --- a/services/frontend/apps/admin-app/env.d.ts +++ b/services/frontend/apps/admin-app/env.d.ts @@ -1,8 +1,6 @@ /// -/* eslint-disable */ declare module '*.vue' { -import type { DefineComponent } from 'vue'; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const component: DefineComponent; + import type { DefineComponent } from 'vue'; +const component: DefineComponent; export default component; -} \ No newline at end of file +} diff --git a/services/frontend/apps/admin-app/public/assets/sub-header-left-logo.svg b/services/frontend/apps/admin-app/public/assets/sub-header-left-logo.svg deleted file mode 100644 index 4e0f47f5..00000000 --- a/services/frontend/apps/admin-app/public/assets/sub-header-left-logo.svg +++ /dev/null @@ -1,336 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/services/frontend/apps/admin-app/public/assets/sub-header-right-logo.svg b/services/frontend/apps/admin-app/public/assets/sub-header-right-logo.svg deleted file mode 100644 index 4e0f47f5..00000000 --- a/services/frontend/apps/admin-app/public/assets/sub-header-right-logo.svg +++ /dev/null @@ -1,336 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/services/frontend/apps/admin-app/src/App.vue b/services/frontend/apps/admin-app/src/App.vue index 11bb04fc..34d65fd8 100644 --- a/services/frontend/apps/admin-app/src/App.vue +++ b/services/frontend/apps/admin-app/src/App.vue @@ -1,8 +1,8 @@