import React from 'react'; import { useTranslation } from 'react-i18next'; import styled from '@emotion/styled'; import { spacing } from '../../../theme'; interface Props { inputType: string; text: string | null | undefined; } /** Split raw input into clean paragraphs. Single \n collapses to space; \n\n+ = new paragraph. */ function toParagraphs(raw: string): string[] { return raw.split(/\n{2,}/).map(p => p.replace(/\s*\n\s*/g, ' ').trim()).filter(Boolean); } export const InputPreview: React.FC = ({ inputType, text }) => { const { t } = useTranslation(); if (!text) return null; const paragraphs = toParagraphs(text); return ( {paragraphs.map((p, i) =>

{p}

)} ); }; const Block = styled.div` display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; margin-bottom: ${spacing.md}px; `; const Label = styled.div` font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); `; const Body = styled.div` font-size: 13px; color: var(--fg-secondary); line-height: 1.6; word-break: break-word; overflow-wrap: break-word; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; & p { margin: 0; } `;