import React, { memo, useCallback, useEffect, useState } from "react"; import { motion } from "motion/react"; import type { ViewProps, LoadingStatus } from "./logic/types"; import { NLP } from "sortug-ai"; import Sentence from "./Sentence"; import { paragraphVariants, createHoverEffect } from "./animations"; import { useZoom } from "./hooks/useZoom"; function Paragraph({ rawText, context, idx, doc, stanza }: ViewProps) { const filterSegs = useCallback(() => {}, [rawText, doc.segments]); useEffect(() => { const relevantSegs = doc.segments.filter((seg) => rawText.includes(seg.text), ); setSegs(relevantSegs); }, [filterSegs]); console.log(rawText); console.log(doc.segments.length); const [segs, setSegs] = useState([]); console.log(segs.length); const { viewState, handleElementClick } = useZoom(); const { level, pIndex } = viewState; const selected = pIndex === idx; const isFocused = level === "paragraph" && selected; // State for sentences const [loading, setLoading] = useState("pending"); return ( <> handleElementClick(e, idx)} whileHover={ level === "text" ? createHoverEffect(level, "text", "255, 255, 200") : {} } > {loading === "loading" &&
} {level === "text" || !selected || segs.length === 0 ? (

{rawText}

) : (
{segs.map((sentence, sentIdx) => ( s.text), }} doc={doc} stanza={stanza} stanzas={stanza?.segments[sentIdx]} /> ))}
)} ); } export default memo(Paragraph);