From 8a6cd7bfb567fb70acea3bfe69334f4f0f5f9345 Mon Sep 17 00:00:00 2001 From: vishnu Date: Wed, 27 Aug 2025 15:02:44 +0000 Subject: [PATCH] chore: ui, ux changes --- nextgenie/nextgenie/doctype/__init__.py | 0 .../nextgenie/doctype/chat_log/__init__.py | 0 .../nextgenie/doctype/chat_log/chat_log.js | 8 ++ .../nextgenie/doctype/chat_log/chat_log.json | 40 ++++++ .../nextgenie/doctype/chat_log/chat_log.py | 9 ++ .../doctype/chat_log/test_chat_log.py | 9 ++ nextgenie/nextgenie/page/__init__.py | 0 .../nextgenie/page/nextgenie/__init__.py | 0 .../nextgenie/page/nextgenie/nextgenie.css | 123 ++++++++++++++++++ .../nextgenie/page/nextgenie/nextgenie.html | 36 +++++ .../nextgenie/page/nextgenie/nextgenie.js | 74 +++++++++++ .../nextgenie/page/nextgenie/nextgenie.json | 30 +++++ .../nextgenie/page/nextgenie/nextgenie.py | 18 +++ 13 files changed, 347 insertions(+) create mode 100644 nextgenie/nextgenie/doctype/__init__.py create mode 100644 nextgenie/nextgenie/doctype/chat_log/__init__.py create mode 100644 nextgenie/nextgenie/doctype/chat_log/chat_log.js create mode 100644 nextgenie/nextgenie/doctype/chat_log/chat_log.json create mode 100644 nextgenie/nextgenie/doctype/chat_log/chat_log.py create mode 100644 nextgenie/nextgenie/doctype/chat_log/test_chat_log.py create mode 100644 nextgenie/nextgenie/page/__init__.py create mode 100644 nextgenie/nextgenie/page/nextgenie/__init__.py create mode 100644 nextgenie/nextgenie/page/nextgenie/nextgenie.css create mode 100644 nextgenie/nextgenie/page/nextgenie/nextgenie.html create mode 100644 nextgenie/nextgenie/page/nextgenie/nextgenie.js create mode 100644 nextgenie/nextgenie/page/nextgenie/nextgenie.json create mode 100644 nextgenie/nextgenie/page/nextgenie/nextgenie.py diff --git a/nextgenie/nextgenie/doctype/__init__.py b/nextgenie/nextgenie/doctype/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/nextgenie/nextgenie/doctype/chat_log/__init__.py b/nextgenie/nextgenie/doctype/chat_log/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/nextgenie/nextgenie/doctype/chat_log/chat_log.js b/nextgenie/nextgenie/doctype/chat_log/chat_log.js new file mode 100644 index 0000000..77a61d8 --- /dev/null +++ b/nextgenie/nextgenie/doctype/chat_log/chat_log.js @@ -0,0 +1,8 @@ +// Copyright (c) 2025, Codeventurers and contributors +// For license information, please see license.txt + +// frappe.ui.form.on("Chat Log", { +// refresh(frm) { + +// }, +// }); diff --git a/nextgenie/nextgenie/doctype/chat_log/chat_log.json b/nextgenie/nextgenie/doctype/chat_log/chat_log.json new file mode 100644 index 0000000..a5faee9 --- /dev/null +++ b/nextgenie/nextgenie/doctype/chat_log/chat_log.json @@ -0,0 +1,40 @@ +{ + "actions": [], + "allow_rename": 1, + "creation": "2025-08-27 19:48:34.122664", + "doctype": "DocType", + "engine": "InnoDB", + "field_order": [ + "section_break_3coi" + ], + "fields": [ + { + "fieldname": "section_break_3coi", + "fieldtype": "Section Break" + } + ], + "index_web_pages_for_search": 1, + "links": [], + "modified": "2025-08-27 19:48:34.122664", + "modified_by": "Administrator", + "module": "Nextgenie", + "name": "Chat Log", + "owner": "Administrator", + "permissions": [ + { + "create": 1, + "delete": 1, + "email": 1, + "export": 1, + "print": 1, + "read": 1, + "report": 1, + "role": "System Manager", + "share": 1, + "write": 1 + } + ], + "sort_field": "modified", + "sort_order": "DESC", + "states": [] +} \ No newline at end of file diff --git a/nextgenie/nextgenie/doctype/chat_log/chat_log.py b/nextgenie/nextgenie/doctype/chat_log/chat_log.py new file mode 100644 index 0000000..eca0552 --- /dev/null +++ b/nextgenie/nextgenie/doctype/chat_log/chat_log.py @@ -0,0 +1,9 @@ +# Copyright (c) 2025, Codeventurers and contributors +# For license information, please see license.txt + +# import frappe +from frappe.model.document import Document + + +class ChatLog(Document): + pass diff --git a/nextgenie/nextgenie/doctype/chat_log/test_chat_log.py b/nextgenie/nextgenie/doctype/chat_log/test_chat_log.py new file mode 100644 index 0000000..1cfa313 --- /dev/null +++ b/nextgenie/nextgenie/doctype/chat_log/test_chat_log.py @@ -0,0 +1,9 @@ +# Copyright (c) 2025, Codeventurers and Contributors +# See license.txt + +# import frappe +from frappe.tests.utils import FrappeTestCase + + +class TestChatLog(FrappeTestCase): + pass diff --git a/nextgenie/nextgenie/page/__init__.py b/nextgenie/nextgenie/page/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/nextgenie/nextgenie/page/nextgenie/__init__.py b/nextgenie/nextgenie/page/nextgenie/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/nextgenie/nextgenie/page/nextgenie/nextgenie.css b/nextgenie/nextgenie/page/nextgenie/nextgenie.css new file mode 100644 index 0000000..9d78e1d --- /dev/null +++ b/nextgenie/nextgenie/page/nextgenie/nextgenie.css @@ -0,0 +1,123 @@ +/* Copyright (c) 2025, Codeventurers and contributors +For license information, please see license.txt */ + +.chat-container { + display: flex; + height: 80vh; + border: 1px solid #ddd; + border-radius: 12px; + overflow: hidden; + font-family: 'Inter', sans-serif; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + + /* Glassmorphism effect */ + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(12px); +} + +/* Sidebar */ +.chat-sidebar { + width: 25%; + background: linear-gradient(135deg, #4f46e5, #9333ea); + padding: 15px; + border-right: 1px solid rgba(255, 255, 255, 0.1); + color: #ffffff; +} + +.chat-sidebar h3 { + margin-top: 0; + color: #ffffff; +} + +/* Main Chat Area */ +.chat-main { + width: 75%; + display: flex; + flex-direction: column; + background: #f8fafc; + position: relative; +} + +/* Chat Messages */ +.chat-messages { + flex: 1; + padding: 15px; + overflow-y: auto; + display: flex; + flex-direction: column; +} + +/* Message bubbles */ +.bot-message, +.user-message { + margin: 8px 0; + padding: 10px 14px; + border-radius: 12px; + max-width: 70%; + font-size: 14px; + word-wrap: break-word; + color: #111827; +} + +/* User ā†’ RIGHT */ +.user-message { + background: #bbf7d0; + align-self: flex-end; + border: 1px solid #86efac; +} + +/* Bot ā†’ LEFT */ +.bot-message { + background: #e0e7ff; + align-self: flex-start; + border: 1px solid #c7d2fe; +} + +/* Input section */ +.chat-input { + display: flex; + padding: 10px; + border-top: 1px solid #d1d5db; + background: #ffffff; +} + +.chat-input input { + flex: 1; + padding: 10px; + border: 1px solid #d1d5db; + border-radius: 20px; + outline: none; + font-size: 14px; + background: #ffffff; + color: #111827; +} + +/* Send Button (Floating Circle) */ +.chat-input button { + margin-left: 8px; + width: 42px; + height: 42px; + border: none; + background: #4f46e5; + color: #ffffff; + border-radius: 50%; + font-size: 18px; + cursor: pointer; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); + transition: transform 0.2s, background 0.3s; +} + +.chat-input button:hover { + transform: scale(1.1); + background: #4338ca; +} + +/* Footer License */ +.chat-footer { + text-align: center; + padding: 6px; + border-top: 1px solid #eee; + font-size: 12px; + color: #777; + background: #f8fafc; +} \ No newline at end of file diff --git a/nextgenie/nextgenie/page/nextgenie/nextgenie.html b/nextgenie/nextgenie/page/nextgenie/nextgenie.html new file mode 100644 index 0000000..9155910 --- /dev/null +++ b/nextgenie/nextgenie/page/nextgenie/nextgenie.html @@ -0,0 +1,36 @@ + + +
+ +
+

šŸ¤– NextGenie

+

This is a demo chatbot UI built on Frappe.

+
    +
  • āš” Built with Frappe
    • +
  • šŸ’¬ Static Hardcoded Chat
    • +
  • šŸŽØ HugChat Style Layout
    • +
+
+ + +
+
+
šŸ‘‹ Hi! Iā€™m NextGenie, how can I help?
+
Hello! Just testing UI šŸ˜Ž
+
+ + +
+ + +
+ + +
+ Ā© CodeVenturers and contributors +
+
+
\ No newline at end of file diff --git a/nextgenie/nextgenie/page/nextgenie/nextgenie.js b/nextgenie/nextgenie/page/nextgenie/nextgenie.js new file mode 100644 index 0000000..82386e7 --- /dev/null +++ b/nextgenie/nextgenie/page/nextgenie/nextgenie.js @@ -0,0 +1,74 @@ +// Copyright(c) 2025, Codeventurers and contributors +// For license information, please see license.txt + +frappe.pages['nextgenie'].on_page_load = function (wrapper) { + var page = frappe.ui.make_app_page({ + parent: wrapper, + title: 'NextGenie Chat', + single_column: true + }); + + $(frappe.render_template("nextgenie")).appendTo(page.body); + + frappe.call({ + method: "nextgenie.nextgenie.page.nextgenie.nextgenie.get_chat_history", + args: { limit: 50 }, + callback: function (r) { + if (r.message) { + r.message.forEach(msg => { + let css_class = msg.sender === "User" ? "user-message" : "bot-message"; + $("#chat-messages").append(`
${msg.message}
`); + }); + $("#chat-messages").scrollTop($("#chat-messages")[0].scrollHeight); + } + } + }); + + // Send message + $(document).on("click", "#send-btn", function () { + sendMessage(); + }); + + $(document).on("keypress", "#chat-input-box", function (e) { + if (e.which === 13) { + sendMessage(); + } + }); + + function sendMessage() { + let input = $("#chat-input-box"); + let message = input.val().trim(); + if (!message) return; + + // Append immediately + $("#chat-messages").append(`
${message}
`); + $("#chat-messages").scrollTop($("#chat-messages")[0].scrollHeight); + + // Save to backend + frappe.call({ + method: "nextgenie.nextgenie.page.nextgenie.nextgenie.add_chat_message", + args: { + sender: "User", + message: message + } + }); + + input.val(""); + + // For now, add dummy Genie reply to history + let genie_reply = "šŸ¤– Thanks for your message!"; + setTimeout(() => { + $("#chat-messages").append(`
${genie_reply}
`); + $("#chat-messages").scrollTop($("#chat-messages")[0].scrollHeight); + + // Save bot reply + frappe.call({ + method: "nextgenie.nextgenie.page.nextgenie.nextgenie.add_chat_message", + args: { + sender: "Genie", + message: genie_reply + } + }); + }, 500); + } +}; diff --git a/nextgenie/nextgenie/page/nextgenie/nextgenie.json b/nextgenie/nextgenie/page/nextgenie/nextgenie.json new file mode 100644 index 0000000..515132f --- /dev/null +++ b/nextgenie/nextgenie/page/nextgenie/nextgenie.json @@ -0,0 +1,30 @@ +{ + "content": null, + "creation": "2025-08-27 19:28:51.567686", + "docstatus": 0, + "doctype": "Page", + "icon": "", + "idx": 0, + "modified": "2025-08-27 20:25:35.626266", + "modified_by": "Administrator", + "module": "Nextgenie", + "name": "nextgenie", + "owner": "Administrator", + "page_name": "nextgenie", + "roles": [ + { + "role": "Administrator" + }, + { + "role": "System Manager" + }, + { + "role": "All" + } + ], + "script": null, + "standard": "Yes", + "style": null, + "system_page": 0, + "title": "NextGenie" +} \ No newline at end of file diff --git a/nextgenie/nextgenie/page/nextgenie/nextgenie.py b/nextgenie/nextgenie/page/nextgenie/nextgenie.py new file mode 100644 index 0000000..fb34b60 --- /dev/null +++ b/nextgenie/nextgenie/page/nextgenie/nextgenie.py @@ -0,0 +1,18 @@ +# Copyright (c) 2025, Codeventurers and contributors +# For license information, please see license.txt + +import frappe + + +@frappe.whitelist() +def get_chat_history(): + return [ + {"sender": "Genie", "message": "šŸ‘‹ Hi, Iā€™m NextGenie!", "creation": "2025-01-01 10:00:00"}, + {"sender": "User", "message": "Hello Genie šŸ˜Ž", "creation": "2025-01-01 10:01:00"}, + {"sender": "Genie", "message": "How can I help you today?", "creation": "2025-01-01 10:02:00"} + ] + + +@frappe.whitelist() +def add_chat_message(sender, message): + return {"status": "ok", "note": "Message saved"} \ No newline at end of file