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
|
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 }: ViewProps) {
const { viewState, handleElementClick } = useZoom();
const { level, pIndex } = viewState;
const selected = pIndex === idx;
const isFocused = level === "paragraph" && selected;
// State for sentences
const [loading, setLoading] = useState<LoadingStatus>("pending");
return (
<>
<motion.div
key={idx + rawText}
className={`paragraph-wrapper ${selected ? "selected" : ""}`}
custom={selected}
variants={paragraphVariants}
initial="text"
animate={level}
onClick={(e) => handleElementClick(e, idx)}
whileHover={
level === "text"
? createHoverEffect(level, "text", "255, 255, 200")
: {}
}
>
{loading === "loading" && <div className="spinner" />}
{level === "text" || !selected || doc.segs.length === 0 ? (
<p className="paragraph">{rawText}</p>
) : (
<div className="sentences-container">
{doc.segs.map((sentence, sentIdx) => (
<Sentence
key={sentence.text + sentIdx}
idx={sentIdx}
rawText={sentence.text}
spacy={sentence}
context={{
idx: sentIdx,
parentText: rawText,
segmented: doc.segs.map((s) => s.text),
}}
doc={doc}
/>
))}
</div>
)}
</motion.div>
</>
);
}
export default memo(Paragraph);
|
