adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): chat ui upgrade

Browse Source
This commit is contained in:
zhaoying
2026-03-20 15:48:58 +08:00
parent b1b53f6b1d
commit 0775fad5f0
27 changed files with 495 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/views/ApplicationConfig/Cluster.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:33
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-19 21:03:01
* @Last Modified time: 2026-03-20 15:16:25
*/
import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
@@ -197,7 +197,7 @@ const Cluster = forwardRef<ClusterRef, { onFeaturesLoad?: (features: FeaturesCon
return (
<>
{loading && <Spin fullscreen></Spin>}
<Row className="rb:h-[calc(100vh-88px)]" gutter={12}>
<Row className="rb:h-[calc(100vh-89px)]" gutter={12}>
<Col span={12} className="rb:h-full rb:overflow-x-auto rb:border-r rb:border-[#DFE4ED]">
<Form form={form} layout="vertical">
<Flex gap={16} vertical>

24
web/src/views/ApplicationConfig/components/AiPromptModal.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:44
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-07 17:12:25
* @Last Modified time: 2026-03-20 13:53:05
*/
/**
* AI Prompt Assistant Modal
@@ -91,7 +91,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
};
/** Send user message and get AI response */
const handleSend = () => {
if (!promptSession) return
if (!promptSession || loading || !values.message || values.message.trim() == '') return
if (!values.model_id) {
message.warning(t('common.selectPlaceholder', { title: t(`${source}.model`) }))
return
@@ -243,12 +243,20 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
onBlur={handleBlur}
/>
</Form.Item>
{loading
? <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/loading.svg')]"></div>
: !values || !values?.message || values?.message?.trim() === ''
? <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/sendDisabled.svg')]"></div>
: <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/send.svg')]" onClick={handleSend}></div>
}
<Flex align="center" justify="center"
className={clsx('rb:size-7 rb:rounded-full rb:shadow-[0px 2px 12px 0px rgba(23,23,25,0.1)]', {
'rb:cursor-not-allowed rb:bg-[#F6F6F6]': loading || !values || !values?.message || values?.message?.trim() === '',
'rb:cursor-pointer rb:bg-[#171719]': !loading && !(!values || !values?.message || values?.message?.trim() === '')
})}
onClick={handleSend}
>
<div className={clsx("rb:size-4 rb:bg-cover", {
"rb:bg-[url('@/assets/images/conversation/loading.svg')]": loading,
"rb:bg-[url('@/assets/images/conversation/sendDisabled.svg')]": !loading && (!values || !values?.message || values?.message?.trim() === ''),
"rb:bg-[url('@/assets/images/conversation/send.svg')]": !loading && !(!values || !values?.message || values?.message?.trim() === '')
})}></div>
</Flex>
</Flex>
</div>

48
web/src/views/ApplicationConfig/components/Chat.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:39
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-20 11:38:45
* @Last Modified time: 2026-03-20 15:40:44
*/
/**
* Chat debugging component for application testing
@@ -14,8 +14,7 @@ import { type FC, useEffect, useState, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom'
import clsx from 'clsx'
import { App, Flex } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import { App, Flex, Tooltip } from 'antd';
import ChatIcon from '@/assets/images/application/chat.png'
import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.png'
@@ -84,7 +83,7 @@ const Chat: FC<ChatProps> = ({
setIsCluster(source === 'multi_agent')
toolbarRef.current?.setFiles([])
setMessage(undefined)
}, [source])
}, [source, toolbarRef.current])
/** Add user message to all chat lists */
const addUserMessage = (message: string, files: any[]) => {
@@ -428,7 +427,7 @@ const Chat: FC<ChatProps> = ({
updateChatList(chatList.filter((_, voIndex) => voIndex !== index))
}
const isHasLabel = useMemo(() => chatList.some(item => item.label), [chatList])
const isNeedVariableConfig = useMemo(() => chatVariables?.some(vo => vo.required && !vo.value), [chatVariables])
return (
<Flex vertical className="rb:relative rb:h-full">
{chatList.length === 0
@@ -461,9 +460,11 @@ const Chat: FC<ChatProps> = ({
<ChatContent
classNames={{
'rb:mb-3 rb:mt-5': isHasLabel,
'rb:mb-3': !isHasLabel,
'rb:h-[calc(100vh-292px)]': isCluster,
'rb:h-[calc(100vh-353px)]': !isCluster,
'rb:mb-0!': !isHasLabel,
'rb:h-[calc(100vh-297px)]': isCluster && (!fileList || fileList.length === 0),
'rb:h-[calc(100vh-365px)]': !isCluster && (!fileList || fileList.length === 0),
'rb:h-[calc(100vh-362px)]': isCluster && fileList?.length > 0,
'rb:h-[calc(100vh-433px)]': !isCluster && fileList?.length > 0,
"rb:pr-4": index !== chatList.length - 1 && chatList.length > 1,
"rb:pl-4": index !== 0 && chatList.length > 1,
}}
@@ -492,10 +493,10 @@ const Chat: FC<ChatProps> = ({
</Flex>
))}
</div>
<div className="rb:relative rb:flex rb:items-center rb:gap-2.5 rb:mt-4 rb:mb-1">
<div className="rb:relative rb:flex rb:items-center rb:gap-2.5 rb:mt-4">
<ChatInput
message={message}
className="rb:relative!"
className="rb:relative! rb:bottom-0!"
loading={loading}
fileChange={(list) => {
setFileList(list || [])
@@ -509,19 +510,20 @@ const Chat: FC<ChatProps> = ({
ref={toolbarRef}
features={features}
onFilesChange={setFileList}
extra={
chatVariables && chatVariables.length > 0 ? (
<div
className={clsx('rb:flex rb:items-center rb:border rb:rounded-lg rb:px-2 rb:text-[12px] rb:h-6 rb:cursor-pointer rb:hover:bg-[#F0F3F8] rb:text-[#212332]', {
'rb:border-[#FF5D34] rb:text-[#FF5D34]': chatVariables.some(vo => vo.required && !vo.value),
'rb:border-[#DFE4ED]': !chatVariables.some(vo => vo.required && !vo.value),
})}
onClick={handleEditVariables}
>
<SettingOutlined className="rb:mr-1" />
{t('memoryConversation.variableConfig')}
</div>
) : null
leftExtra={
chatVariables && chatVariables.length > 0 ?(
<Tooltip title={t('memoryConversation.variableConfig')}>
<Flex justify="center" align="center"
className={clsx("rb:size-7 rb:border rb:cursor-pointer rb:hover:bg-[#F6F6F6] rb:rounded-full rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]", {
'rb:border-[#FF5D34]': isNeedVariableConfig,
'rb:border-[#EBEBEB]': !isNeedVariableConfig,
})}
onClick={handleEditVariables}
>
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/conversation/variables.svg')]" />
</Flex>
</Tooltip>
): null
}
/>
</ChatInput>

69
web/src/views/Conversation/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:58:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-19 21:32:05
* @Last Modified time: 2026-03-20 15:38:36
*/
/**
* Conversation Page
@@ -14,7 +14,7 @@ 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, App } from 'antd'
import { Flex, Skeleton, App, Tooltip } from 'antd'
import clsx from 'clsx'
import dayjs from 'dayjs'
@@ -26,11 +26,6 @@ import { randomString } from '@/utils/common'
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 { shareFileUploadUrlWithoutApiPrefix } from '@/api/fileStorage'
import ChatToolbar, { type ChatToolbarRef } from '@/components/Chat/ChatToolbar'
@@ -284,8 +279,9 @@ const Conversation: FC = () => {
})
}
const handleChangeMemory = (value: boolean) => {
const handleChangeMemory = () => {
if (config.app_type === 'workflow') return;
let value = !memory
modal.confirm({
title: value ? t('memoryConversation.memoryTipTitle') : t('memoryConversation.memoryCancelTipTitle'),
okText: t('common.confirm'),
@@ -354,10 +350,10 @@ const Conversation: FC = () => {
</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'>
<div className='rb:w-190 rb:h-screen rb:mx-auto rb:pt-10 rb:pb-3'>
<Chat
empty={<Empty url={ChatEmpty} className="rb:h-full" size={[320,180]} title={t('memoryConversation.chatEmpty')} subTitle={t('memoryConversation.emptyDesc')} />}
contentClassName={!fileList.length ? "rb:h-[calc(100%-144px)]" : "rb:h-[calc(100%-208px)]"}
contentClassName={!fileList.length ? "rb:h-[calc(100%-144px)] rb:w-full" : "rb:h-[calc(100%-208px)] rb:w-full"}
data={chatList}
streamLoading={streamLoading}
loading={loading}
@@ -381,30 +377,43 @@ const Conversation: FC = () => {
Authorization: `Bearer ${shareToken || ''}`,
}
}}
extra={
<>
rightExtra={
<Flex align="center" justify="end" gap={8}>
{features?.web_search?.enabled &&
<ButtonCheckbox
icon={OnlineIcon}
checkedIcon={OnlineCheckedIcon}
checked={webSearch}
onChange={setWebSearch}
>
{t('memoryConversation.web_search')}
</ButtonCheckbox>
<Tooltip title={t('memoryConversation.web_search')}>
<Flex justify="center" align="center"
className={clsx("rb:size-7 rb:border rb:cursor-pointer rb:hover:bg-[#F6F6F6] rb:rounded-full rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]", {
'rb:bg-[rgba(21,94,239,0.06)] rb:border-[rgba(21,94,239,0.25)]': webSearch,
'rb:border-[#EBEBEB]': !webSearch,
})}
onClick={() => setWebSearch(prev => !prev)}
>
<div className={clsx("rb:size-4 rb:bg-cover", {
"rb:bg-[url('@/assets/images/conversation/online.svg')]": !webSearch,
"rb:bg-[url('@/assets/images/conversation/onlineChecked.svg')]": webSearch
})} />
</Flex>
</Tooltip>
}
{isHasMemory &&
<ButtonCheckbox
icon={MemoryFunctionIcon}
checkedIcon={MemoryFunctionCheckedIcon}
checked={memory}
disabled={config.app_type === 'workflow'}
onChange={handleChangeMemory}
>
{t('memoryConversation.memory')}
</ButtonCheckbox>
<Tooltip title={t('memoryConversation.memory')}>
<Flex justify="center" align="center"
className={clsx("rb:size-7 rb:border rb:hover:bg-[#F6F6F6] rb:rounded-full rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]", {
'rb:bg-[rgba(21,94,239,0.06)] rb:border-[rgba(21,94,239,0.25)]': memory,
'rb:border-[#EBEBEB]': !memory,
'rb:cursor-pointer': config.app_type !== 'workflow',
'rb:cursor-not-allowed rb:opacity-65': config.app_type === 'workflow',
})}
onClick={handleChangeMemory}
>
<div className={clsx("rb:size-4 rb:bg-cover", {
"rb:bg-[url('@/assets/images/conversation/memoryFunction.svg')]": !memory,
"rb:bg-[url('@/assets/images/conversation/memoryFunctionChecked.svg')]": memory
})} />
</Flex>
</Tooltip>
}
</>
</Flex>
}
/>
</Chat>

23
web/src/views/Prompt/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 17:44:15
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-07 17:15:05
* @Last Modified time: 2026-03-20 13:52:09
*/
/**
* Prompt Editor Component
@@ -72,7 +72,7 @@ const Prompt: FC = () => {
/** Send message to AI for prompt optimization */
const handleSend = () => {
if (!promptSession) return
if (!promptSession || loading || !values.message || values.message.trim() == '') return
if (!values.model_id) {
message.warning(t('common.selectPlaceholder', { title: t('prompt.model') }))
return
@@ -216,12 +216,19 @@ const Prompt: FC = () => {
onBlur={handleBlur}
/>
</Form.Item>
{loading
? <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/loading.svg')]"></div>
: !values || !values?.message || values?.message?.trim() === ''
? <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/sendDisabled.svg')]"></div>
: <div className="rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/send.svg')]" onClick={handleSend}></div>
}
<Flex align="center" justify="center"
className={clsx('rb:size-7 rb:rounded-full rb:shadow-[0px 2px 12px 0px rgba(23,23,25,0.1)]', {
'rb:cursor-not-allowed rb:bg-[#F6F6F6]': loading || !values || !values?.message || values?.message?.trim() === '',
'rb:cursor-pointer rb:bg-[#171719]': !loading && !(!values || !values?.message || values?.message?.trim() === '')
})}
onClick={handleSend}
>
<div className={clsx("rb:size-4 rb:bg-cover", {
"rb:bg-[url('@/assets/images/conversation/loading.svg')]": loading,
"rb:bg-[url('@/assets/images/conversation/sendDisabled.svg')]": !loading && (!values || !values?.message || values?.message?.trim() === ''),
"rb:bg-[url('@/assets/images/conversation/send.svg')]": !loading && !(!values || !values?.message || values?.message?.trim() === '')
})}></div>
</Flex>
</Flex>
</RbCard>

2
web/src/views/UserMemoryDetail/components/CommunityNetwork.tsx
View File

@@ -66,7 +66,7 @@ const CommunityNetwork: FC<{ onSelectCommunity?: (node: RawCommunityNode) => voi
if (loading) {
return <Flex align="center" justify="center" className="rb:w-full rb:h-full">
<Spin tip={t('userMemory.communityLoadingTip')} size="large">
<Spin tip={t('userMemory.communityLoadingTip')} size="large" className="rb:text-[#5B6167]!">
<div className="rb:w-64 rb:h-64" />
</Spin>
</Flex>

45
web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 18:32:00
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-20 11:45:16
* @Last Modified time: 2026-03-20 12:14:43
*/
/**
* Relationship Network Component
@@ -13,8 +13,9 @@
import React, { type FC, useEffect, useState, useCallback, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams, useNavigate } from 'react-router-dom'
import { Space, Tabs, Flex, Divider } from 'antd'
import { Space, Flex, Divider, type SegmentedProps } from 'antd'
import dayjs from 'dayjs'
import clsx from 'clsx'
import RbCard from '@/components/RbCard/Card'
import type { GraphData, StatementNodeProperties, ExtractedEntityNodeProperties } from '../types'
@@ -25,6 +26,7 @@ import {
import Tag from '@/components/Tag'
import GraphNetworkChart, { type Node, type Edge } from '@/components/Charts/GraphNetworkChart'
import CommunityNetwork from './CommunityNetwork'
import PageTabs from '@/components/PageTabs'
const RelationshipNetwork: FC = () => {
const { t } = useTranslation()
@@ -35,7 +37,7 @@ const RelationshipNetwork: FC = () => {
const [selectedNode, setSelectedNode] = useState<Node | RawCommunityNode | null>(null)
// const [fullScreen, setFullScreen] = useState<boolean>(false)
const navigate = useNavigate()
const [activeTab, setActiveTab] = useState('relationshipNetwork')
const [activeTab, setActiveTab] = useState<SegmentedProps['value']>('relationshipNetwork')
console.log('categories', categories)
const edgeAbortRef = useRef<AbortController | null>(null)
@@ -137,7 +139,7 @@ const RelationshipNetwork: FC = () => {
})
navigate(`/user-memory/detail/${id}/GRAPH?${params.toString()}`)
}
const handleChangeTab = (tab: string) => {
const handleChangeTab = (tab: SegmentedProps['value']) => {
if (tab === 'communityNetwork') {
edgeAbortRef.current?.abort()
} else {
@@ -149,14 +151,17 @@ const RelationshipNetwork: FC = () => {
return (
<div className="rb:flex-1 rb:relative">
<Tabs
activeKey={activeTab}
onChange={handleChangeTab}
items={['relationshipNetwork', 'communityNetwork'].map(key => ({
key,
label: t(`userMemory.${key}`)
}))}
/>
<div className="rb:absolute rb:z-111 rb:bottom-10 rb:left-[calc(50%-96px)] rb:transition-transform-[translateX(-50%]">
<PageTabs
value={activeTab}
options={['relationshipNetwork', 'communityNetwork'].map(value => ({
value,
label: t(`userMemory.${value}`)
}))}
onChange={handleChangeTab}
className=""
/>
</div>
{activeTab === 'communityNetwork'
? <CommunityNetwork onSelectCommunity={community => setSelectedNode(community)} />
: <GraphNetworkChart
@@ -174,12 +179,18 @@ const RelationshipNetwork: FC = () => {
className="rb:absolute! rb:top-4 rb:right-0 rb:w-100! rb:bg-white!"
headerType="borderless"
headerClassName="rb:min-h-[60px]!"
bodyClassName='rb:px-5! rb:pb-[76px]! rb:pt-0! rb:h-auto!'
bodyClassName={clsx('rb:px-5! rb:pt-0! rb:h-auto!', {
'rb:pb-[76px]!': activeTab !== 'communityNetwork',
'rb:pb-3!': activeTab === 'communityNetwork',
})}
extra={<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/userMemory/close.svg')]" onClick={() => setSelectedNode(null)}></div>}
>
<div className="rb:max-h-[calc(100vh-269px)] rb:overflow-auto">
<div className={clsx("rb:max-h-[calc(100vh-269px)] rb:overflow-auto", {
'rb:max-h-[calc(100vh-269px)]': activeTab !== 'communityNetwork',
'rb:max-h-[calc(100vh-205px)]': activeTab == 'communityNetwork',
})}>
{(selectedNode as RawCommunityNode).properties.community_id
? <div className="rb:p-3 rb:pt-0">
? <div>
<div className="rb:font-medium rb:text-[#212332] rb:text-[16px] rb:leading-5.5 rb:pl-1">
{(selectedNode as RawCommunityNode).properties.name}
</div>
@@ -274,9 +285,9 @@ const RelationshipNetwork: FC = () => {
</>}
</div>
<Flex align="center" justify="center" className="rb:absolute rb:bottom-3 rb:left-6 rb:right-6 rb:border rb:border-[#171719] rb:rounded-xl rb:h-11 rb:font-medium rb:leading-5 rb:cursor-pointer" onClick={handleViewAll}>
{activeTab !== 'communityNetwork' && <Flex align="center" justify="center" className="rb:absolute rb:bottom-3 rb:left-6 rb:right-6 rb:border rb:border-[#171719] rb:rounded-xl rb:h-11 rb:font-medium rb:leading-5 rb:cursor-pointer" onClick={handleViewAll}>
{t('userMemory.completeMemory')}
</Flex>
</Flex>}
</RbCard>
}
</div>

4
web/src/views/UserMemoryDetail/pages/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-01-07 20:37:34
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-16 11:22:20
* @Last Modified time: 2026-03-20 11:52:00
*/
import { type FC, useState, useMemo, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
@@ -114,7 +114,7 @@ const Detail: FC = () => {
</Space>
}
/>
<div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:p-3">
<div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:px-3 rb:pb-3">
{type === 'EMOTIONAL_MEMORY' && <StatementDetail ref={statementDetailRef} refresh={handleRefresh} />}
{type === 'FORGET_MEMORY' && <ForgetDetail ref={forgetDetailRef} />}
{type === 'IMPLICIT_MEMORY' && <ImplicitDetail ref={implicitDetailRef} refresh={handleRefresh} />}