57 lines
1019 B
Vue

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