Spaces:

FrederickSundeep
/

AIHRTicketGenerator

Sleeping

App Files Files Community

FrederickSundeep commited on Apr 23, 2025

Commit

722ee06

1 Parent(s): d34735d

update file 014

Browse files

Files changed (1) hide show

templates/index.html +101 -31

templates/index.html CHANGED Viewed

@@ -5,55 +5,56 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            padding: 40px;
             background-color: #f0f2f5;
         }
-        form {
-            background: white;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
             max-width: 600px;
             margin: auto;
         }
-        input, textarea {
             width: 100%;
-            padding: 12px;
-            margin: 10px 0 20px;
             border: 1px solid #ccc;
-            border-radius: 8px;
         }
         button {
             background-color: #007bff;
             border: none;
-            padding: 12px 25px;
             border-radius: 8px;
-            color: white;
-            font-size: 16px;
-        }
-        .ticket-box {
-            background: #e6ffe6;
-            padding: 20px;
-            margin-top: 30px;
-            border-radius: 10px;
         }
     </style>
 </head>
 <body>
-<h2 align="center">🤖 AI HR Ticket Generator</h2>
-<form action="/generate" method="post">
-    <label for="name">Employee Name:</label>
-    <input type="text" name="name" required>
-    <label for="email">Email:</label>
-    <input type="email" name="email" required>
-    <label for="issue">Issue Description:</label>
-    <textarea name="issue" rows="5" required></textarea>
-    <button type="submit">Generate Ticket</button>
 </form>
 {% if ticket %}
@@ -68,5 +69,74 @@
     <a href="/tickets">📄 View Submitted Tickets</a>
 </p>
 </body>
 </html>

     <style>
         body {
             font-family: Arial, sans-serif;
             background-color: #f0f2f5;
+            padding: 40px;
         }
+        .chat-box {
             max-width: 600px;
+            background: white;
+            padding: 20px;
             margin: auto;
+            border-radius: 10px;
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+        }
+        .message {
+            margin: 10px 0;
+        }
+        .message.bot {
+            color: #333;
         }
+        .message.user {
+            color: #007bff;
+            text-align: right;
+        }
+        input, select {
             width: 100%;
+            padding: 10px;
+            margin-top: 10px;
+            border-radius: 6px;
             border: 1px solid #ccc;
         }
         button {
+            margin-top: 20px;
+            padding: 12px 20px;
             background-color: #007bff;
+            color: white;
             border: none;
             border-radius: 8px;
         }
     </style>
 </head>
 <body>
+<div class="chat-box" id="chatBox">
+    <div class="message bot">Hi! Let's create your HR ticket. What is your first name?</div>
+</div>
+<form id="chatForm" style="display:none;" action="/generate" method="post">
+    <input type="hidden" name="name" id="nameField">
+    <input type="hidden" name="email" id="emailField">
+    <input type="hidden" name="issue" id="issueField">
+    <input type="hidden" name="priority" id="priorityField">
+    <input type="hidden" name="date" id="dateField">
 </form>
 {% if ticket %}
     <a href="/tickets">📄 View Submitted Tickets</a>
 </p>
+<script>
+    const chatBox = document.getElementById("chatBox");
+    const form = document.getElementById("chatForm");
+    const questions = [
+        { label: "First Name", field: "firstName", type: "text" },
+        { label: "Last Name", field: "lastName", type: "text" },
+        { label: "Email Address", field: "email", type: "email" },
+        { label: "Describe the issue you're facing", field: "issue", type: "textarea" },
+        {
+            label: "Select priority",
+            field: "priority",
+            type: "select",
+            options: ["High", "Medium", "Low"]
+        },
+        { label: "Date of issue", field: "date", type: "date" }
+    ];
+    let current = 0;
+    let responses = {};
+    function nextQuestion() {
+        if (current >= questions.length) {
+            document.getElementById("nameField").value = responses.firstName + " " + responses.lastName;
+            document.getElementById("emailField").value = responses.email;
+            document.getElementById("issueField").value = responses.issue;
+            document.getElementById("priorityField").value = responses.priority;
+            document.getElementById("dateField").value = responses.date;
+            form.submit();
+            return;
+        }
+        const q = questions[current];
+        const inputId = "input_" + q.field;
+        let inputElement;
+        let html = `<div class="message bot">${q.label}</div>`;
+        if (q.type === "select") {
+            html += `<select id="${inputId}">`;
+            q.options.forEach(opt => {
+                html += `<option value="${opt}">${opt}</option>`;
+            });
+            html += `</select>`;
+        } else if (q.type === "textarea") {
+            html += `<textarea id="${inputId}" rows="4"></textarea>`;
+        } else {
+            html += `<input type="${q.type}" id="${inputId}" />`;
+        }
+        html += `<button onclick="handleInput('${q.field}', '${inputId}'); return false;">Next</button>`;
+        chatBox.innerHTML += html;
+    }
+    function handleInput(field, inputId) {
+        const value = document.getElementById(inputId).value.trim();
+        if (!value) return;
+        responses[field] = value;
+        const userReply = `<div class="message user">${value}</div>`;
+        chatBox.innerHTML += userReply;
+        current++;
+        setTimeout(nextQuestion, 500);
+    }
+    window.onload = nextQuestion;
+</script>
 </body>
 </html>