zbytest003-2025-02-19 02:00:28

src/views/NewChatPage.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="chat-container">
+    <aside class="sidebar">
+      <h2>Contacts</h2>
+      <ul>
+        <li v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)">
+          {{ contact.name }}
+        </li>
+      </ul>
+    </aside>
+    <main class="chat-area">
+      <div v-for="message in messages" :key="message.id" :class="['message', {'sender': message.sender}, {'receiver': !message.sender}]>
+  <p>{{ message.text }}</p>
+</div>
+        <p>{{ message.text }}</p>
+      </div>
+<footer>
+<a-form-item>
+  <a-input placeholder="Type a message..." v-model="inputText"/>
+</a-form-item>
+  <a-button type="primary" @click="sendMessage">Send</a-button>
+  <a-button type="default">
+    <input type="file" @change="handleFileUpload">
+  </a-button>
+</footer>
+    </main>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { AInput, AButton, AFormItem } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    AInput,
+    AButton,
+    AFormItem,
+  },
+  data() {
+    return {
+      inputText: '',
+      contacts: [
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+      ],
+      selectedContact: null,
+      messages: [],
+    };
+  },
+  methods: {
+    selectContact(contact) {
+      this.selectedContact = contact;
+    },
+    sendMessage() {
+      if (this.inputText.trim()) {
+        this.messages.push({ sender: true, text: this.inputText });
+        this.inputText = '';
+      }
+    },
+    handleFileUpload(event) {
+      // Handle file upload logic here
+    },
+  },
+});
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  height: 100vh;
+}
+.sidebar {
+  width: 250px;
+  background-color: #08002E;
+  color: white;
+  padding: 10px;
+}
+.chat-area {
+  flex-grow: 1;
+  background-color: #f0f0f0;
+  padding: 10px;
+}
+.message {
+  margin-bottom: 10px;
+  border-radius: 10px;
+  padding: 10px;
+}
+.message.sender {
+  background-color: #800080;
+  color: white;
+}
+.message.receiver {
+  background-color: #f0f0f0;
+  color: black;
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
+</style>