56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { useRef, useEffect, useContext } from "react";
|
||
import { RealtimeClientContext } from "../Provider/RealtimeClientProvider";
|
||
import ReactMarkdown from 'react-markdown'
|
||
import gfm from 'remark-gfm'
|
||
import { RoleType } from "@coze/api";
|
||
|
||
export default function RoomConversation() {
|
||
const { messageList } = useContext(RealtimeClientContext);
|
||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 自动滚动到最新消息
|
||
const scrollToBottom = () => {
|
||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||
};
|
||
|
||
useEffect(() => {
|
||
scrollToBottom();
|
||
}, [messageList]);
|
||
|
||
return (
|
||
<div className="flex-1 flex flex-col overflow-y-auto">
|
||
<div className="w-full min-h-[120px] h-[120px]">
|
||
<div className="relative h-full">
|
||
<img src="/icons/hello.gif" alt="" className="absolute top-0 h-[97px] left-[50%] translate-x-[-50%]"/>
|
||
<img src="/icons/conversation-bg.png" alt="background" className='w-[222px] h-[49px] absolute bottom-0 left-[50%] translate-x-[-50%]'/>
|
||
<div className="text-black text-[14px] absolute bottom-[22px] left-[50%] translate-x-[-50%] z-[10]">Hey，我是您的六纬AI填报师</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||
{messageList.map((message: any, index: number) => (
|
||
<div
|
||
key={index}
|
||
className={`flex ${
|
||
message.role === RoleType.Assistant
|
||
? "justify-start"
|
||
: "justify-end"
|
||
}`}
|
||
>
|
||
<div
|
||
className={`max-w-3/4 p-3 rounded-lg ${
|
||
message.role === RoleType.Assistant
|
||
? "bg-white text-black rounded-tl-none"
|
||
: "bg-blue-500 text-white rounded-tr-none"
|
||
}`}
|
||
>
|
||
<ReactMarkdown remarkPlugins={[gfm]}>{message.content}</ReactMarkdown>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
<div ref={messagesEndRef} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|