Skip to content

Commit d00cace

Browse files
author
jiangpeiling
committed
🎨 Inappropriate rendering for examples in generated promt #688 
1 parent 45aff3c commit d00cace

File tree

6 files changed

+741
-568
lines changed

6 files changed

+741
-568
lines changed

‎frontend/app/[locale]/setup/agents/components/PromptManager.tsx‎

Lines changed: 141 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@ import {
88
LoadingOutlined,
99
InfoCircleOutlined,
1010
} from "@ant-design/icons";
11-
import { MilkdownProvider, Milkdown, useEditor } from "@milkdown/react";
12-
import { defaultValueCtx, Editor, rootCtx } from "@milkdown/kit/core";
13-
import { commonmark } from "@milkdown/kit/preset/commonmark";
14-
import { nord } from "@milkdown/theme-nord";
15-
import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
1611

1712
import {
1813
SimplePromptEditorProps,
@@ -24,60 +19,38 @@ import { ModelOption } from "@/types/modelConfig";
2419

2520
import AgentConfigModal from "./agent/AgentConfigModal";
2621

27-
import "@/styles/milkdown-nord.css";
2822
import log from "@/lib/logger";
2923

3024
export function SimplePromptEditor({
3125
value,
3226
onChange,
33-
height = "100%",
27+
height,
28+
bordered = false,
3429
}: SimplePromptEditorProps) {
3530
const [internalValue, setInternalValue] = useState(value);
36-
const [editorKey, setEditorKey] = useState(0);
3731
const isInternalChange = useRef(false);
3832

39-
// Update editor when external value changes
4033
useEffect(() => {
41-
if (value !== internalValue) {
42-
// Only force update editor when change comes from external source
43-
if (!isInternalChange.current) {
44-
setInternalValue(value);
45-
setEditorKey((prev) => prev + 1);
46-
}
34+
if (value !== internalValue && !isInternalChange.current) {
35+
setInternalValue(value);
4736
}
48-
49-
// Reset the flag after each value or internalValue change if marked as internal change.
50-
// This ensures that the next external change can be correctly identified after internal editing.
5137
if (isInternalChange.current) {
5238
isInternalChange.current = false;
5339
}
5440
}, [value, internalValue]);
5541

56-
const { get } = useEditor(
57-
(root) =>
58-
Editor.make()
59-
.config((ctx) => {
60-
ctx.set(rootCtx, root);
61-
ctx.set(defaultValueCtx, internalValue || "");
62-
})
63-
.config(nord)
64-
.use(commonmark)
65-
.use(listener)
66-
.config((ctx) => {
67-
const listenerManager = ctx.get(listenerCtx);
68-
listenerManager.markdownUpdated((ctx, markdown) => {
69-
isInternalChange.current = true;
70-
setInternalValue(markdown);
71-
onChange(markdown);
72-
});
73-
}),
74-
[editorKey]
75-
); // Only recreate when editorKey changes
76-
7742
return (
78-
<div className="milkdown-editor-container" style={{ height }}>
79-
<Milkdown key={editorKey} />
80-
</div>
43+
<Input.TextArea
44+
value={internalValue}
45+
onChange={(e) => {
46+
isInternalChange.current = true;
47+
setInternalValue(e.target.value);
48+
onChange(e.target.value);
49+
}}
50+
style={height ? { height, resize: "none" } : { resize: "none" }}
51+
autoSize={height ? false : { minRows: 8, maxRows: 100 }}
52+
bordered={bordered}
53+
/>
8154
);
8255
}
8356

@@ -164,15 +137,30 @@ function ExpandEditModal({
164137
}}
165138
>
166139
<div
167-
className="flex flex-col"
140+
className="flex flex-col expand-edit-gray-textarea"
168141
style={{ height: `${calculateModalHeight(editContent)}vh` }}
169142
>
170-
<div className="flex-1 border border-gray-200 rounded-md overflow-y-auto">
143+
<style jsx global>{`
144+
.expand-edit-gray-textarea .ant-input,
145+
.expand-edit-gray-textarea .ant-input:hover,
146+
.expand-edit-gray-textarea .ant-input:focus,
147+
.expand-edit-gray-textarea .ant-input-focused,
148+
.expand-edit-gray-textarea .ant-input-textarea,
149+
.expand-edit-gray-textarea .ant-input-textarea:hover,
150+
.expand-edit-gray-textarea .ant-input-textarea:focus,
151+
.expand-edit-gray-textarea .ant-input-textarea:focus-within {
152+
border-color: #d9d9d9 !important;
153+
box-shadow: none !important;
154+
}
155+
`}</style>
156+
<div className="flex-1 min-h-0">
171157
<SimplePromptEditor
172158
value={editContent}
173159
onChange={(newContent) => {
174160
setEditContent(newContent);
175161
}}
162+
bordered={true}
163+
height={"100%"}
176164
/>
177165
</div>
178166
</div>
@@ -268,7 +256,7 @@ export default function PromptManager({
268256
// Modal states
269257
const [expandModalOpen, setExpandModalOpen] = useState(false);
270258
const [expandIndex, setExpandIndex] = useState(0);
271-
259+
272260
// Model selection states
273261
const [availableModels, setAvailableModels] = useState<ModelOption[]>([]);
274262
const [loadingModels, setLoadingModels] = useState(false);
@@ -296,7 +284,7 @@ export default function PromptManager({
296284
const handleModelSelect = (model: ModelOption) => {
297285
onModelSelect?.(model);
298286
setShowModelDropdown(false);
299-
287+
300288
// Auto-trigger generation after model selection
301289
if (onGenerateAgent) {
302290
onGenerateAgent(model);
@@ -309,7 +297,7 @@ export default function PromptManager({
309297
message.warning(t("businessLogic.config.error.noAvailableModels"));
310298
return;
311299
}
312-
300+
313301
setShowModelDropdown(true);
314302
};
315303

@@ -381,55 +369,54 @@ export default function PromptManager({
381369
};
382370

383371
return (
384-
<MilkdownProvider>
385-
<div className="flex flex-col h-full relative">
386-
<style jsx global>{`
387-
@media (max-width: 768px) {
388-
.system-prompt-container {
389-
overflow-y: auto !important;
390-
max-height: none !important;
391-
}
392-
.system-prompt-content {
393-
min-height: auto !important;
394-
max-height: none !important;
395-
}
372+
<div className="flex flex-col h-full relative">
373+
<style jsx global>{`
374+
@media (max-width: 768px) {
375+
.system-prompt-container {
376+
overflow-y: auto !important;
377+
max-height: none !important;
396378
}
397-
@media (max-width: 1024px) {
398-
.system-prompt-business-logic {
399-
min-height: 100px !important;
400-
max-height: 150px !important;
401-
}
379+
.system-prompt-content {
380+
min-height: auto !important;
381+
max-height: none !important;
402382
}
403-
`}</style>
404-
405-
{/* Non-editing mode overlay */}
406-
{!isEditingMode && (
407-
<div className="absolute inset-0 bg-white bg-opacity-95 flex items-center justify-center z-50 transition-all duration-300 ease-out animate-in fade-in-0">
408-
<div className="text-center space-y-4 animate-in fade-in-50 duration-400 delay-50">
409-
<InfoCircleOutlined className="text-6xl text-gray-400 transition-all duration-300 animate-in zoom-in-75 delay-100" />
410-
<div className="animate-in slide-in-from-bottom-2 duration-300 delay-150">
411-
<h3 className="text-lg font-medium text-gray-700 mb-2 transition-all duration-300">
412-
{t("systemPrompt.nonEditing.title")}
413-
</h3>
414-
<p className="text-sm text-gray-500 transition-all duration-300">
415-
{t("systemPrompt.nonEditing.subtitle")}
416-
</p>
417-
</div>
383+
}
384+
@media (max-width: 1024px) {
385+
.system-prompt-business-logic {
386+
min-height: 100px !important;
387+
max-height: 150px !important;
388+
}
389+
}
390+
`}</style>
391+
392+
{/* Non-editing mode overlay */}
393+
{!isEditingMode && (
394+
<div className="absolute inset-0 bg-white bg-opacity-95 flex items-center justify-center z-50 transition-all duration-300 ease-out animate-in fade-in-0">
395+
<div className="text-center space-y-4 animate-in fade-in-50 duration-400 delay-50">
396+
<InfoCircleOutlined className="text-6xl text-gray-400 transition-all duration-300 animate-in zoom-in-75 delay-100" />
397+
<div className="animate-in slide-in-from-bottom-2 duration-300 delay-150">
398+
<h3 className="text-lg font-medium text-gray-700 mb-2 transition-all duration-300">
399+
{t("systemPrompt.nonEditing.title")}
400+
</h3>
401+
<p className="text-sm text-gray-500 transition-all duration-300">
402+
{t("systemPrompt.nonEditing.subtitle")}
403+
</p>
418404
</div>
419405
</div>
420-
)}
406+
</div>
407+
)}
421408

422-
{/* Main title */}
423-
<div className="flex justify-between items-center mb-2">
424-
<div className="flex items-center">
425-
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white text-sm font-medium mr-2">
426-
3
427-
</div>
428-
<h2 className="text-lg font-medium">
429-
{t("guide.steps.describeBusinessLogic.title")}
430-
</h2>
409+
{/* Main title */}
410+
<div className="flex justify-between items-center mb-2">
411+
<div className="flex items-center">
412+
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white text-sm font-medium mr-2">
413+
3
431414
</div>
415+
<h2 className="text-lg font-medium">
416+
{t("guide.steps.describeBusinessLogic.title")}
417+
</h2>
432418
</div>
419+
</div>
433420

434421
{/* Main content */}
435422
<div className="flex-1 flex flex-col border-t pt-2 system-prompt-container overflow-hidden">
@@ -497,72 +484,71 @@ export default function PromptManager({
497484
</div>
498485
</div>
499486

500-
{/* Agent configuration section */}
501-
<div className="flex-1 min-h-0 system-prompt-content">
502-
<AgentConfigModal
503-
agentId={agentId}
504-
dutyContent={dutyContent}
505-
constraintContent={constraintContent}
506-
fewShotsContent={fewShotsContent}
507-
onDutyContentChange={onDutyContentChange}
508-
onConstraintContentChange={onConstraintContentChange}
509-
onFewShotsContentChange={onFewShotsContentChange}
510-
agentName={agentName}
511-
agentDescription={agentDescription}
512-
onAgentNameChange={onAgentNameChange}
513-
onAgentDescriptionChange={onAgentDescriptionChange}
514-
agentDisplayName={agentDisplayName}
515-
onAgentDisplayNameChange={onAgentDisplayNameChange}
516-
isEditingMode={isEditingMode}
517-
mainAgentModel={mainAgentModel}
518-
mainAgentMaxStep={mainAgentMaxStep}
519-
onModelChange={onModelChange}
520-
onMaxStepChange={onMaxStepChange}
521-
onSavePrompt={handleSavePrompt}
522-
onExpandCard={handleExpandCard}
523-
isGeneratingAgent={isGeneratingAgent}
524-
onDebug={onDebug}
525-
onExportAgent={onExportAgent}
526-
onDeleteAgent={onDeleteAgent}
527-
onDeleteSuccess={onDeleteSuccess}
528-
onSaveAgent={onSaveAgent}
529-
isCreatingNewAgent={isCreatingNewAgent}
530-
editingAgent={editingAgent}
531-
canSaveAgent={canSaveAgent}
532-
getButtonTitle={getButtonTitle}
533-
/>
534-
</div>
487+
{/* Agent configuration section */}
488+
<div className="flex-1 min-h-0 system-prompt-content">
489+
<AgentConfigModal
490+
agentId={agentId}
491+
dutyContent={dutyContent}
492+
constraintContent={constraintContent}
493+
fewShotsContent={fewShotsContent}
494+
onDutyContentChange={onDutyContentChange}
495+
onConstraintContentChange={onConstraintContentChange}
496+
onFewShotsContentChange={onFewShotsContentChange}
497+
agentName={agentName}
498+
agentDescription={agentDescription}
499+
onAgentNameChange={onAgentNameChange}
500+
onAgentDescriptionChange={onAgentDescriptionChange}
501+
agentDisplayName={agentDisplayName}
502+
onAgentDisplayNameChange={onAgentDisplayNameChange}
503+
isEditingMode={isEditingMode}
504+
mainAgentModel={mainAgentModel}
505+
mainAgentMaxStep={mainAgentMaxStep}
506+
onModelChange={onModelChange}
507+
onMaxStepChange={onMaxStepChange}
508+
onSavePrompt={handleSavePrompt}
509+
onExpandCard={handleExpandCard}
510+
isGeneratingAgent={isGeneratingAgent}
511+
onDebug={onDebug}
512+
onExportAgent={onExportAgent}
513+
onDeleteAgent={onDeleteAgent}
514+
onDeleteSuccess={onDeleteSuccess}
515+
onSaveAgent={onSaveAgent}
516+
isCreatingNewAgent={isCreatingNewAgent}
517+
editingAgent={editingAgent}
518+
canSaveAgent={canSaveAgent}
519+
getButtonTitle={getButtonTitle}
520+
/>
535521
</div>
536-
537-
{/* Expand edit modal */}
538-
<ExpandEditModal
539-
key={`expand-modal-${expandIndex}-${
540-
expandModalOpen ? "open" : "closed"
541-
}`}
542-
title={
543-
expandIndex === 1
544-
? t("systemPrompt.expandEdit.backgroundInfo")
545-
: expandIndex === 2
546-
? t("systemPrompt.card.duty.title")
547-
: expandIndex === 3
548-
? t("systemPrompt.card.constraint.title")
549-
: t("systemPrompt.card.fewShots.title")
550-
}
551-
open={expandModalOpen}
552-
content={
553-
expandIndex === 1
554-
? businessLogic
555-
: expandIndex === 2
556-
? dutyContent
557-
: expandIndex === 3
558-
? constraintContent
559-
: fewShotsContent
560-
}
561-
index={expandIndex}
562-
onClose={() => setExpandModalOpen(false)}
563-
onSave={handleExpandSave}
564-
/>
565522
</div>
566-
</MilkdownProvider>
523+
524+
{/* Expand edit modal */}
525+
<ExpandEditModal
526+
key={`expand-modal-${expandIndex}-${
527+
expandModalOpen ? "open" : "closed"
528+
}`}
529+
title={
530+
expandIndex === 1
531+
? t("systemPrompt.expandEdit.backgroundInfo")
532+
: expandIndex === 2
533+
? t("systemPrompt.card.duty.title")
534+
: expandIndex === 3
535+
? t("systemPrompt.card.constraint.title")
536+
: t("systemPrompt.card.fewShots.title")
537+
}
538+
open={expandModalOpen}
539+
content={
540+
expandIndex === 1
541+
? businessLogic
542+
: expandIndex === 2
543+
? dutyContent
544+
: expandIndex === 3
545+
? constraintContent
546+
: fewShotsContent
547+
}
548+
index={expandIndex}
549+
onClose={() => setExpandModalOpen(false)}
550+
onSave={handleExpandSave}
551+
/>
552+
</div>
567553
);
568-
}
554+
}

0 commit comments

Comments
 (0)