Feat: Refactor the MessageForm with shadcn #3221 (#7820)

### What problem does this PR solve?

Feat: Refactor the MessageForm with shadcn #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-05-23 18:45:13 +08:00
committed by GitHub
parent 590b9dabab
commit e604634d2a
9 changed files with 94 additions and 90 deletions

View File

@ -19,7 +19,7 @@ import {
import { cn } from '@/lib/utils';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { Variable } from 'lucide-react';
import { useCallback, useState } from 'react';
import { ReactNode, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import theme from './theme';
@ -45,6 +45,7 @@ const Nodes: Array<Klass<LexicalNode>> = [
type IProps = {
value?: string;
onChange?: (value?: string) => void;
placeholder?: ReactNode;
};
function PromptContent() {
@ -99,7 +100,7 @@ function PromptContent() {
);
}
export function PromptEditor({ value, onChange }: IProps) {
export function PromptEditor({ value, onChange, placeholder }: IProps) {
const { t } = useTranslation();
const initialConfig: InitialConfigType = {
namespace: 'PromptEditor',
@ -124,16 +125,25 @@ export function PromptEditor({ value, onChange }: IProps) {
);
return (
<LexicalComposer initialConfig={initialConfig}>
<RichTextPlugin
contentEditable={<PromptContent></PromptContent>}
placeholder={
<div className="absolute top-2 left-2">{t('common.pleaseInput')}</div>
}
ErrorBoundary={LexicalErrorBoundary}
/>
<VariablePickerMenuPlugin value={value}></VariablePickerMenuPlugin>
<VariableOnChangePlugin onChange={onValueChange}></VariableOnChangePlugin>
</LexicalComposer>
<div className="relative">
<LexicalComposer initialConfig={initialConfig}>
<RichTextPlugin
contentEditable={<PromptContent></PromptContent>}
placeholder={
<div
className="absolute top-10 left-2 text-text-sub-title"
data-xxx
>
{placeholder || t('common.pleaseInput')}
</div>
}
ErrorBoundary={LexicalErrorBoundary}
/>
<VariablePickerMenuPlugin value={value}></VariablePickerMenuPlugin>
<VariableOnChangePlugin
onChange={onValueChange}
></VariableOnChangePlugin>
</LexicalComposer>
</div>
);
}