|
|
@@ -0,0 +1,147 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <aside class="sidebar">
|
|
|
+ <header>
|
|
|
+ <h1>Contact List</h1>
|
|
|
+ </header>
|
|
|
+ <ul>
|
|
|
+ <li v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)">
|
|
|
+ {{ contact.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </aside>
|
|
|
+ <section class="message-area">
|
|
|
+ <div v-for="message in messages" :key="message.id" :class="{'message-bubble': true, 'sent': message.sentByMe, 'received': !message.sentByMe}">
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="card-area">
|
|
|
+ <div class="card" v-for="card in cards" :key="card.id">
|
|
|
+ {{ card.content }}
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <footer>
|
|
|
+ <form @submit.prevent="sendMessage">
|
|
|
+ <input type="text" v-model="messageText" placeholder="Type a message...">
|
|
|
+ <button type="submit">Send</button>
|
|
|
+ <input type="file" @change="handleFileUpload">
|
|
|
+ </form>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ contacts: [
|
|
|
+ { id: 1, name: 'Contact 1' },
|
|
|
+ { id: 2, name: 'Contact 2' }
|
|
|
+ ],
|
|
|
+ selectedContact: null,
|
|
|
+ messages: [],
|
|
|
+ messageText: '',
|
|
|
+ cards: [
|
|
|
+ { id: 1, content: 'Card 1 Content' },
|
|
|
+ { id: 2, content: 'Card 2 Content' }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectContact(contact) {
|
|
|
+ this.selectedContact = contact;
|
|
|
+ // Fetch messages for the selected contact
|
|
|
+ },
|
|
|
+ sendMessage() {
|
|
|
+ if (this.messageText.trim()) {
|
|
|
+ this.messages.push({ id: Date.now(), text: this.messageText, sentByMe: true });
|
|
|
+ this.messageText = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFileUpload(event) {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ if (file) {
|
|
|
+ // Handle file upload logic
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+@import url('./assets/new-chat-style.css');
|
|
|
+
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 250px;
|
|
|
+ background-color: #08002E;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.message-area {
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.card-area {
|
|
|
+ width: 300px;
|
|
|
+ background-color: gray;
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #FBEFFF;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.message-bubble {
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.sent {
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.received {
|
|
|
+ background-color: lightgray;
|
|
|
+}
|
|
|
+
|
|
|
+footer form {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+footer form input[type="text"] {
|
|
|
+ flex-grow: 1;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+footer form button {
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+footer form input[type="file"] {
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+</style>
|
genlitex