Spaces:
Running
Running
File size: 3,028 Bytes
ffcad5d | 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 | /** Layout math for the advisor-answer carousel. Keep in sync with ChatPage.css. */
export const GAP = 16;
/** Arrow column (52px) + stage gap (10px). Overlay/below modes do not reserve this. */
export const CONTROLS_W = 62;
export const PREFERRED_SLIDE = 400;
export const MIN_SLIDE = 280;
export const ABS_MIN_SLIDE = 200;
export const MAX_VISIBLE = 3;
function cardsNeeded(visible, slideW) {
if (visible < 1) return 0;
return visible * slideW + GAP * (visible - 1);
}
function pack(width, visible, reserved, minSlide) {
const usable = width - reserved;
const gaps = GAP * Math.max(0, visible - 1);
if (visible < 1 || usable < minSlide) return null;
let slideW = Math.min(PREFERRED_SLIDE, Math.floor((usable - gaps) / visible));
slideW = Math.max(minSlide, slideW);
const cardsWidth = cardsNeeded(visible, slideW);
if (cardsWidth + reserved > width) return null;
return { visible, slideW, cardsWidth };
}
/**
* Fit 1–3 full advisor cards into the chat message pane.
* Never returns a layout that would clip a partial card.
*
* @param {number} availableWidth visible width of the carousel shell (content box)
* @param {number} messageCount number of advisor answers in the group
* @returns {{ visible: number, slideW: number, cardsWidth: number, controlsMode: 'none'|'side'|'overlay'|'below' }}
*/
export function computeLayout(availableWidth, messageCount) {
const width = Math.max(0, Math.floor(Number(availableWidth) || 0));
const n = Math.max(1, Math.floor(Number(messageCount) || 1));
const maxCards = Math.min(MAX_VISIBLE, n);
const needControls = (visible) => n > visible;
const tryPack = (visible, minSlide) => {
const need = needControls(visible);
if (!need) {
const fit = pack(width, visible, 0, minSlide);
return fit ? { ...fit, controlsMode: 'none' } : null;
}
const side = pack(width, visible, CONTROLS_W, minSlide);
if (side) return { ...side, controlsMode: 'side' };
const overlay = pack(width, visible, 0, minSlide);
if (overlay) return { ...overlay, controlsMode: 'overlay' };
return null;
};
for (let visible = maxCards; visible >= 2; visible--) {
const fit = tryPack(visible, PREFERRED_SLIDE);
if (fit) return fit;
}
for (let visible = maxCards; visible >= 2; visible--) {
const fit = tryPack(visible, MIN_SLIDE);
if (fit) return fit;
}
const onePreferred = tryPack(1, PREFERRED_SLIDE);
if (onePreferred) return onePreferred;
const oneSide = pack(width, 1, CONTROLS_W, ABS_MIN_SLIDE);
if (n > 1 && oneSide) return { ...oneSide, controlsMode: 'side' };
const oneOverlay = pack(width, 1, 0, ABS_MIN_SLIDE);
if (n > 1 && oneOverlay) return { ...oneOverlay, controlsMode: 'overlay' };
const slideW = Math.max(ABS_MIN_SLIDE, Math.min(PREFERRED_SLIDE, width || ABS_MIN_SLIDE));
return {
visible: 1,
slideW,
cardsWidth: slideW,
controlsMode: n > 1 ? 'below' : 'none',
};
}
|