'use client'; /* eslint-disable @next/next/no-img-element */ import React, { MutableRefObject, useEffect, useState } from 'react'; import { Message } from './ChatWindow'; import { cn } from '@/lib/utils'; import { BookCopy, Disc3, Share, Volume2, StopCircle } from 'lucide-react'; import Markdown from 'markdown-to-jsx'; import Copy from './MessageActions/Copy'; import Rewrite from './MessageActions/Rewrite'; import MessageSources from './MessageSources'; import SearchImages from './SearchImages'; import SearchVideos from './SearchVideos'; import { useSpeech } from 'react-text-to-speech'; const MessageBox = ({ message, messageIndex, history, loading, dividerRef, isLast, rewrite, }: { message: Message; messageIndex: number; history: Message[]; loading: boolean; dividerRef?: MutableRefObject; isLast: boolean; rewrite: (messageId: string) => void; }) => { const [parsedMessage, setParsedMessage] = useState(message.content); const [speechMessage, setSpeechMessage] = useState(message.content); useEffect(() => { if ( message.role === 'assistant' && message?.sources && message.sources.length > 0 ) { const regex = /\[(\d+)\]/g; setSpeechMessage(message.content.replace(regex, '')); return setParsedMessage( message.content.replace( regex, (_, number) => `${number}`, ), ); } setParsedMessage(message.content); }, [message.content, message.sources, message.role]); const { speechStatus, start, stop } = useSpeech({ text: speechMessage }); return (
{message.role === 'user' && (

{message.content}

)} {message.role === 'assistant' && (
{message.sources && message.sources.length > 0 && (

Sources

)}

Answer

{parsedMessage} {!loading && (
)}
)}
); }; export default MessageBox;