Spaces:

FrederickSundeep
/

AIHRTicketGenerator

Sleeping

App Files Files Community

FrederickSundeep commited on Apr 23, 2025

Commit

716c06e

1 Parent(s): 462f51f

update file 025

Browse files

Files changed (1) hide show

templates/index.html +125 -78

templates/index.html CHANGED Viewed

@@ -18,13 +18,25 @@
         }
         .message {
             margin: 10px 0;
         }
         .message.bot {
             color: #333;
         }
         .message.user {
-            color: #007bff;
             text-align: right;
         }
         input, select, textarea {
             width: 100%;
@@ -34,26 +46,33 @@
             border: 1px solid #ccc;
         }
         button {
-            margin-top: 10px;
-            padding: 10px 18px;
             background-color: #007bff;
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
         }
-        .button-secondary {
-            background-color: #6c757d;
         }
     </style>
 </head>
 <body>
-<div class="chat-box" id="chatBox">
-    <div class="message bot">👋 Hi! Let's create your HR ticket step-by-step.</div>
 </div>
-<form id="chatForm" style="display:none;" action="/generate" method="post">
     <input type="hidden" name="name" id="nameField">
     <input type="hidden" name="firstName" id="firstNameField">
     <input type="hidden" name="lastName" id="lastNameField">
@@ -63,103 +82,131 @@
     <input type="hidden" name="date" id="dateField">
 </form>
-<script>
-    const chatBox = document.getElementById("chatBox");
-    const form = document.getElementById("chatForm");
     const questions = [
-        { label: "What's your first name?", field: "firstName", type: "text" },
-        { label: "What's your last name?", field: "lastName", type: "text" },
-        { label: "What's your email address?", field: "email", type: "email" },
         { label: "Describe the issue you're facing.", field: "issue", type: "textarea" },
         {
-            label: "Select the priority level of the issue.",
             field: "priority",
             type: "select",
             options: ["High", "Medium", "Low"]
         },
-        { label: "When did this issue occur?", field: "date", type: "date" }
     ];
     let current = 0;
-    let responses = {};
-    function nextQuestion() {
-        if (current >= questions.length) {
-            showConfirmation();
-            return;
-        }
-        const q = questions[current];
-        const inputId = "input_" + q.field;
-        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;
-        scrollToBottom();
-    }
-    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);
-    }
-    function showConfirmation() {
-        chatBox.innerHTML += `<div class="message bot">✅ Great! Here's a summary of your ticket:</div>`;
-        for (let key in responses) {
-            const label = questions.find(q => q.field === key).label;
-            chatBox.innerHTML += `
-                <div class="message bot"><strong>${label}</strong><br>${responses[key]}</div>
-            `;
-        }
-        chatBox.innerHTML += `
-            <div class="message bot">Shall I go ahead and create the ticket?</div>
-            <button onclick="submitForm(); return false;">✅ Yes, Create Ticket</button>
-            <button class="button-secondary" onclick="restart(); return false;">❌ No, Start Over</button>
-        `;
-        scrollToBottom();
-    }
-    function submitForm() {
-        document.getElementById("nameField").value = responses.firstName + " " + responses.lastName;
-        document.getElementById("firstNameField").value = responses.firstName;
-        document.getElementById("lastNameField").value = 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();
     }
-    function restart() {
-        location.reload();
     }
-    function scrollToBottom() {
-        chatBox.scrollTop = chatBox.scrollHeight;
     }
-    window.onload = nextQuestion;
 </script>
 </body>

         }
         .message {
             margin: 10px 0;
+            padding: 10px 15px;
+            border-radius: 20px;
+            max-width: 80%;
         }
         .message.bot {
+            background: #e4e6eb;
             color: #333;
+            text-align: left;
+            align-self: flex-start;
         }
         .message.user {
+            background: #007bff;
+            color: white;
             text-align: right;
+            align-self: flex-end;
+            margin-left: auto;
+        }
+        .input-area {
+            margin-top: 20px;
         }
         input, select, textarea {
             width: 100%;
             border: 1px solid #ccc;
         }
         button {
+            margin-top: 15px;
+            padding: 12px 20px;
             background-color: #007bff;
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
         }
+        .summary {
+            background: #f1f3f5;
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 20px;
+        }
+        .chat-container {
+            display: flex;
+            flex-direction: column;
         }
     </style>
 </head>
 <body>
+<div class="chat-box chat-container" id="chatBox">
+    <div class="message bot">Hi! 👋 Let's create your HR ticket. What is your first name?</div>
 </div>
+<form id="chatForm" action="/generate" method="post" style="display: none;">
     <input type="hidden" name="name" id="nameField">
     <input type="hidden" name="firstName" id="firstNameField">
     <input type="hidden" name="lastName" id="lastNameField">
     <input type="hidden" name="date" id="dateField">
 </form>
+<div class="input-area" id="inputArea"></div>
+{% if ticket %}
+<div class="chat-box">
+    <div class="summary">
+        <h3>✅ Your Ticket has been Generated:</h3>
+        <pre>{{ ticket }}</pre>
+        <a href="/download/{{ session_id }}"><button>Download as PDF</button></a>
+        <p><a href="/tickets">📄 View Submitted Tickets</a></p>
+    </div>
+</div>
+{% endif %}
+<script>
     const questions = [
+        { label: "What is your first name?", field: "firstName", type: "text" },
+        { label: "What is your last name?", field: "lastName", type: "text" },
+        { label: "What is your email address?", field: "email", type: "email" },
         { label: "Describe the issue you're facing.", field: "issue", type: "textarea" },
         {
+            label: "What is the priority of the issue?",
             field: "priority",
             type: "select",
             options: ["High", "Medium", "Low"]
         },
+        { label: "What is the date of the issue?", field: "date", type: "date" }
     ];
+    const responses = {};
     let current = 0;
+    const chatBox = document.getElementById("chatBox");
+    const inputArea = document.getElementById("inputArea");
+    const form = document.getElementById("chatForm");
+    function addMessage(text, sender = "bot") {
+        const message = document.createElement("div");
+        message.className = `message ${sender}`;
+        message.innerText = text;
+        chatBox.appendChild(message);
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    function showInput(question) {
+        inputArea.innerHTML = "";
+        let input;
+        if (question.type === "select") {
+            input = document.createElement("select");
+            question.options.forEach(opt => {
+                const option = document.createElement("option");
+                option.value = opt;
+                option.text = opt;
+                input.appendChild(option);
             });
+        } else if (question.type === "textarea") {
+            input = document.createElement("textarea");
+            input.rows = 4;
         } else {
+            input = document.createElement("input");
+            input.type = question.type;
         }
+        input.id = "userInput";
+        inputArea.appendChild(input);
+        const button = document.createElement("button");
+        button.innerText = "Next";
+        button.onclick = () => {
+            const value = input.value.trim();
+            if (!value) return;
+            responses[question.field] = value;
+            addMessage(value, "user");
+            current++;
+            nextQuestion();
+        };
+        inputArea.appendChild(button);
+        input.focus();
     }
+    function showSummary() {
+        addMessage("Thanks! Here's your ticket summary. Is this okay?", "bot");
+        let summary = `
+Name: ${responses.firstName} ${responses.lastName}
+Email: ${responses.email}
+Priority: ${responses.priority}
+Date: ${responses.date}
+Issue: ${responses.issue}
+        `.trim();
+        addMessage(summary, "bot");
+        const confirmButton = document.createElement("button");
+        confirmButton.innerText = "✅ Confirm and Generate Ticket";
+        confirmButton.onclick = () => {
+            document.getElementById("nameField").value = responses.firstName + " " + responses.lastName;
+            document.getElementById("firstNameField").value = responses.firstName;
+            document.getElementById("lastNameField").value = 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();
+        };
+        inputArea.innerHTML = "";
+        inputArea.appendChild(confirmButton);
     }
+    function nextQuestion() {
+        if (current < questions.length) {
+            const question = questions[current];
+            addMessage(question.label);
+            setTimeout(() => showInput(question), 300);
+        } else {
+            showSummary();
+        }
     }
+    window.onload = () => {
+        nextQuestion();
+    };
 </script>
 </body>