|
|
@@ -0,0 +1,103 @@
|
|
|
+<template>
|
|
|
+ <a-layout style="height: 100vh;">
|
|
|
+ <a-layout-sider width="250" style="background: #08002E;">
|
|
|
+ <a-layout-header style="background: #5A008F; color: white; font-size: 18px; font-weight: bold; text-align: center;">
|
|
|
+ Chat Application
|
|
|
+ </a-layout-header>
|
|
|
+ <a-list :data-source="contacts" :bordered="false">
|
|
|
+ <a-list-item v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)" :style="{ cursor: 'pointer', padding: '10px' }">
|
|
|
+ {{ contact.name }}
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </a-layout-sider>
|
|
|
+ <a-layout>
|
|
|
+ <a-layout-content style="background: #f0f0f0; padding: 16px;">
|
|
|
+ <a-list :data-source="messages" :bordered="false">
|
|
|
+ <a-list-item v-for="message in messages" :key="message.id" :style="{ textAlign: message.sender === 'user' ? 'right' : 'left' }">
|
|
|
+ <a-card :style="{ backgroundColor: message.sender === 'user' ? '#5A008F' : '#e0e0e0', color: message.sender === 'user' ? 'white' : 'black', borderRadius: '15px', maxWidth: '70%', margin: '10px' }">
|
|
|
+ {{ message.text }}
|
|
|
+ </a-card>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </a-layout-content>
|
|
|
+ <a-layout-footer style="padding: 16px;">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="18">
|
|
|
+ <a-input v-model:value="inputMessage" placeholder="Type a message...">
|
|
|
+ <template #suffix>
|
|
|
+ <a-upload :before-upload="handleUpload">
|
|
|
+ <template #icon>
|
|
|
+ <UploadOutlined />
|
|
|
+ </template>
|
|
|
+ <a-button shape="circle" style="background: #5A008F; color: white;"></a-button>
|
|
|
+ </a-upload>
|
|
|
+ {{ uploadedFileName }}
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-button type="primary" @click="sendMessage" style="background: #5A008F; color: white; font-weight: bold;">Send</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-footer>
|
|
|
+ </a-layout>
|
|
|
+ </a-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { UploadOutlined } from '@ant-design/icons-vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ UploadOutlined
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ contacts: [
|
|
|
+ { id: 1, name: 'Alice' },
|
|
|
+ { id: 2, name: 'Bob' },
|
|
|
+ { id: 3, name: 'Charlie' }
|
|
|
+ ],
|
|
|
+ messages: [],
|
|
|
+ selectedContact: null,
|
|
|
+ inputMessage: '',
|
|
|
+ uploadedFileName: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectContact(contact) {
|
|
|
+ this.selectedContact = contact;
|
|
|
+ this.messages = [];
|
|
|
+ },
|
|
|
+ sendMessage() {
|
|
|
+ if (this.inputMessage.trim()) {
|
|
|
+ this.messages.push({ id: Date.now(), sender: 'user', text: this.inputMessage });
|
|
|
+ this.inputMessage = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleUpload(file) {
|
|
|
+ this.uploadedFileName = file.name;
|
|
|
+ return false; // Prevent file upload
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.ant-layout-sider {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-layout-content {
|
|
|
+ height: calc(100% - 64px); /* Subtract header and footer height */
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-list-item {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-card {
|
|
|
+ word-wrap: break-word;
|
|
|
+}
|
|
|
+</style>
|
genlitex