typing indicators

TODO.md

@@ -45,4 +45,6 @@ APP PACKAGES:
 + notify typing
 + hide text chat on wait package
 
++ articles frame are not in iframe, iframeize it
+
 improvements UI

app/controllers/apps/conversation_messages_controller.rb

@@ -73,6 +73,11 @@ def create
                                               })
   end
 
+  def notify_typing
+    @conversation = @app.conversations.find_by(key: params[:conversation_id])
+    @conversation.notify_typing_to_user
+  end
+
   def update
     if params[:read]
       @conversation_part = @app.conversation_parts.find_by(key: params[:id])

app/controllers/messenger_controller.rb

@@ -38,6 +38,7 @@ def events
     when "track_tour_finished" then track_tour_finished(params["messenger"])
     when "track_tour_skipped" then track_tour_skipped(params["messenger"])
     when "update_conversation_state" then render_conversation_state(params)
+    when "notify_typing" then notify_typing
 
     end
 
@@ -96,6 +97,11 @@ def home_apps
 
   def render_conversation_state; end
 
+  def notify_typing
+    conversation = @app.conversations.find_by(key: params[:conversation])
+    conversation.notify_typing_to_agents
+  end
+
   private
 
   def get_messages_for_user
@@ -153,7 +159,7 @@ def resolve_contents
 
     @home_apps = home_apps
 
-    @latest_conversations = @app_user.conversations.limit(4)
+    @latest_conversations = @app_user.conversations.order("updated_at desc").limit(4)
 
     @needs_privacy_consent = needs_privacy_consent
   end

app/javascript/controllers/chat_editor_controller.js

@@ -178,8 +178,21 @@ export default class extends Controller {
     overflow.scrollTop = overflow.scrollHeight;
   }
 
+  notifyTyping() {
+    this.sendPost(
+      `${this.actionPath}/notify_typing`,
+      { type: 'typing' },
+      'post'
+    );
+  }
+
   typingNotifier() {
     console.log('NOTIFY TYPING');
+
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(() => {
+      this.notifyTyping();
+    }, 400);
   }
 
   toggleClass() {
@@ -202,6 +215,7 @@ export default class extends Controller {
   }
 
   initialize() {
+    this.delayTimer = null;
     this.actionPath = this.element.dataset.editorActionPath;
     this.messageMode = 'public';
 
@@ -221,6 +235,7 @@ export default class extends Controller {
           this.valueNotified = val;
           this.editorRef = editorRef;
           console.log(this.valueNotified);
+          this.typingNotifier();
         }}
         handleReturn={(e, isEmptyDraft, value) => {
           console.log(e);

app/javascript/controllers/custom_event_controller.js

@@ -9,7 +9,7 @@ export default class extends Controller {
   sendCustomEvent() {
     const eventData = this.element.dataset.values;
     const eventName = this.element.dataset.eventName || 'ChaskiqEvent';
-    console.log('SENDING CUSTOM EVENT TO MESSENGER', eventName, eventData);
+    // console.log('SENDING CUSTOM EVENT TO MESSENGER', eventName, eventData);
     const event = new CustomEvent(eventName, {
       detail: { data: eventData },
       bubbles: true,

app/javascript/controllers/messenger_controller.js

@@ -43,6 +43,7 @@ export default class extends Controller {
   };
 
   initialize() {
+    this.delayTimer = null;
     // Bind the debounced version to the instance
     this.debouncedHandleGiphySeach = debounce(
       this.handleGiphySeach.bind(this),
@@ -566,6 +567,18 @@ export default class extends Controller {
   handleChatInput(e) {
     console.log('HANDLE typing');
     console.log(e.type);
+
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(() => {
+      this.notifyTyping();
+    }, 400);
+  }
+
+  notifyTyping() {
+    console.log('NOTIFY TYPING');
+    this.pushEvent('notify_typing', {
+      conversation: this.currentConversationKey(),
+    });
   }
 
   setHeaderStyles(element, styles) {

app/javascript/controllers/typing_indicator_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['indicator'];
+
+  initialize() {
+    this.showIndicator();
+    this.debounce(this.hideIndicator, 1000);
+  }
+
+  showIndicator() {
+    this.indicatorTarget.classList.remove('hidden');
+  }
+
+  hideIndicator = () => {
+    this.indicatorTarget.classList.add('hidden');
+  };
+
+  debounce(func, delay) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(func, delay);
+  }
+}

app/models/conversation.rb

@@ -297,6 +297,22 @@ def notify_typing(author = nil)
                         locals: { data: data }
   end
 
+  def notify_typing_to_agents
+    broadcast_update_to app, :conversations,
+                        target: nil,
+                        targets: ".typing-#{key}",
+                        partial: "apps/conversations/typing",
+                        locals: { key: key }
+  end
+
+  def notify_typing_to_user
+    broadcast_update_to app, main_participant.id,
+                        target: nil,
+                        targets: ".typing-#{key}",
+                        partial: "messenger/conversations/typing",
+                        locals: { key: key }
+  end
+
   private
 
   def handle_part_details(part, opts)

app/views/apps/conversations/_conversation.erb

@@ -73,6 +73,10 @@
 						<% end %>
 					</div>
 				</div>
+
+
+			<div class="typing-<%= conversation.key %>" class=" bottom-0">
+			</div>
 		</div>
 	</div>
 <% end %>

app/views/apps/conversations/_typing.erb

@@ -0,0 +1,8 @@
+
+  <div data-controller="typing-indicator">
+    <div data-typing-indicator-target="indicator" class="typing-indicator mx-auto w-full pl-4">
+      <span class="text-xs ">
+        User is typing...
+      </span>
+    </div>
+  </div>

app/views/apps/conversations/show.erb

@@ -2,7 +2,7 @@
 	data: { controller: 'conversation' },
 	class: "flex w-full" do %>
 
-	<div class="md:w-0 md:flex-grow w-full bg-gray-200 dark:bg-gray-900 h-screen border-r dark:border-black">
+	<div class="relative md:w-0 md:flex-grow w-full bg-gray-200 dark:bg-gray-900 h-screen border-r dark:border-black">
 		<div
 			class="w-full flex-1 flex flex-col h-screen conversation-bg">
 			<div class="h-[60px] border-b flex px-6 py-3 items-center flex-none bg-white dark:bg-gray-900 dark:border-gray-800">
@@ -71,7 +71,7 @@
 
 			<div
 				id="conversation-overflow"
-				class="overflow-y-scroll" 
+				class="overflow-y-scroll relative" 
 				style="height: calc(100vh - 199px);">
 					<%= turbo_frame_tag 'conversation-messages', 
 						src: app_conversation_conversation_messages_path(
@@ -82,6 +82,10 @@
 					<% end %>
 			</div>
 
+
+			<div class="typing-<%= @conversation.key %>" class=" bottom-0">
+			</div>
+
 			<div class="bg-gray-100 mb-2 mx-2 rounded-sm shadow-md">
 				<%= render 'editor' %>
 			</div>

app/views/messenger/conversations/_conversation.erb

@@ -54,6 +54,9 @@
           <% end %>
       </div>
 
+			<div class="typing-<%= conversation.key %> absolute top-[167px] left-[20px]">
+			</div>
+
       <%= render "text_editor", app: app, conversation: conversation, user: user %>
 
     </div>

app/views/messenger/conversations/_typing.erb

@@ -0,0 +1,8 @@
+
+<div data-controller="typing-indicator">
+  <div data-typing-indicator-target="indicator" class="typing-indicator mx-auto w-full">
+    <span class="text-xs">
+      User is typing...
+    </span>
+  </div>
+</div>

app/views/messenger/show.html.erb

@@ -10,7 +10,6 @@
     <% #= Time.now.to_i %>
     <%= turbo_stream_from @app, @app_user.id %>
     <div style="display:none;" id="chaskiq-custom-events">
-      <% #= render "messenger/custom_event", data: {a: 1}.to_json %>
     </div>
   </div>
 

config/routes.rb

@@ -110,7 +110,11 @@
       member do
         get :sidebar
       end
-      resources :conversation_messages, controller: "apps/conversation_messages"
+      resources :conversation_messages, controller: "apps/conversation_messages" do
+        collection do
+          post :notify_typing
+        end
+      end
     end
 
     resources :editor_quick_replies, controller: "apps/editor_quick_replies"