selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

adds copy for topics and transcription

Browse Source
This commit is contained in:
Sara
2023-09-26 12:20:27 +02:00
parent bd070fb487
commit cd8cc2f5cd
2 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
www/app/transcripts/new/page.tsx
View File

@@ -44,6 +44,12 @@ const TranscriptCreate = () => {
getAudioStream, getAudioStream,
} = useAudioDevice(); } = useAudioDevice();
const [hasRecorded, setHasRecorded] = useState(false); const [hasRecorded, setHasRecorded] = useState(false);
const [transcriptStarted, setTranscriptStarted] = useState(false);
useEffect(() => {
if (!transcriptStarted && webSockets.transcriptText.length !== 0)
setTranscriptStarted(true);
}, [webSockets.transcriptText]);
return ( return (
<> <>
@@ -69,15 +75,30 @@ const TranscriptCreate = () => {
useActiveTopic={useActiveTopic} useActiveTopic={useActiveTopic}
autoscroll={true} autoscroll={true}
/> />
<section <section
className={`w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center`} className={`w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4`}
> >
{!hasRecorded ? ( {!hasRecorded ? (
<div className="py-2 h-auto"> <>
<LiveTrancription text={webSockets.transcriptText} /> {transcriptStarted && (
</div> <h2 className="md:text-lg font-bold">Transcription</h2>
)}
<div className="flex flex-col justify-center align center text-center h-full">
<div className="py-2 h-auto">
{!transcriptStarted ? (
<div className="text-center text-gray-500">
The conversation transcript will appear here after you
start recording.
</div>
) : (
<LiveTrancription text={webSockets.transcriptText} />
)}
</div>
</div>
</>
) : ( ) : (
<div className="flex flex-col justify-center align center text-center"> <div className="flex flex-col justify-center align center text-center h-full text-gray-500">
<div className="p-2 md:p-4"> <div className="p-2 md:p-4">
<FontAwesomeIcon <FontAwesomeIcon
icon={faGear} icon={faGear}

6
www/app/transcripts/topicList.tsx
View File

@@ -61,9 +61,11 @@ export function TopicList({
}, [activeTopic, autoscroll]); }, [activeTopic, autoscroll]);
return ( return (
<section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:p-4 flex flex-col justify-center align-center"> <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 flex flex-col justify-center align-center">
{topics.length > 0 ? ( {topics.length > 0 ? (
<> <>
<h2 className="md:text-lg font-bold mb-2">Topics</h2>
{autoscroll && ( {autoscroll && (
<ScrollToBottom <ScrollToBottom
visible={!autoscrollEnabled} visible={!autoscrollEnabled}
@@ -108,7 +110,7 @@ export function TopicList({
</div> </div>
</> </>
) : ( ) : (
<div className="text-center text-gray-500 p-4"> <div className="text-center text-gray-500">
Discussion topics will appear here after you start recording. Discussion topics will appear here after you start recording.
<br /> <br />
It may take up to 5 minutes of conversation for the first topic to It may take up to 5 minutes of conversation for the first topic to