Files
MemoryBear/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx
2026-04-10 16:33:27 +08:00

69 lines
2.1 KiB
TypeScript

/*
* @Author: ZhaoYing
* @Date: 2026-02-03 18:34:04
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-10 16:32:52
*/
import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Divider, Flex } from 'antd'
import clsx from 'clsx'
import RbCard from '@/components/RbCard/Card'
import PageScrollList from '@/components/PageScrollList'
import Markdown from '@/components/Markdown'
import { getRagContentUrl } from '@/api/memory'
interface DataItem {
role: 'user' | 'assistant';
content: string;
}
const ConversationMemory: FC = () => {
const { t } = useTranslation()
const { id } = useParams()
return (
<RbCard
title={<span className="rb:font-[MiSans-Bold] rb:font-bold">{t('userMemory.conversationMemory')}</span>}
headerType="borderless"
headerClassName="rb:min-h-[54px]! rb:pt-0! rb:mb-0!"
bodyClassName="rb:p-4! rb:pt-0! rb:pb-1! rb:h-[calc(100%-54px)]!"
className="rb:h-full!"
>
<PageScrollList<DataItem>
url={getRagContentUrl}
query={{ end_user_id: id }}
column={1}
gutter={0}
renderItem={(item, index) => (
<div>
{index !== 0 && <Divider className="rb:mt-1! rb:mb-3! rb:ml-11!" />}
<Flex
align="start"
gap={12}
>
<div className={clsx("rb:size-8 rb:bg-cover", {
'rb:bg-[url(@/assets/images/conversation/user.png)]': item.role === 'user',
'rb:bg-[url(@/assets/images/conversation/ai.png)]': item.role === 'assistant',
})}></div>
<div
className="rb:flex-1"
>
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5 rb:mb-0.5">
{item.role === 'assistant' ? t('userMemory.assistant') : t('userMemory.user')}
</div>
<Markdown content={item.content} />
</div>
</Flex>
</div>
)}
className="rb:h-full!"
/>
</RbCard>
)
}
export default ConversationMemory