Update chat-message-content.tsx trial-debug v5

Author: nupuriyer

src/features/ui/chat/chat-message-area/chat-message-content.tsx

@@ -1,34 +1,33 @@
-import React, { useEffect, useRef, forwardRef } from "react";
+import React, { useEffect, useRef, forwardRef, MutableRefObject } from "react";
 
 interface ChatMessageContentAreaProps {
   children?: React.ReactNode;
 }
 
-const ChatMessageContentArea: React.ForwardRefRenderFunction<
-  HTMLDivElement,
-  ChatMessageContentAreaProps
-> = (props, ref) => {
-  const internalRef = useRef<HTMLDivElement>(null);
-  const combinedRef = ref || internalRef;
+const ChatMessageContentArea = forwardRef<HTMLDivElement, ChatMessageContentAreaProps>(
+  (props, ref) => {
+    const internalRef = useRef<HTMLDivElement>(null);
+    const combinedRef = (ref as MutableRefObject<HTMLDivElement>) || internalRef;
 
-  useEffect(() => {
-    if (combinedRef && combinedRef.current) {
-      const links = combinedRef.current.querySelectorAll("a");
-      links.forEach(link => {
-        link.setAttribute("target", "_blank");
-        link.setAttribute("rel", "noopener noreferrer");
-      });
-    }
-  }, [props.children]);
+    useEffect(() => {
+      if (combinedRef.current) {
+        const links = combinedRef.current.querySelectorAll("a");
+        links.forEach(link => {
+          link.setAttribute("target", "_blank");
+          link.setAttribute("rel", "noopener noreferrer");
+        });
+      }
+    }, [props.children]);
 
-  return (
+    return (
 <div
-      ref={combinedRef}
-      className="container max-w-3xl relative min-h-screen pb-[240px] pt-16 flex flex-col gap-16"
+        ref={combinedRef}
+        className="container max-w-3xl relative min-h-screen pb-[240px] pt-16 flex flex-col gap-16"
 >
-      {props.children}
+        {props.children}
 </div>
-  );
-};
+    );
+  }
+);
 
-export default forwardRef(ChatMessageContentArea);
+export default ChatMessageContentArea;