|
|
@@ -0,0 +1,132 @@
|
|
|
+<template>
|
|
|
+ <div class="flex h-screen bg-gray-100">
|
|
|
+ <!-- Left Sidebar -->
|
|
|
+ <div class="w-64 bg-[#08002E] text-white flex flex-col">
|
|
|
+ <!-- Logo -->
|
|
|
+ <div class="p-4 flex items-center space-x-2">
|
|
|
+ <div class="bg-purple-600 rounded p-1">
|
|
|
+ <PlaySquare class="w-5 h-5" />
|
|
|
+ </div>
|
|
|
+ <span class="font-bold text-xl">智能文档聊天</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Navigation -->
|
|
|
+ <nav class="flex-1 p-4">
|
|
|
+ <div class="space-y-2">
|
|
|
+ <div v-for="(contact, index) in contacts" :key="index" class="flex items-center space-x-2 text-gray-300 hover:text-white cursor-pointer">
|
|
|
+ <Circle class="w-4 h-4" />
|
|
|
+ <span>{{ contact.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <div class="flex-1 flex flex-col">
|
|
|
+ <!-- Chat Area -->
|
|
|
+ <div class="flex-1 overflow-auto p-6">
|
|
|
+ <div class="max-w-4xl mx-auto space-y-6">
|
|
|
+ <!-- Chat Messages -->
|
|
|
+ <div v-for="(message, index) in messages" :key="index" class="flex items-start space-x-4">
|
|
|
+ <div v-if="message.sender === 'user'" class="bg-violet-100 text-violet-900 p-3 rounded-lg max-w-md mt-2">
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
+ <small class="block mt-1 text-gray-500">{{ message.timestamp }}</small>
|
|
|
+ </div>
|
|
|
+ <div v-else class="bg-gray-200 text-gray-900 p-3 rounded-lg max-w-md mt-2 self-end">
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
+ <small class="block mt-1 text-gray-500">{{ message.timestamp }}</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Input Area -->
|
|
|
+ <div class="border-t p-4 bg-white">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <textarea
|
|
|
+ v-model="inputMessage"
|
|
|
+ class="flex-1 border rounded-lg p-3 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ placeholder="Type a message..."
|
|
|
+ rows="1"
|
|
|
+ ></textarea>
|
|
|
+ <label class="cursor-pointer">
|
|
|
+ <input type="file" @change="handleFileUpload" class="hidden" />
|
|
|
+ <div class="p-2 bg-purple-500 text-white rounded-full hover:bg-purple-600">
|
|
|
+ <Paperclip class="w-5 h-5" />
|
|
|
+ </div>
|
|
|
+ </label>
|
|
|
+ <button @click="sendMessage" class="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
|
|
|
+ <Send class="w-5 h-5" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div v-for="(file, index) in uploadedFiles" :key="index" class="mt-2 flex items-center space-x-2">
|
|
|
+ <div class="bg-gray-50 rounded-lg p-2">
|
|
|
+ <div class="text-sm font-medium truncate">{{ file.name }}</div>
|
|
|
+ <div class="text-xs text-gray-500">{{ file.type }}</div>
|
|
|
+ </div>
|
|
|
+ <button @click="removeFile(index)" class="p-2 bg-red-500 text-white rounded-full hover:bg-red-600">
|
|
|
+ <Trash2 class="w-3 h-3" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import {
|
|
|
+ PlaySquare,
|
|
|
+ Circle,
|
|
|
+ Paperclip,
|
|
|
+ Send,
|
|
|
+ Trash2
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const contacts = ref([
|
|
|
+ { name: 'Contact 1' },
|
|
|
+ { name: 'Contact 2' },
|
|
|
+ { name: 'Contact 3' }
|
|
|
+])
|
|
|
+
|
|
|
+const messages = ref([
|
|
|
+ { sender: 'user', text: 'Hello!', timestamp: '10:00 AM' },
|
|
|
+ { sender: 'bot', text: 'Hi there! How can I assist you?', timestamp: '10:01 AM' }
|
|
|
+])
|
|
|
+
|
|
|
+const inputMessage = ref('')
|
|
|
+const uploadedFiles = ref([])
|
|
|
+
|
|
|
+const sendMessage = () => {
|
|
|
+ if (inputMessage.value.trim()) {
|
|
|
+ messages.value.push({ sender: 'user', text: inputMessage.value, timestamp: new Date().toLocaleTimeString() })
|
|
|
+ inputMessage.value = ''
|
|
|
+ // Simulate bot response
|
|
|
+ setTimeout(() => {
|
|
|
+ messages.value.push({ sender: 'bot', text: 'Here is your response based on the document.', timestamp: new Date().toLocaleTimeString() })
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleFileUpload = (event) => {
|
|
|
+ const file = event.target.files[0]
|
|
|
+ if (file) {
|
|
|
+ uploadedFiles.value.push(file)
|
|
|
+ // Simulate processing file and generating response
|
|
|
+ setTimeout(() => {
|
|
|
+ messages.value.push({ sender: 'bot', text: `Uploaded file: ${file.name}`, timestamp: new Date().toLocaleTimeString() })
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const removeFile = (index) => {
|
|
|
+ uploadedFiles.value.splice(index, 1)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+textarea {
|
|
|
+ min-height: 40px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
genlitex