106 lines
4.3 KiB
TypeScript
106 lines
4.3 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";
|
||
import { Loader } from 'lucide-react';
|
||
|
||
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%] object-contain"
|
||
/>
|
||
<div className="text-black text-[14px] absolute bottom-[25px] left-[50%] translate-x-[-50%] z-[10] pt-[3px]">
|
||
<img
|
||
src="/icons/conversation-bg.png"
|
||
alt="background"
|
||
className="w-[252px] h-[59px] object-contain absolute top-[-50%] z-[-1] left-[50%] translate-x-[-50%] max-w-[unset]"
|
||
/>
|
||
Hey，我是您的六纬AI填报师
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="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"
|
||
}`}
|
||
>
|
||
{typeof message.fileParseStatus === "undefined" && typeof message.fileInfo === 'undefined' ? (
|
||
<ReactMarkdown remarkPlugins={[gfm]}>
|
||
{message.content}
|
||
</ReactMarkdown>
|
||
) : (
|
||
<div className="flex items-center justify-center px-[4px] py-[2px]">
|
||
<img
|
||
src="/icons/wish-list-icon.png"
|
||
alt="icon"
|
||
className="w-[48px] h-[48px] object-contain"
|
||
/>
|
||
<div className="flex flex-col items-start ml-[10px]">
|
||
<div className="flex items-center">
|
||
<span className="text-[15px] text-[#303030] mr-[8px] leading-[1]">
|
||
{message?.fileInfo?.tableName}
|
||
</span>
|
||
<div className="bg-[#F4F6FA] rounded-[4px] w-[48px] h-[16px] px-[4px] py-[2px] text-[10px]">
|
||
{message?.fileInfo?.type}
|
||
</div>
|
||
</div>
|
||
<div className="text-[12px] text-[#303030] mt-[6px] flex items-center">
|
||
<span className="mr-[10px]">
|
||
{message?.fileInfo?.provinceName}·{message?.fileInfo?.score}
|
||
</span>
|
||
<span>
|
||
{message?.fileInfo?.subjectClaim?.split(",").join("/")}
|
||
</span>
|
||
{
|
||
message.fileParseStatus < 2 && (
|
||
<Loader className="w-[12px] h-[12px] animate-spin ml-[6px]" />
|
||
)
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
<div ref={messagesEndRef} />
|
||
</div>
|
||
<div className="text-[12px] text-[#999] font-[400] text-center mt-auto mb-[7px]">AI也会犯错，请考虑核实重要信息。</div>
|
||
<div className="mx-[8px] rounded-full bg-[#ffeede] py-[7px] pl-[18px] pr-[3px] flex items-center justify-between">
|
||
<span className="text-[#FA8E23] text-[12px]">您的剩余时间不足3分钟，请续费畅聊生涯~</span>
|
||
<button className="rounded-full bg-[#FA8E23] py-[6px] px-[13px] text-[13px] text-white font-[500]">立即续费</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|