Skip to content

Commit de7f2d3

Browse files
sanmaopepsanmaopep
authored
feat(material): prompt-editor with variables (bytedance#445)
* feat: init prompt editor * feat: simple prompt editor * feat: split prompt editor * feat: fix-layout prompt editor
1 parent 800a820 commit de7f2d3

File tree

21 files changed

+1583
-80
lines changed

21 files changed

+1583
-80
lines changed

‎apps/demo-fixed-layout/src/form-components/form-inputs/index.tsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-License-Identifier: MIT
44
*/
55

6-
import { DynamicValueInput } from '@flowgram.ai/form-materials';
6+
import { DynamicValueInput, PromptEditorWithVariables } from '@flowgram.ai/form-materials';
77
import { Field } from '@flowgram.ai/fixed-layout-editor';
88

99
import { FormItem } from '../form-item';
@@ -13,6 +13,7 @@ import { useNodeRenderContext } from '../../hooks';
1313

1414
export function FormInputs() {
1515
const { readonly } = useNodeRenderContext();
16+
1617
return (
1718
<Field<JsonSchema> name="inputs">
1819
{({ field: inputsField }) => {
@@ -23,21 +24,39 @@ export function FormInputs() {
2324
}
2425
const content = Object.keys(properties).map((key) => {
2526
const property = properties[key];
27+
28+
const formComponent = property.extra?.formComponent;
29+
30+
const vertical = ['prompt-editor'].includes(formComponent || '');
31+
2632
return (
2733
<Field key={key} name={`inputsValues.${key}`} defaultValue={property.default}>
2834
{({ field, fieldState }) => (
2935
<FormItem
3036
name={key}
37+
vertical={vertical}
3138
type={property.type as string}
3239
required={required.includes(key)}
3340
>
34-
<DynamicValueInput
35-
value={field.value}
36-
onChange={field.onChange}
37-
readonly={readonly}
38-
hasError={Object.keys(fieldState?.errors || {}).length > 0}
39-
schema={property}
40-
/>
41+
{formComponent === 'prompt-editor' && (
42+
<PromptEditorWithVariables
43+
value={field.value}
44+
onChange={field.onChange}
45+
readonly={readonly}
46+
hasError={Object.keys(fieldState?.errors || {}).length > 0}
47+
/>
48+
)}
49+
{!formComponent && (
50+
<DynamicValueInput
51+
value={field.value}
52+
onChange={field.onChange}
53+
readonly={readonly}
54+
hasError={Object.keys(fieldState?.errors || {}).length > 0}
55+
constantProps={{
56+
schema: property,
57+
}}
58+
/>
59+
)}
4160
<Feedback errors={fieldState?.errors} warnings={fieldState?.warnings} />
4261
</FormItem>
4362
)}

‎apps/demo-fixed-layout/src/form-components/form-item/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ interface FormItemProps {
1919
required?: boolean;
2020
description?: string;
2121
labelWidth?: number;
22+
vertical?: boolean;
2223
}
2324
export function FormItem({
2425
children,
@@ -27,6 +28,7 @@ export function FormItem({
2728
description,
2829
type,
2930
labelWidth,
31+
vertical,
3032
}: FormItemProps): JSX.Element {
3133
const renderTitle = useCallback(
3234
(showTooltip?: boolean) => (
@@ -47,9 +49,13 @@ export function FormItem({
4749
width: '100%',
4850
position: 'relative',
4951
display: 'flex',
50-
justifyContent: 'center',
51-
alignItems: 'center',
5252
gap: 8,
53+
...(vertical
54+
? { flexDirection: 'column' }
55+
: {
56+
justifyContent: 'center',
57+
alignItems: 'center',
58+
}),
5359
}}
5460
>
5561
<div

‎apps/demo-fixed-layout/src/initial-data.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const initialData: FlowDocumentJSON = {
5959
},
6060
systemPrompt: {
6161
type: 'constant',
62-
content: 'You are an AI assistant.',
62+
content: '# Role\nYou are an AI assistant.\n',
6363
},
6464
prompt: {
6565
type: 'constant',
@@ -78,9 +78,11 @@ export const initialData: FlowDocumentJSON = {
7878
},
7979
systemPrompt: {
8080
type: 'string',
81+
extra: { formComponent: 'prompt-editor' },
8182
},
8283
prompt: {
8384
type: 'string',
85+
extra: { formComponent: 'prompt-editor' },
8486
},
8587
},
8688
},

‎apps/demo-fixed-layout/src/nodes/llm/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
3535
},
3636
systemPrompt: {
3737
type: 'constant',
38-
content: 'You are an AI assistant.',
38+
content: '# Role\nYou are an AI assistant.\n',
3939
},
4040
prompt: {
4141
type: 'constant',
@@ -54,9 +54,11 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
5454
},
5555
systemPrompt: {
5656
type: 'string',
57+
extra: { formComponent: 'prompt-editor' },
5758
},
5859
prompt: {
5960
type: 'string',
61+
extra: { formComponent: 'prompt-editor' },
6062
},
6163
},
6264
},

‎apps/demo-free-layout/src/form-components/form-inputs/index.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { Field } from '@flowgram.ai/free-layout-editor';
7-
import { DynamicValueInput } from '@flowgram.ai/form-materials';
7+
import { DynamicValueInput, PromptEditorWithVariables } from '@flowgram.ai/form-materials';
88

99
import { FormItem } from '../form-item';
1010
import { Feedback } from '../feedback';
@@ -13,6 +13,7 @@ import { useNodeRenderContext } from '../../hooks';
1313

1414
export function FormInputs() {
1515
const { readonly } = useNodeRenderContext();
16+
1617
return (
1718
<Field<JsonSchema> name="inputs">
1819
{({ field: inputsField }) => {
@@ -23,23 +24,39 @@ export function FormInputs() {
2324
}
2425
const content = Object.keys(properties).map((key) => {
2526
const property = properties[key];
27+
28+
const formComponent = property.extra?.formComponent;
29+
30+
const vertical = ['prompt-editor'].includes(formComponent || '');
31+
2632
return (
2733
<Field key={key} name={`inputsValues.${key}`} defaultValue={property.default}>
2834
{({ field, fieldState }) => (
2935
<FormItem
3036
name={key}
37+
vertical={vertical}
3138
type={property.type as string}
3239
required={required.includes(key)}
3340
>
34-
<DynamicValueInput
35-
value={field.value}
36-
onChange={field.onChange}
37-
readonly={readonly}
38-
hasError={Object.keys(fieldState?.errors || {}).length > 0}
39-
constantProps={{
40-
schema: property,
41-
}}
42-
/>
41+
{formComponent === 'prompt-editor' && (
42+
<PromptEditorWithVariables
43+
value={field.value}
44+
onChange={field.onChange}
45+
readonly={readonly}
46+
hasError={Object.keys(fieldState?.errors || {}).length > 0}
47+
/>
48+
)}
49+
{!formComponent && (
50+
<DynamicValueInput
51+
value={field.value}
52+
onChange={field.onChange}
53+
readonly={readonly}
54+
hasError={Object.keys(fieldState?.errors || {}).length > 0}
55+
constantProps={{
56+
schema: property,
57+
}}
58+
/>
59+
)}
4360
<Feedback errors={fieldState?.errors} warnings={fieldState?.warnings} />
4461
</FormItem>
4562
)}

‎apps/demo-free-layout/src/initial-data.ts‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export const initialData: FlowDocumentJSON = {
181181
},
182182
systemPrompt: {
183183
type: 'constant',
184-
content: 'You are an AI assistant.',
184+
content: '# Role\nYou are an AI assistant.\n',
185185
},
186186
prompt: {
187187
type: 'constant',
@@ -206,9 +206,15 @@ export const initialData: FlowDocumentJSON = {
206206
},
207207
systemPrompt: {
208208
type: 'string',
209+
extra: {
210+
formComponent: 'prompt-editor',
211+
},
209212
},
210213
prompt: {
211214
type: 'string',
215+
extra: {
216+
formComponent: 'prompt-editor',
217+
},
212218
},
213219
},
214220
},
@@ -252,7 +258,7 @@ export const initialData: FlowDocumentJSON = {
252258
},
253259
systemPrompt: {
254260
type: 'constant',
255-
content: 'You are an AI assistant.',
261+
content: '# Role\nYou are an AI assistant.\n',
256262
},
257263
prompt: {
258264
type: 'constant',
@@ -277,9 +283,15 @@ export const initialData: FlowDocumentJSON = {
277283
},
278284
systemPrompt: {
279285
type: 'string',
286+
extra: {
287+
formComponent: 'prompt-editor',
288+
},
280289
},
281290
prompt: {
282291
type: 'string',
292+
extra: {
293+
formComponent: 'prompt-editor',
294+
},
283295
},
284296
},
285297
},
@@ -342,7 +354,7 @@ export const initialData: FlowDocumentJSON = {
342354
},
343355
systemPrompt: {
344356
type: 'constant',
345-
content: 'You are an AI assistant.',
357+
content: '# Role\nYou are an AI assistant.\n',
346358
},
347359
prompt: {
348360
type: 'constant',
@@ -367,9 +379,15 @@ export const initialData: FlowDocumentJSON = {
367379
},
368380
systemPrompt: {
369381
type: 'string',
382+
extra: {
383+
formComponent: 'prompt-editor',
384+
},
370385
},
371386
prompt: {
372387
type: 'string',
388+
extra: {
389+
formComponent: 'prompt-editor',
390+
},
373391
},
374392
},
375393
},
@@ -413,7 +431,7 @@ export const initialData: FlowDocumentJSON = {
413431
},
414432
systemPrompt: {
415433
type: 'constant',
416-
content: 'You are an AI assistant.',
434+
content: '# Role\nYou are an AI assistant.\n',
417435
},
418436
prompt: {
419437
type: 'constant',
@@ -438,9 +456,15 @@ export const initialData: FlowDocumentJSON = {
438456
},
439457
systemPrompt: {
440458
type: 'string',
459+
extra: {
460+
formComponent: 'prompt-editor',
461+
},
441462
},
442463
prompt: {
443464
type: 'string',
465+
extra: {
466+
formComponent: 'prompt-editor',
467+
},
444468
},
445469
},
446470
},

‎apps/demo-free-layout/src/nodes/llm/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
4848
},
4949
systemPrompt: {
5050
type: 'constant',
51-
content: 'You are an AI assistant.',
51+
content: '# Role\nYou are an AI assistant.\n',
5252
},
5353
prompt: {
5454
type: 'constant',
@@ -73,9 +73,15 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
7373
},
7474
systemPrompt: {
7575
type: 'string',
76+
extra: {
77+
formComponent: 'prompt-editor',
78+
},
7679
},
7780
prompt: {
7881
type: 'string',
82+
extra: {
83+
formComponent: 'prompt-editor',
84+
},
7985
},
8086
},
8187
},

0 commit comments

Comments
 (0)