Fix replies and reactions to CTCP actions

src/components/message/ActionMessage.tsx

@@ -1,6 +1,10 @@
 import type React from "react";
+import ircClient from "../../lib/ircClient";
 import type { MessageType, User } from "../../types";
+import { MessageActions } from "./MessageActions";
 import { MessageAvatar } from "./MessageAvatar";
+import { MessageReactions } from "./MessageReactions";
+import { SwipeableMessage } from "./SwipeableMessage";
 
 interface ActionMessageProps {
   message: MessageType;
@@ -13,14 +17,27 @@ interface ActionMessageProps {
     channelId: string,
     avatarElement?: Element | null,
   ) => void;
+  setReplyTo: (msg: MessageType) => void;
+  onReactClick: (message: MessageType, buttonElement: Element) => void;
+  onReactionUnreact: (emoji: string, message: MessageType) => void;
+  onDirectReaction: (emoji: string, message: MessageType) => void;
+  isTouchDevice: boolean;
+  isNarrowView: boolean;
 }
 
 export const ActionMessage: React.FC<ActionMessageProps> = ({
   message,
   showDate,
   messageUser,
   onUsernameContextMenu,
+  setReplyTo,
+  onReactClick,
+  onReactionUnreact,
+  onDirectReaction,
+  isTouchDevice,
+  isNarrowView,
 }) => {
+  const currentUser = ircClient.getCurrentUser(message.serverId);
   const formatTime = (date: Date) => {
     return new Intl.DateTimeFormat("en-US", {
       hour: "2-digit",
@@ -40,49 +57,78 @@ export const ActionMessage: React.FC<ActionMessageProps> = ({
   const username = message.userId.split("-")[0];
 
   return (
-    <div className="px-4 py-1 hover:bg-discord-message-hover group">
-      {showDate && (
-        <div className="flex items-center text-xs text-discord-text-muted mb-2">
-          <div className="flex-grow border-t border-discord-dark-400" />
-          <div className="px-2">{formatDate(new Date(message.timestamp))}</div>
-          <div className="flex-grow border-t border-discord-dark-400" />
-        </div>
-      )}
-      <div className="flex">
-        <MessageAvatar
-          userId={message.userId}
-          avatarUrl={messageUser?.metadata?.avatar?.value}
-          userStatus={messageUser?.metadata?.status?.value}
-          isAway={messageUser?.isAway}
-          theme="discord"
-          showHeader={true}
-          onClick={(e) => {
-            onUsernameContextMenu(
-              e,
-              username,
-              message.serverId,
-              message.channelId,
-              e.currentTarget,
-            );
-          }}
-          isClickable={true}
-          serverId={message.serverId}
-        />
-        <div className="flex-1 text-white">
-          <div className="flex items-center">
-            <span className="ml-2 text-xs text-discord-text-muted">
-              {formatTime(new Date(message.timestamp))}
+    <SwipeableMessage
+      onReply={() => setReplyTo(message)}
+      onReact={(el) => onReactClick(message, el)}
+      canReply={!!message.msgid}
+      canDelete={false}
+      isNarrowView={isNarrowView}
+    >
+      <div className="px-4 py-1 hover:bg-discord-message-hover group relative">
+        {showDate && (
+          <div className="flex items-center text-xs text-discord-text-muted mb-2">
+            <div className="flex-grow border-t border-discord-dark-400" />
+            <div className="px-2">
+              {formatDate(new Date(message.timestamp))}
+            </div>
+            <div className="flex-grow border-t border-discord-dark-400" />
+          </div>
+        )}
+        <div className="flex">
+          <MessageAvatar
+            userId={message.userId}
+            avatarUrl={messageUser?.metadata?.avatar?.value}
+            userStatus={messageUser?.metadata?.status?.value}
+            isAway={messageUser?.isAway}
+            theme="discord"
+            showHeader={true}
+            onClick={(e) => {
+              onUsernameContextMenu(
+                e,
+                username,
+                message.serverId,
+                message.channelId,
+                e.currentTarget,
+              );
+            }}
+            isClickable={true}
+            serverId={message.serverId}
+          />
+          <div className="flex-1 text-white">
+            <div className="flex items-center">
+              <span className="ml-2 text-xs text-discord-text-muted">
+                {formatTime(new Date(message.timestamp))}
+              </span>
+            </div>
+            <span className="italic text-white">
+              {message.userId === "system"
+                ? "System"
+                : (displayName || username) +
+                  (displayName ? ` (${username})` : "") +
+                  message.content.substring(7, message.content.length - 1)}
             </span>
+            <MessageReactions
+              reactions={message.reactions}
+              currentUserUsername={currentUser?.username}
+              onReactionClick={(emoji, currentUserReacted) => {
+                if (currentUserReacted) {
+                  onReactionUnreact(emoji, message);
+                } else {
+                  onDirectReaction(emoji, message);
+                }
+              }}
+            />
           </div>
-          <span className="italic text-white">
-            {message.userId === "system"
-              ? "System"
-              : (displayName || username) +
-                (displayName ? ` (${username})` : "") +
-                message.content.substring(7, message.content.length - 1)}
-          </span>
         </div>
+        {!isTouchDevice && (
+          <MessageActions
+            message={message}
+            onReplyClick={() => setReplyTo(message)}
+            onReactClick={(el) => onReactClick(message, el)}
+            canReply={!!message.msgid}
+          />
+        )}
       </div>
-    </div>
+    </SwipeableMessage>
   );
 };

src/components/message/CollapsibleMessage.tsx

@@ -80,18 +80,23 @@ export const CollapsibleMessage = forwardRef<
 
   return (
     <div className="collapsible-message">
-      <div
-        ref={contentRef}
-        className="transition-all duration-300 ease-in-out overflow-hidden"
-        style={{
-          maxHeight: isExpanded
-            ? `${contentHeight}px`
-            : needsCollapsing
-              ? collapsedMaxHeight
-              : "none",
-        }}
-      >
-        {content}
+      <div className="relative">
+        <div
+          ref={contentRef}
+          className="transition-all duration-300 ease-in-out overflow-hidden"
+          style={{
+            maxHeight: isExpanded
+              ? `${contentHeight}px`
+              : needsCollapsing
+                ? collapsedMaxHeight
+                : "none",
+          }}
+        >
+          {content}
+        </div>
+        {needsCollapsing && !isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-discord-dark-200 group-hover:to-discord-message-hover pointer-events-none" />
+        )}
       </div>
       {needsCollapsing && (
         <>

src/components/message/MessageItem.tsx

@@ -792,6 +792,12 @@ export const MessageItem = (props: MessageItemProps) => {
           showDate={showDate}
           messageUser={messageUser}
           onUsernameContextMenu={onUsernameContextMenu}
+          setReplyTo={setReplyTo}
+          onReactClick={onReactClick}
+          onReactionUnreact={onReactionUnreact}
+          onDirectReaction={onDirectReaction}
+          isTouchDevice={isTouchDevice}
+          isNarrowView={isNarrowView}
         />
       </>
     );

src/lib/messageFormatter.ts

@@ -182,5 +182,7 @@ export function stripIrcFormatting(text: string): string {
       .replace(/\x03\d{0,2}(,\d{0,2})?/g, "")
       // biome-ignore lint/suspicious/noControlCharactersInRegex: IRC formatting control codes
       .replace(/[\x02\x1D\x1F\x1E\x16\x11\x0F]/g, "")
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: CTCP wrapper (\u0001WORD ...\u0001)
+      .replace(/\u0001\w+ ?(.*?)\u0001/g, "$1")
   );
 }