Chore: frontend infrastructure upgrade (#16420)
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:
@@ -44,7 +44,7 @@ export const usePromptOptions = (
|
||||
render: ({ isSelected, onSelect, onSetHighlight }) => {
|
||||
return <PromptMenuItem
|
||||
title={t('common.promptEditor.context.item.title')}
|
||||
icon={<File05 className='w-4 h-4 text-[#6938EF]' />}
|
||||
icon={<File05 className='h-4 w-4 text-[#6938EF]' />}
|
||||
disabled={!contextBlock.selectable}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
@@ -68,7 +68,7 @@ export const usePromptOptions = (
|
||||
return (
|
||||
<PromptMenuItem
|
||||
title={t('common.promptEditor.query.item.title')}
|
||||
icon={<UserEdit02 className='w-4 h-4 text-[#FD853A]' />}
|
||||
icon={<UserEdit02 className='h-4 w-4 text-[#FD853A]' />}
|
||||
disabled={!queryBlock.selectable}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
@@ -94,7 +94,7 @@ export const usePromptOptions = (
|
||||
return (
|
||||
<PromptMenuItem
|
||||
title={t('common.promptEditor.history.item.title')}
|
||||
icon={<MessageClockCircle className='w-4 h-4 text-[#DD2590]' />}
|
||||
icon={<MessageClockCircle className='h-4 w-4 text-[#DD2590]' />}
|
||||
disabled={!historyBlock.selectable
|
||||
}
|
||||
isSelected={isSelected}
|
||||
@@ -133,7 +133,7 @@ export const useVariableOptions = (
|
||||
return (
|
||||
<VariableMenuItem
|
||||
title={item.value}
|
||||
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
|
||||
icon={<BracketsX className='h-[14px] w-[14px] text-text-accent' />}
|
||||
queryString={queryString}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
@@ -162,7 +162,7 @@ export const useVariableOptions = (
|
||||
return (
|
||||
<VariableMenuItem
|
||||
title={t('common.promptEditor.variable.modal.add')}
|
||||
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
|
||||
icon={<BracketsX className='h-[14px] w-[14px] text-text-accent' />}
|
||||
queryString={queryString}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
@@ -206,7 +206,7 @@ export const useExternalToolOptions = (
|
||||
title={item.name}
|
||||
icon={
|
||||
<AppIcon
|
||||
className='!w-[14px] !h-[14px]'
|
||||
className='!h-[14px] !w-[14px]'
|
||||
icon={item.icon}
|
||||
background={item.icon_background}
|
||||
/>
|
||||
@@ -240,8 +240,8 @@ export const useExternalToolOptions = (
|
||||
return (
|
||||
<VariableMenuItem
|
||||
title={t('common.promptEditor.variable.modal.addTool')}
|
||||
icon={<Tool03 className='w-[14px] h-[14px] text-text-accent' />}
|
||||
extraElement={< ArrowUpRight className='w-3 h-3 text-text-tertiary' />}
|
||||
icon={<Tool03 className='h-[14px] w-[14px] text-text-accent' />}
|
||||
extraElement={< ArrowUpRight className='h-3 w-3 text-text-tertiary' />}
|
||||
queryString={queryString}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
|
@@ -133,9 +133,9 @@ const ComponentPicker = ({
|
||||
// The `LexicalMenu` will try to calculate the position of the floating menu based on the first child.
|
||||
// Since we use floating ui, we need to wrap it with a div to prevent the position calculation being affected.
|
||||
// See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
|
||||
<div className='w-0 h-0'>
|
||||
<div className='h-0 w-0'>
|
||||
<div
|
||||
className='p-1 w-[260px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'
|
||||
className='w-[260px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'
|
||||
style={{
|
||||
...floatingStyles,
|
||||
visibility: isPositioned ? 'visible' : 'hidden',
|
||||
@@ -148,7 +148,7 @@ const ComponentPicker = ({
|
||||
{
|
||||
// Divider
|
||||
index !== 0 && options.at(index - 1)?.group !== option.group && (
|
||||
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
|
||||
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
||||
)
|
||||
}
|
||||
{option.renderMenuOption({
|
||||
@@ -169,7 +169,7 @@ const ComponentPicker = ({
|
||||
<>
|
||||
{
|
||||
(!!options.length) && (
|
||||
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
|
||||
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
|
||||
)
|
||||
}
|
||||
<div className='p-1'>
|
||||
|
@@ -19,7 +19,7 @@ export class PickerBlockMenuOption extends MenuOption {
|
||||
key: string
|
||||
group?: string
|
||||
onSelect?: () => void
|
||||
render: (menuRenderProps: MenuOptionRenderProps) => JSX.Element
|
||||
render: (menuRenderProps: MenuOptionRenderProps) => React.JSX.Element
|
||||
},
|
||||
) {
|
||||
super(data.key)
|
||||
|
@@ -1,7 +1,7 @@
|
||||
import { memo } from 'react'
|
||||
|
||||
type PromptMenuItemMenuItemProps = {
|
||||
icon: JSX.Element
|
||||
icon: React.JSX.Element
|
||||
title: string
|
||||
disabled?: boolean
|
||||
isSelected: boolean
|
||||
@@ -21,9 +21,9 @@ export const PromptMenuItem = memo(({
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
flex items-center px-3 h-6 cursor-pointer hover:bg-state-base-hover rounded-md
|
||||
flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
|
||||
${isSelected && !disabled && '!bg-state-base-hover'}
|
||||
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-state-base-hover cursor-pointer'}
|
||||
${disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer hover:bg-state-base-hover'}
|
||||
`}
|
||||
tabIndex={-1}
|
||||
ref={setRefElement}
|
||||
|
@@ -2,8 +2,8 @@ import { memo } from 'react'
|
||||
|
||||
type VariableMenuItemProps = {
|
||||
title: string
|
||||
icon?: JSX.Element
|
||||
extraElement?: JSX.Element
|
||||
icon?: React.JSX.Element
|
||||
extraElement?: React.JSX.Element
|
||||
isSelected: boolean
|
||||
queryString: string | null
|
||||
onClick: () => void
|
||||
@@ -38,7 +38,7 @@ export const VariableMenuItem = memo(({
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
flex items-center px-3 h-6 rounded-md hover:bg-state-base-hover cursor-pointer
|
||||
flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
|
||||
${isSelected && 'bg-state-base-hover'}
|
||||
`}
|
||||
tabIndex={-1}
|
||||
@@ -48,7 +48,7 @@ export const VariableMenuItem = memo(({
|
||||
<div className='mr-2'>
|
||||
{icon}
|
||||
</div>
|
||||
<div className='grow text-[13px] text-text-secondary truncate' title={title}>
|
||||
<div className='grow truncate text-[13px] text-text-secondary' title={title}>
|
||||
{before}
|
||||
<span className='text-text-accent'>{middle}</span>
|
||||
{after}
|
||||
|
Reference in New Issue
Block a user