feat/redesign-and-improvements #20

huhn511 · 2025-05-25T12:20:18Z

Overview

This PR introduces several improvements to the frontend application, focusing on customization options and document handling. The main changes include environment-based configuration, enhanced document interactions, and visual refinements.

Changes

Environment-Based Settings Configuration

Added support for loading application settings from environment variables
Default fallbacks are provided when environment variables are not set
Settings can now be configured through .env files using the VITE_ prefix
Documented the configuration options in the shared folder README

Document Experience Improvements

Added document mock endpoint for improved development and testing
Refactored documentItem component for better user experience
Enhanced UI interactions and visual feedback for document operations

Visual Updates

Updated chat icon for better visual consistency
Added new color options for theming
Implemented customizable bot settings (name, appearance)

How to Test

Create a .env file with custom settings:

VITE_BOT_NAME=Custom Bot
VITE_UI_THEME_DEFAULT=dark

Verify settings are applied correctly in the UI
Test document interaction with the new mock endpoint
Confirm theme switching works with customized options

Screenshots

tbd

Co-authored-by: Copilot <[email protected]>

- Moved i18n access to function call time instead of store definition time - Added error handling with a fallback message - Called getInitialMessage() when actually needed in initiateConversation()

a-klos

friendly reminder^^:

indentation
dark mode default
something else that i most probably forgot :D

file and sitemap loader still work. confluence not tested... its not configured in the uni deployment ^^

a-klos · 2025-06-20T12:50:22Z

frontend/README.md

+### 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")


nitpick: dark might be nice ^^

a-klos · 2025-06-20T12:52:12Z

frontend/libs/shared/settings.ts

+  ui: {
+    logoPath: "/assets/navigation-logo.svg",
+    theme: {
+      default: "light",


thought: i guess here or so

…ent (#20)

)

Co-authored-by: Copilot <[email protected]>

- Added features.useMockData to support mock API configuration - Properly handles VITE_USE_MOCK_DATA environment variable - Fixes TypeScript error in document.api.factory.ts

huhn511 · 2025-07-31T13:29:00Z

@a-klos FIY: just fixed pipeline and add your suggestions. Not tested it yet on the system.

Copilot

Pull Request Overview

This PR introduces environment-based configuration, theming improvements, and enhanced document management for the frontend application. The changes enable better customization through environment variables and provide a more polished user experience.

Add environment-based settings system with support for bot name, logo path, and theme configuration
Implement comprehensive light/dark theme system with user preference persistence
Enhance document management UI with improved interactions and mock API support

Reviewed Changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tsconfig.base.json	Add path aliases for new shared settings and theme store modules
tailwind.config.js	Expand theme configuration with comprehensive light/dark color schemes
ThemeToggle.vue	New component for theme switching with sun/moon icons
NavigationContainer.vue	Updated to use configurable logo path and include theme toggle
theme.store.ts	New Pinia store for theme management with localStorage persistence
settings.ts	New configuration system with environment variable support and fallbacks
global.css	Add theme-specific chat text styles and avatar improvements
README.md	Document new environment variables and customization options
DocumentItem.vue	Enhanced document item UI with confirmation modal and improved status display
document.api.mock.ts	New mock implementation for document API with realistic data
document.api.factory.ts	Factory pattern for selecting real vs mock API implementation
documents.store.ts	Code formatting improvements and better error handling
App.vue files	Theme store initialization and code formatting updates
UI_Customization.md	Comprehensive documentation for UI customization features

Copilot · 2025-08-04T08:07:58Z

services/frontend/libs/shared/settings.ts

+      options: typeof import.meta.env.VITE_UI_THEME_OPTIONS === "string" && import.meta.env.VITE_UI_THEME_OPTIONS.trim()
+        ? import.meta.env.VITE_UI_THEME_OPTIONS.split(",")
+        : defaultSettings.ui.theme.options,


The complex conditional logic for parsing VITE_UI_THEME_OPTIONS is hard to read and maintain. Consider extracting this into a separate function like parseThemeOptions() for better readability.

Suggested change

options: typeof import.meta.env.VITE_UI_THEME_OPTIONS === "string" && import.meta.env.VITE_UI_THEME_OPTIONS.trim()

? import.meta.env.VITE_UI_THEME_OPTIONS.split(",")

: defaultSettings.ui.theme.options,

options: parseThemeOptions(import.meta.env.VITE_UI_THEME_OPTIONS, defaultSettings.ui.theme.options),

Copilot · 2025-08-04T08:07:58Z

services/frontend/libs/admin-app/data-access/+state/documents.store.ts

 import { ConfluenceConfig, DocumentAPI, SitemapConfig } from "../document.api";

-export const useDocumentsStore = defineStore('chat', () => {
-    const uploadedDocuments = ref<UploadedDocument[]>([]);
-    const allDocuments = ref<DocumentModel[]>();
-    const error = ref<ErrorType | null>(null);
-    const isLoadingConfluence = ref(false);
-    const isLoadingSitemap = ref(false);
+export const useDocumentsStore = defineStore("chat", () => {
+  const uploadedDocuments = ref<UploadedDocument[]>([]);


The import statement references DocumentAPI directly, but the store should use the factory pattern introduced in document.api.factory.ts to support mock data functionality. This will cause the mock API feature to not work properly in the documents store.

Copilot · 2025-08-04T08:07:59Z

services/frontend/libs/chat-app/data-access/+state/chat.store.ts

+    try {
+      return t("chat.initialMessage", { bot_name: settings.bot.name });
+    } catch (error) {
+      console.warn("i18n interpolation failed, using fallback", error);


The try-catch block uses a generic console.warn message that may not be helpful for debugging i18n interpolation issues. Consider providing more specific error context, such as the actual interpolation parameters that failed.

Suggested change

try {

return t("chat.initialMessage", { bot_name: settings.bot.name });

} catch (error) {

console.warn("i18n interpolation failed, using fallback", error);

const key = "chat.initialMessage";

const params = { bot_name: settings.bot.name };

try {

return t(key, params);

} catch (error) {

console.warn(

`i18n interpolation failed for key "${key}" with params ${JSON.stringify(params)}. Using fallback.`,

error

);

Copilot · 2025-08-04T08:07:59Z

services/frontend/libs/admin-app/ui/DocumentItem.vue

+  <!-- Delete confirmation modal -->
+  <div
+    v-if="showDeleteModal"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"


The modal overlay should include keyboard event handling for the Escape key to close the modal, which is a standard accessibility expectation for modal dialogs.

Copilot · 2025-08-04T08:07:59Z

services/frontend/tailwind.config.js

+          "--base-200-highlight": "#4d4d4d",
+
+          // Fix for chat text color
+          ".chat-text": "#f5f5f5", // Light text color for chat in dark mode


[nitpick] Hardcoding CSS classes within the Tailwind theme configuration is unconventional. Consider moving these chat text color overrides to the global.css file or using CSS custom properties for better maintainability.

Suggested change

".chat-text": "#f5f5f5", // Light text color for chat in dark mode

Sebastian Heußer added 4 commits May 25, 2025 14:18

feat: add new colors and customizable bot settings

d1e6ce2

chore: update chat icon

c20b516

feat: add document mock endpoint and refactor documentItem for better UX

0002bf5

feat: enable to set settings in env vars

e95c01c

huhn511 marked this pull request as ready for review May 26, 2025 15:40

Sebastian Heußer added 2 commits May 27, 2025 10:44

fix: static Navy Blue for nav background

d897860

fix: toggle button

3338378

huhn511 requested a review from Copilot May 31, 2025 12:41

This comment was marked as outdated.

Sign in to view

huhn511 and others added 5 commits June 16, 2025 12:52

Update frontend/libs/shared/ui/NavigationContainer.vue

4ba4a04

Co-authored-by: Copilot <[email protected]>

Update frontend/libs/shared/global.css

1ca66ac

Co-authored-by: Copilot <[email protected]>

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

4a6cac2

Co-authored-by: Copilot <[email protected]>

fix: bot_name

1b7b1eb

- Moved i18n access to function call time instead of store definition time - Added error handling with a fallback message - Called getInitialMessage() when actually needed in initiateConversation()

chore: add docs

80bec6d

huhn511 requested a review from Copilot June 20, 2025 11:03

This comment was marked as outdated.

Sign in to view

huhn511 and others added 3 commits June 20, 2025 13:13

Merge branch 'main' into feat/redesign-and-improvements

9b7eda8

fix: fix gh-action for PRs from forked repositories

e058b39

fix: merge conflicts

420f67b

a-klos approved these changes Jun 20, 2025

View reviewed changes

Sebastian Heußer added 2 commits June 23, 2025 09:14

chore: set dark mode as default

0220067

fix: show button in light mode correctly

3cd7dbf

a-klos added a commit that referenced this pull request Jul 3, 2025

fix: remove conditional basicAuth secret reference from admin deploym…

845664d

…ent (#20)

a-klos added a commit that referenced this pull request Jul 3, 2025

chore: allow additional requests_kwargs parameter in sitemap loader (#20

0e2febe

)

huhn511 added 5 commits July 31, 2025 14:05

chore: remove submodules before merging monorepo structure

c6f446b

fix: merge upstream/main and resolve conflicts after monorepo refactor

6573d0b

fix: remove trailing whitespace from modified files

062eef5

fix: add missing isDarkMode computed property to theme store

40b2580

fix: use proper theme-aware bg-primary class in NavigationContainer

d0a0c22

huhn511 requested a review from Copilot July 31, 2025 12:27

This comment was marked as outdated.

Sign in to view

huhn511 and others added 5 commits July 31, 2025 15:19

Update services/frontend/libs/shared/settings.ts

96217f5

Co-authored-by: Copilot <[email protected]>

Update services/frontend/libs/chat-app/data-access/+state/chat.store.ts

5506973

Co-authored-by: Copilot <[email protected]>

Update services/frontend/libs/admin-app/ui/DocumentItem.vue

6ff503c

Co-authored-by: Copilot <[email protected]>

Update services/frontend/libs/shared/store/theme.store.ts

b428e93

Co-authored-by: Copilot <[email protected]>

fix: add missing features property to AppSettings interface

6668111

- Added features.useMockData to support mock API configuration - Properly handles VITE_USE_MOCK_DATA environment variable - Fixes TypeScript error in document.api.factory.ts

huhn511 requested a review from Copilot August 4, 2025 08:06

Copilot AI reviewed Aug 4, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat/redesign-and-improvements #20

feat/redesign-and-improvements #20

Uh oh!

huhn511 commented May 25, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

a-klos left a comment

Uh oh!

a-klos Jun 20, 2025

Uh oh!

a-klos Jun 20, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

huhn511 commented Jul 31, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

Uh oh!

feat/redesign-and-improvements #20

Are you sure you want to change the base?

feat/redesign-and-improvements #20

Uh oh!

Conversation

huhn511 commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changes

Environment-Based Settings Configuration

Document Experience Improvements

Visual Updates

How to Test

Screenshots

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

a-klos left a comment

Choose a reason for hiding this comment

Uh oh!

a-klos Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

a-klos Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

huhn511 commented Jul 31, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

huhn511 commented May 25, 2025 •

edited

Loading