prototype_design/src/views/NewChatPage.vue

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