File size: 1,531 Bytes
efc9173 |
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 |
"use client";
import React, { useEffect, useRef, useState } from "react";
import { useAppMessage } from "@daily-co/daily-react";
import { DailyEventObjectAppMessage } from "@daily-co/daily-js";
import styles from "./StoryTranscript.module.css";
export default function StoryTranscript() {
const [partialText, setPartialText] = useState<string>("");
const [sentences, setSentences] = useState<string[]>([]);
const intervalRef = useRef<any | null>(null);
useEffect(() => {
clearInterval(intervalRef.current);
intervalRef.current = setInterval(() => {
if (sentences.length > 2) {
setSentences((s) => s.slice(1));
}
}, 2500);
return () => clearInterval(intervalRef.current);
}, [sentences]);
useAppMessage({
onAppMessage: (e: DailyEventObjectAppMessage<any>) => {
if (e.fromId && e.fromId === "transcription") {
// Check for LLM transcripts only
if (e.data.user_id !== "") {
setPartialText(e.data.text);
if (e.data.is_final) {
setPartialText("");
setSentences((s) => [...s, e.data.text]);
}
}
}
},
});
return (
<div className={styles.container}>
{sentences.map((sentence, index) => (
<p key={index} className={`${styles.transcript} ${styles.sentence}`}>
<span>{sentence}</span>
</p>
))}
{partialText && (
<p className={`${styles.transcript}`}>
<span>{partialText}</span>
</p>
)}
</div>
);
}
|