帮我基于html+vue+elementui写一个页面，是一个和机器人对话的聊天室，样式有科技感，点击发送消息后发送按钮变为一个有loading效果的图标并且不可再发送消息，除非…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robot Chat Room</title>
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        body {
            background-color: #202124;
        }
        #app {
            max-width: 768px;
            margin: 0 auto;
            padding: 1rem;
        }
        .chat-room {
            height: 400px;
            border: 1px solid #303139;
            background-color: #303139;
            border-radius: 5px;
            padding: 1rem;
            overflow-y: auto;
            margin-bottom: 1rem;
        }
        .chat-entry {
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
        }
        .chat-entry-time {
            font-size: 0.8rem;
            color: #808691;
            margin-bottom: 0.5rem;
        }
        .chat-entry-content {
            display: inline-block;
            background-color: #34a853;
            border-radius: 3px;
            padding: 0.5rem 1rem;
            color: white;
            max-width: 80%;
        }
        .user-entry .chat-entry-content {
            background-color: #1a73e8;
        }
        .chat-input {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .el-input {
            flex-grow: 1;
        }
        .send-btn {
            margin-left: 1rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="chat-room">
            <div v-for="entry in chatEntries" :class="['chat-entry', entry.isRobot ? 'robot-entry' : 'user-entry']">
                <p class="chat-entry-time">{{ entry.time }}</p>
                <p class="chat-entry-content">{{ entry.content }}</p>
            </div>
        </div>
        <div class="chat-input">
            <el-input v-model="inputMessage" placeholder="Message" @keyup.enter.native="sendMessage" :disabled="isLoading"></el-input>
            <el-button class="send-btn" type="primary" @click="sendMessage" :loading="isLoading" :disabled="isLoading">Send</el-button>
        </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                chatEntries: [],
                inputMessage: '',
                isLoading: false
            },
            methods: {
                sendMessage() {
                    if (this.inputMessage.trim() === '') return;
                    const timestamp = new Date();
                    const time = timestamp.toLocaleTimeString();
                    this.chatEntries.push({
                        content: this.inputMessage,
                        time: time,
                        isRobot: false,
                    });
                    this.isLoading = true;
                    this.inputMessage = '';
                    //simulate a robot response with a delay of 2 seconds
                    setTimeout(() => {
                        this.chatEntries.push({
                            content: "Robot response to: "+ this.inputMessage,
                            time: time,
                            isRobot: true,
                        });
                        this.isLoading = false;
                    }, 2000);
                }
            }
        });
    </script>
</body>
</html>

这个代码是一个基于 HTML, Vue 和 ElementUI 的简单聊天室页面，和机器人对话。样式具有科技感，并且兼容 PC 和手机端。点击发送消息按钮后，按钮变为一个具有加载效果的图标，并且在机器人返回信息之前不能再次发送消息。

需要注意的是，这个示例中使用了 setTimeout 函数模拟机器人的响应，实际应用中需要根据情况修改这部分内容。