v3: chatbox improvements (typing indicators, answer to previous messages, backlog days separators, scroll to last message position, visual tweaks)

api/model/interfaces.ts

@@ -321,6 +321,13 @@ export interface ChatMessage {
   updatedAt?: Date;
   authorUsername: string;
   authorAvatarMime?: string;
+  /** Id of the message this one replies to, if any. Retained even when the
+   * target is later deleted (the preview fields below then go undefined). */
+  replyToId?: string;
+  /** Author/snippet of the replied-to message, for a subtle inline reference.
+   * Absent when there's no reply, or the target has since been deleted. */
+  replyToAuthor?: string;
+  replyToBody?: string;
 }
 
 /** Wire format — createdAt arrives as an ISO string over JSON. */
@@ -554,6 +561,15 @@ export interface CommentLikeRemoveMessage {
 export interface ChatSendMessage {
   type: "chat_send";
   body: string;
+  /** Id of the message being replied to, if this is a reply. */
+  replyToId?: string;
+}
+
+// Sent while the user is composing (true) and when they stop (false). The
+// server rebroadcasts the live set of typers to everyone as ChatTypingUpdate.
+export interface ChatTypingMessage {
+  type: "chat_typing";
+  typing: boolean;
 }
 
 // Tells the server whether this client currently has the chatbox open, so that
@@ -582,6 +598,7 @@ export type ClientToServerMessage =
   | CommentLikeCastMessage
   | CommentLikeRemoveMessage
   | ChatSendMessage
+  | ChatTypingMessage
   | ChatFocusMessage
   | ChatEditMessage
   | ChatDeleteMessage;
@@ -730,6 +747,13 @@ export interface ChatMessageDeletedMessage {
   id: string;
 }
 
+// The current set of users composing a chat message. Reuses OnlineUser so the
+// client can render the same avatars as the presence row.
+export interface ChatTypingUpdateMessage {
+  type: "chat_typing_update";
+  users: OnlineUser[];
+}
+
 export type ServerToClientMessage =
   | PingMessage
   | WelcomeMessage
@@ -754,7 +778,8 @@ export type ServerToClientMessage =
   | ForceLogoutMessage
   | ChatMessageMessage
   | ChatMessageUpdatedMessage
-  | ChatMessageDeletedMessage;
+  | ChatMessageDeletedMessage
+  | ChatTypingUpdateMessage;
 
 /**
  * Follows