-
Notifications
You must be signed in to change notification settings - Fork 7
refactor: frontend #184
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: frontend #184
Conversation
- Updated imports to use Onyx icons instead of Heroicons in various components. - Adjusted icon sizes and styles for consistency. - Enhanced theme colors in Tailwind configuration for improved readability. - Updated logo paths in settings for light and dark themes. - Refined chat text styles in global CSS for better contrast.
…ation - Updated the answer generation prompt to clarify instructions and improve formatting. - Modified frontend environment variables to ensure correct chat authentication settings. - Enhanced document API to handle explicit authentication credentials and improved URL handling. - Added sitemap parser selection in DocumentUploadContainer and updated related data models. - Implemented clipboard copy functionality in ChatBubble component for better user experience. - Integrated syntax highlighting for code blocks in markdown rendering with highlight.js. - Updated global CSS for improved chat code block styling and added new utility classes. - Added tests for LangchainSummarizer to ensure concurrency limits are respected.
…onent; update global styles for consistent theming
…ties in chat components; update SideBarContainer to support border visibility
…ache busting fix: Add timeoutSeconds to startupProbe in admin and frontend deployment configurations
…e uploader settings
…le handling in API files
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR refactors the frontend application with a comprehensive redesign that updates the theme system, migrates from Heroicons to the STACKIT Onyx icon library, and enhances the markdown rendering with syntax highlighting capabilities.
Key changes:
- Migrates icon library from
@heroicons/vueto@sit-onyx/iconswith a new reusableOnyxIconcomponent - Updates the color theme to match STACKIT documentation style with improved light/dark mode palettes
- Adds comprehensive code block rendering with syntax highlighting via
highlight.jsand copy-to-clipboard functionality - Improves environment variable handling with better placeholder detection for runtime configuration
Reviewed changes
Copilot reviewed 37 out of 42 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| services/frontend/package.json | Removes @heroicons/vue, adds @sit-onyx/icons and highlight.js; moves esbuild to devDependencies |
| services/frontend/package-lock.json | Updates lockfile to reflect dependency changes and version bump to 3.3.0 |
| services/frontend/tailwind.config.js | Completely overhauls theme color palette to match STACKIT docs style; updates typography defaults |
| services/frontend/libs/shared/utils/src/lib/marked.utils.ts | Adds syntax highlighting with highlight.js, code block copy functionality, and improved event handling |
| services/frontend/libs/shared/ui/index.ts | Exports the new OnyxIcon component |
| services/frontend/libs/shared/ui/ThemeToggle.vue | Migrates to Onyx icons; adds conditional rendering based on available themes |
| services/frontend/libs/shared/ui/SideBarContainer.vue | Updates to use OnyxIcon; adds optional border control and header action slots |
| services/frontend/libs/shared/ui/OnyxIcon.vue | New reusable icon wrapper component with accessibility and sizing support |
| services/frontend/libs/shared/ui/NavigationContainer.vue | Updates background and border styling to use base colors instead of primary |
| services/frontend/libs/shared/store/theme.store.ts | Improves theme loading with better error handling and default fallback logic |
| services/frontend/libs/shared/settings.ts | Adds placeholder detection for unset env vars; updates default logo paths |
| services/frontend/libs/shared/global.css | Adds extensive styling for code blocks, syntax highlighting tokens, and copy buttons |
| services/frontend/libs/i18n/chat/en.json | Fixes capitalization in "How can I help you?" |
| services/frontend/libs/i18n/admin/en.json | Adds translations for sitemap parser options |
| services/frontend/libs/i18n/admin/de.json | Adds German translations for sitemap feature |
| services/frontend/libs/chat-app/vue-shims.d.ts | Improves TypeScript module declaration by using unknown instead of any |
| services/frontend/libs/chat-app/ui/ChatMessages.vue | Simplifies theme detection; updates avatar versioning and color classes |
| services/frontend/libs/chat-app/ui/ChatDocumentItem.vue | Removes commented-out import |
| services/frontend/libs/chat-app/ui/ChatDocumentGroup.vue | Migrates to OnyxIcon for external link indicator |
| services/frontend/libs/chat-app/ui/ChatDocumentContainer.vue | Removes sidebar border for cleaner layout |
| services/frontend/libs/chat-app/ui/ChatBubble.vue | Adds message copy functionality and improves source revelation with panel management |
| services/frontend/libs/chat-app/feature-chat/ChatView.vue | Adds collapsible sources panel with toggle button and improved layout |
| services/frontend/libs/chat-app/feature-chat/ChatInput.vue | Migrates send icon to OnyxIcon |
| services/frontend/libs/chat-app/data-access/chat.api.ts | Fixes boolean comparison for auth enabled check |
| services/frontend/libs/chat-app/data-access/+state/chat.store.ts | Adds sources panel state management with open/close/toggle methods |
| services/frontend/libs/admin-app/vue-shims.d.ts | Improves TypeScript typing consistency |
| services/frontend/libs/admin-app/utils/document-icon.utils.ts | New utility to select appropriate icons based on document type/source |
| services/frontend/libs/admin-app/ui/UploadedDocumentItem.vue | Migrates to OnyxIcon with dynamic document-type icons |
| services/frontend/libs/admin-app/ui/DocumentItem.vue | Adds keyboard navigation and focus management for delete modal; uses OnyxIcon |
| services/frontend/libs/admin-app/feature-document/DocumentsView.vue | Removes unused import |
| services/frontend/libs/admin-app/feature-document/DocumentUploadContainer.vue | Adds sitemap parser selection UI; migrates to OnyxIcon |
| services/frontend/libs/admin-app/data-access/document.api.ts | Adds parser parameter support for sitemap uploads; fixes indentation |
| services/frontend/libs/admin-app/data-access/document.api.mock.ts | Uses type-only import for AxiosProgressEvent |
| services/frontend/env.sh | Improves env var parsing to handle values with spaces and equals signs |
| services/frontend/apps/chat-app/src/App.vue | Simplifies component; migrates to OnyxIcon; removes unused theme initialization |
| services/frontend/apps/chat-app/env.d.ts | Improves TypeScript module declaration |
| services/frontend/apps/admin-app/src/App.vue | Migrates to OnyxIcon |
| services/frontend/apps/admin-app/env.d.ts | Improves TypeScript module declaration |
| services/frontend/README.md | Updates documentation for logo path defaults |
| services/frontend/.env.production | Adds placeholders for all UI customization env vars |
| services/frontend/.env.development | Replaces hardcoded values with placeholders for consistency |
| docs/UI_Customization.md | Updates documentation to reflect new defaults and clearer explanations |
Files not reviewed (1)
- services/frontend/package-lock.json: Language not supported
Comments suppressed due to low confidence (1)
services/frontend/libs/admin-app/ui/DocumentItem.vue:166
- Missing accessibility: The modal div lacks proper ARIA attributes for screen readers. While role="dialog" and aria-modal="true" are present, the modal is missing an accessible name. Add
aria-labelledbypointing to the heading oraria-labelwith a descriptive label like "Delete document confirmation".
<div
v-if="showDeleteModal"
@keydown.capture="onModalKeydown"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
role="dialog"
aria-modal="true"
aria-labelledby="delete-modal-title"
>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 39 out of 44 changed files in this pull request and generated 2 comments.
Files not reviewed (1)
- services/frontend/package-lock.json: Language not supported
services/frontend/libs/admin-app/feature-document/DocumentUploadContainer.vue
Outdated
Show resolved
Hide resolved
…d updating related components
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 42 out of 47 changed files in this pull request and generated 9 comments.
Files not reviewed (1)
- services/frontend/package-lock.json: Language not supported
…lity with comprehensive tests
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 43 out of 48 changed files in this pull request and generated 9 comments.
Files not reviewed (1)
- services/frontend/package-lock.json: Language not supported
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:
.env.developmentand.env.productionfiles 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] [2]env.shscript to robustly replace allVITE_variables in built JS/CSS files, correctly handling values with spaces or=characters, and added documentation comments.UI_Customization.mdwith troubleshooting steps for runtime environment variable injection, clarifying the need for placeholders at build time and the use ofenv.shin Docker/Kubernetes deployments. [1] [2]Theme and Logo Configuration:
.envfiles. [1] [2] [3] [4] [5]navigation-logo-light.svg,navigation-logo-dark.svg) as defaults. [1] [2]Document Upload and Sitemap Parser:
docusaurus,astro, orgeneric) in the document upload UI and API, with validation on both frontend and backend. [1] [2] [3] [4]UI and Icon Updates:
Code Quality and Cleanup:
App.vuefiles. [1] [2]These changes collectively improve the flexibility, maintainability, and user experience of the frontend application.