Merge pull request #2001 from MirzaHanan/Add-audio-button

Fixed(Add-Button): Add Audio Button Next to Dropdown for Each Question

src/components/App/SideBar/AiSummary/index.tsx

@@ -1,6 +1,8 @@
 import Button from '@mui/material/Button'
 import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
+import AiPauseIcon from '~/components/Icons/AiPauseIcon'
+import AiPlayIcon from '~/components/Icons/AiPlayIcon'
 import ChevronDownIcon from '~/components/Icons/ChevronDownIcon'
 import ChevronUpIcon from '~/components/Icons/ChevronUpIcon'
 import { Flex } from '~/components/common/Flex'
@@ -43,6 +45,8 @@ export const AiSummary = ({ question, response, refId }: Props) => {
   const ref = useRef<HTMLDivElement>(null)
   const [collapsed, setCollapsed] = useState(false)
   const { setAiSummaryAnswer } = useAiSummaryStore((s) => s)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
 
   useEffect(() => {
     if (ref.current) {
@@ -60,10 +64,25 @@ export const AiSummary = ({ question, response, refId }: Props) => {
     }
   }
 
+  const handleToggleAudio = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+
+      setIsPlaying(!isPlaying)
+    }
+  }
+
   return (
     <Wrapper>
       <TitleWrapper>
         <Title ref={ref}>{question}</Title>
+        {!response.audio_en && (
+          <AudioButton onClick={handleToggleAudio}>{isPlaying ? <AiPauseIcon /> : <AiPlayIcon />}</AudioButton>
+        )}
         <CollapseButton onClick={toggleCollapse}>{collapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}</CollapseButton>
       </TitleWrapper>
       {!collapsed && (
@@ -86,6 +105,11 @@ export const AiSummary = ({ question, response, refId }: Props) => {
           {(response?.sources || []).length ? <AiSources sourceIds={response.sources || []} /> : null}
         </>
       )}
+      {response.audio_en && (
+        <StyledAudio ref={audioRef} src={response.audio_en}>
+          <track kind="captions" />
+        </StyledAudio>
+      )}
     </Wrapper>
   )
 }
@@ -119,3 +143,32 @@ const CollapseButton = styled(Button)`
     color: white;
   }
 `
+
+const AudioButton = styled(Button)`
+  &&.MuiButton-root {
+    background-color: ${colors.COLLAPSE_BUTTON};
+    border: none;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 0px;
+    width: 27px;
+    height: 26px;
+    min-width: 26px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+    margin-right: 10px;
+  }
+
+  svg {
+    width: 29px;
+    height: 12px;
+    color: white;
+  }
+`
+
+const StyledAudio = styled.audio`
+  display: none;
+`

src/components/App/index.tsx

@@ -19,6 +19,7 @@ import { useTeachStore } from '~/stores/useTeachStore'
 import { useUserStore } from '~/stores/useUserStore'
 import {
   AiSummaryAnswerResponse,
+  AiSummaryAudioResponse,
   AiSummaryQuestionsResponse,
   AiSummarySourcesResponse,
   ExtractedEntitiesResponse,
@@ -131,6 +132,15 @@ export const App = () => {
     [setAiSummaryAnswer],
   )
 
+  const handleAiSummaryAudio = useCallback(
+    (data: AiSummaryAudioResponse) => {
+      if (data.ref_id) {
+        setAiSummaryAnswer(data.ref_id, { audio_en: data.audio_en })
+      }
+    },
+    [setAiSummaryAnswer],
+  )
+
   const handleAiRelevantQuestions = useCallback(
     (data: AiSummaryQuestionsResponse) => {
       if (data.ref_id) {
@@ -201,6 +211,10 @@ export const App = () => {
       if (realtimeGraphFeatureFlag) {
         socket.on('new_node_created', handleNewNodeCreated)
       }
+
+      if (chatInterfaceFeatureFlag) {
+        socket.on('answeraudiohook', handleAiSummaryAudio)
+      }
     }
 
     return () => {
@@ -218,6 +232,7 @@ export const App = () => {
     handleAiRelevantQuestions,
     handleAiSources,
     handleExtractedEntities,
+    handleAiSummaryAudio,
   ])
 
   return (

src/components/Icons/AiPauseIcon.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import React from 'react';
+
+const AiPauseIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 10 10"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.50033 10C7.27703 10 7.08233 9.91694 6.9162 9.75081C6.75006 9.58467 6.66699 9.38996 6.66699 9.16667V0.833333C6.66699 0.610042 6.75006 0.415326 6.9162 0.249187C7.08233 0.0830625 7.27703 0 7.50033 0H8.75033C8.97362 0 9.16833 0.0830625 9.33447 0.249187C9.5006 0.415326 9.58366 0.610042 9.58366 0.833333V9.16667C9.58366 9.38996 9.5006 9.58467 9.33447 9.75081C9.16833 9.91694 8.97362 10 8.75033 10H7.50033ZM1.25033 10C1.02703 10 0.832319 9.91694 0.66618 9.75081C0.500055 9.58467 0.416992 9.38996 0.416992 9.16667V0.833333C0.416992 0.610042 0.500055 0.415326 0.66618 0.249187C0.832319 0.0830625 1.02703 0 1.25033 0H2.50033C2.72362 0 2.91833 0.0830625 3.08445 0.249187C3.25059 0.415326 3.33366 0.610042 3.33366 0.833333V9.16667C3.33366 9.38996 3.25059 9.58467 3.08445 9.75081C2.91833 9.91694 2.72362 10 2.50033 10H1.25033Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default AiPauseIcon;

src/components/Icons/AiPlayIcon.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import React from 'react';
+
+const AiPlayIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 13"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.577 7.62502H11.8142C11.6368 7.62502 11.4883 7.56519 11.3687 7.44554C11.249 7.32589 11.1892 7.17739 11.1892 7.00004C11.1892 6.82269 11.249 6.67419 11.3687 6.55454C11.4883 6.43489 11.6368 6.37506 11.8142 6.37506H13.577C13.7543 6.37506 13.9028 6.43489 14.0225 6.55454C14.1421 6.67419 14.202 6.82269 14.202 7.00004C14.202 7.17739 14.1421 7.32589 14.0225 7.44554C13.9028 7.56519 13.7543 7.62502 13.577 7.62502ZM10.1106 10.9279C10.2175 10.7816 10.354 10.6972 10.5201 10.6747C10.6862 10.6523 10.8425 10.6945 10.9888 10.8013L12.3943 11.8574C12.5406 11.9642 12.625 12.1007 12.6475 12.2669C12.6699 12.433 12.6277 12.5892 12.5209 12.7356C12.4141 12.882 12.2776 12.9664 12.1114 12.9888C11.9453 13.0112 11.7891 12.969 11.6427 12.8622L10.2372 11.8061C10.0909 11.6993 10.0065 11.5628 9.98405 11.3967C9.96161 11.2305 10.0038 11.0743 10.1106 10.9279ZM12.3622 2.1106L10.9568 3.16671C10.8104 3.27354 10.6542 3.31574 10.488 3.29331C10.3219 3.27087 10.1854 3.18646 10.0786 3.0401C9.97176 2.89374 9.92956 2.7375 9.95199 2.57137C9.97442 2.40525 10.0588 2.26876 10.2052 2.16192L11.6106 1.10583C11.757 0.998998 11.9133 0.956796 12.0794 0.979227C12.2455 1.00166 12.382 1.08606 12.4888 1.23244C12.5957 1.3788 12.6379 1.53504 12.6154 1.70116C12.593 1.86729 12.5086 2.00377 12.3622 2.1106ZM4.05778 9.08335H1.71805C1.5033 9.08335 1.32408 9.0115 1.18039 8.86779C1.03669 8.7241 0.964844 8.54488 0.964844 8.33014V5.66994C0.964844 5.4552 1.03669 5.27599 1.18039 5.13229C1.32408 4.98858 1.5033 4.91673 1.71805 4.91673H4.05778L6.55134 2.42317C6.75114 2.22339 6.9811 2.17771 7.24124 2.28614C7.50138 2.39459 7.63145 2.5909 7.63145 2.87508V11.125C7.63145 11.4092 7.50138 11.6055 7.24124 11.7139C6.9811 11.8224 6.75114 11.7767 6.55134 11.5769L4.05778 9.08335Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default AiPlayIcon;

src/types/index.ts

@@ -314,6 +314,7 @@ export type AIEntity = {
   hasBeenRendered?: boolean
   entities?: ExtractedEntity[]
   shouldRender?: boolean
+  audio_en?: string
 }
 
 export interface ExtractedEntity {
@@ -326,3 +327,8 @@ export interface ExtractedEntitiesResponse {
   question: string
   entities: ExtractedEntity[]
 }
+
+export type AiSummaryAudioResponse = {
+  ref_id: string
+  audio_en: string
+}