- Introduction of Shells for Mobile client and Desktop client. Extensible with additional shells in the future

2025-12-01 14:07:16 +01:00
parent 5a5d6b03af
commit 9b86a220b1
8 changed files with 1049 additions and 25 deletions
--- a/eveai_chat_client/static/assets/vue-components/DesktopChatShell.vue
+++ b/eveai_chat_client/static/assets/vue-components/DesktopChatShell.vue
@@ -0,0 +1,172 @@
+<template>
+  <!--
+    DesktopChatShell
+    -----------------
+    Shell voor brede schermen (desktop/tablet-landscape) die de CoreChatApp
+    in een klassieke layout toont: history boven, invoer onder.
+
+    Let op: de linker Sidebar wordt nog steeds apart gemount op
+    #sidebar-container door chat-client.js. Deze shell is uitsluitend
+    verantwoordelijk voor de rechter chatkolom.
+  -->
+  <div class="desktop-chat-shell">
+    <CoreChatApp
+      :api-prefix="apiPrefix"
+      :conversation-id="conversationId"
+      :user-id="userId"
+      :user-name="userName"
+      :initial-language="initialLanguage"
+      :supported-language-details="supportedLanguageDetails"
+      :allowed-languages="allowedLanguages"
+    >
+      <!-- History-paneel -->
+      <template #history="historyProps">
+        <MessageHistory
+          :messages="historyProps.messages"
+          :is-typing="historyProps.isTyping"
+          :is-submitting-form="historyProps.isSubmittingForm"
+          :api-prefix="apiPrefix"
+          :auto-scroll="settings.autoScroll"
+          @specialist-error="event => {
+            console.log('🧐 [DesktopChatShell] specialist-error vanuit history ontvangen:', event);
+            (historyProps.onSpecialistError || handleSpecialistError)(event);
+          }"
+          @specialist-complete="event => {
+            console.log('🧐 [DesktopChatShell] specialist-complete vanuit history ontvangen:', event);
+            (historyProps.onSpecialistComplete || handleSpecialistComplete)(event);
+          }"
+          ref="messageHistory"
+          class="chat-messages-area"
+        />
+      </template>
+
+      <!-- Actieve boodschap + invoer -->
+      <template #active-message-input="inputProps">
+        <ChatInput
+          :current-message="inputProps.currentMessage"
+          :is-loading="inputProps.isLoading"
+          :max-length="settings.maxMessageLength"
+          :allow-file-upload="settings.allowFileUpload"
+          :allow-voice-message="settings.allowVoiceMessage"
+          :form-data="inputProps.formData"
+          :active-ai-message="inputProps.activeAiMessage"
+          :api-prefix="apiPrefix"
+          @send-message="inputProps.onSendMessage"
+          @update-message="inputProps.onUpdateMessage"
+          @upload-file="inputProps.onUploadFile"
+          @record-voice="inputProps.onRecordVoice"
+          @submit-form="inputProps.onSubmitForm"
+          @specialist-error="event => {
+            console.log('🧐 [DesktopChatShell] specialist-error vanuit ChatInput ontvangen:', event);
+            (inputProps.onSpecialistError || handleSpecialistError)(event);
+          }"
+          @specialist-complete="event => {
+            console.log('🧐 [DesktopChatShell] specialist-complete vanuit ChatInput ontvangen:', event);
+            (inputProps.onSpecialistComplete || handleSpecialistComplete)(event);
+          }"
+          ref="chatInput"
+          class="chat-input-area"
+        />
+      </template>
+    </CoreChatApp>
+  </div>
+</template>
+
+<script>
+import CoreChatApp from './CoreChatApp.vue';
+import MessageHistory from './MessageHistory.vue';
+import ChatInput from './ChatInput.vue';
+
+export default {
+  name: 'DesktopChatShell',
+  components: {
+    CoreChatApp,
+    MessageHistory,
+    ChatInput
+  },
+
+  props: {
+    apiPrefix: {
+      type: String,
+      default: ''
+    },
+    conversationId: {
+      type: String,
+      default: 'default'
+    },
+    userId: {
+      type: [String, Number, null],
+      default: null
+    },
+    userName: {
+      type: String,
+      default: ''
+    },
+    initialLanguage: {
+      type: String,
+      default: 'en'
+    },
+    supportedLanguageDetails: {
+      type: Object,
+      default: () => ({})
+    },
+    allowedLanguages: {
+      type: Array,
+      default: () => ['nl', 'en', 'fr', 'de']
+    },
+    settings: {
+      type: Object,
+      default: () => ({
+        maxMessageLength: 2000,
+        allowFileUpload: true,
+        allowVoiceMessage: false,
+        autoScroll: true
+      })
+    }
+  },
+
+  methods: {
+    handleSpecialistComplete(eventData) {
+      // Wordt binnen CoreChatApp afgehandeld; deze shell kan in de toekomst
+      // aanvullende UI-reacties toevoegen.
+      this.$emit('specialist-complete', eventData);
+    },
+
+    handleSpecialistError(eventData) {
+      this.$emit('specialist-error', eventData);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.desktop-chat-shell {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.chat-messages-area {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  border-radius: 15px;
+  background: var(--history-background);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  width: 100%;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  align-self: center;
+}
+
+.chat-input-area {
+  flex-shrink: 0;
+  flex: 0 0 auto;
+}
+</style>