File size: 2,987 Bytes
a8aec61 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import Icon from '@/components/ui/icon'
import MarkdownRenderer from '@/components/ui/typography/MarkdownRenderer'
import { usePlaygroundStore } from '@/store'
import type { PlaygroundChatMessage } from '@/types/playground'
import Videos from './Multimedia/Videos'
import Images from './Multimedia/Images'
import Audios from './Multimedia/Audios'
import { memo } from 'react'
import AgentThinkingLoader from './AgentThinkingLoader'
interface MessageProps {
message: PlaygroundChatMessage
}
const AgentMessage = ({ message }: MessageProps) => {
const { streamingErrorMessage } = usePlaygroundStore()
let messageContent
if (message.streamingError) {
messageContent = (
<p className="text-destructive">
Oops! Something went wrong while streaming.{' '}
{streamingErrorMessage ? (
<>{streamingErrorMessage}</>
) : (
'Please try refreshing the page or try again later.'
)}
</p>
)
} else if (message.content) {
messageContent = (
<div className="flex w-full flex-col gap-4">
<MarkdownRenderer>{message.content}</MarkdownRenderer>
{message.videos && message.videos.length > 0 && (
<Videos videos={message.videos} />
)}
{message.images && message.images.length > 0 && (
<Images images={message.images} />
)}
{message.audio && message.audio.length > 0 && (
<Audios audio={message.audio} />
)}
</div>
)
} else if (message.response_audio) {
if (!message.response_audio.transcript) {
messageContent = (
<div className="mt-2 flex items-start">
<AgentThinkingLoader />
</div>
)
} else {
messageContent = (
<div className="flex w-full flex-col gap-4">
<MarkdownRenderer>
{message.response_audio.transcript}
</MarkdownRenderer>
{message.response_audio.content && message.response_audio && (
<Audios audio={[message.response_audio]} />
)}
</div>
)
}
} else {
messageContent = (
<div className="mt-2">
<AgentThinkingLoader />
</div>
)
}
return (
<div className="flex flex-row items-start gap-4 font-geist">
<div className="flex-shrink-0">
<Icon type="agent" size="sm" />
</div>
{messageContent}
</div>
)
}
const UserMessage = memo(({ message }: MessageProps) => {
return (
<div className="flex items-start pt-4 text-start max-md:break-words">
<div className="flex flex-row gap-x-3">
<p className="flex items-center gap-x-2 text-sm font-medium text-muted">
<Icon type="user" size="sm" />
</p>
<div className="text-md rounded-lg py-1 font-geist text-secondary">
{message.content}
</div>
</div>
</div>
)
})
AgentMessage.displayName = 'AgentMessage'
UserMessage.displayName = 'UserMessage'
export { AgentMessage, UserMessage }
|