Add tts UI

packages/ui/src/api/tts.js

@@ -0,0 +1,10 @@
+import client from './client'
+
+const generateVoice = (body) => client.post('/text-to-speech/generate', body)
+
+const listVoices = (params) => client.get('/text-to-speech/voices', { params })
+
+export default {
+    generateVoice,
+    listVoices
+}

packages/ui/src/assets/images/elevenlabs.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="24" rx="4" fill="#000000"/>
+  <path d="M6 8h3v8H6V8zm5-2h3v12h-3V6zm5 4h3v4h-3v-4z" fill="#ffffff"/>
+  <circle cx="7.5" cy="12" r="1" fill="#00ff88"/>
+  <circle cx="12.5" cy="12" r="1" fill="#00ff88"/>
+  <circle cx="17.5" cy="12" r="1" fill="#00ff88"/>
+</svg>

packages/ui/src/ui-component/dialog/ChatflowConfigurationDialog.jsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom'
 import { Box, Dialog, DialogContent, DialogTitle, Tabs, Tab } from '@mui/material'
 import { tabsClasses } from '@mui/material/Tabs'
 import SpeechToText from '@/ui-component/extended/SpeechToText'
+import TextToSpeech from '@/ui-component/extended/TextToSpeech'
 import Security from '@/ui-component/extended/Security'
 import ChatFeedback from '@/ui-component/extended/ChatFeedback'
 import AnalyseFlow from '@/ui-component/extended/AnalyseFlow'
@@ -30,6 +31,10 @@ const CHATFLOW_CONFIGURATION_TABS = [
         label: 'Speech to Text',
         id: 'speechToText'
     },
+    {
+        label: 'Text to Speech',
+        id: 'textToSpeech'
+    },
     {
         label: 'Chat Feedback',
         id: 'chatFeedback'
@@ -125,18 +130,19 @@ const ChatflowConfigurationDialog = ({ show, isAgentCanvas, dialogProps, onCance
                                 alignItems: 'center',
                                 mb: 1
                             }}
-                            key={index}
+                            key={item.id}
                             label={item.label}
                             {...a11yProps(index)}
                         ></Tab>
                     ))}
                 </Tabs>
                 {filteredTabs.map((item, index) => (
-                    <TabPanel key={index} value={tabValue} index={index}>
+                    <TabPanel key={item.id} value={tabValue} index={index}>
                         {item.id === 'security' && <Security dialogProps={dialogProps} />}
                         {item.id === 'conversationStarters' ? <StarterPrompts dialogProps={dialogProps} /> : null}
                         {item.id === 'followUpPrompts' ? <FollowUpPrompts dialogProps={dialogProps} /> : null}
                         {item.id === 'speechToText' ? <SpeechToText dialogProps={dialogProps} /> : null}
+                        {item.id === 'textToSpeech' ? <TextToSpeech dialogProps={dialogProps} /> : null}
                         {item.id === 'chatFeedback' ? <ChatFeedback dialogProps={dialogProps} /> : null}
                         {item.id === 'analyseChatflow' ? <AnalyseFlow dialogProps={dialogProps} /> : null}
                         {item.id === 'leads' ? <Leads dialogProps={dialogProps} /> : null}

packages/ui/src/ui-component/extended/TextToSpeech.jsx

@@ -0,0 +1,500 @@
+import { useDispatch } from 'react-redux'
+import { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions'
+
+// material-ui
+import {
+    Typography,
+    Box,
+    Button,
+    FormControl,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+    MenuItem,
+    Select,
+    CircularProgress
+} from '@mui/material'
+import { IconX, IconVolume } from '@tabler/icons-react'
+import { useTheme } from '@mui/material/styles'
+
+// Project import
+import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'
+import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
+import { SwitchInput } from '@/ui-component/switch/Switch'
+import { Input } from '@/ui-component/input/Input'
+import { StyledButton } from '@/ui-component/button/StyledButton'
+import { Dropdown } from '@/ui-component/dropdown/Dropdown'
+import openAISVG from '@/assets/images/openai.svg'
+import elevenLabsSVG from '@/assets/images/elevenlabs.svg'
+
+// store
+import useNotifier from '@/utils/useNotifier'
+
+// API
+import useApi from '@/hooks/useApi'
+import chatflowsApi from '@/api/chatflows'
+import ttsApi from '@/api/tts'
+
+const TextToSpeechType = {
+    OPENAI_TTS: 'openai',
+    ELEVEN_LABS_TTS: 'elevenlabs'
+}
+
+// Weird quirk - the key must match the name property value.
+const textToSpeechProviders = {
+    [TextToSpeechType.OPENAI_TTS]: {
+        label: 'OpenAI TTS',
+        name: TextToSpeechType.OPENAI_TTS,
+        icon: openAISVG,
+        url: 'https://platform.openai.com/docs/guides/text-to-speech',
+        inputs: [
+            {
+                label: 'Connect Credential',
+                name: 'credential',
+                type: 'credential',
+                credentialNames: ['openAIApi']
+            },
+            {
+                label: 'Voice',
+                name: 'voice',
+                type: 'options',
+                description: 'The voice to use when generating the audio',
+                options: [
+                    { label: 'Alloy', name: 'alloy' },
+                    { label: 'Echo', name: 'echo' },
+                    { label: 'Fable', name: 'fable' },
+                    { label: 'Onyx', name: 'onyx' },
+                    { label: 'Nova', name: 'nova' },
+                    { label: 'Shimmer', name: 'shimmer' }
+                ],
+                default: 'alloy',
+                optional: true
+            },
+            {
+                label: 'Model',
+                name: 'model',
+                type: 'options',
+                description: 'The TTS model to use',
+                options: [
+                    { label: 'TTS-1', name: 'tts-1' },
+                    { label: 'TTS-1 HD', name: 'tts-1-hd' }
+                ],
+                default: 'tts-1',
+                optional: true
+            }
+        ]
+    },
+    [TextToSpeechType.ELEVEN_LABS_TTS]: {
+        label: 'Eleven Labs TTS',
+        name: TextToSpeechType.ELEVEN_LABS_TTS,
+        icon: elevenLabsSVG,
+        url: 'https://elevenlabs.io/',
+        inputs: [
+            {
+                label: 'Connect Credential',
+                name: 'credential',
+                type: 'credential',
+                credentialNames: ['elevenLabsApi']
+            },
+            {
+                label: 'Voice',
+                name: 'voice',
+                type: 'voice_select',
+                description: 'The voice to use for text-to-speech',
+                default: '21m00Tcm4TlvDq8ikWAM',
+                optional: true
+            }
+        ]
+    }
+}
+
+const TextToSpeech = ({ dialogProps }) => {
+    const dispatch = useDispatch()
+
+    useNotifier()
+    const theme = useTheme()
+
+    const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+    const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+    const [textToSpeech, setTextToSpeech] = useState({})
+    const [selectedProvider, setSelectedProvider] = useState('none')
+    const [voices, setVoices] = useState([])
+    const [loadingVoices, setLoadingVoices] = useState(false)
+
+    const listVoicesApi = useApi(ttsApi.listVoices)
+
+    const onSave = async () => {
+        const textToSpeechConfig = setValue(true, selectedProvider, 'status')
+        try {
+            const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
+                textToSpeech: JSON.stringify(textToSpeechConfig)
+            })
+            if (saveResp.data) {
+                enqueueSnackbar({
+                    message: 'Text To Speech Configuration Saved',
+                    options: {
+                        key: Date.now() + Math.random(),
+                        variant: 'success',
+                        action: (key) => (
+                            <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                                <IconX />
+                            </Button>
+                        )
+                    }
+                })
+                dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
+            }
+        } catch (error) {
+            enqueueSnackbar({
+                message: `Failed to save Text To Speech Configuration: ${
+                    typeof error.response.data === 'object' ? error.response.data.message : error.response.data
+                }`,
+                options: {
+                    key: Date.now() + Math.random(),
+                    variant: 'error',
+                    persist: true,
+                    action: (key) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+        }
+    }
+
+    const setValue = (value, providerName, inputParamName) => {
+        let newVal = {}
+        if (!Object.hasOwn(textToSpeech, providerName)) {
+            newVal = { ...textToSpeech, [providerName]: {} }
+        } else {
+            newVal = { ...textToSpeech }
+        }
+
+        newVal[providerName][inputParamName] = value
+        if (inputParamName === 'status' && value === true) {
+            // ensure that the others are turned off
+            Object.keys(textToSpeechProviders).forEach((key) => {
+                const provider = textToSpeechProviders[key]
+                if (provider.name !== providerName) {
+                    newVal[provider.name] = { ...textToSpeech[provider.name], status: false }
+                }
+            })
+            if (providerName !== 'none' && newVal['none']) {
+                newVal['none'].status = false
+            }
+        }
+        setTextToSpeech(newVal)
+        return newVal
+    }
+
+    const handleProviderChange = (event) => {
+        setSelectedProvider(event.target.value)
+        setVoices([])
+        const provider = event.target.value
+        if (provider !== 'none') {
+            const credentialId = textToSpeech[provider]?.credentialId
+            if (credentialId) {
+                loadVoicesForProvider(provider, credentialId)
+            }
+        }
+    }
+
+    const loadVoicesForProvider = async (provider, credentialId) => {
+        if (provider === 'none' || !credentialId) return
+
+        setLoadingVoices(true)
+        try {
+            const params = new URLSearchParams({ provider })
+            params.append('credentialId', credentialId)
+
+            const response = await ttsApi.listVoices(params)
+
+            if (response.data) {
+                const voicesData = await response.data
+                setVoices(voicesData)
+            } else {
+                setVoices([])
+            }
+        } catch (error) {
+            console.error('Error loading voices:', error)
+            setVoices([])
+        } finally {
+            setLoadingVoices(false)
+        }
+    }
+
+    const testTTS = async () => {
+        if (selectedProvider === 'none' || !textToSpeech[selectedProvider]?.credentialId) {
+            enqueueSnackbar({
+                message: 'Please select a provider and configure credentials first',
+                options: { variant: 'warning' }
+            })
+            return
+        }
+
+        try {
+            const providerConfig = textToSpeech[selectedProvider]
+            const body = {
+                text: 'Today is a wonderful day to build something with Flowise!',
+                provider: selectedProvider,
+                credentialId: providerConfig.credentialId,
+                voice: providerConfig.voice,
+                model: providerConfig.model
+            }
+            const response = await fetch('/api/v1/text-to-speech/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-request-from': 'internal'
+                },
+                credentials: 'include',
+                body: JSON.stringify(body)
+            })
+            if (response.ok) {
+                const audioBuffer = await response.arrayBuffer()
+                const audioBlob = new Blob([audioBuffer], { type: 'audio/mpeg' })
+                const audioUrl = URL.createObjectURL(audioBlob)
+                const audio = new Audio(audioUrl)
+
+                audio
+                    .play()
+                    .then(() => {
+                        enqueueSnackbar({
+                            message: 'Test audio played successfully',
+                            options: { variant: 'success' }
+                        })
+                    })
+                    .catch((error) => {
+                        console.error('Error playing audio:', error)
+                        enqueueSnackbar({
+                            message: 'Error playing test audio',
+                            options: { variant: 'error' }
+                        })
+                    })
+
+                // Clean up URL after audio finishes
+                audio.addEventListener('ended', () => {
+                    URL.revokeObjectURL(audioUrl)
+                })
+            } else {
+                throw new Error(`TTS request failed: ${response.status}`)
+            }
+        } catch (error) {
+            console.error('Error testing TTS:', error)
+            enqueueSnackbar({
+                message: `TTS test failed: ${error.message}`,
+                options: { variant: 'error' }
+            })
+        }
+    }
+
+    useEffect(() => {
+        if (dialogProps.chatflow && dialogProps.chatflow.textToSpeech) {
+            try {
+                const textToSpeechConfig = JSON.parse(dialogProps.chatflow.textToSpeech)
+                let selectedProvider = 'none'
+                Object.keys(textToSpeechProviders).forEach((key) => {
+                    const providerConfig = textToSpeechConfig[key]
+                    if (providerConfig && providerConfig.status) {
+                        selectedProvider = key
+                    }
+                })
+                setSelectedProvider(selectedProvider)
+                setTextToSpeech(textToSpeechConfig)
+
+                // Voices will be loaded when credentials are configured
+            } catch {
+                setTextToSpeech({})
+                setSelectedProvider('none')
+            }
+        }
+
+        return () => {
+            setTextToSpeech({})
+            setSelectedProvider('none')
+            setVoices([])
+        }
+    }, [dialogProps])
+
+    return (
+        <>
+            <Box fullWidth sx={{ mb: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                <Typography>Providers</Typography>
+                <FormControl fullWidth>
+                    <Select
+                        size='small'
+                        value={selectedProvider}
+                        onChange={handleProviderChange}
+                        sx={{
+                            '& .MuiSvgIcon-root': {
+                                color: theme?.customization?.isDarkMode ? '#fff' : 'inherit'
+                            }
+                        }}
+                    >
+                        <MenuItem value='none'>None</MenuItem>
+                        {Object.values(textToSpeechProviders).map((provider) => (
+                            <MenuItem key={provider.name} value={provider.name}>
+                                {provider.label}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            </Box>
+            {selectedProvider !== 'none' && (
+                <>
+                    <ListItem sx={{ mt: 3 }} alignItems='center'>
+                        <ListItemAvatar>
+                            <div
+                                style={{
+                                    width: 50,
+                                    height: 50,
+                                    borderRadius: '50%',
+                                    backgroundColor: 'white',
+                                    flexShrink: 0,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center'
+                                }}
+                            >
+                                <img
+                                    style={{
+                                        width: '100%',
+                                        height: '100%',
+                                        padding: 10,
+                                        objectFit: 'contain'
+                                    }}
+                                    alt='TTS Provider'
+                                    src={textToSpeechProviders[selectedProvider].icon}
+                                />
+                            </div>
+                        </ListItemAvatar>
+                        <ListItemText
+                            sx={{ ml: 1 }}
+                            primary={textToSpeechProviders[selectedProvider].label}
+                            secondary={
+                                <a target='_blank' rel='noreferrer' href={textToSpeechProviders[selectedProvider].url}>
+                                    {textToSpeechProviders[selectedProvider].url}
+                                </a>
+                            }
+                        />
+                    </ListItem>
+                    {textToSpeechProviders[selectedProvider].inputs.map((inputParam) => (
+                        <Box key={`${selectedProvider}-${inputParam.name}`} sx={{ p: 2 }}>
+                            <div style={{ display: 'flex', flexDirection: 'row' }}>
+                                <Typography>
+                                    {inputParam.label}
+                                    {!inputParam.optional && <span style={{ color: 'red' }}>&nbsp;*</span>}
+                                    {inputParam.description && (
+                                        <TooltipWithParser style={{ marginLeft: 10 }} title={inputParam.description} />
+                                    )}
+                                </Typography>
+                            </div>
+                            {inputParam.type === 'credential' && (
+                                <CredentialInputHandler
+                                    key={textToSpeech[selectedProvider]?.credentialId}
+                                    data={
+                                        textToSpeech[selectedProvider]?.credentialId
+                                            ? { credential: textToSpeech[selectedProvider].credentialId }
+                                            : {}
+                                    }
+                                    inputParam={inputParam}
+                                    onSelect={(newValue) => {
+                                        setValue(newValue, selectedProvider, 'credentialId')
+                                        // Load voices when credential is updated
+                                        if (newValue && selectedProvider !== 'none') {
+                                            setTimeout(() => loadVoicesForProvider(selectedProvider, newValue), 100)
+                                        }
+                                    }}
+                                />
+                            )}
+                            {inputParam.type === 'boolean' && (
+                                <SwitchInput
+                                    onChange={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
+                                    value={
+                                        textToSpeech[selectedProvider]
+                                            ? textToSpeech[selectedProvider][inputParam.name]
+                                            : inputParam.default ?? false
+                                    }
+                                />
+                            )}
+                            {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
+                                <Input
+                                    inputParam={inputParam}
+                                    onChange={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
+                                    value={
+                                        textToSpeech[selectedProvider]
+                                            ? textToSpeech[selectedProvider][inputParam.name]
+                                            : inputParam.default ?? ''
+                                    }
+                                />
+                            )}
+                            {inputParam.type === 'options' && (
+                                <Dropdown
+                                    name={inputParam.name}
+                                    options={inputParam.options}
+                                    onSelect={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
+                                    value={
+                                        textToSpeech[selectedProvider]
+                                            ? textToSpeech[selectedProvider][inputParam.name]
+                                            : inputParam.default ?? 'choose an option'
+                                    }
+                                />
+                            )}
+                            {inputParam.type === 'voice_select' && (
+                                <Box>
+                                    {loadingVoices ? (
+                                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                            <CircularProgress size={16} />
+                                            <Typography variant='body2'>Loading voices...</Typography>
+                                        </Box>
+                                    ) : (
+                                        <Dropdown
+                                            name={inputParam.name}
+                                            options={voices.map((voice) => ({ label: voice.name, name: voice.id }))}
+                                            onSelect={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
+                                            value={
+                                                textToSpeech[selectedProvider]
+                                                    ? textToSpeech[selectedProvider][inputParam.name]
+                                                    : inputParam.default ?? 'choose a voice'
+                                            }
+                                        />
+                                    )}
+                                </Box>
+                            )}
+                        </Box>
+                    ))}
+                    {/* Test TTS Button */}
+                    <Box sx={{ p: 2 }}>
+                        <StyledButton
+                            variant='outlined'
+                            size='small'
+                            startIcon={<IconVolume />}
+                            onClick={testTTS}
+                            disabled={!textToSpeech[selectedProvider]?.credentialId}
+                        >
+                            Test Voice
+                        </StyledButton>
+                    </Box>
+                </>
+            )}
+            <StyledButton
+                style={{ marginBottom: 10, marginTop: 10 }}
+                disabled={selectedProvider !== 'none' && !textToSpeech[selectedProvider]?.credentialId}
+                variant='contained'
+                onClick={onSave}
+            >
+                Save
+            </StyledButton>
+        </>
+    )
+}
+
+TextToSpeech.propTypes = {
+    dialogProps: PropTypes.object
+}
+
+export default TextToSpeech

packages/ui/src/views/chatmessage/ChatMessage.jsx

@@ -38,7 +38,8 @@ import {
     IconSquareFilled,
     IconCheck,
     IconPaperclip,
-    IconSparkles
+    IconSparkles,
+    IconVolume
 } from '@tabler/icons-react'
 import robotPNG from '@/assets/images/robot.png'
 import userPNG from '@/assets/images/account.png'
@@ -251,6 +252,11 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
 
     const [isConfigLoading, setIsConfigLoading] = useState(true)
 
+    // TTS state
+    const [ttsLoading, setTtsLoading] = useState({})
+    const [ttsAudio, setTtsAudio] = useState({})
+    const [isTTSEnabled, setIsTTSEnabled] = useState(false)
+
     const isFileAllowedForUpload = (file) => {
         const constraints = getAllowChatFlowUploads.data
         /**
@@ -1293,9 +1299,35 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
                 }
             }
         }
+
+        // Check if TTS is configured
+        if (getChatflowConfig.data && getChatflowConfig.data.textToSpeech) {
+            try {
+                const ttsConfig =
+                    typeof getChatflowConfig.data.textToSpeech === 'string'
+                        ? JSON.parse(getChatflowConfig.data.textToSpeech)
+                        : getChatflowConfig.data.textToSpeech
+
+                let isEnabled = false
+                if (ttsConfig) {
+                    Object.keys(ttsConfig).forEach((provider) => {
+                        if (ttsConfig[provider] && ttsConfig[provider].status && ttsConfig[provider].credentialId) {
+                            isEnabled = true
+                        }
+                    })
+                }
+                setIsTTSEnabled(isEnabled)
+            } catch (error) {
+                setIsTTSEnabled(false)
+            }
+        } else {
+            setIsTTSEnabled(false)
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getChatflowConfig.data])
 
+    console.log('isTTSEnabled:', isTTSEnabled)
+
     useEffect(() => {
         if (getChatflowConfig.error) {
             setIsConfigLoading(false)
@@ -1497,9 +1529,110 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
                 return allMessages
             })
         }
+
         setIsLeadSaving(false)
     }
 
+    const handleTTSClick = async (messageId, messageText) => {
+        if (ttsLoading[messageId]) return
+
+        if (ttsAudio[messageId]) {
+            ttsAudio[messageId].pause()
+            ttsAudio[messageId].currentTime = 0
+            setTtsAudio((prev) => {
+                const newState = { ...prev }
+                delete newState[messageId]
+                return newState
+            })
+            return
+        }
+
+        setTtsLoading((prev) => ({ ...prev, [messageId]: true }))
+
+        try {
+            let ttsConfig = null
+            if (getChatflowConfig.data && getChatflowConfig.data.textToSpeech) {
+                try {
+                    ttsConfig =
+                        typeof getChatflowConfig.data.textToSpeech === 'string'
+                            ? JSON.parse(getChatflowConfig.data.textToSpeech)
+                            : getChatflowConfig.data.textToSpeech
+                } catch (error) {
+                    console.error('Error parsing TTS config:', error)
+                }
+            }
+
+            let activeProvider = null
+            let providerConfig = null
+            if (ttsConfig) {
+                Object.keys(ttsConfig).forEach((provider) => {
+                    if (ttsConfig[provider] && ttsConfig[provider].status) {
+                        activeProvider = provider
+                        providerConfig = ttsConfig[provider]
+                    }
+                })
+            }
+
+            if (!activeProvider || !providerConfig || !providerConfig.credentialId) {
+                enqueueSnackbar({
+                    message: 'Text-to-speech is not configured for this chatflow',
+                    options: { variant: 'warning' }
+                })
+                return
+            }
+
+            const response = await fetch('/api/v1/text-to-speech/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-request-from': 'internal'
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    text: messageText,
+                    provider: activeProvider,
+                    credentialId: providerConfig.credentialId,
+                    voice: providerConfig.voice,
+                    model: providerConfig.model
+                })
+            })
+
+            if (!response.ok) {
+                throw new Error(`TTS request failed: ${response.status}`)
+            }
+
+            const audioBuffer = await response.arrayBuffer()
+            const audioBlob = new Blob([audioBuffer], { type: 'audio/mpeg' })
+            const audioUrl = URL.createObjectURL(audioBlob)
+            const audio = new Audio(audioUrl)
+
+            setTtsAudio((prev) => ({ ...prev, [messageId]: audio }))
+
+            audio.addEventListener('ended', () => {
+                setTtsAudio((prev) => {
+                    const newState = { ...prev }
+                    delete newState[messageId]
+                    return newState
+                })
+                URL.revokeObjectURL(audioUrl)
+            })
+
+            await audio.play()
+        } catch (error) {
+            console.error('Error with TTS:', error)
+            enqueueSnackbar({
+                message: `TTS failed: ${error.message}`,
+                options: { variant: 'error' }
+            })
+        } finally {
+            setTtsLoading((prev) => {
+                const newState = { ...prev }
+                delete newState[messageId]
+                return newState
+            })
+        }
+    }
+
     const getInputDisabled = () => {
         return (
             loading ||
@@ -2151,7 +2284,7 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
                                                 })}
                                             </div>
                                         )}
-                                        {message.type === 'apiMessage' && message.id && chatFeedbackStatus ? (
+                                        {message.type === 'apiMessage' && message.id ? (
                                             <>
                                                 <Box
                                                     sx={{
@@ -2161,25 +2294,53 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
                                                         gap: 1
                                                     }}
                                                 >
-                                                    <CopyToClipboardButton onClick={() => copyMessageToClipboard(message.message)} />
+                                                    {isTTSEnabled && (
-                                                    {!message.feedback ||
+                                                        <IconButton
-                                                    message.feedback.rating === '' ||
+                                                            size='small'
-                                                    message.feedback.rating === 'THUMBS_UP' ? (
+                                                            onClick={() => handleTTSClick(message.id, message.message)}
-                                                        <ThumbsUpButton
+                                                            disabled={ttsLoading[message.id]}
-                                                            isDisabled={message.feedback && message.feedback.rating === 'THUMBS_UP'}
+                                                            sx={{
-                                                            rating={message.feedback ? message.feedback.rating : ''}
+                                                                backgroundColor: ttsAudio[message.id] ? 'primary.main' : 'transparent',
-                                                            onClick={() => onThumbsUpClick(message.id)}
+                                                                color: ttsAudio[message.id] ? 'white' : 'inherit',
-                                                        />
+                                                                '&:hover': {
-                                                    ) : null}
+                                                                    backgroundColor: ttsAudio[message.id] ? 'primary.dark' : 'action.hover'
-                                                    {!message.feedback ||
+                                                                }
-                                                    message.feedback.rating === '' ||
+                                                            }}
-                                                    message.feedback.rating === 'THUMBS_DOWN' ? (
+                                                        >
-                                                        <ThumbsDownButton
+                                                            {ttsLoading[message.id] ? (
-                                                            isDisabled={message.feedback && message.feedback.rating === 'THUMBS_DOWN'}
+                                                                <CircularProgress size={16} />
-                                                            rating={message.feedback ? message.feedback.rating : ''}
+                                                            ) : (
-                                                            onClick={() => onThumbsDownClick(message.id)}
+                                                                <IconVolume size={16} />
-                                                        />
+                                                            )}
-                                                    ) : null}
+                                                        </IconButton>
+                                                    )}
+                                                    {chatFeedbackStatus && (
+                                                        <>
+                                                            <CopyToClipboardButton
+                                                                onClick={() => copyMessageToClipboard(message.message)}
+                                                            />
+                                                            {!message.feedback ||
+                                                            message.feedback.rating === '' ||
+                                                            message.feedback.rating === 'THUMBS_UP' ? (
+                                                                <ThumbsUpButton
+                                                                    isDisabled={message.feedback && message.feedback.rating === 'THUMBS_UP'}
+                                                                    rating={message.feedback ? message.feedback.rating : ''}
+                                                                    onClick={() => onThumbsUpClick(message.id)}
+                                                                />
+                                                            ) : null}
+                                                            {!message.feedback ||
+                                                            message.feedback.rating === '' ||
+                                                            message.feedback.rating === 'THUMBS_DOWN' ? (
+                                                                <ThumbsDownButton
+                                                                    isDisabled={
+                                                                        message.feedback && message.feedback.rating === 'THUMBS_DOWN'
+                                                                    }
+                                                                    rating={message.feedback ? message.feedback.rating : ''}
+                                                                    onClick={() => onThumbsDownClick(message.id)}
+                                                                />
+                                                            ) : null}
+                                                        </>
+                                                    )}
                                                 </Box>
                                             </>
                                         ) : null}