admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
View File

@@ -188,8 +188,8 @@ const ChatWrapper = () => {
return null
if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
return (
<div className='h-[50vh] py-12 px-4 flex items-center justify-center'>
<div className='grow max-w-[720px] flex gap-4'>
<div className='flex h-[50vh] items-center justify-center px-4 py-12'>
<div className='flex max-w-[720px] grow gap-4'>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -197,7 +197,7 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='grow px-4 py-3 bg-chat-bubble-bg text-text-primary rounded-2xl body-lg-regular'>
<div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
<Markdown content={welcomeMessage.content} />
<SuggestedQuestions item={welcomeMessage} />
</div>
@@ -206,7 +206,7 @@ const ChatWrapper = () => {
)
}
return (
<div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
<div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -214,8 +214,8 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='px-4 max-w-[768px]'>
<Markdown className='!text-text-tertiary !body-2xl-regular' content={welcomeMessage.content} />
<div className='max-w-[768px] px-4'>
<Markdown className='!body-2xl-regular !text-text-tertiary' content={welcomeMessage.content} />
</div>
</div>
)
@@ -232,7 +232,7 @@ const ChatWrapper = () => {
return (
<div
className='h-full bg-chatbot-bg overflow-hidden'
className='h-full overflow-hidden bg-chatbot-bg'
>
<Chat
appData={appData}

22
web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
View File

@@ -64,11 +64,11 @@ const HeaderInMobile = () => {
return (
<>
<div className='shrink-0 flex items-center px-2 py-3 gap-1 bg-mask-top2bottom-gray-50-to-transparent'>
<div className='flex shrink-0 items-center gap-1 bg-mask-top2bottom-gray-50-to-transparent px-2 py-3'>
<ActionButton size='l' className='shrink-0' onClick={() => setShowSidebar(true)}>
<RiMenuLine className='w-[18px] h-[18px]' />
<RiMenuLine className='h-[18px] w-[18px]' />
</ActionButton>
<div className='grow flex justify-center items-center'>
<div className='flex grow items-center justify-center'>
{!currentConversationId && (
<>
<AppIcon
@@ -79,7 +79,7 @@ const HeaderInMobile = () => {
imageUrl={appData?.site.icon_url}
background={appData?.site.icon_background}
/>
<div className='text-text-secondary system-md-semibold truncate'>
<div className='system-md-semibold truncate text-text-secondary'>
{appData?.site.title}
</div>
</>
@@ -102,22 +102,22 @@ const HeaderInMobile = () => {
/>
</div>
{showSidebar && (
<div className='fixed inset-0 z-50 flex p-1 bg-background-overlay'
<div className='fixed inset-0 z-50 flex bg-background-overlay p-1'
onClick={() => setShowSidebar(false)}
>
<div className='flex h-full w-[calc(100vw_-_40px)] bg-components-panel-bg backdrop-blur-sm rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
<div className='flex h-full w-[calc(100vw_-_40px)] rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-sm' onClick={e => e.stopPropagation()}>
<Sidebar />
</div>
</div>
)}
{showChatSettings && (
<div className='fixed inset-0 z-50 flex justify-end p-1 bg-background-overlay'
<div className='fixed inset-0 z-50 flex justify-end bg-background-overlay p-1'
onClick={() => setShowChatSettings(false)}
>
<div className='flex flex-col h-full w-[calc(100vw_-_40px)] bg-components-panel-bg backdrop-blur-sm rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
<div className='flex items-center gap-3 px-4 py-3 rounded-t-2xl border-b border-divider-subtle'>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<div className='flex h-full w-[calc(100vw_-_40px)] flex-col rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-sm' onClick={e => e.stopPropagation()}>
<div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-4 py-3'>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
</div>
<div className='p-4'>
<InputsFormContent showTip />

16
web/app/components/base/chat/chat-with-history/header/index.tsx
View File

@@ -72,12 +72,12 @@ const Header = () => {
return (
<>
<div className='shrink-0 h-14 p-3 flex items-center justify-between'>
<div className={cn('flex items-center gap-1 transition-all duration-200 ease-in-out', !isSidebarCollapsed && 'opacity-0 user-select-none')}>
<div className='flex h-14 shrink-0 items-center justify-between p-3'>
<div className={cn('flex items-center gap-1 transition-all duration-200 ease-in-out', !isSidebarCollapsed && 'user-select-none opacity-0')}>
<ActionButton className={cn(!isSidebarCollapsed && 'cursor-default')} size='l' onClick={() => handleSidebarCollapse(false)}>
<RiLayoutRight2Line className='w-[18px] h-[18px]' />
<RiLayoutRight2Line className='h-[18px] w-[18px]' />
</ActionButton>
<div className='shrink-0 mr-1'>
<div className='mr-1 shrink-0'>
<AppIcon
size='large'
iconType={appData?.site.icon_type}
@@ -87,7 +87,7 @@ const Header = () => {
/>
</div>
{!currentConversationId && (
<div className={cn('grow text-text-secondary system-md-semibold truncate')}>{appData?.site.title}</div>
<div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
)}
{currentConversationId && currentConversationItem && isSidebarCollapsed && (
<>
@@ -103,7 +103,7 @@ const Header = () => {
/>
</>
)}
<div className='px-1 flex items-center'>
<div className='flex items-center px-1'>
<div className='h-[14px] w-px bg-divider-regular'></div>
</div>
{isSidebarCollapsed && (
@@ -118,7 +118,7 @@ const Header = () => {
disabled={!currentConversationId || isResponding}
onClick={handleNewConversation}
>
<RiEditBoxLine className='w-[18px] h-[18px]' />
<RiEditBoxLine className='h-[18px] w-[18px]' />
</ActionButton>
</div>
</Tooltip>
@@ -130,7 +130,7 @@ const Header = () => {
popupContent={t('share.chat.resetChat')}
>
<ActionButton size='l' onClick={handleNewConversation}>
<RiResetLeftLine className='w-[18px] h-[18px]' />
<RiResetLeftLine className='h-[18px] w-[18px]' />
</ActionButton>
</Tooltip>
)}

8
web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
View File

@@ -32,17 +32,17 @@ const MobileOperationDropdown = ({
onClick={() => setOpen(v => !v)}
>
<ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiMoreFill className='w-[18px] h-[18px]' />
<RiMoreFill className='h-[18px] w-[18px]' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-40">
<div
className={'min-w-[160px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
className={'min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
>
<div className='flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover' onClick={handleResetChat}>
<div className='system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={handleResetChat}>
<span className='grow'>{t('share.chat.resetChat')}</span>
</div>
<div className='flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover' onClick={handleViewChatSettings}>
<div className='system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={handleViewChatSettings}>
<span className='grow'>{t('share.chat.viewChatSettings')}</span>
</div>
</div>

12
web/app/components/base/chat/chat-with-history/header/operation.tsx
View File

@@ -43,25 +43,25 @@ const Operation: FC<Props> = ({
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
>
<div className={cn('flex items-center p-1.5 pl-2 rounded-lg text-text-secondary cursor-pointer hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<div className={cn('flex cursor-pointer items-center rounded-lg p-1.5 pl-2 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<div className='system-md-semibold'>{title}</div>
<RiArrowDownSLine className='w-4 h-4 ' />
<RiArrowDownSLine className='h-4 w-4 ' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div
className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
className={'min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
>
<div className={cn('flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={togglePin}>
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
<span className='grow'>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
</div>
{isShowRenameConversation && (
<div className={cn('flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={onRenameConversation}>
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
<span className='grow'>{t('explore.sidebar.action.rename')}</span>
</div>
)}
{isShowDelete && (
<div className={cn('group flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<div className={cn('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<span className='grow'>{t('explore.sidebar.action.delete')}</span>
</div>
)}

10
web/app/components/base/chat/chat-with-history/index.tsx
View File

@@ -67,14 +67,14 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
return (
<div className={cn(
'h-full flex bg-background-default-burn',
'flex h-full bg-background-default-burn',
isMobile && 'flex-col',
className,
)}>
{!isMobile && (
<div className={cn(
'flex flex-col w-[236px] p-1 pr-0 transition-all duration-200 ease-in-out',
isSidebarCollapsed && 'w-0 !p-0 overflow-hidden',
'flex w-[236px] flex-col p-1 pr-0 transition-all duration-200 ease-in-out',
isSidebarCollapsed && 'w-0 overflow-hidden !p-0',
)}>
<Sidebar />
</div>
@@ -86,7 +86,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
{isSidebarCollapsed && (
<div
className={cn(
'z-20 absolute top-0 w-[256px] h-full flex flex-col p-2 transition-all duration-500 ease-in-out',
'absolute top-0 z-20 flex h-full w-[256px] flex-col p-2 transition-all duration-500 ease-in-out',
showSidePanel ? 'left-0' : 'left-[-248px]',
)}
onMouseEnter={() => setShowSidePanel(true)}
@@ -95,7 +95,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
<Sidebar isPanel />
</div>
)}
<div className={cn('h-full flex flex-col bg-chatbot-bg border-[0,5px] border-components-panel-border-subtle overflow-hidden', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
<div className={cn('flex h-full flex-col overflow-hidden border-[0,5px] border-components-panel-border-subtle bg-chatbot-bg', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
{!isMobile && <Header />}
{appChatListDataLoading && (
<Loading type='app' />

8
web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
View File

@@ -36,10 +36,10 @@ const InputsFormContent = ({ showTip }: Props) => {
<div className='space-y-4'>
{inputsForms.map(form => (
<div key={form.variable} className='space-y-1'>
<div className='h-6 flex items-center gap-1'>
<div className='text-text-secondary system-md-semibold'>{form.label}</div>
<div className='flex h-6 items-center gap-1'>
<div className='system-md-semibold text-text-secondary'>{form.label}</div>
{!form.required && (
<div className='text-text-tertiary system-xs-regular'>{t('appDebug.variableTable.optional')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
)}
</div>
{form.type === InputVarType.textInput && (
@@ -109,7 +109,7 @@ const InputsFormContent = ({ showTip }: Props) => {
</div>
))}
{showTip && (
<div className='text-text-tertiary system-xs-regular'>{t('share.chat.chatFormTip')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('share.chat.chatFormTip')}</div>
)}
</div>
)

22
web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
View File

@@ -25,23 +25,23 @@ const InputsFormNode = ({
} = useChatWithHistoryContext()
return (
<div className={cn('pt-6 px-4 flex flex-col items-center', isMobile && 'pt-4')}>
<div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
<div className={cn(
'w-full max-w-[672px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-md',
collapsed && 'bg-components-card-bg border border-components-card-border shadow-none',
'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
)}>
<div className={cn(
'flex items-center gap-3 px-6 py-4 rounded-t-2xl',
'flex items-center gap-3 rounded-t-2xl px-6 py-4',
!collapsed && 'border-b border-divider-subtle',
isMobile && 'px-4 py-3',
)}>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
{collapsed && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
)}
{!collapsed && currentConversationId && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
)}
</div>
{!collapsed && (
@@ -67,9 +67,9 @@ const InputsFormNode = ({
)}
</div>
{collapsed && (
<div className='py-4 flex items-center w-full max-w-[720px]'>
<Divider bgStyle='gradient' className='basis-1/2 h-px rotate-180' />
<Divider bgStyle='gradient' className='basis-1/2 h-px' />
<div className='flex w-full max-w-[720px] items-center py-4'>
<Divider bgStyle='gradient' className='h-px basis-1/2 rotate-180' />
<Divider bgStyle='gradient' className='h-px basis-1/2' />
</div>
)}
</div>

10
web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
View File

@@ -26,14 +26,14 @@ const ViewFormDropdown = () => {
onClick={() => setOpen(v => !v)}
>
<ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiChatSettingsLine className='w-[18px] h-[18px]' />
<RiChatSettingsLine className='h-[18px] w-[18px]' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div className='w-[400px] bg-components-panel-bg backdrop-blur-sm rounded-2xl border-[0.5px] border-components-panel-border shadow-lg'>
<div className='flex items-center gap-3 px-6 py-4 rounded-t-2xl border-b border-divider-subtle'>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<div className='w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'>
<div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4'>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
</div>
<div className='p-6'>
<InputsFormContent showTip />

24
web/app/components/base/chat/chat-with-history/sidebar/index.tsx
View File

@@ -78,11 +78,11 @@ const Sidebar = ({ isPanel }: Props) => {
return (
<div className={cn(
'grow flex flex-col',
isPanel && 'rounded-xl bg-components-panel-bg border-[0.5px] border-components-panel-border-subtle shadow-lg',
'flex grow flex-col',
isPanel && 'rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-bg shadow-lg',
)}>
<div className={cn(
'shrink-0 flex items-center gap-3 p-3 pr-2',
'flex shrink-0 items-center gap-3 p-3 pr-2',
)}>
<div className='shrink-0'>
<AppIcon
@@ -93,25 +93,25 @@ const Sidebar = ({ isPanel }: Props) => {
imageUrl={appData?.site.icon_url}
/>
</div>
<div className={cn('grow text-text-secondary system-md-semibold truncate')}>{appData?.site.title}</div>
<div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
{!isMobile && isSidebarCollapsed && (
<ActionButton size='l' onClick={() => handleSidebarCollapse(false)}>
<RiExpandRightLine className='w-[18px] h-[18px]' />
<RiExpandRightLine className='h-[18px] w-[18px]' />
</ActionButton>
)}
{!isMobile && !isSidebarCollapsed && (
<ActionButton size='l' onClick={() => handleSidebarCollapse(true)}>
<RiLayoutLeft2Line className='w-[18px] h-[18px]' />
<RiLayoutLeft2Line className='h-[18px] w-[18px]' />
</ActionButton>
)}
</div>
<div className='shrink-0 px-3 py-4'>
<Button variant='secondary-accent' disabled={isResponding} className='w-full justify-center' onClick={handleNewConversation}>
<RiEditBoxLine className='w-4 h-4 mr-1' />
<RiEditBoxLine className='mr-1 h-4 w-4' />
{t('share.chat.newChat')}
</Button>
</div>
<div className='grow h-0 pt-4 px-3 space-y-2 overflow-y-auto'>
<div className='h-0 grow space-y-2 overflow-y-auto px-3 pt-4'>
{/* pinned list */}
{!!pinnedConversationList.length && (
<div className='mb-4'>
@@ -135,17 +135,17 @@ const Sidebar = ({ isPanel }: Props) => {
/>
)}
</div>
<div className='shrink-0 p-3 flex items-center justify-between'>
<div className='flex shrink-0 items-center justify-between p-3'>
<MenuDropdown placement='top-start' data={appData?.site} />
{/* powered by */}
<div className='shrink-0'>
{!appData?.custom_config?.remove_webapp_brand && (
<div className={cn(
'shrink-0 px-2 flex items-center gap-1.5',
'flex shrink-0 items-center gap-1.5 px-2',
)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
{appData?.custom_config?.replace_webapp_logo && (
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
)}
{!appData?.custom_config?.replace_webapp_logo && (
<LogoSite className='!h-5' />

6
web/app/components/base/chat/chat-with-history/sidebar/item.tsx
View File

@@ -31,12 +31,12 @@ const Item: FC<ItemProps> = ({
ref={ref}
key={item.id}
className={cn(
'group flex p-1 pl-3 rounded-lg cursor-pointer text-components-menu-item-text system-sm-medium hover:bg-state-base-hover',
isSelected && 'bg-state-accent-active hover:bg-state-accent-active text-text-accent',
'system-sm-medium group flex cursor-pointer rounded-lg p-1 pl-3 text-components-menu-item-text hover:bg-state-base-hover',
isSelected && 'bg-state-accent-active text-text-accent hover:bg-state-accent-active',
)}
onClick={() => onChangeConversation(item.id)}
>
<div className='grow p-1 pl-0 truncate' title={item.name}>{item.name}</div>
<div className='grow truncate p-1 pl-0' title={item.name}>{item.name}</div>
{item.id !== '' && (
<div className='shrink-0' onClick={e => e.stopPropagation()}>
<Operation

2
web/app/components/base/chat/chat-with-history/sidebar/list.tsx
View File

@@ -21,7 +21,7 @@ const List: FC<ListProps> = ({
return (
<div className='space-y-0.5'>
{title && (
<div className='px-3 pt-2 pb-1 text-text-tertiary system-xs-medium-uppercase'>{title}</div>
<div className='system-xs-medium-uppercase px-3 pb-1 pt-2 text-text-tertiary'>{title}</div>
)}
{list.map(item => (
<Item

18
web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
View File

@@ -63,33 +63,33 @@ const Operation: FC<Props> = ({
: ActionButtonState.Default
}
>
<RiMoreFill className='w-4 h-4' />
<RiMoreFill className='h-4 w-4' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div
ref={ref}
className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
className={'min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
onMouseEnter={setIsHovering}
onMouseLeave={setNotHovering}
onClick={(e) => {
e.stopPropagation()
}}
>
<div className={cn('flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={togglePin}>
{isPinned && <RiUnpinLine className='shrink-0 w-4 h-4 text-text-tertiary' />}
{!isPinned && <RiPushpinLine className='shrink-0 w-4 h-4 text-text-tertiary' />}
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
{isPinned && <RiUnpinLine className='h-4 w-4 shrink-0 text-text-tertiary' />}
{!isPinned && <RiPushpinLine className='h-4 w-4 shrink-0 text-text-tertiary' />}
<span className='grow'>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
</div>
{isShowRenameConversation && (
<div className={cn('flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={onRenameConversation}>
<RiEditLine className='shrink-0 w-4 h-4 text-text-tertiary' />
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
<RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
<span className='grow'>{t('explore.sidebar.action.rename')}</span>
</div>
)}
{isShowDelete && (
<div className={cn('group flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<RiDeleteBinLine className={cn('shrink-0 w-4 h-4 text-text-tertiary group-hover:text-text-destructive')} />
<div className={cn('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover:text-text-destructive')} />
<span className='grow'>{t('explore.sidebar.action.delete')}</span>
</div>
)}

4
web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
View File

@@ -30,8 +30,8 @@ const RenameModal: FC<IRenameModalProps> = ({
isShow={isShow}
onClose={onClose}
>
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('common.chat.conversationName')}</div>
<Input className='mt-2 w-full h-10'
<div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('common.chat.conversationName')}</div>
<Input className='mt-2 h-10 w-full'
value={tempName}
onChange={e => setTempName(e.target.value)}
placeholder={t('common.chat.conversationNamePlaceholder') || ''}

2
web/app/components/base/chat/chat/answer/agent-content.tsx
View File

@@ -8,7 +8,7 @@ import Thought from '@/app/components/base/chat/chat/thought'
import { FileList } from '@/app/components/base/file-uploader'
import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
interface AgentContentProps {
type AgentContentProps = {
item: ChatItem
responding?: boolean
}

2
web/app/components/base/chat/chat/answer/basic-content.tsx
View File

@@ -4,7 +4,7 @@ import type { ChatItem } from '../../types'
import { Markdown } from '@/app/components/base/markdown'
import cn from '@/utils/classnames'
interface BasicContentProps {
type BasicContentProps = {
item: ChatItem
}
const BasicContent: FC<BasicContentProps> = ({

18
web/app/components/base/chat/chat/answer/index.tsx
View File

@@ -101,20 +101,20 @@ const Answer: FC<AnswerProps> = ({
}, [])
return (
<div className='flex mb-2 last:mb-0'>
<div className='shrink-0 relative w-10 h-10'>
<div className='mb-2 flex last:mb-0'>
<div className='relative h-10 w-10 shrink-0'>
{answerIcon || <AnswerIcon />}
{responding && (
<div className='absolute -top-[3px] -left-[3px] pl-[6px] flex items-center w-4 h-4 bg-background-section-burn rounded-full shadow-xs border-[0.5px] border-divider-subtle'>
<div className='absolute -left-[3px] -top-[3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs'>
<LoadingAnim type='avatar' />
</div>
)}
</div>
<div className='chat-answer-container group grow w-0 ml-4 pb-4' ref={containerRef}>
<div className='chat-answer-container group ml-4 w-0 grow pb-4' ref={containerRef}>
<div className={cn('group relative pr-10', chatAnswerContainerInner)}>
<div
ref={contentRef}
className={cn('relative inline-block px-4 py-3 max-w-full bg-chat-bubble-bg rounded-2xl body-lg-regular text-text-primary', workflowProcess && 'w-full')}
className={cn('body-lg-regular relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary', workflowProcess && 'w-full')}
>
{
!responding && (
@@ -153,7 +153,7 @@ const Answer: FC<AnswerProps> = ({
}
{
responding && !content && !hasAgentThoughts && (
<div className='flex items-center justify-center w-6 h-5'>
<div className='flex h-5 w-6 items-center justify-center'>
<LoadingAnim type='text' />
</div>
)
@@ -207,13 +207,13 @@ const Answer: FC<AnswerProps> = ({
<Citation data={citation} showHitInfo={config?.supportCitationHitInfo} />
)
}
{item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined && <div className="pt-3.5 flex justify-center items-center text-sm">
{item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined && <div className="flex items-center justify-center pt-3.5 text-sm">
<button
className={`${item.prevSibling ? 'opacity-100' : 'opacity-30'}`}
disabled={!item.prevSibling}
onClick={() => item.prevSibling && switchSibling?.(item.prevSibling)}
>
<ChevronRight className="w-[14px] h-[14px] rotate-180 text-text-primary" />
<ChevronRight className="h-[14px] w-[14px] rotate-180 text-text-primary" />
</button>
<span className="px-2 text-xs text-text-primary">{item.siblingIndex + 1} / {item.siblingCount}</span>
<button
@@ -221,7 +221,7 @@ const Answer: FC<AnswerProps> = ({
disabled={!item.nextSibling}
onClick={() => item.nextSibling && switchSibling?.(item.nextSibling)}
>
<ChevronRight className="w-[14px] h-[14px] text-text-primary" />
<ChevronRight className="h-[14px] w-[14px] text-text-primary" />
</button>
</div>}
</div>

10
web/app/components/base/chat/chat/answer/more.tsx
View File

@@ -13,25 +13,25 @@ const More: FC<MoreProps> = ({
const { t } = useTranslation()
return (
<div className='mt-1 flex items-center system-xs-regular text-text-quaternary opacity-0 group-hover:opacity-100'>
<div className='system-xs-regular mt-1 flex items-center text-text-quaternary opacity-0 group-hover:opacity-100'>
{
more && (
<>
<div
className='mr-2 shrink-0 truncate max-w-[33.3%]'
className='mr-2 max-w-[33.3%] shrink-0 truncate'
title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
>
{`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
</div>
<div
className='shrink-0 truncate max-w-[33.3%]'
className='max-w-[33.3%] shrink-0 truncate'
title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
>
{`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
</div>
<div className='shrink-0 mx-2'>·</div>
<div className='mx-2 shrink-0'>·</div>
<div
className='shrink-0 truncate max-w-[33.3%]'
className='max-w-[33.3%] shrink-0 truncate'
title={more.time}
>
{more.time}

20
web/app/components/base/chat/chat/answer/operation.tsx
View File

@@ -108,13 +108,13 @@ const Operation: FC<OperationProps> = ({
)}
style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
>
{showPromptLog && (
{showPromptLog && !isOpeningStatement && (
<div className='hidden group-hover:block'>
<Log logItem={item} />
</div>
)}
{!isOpeningStatement && (
<div className='hidden group-hover:flex ml-1 items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
<div className='ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex'>
{(config?.text_to_speech?.enabled) && (
<NewAudioButton
id={id}
@@ -126,40 +126,40 @@ const Operation: FC<OperationProps> = ({
copy(content)
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
}}>
<RiClipboardLine className='w-4 h-4' />
<RiClipboardLine className='h-4 w-4' />
</ActionButton>
{!noChatInput && (
<ActionButton onClick={() => onRegenerate?.(item)}>
<RiResetLeftLine className='w-4 h-4' />
<RiResetLeftLine className='h-4 w-4' />
</ActionButton>
)}
{(config?.supportAnnotation && config.annotation_reply?.enabled) && (
<ActionButton onClick={() => setIsShowReplyModal(true)}>
<RiEditLine className='w-4 h-4' />
<RiEditLine className='h-4 w-4' />
</ActionButton>
)}
</div>
)}
{!isOpeningStatement && config?.supportFeedback && onFeedback && (
<div className='hidden group-hover:flex ml-1 items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
<div className='ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex'>
{!localFeedback?.rating && (
<>
<ActionButton onClick={() => handleFeedback('like')}>
<RiThumbUpLine className='w-4 h-4' />
<RiThumbUpLine className='h-4 w-4' />
</ActionButton>
<ActionButton onClick={() => handleFeedback('dislike')}>
<RiThumbDownLine className='w-4 h-4' />
<RiThumbDownLine className='h-4 w-4' />
</ActionButton>
</>
)}
{localFeedback?.rating === 'like' && (
<ActionButton state={ActionButtonState.Active} onClick={() => handleFeedback(null)}>
<RiThumbUpLine className='w-4 h-4' />
<RiThumbUpLine className='h-4 w-4' />
</ActionButton>
)}
{localFeedback?.rating === 'dislike' && (
<ActionButton state={ActionButtonState.Destructive} onClick={() => handleFeedback(null)}>
<RiThumbDownLine className='w-4 h-4' />
<RiThumbDownLine className='h-4 w-4' />
</ActionButton>
)}
</div>

2
web/app/components/base/chat/chat/answer/suggested-questions.tsx
View File

@@ -25,7 +25,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
<Button
key={index}
variant='secondary-accent'
className='mt-1 mr-1 max-w-full last:mr-0 shrink-0'
className='mr-1 mt-1 max-w-full shrink-0 last:mr-0'
onClick={() => onSend?.(question)}
>
{question}

20
web/app/components/base/chat/chat/answer/tool-detail.tsx
View File

@@ -30,34 +30,34 @@ const ToolDetail = ({
>
<div
className={cn(
'flex items-center system-xs-medium text-text-tertiary px-2.5 py-2 cursor-pointer',
'system-xs-medium flex cursor-pointer items-center px-2.5 py-2 text-text-tertiary',
expand && 'pb-1.5',
)}
onClick={() => setExpand(!expand)}
>
{isFinished && <RiHammerFill className='mr-1 w-3.5 h-3.5' />}
{!isFinished && <RiLoader2Line className='mr-1 w-3.5 h-3.5 animate-spin' />}
{isFinished && <RiHammerFill className='mr-1 h-3.5 w-3.5' />}
{!isFinished && <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />}
{t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
<div className='mx-1 text-text-secondary'>{toolLabel}</div>
{!expand && <RiArrowRightSLine className='w-4 h-4' />}
{expand && <RiArrowDownSLine className='ml-auto w-4 h-4' />}
{!expand && <RiArrowRightSLine className='h-4 w-4' />}
{expand && <RiArrowDownSLine className='ml-auto h-4 w-4' />}
</div>
{
expand && (
<>
<div className='mb-0.5 mx-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
<div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
<div className='mx-1 mb-0.5 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
<div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
{t('tools.thought.requestTitle')}
</div>
<div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
<div className='code-xs-regular break-words px-3 pb-2 pt-1'>
{input}
</div>
</div>
<div className='mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
<div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
<div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
{t('tools.thought.responseTitle')}
</div>
<div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
<div className='code-xs-regular break-words px-3 pb-2 pt-1'>
{output}
</div>
</div>

14
web/app/components/base/chat/chat/answer/workflow-process.tsx
View File

@@ -42,8 +42,8 @@ const WorkflowProcessItem = ({
return (
<div
className={cn(
'-mx-1 px-2.5 rounded-xl',
collapse ? 'py-[7px] border-l-[0.25px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-[0.5px] border-components-panel-border-subtle',
'-mx-1 rounded-xl px-2.5',
collapse ? 'border-l-[0.25px] border-components-panel-border py-[7px]' : 'border-[0.5px] border-components-panel-border-subtle px-1 pb-1 pt-[7px]',
running && !collapse && 'bg-background-section-burn',
succeeded && !collapse && 'bg-state-success-hover',
failed && !collapse && 'bg-state-destructive-hover',
@@ -51,28 +51,28 @@ const WorkflowProcessItem = ({
)}
>
<div
className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5', readonly && 'cursor-default')}
className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5', readonly && 'cursor-default')}
onClick={() => !readonly && setCollapse(!collapse)}
>
{
running && (
<RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 animate-spin text-text-tertiary' />
<RiLoader2Line className='mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary' />
)
}
{
succeeded && (
<CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
<CheckCircle className='mr-1 h-3.5 w-3.5 shrink-0 text-text-success' />
)
}
{
failed && (
<RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
<RiErrorWarningFill className='mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive' />
)
}
<div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
{t('workflow.common.workflowProcess')}
</div>
{!readonly && <RiArrowRightSLine className={cn('ml-1 w-4 h-4 text-text-tertiary', !collapse && 'rotate-90')} />}
{!readonly && <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />}
</div>
{
!collapse && !readonly && (

12
web/app/components/base/chat/chat/chat-input-area/index.tsx
View File

@@ -155,28 +155,28 @@ const ChatInputArea = ({
<>
<div
className={cn(
'relative pb-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md z-10',
'relative z-10 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md',
isDragActive && 'border border-dashed border-components-option-card-option-selected-border',
disabled && 'opacity-50 pointer-events-none border-components-panel-border shadow-none',
disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none',
)}
>
<div className='relative px-[9px] pt-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
<div className='relative max-h-[158px] overflow-y-auto overflow-x-hidden px-[9px] pt-[9px]'>
<FileListInChatInput fileConfig={visionConfig!} />
<div
ref={wrapperRef}
className='flex items-center justify-between'
>
<div className='flex items-center relative grow w-full'>
<div className='relative flex w-full grow items-center'>
<div
ref={textValueRef}
className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
className='body-lg-regular pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6'
>
{query}
</div>
<Textarea
ref={textareaRef}
className={cn(
'p-1 w-full leading-6 body-lg-regular text-text-tertiary bg-transparent outline-none',
'body-lg-regular w-full bg-transparent p-1 leading-6 text-text-tertiary outline-none',
)}
placeholder={t('common.chat.inputPlaceholder') || ''}
autoFocus

34
web/app/components/base/chat/chat/chat-input-area/operation.tsx
View File

@@ -1,7 +1,4 @@
import {
forwardRef,
memo,
} from 'react'
import { memo } from 'react'
import {
RiMicLine,
RiSendPlane2Fill,
@@ -23,17 +20,22 @@ type OperationProps = {
onSend: () => void
theme?: Theme | null
}
const Operation = forwardRef<HTMLDivElement, OperationProps>(({
fileConfig,
speechToTextConfig,
onShowVoiceInput,
onSend,
theme,
}, ref) => {
const Operation = (
{
ref,
fileConfig,
speechToTextConfig,
onShowVoiceInput,
onSend,
theme,
}: OperationProps & {
ref: React.RefObject<HTMLDivElement>;
},
) => {
return (
<div
className={cn(
'shrink-0 flex items-center justify-end',
'flex shrink-0 items-center justify-end',
)}
>
<div
@@ -48,13 +50,13 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
size='l'
onClick={onShowVoiceInput}
>
<RiMicLine className='w-5 h-5' />
<RiMicLine className='h-5 w-5' />
</ActionButton>
)
}
</div>
<Button
className='ml-3 px-0 w-8'
className='ml-3 w-8 px-0'
variant='primary'
onClick={onSend}
style={
@@ -65,12 +67,12 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
: {}
}
>
<RiSendPlane2Fill className='w-4 h-4' />
<RiSendPlane2Fill className='h-4 w-4' />
</Button>
</div>
</div>
)
})
}
Operation.displayName = 'Operation'
export default memo(Operation)

14
web/app/components/base/chat/chat/citation/index.tsx
View File

@@ -76,17 +76,17 @@ const Citation: FC<CitationProps> = ({
const resourcesLength = resources.length
return (
<div className='mt-3 -mb-1'>
<div className='flex items-center mb-2 system-xs-medium text-text-tertiary'>
<div className='-mb-1 mt-3'>
<div className='system-xs-medium mb-2 flex items-center text-text-tertiary'>
{t('common.chat.citation.title')}
<div className='grow ml-2 h-[1px] bg-divider-regular' />
<div className='ml-2 h-[1px] grow bg-divider-regular' />
</div>
<div className='relative flex flex-wrap'>
{
resources.map((res, index) => (
<div
key={index}
className='absolute top-0 left-0 w-auto mr-1 mb-1 pl-7 pr-2 max-w-[240px] h-7 text-xs whitespace-nowrap opacity-0 -z-10'
className='absolute left-0 top-0 -z-10 mb-1 mr-1 h-7 w-auto max-w-[240px] whitespace-nowrap pl-7 pr-2 text-xs opacity-0'
ref={(ele: any) => (elesRef.current[index] = ele!)}
>
{res.documentName}
@@ -95,7 +95,7 @@ const Citation: FC<CitationProps> = ({
}
{
resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map((res, index) => (
<div key={index} className='mr-1 mb-1 cursor-pointer'>
<div key={index} className='mb-1 mr-1 cursor-pointer'>
<Popup
data={res}
showHitInfo={showHitInfo}
@@ -106,13 +106,13 @@ const Citation: FC<CitationProps> = ({
{
limitNumberInOneLine < resourcesLength && (
<div
className='flex items-center px-2 h-7 bg-components-panel-bg rounded-lg text-text-tertiary system-xs-medium cursor-pointer'
className='system-xs-medium flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 text-text-tertiary'
onClick={() => setShowMore(v => !v)}
>
{
!showMore
? `+ ${resourcesLength - limitNumberInOneLine}`
: <RiArrowDownSLine className='w-4 h-4 text-text-tertiary rotate-180' />
: <RiArrowDownSLine className='h-4 w-4 rotate-180 text-text-tertiary' />
}
</div>
)

38
web/app/components/base/chat/chat/citation/popup.tsx
View File

@@ -47,28 +47,28 @@ const Popup: FC<PopupProps> = ({
}}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className='flex items-center px-2 max-w-[240px] h-7 bg-components-button-secondary-bg rounded-lg'>
<FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
<div className='text-xs text-text-tertiary truncate'>{data.documentName}</div>
<div className='flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2'>
<FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
<div className='truncate text-xs text-text-tertiary'>{data.documentName}</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
<div className='max-w-[360px] bg-background-section-burn rounded-xl shadow-lg'>
<div className='px-4 pt-3 pb-2'>
<div className='flex items-center h-[18px]'>
<FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
<div className='system-xs-medium text-text-tertiary truncate'>{data.documentName}</div>
<div className='max-w-[360px] rounded-xl bg-background-section-burn shadow-lg'>
<div className='px-4 pb-2 pt-3'>
<div className='flex h-[18px] items-center'>
<FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
<div className='system-xs-medium truncate text-text-tertiary'>{data.documentName}</div>
</div>
</div>
<div className='px-4 py-0.5 max-h-[450px] bg-components-panel-bg rounded-lg overflow-y-auto'>
<div className='max-h-[450px] overflow-y-auto rounded-lg bg-components-panel-bg px-4 py-0.5'>
<div className='w-full'>
{
data.sources.map((source, index) => (
<Fragment key={index}>
<div className='group py-3'>
<div className='flex items-center justify-between mb-2'>
<div className='flex items-center px-1.5 h-5 border border-divider-subtle rounded-md'>
<Hash02 className='mr-0.5 w-3 h-3 text-text-quaternary' />
<div className='mb-2 flex items-center justify-between'>
<div className='flex h-5 items-center rounded-md border border-divider-subtle px-1.5'>
<Hash02 className='mr-0.5 h-3 w-3 text-text-quaternary' />
<div className='text-[11px] font-medium text-text-tertiary'>
{source.segment_position || index + 1}
</div>
@@ -77,31 +77,31 @@ const Popup: FC<PopupProps> = ({
showHitInfo && (
<Link
href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
className='hidden items-center h-[18px] text-xs text-text-accent group-hover:flex'>
className='hidden h-[18px] items-center text-xs text-text-accent group-hover:flex'>
{t('common.chat.citation.linkToDataset')}
<ArrowUpRight className='ml-1 w-3 h-3' />
<ArrowUpRight className='ml-1 h-3 w-3' />
</Link>
)
}
</div>
<div className='text-[13px] text-text-secondary break-words'>{source.content}</div>
<div className='break-words text-[13px] text-text-secondary'>{source.content}</div>
{
showHitInfo && (
<div className='flex items-center mt-2 system-xs-medium text-text-quaternary flex-wrap'>
<div className='system-xs-medium mt-2 flex flex-wrap items-center text-text-quaternary'>
<Tooltip
text={t('common.chat.citation.characters')}
data={source.word_count}
icon={<TypeSquare className='mr-1 w-3 h-3' />}
icon={<TypeSquare className='mr-1 h-3 w-3' />}
/>
<Tooltip
text={t('common.chat.citation.hitCount')}
data={source.hit_count}
icon={<Target04 className='mr-1 w-3 h-3' />}
icon={<Target04 className='mr-1 h-3 w-3' />}
/>
<Tooltip
text={t('common.chat.citation.vectorHash')}
data={source.index_node_hash?.substring(0, 7)}
icon={<BezierCurve03 className='mr-1 w-3 h-3' />}
icon={<BezierCurve03 className='mr-1 h-3 w-3' />}
/>
{
source.score && (

8
web/app/components/base/chat/chat/citation/progress-tooltip.tsx
View File

@@ -27,15 +27,15 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)}
>
<div className='grow flex items-center'>
<div className='mr-1 w-16 h-1.5 rounded-[3px] border border-components-progress-gray-border overflow-hidden'>
<div className='bg-components-progress-gray-progress h-full' style={{ width: `${data * 100}%` }}></div>
<div className='flex grow items-center'>
<div className='mr-1 h-1.5 w-16 overflow-hidden rounded-[3px] border border-components-progress-gray-border'>
<div className='h-full bg-components-progress-gray-progress' style={{ width: `${data * 100}%` }}></div>
</div>
{data}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
<div className='p-3 bg-components-tooltip-bg system-xs-medium text-text-quaternary rounded-lg shadow-lg'>
<div className='system-xs-medium rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg'>
{t('common.chat.citation.hitScore')} {data}
</div>
</PortalToFollowElemContent>

4
web/app/components/base/chat/chat/citation/tooltip.tsx
View File

@@ -29,13 +29,13 @@ const Tooltip: FC<TooltipProps> = ({
onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)}
>
<div className='flex items-center mr-6'>
<div className='mr-6 flex items-center'>
{icon}
{data}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
<div className='p-3 bg-components-tooltip-bg system-xs-medium text-text-quaternary rounded-lg shadow-lg'>
<div className='system-xs-medium rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg'>
{text} {data}
</div>
</PortalToFollowElemContent>

25
web/app/components/base/chat/chat/index.tsx
View File

@@ -166,19 +166,28 @@ const Chat: FC<ChatProps> = ({
useEffect(() => {
if (chatFooterRef.current && chatContainerRef.current) {
const resizeObserver = new ResizeObserver((entries) => {
// container padding bottom
const resizeContainerObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const { blockSize } = entry.borderBoxSize[0]
chatContainerRef.current!.style.paddingBottom = `${blockSize}px`
handleScrollToBottom()
}
})
resizeContainerObserver.observe(chatFooterRef.current)
resizeObserver.observe(chatFooterRef.current)
// footer width
const resizeFooterObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const { inlineSize } = entry.borderBoxSize[0]
chatFooterRef.current!.style.width = `${inlineSize}px`
}
})
resizeFooterObserver.observe(chatContainerRef.current)
return () => {
resizeObserver.disconnect()
resizeContainerObserver.disconnect()
resizeFooterObserver.disconnect()
}
}
}, [handleScrollToBottom])
@@ -262,7 +271,7 @@ const Chat: FC<ChatProps> = ({
</div>
</div>
<div
className={`absolute bottom-0 bg-chat-input-mask flex justify-center ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
className={`absolute bottom-0 flex justify-center bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
ref={chatFooterRef}
>
<div
@@ -271,10 +280,10 @@ const Chat: FC<ChatProps> = ({
>
{
!noStopResponding && isResponding && (
<div className='flex justify-center mb-2'>
<div className='mb-2 flex justify-center'>
<Button onClick={onStopResponding}>
<StopCircle className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
<span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
<StopCircle className='mr-[5px] h-3.5 w-3.5 text-gray-500' />
<span className='text-xs font-normal text-gray-500'>{t('appDebug.operation.stopResponding')}</span>
</Button>
</div>
)

4
web/app/components/base/chat/chat/log/index.tsx
View File

@@ -19,7 +19,7 @@ const Log: FC<LogProps> = ({
return (
<div
className='ml-1 flex items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'
className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'
onClick={(e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
@@ -33,7 +33,7 @@ const Log: FC<LogProps> = ({
}}
>
<ActionButton>
<RiFileList3Line className='w-4 h-4' />
<RiFileList3Line className='h-4 w-4' />
</ActionButton>
</div>
)

4
web/app/components/base/chat/chat/question.stories.tsx
View File

@@ -26,8 +26,8 @@ export const Default: Story = {
content: 'You are a helpful assistant.',
} satisfies ChatItem,
theme: undefined,
questionIcon: <div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
<User className='w-full h-full' />
questionIcon: <div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
<User className='h-full w-full' />
</div>,
},
}

12
web/app/components/base/chat/chat/question.tsx
View File

@@ -12,7 +12,7 @@ import { User } from '@/app/components/base/icons/src/public/avatar'
import { Markdown } from '@/app/components/base/markdown'
import { FileList } from '@/app/components/base/file-uploader'
interface QuestionProps {
type QuestionProps = {
item: ChatItem
questionIcon?: ReactNode
theme: Theme | null | undefined
@@ -28,10 +28,10 @@ const Question: FC<QuestionProps> = ({
} = item
return (
<div className='flex justify-end mb-2 last:mb-0 pl-14'>
<div className='mb-2 flex justify-end pl-14 last:mb-0'>
<div className='group relative mr-4 max-w-full'>
<div
className='px-4 py-3 bg-[#D1E9FF]/50 rounded-2xl text-sm text-gray-900'
className='rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900'
style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
>
{
@@ -47,11 +47,11 @@ const Question: FC<QuestionProps> = ({
</div>
<div className='mt-1 h-[18px]' />
</div>
<div className='shrink-0 w-10 h-10'>
<div className='h-10 w-10 shrink-0'>
{
questionIcon || (
<div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
<User className='w-full h-full' />
<div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
<User className='h-full w-full' />
</div>
)
}

2
web/app/components/base/chat/chat/thought/index.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react'
import type { ThoughtItem, ToolInfoInThought } from '../type'
import ToolDetail from '@/app/components/base/chat/chat/answer/tool-detail'
export interface IThoughtProps {
export type IThoughtProps = {
thought: ThoughtItem
isFinished: boolean
}

6
web/app/components/base/chat/chat/thought/panel.tsx
View File

@@ -17,11 +17,11 @@ const Panel: FC<Props> = ({
const { t } = useTranslation()
return (
<div className='rounded-md bg-gray-100 overflow-hidden border border-black/5'>
<div className='flex items-center px-2 py-1 leading-[18px] bg-gray-50 uppercase text-xs font-medium text-gray-500'>
<div className='overflow-hidden rounded-md border border-black/5 bg-gray-100'>
<div className='flex items-center bg-gray-50 px-2 py-1 text-xs font-medium uppercase leading-[18px] text-gray-500'>
{t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
</div>
<div className='p-2 border-t border-black/5 leading-4 text-xs text-gray-700'>{content}</div>
<div className='border-t border-black/5 p-2 text-xs leading-4 text-gray-700'>{content}</div>
</div>
)
}

20
web/app/components/base/chat/chat/thought/tool.tsx
View File

@@ -30,7 +30,7 @@ const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>)
typeof icon === 'string'
? (
<div
className='w-3 h-3 bg-cover bg-center rounded-[3px] shrink-0'
className='h-3 w-3 shrink-0 rounded-[3px] bg-cover bg-center'
style={{
backgroundImage: `url(${icon})`,
}}
@@ -38,7 +38,7 @@ const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>)
)
: (
<AppIcon
className='rounded-[3px] shrink-0'
className='shrink-0 rounded-[3px]'
size='xs'
icon={icon?.content}
background={icon?.background}
@@ -58,35 +58,35 @@ const Tool: FC<Props> = ({
const icon = getIcon(name, allToolIcons) as any
return (
<div>
<div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto bg-white rounded-md')}>
<div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto rounded-md bg-white')}>
<div
className={cn('flex items-center h-7 px-2 cursor-pointer')}
className={cn('flex h-7 cursor-pointer items-center px-2')}
onClick={() => setIsShowDetail(!isShowDetail)}
>
{!isFinished && (
<RiLoader2Line className='w-3 h-3 text-gray-500 animate-spin shrink-0' />
<RiLoader2Line className='h-3 w-3 shrink-0 animate-spin text-gray-500' />
)}
{isFinished && !isShowDetail && (
<CheckCircle className='w-3 h-3 text-[#12B76A] shrink-0' />
<CheckCircle className='h-3 w-3 shrink-0 text-[#12B76A]' />
)}
{isFinished && isShowDetail && (
icon
)}
<span className='mx-1 text-xs font-medium text-gray-500 shrink-0'>
<span className='mx-1 shrink-0 text-xs font-medium text-gray-500'>
{t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
</span>
<span
className='text-xs font-medium text-gray-700 truncate'
className='truncate text-xs font-medium text-gray-700'
title={toolLabel}
>
{toolLabel}
</span>
<RiArrowDownSLine
className={cn(isShowDetail && 'rotate-180', 'ml-1 w-3 h-3 text-gray-500 select-none cursor-pointer shrink-0')}
className={cn(isShowDetail && 'rotate-180', 'ml-1 h-3 w-3 shrink-0 cursor-pointer select-none text-gray-500')}
/>
</div>
{isShowDetail && (
<div className='border-t border-black/5 p-2 space-y-2 '>
<div className='space-y-2 border-t border-black/5 p-2 '>
<Panel
isRequest={true}
toolName={toolName}

8
web/app/components/base/chat/chat/try-to-ask.tsx
View File

@@ -20,10 +20,10 @@ const TryToAsk: FC<TryToAskProps> = ({
return (
<div className='mb-2 py-2'>
<div className={cn('flex items-center justify-between gap-2 mb-2.5', isMobile && 'justify-end')}>
<Divider bgStyle='gradient' className='grow h-px rotate-180' />
<div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</div>
{!isMobile && <Divider bgStyle='gradient' className='grow h-px' />}
<div className={cn('mb-2.5 flex items-center justify-between gap-2', isMobile && 'justify-end')}>
<Divider bgStyle='gradient' className='h-px grow rotate-180' />
<div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</div>
{!isMobile && <Divider bgStyle='gradient' className='h-px grow' />}
</div>
<div className={cn('flex flex-wrap justify-center', isMobile && 'justify-end')}>
{

22
web/app/components/base/chat/chat/type.ts
View File

@@ -4,13 +4,13 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
import type { InputVarType } from '@/app/components/workflow/types'
import type { FileResponse } from '@/types/workflow'
export interface MessageMore {
export type MessageMore = {
time: string
tokens: number
latency: number | string
}
export interface FeedbackType {
export type FeedbackType = {
rating: MessageRating
content?: string | null
}
@@ -26,7 +26,7 @@ export type SubmitAnnotationFunc = (
export type DisplayScene = 'web' | 'console'
export interface ToolInfoInThought {
export type ToolInfoInThought = {
name: string
label: string
input: string
@@ -34,7 +34,7 @@ export interface ToolInfoInThought {
isFinished: boolean
}
export interface ThoughtItem {
export type ThoughtItem = {
id: string
tool: string // plugin or dataset. May has multi.
thought: string
@@ -47,7 +47,7 @@ export interface ThoughtItem {
message_files?: FileEntity[]
}
export interface CitationItem {
export type CitationItem = {
content: string
data_source_type: string
dataset_name: string
@@ -62,7 +62,7 @@ export interface CitationItem {
word_count: number
}
export interface IChatItem {
export type IChatItem = {
id: string
content: string
citation?: CitationItem[]
@@ -104,7 +104,7 @@ export interface IChatItem {
nextSibling?: string
}
export interface Metadata {
export type Metadata = {
retriever_resources?: CitationItem[]
annotation_reply: {
id: string
@@ -115,20 +115,20 @@ export interface Metadata {
}
}
export interface MessageEnd {
export type MessageEnd = {
id: string
metadata: Metadata
files?: FileResponse[]
}
export interface MessageReplace {
export type MessageReplace = {
id: string
task_id: string
answer: string
conversation_id: string
}
export interface AnnotationReply {
export type AnnotationReply = {
id: string
task_id: string
answer: string
@@ -137,7 +137,7 @@ export interface AnnotationReply {
annotation_author_name: string
}
export interface InputForm {
export type InputForm = {
type: InputVarType
label: string
variable: any

12
web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
View File

@@ -187,8 +187,8 @@ const ChatWrapper = () => {
return null
if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
return (
<div className='h-[50vh] py-12 px-4 flex items-center justify-center'>
<div className='grow max-w-[720px] flex gap-4'>
<div className='flex h-[50vh] items-center justify-center px-4 py-12'>
<div className='flex max-w-[720px] grow gap-4'>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -196,7 +196,7 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='grow px-4 py-3 bg-chat-bubble-bg text-text-primary rounded-2xl body-lg-regular'>
<div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
<Markdown content={welcomeMessage.content} />
<SuggestedQuestions item={welcomeMessage} />
</div>
@@ -205,7 +205,7 @@ const ChatWrapper = () => {
)
}
return (
<div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
<div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -213,8 +213,8 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='px-4 max-w-[768px]'>
<Markdown className='!text-text-tertiary !body-2xl-regular' content={welcomeMessage.content} />
<div className='max-w-[768px] px-4'>
<Markdown className='!body-2xl-regular !text-text-tertiary' content={welcomeMessage.content} />
</div>
</div>
)

16
web/app/components/base/chat/embedded-chatbot/header/index.tsx
View File

@@ -36,17 +36,17 @@ const Header: FC<IHeaderProps> = ({
} = useEmbeddedChatbotContext()
if (!isMobile) {
return (
<div className='shrink-0 h-14 p-3 flex items-center justify-end'>
<div className='flex h-14 shrink-0 items-center justify-end p-3'>
<div className='flex items-center gap-1'>
{/* powered by */}
<div className='shrink-0'>
{!appData?.custom_config?.remove_webapp_brand && (
<div className={cn(
'shrink-0 px-2 flex items-center gap-1.5',
'flex shrink-0 items-center gap-1.5 px-2',
)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
{appData?.custom_config?.replace_webapp_logo && (
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
)}
{!appData?.custom_config?.replace_webapp_logo && (
<LogoSite className='!h-5' />
@@ -62,7 +62,7 @@ const Header: FC<IHeaderProps> = ({
popupContent={t('share.chat.resetChat')}
>
<ActionButton size='l' onClick={onCreateNewChat}>
<RiResetLeftLine className='w-[18px] h-[18px]' />
<RiResetLeftLine className='h-[18px] w-[18px]' />
</ActionButton>
</Tooltip>
)}
@@ -76,10 +76,10 @@ const Header: FC<IHeaderProps> = ({
return (
<div
className={cn('shrink-0 flex items-center justify-between h-14 px-3 rounded-t-2xl')}
className={cn('flex h-14 shrink-0 items-center justify-between rounded-t-2xl px-3')}
style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? '')) }
>
<div className="grow flex items-center space-x-3">
<div className="flex grow items-center space-x-3">
{customerIcon}
<div
className='system-md-semibold truncate'
@@ -94,7 +94,7 @@ const Header: FC<IHeaderProps> = ({
popupContent={t('share.chat.resetChat')}
>
<ActionButton size='l' onClick={onCreateNewChat}>
<RiResetLeftLine className={cn('w-[18px] h-[18px]', theme?.colorPathOnHeader)} />
<RiResetLeftLine className={cn('h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
</ActionButton>
</Tooltip>
)}

16
web/app/components/base/chat/embedded-chatbot/index.tsx
View File

@@ -56,7 +56,7 @@ const Chatbot = () => {
{!isMobile && <Loading type='app' />}
{isMobile && (
<div className={cn('relative')}>
<div className={cn('flex flex-col h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border rounded-2xl shadow-xs')}>
<div className={cn('flex h-[calc(100vh_-_60px)] flex-col rounded-2xl border-[0.5px] border-components-panel-border shadow-xs')}>
<Loading type='app' />
</div>
</div>
@@ -71,7 +71,7 @@ const Chatbot = () => {
{!isMobile && <AppUnavailable />}
{isMobile && (
<div className={cn('relative')}>
<div className={cn('flex flex-col h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border rounded-2xl shadow-xs')}>
<div className={cn('flex h-[calc(100vh_-_60px)] flex-col rounded-2xl border-[0.5px] border-components-panel-border shadow-xs')}>
<AppUnavailable />
</div>
</div>
@@ -83,7 +83,7 @@ const Chatbot = () => {
<div className='relative'>
<div
className={cn(
'flex flex-col border border-components-panel-border-subtle rounded-2xl',
'flex flex-col rounded-2xl border border-components-panel-border-subtle',
isMobile ? 'h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border shadow-xs' : 'h-[100vh] bg-chatbot-bg',
)}
style={isMobile ? Object.assign({}, CssTransform(themeBuilder?.theme?.backgroundHeaderColorStyle ?? '')) : {}}
@@ -95,7 +95,7 @@ const Chatbot = () => {
theme={themeBuilder?.theme}
onCreateNewChat={handleNewConversation}
/>
<div className={cn('grow flex flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)] bg-chatbot-bg rounded-2xl')}>
<div className={cn('flex grow flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)] rounded-2xl bg-chatbot-bg')}>
{appChatListDataLoading && (
<Loading type='app' />
)}
@@ -106,14 +106,14 @@ const Chatbot = () => {
</div>
{/* powered by */}
{isMobile && (
<div className='shrink-0 h-[60px] pl-2 flex items-center'>
<div className='flex h-[60px] shrink-0 items-center pl-2'>
{!appData?.custom_config?.remove_webapp_brand && (
<div className={cn(
'shrink-0 px-2 flex items-center gap-1.5',
'flex shrink-0 items-center gap-1.5 px-2',
)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
{appData?.custom_config?.replace_webapp_logo && (
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
)}
{!appData?.custom_config?.replace_webapp_logo && (
<LogoSite className='!h-5' />

8
web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
View File

@@ -36,10 +36,10 @@ const InputsFormContent = ({ showTip }: Props) => {
<div className='space-y-4'>
{inputsForms.map(form => (
<div key={form.variable} className='space-y-1'>
<div className='h-6 flex items-center gap-1'>
<div className='text-text-secondary system-md-semibold'>{form.label}</div>
<div className='flex h-6 items-center gap-1'>
<div className='system-md-semibold text-text-secondary'>{form.label}</div>
{!form.required && (
<div className='text-text-tertiary system-xs-regular'>{t('appDebug.variableTable.optional')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
)}
</div>
{form.type === InputVarType.textInput && (
@@ -109,7 +109,7 @@ const InputsFormContent = ({ showTip }: Props) => {
</div>
))}
{showTip && (
<div className='text-text-tertiary system-xs-regular'>{t('share.chat.chatFormTip')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('share.chat.chatFormTip')}</div>
)}
</div>
)

22
web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
View File

@@ -25,23 +25,23 @@ const InputsFormNode = ({
} = useEmbeddedChatbotContext()
return (
<div className={cn('mb-6 pt-6 px-4 flex flex-col items-center', isMobile && 'mb-4 pt-4')}>
<div className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4')}>
<div className={cn(
'w-full max-w-[672px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-md',
collapsed && 'bg-components-card-bg border border-components-card-border shadow-none',
'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
)}>
<div className={cn(
'flex items-center gap-3 px-6 py-4 rounded-t-2xl',
'flex items-center gap-3 rounded-t-2xl px-6 py-4',
!collapsed && 'border-b border-divider-subtle',
isMobile && 'px-4 py-3',
)}>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
{collapsed && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
)}
{!collapsed && currentConversationId && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
)}
</div>
{!collapsed && (
@@ -67,9 +67,9 @@ const InputsFormNode = ({
)}
</div>
{collapsed && (
<div className='py-4 flex items-center w-full max-w-[720px]'>
<Divider bgStyle='gradient' className='basis-1/2 h-px rotate-180' />
<Divider bgStyle='gradient' className='basis-1/2 h-px' />
<div className='flex w-full max-w-[720px] items-center py-4'>
<Divider bgStyle='gradient' className='h-px basis-1/2 rotate-180' />
<Divider bgStyle='gradient' className='h-px basis-1/2' />
</div>
)}
</div>

10
web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
View File

@@ -30,14 +30,14 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
onClick={() => setOpen(v => !v)}
>
<ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiChatSettingsLine className={cn('w-[18px] h-[18px]', iconColor)} />
<RiChatSettingsLine className={cn('h-[18px] w-[18px]', iconColor)} />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div className='w-[400px] bg-components-panel-bg backdrop-blur-sm rounded-2xl border-[0.5px] border-components-panel-border shadow-lg'>
<div className='flex items-center gap-3 px-6 py-4 rounded-t-2xl border-b border-divider-subtle'>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<div className='w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'>
<div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4'>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
</div>
<div className='p-6'>
<InputsFormContent showTip />

6
web/app/components/base/chat/embedded-chatbot/theme/utils.ts
View File

@@ -1,9 +1,9 @@
export function hexToRGBA(hex: string, opacity: number): string {
hex = hex.replace('#', '')
const r = parseInt(hex.slice(0, 2), 16)
const g = parseInt(hex.slice(2, 4), 16)
const b = parseInt(hex.slice(4, 6), 16)
const r = Number.parseInt(hex.slice(0, 2), 16)
const g = Number.parseInt(hex.slice(2, 4), 16)
const b = Number.parseInt(hex.slice(4, 6), 16)
// Returning an RGB color object
return `rgba(${r},${g},${b},${opacity.toString()})`