Migrate frontend from Thymeleaf and basic JS to Vue.js application

frontend/src/components/ChatMain.vue

@@ -0,0 +1,56 @@
+<template>
+  <main class="main-content">
+    <h1 class="main-title">🤖 Chat IA Offline</h1>
+    
+    <ChatMessages 
+      :messages="messages"
+      :is-loading="isLoading"
+    />
+    
+    <ChatForm @send-message="handleSendMessage" :disabled="isLoading" />
+  </main>
+</template>
+
+<script setup>
+import ChatMessages from './ChatMessages.vue'
+import ChatForm from './ChatForm.vue'
+
+defineProps({
+  messages: {
+    type: Array,
+    required: true
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['send-message'])
+
+const handleSendMessage = (message) => {
+  emit('send-message', message)
+}
+</script>
+
+<style scoped>
+.main-content {
+  width: 75%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 1.25rem 1rem;
+  background-color: #121217;
+  overflow: hidden;
+}
+
+.main-title {
+  text-align: center;
+  margin-bottom: 1.25rem;
+  color: #5a90ff;
+  font-weight: 700;
+  font-size: 1.75rem;
+  letter-spacing: 0.05em;
+  user-select: none;
+}
+</style>