feat(console): added drag reorder of prompt messages in the prompt ed…

…itor (#276)
pezzolabs · Dec 15, 2023 · d30bbc7 · d30bbc7
1 parent abbb797
commit d30bbc7
Show file tree

Hide file tree

Showing 4 changed files with 263 additions and 30 deletions.
diff --git 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 (
     <div className="flex flex-col gap-4">
-      {fields.map((field, index) => (
-        <ChatMessage
-          key={field.id}
-          index={index}
-          canDelete={fields.length !== 1}
-          onDelete={() => {
-            remove(index);
-            trackEvent("prompt_chat_completion_message_deleted", {
-              promptId,
-            });
-          }}
-        />
-      ))}
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="prompts">
+          {(provided) => (
+            <div ref={provided.innerRef} {...provided.droppableProps}>
+              {fields.map((field, index) => (
+                <Draggable key={field.id} draggableId={field.id} index={index}>
+                  {(provided) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      className="mb-4"
+                    >
+                      <ChatMessage
+                        key={field.id}
+                        index={index}
+                        canDelete={fields.length !== 1}
+                        onDelete={() => {
+                          remove(index);
+                          trackEvent("prompt_chat_completion_message_deleted", {
+                            promptId,
+                          });
+                        }}
+                      />
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
 
       <div className="flex items-center justify-center">
         <Button className="border-dashed" variant="outline" onClick={handleAdd}>

diff --git a/apps/console/src/components/prompts/editor/chat/ChatMessage.tsx b/apps/console/src/components/prompts/editor/chat/ChatMessage.tsx
@@ -16,6 +16,7 @@ import {
 import {
   ArrowDownUpIcon,
   BotIcon,
+  GripVertical,
   LucideIcon,
   TrashIcon,
   UserIcon,
@@ -73,7 +74,8 @@ export const ChatMessage = ({ index, canDelete = true, onDelete }: Props) => {
 
   return (
     <Card className="flex flex-col gap-4 border">
-      <div className="group flex h-14 items-center justify-between border-b border-muted px-4 py-2 font-medium">
+      <div className="group flex h-14 items-center justify-start border-b border-muted px-4 py-2 font-medium">
+        <GripVertical className="-mt-[3px] mr-[2px] h-4 w-4 text-muted-foreground" />
         <DropdownMenu>
           <DropdownMenuTrigger>
             <div className="inline-flex items-center gap-2">
@@ -97,7 +99,7 @@ export const ChatMessage = ({ index, canDelete = true, onDelete }: Props) => {
         {canDelete && (
           <TrashIcon
             onClick={onDelete}
-            className="hidden h-4 w-4 cursor-pointer text-destructive group-hover:inline-flex"
+            className="ml-auto hidden h-4 w-4 cursor-pointer text-destructive group-hover:inline-flex"
           />
         )}
       </div>