Spaces:
Sleeping
Sleeping
File size: 3,259 Bytes
c05ab04 060fd46 c05ab04 060fd46 c05ab04 060fd46 c05ab04 060fd46 c05ab04 060fd46 c05ab04 060fd46 c05ab04 060fd46 c05ab04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | import { useState, useEffect } from 'react';
import ResponseBlock from './ResponseBlock';
function useWindowWidth() {
const [w, setW] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
useEffect(() => {
const h = () => setW(window.innerWidth);
window.addEventListener('resize', h);
return () => window.removeEventListener('resize', h);
}, []);
return w;
}
export default function ResponseCarousel({ neonResponse, comparisonResponses, offset = 0, showPrePromptIndicator = false }) {
const screenWidth = useWindowWidth();
const isMobile = screenWidth <= 480;
const isTablet = screenWidth <= 900;
const visible = isMobile ? 1 : (isTablet ? 1 : 2);
const visibleComparisons = comparisonResponses.slice(offset, offset + visible);
return (
<div className={`carousel-track ${isMobile ? 'carousel-track--stacked' : ''} ${isTablet && !isMobile ? 'carousel-track--tablet' : ''}`}>
<div className="carousel-sticky">
<ResponseBlock
response={neonResponse}
isNeonEmphasis={true}
showBadge={false}
showModelName={true}
showPersona={true}
showFooterParams={false}
showPrePromptIndicator={showPrePromptIndicator}
/>
</div>
<div className="carousel-scrollable">
{visibleComparisons.map((r, i) => (
<ResponseBlock
key={`${r.model_id}-${offset + i}`}
response={r}
showBadge={false}
showModelName={false}
showFooterParams={false}
isComparisonEmphasis={true}
showPrePromptIndicator={showPrePromptIndicator}
/>
))}
{comparisonResponses.length === 0 && (
<div className="carousel-empty">No comparison models selected</div>
)}
</div>
<style>{`
.carousel-track {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 12px;
align-items: stretch;
width: 100%;
min-width: 0;
}
.carousel-track--tablet {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.carousel-track--stacked {
grid-template-columns: minmax(0, 1fr);
}
.carousel-sticky {
min-width: 0;
max-width: 100%;
display: flex;
overflow: hidden;
}
.carousel-sticky .response-block {
min-width: 0;
width: 100%;
}
.carousel-scrollable {
display: flex;
gap: 12px;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.carousel-scrollable .response-block {
flex: 1;
min-width: 0;
}
.carousel-empty {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
color: var(--text-muted);
font-size: 13px;
font-style: italic;
border: 1px dashed var(--border-primary);
border-radius: 12px;
padding: 24px;
}
`}</style>
</div>
);
}
|