olivebot/gui/templates/chat.html
2024-12-10 16:23:32 +08:00

46 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>聊天窗口</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
<!-- 引入 Socket.IO 客户端库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js" integrity="sha512-OE+tNYgJBSy/R8gSSzIjcC+3hkT0lj3cPnOeYv50E6n0Pzv1tq9I7YytCTv19Uaz1Lr5un2ngc7IQXBuT7GqdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 引入 Vue.js -->
<script src="{{ url_for('static', filename='js/vue.js') }}"></script>
<!-- 引入 Element UI -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/element/theme-chalk.css') }}" />
<script src="{{ url_for('static', filename='js/element-ui.js') }}"></script>
<!-- 引入 chat.js -->
<script src="{{ url_for('static', filename='js/chat.js') }}" defer></script>
</head>
<body>
<div id="chat-app">
<div id="chat-widget">
<button id="toggle-chat" @click="toggleChat">打开聊天</button>
<div id="chat-container" class="hidden">
<div id="messages">
<!-- 消息气泡将动态添加到这里 -->
<div v-for="(message, index) in messages" :key="index" class="message" :class="message.type">
<div class="bubble">
[[ message.content ]]
<div class="message-time">[[ message.timetext ]]</div>
</div>
</div>
</div>
<div id="status-indicator">[[ status ]]</div>
<div id="input-area">
<button id="record-btn" @click="toggleRecording">
<img id="record-icon" :src="isRecording ? '/static/images/recording.png' : '/static/images/record.png'" alt="录音">
</button>
<input type="text" id="message-input" placeholder="请输入内容..." v-model="newMessage">
<button id="send-btn" @click="sendMessage">
<img src="{{ url_for('static', filename='images/send.png') }}" alt="发送">
</button>
</div>
</div>
</div>
</div>
</body>
</html>