Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/prompt editor dark theme #12976

Merged
merged 2 commits into from
Jan 23, 2025
+32 −27
Merged

Feat/prompt editor dark theme #12976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bcf7c0
feat: prompt editor dark theme
zxhlyh Jan 22, 2025
052bdfc
feat: prompt editor dark theme
zxhlyh Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/app/components/base/prompt-editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
<LexicalComposer initialConfig={{ ...initialConfig, editable }}>
<div className='relative min-h-5'>
<RichTextPlugin
contentEditable={<ContentEditable className={`${className} outline-none ${compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm'} text-gray-700`} style={style || {}} />}
contentEditable={<ContentEditable className={`${className} outline-none ${compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm'} text-text-secondary`} style={style || {}} />}
placeholder={<Placeholder value={placeholder} className={cn('truncate', placeholderClassName)} compact={compact} />}
ErrorBoundary={LexicalErrorBoundary}
/>
Expand Down
10 changes: 5 additions & 5 deletions web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={item.value}
icon={<BracketsX className='w-[14px] h-[14px] text-[#2970FF]' />}
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
Expand Down Expand Up @@ -162,7 +162,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.add')}
icon={<BracketsX className='mr-2 w-[14px] h-[14px] text-[#2970FF]' />}
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
Expand Down Expand Up @@ -211,7 +211,7 @@ export const useExternalToolOptions = (
background={item.icon_background}
/>
}
extraElement={<div className='text-xs text-gray-400'>{item.variableName}</div>}
extraElement={<div className='text-xs text-text-tertiary'>{item.variableName}</div>}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
Expand Down Expand Up @@ -240,8 +240,8 @@ export const useExternalToolOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.addTool')}
icon={<Tool03 className='mr-2 w-[14px] h-[14px] text-[#444CE7]' />}
extraElement={< ArrowUpRight className='w-3 h-3 text-gray-400' />}
icon={<Tool03 className='w-[14px] h-[14px] text-text-accent' />}
extraElement={< ArrowUpRight className='w-3 h-3 text-text-tertiary' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
Expand Down
6 changes: 3 additions & 3 deletions web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const ComponentPicker = ({
// See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
<div className='w-0 h-0'>
<div
className='p-1 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'
className='p-1 w-[260px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'
style={{
...floatingStyles,
visibility: isPositioned ? 'visible' : 'hidden',
Expand All @@ -148,7 +148,7 @@ const ComponentPicker = ({
{
// Divider
index !== 0 && options.at(index - 1)?.group !== option.group && (
<div className='h-px bg-gray-100 my-1 w-full -translate-x-1'></div>
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
)
}
{option.renderMenuOption({
Expand All @@ -169,7 +169,7 @@ const ComponentPicker = ({
<>
{
(!!options.length) && (
<div className='h-px bg-gray-100 my-1 w-full -translate-x-1'></div>
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
)
}
<div className='p-1'>
Expand Down
8 changes: 4 additions & 4 deletions web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export const PromptMenuItem = memo(({
return (
<div
className={`
flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50 rounded-md
${isSelected && !disabled && '!bg-gray-50'}
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'}
flex items-center px-3 h-6 cursor-pointer hover:bg-state-base-hover rounded-md
${isSelected && !disabled && '!bg-state-base-hover'}
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-state-base-hover cursor-pointer'}
`}
tabIndex={-1}
ref={setRefElement}
Expand All @@ -38,7 +38,7 @@ export const PromptMenuItem = memo(({
onClick()
}}>
{icon}
<div className='ml-1 text-[13px] text-gray-900'>{title}</div>
<div className='ml-1 text-[13px] text-text-secondary'>{title}</div>
</div>
)
})
Expand Down
8 changes: 4 additions & 4 deletions web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export const VariableMenuItem = memo(({
return (
<div
className={`
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
${isSelected && 'bg-primary-50'}
flex items-center px-3 h-6 rounded-md hover:bg-state-base-hover cursor-pointer
${isSelected && 'bg-state-base-hover'}
`}
tabIndex={-1}
ref={setRefElement}
Expand All @@ -48,9 +48,9 @@ export const VariableMenuItem = memo(({
<div className='mr-2'>
{icon}
</div>
<div className='grow text-[13px] text-gray-900 truncate' title={title}>
<div className='grow text-[13px] text-text-secondary truncate' title={title}>
{before}
<span className='text-[#2970FF]'>{middle}</span>
<span className='text-text-accent'>{middle}</span>
{after}
</div>
{extraElement}
Expand Down
2 changes: 1 addition & 1 deletion web/app/components/base/prompt-editor/plugins/placeholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Placeholder = ({
return (
<div className={cn(
className,
'absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none',
'absolute top-0 left-0 h-full w-full text-sm text-components-input-text-placeholder select-none pointer-events-none',
compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm',
)}>
{value || t('common.promptEditor.placeholder')}
Expand Down
2 changes: 1 addition & 1 deletion web/app/components/base/prompt-editor/plugins/variable-value-block/node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export class VariableValueBlockNode extends TextNode {

createDOM(config: EditorConfig): HTMLElement {
const element = super.createDOM(config)
element.classList.add('inline-flex', 'items-center', 'px-0.5', 'h-[22px]', 'text-[#155EEF]', 'rounded-[5px]', 'align-middle')
element.classList.add('inline-flex', 'items-center', 'px-0.5', 'h-[22px]', 'text-text-accent', 'rounded-[5px]', 'align-middle')
return element
}

Expand Down
21 changes: 13 additions & 8 deletions web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ const WorkflowVariableBlockComponent = ({
<div
className={cn(
'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white',
!node && !isEnv && !isChatVar && '!border-[#F04438] !bg-[#FEF3F2]',
isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
!node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover',
)}
ref={ref}
>
Expand All @@ -88,25 +88,30 @@ const WorkflowVariableBlockComponent = ({
node?.type && (
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-500'
className='!text-text-secondary'
type={node?.type}
/>
</div>
)
}
<div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-gray-500 truncate' title={node?.title} style={{
<div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-text-secondary truncate' title={node?.title} style={{
}}>{node?.title}</div>
<Line3 className='mr-0.5 text-gray-300'></Line3>
<Line3 className='mr-0.5 text-divider-deep'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
<div className='flex items-center text-text-accent'>
{!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />}
{isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('shrink-0 ml-0.5 text-xs font-medium truncate', (isEnv || isChatVar) && 'text-gray-900', isException && 'text-text-warning')} title={varName}>{varName}</div>
<div className={cn(
'shrink-0 ml-0.5 text-xs font-medium truncate',
isEnv && 'text-util-colors-violet-violet-600',
isChatVar && 'text-util-colors-teal-teal-700',
isException && 'text-text-warning',
)} title={varName}>{varName}</div>
{
!node && !isEnv && !isChatVar && (
<RiErrorWarningFill className='ml-0.5 w-3 h-3 text-[#D92D20]' />
<RiErrorWarningFill className='ml-0.5 w-3 h-3 text-text-destructive' />
)
}
</div>
Expand Down
Loading