diff --git a/apps/console/src/components/prompts/editor/chat/ChatEditMode.tsx b/apps/console/src/components/prompts/editor/chat/ChatEditMode.tsx
index 40a27027..c34f493c 100644
--- a/apps/console/src/components/prompts/editor/chat/ChatEditMode.tsx
+++ b/apps/console/src/components/prompts/editor/chat/ChatEditMode.tsx
@@ -4,11 +4,17 @@ import { useCurrentPrompt } from "~/lib/providers/CurrentPromptContext";
import { useEditorContext } from "~/lib/providers/EditorContext";
import { Button } from "@pezzo/ui";
import { PlusIcon } from "lucide-react";
+import {
+ DragDropContext,
+ Droppable,
+ Draggable,
+ DropResult,
+} from "react-beautiful-dnd";
export const ChatEditMode = () => {
const { promptId } = useCurrentPrompt();
const { messagesArray } = useEditorContext();
- const { fields, append, remove } = messagesArray;
+ const { fields, append, remove, move } = messagesArray;
const handleAdd = () => {
append({
@@ -21,21 +27,49 @@ export const ChatEditMode = () => {
});
};
+ const onDragEnd = (result: DropResult) => {
+ if (!result.destination) {
+ return;
+ }
+
+ move(result.source.index, result.destination.index);
+ };
+
return (
- {fields.map((field, index) => (
-
{
- remove(index);
- trackEvent("prompt_chat_completion_message_deleted", {
- promptId,
- });
- }}
- />
- ))}
+
+
+ {(provided) => (
+
+ {fields.map((field, index) => (
+
+ {(provided) => (
+
+ {
+ remove(index);
+ trackEvent("prompt_chat_completion_message_deleted", {
+ promptId,
+ });
+ }}
+ />
+
+ )}
+
+ ))}
+ {provided.placeholder}
+
+ )}
+
+