Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
bc209a6
chore(deps): update dependency @types/node to v22 (#121)
a-klos Oct 10, 2025
e721504
chore(deps): update dependency @intlify/unplugin-vue-i18n to v11 (#120)
a-klos Oct 10, 2025
eb974e1
chore(deps): update dependency daisyui to v5 (#123)
a-klos Oct 10, 2025
093e128
chore(deps): update dependency eslint-plugin-cypress to v5 (#124)
a-klos Oct 10, 2025
e4f8a98
chore(deps): update dependency globals to v16 (#125)
a-klos Oct 10, 2025
2449870
fix(deps): update dependency vue-i18n to v11 (#136)
a-klos Oct 10, 2025
e4ff309
fix(deps): update dependency pinia to v3 (#135)
a-klos Oct 10, 2025
c974437
chore(deps): update dependency vite-tsconfig-paths to v5 (#131)
a-klos Oct 10, 2025
ea07f14
chore(deps): update dependency marked to v16 (#128)
a-klos Oct 10, 2025
584b926
fix(deps): update dependency @vueuse/core to v13 (#134)
a-klos Oct 10, 2025
07905d5
chore(deps): update nx monorepo to v21 (major) (#133)
a-klos Oct 10, 2025
d7eadcc
chore(deps): update dependency vue-tsc to v3 (#132)
a-klos Oct 10, 2025
69740c2
chore(deps): update dependency tailwindcss to v4 (#129)
a-klos Oct 10, 2025
9495d75
chore(deps): update dependency vite-plugin-dts to v4 (#130)
a-klos Oct 10, 2025
dfce2eb
chore(deps): update dependency jsdom to v27 (#127)
a-klos Oct 10, 2025
7e06447
chore(deps): update dependency jiti to v2 (#126)
a-klos Oct 10, 2025
de59065
chore: update .gitignore to include Nx workspace caches and remove sp…
a-klos Oct 10, 2025
ce70632
Merge branch 'deps-main' of github.com:stackitcloud/rag-template into…
a-klos Oct 10, 2025
42255e7
feat: integrate Tailwind CSS and daisyUI into admin and chat applicat…
a-klos Oct 10, 2025
585abc4
refactor: update Vue component type definitions and streamline style …
a-klos Oct 10, 2025
3b9c5fc
fix: correct import order and remove duplicate style imports in admin…
a-klos Oct 10, 2025
c7a8594
chore(deps): update dorny/paths-filter action to v3 (#141)
a-klos Oct 19, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/lint-and-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ jobs:

- name: Detect changes
id: changes
uses: dorny/paths-filter@v2
uses: dorny/paths-filter@v3
with:
filters: |
services:
Expand Down
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,6 @@ dmypy.json
cython_debug/

**/.DS_Store

# Nx workspace caches (frontend uses a nested Nx workspace)
**/.nx/
85 changes: 32 additions & 53 deletions docs/UI_Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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):

Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion services/frontend/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,4 @@ testem.log
.DS_Store
Thumbs.db

.nx/cache
.nx/
2 changes: 0 additions & 2 deletions services/frontend/apps/admin-app/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 3 additions & 5 deletions services/frontend/apps/admin-app/env.d.ts
Original file line number Diff line number Diff line change
@@ -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>;
import type { DefineComponent } from 'vue';
const component: DefineComponent<object, object, unknown>;
export default component;
}
}
Loading
Loading