From de6c146290666a57a91527923e725e1a68d4c405 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Thu, 12 Jan 2023 18:10:53 -0300 Subject: [PATCH 01/12] Implement functional, unstyled chat page for khoj web interface Expose it at /chat URL --- src/interface/web/chat.html | 113 ++++++++++++++++++++++++++++++++++++ src/routers/web_client.py | 4 ++ 2 files changed, 117 insertions(+) create mode 100644 src/interface/web/chat.html diff --git a/src/interface/web/chat.html b/src/interface/web/chat.html new file mode 100644 index 00000000..9244fd0f --- /dev/null +++ b/src/interface/web/chat.html @@ -0,0 +1,113 @@ + + + + + Khoj + + + + + + + + +

Khoj

+ + +
+ + + + + diff --git a/src/routers/web_client.py b/src/routers/web_client.py index 0c2b8628..4a22e7f7 100644 --- a/src/routers/web_client.py +++ b/src/routers/web_client.py @@ -21,3 +21,7 @@ def index(): @web_client.get('/config', response_class=HTMLResponse) def config_page(request: Request): return templates.TemplateResponse("config.html", context={'request': request}) + +@web_client.get("/chat", response_class=FileResponse) +def chat_page(): + return FileResponse(constants.web_directory / "chat.html") \ No newline at end of file From d170747ec267556f3f3eea09a26b508db2bfd95a Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Thu, 12 Jan 2023 18:30:18 -0300 Subject: [PATCH 02/12] Add khoj web interface & chat styling to new chat page on khoj web - Ensure message input box sticks to bottom of screen - Ensure chat logs div is scrollable when logs become longer than screen Do not make the whole page scroll, just the chat logs body div --- src/interface/web/chat.html | 82 ++++++++++++++++++++++++++++++++++++- 1 file changed, 80 insertions(+), 2 deletions(-) diff --git a/src/interface/web/chat.html b/src/interface/web/chat.html index 9244fd0f..72322322 100644 --- a/src/interface/web/chat.html +++ b/src/interface/web/chat.html @@ -101,13 +101,91 @@ + + From 2842e3a035f4813a40ac71959946a133aa15980a Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Fri, 13 Jan 2023 13:09:51 -0300 Subject: [PATCH 03/12] Automatically scroll to bottom of chat body on new messages --- src/interface/web/chat.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/interface/web/chat.html b/src/interface/web/chat.html index 72322322..48867edc 100644 --- a/src/interface/web/chat.html +++ b/src/interface/web/chat.html @@ -32,6 +32,9 @@
${message}
`; + + // Scroll to bottom of input-body element + document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; } function chat() { From 7723d656dc20ac8b5c79ccc1149e4531a0e41e45 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Fri, 13 Jan 2023 13:10:35 -0300 Subject: [PATCH 04/12] Do not force GPT to summarize note using past tense Not all notes are in the past. Notes can be about stuff in the future. Casting them to past tense gives the impression that they've already happened / been done. --- src/processor/conversation/gpt.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/processor/conversation/gpt.py b/src/processor/conversation/gpt.py index 5f312b78..d8d75cd9 100644 --- a/src/processor/conversation/gpt.py +++ b/src/processor/conversation/gpt.py @@ -31,7 +31,7 @@ Summarize the below notes about {user_query}: {text} -Summarize the notes in second person perspective and use past tense:''' +Summarize the notes in second person perspective:''' # Get Response from GPT response = openai.Completion.create( From 5294693e97e5dde12ad2bbf254718a01189008fc Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Fri, 13 Jan 2023 16:22:50 -0300 Subject: [PATCH 05/12] Style message as speech bubbles on chat page of web interface - Wrap messages into speech bubbles - Color messages by khoj blue, sender grey - Add those standard protrusions to the speech bubbles for fun - Align bubbles left or right based on sender - messages by khoj are left aligned, message by self are right aligned - Put message metadata like sender and time under speech bubble - use data-* attribute and ::after css pseudo-selector for this - Update renderMessage func to accept time param, remove unused type_ param --- src/interface/web/chat.html | 92 ++++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 17 deletions(-) diff --git a/src/interface/web/chat.html b/src/interface/web/chat.html index 48867edc..7ad57c4c 100644 --- a/src/interface/web/chat.html +++ b/src/interface/web/chat.html @@ -10,29 +10,33 @@