feat: Supports pronunciation while outputting text #2088 (#2227)

### What problem does this PR solve?

feat: Supports pronunciation while outputting text #2088

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/message-item/group-button.tsx

@@ -22,12 +22,14 @@ interface IProps {
   content: string;
   prompt?: string;
   showLikeButton: boolean;
+  audioBinary?: string;
 }
 
 export const AssistantGroupButton = ({
   messageId,
   content,
   prompt,
+  audioBinary,
   showLikeButton,
 }: IProps) => {
   const { visible, hideModal, showModal, onFeedbackOk, loading } =
@@ -38,7 +40,7 @@ export const AssistantGroupButton = ({
     showModal: showPromptModal,
   } = useSetModalState();
   const { t } = useTranslation();
-  const { handleRead, ref, isPlaying } = useSpeech(content);
+  const { handleRead, ref, isPlaying } = useSpeech(content, audioBinary);
 
   const handleLike = useCallback(() => {
     onFeedbackOk({ thumbup: true });

web/src/components/message-item/hooks.ts

@@ -52,7 +52,7 @@ export const useRemoveMessage = (
   return { onRemoveMessage, loading };
 };
 
-export const useSpeech = (content: string) => {
+export const useSpeech = (content: string, audioBinary?: string) => {
   const ref = useRef<HTMLAudioElement>(null);
   const { read } = useSpeechWithSse();
   const player = useRef<SpeechPlayer>();
@@ -94,6 +94,15 @@ export const useSpeech = (content: string) => {
     }
   }, [setIsPlaying, speech, isPlaying, pause]);
 
+  // useEffect(() => {
+  //   if (audioBinary) {
+  //     const units = hexStringToUint8Array(audioBinary);
+  //     if (units) {
+  //       player.current?.feed(units);
+  //     }
+  //   }
+  // }, [audioBinary]);
+
   useEffect(() => {
     initialize();
   }, [initialize]);

web/src/components/message-item/index.tsx

@@ -131,6 +131,7 @@ const MessageItem = ({
                     content={item.content}
                     prompt={item.prompt}
                     showLikeButton={showLikeButton}
+                    audioBinary={item.audio_binary}
                   ></AssistantGroupButton>
                 )
               ) : (