34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
|
import React from "react"
|
||
|
|
import { useMessage } from "~hooks/useMessage"
|
||
|
|
import { useMessageOption } from "~hooks/useMessageOption"
|
||
|
|
import { PlaygroundMessage } from "./PlaygroundMessage"
|
||
|
|
|
||
|
|
export const PlaygroundChat = () => {
|
||
|
|
const { messages } = useMessageOption()
|
||
|
|
const divRef = React.useRef<HTMLDivElement>(null)
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (divRef.current) {
|
||
|
|
divRef.current.scrollIntoView({ behavior: "smooth" })
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return (
|
||
|
|
<div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
|
||
|
|
{/* {messages.length === 0 && <div>no message</div>} */}
|
||
|
|
{messages.length > 0 && <div className="w-full h-14 flex-shrink-0"></div>}
|
||
|
|
{messages.map((message, index) => (
|
||
|
|
<PlaygroundMessage
|
||
|
|
key={index}
|
||
|
|
isBot={message.isBot}
|
||
|
|
message={message.message}
|
||
|
|
name={message.name}
|
||
|
|
images={message.images || []}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
{messages.length > 0 && (
|
||
|
|
<div className="w-full h-32 md:h-48 flex-shrink-0"></div>
|
||
|
|
)}
|
||
|
|
<div ref={divRef} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|