From 4e75d23c2eab077d1bb070aab33b3b2b6cddf191 Mon Sep 17 00:00:00 2001
From: Vlad Ganshin <ganshinv@gmail.com>
Date: Thu, 28 Dec 2023 12:27:55 +0100
Subject: [PATCH] realtime chat

---
 routes/ui/chat/:id_$send-message_post.clj | 15 ++++++++-------
 routes/ui/chat/:id_$subscribe_get.clj     |  1 +
 routes/ui/chat/:id_get.clj                | 16 ++++++++++------
 3 files changed, 19 insertions(+), 13 deletions(-)
 create mode 100644 routes/ui/chat/:id_$subscribe_get.clj

diff --git a/routes/ui/chat/:id_$send-message_post.clj b/routes/ui/chat/:id_$send-message_post.clj
index 957e00c..760b49a 100644
--- a/routes/ui/chat/:id_$send-message_post.clj
+++ b/routes/ui/chat/:id_$send-message_post.clj
@@ -8,18 +8,19 @@
              :author {:id (:id (auth/user-info)) :resourceType "User"}
              :message (:message (box/form-params))})
 
-[:<>
+(turbo/send
+
+ (format "Chat/%s" (:id (box/route-params)))
 
- [:turbo-stream {:action "append" :target "chat"}
+ [:turbo-stream {:action "prepend" :target "chat"}
   [:template
    [:div [:span {:style "font-weight: bold;"} (:id (auth/user-info)) ": "]
-    (:message (box/form-params))]]]
+    (:message (box/form-params))]]])
 
+[:<>
  [:turbo-stream {:action "replace" :target "chat-form"}
   [:template
    [:turbo-frame {:id "chat-form"}
-    [:form {:action "/ui/chat/$send-message" :method "post"}
+    [:form {:action (format "/ui/chat/%s/$send-message" (:id (box/route-params))) :method "post"}
      [:input {:name "message"}]
-     [:button "Send"]]]]]
-
- ]
+     [:button "Send"]]]]]]
diff --git a/routes/ui/chat/:id_$subscribe_get.clj b/routes/ui/chat/:id_$subscribe_get.clj
new file mode 100644
index 0000000..8df400d
--- /dev/null
+++ b/routes/ui/chat/:id_$subscribe_get.clj
@@ -0,0 +1 @@
+(turbo/register-channel (str "Chat/" (:id (box/route-params))))
diff --git a/routes/ui/chat/:id_get.clj b/routes/ui/chat/:id_get.clj
index ad1853d..eef48a9 100644
--- a/routes/ui/chat/:id_get.clj
+++ b/routes/ui/chat/:id_get.clj
@@ -9,7 +9,7 @@
    #_[:script {:src "https://cdn.tailwindcss.com"}]
 
    [:script {:type "module" :src "https://unpkg.com/@hotwired/turbo@7.3.0/dist/turbo.es2017-esm.js"}]
-   [:script {:src "/ui/$dev-mode"}]
+   #_[:script {:src "/ui/$dev-mode"}]
 
    [:div "User: " (:id (auth/user-info))
       [:form {:method "POST" :action "/ui/auth/logout"
@@ -22,11 +22,7 @@
 
    [:h1 "Chat"]
 
-   (let [messages (map :resource (box/sql ["select resource || jsonb_build_object('id', id) resource from chatmessage where resource#>>'{chat,id}' = ?" (:id (box/route-params))]))]
-     [:turbo-frame {:id "chat"}
-      (for [msg messages]
-        [:div [:span {:style "font-weight: bold;"} (:id (auth/user-info)) ": "]
-         (:message msg)])])
+   [:turbo-stream-source {:src (format "/ui/chat/%s/$subscribe" (:id (box/route-params)))}]
 
    [:turbo-frame {:id "chat-form"}
     [:form {:action (format "/ui/chat/%s/$send-message" (:id (box/route-params))) :method "post"}
@@ -34,6 +30,14 @@
      [:input {:name "message"}]
      [:button "Send"]]]
 
+   (let [messages (map :resource (box/sql ["select resource || jsonb_build_object('id', id) resource from chatmessage where resource#>>'{chat,id}' = ?" (:id (box/route-params))]))]
+     [:turbo-frame {:id "chat"}
+      (for [msg (reverse messages)]
+        [:div [:span {:style "font-weight: bold;"} (get-in msg [:author :id]) ": "]
+         (:message msg)])])
+
+
+
    [:div
     [:hr]
     [:div {:style "font-family: monospace"} (format "Aidbox version %s" (box/version))]]