- ([]);
- const chatDocuments = ref([]);
- const isLoading = ref(false);
- const hasError = ref(false);
- const initialMessage = computed(() => t('chat.initialMessage'));
- const lastMessage = () => chatHistory.value[chatHistory.value.length - 1];
-
- function addHistory(prompt: string) {
- chatHistory.value.push({
- id: newUid(),
- text: prompt,
- role: 'user'
- });
-
- chatHistory.value.push({
- id: newUid(),
- role: 'assistant'
- });
+export const useChatStore = defineStore("chat", () => {
+ const conversationId = ref();
+ const chatHistory = ref([]);
+ const chatDocuments = ref([]);
+ const isLoading = ref(false);
+ const hasError = ref(false);
+
+ // Get i18n instance lazily to ensure it's available
+ const getInitialMessage = () => {
+ const { t } = useI18n();
+ try {
+ return t("chat.initialMessage", { bot_name: settings.bot.name });
+ } catch (error) {
+ console.warn("i18n interpolation failed, using fallback", error);
+ return `Hi 👋, I'm your AI Assistant ${settings.bot.name}, here to support you with any questions regarding the provided documents!`;
}
+ };
+ const lastMessage = () => chatHistory.value[chatHistory.value.length - 1];
- function updateLatestMessage(update: Partial) {
- Object.assign(lastMessage(), update);
- }
+ function addHistory(prompt: string) {
+ chatHistory.value.push({
+ id: newUid(),
+ text: prompt,
+ role: "user",
+ });
- function prepareInferenceRequest(prompt: string): ChatRequestModel {
- const cleanedHistory = chatHistory.value.filter((message: ChatMessageModel) => !message.skipAPI)
- const requestMessages = mapToChatRequestModel(
- conversationId.value,
- prompt,
- cleanedHistory
- );
- return requestMessages;
- }
+ chatHistory.value.push({
+ id: newUid(),
+ role: "assistant",
+ });
+ }
- function parseDocumentsAsMarkdown(documents: InformationPiece[]): Promise {
- return Promise.all(documents.map(async o => {
- const chunk = await marked(o.page_content);
- return {
- ...o,
- page_content: chunk,
- } as DocumentResponseModel;
- }));
- }
+ function updateLatestMessage(update: Partial) {
+ Object.assign(lastMessage(), update);
+ }
- const callInference = async (prompt: string) => {
- isLoading.value = true;
- try {
- const requestMessages = prepareInferenceRequest(prompt);
+ function prepareInferenceRequest(prompt: string): ChatRequestModel {
+ const cleanedHistory = chatHistory.value.filter(
+ (message: ChatMessageModel) => !message.skipAPI,
+ );
+ const requestMessages = mapToChatRequestModel(
+ conversationId.value,
+ prompt,
+ cleanedHistory,
+ );
+ return requestMessages;
+ }
- const promptAsMd = await marked(prompt)
- addHistory(promptAsMd);
+ function parseDocumentsAsMarkdown(
+ documents: InformationPiece[],
+ ): Promise {
+ return Promise.all(
+ documents.map(async (o) => {
+ const chunk = await marked(o.page_content);
+ return {
+ ...o,
+ page_content: chunk,
+ } as DocumentResponseModel;
+ }),
+ );
+ }
- const response = await ChatAPI.callInference(requestMessages);
+ const callInference = async (prompt: string) => {
+ isLoading.value = true;
+ try {
+ const requestMessages = prepareInferenceRequest(prompt);
- const textAsMd = await marked(response.answer);
- const documentsAsMd = await parseDocumentsAsMarkdown(response.citations);
- const documents = mapToChatDocuments(chatDocuments.value.length, documentsAsMd, lastMessage().id);
+ const promptAsMd = await marked(prompt);
+ addHistory(promptAsMd);
- updateLatestMessage({
- dateTime: new Date(),
- text: textAsMd,
- anchorIds: documents.map((o) => o.index)
- });
+ const response = await ChatAPI.callInference(requestMessages);
- chatDocuments.value.push(...documents);
+ const textAsMd = await marked(response.answer);
+ const documentsAsMd = await parseDocumentsAsMarkdown(response.citations);
+ const documents = mapToChatDocuments(
+ chatDocuments.value.length,
+ documentsAsMd,
+ lastMessage().id,
+ );
- } catch(error) {
- updateLatestMessage({
- hasError: true,
- dateTime: new Date()
- });
- } finally {
- isLoading.value = false;
- }
- };
+ updateLatestMessage({
+ dateTime: new Date(),
+ text: textAsMd,
+ anchorIds: documents.map((o) => o.index),
+ });
- const initiateConversation = (id: string) => {
- conversationId.value = id;
- chatHistory.value.push({
- id: newUid(),
- text: initialMessage,
- role: 'assistant',
- skipAPI: true
- });
+ chatDocuments.value.push(...documents);
+ } catch (error) {
+ updateLatestMessage({
+ hasError: true,
+ dateTime: new Date(),
+ });
+ } finally {
+ isLoading.value = false;
}
+ };
+
+ const initiateConversation = (id: string) => {
+ conversationId.value = id;
+ chatHistory.value.push({
+ id: newUid(),
+ text: getInitialMessage(),
+ role: "assistant",
+ skipAPI: true,
+ });
+ };
- return {chatDocuments, chatHistory, isLoading, hasError, conversationId, callInference, initiateConversation};
+ return {
+ chatDocuments,
+ chatHistory,
+ isLoading,
+ hasError,
+ conversationId,
+ callInference,
+ initiateConversation,
+ };
});
diff --git a/frontend/libs/chat-app/feature-chat/ChatView.vue b/frontend/libs/chat-app/feature-chat/ChatView.vue
index 999ed27..29021b4 100644
--- a/frontend/libs/chat-app/feature-chat/ChatView.vue
+++ b/frontend/libs/chat-app/feature-chat/ChatView.vue
@@ -1,11 +1,11 @@
-
-
-
-
- {{ props.data.name }}
-
-
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ props.data.name }} +
++ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/libs/chat-app/data-access/+state/chat.store.ts b/frontend/libs/chat-app/data-access/+state/chat.store.ts
index 9aec0c4..16deaeb 100644
--- a/frontend/libs/chat-app/data-access/+state/chat.store.ts
+++ b/frontend/libs/chat-app/data-access/+state/chat.store.ts
@@ -2,102 +2,135 @@ import { newUid } from "@shared/utils";
import { InformationPiece } from "libs/chat-app/models/chat-response.model";
import { DocumentResponseModel } from "libs/chat-app/models/document-response.model";
import { marked } from "marked";
-import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { ChatDocumentModel, mapToChatDocuments } from "../../models/chat-document.model";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+ ChatDocumentModel,
+ mapToChatDocuments,
+} from "../../models/chat-document.model";
import { ChatMessageModel } from "../../models/chat-message.model";
-import { ChatRequestModel, mapToChatRequestModel } from "../../models/chat-request.model";
+import {
+ ChatRequestModel,
+ mapToChatRequestModel,
+} from "../../models/chat-request.model";
import { ChatAPI } from "../chat.api";
+import { settings } from "@shared/settings";
-export const useChatStore = defineStore('chat', () => {
- const {t, locale} = useI18n();
- const conversationId = ref();
- const chatHistory = ref
+
+ Confirm Deletion
++ Are you sure you want to delete + {{ props.data.name }}? This action cannot be undone. +
+
+
+
+
+
-
-
-
-
-
-
+
+
diff --git a/frontend/libs/chat-app/ui/ChatBubble.vue b/frontend/libs/chat-app/ui/ChatBubble.vue
index 3e3a4ab..4c1de41 100644
--- a/frontend/libs/chat-app/ui/ChatBubble.vue
+++ b/frontend/libs/chat-app/ui/ChatBubble.vue
@@ -1,141 +1,154 @@
-
-
+
+
+
+
+
+
-
-
-
- ![]()
-
-
- {{ props.name }}
-
-
-
-
-
-
-
-
-
-
- .
- .
- .
-
+
-
-
-
-
+
-
diff --git a/frontend/libs/chat-app/ui/ChatMessages.vue b/frontend/libs/chat-app/ui/ChatMessages.vue
index 86245f7..c2ee98d 100644
--- a/frontend/libs/chat-app/ui/ChatMessages.vue
+++ b/frontend/libs/chat-app/ui/ChatMessages.vue
@@ -1,83 +1,87 @@
-
-
+
+
+ ![]()
+
+
+ {{ props.name }}
+
+
+
+
-
+
+
+
+
+
+
+ .
+ .
+ .
+
+
+
+
-
+
+
+
+
+
+
+
+```
diff --git a/frontend/libs/shared/global.css b/frontend/libs/shared/global.css
index 89c1c8c..4bd50d9 100644
--- a/frontend/libs/shared/global.css
+++ b/frontend/libs/shared/global.css
@@ -2,7 +2,6 @@
@tailwind components;
@tailwind utilities;
-
html,
body,
#app {
@@ -36,3 +35,21 @@ main {
.base-200-highlight {
background-color: var(--base-200-highlight);
}
+
+/* Chat text styles */
+.chat-text {
+ color: var(--tw-prose-body);
+}
+
+[data-theme="light"] .chat-text {
+ color: #333333;
+}
+
+[data-theme="dark"] .chat-text {
+ color: #f5f5f5;
+}
+
+.avatar img {
+ background-color: white;
+ height: 42px;
+}
diff --git a/frontend/libs/shared/settings.ts b/frontend/libs/shared/settings.ts
new file mode 100644
index 0000000..86c2fe9
--- /dev/null
+++ b/frontend/libs/shared/settings.ts
@@ -0,0 +1,45 @@
+export interface AppSettings {
+ bot: {
+ name: string;
+ };
+ ui: {
+ logoPath: string;
+ theme: {
+ default: string;
+ options: string[];
+ };
+ };
+ // Add other configuration sections as needed
+}
+
+// Default settings to use as fallbacks
+const defaultSettings: AppSettings = {
+ bot: {
+ name: "Knowledge Agent",
+ },
+ ui: {
+ logoPath: "/assets/navigation-logo.svg",
+ theme: {
+ default: "light",
+ options: ["light", "dark"],
+ },
+ },
+};
+
+// Load settings from environment variables with fallbacks to defaults
+export const settings: AppSettings = {
+ bot: {
+ name: import.meta.env.VITE_BOT_NAME || defaultSettings.bot.name,
+ },
+ ui: {
+ logoPath: import.meta.env.VITE_UI_LOGO_PATH || defaultSettings.ui.logoPath,
+ theme: {
+ default:
+ import.meta.env.VITE_UI_THEME_DEFAULT ||
+ defaultSettings.ui.theme.default,
+ options: import.meta.env.VITE_UI_THEME_OPTIONS
+ ? (import.meta.env.VITE_UI_THEME_OPTIONS as string).split(",")
+ : defaultSettings.ui.theme.options,
+ },
+ },
+};
diff --git a/frontend/libs/shared/store/theme.store.ts b/frontend/libs/shared/store/theme.store.ts
new file mode 100644
index 0000000..67550f6
--- /dev/null
+++ b/frontend/libs/shared/store/theme.store.ts
@@ -0,0 +1,34 @@
+import { defineStore } from "pinia";
+import { ref, watch } from "vue";
+import { settings } from "../settings";
+
+export const useThemeStore = defineStore("theme", () => {
+ const THEME_STORAGE_KEY = "app-theme";
+ const availableThemes = settings.ui.theme.options;
+ const currentTheme = ref(loadSavedTheme());
+
+ function loadSavedTheme() {
+ const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+ return savedTheme && availableThemes.includes(savedTheme)
+ ? savedTheme
+ : settings.ui.theme.default;
+ }
+
+ function setTheme(theme: string) {
+ if (!availableThemes.includes(theme)) return;
+ currentTheme.value = theme;
+ localStorage.setItem(THEME_STORAGE_KEY, theme);
+ applyTheme(theme);
+ }
+
+ function applyTheme(theme: string) {
+ document.documentElement.setAttribute("data-theme", theme);
+ document.documentElement.classList.remove(...availableThemes);
+ document.documentElement.classList.add(theme);
+ }
+
+ // Initialize theme
+ applyTheme(currentTheme.value);
+
+ return { currentTheme, setTheme, availableThemes };
+});
diff --git a/frontend/libs/shared/ui/NavigationContainer.vue b/frontend/libs/shared/ui/NavigationContainer.vue
index b267c78..6d81cd5 100644
--- a/frontend/libs/shared/ui/NavigationContainer.vue
+++ b/frontend/libs/shared/ui/NavigationContainer.vue
@@ -1,14 +1,23 @@
-
-
-
+
+
diff --git a/frontend/libs/i18n/chat/de.json b/frontend/libs/i18n/chat/de.json
index 74a135a..188278e 100644
--- a/frontend/libs/i18n/chat/de.json
+++ b/frontend/libs/i18n/chat/de.json
@@ -1,6 +1,6 @@
{
"chat": {
- "initialMessage": "Hi 👋, ich bin dein KI-Assistent und und hier, um dich bei allen Fragen zu den bereitgestellten Dokumenten zu unterstützen!",
+ "initialMessage": "Hi 👋, ich bin dein KI-Assistent {bot_name} und hier, um dich bei allen Fragen zu den bereitgestellten Dokumenten zu unterstützen!",
"send": "Senden",
"justAsk": "Frag mich einfach...",
"sources": "Quellen",
@@ -11,4 +11,4 @@
},
"disclaimer": "Der Assistent kann Fehler machen. Bitte überprüfe wichtige Informationen. Die Antworten sind nicht rechtsverbindlich."
}
-}
\ No newline at end of file
+}
diff --git a/frontend/libs/i18n/chat/en.json b/frontend/libs/i18n/chat/en.json
index 07b1d1b..d879834 100644
--- a/frontend/libs/i18n/chat/en.json
+++ b/frontend/libs/i18n/chat/en.json
@@ -1,6 +1,6 @@
{
"chat": {
- "initialMessage": "Hi 👋, I’m the AI Docs Chatbot, here to support you with any questions regarding the provided documents!",
+ "initialMessage": "Hi 👋, I’m your AI Assistant {bot_name}, here to support you with any questions regarding the provided documents!",
"send": "Send",
"justAsk": "How can i help you?",
"sources": "Sources",
@@ -11,4 +11,4 @@
},
"disclaimer": "The AI powered chatbot can be wrong. Check important information. The answers are not legally binding."
}
-}
\ No newline at end of file
+}
diff --git a/frontend/libs/shared/README.md b/frontend/libs/shared/README.md
new file mode 100644
index 0000000..cd0a173
--- /dev/null
+++ b/frontend/libs/shared/README.md
@@ -0,0 +1,53 @@
+# Shared Libraries
+
+This directory contains reusable components, utilities, and configurations used across the frontend application.
+
+## Contents
+
+### Configuration & Theming
+- **settings.ts** - Application settings with environment variable support
+- **theme.store.ts** - Pinia store for theme management
+- **global.css** - Global styles and Tailwind configuration
+
+### UI Components
+- **NavigationContainer** - Top navigation bar with theme toggle
+- **LogoContainer** - Container for displaying logos
+- **SideBarContainer** - Sidebar layout component with header and scrollable content
+- **ThemeToggle** - Dark/light mode toggle button
+
+### Utilities
+- Date formatting
+- UUID generation
+- File size formatting
+- Markdown rendering
+- Empty checks
+
+## Environment Configuration
+
+Settings can be customized using environment variables in a `.env` file:
+
+```
+VITE_BOT_NAME=My Custom Bot
+VITE_UI_LOGO_PATH=/assets/custom-logo.svg
+VITE_UI_THEME_DEFAULT=dark
+VITE_UI_THEME_OPTIONS=light,dark
+```
+
+## Usage Example
+
+```vue
+
+
+
+
+
+
-
+
- ![]()
-
-
+
diff --git a/frontend/libs/shared/ui/ThemeToggle.vue b/frontend/libs/shared/ui/ThemeToggle.vue
new file mode 100644
index 0000000..ea27f1b
--- /dev/null
+++ b/frontend/libs/shared/ui/ThemeToggle.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 8da51d4..2f55940 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,72 +3,125 @@ module.exports = {
content: [
"apps/**/index.html",
"apps/**/src/**/*.{vue,js,ts}",
- "libs/**/*.{vue,js,ts}"
+ "libs/**/*.{vue,js,ts}",
],
theme: {
extend: {
typography: (theme) => ({
dark: {
css: {
- color: theme('colors.white'),
- 'h1, h2, h3, h4': {
- color: theme('colors.white'),
+ color: theme("colors.white"),
+ "h1, h2, h3, h4": {
+ color: theme("colors.white"),
},
a: {
- color: theme('colors.white'),
+ color: theme("colors.white"),
},
strong: {
- color: theme('colors.white'),
+ color: theme("colors.white"),
},
- 'ol > li::marker': {
- color: theme('colors.white'),
+ "ol > li::marker": {
+ color: theme("colors.white"),
},
- 'ul > li::marker': {
- color: theme('colors.white'),
+ "ul > li::marker": {
+ color: theme("colors.white"),
},
li: {
- color: theme('colors.white'), // For list items themselves
+ color: theme("colors.white"),
},
blockquote: {
- color: theme('colors.white'),
+ color: theme("colors.white"),
},
code: {
- color: theme('colors.white'),
+ color: theme("colors.white"),
},
},
},
}),
},
},
- plugins: [require('@tailwindcss/typography'), require("daisyui")],
+ plugins: [require("@tailwindcss/typography"), require("daisyui")],
daisyui: {
themes: [
{
- appTheme: {
- "secondary": "#f6d860",
- "primary": "#045462",
- "primary-content": "#ffff",
+ light: {
+ // Light color for primary (navigation) in light mode
+ primary: "#f8f9fa",
+ "primary-content": "#0a1e2d", // Dark text on light background
- "accent": "#F8EC17",
- "accent-content": "#045462",
+ // Secondary color
+ secondary: "#575756", // Gray-80
+ "secondary-content": "#ffffff",
- "neutral": "#334155",
- "neutral-content": "#F1F5F9",
+ // Spacemint for accent buttons (btn-accent)
+ accent: "#00c3cd", // Spacemint
+ "accent-content": "#fff",
- "base-100": "#ffffff",
- "base-200": "#F9FAFB",
- "base-300": "#D1D5DB",
+ // Neutral colors
+ neutral: "#B2B2B2",
+ "neutral-content": "#0a1e2d",
- "info": "#41AEF5",
+ // Base colors - WHITE BACKGROUND
+ "base-100": "#ffffff", // White background
+ "base-200": "#EDEDED", // Gray-10
+ "base-300": "#DADADA", // Gray-20
+ "base-content": "#333333", // Dark text for light theme
- '--scrollbar-track': '#ffff',
- '--scrollbar-thumb': 'rgba(0, 0, 0, .3)',
- "--base-200-highlight": "#E5EDEF",
- }
- }
+ // Info, success, warning, error
+ info: "#00c3cd", // Spacemint
+ success: "#00c387", // Fresh Green
+ warning: "#fafc00", // Sunshine
+ error: "#ff0555", // Coral
+
+ // Scrollbar and highlights
+ "--scrollbar-track": "#ffffff",
+ "--scrollbar-thumb": "rgba(10, 30, 45, 0.3)",
+ "--base-200-highlight": "#C6C6C6",
+
+ // Fix for chat text color
+ ".chat-text": "#333333", // Dark text color for chat in light mode
+ },
+ dark: {
+ // Keep Navy Blue for primary (navigation) in dark mode
+ primary: "#0a1e2d",
+ "primary-content": "#ffffff",
+
+ // Secondary color
+ secondary: "#575756", // Gray-80
+ "secondary-content": "#ffffff",
+
+ // Spacemint for accent buttons (btn-accent)
+ accent: "#00c3cd", // Spacemint
+ "accent-content": "#fff",
+
+ // Neutral colors
+ neutral: "#B2B2B2",
+ "neutral-content": "#ffffff",
+
+ // Base colors - DARK BACKGROUND
+ "base-100": "#1e1e1e", // Dark background
+ "base-200": "#2d2d2d", // Dark Gray
+ "base-300": "#3d3d3d", // Medium Gray
+ "base-content": "#f5f5f5", // Light text for dark theme
+
+ // Info, success, warning, error
+ info: "#00c3cd", // Spacemint
+ success: "#00c387", // Fresh Green
+ warning: "#fafc00", // Sunshine
+ error: "#ff0555", // Coral
+
+ // Scrollbar and highlights
+ "--scrollbar-track": "#2d2d2d",
+ "--scrollbar-thumb": "rgba(255, 255, 255, 0.3)",
+ "--base-200-highlight": "#4d4d4d",
+
+ // Fix for chat text color
+ ".chat-text": "#f5f5f5", // Light text color for chat in dark mode
+ },
+ },
],
utils: true,
logs: false,
- themeRoot: "#app",
- }
-}
+ themeRoot: ":root",
+ },
+};
diff --git a/frontend/tsconfig.base.json b/frontend/tsconfig.base.json
index 4d843bf..8683dd8 100644
--- a/frontend/tsconfig.base.json
+++ b/frontend/tsconfig.base.json
@@ -1,36 +1,38 @@
{
- "compileOnSave": false,
- "compilerOptions": {
- "rootDir": ".",
- "sourceMap": true,
- "declaration": false,
- "moduleResolution": "node",
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true,
- "useDefineForClassFields": true,
- "importHelpers": true,
- "target": "esnext",
- "jsx": "preserve",
- "isolatedModules": true,
- "resolveJsonModule": true,
- "allowImportingTsExtensions": true,
- "jsxImportSource": "vue",
- "module": "esnext",
- "lib": ["es2020", "dom", "DOM.Iterable"],
- "skipLibCheck": true,
- "skipDefaultLibCheck": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "baseUrl": ".",
- "paths": {
- "@chat": ["libs/chat-app/index"],
- "@admin": ["libs/admin-app/index"],
- "@i18n/chat": ["libs/i18n/chat/index"],
- "@i18n/admin": ["libs/i18n/admin/index"],
- "@shared/ui": ["libs/shared/ui/index"],
- "@shared/utils": ["libs/shared/utils/src/index"],
- "@shared/style": ["libs/shared/global.css"]
- }
- },
- "exclude": ["node_modules", "tmp"]
+ "compileOnSave": false,
+ "compilerOptions": {
+ "rootDir": ".",
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "useDefineForClassFields": true,
+ "importHelpers": true,
+ "target": "esnext",
+ "jsx": "preserve",
+ "isolatedModules": true,
+ "resolveJsonModule": true,
+ "allowImportingTsExtensions": true,
+ "jsxImportSource": "vue",
+ "module": "esnext",
+ "lib": ["es2020", "dom", "DOM.Iterable"],
+ "skipLibCheck": true,
+ "skipDefaultLibCheck": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "baseUrl": ".",
+ "paths": {
+ "@chat": ["libs/chat-app/index"],
+ "@admin": ["libs/admin-app/index"],
+ "@i18n/chat": ["libs/i18n/chat/index"],
+ "@i18n/admin": ["libs/i18n/admin/index"],
+ "@shared/ui": ["libs/shared/ui/index"],
+ "@shared/utils": ["libs/shared/utils/src/index"],
+ "@shared/style": ["libs/shared/global.css"],
+ "@shared/settings": ["./libs/shared/settings.ts"],
+ "@shared/store/theme.store": ["./libs/shared/store/theme.store.ts"]
+ }
+ },
+ "exclude": ["node_modules", "tmp"]
}
+ ![]()
+
+
+
+