eveAI/eveai_chat_client/static/assets/vue-components/DesktopChatShell.vue

<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>