Check the render method of SlotClone. #432

app/components/chat/Messages.client.tsx

@@ -69,8 +69,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                 </div>
                 {!isUserMessage && (
                   <div className="flex gap-2 flex-col lg:flex-row">
-                    <WithTooltip tooltip="Revert to this message">
                     {messageId && (
+                      <WithTooltip tooltip="Revert to this message">
                         <button
                           onClick={() => handleRewind(messageId)}
                           key="i-ph:arrow-u-up-left"
@@ -79,8 +79,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                             'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
                           )}
                         />
-                      )}
                       </WithTooltip>
+                    )}
 
                     <WithTooltip tooltip="Fork chat from this message">
                       <button

app/components/ui/IconButton.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, forwardRef, type ForwardedRef } from 'react';
 import { classNames } from '~/utils/classNames';
 
 type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -25,8 +25,11 @@ type IconButtonWithChildrenProps = {
 
 type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;
 
+// Componente IconButton com suporte a refs
 export const IconButton = memo(
-  ({
+  forwardRef(
+    (
+      {
         icon,
         size = 'xl',
         className,
@@ -36,9 +39,12 @@ export const IconButton = memo(
         title,
         onClick,
         children,
-  }: IconButtonProps) => {
+      }: IconButtonProps,
+      ref: ForwardedRef<HTMLButtonElement>,
+    ) => {
       return (
         <button
+          ref={ref}
           className={classNames(
             'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
             {
@@ -60,6 +66,7 @@ export const IconButton = memo(
         </button>
       );
     },
+  ),
 );
 
 function getIconSize(size: IconSize) {

app/components/ui/Tooltip.tsx

@@ -1,8 +1,9 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
+import { forwardRef, type ForwardedRef, type ReactElement } from 'react';
 
 interface TooltipProps {
   tooltip: React.ReactNode;
-  children: React.ReactNode;
+  children: ReactElement;
   sideOffset?: number;
   className?: string;
   arrowClassName?: string;
@@ -12,7 +13,9 @@ interface TooltipProps {
   delay?: number;
 }
 
-const WithTooltip = ({
+const WithTooltip = forwardRef(
+  (
+    {
       tooltip,
       children,
       sideOffset = 5,
@@ -22,7 +25,9 @@ const WithTooltip = ({
       position = 'top',
       maxWidth = 250,
       delay = 0,
-}: TooltipProps) => {
+    }: TooltipProps,
+    _ref: ForwardedRef<HTMLElement>,
+  ) => {
     return (
       <Tooltip.Root delayDuration={delay}>
         <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
@@ -68,6 +73,7 @@ const WithTooltip = ({
         </Tooltip.Portal>
       </Tooltip.Root>
     );
-};
+  },
+);
 
 export default WithTooltip;