|
|
@@ -0,0 +1,110 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gradient-to-b from-white to-purple-500 flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 bg-[#08002E] text-white flex flex-col">
|
|
|
+ <!-- Logo -->
|
|
|
+ <div class="p-6">
|
|
|
+ <div class="flex items-center justify-center mb-8">
|
|
|
+ <h1 class="text-xl font-bold bg-[#08002E] px-4 py-2 rounded-lg">
|
|
|
+ Portal
|
|
|
+ </h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Navigation -->
|
|
|
+ <nav class="flex-1 px-4">
|
|
|
+ <div class="mb-8">
|
|
|
+ <div class="flex items-center justify-between mb-4">
|
|
|
+ <span class="text-sm text-white">Chat History</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-2">
|
|
|
+ <div v-for="(message, index) in chatHistory" :key="index" class="flex items-center gap-3 px-3 py-2 text-gray-300 rounded-lg hover:bg-[#08002E]/80">
|
|
|
+ <span>{{ message.timestamp }}</span>
|
|
|
+ <span>{{ message.content }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6 overflow-auto bg-gradient-to-b from-white to-purple-500">
|
|
|
+ <div class="max-w-4xl mx-auto">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="flex justify-between items-center mb-8">
|
|
|
+ <div>
|
|
|
+ <h1 class="text-2xl font-semibold mb-2">User Story Chat</h1>
|
|
|
+ <p class="text-gray-600">Generate user stories through chat.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Messages -->
|
|
|
+ <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
|
|
|
+ <div v-for="(message, index) in chatMessages" :key="index" class="mb-4">
|
|
|
+ <div v-if="message.sender === 'user'" class="flex justify-end">
|
|
|
+ <div class="bg-purple-500 text-white p-3 rounded-lg max-w-md">
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex justify-start">
|
|
|
+ <div class="bg-gray-200 text-gray-800 p-3 rounded-lg max-w-md">
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Input -->
|
|
|
+ <div class="flex gap-2">
|
|
|
+ <div class="flex-1 relative">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="userInput"
|
|
|
+ placeholder="Type your message..."
|
|
|
+ @keyup.enter="sendMessage"
|
|
|
+ class="w-full p-3 pr-12 border rounded-lg"
|
|
|
+ />
|
|
|
+ <Upload class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 cursor-pointer" @click="uploadFile" />
|
|
|
+ </div>
|
|
|
+ <button class="p-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600" @click="sendMessage">
|
|
|
+ <Send class="w-5 h-5" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { Upload, Send } from 'lucide-vue-next'
|
|
|
+
|
|
|
+const chatHistory = ref([
|
|
|
+ { timestamp: '10:00 AM', content: 'Hello, how can I assist you?' },
|
|
|
+ { timestamp: '10:01 AM', content: 'I need help generating user stories.' },
|
|
|
+])
|
|
|
+
|
|
|
+const chatMessages = ref([
|
|
|
+ { sender: 'user', content: 'Hello, how can I assist you?' },
|
|
|
+ { sender: 'assistant', content: 'I need help generating user stories.' },
|
|
|
+])
|
|
|
+
|
|
|
+const userInput = ref('')
|
|
|
+
|
|
|
+const sendMessage = () => {
|
|
|
+ if (userInput.value.trim()) {
|
|
|
+ chatMessages.value.push({ sender: 'user', content: userInput.value })
|
|
|
+ userInput.value = ''
|
|
|
+ // Simulate assistant response
|
|
|
+ setTimeout(() => {
|
|
|
+ chatMessages.value.push({ sender: 'assistant', content: 'Sure, I can help with that. Please provide more details.' })
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const uploadFile = () => {
|
|
|
+ // Implement file upload logic here
|
|
|
+ alert('File upload clicked')
|
|
|
+}
|
|
|
+</script>
|
genlitex