404 lines
15 KiB
TypeScript
404 lines
15 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-03 16:58:03
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-02-06 21:11:23
|
|
*/
|
|
/**
|
|
* Conversation Page
|
|
* Public conversation interface for shared applications
|
|
* Supports conversation history, streaming responses, and memory/web search features
|
|
*/
|
|
|
|
import { type FC, useState, useEffect, useRef } from 'react'
|
|
import { useParams, useLocation } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import InfiniteScroll from 'react-infinite-scroll-component';
|
|
import { Flex, Skeleton, Form, Dropdown, type MenuProps } from 'antd'
|
|
import clsx from 'clsx'
|
|
import dayjs from 'dayjs'
|
|
|
|
import { getConversationHistory, sendConversation, getConversationDetail, getShareToken } from '@/api/application'
|
|
import type { HistoryItem, QueryParams, UploadFileListModalRef } from './types'
|
|
import Empty from '@/components/Empty'
|
|
import { formatDateTime } from '@/utils/format';
|
|
import { randomString } from '@/utils/common'
|
|
import BgImg from '@/assets/images/conversation/bg.png'
|
|
import ChatEmpty from '@/assets/images/empty/chatEmpty.png'
|
|
import Chat from '@/components/Chat'
|
|
import type { ChatItem } from '@/components/Chat/types'
|
|
import ButtonCheckbox from '@/components/ButtonCheckbox'
|
|
import MemoryFunctionIcon from '@/assets/images/conversation/memoryFunction.svg'
|
|
import OnlineIcon from '@/assets/images/conversation/online.svg'
|
|
import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
|
|
import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
|
|
import { type SSEMessage } from '@/utils/stream'
|
|
import UploadFiles from './components/FileUpload'
|
|
// import AudioRecorder from '@/components/AudioRecorder'
|
|
import { shareFileUploadUrl } from '@/api/fileStorage'
|
|
import UploadFileListModal from './components/UploadFileListModal'
|
|
|
|
/**
|
|
* Conversation component for shared applications
|
|
*/
|
|
const Conversation: FC = () => {
|
|
const { t } = useTranslation()
|
|
const { token } = useParams()
|
|
const location = useLocation()
|
|
const searchParams = new URLSearchParams(location.search)
|
|
const userId = searchParams.get('user_id')
|
|
const [loading, setLoading] = useState(false)
|
|
const [streamLoading, setStreamLoading] = useState(false)
|
|
const [message, setMessage] = useState<string>('')
|
|
const [conversation_id, setConversationId] = useState<string | null>(null)
|
|
const [historyList, setHistoryList] = useState<HistoryItem[]>([])
|
|
const [groupHistoryList, setGroupHistoryList] = useState<Record<string, HistoryItem[]>>({})
|
|
const [chatList, setChatList] = useState<ChatItem[]>([])
|
|
const [pageLoading, setPageLoading] = useState(false);
|
|
const [page, setPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [shareToken, setShareToken] = useState<string | null>(localStorage.getItem(`shareToken_${token}`))
|
|
|
|
const [form] = Form.useForm<QueryParams>()
|
|
const queryValues = Form.useWatch<QueryParams>([], form)
|
|
|
|
const uploadFileListModalRef = useRef<UploadFileListModalRef>(null)
|
|
useEffect(() => {
|
|
const shareToken = localStorage.getItem(`shareToken_${token}`)
|
|
setShareToken(shareToken)
|
|
if (shareToken && shareToken !== '') return
|
|
getShareToken(token as string, userId || randomString(12, false))
|
|
.then(res => {
|
|
const response = res as { access_token: string } || {}
|
|
localStorage.setItem(`shareToken_${token}`, response.access_token ?? '')
|
|
setShareToken(response.access_token ?? '')
|
|
})
|
|
}, [token])
|
|
|
|
useEffect(() => {
|
|
if (token && page === 1 && hasMore && historyList.length === 0 && shareToken) {
|
|
getHistory()
|
|
}
|
|
}, [token, shareToken, page, hasMore, historyList])
|
|
|
|
/** Group conversation history by date */
|
|
const groupHistoryByDate = (items: HistoryItem[]): Record<string, HistoryItem[]> => {
|
|
return items.reduce((groups: Record<string, HistoryItem[]>, item) => {
|
|
const date = formatDateTime(item.created_at, 'YYYY-MM-DD')
|
|
|
|
if (!groups[date]) {
|
|
groups[date] = [];
|
|
}
|
|
groups[date].push(item);
|
|
return groups;
|
|
}, {});
|
|
}
|
|
|
|
/** Fetch conversation history with pagination */
|
|
const getHistory = (flag: boolean = false) => {
|
|
if (!token || (pageLoading || !hasMore) && !flag) {
|
|
return
|
|
}
|
|
setPageLoading(true);
|
|
getConversationHistory(token, { page: flag ? 1 : page, pagesize: 20 })
|
|
.then(res => {
|
|
const response = res as { items: HistoryItem[], page: { hasnext: boolean; page: number; pagesize: number; total: number } }
|
|
const results = response?.items || []
|
|
let list = []
|
|
if (flag) {
|
|
setHistoryList(results);
|
|
list = [...results]
|
|
} else {
|
|
setHistoryList(historyList.concat(results));
|
|
list = [...historyList, ...results]
|
|
}
|
|
setHistoryList(list)
|
|
setGroupHistoryList(groupHistoryByDate(list))
|
|
if (page === 1 && !flag) {
|
|
setConversationId(list[0]?.id || '')
|
|
}
|
|
setPage(response.page.page + 1);
|
|
setHasMore(response.page.hasnext);
|
|
setLoading(false);
|
|
})
|
|
.finally(() => {
|
|
setPageLoading(false);
|
|
})
|
|
}
|
|
/** Switch to different conversation or start new one */
|
|
const handleChangeHistory = (id: string | null) => {
|
|
if (id !== conversation_id) {
|
|
setConversationId(id)
|
|
}
|
|
if (!id) {
|
|
setMessage('')
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
if (conversation_id) {
|
|
getConversationDetail(token as string, conversation_id)
|
|
.then(res => {
|
|
const response = res as { messages: ChatItem[] }
|
|
setChatList(response?.messages || [])
|
|
})
|
|
} else {
|
|
setChatList([])
|
|
}
|
|
}, [conversation_id])
|
|
|
|
/** Add user message to chat */
|
|
const addUserMessage = (message: string = '', files?: any[]) => {
|
|
const newUserMessage: ChatItem = {
|
|
conversation_id,
|
|
role: 'user',
|
|
content: message,
|
|
created_at: Date.now(),
|
|
files
|
|
};
|
|
setChatList(prev => [...prev, newUserMessage])
|
|
}
|
|
/** Add empty assistant message placeholder */
|
|
const addAssistantMessage = () => {
|
|
const newAssistantMessage: ChatItem = {
|
|
created_at: Date.now(),
|
|
role: 'assistant',
|
|
content: '',
|
|
}
|
|
setChatList(prev => [...prev, newAssistantMessage])
|
|
}
|
|
/** Update assistant message with streaming content */
|
|
const updateAssistantMessage = (content: string = '') => {
|
|
if (!content) return
|
|
if (streamLoading) {
|
|
setStreamLoading(false)
|
|
}
|
|
|
|
setChatList(prev => {
|
|
const lastList = [...prev]
|
|
const lastIndex = lastList.length - 1
|
|
const lastMsg = lastList[lastIndex]
|
|
if (lastMsg?.role === 'assistant') {
|
|
return [
|
|
...lastList.slice(0, lastList.length - 1),
|
|
{
|
|
...lastMsg,
|
|
content: lastMsg.content + content
|
|
}
|
|
]
|
|
}
|
|
return prev
|
|
})
|
|
}
|
|
|
|
/** Send message and handle streaming response */
|
|
const handleSend = () => {
|
|
if (!token || !shareToken) {
|
|
return
|
|
}
|
|
const { files = [], ...rest } = queryValues || {}
|
|
setLoading(true)
|
|
setStreamLoading(true)
|
|
addUserMessage(message, files)
|
|
addAssistantMessage()
|
|
|
|
let currentConversationId: string | null = null
|
|
const handleStreamMessage = (data: SSEMessage[]) => {
|
|
data.forEach((item) => {
|
|
switch(item.event) {
|
|
case 'start':
|
|
case 'node_start':
|
|
const { conversation_id: newId } = item.data as { conversation_id: string }
|
|
currentConversationId = newId
|
|
break
|
|
case 'message':
|
|
const { content, chunk, conversation_id: curId } = item.data as { content: string; chunk: string; conversation_id: string; }
|
|
updateAssistantMessage(content ?? chunk)
|
|
|
|
if (curId) {
|
|
currentConversationId = curId;
|
|
}
|
|
break
|
|
case 'end':
|
|
case 'workflow_end':
|
|
setLoading(false)
|
|
if (currentConversationId && currentConversationId !== conversation_id) {
|
|
setConversationId(currentConversationId)
|
|
}
|
|
getHistory(true)
|
|
break
|
|
}
|
|
})
|
|
};
|
|
|
|
form.setFieldValue('files', [])
|
|
sendConversation({
|
|
...rest,
|
|
message: message || '',
|
|
stream: true,
|
|
conversation_id: conversation_id || null,
|
|
files: files.map(file => {
|
|
if (file.url) {
|
|
return file
|
|
} else {
|
|
return {
|
|
type: file.type,
|
|
transfer_method: 'local_file',
|
|
upload_file_id: file.response.data.file_id
|
|
}
|
|
}
|
|
})
|
|
}, handleStreamMessage, shareToken)
|
|
.finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
const [update, setUpdate] = useState(false)
|
|
const fileChange = (file?: any) => {
|
|
form.setFieldValue('files', [...(queryValues.files || []), file])
|
|
setUpdate(prev => !prev)
|
|
}
|
|
// const handleRecordingComplete = async (file: any) => {
|
|
// console.log('file', file)
|
|
// }
|
|
|
|
const handleShowUpload: MenuProps['onClick'] = ({ key }) => {
|
|
switch(key) {
|
|
case 'define':
|
|
uploadFileListModalRef.current?.handleOpen()
|
|
break
|
|
}
|
|
}
|
|
const addFileList = (fileList?: any[]) => {
|
|
if (!fileList || fileList.length <= 0) return
|
|
form.setFieldValue('files', [...(queryValues.files || []), ...fileList])
|
|
}
|
|
const updateFileList = (fileList?: any[]) => {
|
|
form.setFieldValue('files', [...(fileList || [])])
|
|
}
|
|
|
|
return (
|
|
<Flex className="rb:w-full rb:p-[-16px]!">
|
|
<div className="rb:w-86.25 rb:h-screen rb:overflow-hidden rb:border-r rb:border-[#EAECEE] rb:p-3">
|
|
<div className="rb:group rb:flex rb:items-center rb:justify-center rb:font-regular rb:cursor-pointer rb:mb-5 rb:border rb:border-[#DFE4ED] rb:hover:border-[#155EEF] rb:hover:text-[#155EEF] rb:rounded-lg rb:py-2.5"
|
|
onClick={() => handleChangeHistory(null)}
|
|
>
|
|
<div
|
|
className="rb:w-5 rb:h-5 rb:cursor-pointer rb:mr-2 rb:bg-cover rb:bg-[url('@/assets/images/conversation/conversation.svg')] rb:group-hover:bg-[url('@/assets/images/conversation/conversation_hover.svg')]"
|
|
></div>
|
|
{t('memoryConversation.startANewConversation')}
|
|
</div>
|
|
{historyList.length > 0 &&
|
|
<div
|
|
ref={scrollRef}
|
|
id="scrollableDiv"
|
|
className="rb:overflow-y-auto rb:h-[calc(100vh-255px)]"
|
|
>
|
|
<InfiniteScroll
|
|
dataLength={historyList.length}
|
|
next={getHistory}
|
|
hasMore={hasMore}
|
|
loader={<Skeleton active />}
|
|
// endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
|
|
scrollableTarget="scrollableDiv"
|
|
>
|
|
{Object.entries(groupHistoryList).map(([date, items]) => (
|
|
<div key={date} className="rb:mt-6 rb:first:mt-0">
|
|
<div className="rb:leading-5 rb:text-[#5B6167] rb:mb-2 rb:pl-1 rb:font-regular">{date.replace(/\u200e|\u200f/g, '')}</div>
|
|
{items.map(item => (
|
|
<div key={item.updated_at} className="rb:mb-3">
|
|
<div className={clsx("rb:p-[8px_13px] rb:rounded-lg rb:leading-5 rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
|
|
'rb:bg-[#FFFFFF] rb:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.15)] rb:font-medium rb:hover:bg-[#FFFFFF]!': item.id === conversation_id,
|
|
})}
|
|
onClick={() => handleChangeHistory(item.id)}
|
|
>
|
|
{item.title}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</InfiniteScroll>
|
|
</div>
|
|
}
|
|
<img src={BgImg} className="rb:absolute rb:bottom-0 rb:left-0 rb:w-86.25" />
|
|
</div>
|
|
|
|
<div className="rb:relative rb:h-screen rb:px-4 rb:flex-[1_1_auto]">
|
|
<div className='rb:w-190 rb:h-screen rb:mx-auto rb:pt-10'>
|
|
<Chat
|
|
empty={<Empty url={ChatEmpty} className="rb:h-full" size={[320,180]} title={t('memoryConversation.chatEmpty')} subTitle={t('memoryConversation.emptyDesc')} />}
|
|
contentClassName="rb:h-[calc(100%-180px)]"
|
|
data={chatList}
|
|
streamLoading={streamLoading}
|
|
loading={loading}
|
|
onChange={setMessage}
|
|
onSend={handleSend}
|
|
labelFormat={(item) => dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
|
|
fileList={queryValues?.files || []}
|
|
fileChange={updateFileList}
|
|
>
|
|
<Form form={form} initialValues={{ memory: false, web_search: false}}>
|
|
<Flex justify="space-between" className="rb:flex-1">
|
|
<Flex gap={8} align="center">
|
|
<Form.Item name="files" noStyle>
|
|
<Dropdown
|
|
menu={{
|
|
items: [
|
|
{ key: 'define', label: t('memoryConversation.addRemoteFile') },
|
|
{
|
|
key: 'upload', label: (
|
|
<UploadFiles
|
|
action={shareFileUploadUrl}
|
|
fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']}
|
|
onChange={fileChange}
|
|
fileList={[]}
|
|
update={update}
|
|
/>
|
|
)
|
|
},
|
|
],
|
|
onClick: handleShowUpload
|
|
}}
|
|
>
|
|
<div
|
|
className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
|
|
></div>
|
|
</Dropdown>
|
|
</Form.Item>
|
|
<Form.Item name="web_search" valuePropName="checked" className="rb:mb-0!">
|
|
<ButtonCheckbox
|
|
icon={OnlineIcon}
|
|
checkedIcon={OnlineCheckedIcon}
|
|
>
|
|
{t(`memoryConversation.web_search`)}
|
|
</ButtonCheckbox>
|
|
</Form.Item>
|
|
<Form.Item name="memory" valuePropName="checked" className="rb:mb-0!">
|
|
<ButtonCheckbox
|
|
icon={MemoryFunctionIcon}
|
|
checkedIcon={MemoryFunctionCheckedIcon}
|
|
>
|
|
{t(`memoryConversation.memory`)}
|
|
</ButtonCheckbox>
|
|
</Form.Item>
|
|
</Flex>
|
|
{/* <Flex align="center">
|
|
<AudioRecorder onRecordingComplete={handleRecordingComplete} />
|
|
<Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
|
|
</Flex> */}
|
|
</Flex>
|
|
</Form>
|
|
</Chat>
|
|
</div>
|
|
</div>
|
|
|
|
<UploadFileListModal
|
|
ref={uploadFileListModalRef}
|
|
refresh={addFileList}
|
|
/>
|
|
</Flex>
|
|
)
|
|
}
|
|
export default Conversation |