src/app/(internal-sites)/chats/[chatId]/page.tsx (1)

85-85: Remove unnecessary console.log statement

The console.log statement used for debugging should be removed to prevent cluttering the console in production.

Apply this diff to remove the console.log:

- console.log(emoji);

src/components/message.tsx (1)

82-91: Simplify reaction grouping logic in ReactionDetails component

The redundant if check can be removed because the nullish coalescing operator ?? already initializes the array when acc[reaction.emoji] is undefined.

Apply this diff to simplify the grouping of reactions:

- acc[reaction.emoji] = acc[reaction.emoji] ?? [];
- if (acc[reaction.emoji] === undefined) {
-   acc[reaction.emoji] = [];
- }
- acc[reaction.emoji]!.push(reaction);
+ (acc[reaction.emoji] = acc[reaction.emoji] ?? []).push(reaction);

convex/messages.ts (1)

362-366: Use consistent reaction value

The new reaction creation should use the trimmed reaction value consistently.

     const reaction = await ctx.table("reactions").insert({
-      emoji: trimmedReaction,
+      emoji: trimmedReaction,  // This is correct
       userId: convexUser._id,
       messageId,
     });

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Check latest versions and security advisories for emoji-related packages
for pkg in "@emoji-mart/data" "@emoji-mart/react" "emoji-mart" "emoji-regex"; do
  echo "Checking $pkg..."
  # Get latest version
  curl -s "https://registry.npmjs.org/$pkg" | jq -r '.["dist-tags"].latest'
  
  # Check for security advisories
  gh api graphql -f query='{
    securityVulnerabilities(first: 5, ecosystem: NPM, package: "'$pkg'") {
      nodes {
        advisory {
          summary
          severity
          publishedAt
        }
        vulnerableVersionRange
        firstPatchedVersion {
          identifier
        }
      }
    }
  }'
done

src/app/(internal-sites)/chats/[chatId]/page.tsx (3)

59-90: Consider adding error boundaries and organizing props

The EmojiPicker component could benefit from:

1. Error boundaries to handle potential runtime errors from the third-party picker
2. Props interface organization using Pick/Omit utility types

+interface EmojiPickerProps {
+  showFullEmojiPicker: boolean;
+  refsFullEmojiPicker: Pick<{
+    setFloating: (ref: HTMLElement | null) => void;
+  }, 'setFloating'>;
+  selectedMessageId: Id<"messages"> | null;
+  floatingStylesFullEmojiPicker: React.CSSProperties;
+  reactToMessageHandler: (messageId: Id<"messages">, emoji: string) => void;
+}

-const EmojiPicker = ({
+const EmojiPicker = React.memo(({
   showFullEmojiPicker,
   refsFullEmojiPicker,
   floatingStylesFullEmojiPicker,
   reactToMessageHandler,
   selectedMessageId,
-}: {
-  showFullEmojiPicker: boolean;
-  refsFullEmojiPicker: {
-    setFloating: (ref: HTMLElement | null) => void;
-  };
-  selectedMessageId: Id<"messages"> | null;
-  floatingStylesFullEmojiPicker: React.CSSProperties;
-  reactToMessageHandler: (messageId: Id<"messages">, emoji: string) => void;
-}) => {
+}: EmojiPickerProps) => {
   if (!showFullEmojiPicker || !selectedMessageId) return null;

   return (
+    <ErrorBoundary fallback={<div>Error loading emoji picker</div>}>
       <div
         ref={refsFullEmojiPicker.setFloating}
         style={floatingStylesFullEmojiPicker}
         className="z-[1000] opacity-100"
       >
         <Picker
           data={data}
           onEmojiSelect={(emoji: { native: string }) => {
             reactToMessageHandler(selectedMessageId, emoji.native);
           }}
         />
       </div>
+    </ErrorBoundary>
   );
-};
+});
+
+EmojiPicker.displayName = 'EmojiPicker';

---

Line range hint 308-425: Extract emoji picker portal into a reusable component

The portal implementation for the emoji picker is duplicated and could be abstracted into a reusable component.

+const EmojiPickerPortal = ({
+  show,
+  messageId,
+  containerRef,
+  children,
+}: {
+  show: boolean;
+  messageId: Id<"messages">;
+  containerRef: HTMLElement;
+  children: React.ReactNode;
+}) => {
+  if (!show || !messageId) return null;
+  return createPortal(children, containerRef);
+};

-{chatContainerElement &&
-message._id == selectedMessageId &&
-message.type == "message"
-  ? createPortal(
+<EmojiPickerPortal
+  show={message.type === "message"}
+  messageId={message._id}
+  containerRef={chatContainerElement}
+>
     <div
       ref={(ref) => {
         refsEmojiPickerQuickReaction.setFloating(ref);
         refsFullEmojiPicker.setReference(ref);
       }}
       style={floatingStylesEmojiPickerQuickReaction}
       className="z-50 py-3 opacity-100"
     >
       {/* ... emoji picker content ... */}
     </div>
-    chatContainerElement,
-  )
-: null}
+</EmojiPickerPortal>

---

Line range hint 426-835: Reduce code duplication in message rendering

The message rendering logic is duplicated between sender and receiver views. Consider extracting common functionality into shared components.

+const MessageContent = ({
+  message,
+  userInfos,
+  isSender,
+}: {
+  message: Message;
+  userInfos: UserInfos;
+  isSender: boolean;
+}) => {
+  if (message.type === "message" && message.deleted) {
+    return (
+      <div className="flex font-medium">
+        <Ban />
+        <p className="ml-2.5">This message was deleted</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <div>{message.content}</div>
+      {message.reactions && message.reactions.length > 0 && (
+        <ReactionPopover
+          reactions={message.reactions}
+          userInfos={userInfos}
+          isSender={isSender}
+        />
+      )}
+    </div>
+  );
+};

-{message.from.username == clerkUser.user?.username ? (
+const isSender = message.from.username === clerkUser.user?.username;
+return (
   <div
-    className={cn("my-1 flex w-full flex-col items-end", {
+    className={cn("my-1 flex w-full flex-col", {
+      "items-end": isSender,
+      "items-start": !isSender,
       "mr-0 items-center":
         message.type == "pendingRequest" ||
         message.type == "rejectedRequest",
     })}
   >
     <EditedLabel message={message} />
     <ReplyToMessage message={message} />
-    {/* ... rest of the duplicated logic ... */}
+    <MessageContent
+      message={message}
+      userInfos={userInfos}
+      isSender={isSender}
+    />
   </div>
-) : (
-  // ... duplicate code for receiver view ...
-)}
+);

Configuration used: CodeRabbit UI
Review profile: CHILL

src/app/(internal-sites)/chats/[chatId]/page.tsx (2)

59-90: LGTM! Consider using TypeScript's Pick type for props.

The EmojiPicker component is well-structured with clear responsibilities. The conditional rendering and floating UI integration are implemented correctly.

Consider using TypeScript's Pick type to derive the props interface from the parent component's props:

-}: {
-  showFullEmojiPicker: boolean;
-  refsFullEmojiPicker: {
-    setFloating: (ref: HTMLElement | null) => void;
-  };
-  selectedMessageId: Id<"messages"> | null;
-  floatingStylesFullEmojiPicker: React.CSSProperties;
-  reactToMessageHandler: (messageId: Id<"messages">, emoji: string) => void;
-}
+}: Pick<MessageProps, 'showFullEmojiPicker' | 'refsFullEmojiPicker' | 'selectedMessageId' | 'floatingStylesFullEmojiPicker' | 'reactToMessageHandler'>

---

471-542: Consider extracting reaction update logic into separate functions.

The reaction management logic is comprehensive but could be more maintainable. The updateMessageReactions function handles multiple responsibilities.

Consider breaking down the logic into smaller, focused functions:

+const handleExistingReaction = (message: Message, userInfo: any, emoji: string) => {
+  const existingReaction = message.reactions?.find(
+    (r) => r.userId === userInfo.data?._id && r.emoji === emoji
+  );
+  if (existingReaction) {
+    return {
+      ...message,
+      reactions: message.reactions.filter(
+        (r) => !(r.userId === userInfo.data?._id && r.emoji === emoji)
+      ),
+    };
+  }
+  return null;
+};

+const handleOtherReaction = (message: Message, userInfo: any, emoji: string) => {
+  const hasOtherReaction = message.reactions?.find(
+    (r) => r.userId === userInfo.data?._id
+  );
+  if (hasOtherReaction) {
+    return {
+      ...message,
+      reactions: message.reactions.map((r) =>
+        r.userId === userInfo.data?._id ? { ...r, emoji } : r
+      ),
+    };
+  }
+  return null;
+};

 const updateMessageReactions = (message: Message) => {
   if (message._id !== messageId || message.type !== "message") {
     return message;
   }

-  const existingReaction = message.reactions?.find(
-    (r) => r.userId === userInfo.data?._id && r.emoji === emoji
-  );
-  if (existingReaction) {
-    return {
-      ...message,
-      reactions: message.reactions.filter(
-        (r) => !(r.userId === userInfo.data?._id && r.emoji === emoji)
-      ),
-    };
-  }
-
-  const hasOtherReaction = message.reactions?.find(
-    (r) => r.userId === userInfo.data?._id
-  );
-  if (hasOtherReaction) {
-    return {
-      ...message,
-      reactions: message.reactions.map((r) =>
-        r.userId === userInfo.data?._id ? { ...r, emoji } : r
-      ),
-    };
-  }
+  const existingReactionResult = handleExistingReaction(message, userInfo, emoji);
+  if (existingReactionResult) return existingReactionResult;
+
+  const otherReactionResult = handleOtherReaction(message, userInfo, emoji);
+  if (otherReactionResult) return otherReactionResult;

   return {
     ...message,
     reactions: [...(message.reactions || []), reaction],
   };
 };

src/components/message.tsx (3)

81-87: Simplify the reaction grouping logic.

The reduce operation with assignment in expression could be clearer.

Consider this cleaner approach:

-const reactionsByEmoji = reactions.reduce(
-  (acc, reaction) => {
-    (acc[reaction.emoji] = acc[reaction.emoji] ?? []).push(reaction);
-    return acc;
-  },
-  {} as Record<string, typeof reactions>,
-);
+const reactionsByEmoji = reactions.reduce((acc, reaction) => {
+  if (!acc[reaction.emoji]) {
+    acc[reaction.emoji] = [];
+  }
+  acc[reaction.emoji].push(reaction);
+  return acc;
+}, {} as Record<string, typeof reactions>);

🧰 Tools

🪛 Biome (1.9.4)

[error] 83-83: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

---

98-105: Simplify user lookup logic.

The nested ternary operators make the code hard to follow.

Consider this clearer approach:

-const user =
-  userInfos[0]?._id === reaction.userId
-    ? userInfos[0]
-    : Array.isArray(userInfos[1])
-      ? userInfos[1].find((u) => u._id === reaction.userId)
-      : userInfos[1];
+const findUser = (userId: Id<"users">) => {
+  if (userInfos[0]?._id === userId) return userInfos[0];
+  if (!Array.isArray(userInfos[1])) return userInfos[1];
+  return userInfos[1].find((u) => u._id === userId);
+};
+const user = findUser(reaction.userId);

---

114-154: Consider breaking down the Message component.

The component has many props and responsibilities, which could make it harder to maintain.

Consider splitting it into smaller components and grouping related props:

type MessageReactionProps = {
  reactions: Doc<"reactions">[];
  userInfos: UserInfos;
  onReaction: (messageId: Id<"messages">, emoji: string) => void;
};

type MessageActionsProps = {
  onEdit: (messageId: Id<"messages">) => void;
  onReply: (messageId: Id<"messages">) => void;
  onDelete: (messageId: Id<"messages">) => void;
};

type MessageProps = {
  message: Message;
  reactions: MessageReactionProps;
  actions: MessageActionsProps;
  ui: {
    selectedMessageId: Id<"messages"> | null;
    setSelectedMessageId: React.Dispatch<React.SetStateAction<Id<"messages"> | null>>;
    showEmojiPicker: boolean;
    setShowEmojiPicker: React.Dispatch<React.SetStateAction<boolean>>;
  };
};

Configuration used: CodeRabbit UI
Review profile: CHILL

Configuration used: CodeRabbit UI
Review profile: CHILL

src/components/message.tsx (3)

115-155: Extract props interface and consider using Context

The component's props structure could be improved:

1. Extract the props interface to improve maintainability
2. Consider using React Context for emoji picker and message selection state

type MessageProps = {
  message: Message;
  selectedMessageId: Id<"messages"> | null;
  setSelectedMessageId: React.Dispatch<React.SetStateAction<Id<"messages"> | null>>;
  setEditingMessageId: React.Dispatch<React.SetStateAction<Id<"messages"> | null>>;
  setReplyToMessageId: React.Dispatch<React.SetStateAction<Id<"messages"> | undefined>>;
  userInfos: UserInfos; // Reuse the extracted type
  setShowFullEmojiPicker: React.Dispatch<React.SetStateAction<boolean>>;
  refsFullEmojiPicker: {
    setReference: (node: ReferenceType | null) => void;
  };
  isInBottomHalf: boolean | null;
  setIsInBottomHalf: React.Dispatch<React.SetStateAction<boolean | null>>;
  reactToMessageHandler: (messageId: Id<"messages">, emoji: string) => void;
};

// Consider creating a MessageContext
const MessageContext = React.createContext<{
  selectedMessageId: Id<"messages"> | null;
  setSelectedMessageId: React.Dispatch<React.SetStateAction<Id<"messages"> | null>>;
  showEmojiPicker: boolean;
  setShowEmojiPicker: React.Dispatch<React.SetStateAction<boolean>>;
} | null>(null);

---

210-211: Extract mobile detection to a custom hook

The mobile detection logic could be moved to a reusable hook.

const useIsMobile = () => {
  const [isMobile, setIsMobile] = React.useState(false);
  
  React.useEffect(() => {
    const userAgent = navigator.userAgent;
    setIsMobile(/android|iPad|iPhone|iPod/i.test(userAgent));
  }, []);
  
  return isMobile;
};

---

Line range hint 1-854: Consider splitting the Message component

The Message component has grown quite large and handles multiple responsibilities. Consider splitting it into smaller, focused components:

1. MessageContainer - Main wrapper handling layout
2. MessageContent - Content rendering
3. MessageReactions - Reaction handling
4. MessageActions - Context menu actions

This would improve maintainability and make the code easier to test. Would you like assistance in planning this refactor?

Configuration used: CodeRabbit UI
Review profile: CHILL

src/components/message.tsx (1)

210-211: Consider using a more robust mobile detection method

Using user agent strings for mobile detection can be unreliable due to spoofing and constant changes in user agent patterns.

Consider using the window.matchMedia API for a more reliable solution:

- const userAgent = navigator.userAgent;
- const isMobile = /android|iPad|iPhone|iPod/i.test(userAgent);
+ const isMobile = window.matchMedia('(max-width: 768px)').matches ||
+   ('ontouchstart' in window) ||
+   (navigator.maxTouchPoints > 0);

Configuration used: CodeRabbit UI
Review profile: CHILL

- const onLongPress = () => {
+ const onLongPress = (e: React.MouseEvent | React.TouchEvent) => {
    if (!isMobile) return;
    if (
      (message.type === "message" && message.deleted) ||
      message.type !== "message"
    )
      return;
    checkClickPosition(e);
    setSelectedMessageId(message._id);
  };

+ type UserInfos = [
+   FunctionReturnType<typeof api.users.getUserData> | undefined,
+   | undefined
+   | NonNullable<FunctionReturnType<typeof api.chats.getChatInfoFromId>>["otherUser"]
+ ];

+ const findUserById = (userId: string, userInfos: UserInfos) => {
+   if (userInfos[0]?._id === userId) return userInfos[0];
+   return Array.isArray(userInfos[1])
+     ? userInfos[1].find((u) => u._id === userId)
+     : userInfos[1];
+ };

 const reactionsByEmoji = reactions.reduce((acc, reaction) => {
-  (acc[reaction.emoji] = acc[reaction.emoji] ?? []).push(reaction);
+  if (!acc[reaction.emoji]) {
+    acc[reaction.emoji] = [];
+  }
+  acc[reaction.emoji].push(reaction);
   return acc;
 }, {} as Record<string, typeof reactions>);

 // In the render section:
-{reactions.map((reaction) => {
-  const user = userInfos[0]?._id === reaction.userId
-    ? userInfos[0]
-    : Array.isArray(userInfos[1])
-      ? userInfos[1].find((u) => u._id === reaction.userId)
-      : userInfos[1];
+{reactions.map((reaction) => {
+  const user = findUserById(reaction.userId, userInfos);
   return user?.username;
}).join(", ")}

 <span
   onMouseDown={() => reactToMessageHandler(message._id, "😂")}
+  role="button"
+  aria-label="React with laughing emoji"
+  tabIndex={0}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      reactToMessageHandler(message._id, "😂");
+    }
+  }}
   className={cn(/*...*/)}
 >

src/components/message.tsx (2)

313-322: Improve long press handler type safety

The long press handler's event type could be more specific and the function could be memoized.

Apply these improvements:

-const onLongPress = (e: MouseEvent | TouchEvent) => {
+const onLongPress = React.useCallback((e: React.TouchEvent | React.MouseEvent) => {
   if (!isMobile) return;
   if (
     (message.type === "message" && message.deleted) ||
     message.type !== "message"
   )
     return;
   checkClickPosition(e);
   setSelectedMessageId(message._id);
-};
+}, [isMobile, message, checkClickPosition, setSelectedMessageId]);

---

215-216: Extract mobile detection to a custom hook

The mobile detection logic could be moved to a reusable hook.

Create a new hook:

const useIsMobile = () => {
  const [isMobile, setIsMobile] = React.useState(false);
  
  React.useEffect(() => {
    const userAgent = navigator.userAgent;
    setIsMobile(/android|iPad|iPhone|iPod/i.test(userAgent));
  }, []);
  
  return isMobile;
};

Then use it in the component:

-const userAgent = navigator.userAgent;
-const isMobile = /android|iPad|iPhone|iPod/i.test(userAgent);
+const isMobile = useIsMobile();

Configuration used: CodeRabbit UI
Review profile: CHILL

 <span
   onMouseDown={() => reactToMessageHandler(message._id, "😂")}
+  role="button"
+  aria-label="React with laughing emoji"
+  tabIndex={0}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      reactToMessageHandler(message._id, "😂");
+    }
+  }}
   className={cn(
     "flex aspect-square h-10 items-center justify-center rounded-full bg-card p-1 pt-1.5 hover:cursor-pointer dark:bg-primary",
     {
       "bg-muted-foreground dark:bg-card":
         message.reactions.find(
           (reaction) =>
             reaction.emoji === "😂" &&
             reaction.userId === userInfos[0]?._id,
         ),
     },
   )}
 >

 const ReactionDetails = ({
   reactions,
   userInfos,
 }: {
   reactions: Doc<"reactions">[];
   userInfos: [
     FunctionReturnType<typeof api.users.getUserData> | undefined,
     | undefined
     | NonNullable<FunctionReturnType<typeof api.chats.getChatInfoFromId>>["otherUser"]
   ];
 }) => {
+  const findUser = (userId: string) => 
+    userInfos[0]?._id === userId
+      ? userInfos[0]
+      : Array.isArray(userInfos[1])
+        ? userInfos[1].find((u) => u._id === userId)
+        : userInfos[1];
+
   const reactionsByEmoji = reactions.reduce(
     (acc, reaction) => {
-      (acc[reaction.emoji] = acc[reaction.emoji] ?? []).push(reaction);
+      if (!acc[reaction.emoji]) {
+        acc[reaction.emoji] = [];
+      }
+      acc[reaction.emoji].push(reaction);
       return acc;
     },
     {} as Record<string, typeof reactions>,
   );

   return (
     <div className="flex flex-col gap-2 p-2">
       {Object.entries(reactionsByEmoji).map(([emoji, reactions]) => (
         <div key={emoji}>
           <div className="flex items-center gap-2">
             <span className="text-xl">{emoji}</span>
             <div className="text-sm">
               {reactions
                 .map((reaction) => {
-                  const user =
-                    userInfos[0]?._id === reaction.userId
-                      ? userInfos[0]
-                      : Array.isArray(userInfos[1])
-                        ? userInfos[1].find((u) => u._id === reaction.userId)
-                        : userInfos[1];
-                  return user?.username;
+                  const user = findUser(reaction.userId);
+                  return user?.username ?? 'Unknown User';
                 })
                 .join(", ")}
             </div>
           </div>
         </div>
       ))}
     </div>
   );
 };