File size: 1,986 Bytes
87337b1 |
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 |
import * as React from "react"
import {
useAppDispatch,
useAutoScroll,
LANGUAGE_OPTIONS,
useAppSelector,
GRAPH_OPTIONS,
isRagGraph,
} from "@/common"
import { Bot, Brain, MessageCircleQuestion } from "lucide-react"
import { EMessageDataType, EMessageType, type IChatItem } from "@/types"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { cn } from "@/lib/utils"
export default function MessageList(props: { className?: string }) {
const { className } = props
const chatItems = useAppSelector((state) => state.global.chatItems)
const containerRef = React.useRef<HTMLDivElement>(null)
useAutoScroll(containerRef)
return (
<div
ref={containerRef}
className={cn("flex-grow space-y-2 overflow-y-auto p-4", className)}
>
{chatItems.map((item, index) => {
return <MessageItem data={item} key={item.time} />
})}
</div>
)
}
export function MessageItem(props: { data: IChatItem }) {
const { data } = props
return (
<>
<div
className={cn("flex items-start gap-2", {
"flex-row-reverse": data.type === EMessageType.USER,
})}
>
{data.type === EMessageType.AGENT ? data.data_type === EMessageDataType.REASON ? (
<Avatar>
<AvatarFallback>
<Brain size={20} />
</AvatarFallback>
</Avatar>
) : (
<Avatar>
<AvatarFallback>
<Bot />
</AvatarFallback>
</Avatar>
) : null}
<div className="max-w-[80%] rounded-lg bg-secondary p-2 text-secondary-foreground">
{data.data_type === EMessageDataType.IMAGE ? (
<img src={data.text} alt="chat" className="w-full" />
) : (
<p className={data.data_type === EMessageDataType.REASON ? cn(
"text-xs",
"text-zinc-500",
) : ""}>{data.text}</p>
)}
</div>
</div>
</>
)
}
|