- Assistant turn bottom padding pb-8 -> pb-2, desktop user message top padding pt-6 -> pt-4 (footer-to-bubble gap 60px -> 28px) - Drop the recap note's -mt-6 that compensated the old large padding
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { useSessionAssistState } from '@/hooks/useSessionAssist';
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
interface SessionRecapNoteProps {
|
|
sessionId: string;
|
|
directory?: string;
|
|
isMobile: boolean;
|
|
}
|
|
|
|
// Quiet one-paragraph recap of the agent's last reply, rendered right under
|
|
// the last message (above the reserved bottom gap). Appears only after the
|
|
// 1-minute quiet window, so the layout shift happens off-screen in practice.
|
|
export const SessionRecapNote: React.FC<SessionRecapNoteProps> = React.memo(({ sessionId, directory, isMobile }) => {
|
|
const { visibleRecap } = useSessionAssistState(sessionId, directory);
|
|
const { t } = useI18n();
|
|
|
|
if (!visibleRecap) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="chat-message-column">
|
|
{/* The last assistant turn carries pb-8 — pull the recap up into that gap. */}
|
|
<div aria-label={t('chat.recap.aria')}>
|
|
<span className={`typography-meta text-muted-foreground/70 ${isMobile ? 'line-clamp-4' : 'line-clamp-2'}`}>
|
|
<span className="italic text-muted-foreground/50">{t('chat.recap.label')} </span>
|
|
{visibleRecap}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
SessionRecapNote.displayName = 'SessionRecapNote';
|