Skip to content

Commit

Permalink
reverted changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rohini-Microsoft
Rohini-Microsoft committed Jul 16, 2024
1 parent bf908c8 commit ad2165f
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 133 deletions.
3 changes: 0 additions & 3 deletions code/frontend/src/assets/pauseIcon.svg
View file

This file was deleted.

3 changes: 0 additions & 3 deletions code/frontend/src/assets/speakerIcon.svg
View file

This file was deleted.

138 changes: 11 additions & 127 deletions code/frontend/src/components/Answer/Answer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,21 @@
import { useEffect, useMemo, useState, useRef, forwardRef } from "react";
import { useEffect, useMemo, useState, useRef } from "react";
import { useBoolean } from "@fluentui/react-hooks"
import { FontIcon, Stack, Text } from "@fluentui/react";

import styles from "./Answer.module.css";

import { AskResponse, Citation } from "../../api";
import { parseAnswer } from "./AnswerParser";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import supersub from 'remark-supersub'
import pauseIcon from "../../assets/pauseIcon.svg";
import speakerIcon from "../../assets/speakerIcon.svg";
import * as sdk from 'microsoft-cognitiveservices-speech-sdk';
declare global {
interface Window {
webkitAudioContext: typeof AudioContext;
}
}

interface Props {
answer: AskResponse;
onCitationClicked: (citedDocument: Citation) => void;
index: number;
}
const MyStackComponent = forwardRef<HTMLDivElement, any>((props, ref) => (
<div {...props} ref={ref} />
));

export const Answer = ({
answer,
Expand All @@ -31,51 +24,23 @@ export const Answer = ({
}: Props) => {
const [isRefAccordionOpen, { toggle: toggleIsRefAccordionOpen }] = useBoolean(false);
const filePathTruncationLimit = 50;
const answerContainerRef = useRef<HTMLDivElement>(null);// read the text from the container

const messageBoxId = "message-" + index;
const [isSpeaking, setIsSpeaking] = useState(false); // for speaker on
const [showSpeaker, setShowSpeaker] = useState(true); //for show and hide the speaker icon
const [isPaused, setIsPaused] = useState(false); //for pause

const parsedAnswer = useMemo(() => parseAnswer(answer), [answer]);
const [chevronIsExpanded, setChevronIsExpanded] = useState(isRefAccordionOpen);
const refContainer = useRef<HTMLDivElement>(null);
const [audioContext, setAudioContext] = useState<AudioContext | null>(null); //Manully manage the audio context eg pausing resuming
// const [synthesizer, setSynthesizer] = useState<sdk.SpeechSynthesizer | null>(null);
const handleChevronClick = () => {
setChevronIsExpanded(!chevronIsExpanded);
toggleIsRefAccordionOpen();
};

const fetchSpeechConfig = async (): Promise<{ key: string; region: string }> => {
const response = await fetch('/api/speech');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return { key: data.key, region: data.region };
};

const initializeSynthesizer = async () => {
const { key, region } = await fetchSpeechConfig();
const speechConfig = sdk.SpeechConfig.fromSubscription(key, region);
const audioConfig = sdk.AudioConfig.fromDefaultSpeakerOutput();
const synthesizer = new sdk.SpeechSynthesizer(speechConfig, audioConfig);

return synthesizer;
};

useEffect(() => {
setChevronIsExpanded(isRefAccordionOpen);
if(chevronIsExpanded && refContainer.current){
refContainer.current.scrollIntoView({ behavior:'smooth'});
}
// After genrating answer then only show speaker icon
if (parsedAnswer.markdownFormatText === "Generating answer...") {
setShowSpeaker(false);
} else {
setShowSpeaker(true);
}
}, [chevronIsExpanded,isRefAccordionOpen, parsedAnswer]);
}, [chevronIsExpanded,isRefAccordionOpen]);

const createCitationFilepath = (citation: Citation, index: number, truncate: boolean = false) => {
let citationFilename = "";
Expand All @@ -95,76 +60,7 @@ export const Answer = ({
return citationFilename;
}

const getAnswerText = () => {
// Get the answer
if (answerContainerRef.current) {
const text = answerContainerRef.current.textContent ?? '';
return text;
}
return '';
};

const handleSpeak = async () => {
try {
const text = getAnswerText();
console.log('text:::', text);
setIsSpeaking(true);
const synth = await initializeSynthesizer();
// setSynthesizer(synth);
const AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext();
setAudioContext(context);
synth.speakTextAsync(
text,
result => {
if (result.reason === sdk.ResultReason.SynthesizingAudioCompleted) {
console.log('Synthesis completed');
setIsSpeaking(false);
setIsPaused(false);
context.close();
}
// if (result.reason === sdk.ResultReason.SynthesizingAudioStarted) {
// console.log('Synthesis started');
// setIsSpeaking(false);
// setIsPaused(true);
// }

},
error => {
console.error('Synthesis error:', error);
setIsSpeaking(false);
setIsPaused(false);
context.close();
}
);
} catch (error) {
console.error('Error:', error);
setIsSpeaking(false);
setIsPaused(false);
}
};

const handlePause = async () => {
if (audioContext) {
if (isPaused) {
audioContext.resume().then(() => {
console.log('Resumed');
setIsPaused(false);
}).catch(error => {
console.error('Resume error:', error);
});
} else {
audioContext.suspend().then(() => {
console.log('Paused');
setIsPaused(true);
}).catch(error => {
console.error('Pause error:', error);
});
}
}
};

useEffect(() => {
useEffect(() => {
const handleCopy = () => {
alert("Please consider where you paste this content.");
};
Expand All @@ -177,7 +73,7 @@ export const Answer = ({

return (
<>
<MyStackComponent className={styles.answerContainer} id={messageBoxId} ref={answerContainerRef}>
<Stack className={styles.answerContainer} id={messageBoxId}>
<Stack.Item grow>
<ReactMarkdown
remarkPlugins={[remarkGfm, supersub]}
Expand Down Expand Up @@ -221,19 +117,7 @@ export const Answer = ({
})}
</div>
}
<Stack.Item>
{showSpeaker && (
<button id="speakerbtn" onClick={handleSpeak} style={{ border: 0, backgroundColor: 'transparent', display: isSpeaking? "none" : "block" }}>
<img src={speakerIcon} alt="Speak" />
</button>
)}
{isSpeaking && (
<button id="pausebtn" onClick={handlePause} style={{ border: 0, backgroundColor: 'transparent' , display: !isSpeaking? "none" : "block" }} >
<img src={pauseIcon} alt={isPaused ? 'Resume' : 'Pause'} />
</button>
)}
</Stack.Item>
</MyStackComponent>
</Stack>
</>
);
};

0 comments on commit ad2165f

Please sign in to comment.