|
|
@@ -0,0 +1,88 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen flex bg-gradient-to-br from-white to-purple-500">
|
|
|
+ <main class="flex-1 p-8 space-y-6 bg-gradient-to-br from-white to-purple-500">
|
|
|
+ <div class="max-w-4xl mx-auto p-8">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="flex justify-between items-center mb-8">
|
|
|
+ <div>
|
|
|
+ <h1 class="text-2xl font-semibold mb-2">User Story Generator</h1>
|
|
|
+ <p class="text-gray-600">Generate user stories for your project.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Content Area -->
|
|
|
+ <div class="bg-white p-6 rounded-lg shadow-sm mb-6 flex flex-col h-[500px] overflow-y-auto">
|
|
|
+ <div v-for="(message, index) in messages" :key="index" class="mb-4">
|
|
|
+ <div v-if="message.sender === 'user'" class="flex justify-end">
|
|
|
+ <div class="max-w-md bg-purple-500 text-white p-3 rounded-lg rounded-bl-none">
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
+ <span class="text-xs text-right mt-1">{{ message.timestamp }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex justify-start">
|
|
|
+ <div class="max-w-md bg-gray-100 p-3 rounded-lg rounded-tr-none">
|
|
|
+ <p>{{ message.text }}</p>
|
|
|
+ <span class="text-xs text-left mt-1">{{ message.timestamp }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Chat Input -->
|
|
|
+ <div class="flex gap-2">
|
|
|
+ <div class="flex-1 relative">
|
|
|
+ <input
|
|
|
+ v-model="inputMessage"
|
|
|
+ type="text"
|
|
|
+ placeholder="Type your message..."
|
|
|
+ class="w-full p-3 pr-12 border rounded-lg"
|
|
|
+ @keyup.enter="sendMessage"
|
|
|
+ />
|
|
|
+ <Upload class="absolute right-10 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 { Send, Upload } from 'lucide-vue-next'
|
|
|
+
|
|
|
+const inputMessage = ref('')
|
|
|
+const messages = ref([
|
|
|
+ {
|
|
|
+ sender: 'bot',
|
|
|
+ text: 'Hello! How can I assist you in generating user stories?',
|
|
|
+ timestamp: new Date().toLocaleTimeString()
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+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: 'Thank you! Here is a sample user story based on your input.',
|
|
|
+ timestamp: new Date().toLocaleTimeString()
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const uploadFile = () => {
|
|
|
+ // Handle file upload logic here
|
|
|
+ alert('File upload functionality is not implemented yet.')
|
|
|
+}
|
|
|
+</script>
|
genlitex