jprdonnelly/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-12-25 01:00:42 -05:00
Code Issues 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

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()})`