|
@@ -0,0 +1,152 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="chat-container">
|
|
|
|
|
+ <aside class="sidebar">
|
|
|
|
|
+ <header>Chat Application</header>
|
|
|
|
|
+ <ul class="contact-list">
|
|
|
|
|
+ <li v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)">
|
|
|
|
|
+ {{ contact.name }}
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </aside>
|
|
|
|
|
+ <main class="message-area">
|
|
|
|
|
+ <div v-for="message in messages" :key="message.id" class="message-bubble" :class="{ 'sent': message.sender === 'me', 'received': message.sender !== 'me' }">
|
|
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <footer>
|
|
|
|
|
+ <input type="text" v-model="newMessage" placeholder="Type a message...">
|
|
|
|
|
+ <button @click="sendMessage"><i class="anticon anticon-paper-clip"/></button>
|
|
|
|
|
+ <button @click="sendMessage">Send</button>
|
|
|
|
|
+ </footer>
|
|
|
|
|
+ </main>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import { defineComponent } from 'vue';
|
|
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
|
|
+
|
|
|
|
|
+export default defineComponent({
|
|
|
|
|
+ name: 'NewChatView',
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ contacts: [
|
|
|
|
|
+ { id: 1, name: 'Alice' },
|
|
|
|
|
+ { id: 2, name: 'Bob' },
|
|
|
|
|
+ { id: 3, name: 'Charlie' },
|
|
|
|
|
+ ],
|
|
|
|
|
+ selectedContact: null,
|
|
|
|
|
+ messages: [],
|
|
|
|
|
+ newMessage: '',
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ selectContact(contact) {
|
|
|
|
|
+ this.selectedContact = contact;
|
|
|
|
|
+ // Fetch messages for the selected contact
|
|
|
|
|
+ this.messages = [
|
|
|
|
|
+ { id: 1, sender: 'me', text: 'Hello!' },
|
|
|
|
|
+ { id: 2, sender: 'other', text: 'Hi there!' },
|
|
|
|
|
+ ];
|
|
|
|
|
+ },
|
|
|
|
|
+ sendMessage() {
|
|
|
|
|
+ if (this.newMessage.trim()) {
|
|
|
|
|
+ this.messages.push({ id: this.messages.length + 1, sender: 'me', text: this.newMessage });
|
|
|
|
|
+ this.newMessage = '';
|
|
|
|
|
+ message.success('Message sent!');
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.chat-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.sidebar {
|
|
|
|
|
+ width: 250px;
|
|
|
|
|
+ background-color: #08002E;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.contact-list {
|
|
|
|
|
+ list-style-type: none;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.contact-list li {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.contact-list li:hover {
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-area {
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ background-color: white;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-bubble {
|
|
|
|
|
+ margin: 10px 0;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ word-wrap: break-word;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-bubble.sent {
|
|
|
|
|
+ background-color: #6c757d;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ align-self: flex-end;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-bubble.received {
|
|
|
|
|
+ background-color: #f1f1f1;
|
|
|
|
|
+ align-self: flex-start;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+footer {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border-top: 1px solid #ddd;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+footer input[type="text"] {
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+footer button {
|
|
|
|
|
+ background-color: #6c757d;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+footer button:hover {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ background-color: #5a6268;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+footer .anticon-paper-clip {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
genlitex