Merge pull request #284 from l3vels/feat/voice-on-message

Feat/voice on message

apps/ui/src/@types/index.d.ts

@@ -69,6 +69,7 @@ declare module '@l3-lib/ui-core/dist/icons/Discord'
 declare module '@l3-lib/ui-core/dist/icons/CloseOutline'
 declare module '@l3-lib/ui-core/dist/icons/PlayOutline'
 declare module '@l3-lib/ui-core/dist/icons/PauseOutline'
+declare module '@l3-lib/ui-core/dist/icons/Pause'
 declare module '@l3-lib/ui-core/dist/icons/Persona'
 declare module '@l3-lib/ui-core/dist/icons/Points'
 declare module '@l3-lib/ui-core/dist/icons/Properties'

apps/ui/src/components/PlayAudioButton/PlayAudioButton.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef, useState } from 'react'
+
+import Button from '@l3-lib/ui-core/dist/Button'
+import Play from '@l3-lib/ui-core/dist/icons/PlayOutline'
+import Pause from '@l3-lib/ui-core/dist/icons/Pause'
+import styled from 'styled-components'
+import { t } from 'i18next'
+
+const PlayAudioButton = ({ audioUrl }: { audioUrl: string }) => {
+  const audioRef = useRef(null as any)
+
+  const playAudio = () => {
+    if (audioRef.current) {
+      audioRef.current.play()
+    }
+  }
+
+  const pauseAudio = () => {
+    if (audioRef.current) {
+      audioRef.current.pause()
+    }
+  }
+
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.onplaying = () => {
+        setIsPlaying(true)
+      }
+      audioRef.current.onpause = () => {
+        setIsPlaying(false)
+      }
+    }
+  }, [])
+
+  return (
+    <StyledRoot>
+      <>
+        {isPlaying ? (
+          <Button onClick={pauseAudio} size={Button.sizes.XS} kind={Button.kinds.PRIMARY}>
+            <StyledButtonTextWrapper>
+              <span>{`${t('pause-voice')}`}</span> <Pause size={20} />
+            </StyledButtonTextWrapper>
+          </Button>
+        ) : (
+          <Button onClick={playAudio} size={Button.sizes.XS} kind={Button.kinds.PRIMARY}>
+            <StyledButtonTextWrapper>
+              <span>{`${t('play-voice')}`}</span> <Play size={15} />
+            </StyledButtonTextWrapper>
+          </Button>
+        )}
+      </>
+      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+      <StyledAudio ref={audioRef} controls={false}>
+        <source src={audioUrl} type='audio/mpeg' />
+        Your browser does not support the audio element.
+      </StyledAudio>
+    </StyledRoot>
+  )
+}
+
+export default PlayAudioButton
+
+const StyledRoot = styled.div`
+  min-height: 24px;
+  max-height: 24px;
+  overflow: hidden;
+`
+
+const StyledButtonTextWrapper = styled.div`
+  min-width: 60px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+const StyledAudio = styled.audio`
+  display: none;
+`

apps/ui/src/components/PlayAudioButton/index.tsx

@@ -0,0 +1 @@
+export { default } from './PlayAudioButton'

apps/ui/src/gql/chat/userChatMessages.gql

@@ -17,5 +17,6 @@ query chatMessages($agent_id: String!, $team_id: String!, $chat_id: String!) @ap
     sender_user
     sender_name
     run_id
+    audio_url
   }
 }

apps/ui/src/i18n/locales/en.json

@@ -198,6 +198,8 @@
   "no-text": "No Text",
   "note": "Note",
   "or": "OR",
+  "play-voice": "Voice",
+  "pause-voice": "Pause",
   "payload": "Payload",
   "password-must-contain": "Password must contain:",
   "password-successfully-updated": "Password successfully updated",

apps/ui/src/modals/AIChatModal/components/ChatMessageList/ChatMessageListV2.tsx

@@ -67,6 +67,7 @@ const ChatMessageListV2 = ({
       sender_user: chat?.sender_user,
       sender_name: chat?.sender_name,
       run_id: chat?.run_id,
+      voice: chat?.audio_url,
     }
   })
 
@@ -185,6 +186,7 @@ const ChatMessageListV2 = ({
                   messageDate={chat.date}
                   messageText={chat.message}
                   runId={chat.run_id}
+                  voice={chat.voice}
                   onReplyClick={() => {
                     setReply({
                       isReply: true,
@@ -219,6 +221,7 @@ const ChatMessageListV2 = ({
                   isNewMessage={initialChat.length - 1 === index && isNewMessage}
                   setIsNewMessage={setIsNewMessage}
                   runId={chat.run_id}
+                  voice={chat.voice}
                   onReplyClick={
                     chat.isGreeting
                       ? undefined

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/AiMessage.tsx

@@ -23,6 +23,7 @@ import TypographyPrimary from 'components/Typography/Primary'
 import TypographyTertiary from 'components/Typography/Tertiary'
 import { useModal } from 'hooks'
 import { RUN_LOGS_MODAL_NAME } from 'modals/RunLogsModal'
+import PlayAudioButton from 'components/PlayAudioButton'
 
 type AiMessageProps = {
   agentName?: string
@@ -36,6 +37,7 @@ type AiMessageProps = {
   runId: string
   setIsNewMessage: (state: boolean) => void
   onReplyClick?: () => void
+  voice?: string
 }
 
 const AiMessage = ({
@@ -49,6 +51,7 @@ const AiMessage = ({
   runId,
   setIsNewMessage,
   onReplyClick,
+  voice,
 }: AiMessageProps) => {
   function isMarkdownTable(markdownString: string) {
     const tableRegex = /(?<=(\r?\n){2}|^)([^\r\n]*\|[^\r\n]*(\r?\n)?)+(?=(\r?\n){2}|$)/
@@ -106,6 +109,7 @@ const AiMessage = ({
                 children={thoughts?.length ? thoughts[thoughts.length - 1].result : messageText}
               />
             )}
+            {voice && <PlayAudioButton audioUrl={voice} />}
           </StyledMessageText>
         </StyledMainContent>
       </StyledMessageWrapper>

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx

@@ -15,6 +15,7 @@ import TypographyTertiary from 'components/Typography/Tertiary'
 import AiMessageMarkdown from './AiMessageMarkdown'
 import { RUN_LOGS_MODAL_NAME } from 'modals/RunLogsModal'
 import { useModal } from 'hooks'
+import PlayAudioButton from 'components/PlayAudioButton'
 
 type HumanMessageProps = {
   avatarImg: string
@@ -24,6 +25,7 @@ type HumanMessageProps = {
   userName: string
   runId: string
   onReplyClick?: () => void
+  voice?: string
 }
 
 const HumanMessage = ({
@@ -34,6 +36,7 @@ const HumanMessage = ({
   userName,
   runId,
   onReplyClick,
+  voice,
 }: HumanMessageProps) => {
   const { wordArray, handleFileClick, fileUrlMatch, fileName } = useHumanMessage({
     userId,
@@ -80,6 +83,7 @@ const HumanMessage = ({
 
             {/* <HumanMessageText textArray={wordArray} /> */}
             <AiMessageMarkdown children={messageText} />
+            {voice && <PlayAudioButton audioUrl={voice} />}
           </StyledMessageText>
         </StyledMainContent>
       </StyledMessageWrapper>