import React, { useState, useEffect, useRef } from 'react'; const FloatingIcons = ({ responseId }) => { const [isFloating, setIsFloating] = useState(false); const responseRef = useRef(null); const iconsRef = useRef(null); useEffect(() => { const handleScroll = () => { if (!responseRef.current || !iconsRef.current) return; const responseRect = responseRef.current.getBoundingClientRect(); const iconsHeight = iconsRef.current.offsetHeight; const windowHeight = window.innerHeight; // Check if response is in view and has enough space for floating icons const shouldFloat = responseRect.top < windowHeight - iconsHeight && responseRect.bottom > iconsHeight; setIsFloating(shouldFloat); }; window.addEventListener('scroll', handleScroll); handleScroll(); // Initial check return () => { window.removeEventListener('scroll', handleScroll); }; }, [responseId]); return (

{/* Your response content here */}

); }; export default FloatingIcons; .ra-response { position: relative; padding: 16px; margin-bottom: 24px; border-radius: 8px; background-color: #f8f9fa; min-height: 100px; } .response-icons { display: flex; gap: 8px; position: absolute; right: 16px; bottom: 16px; transition: all 0.2s ease; } .response-icons.floating { position: fixed; bottom: 20px; right: 20px; background-color: white; padding: 8px; border-radius: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 100; } .icon-button { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .icon-button:hover { background-color: #f0f0f0; } .icon-button svg { display: block; } import React from 'react'; import FloatingIcons from './FloatingIcons'; import './../styles/FloatingIcons.css'; const ConversationPage = () => { const responses = [ { id: 'response-1', content: 'First response content...' }, { id: 'response-2', content: 'Second response content...' }, { id: 'response-3', content: 'Third response content...' }, ]; return (

{responses.map((response) => ( {response.content} ))}

); }; export default ConversationPage;