From 5bfdecacad8c41221c2875027ba2081833cfbcac Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Mon, 5 Aug 2024 14:53:38 -0700
Subject: [PATCH] fix assistant drag transform effect (#2052)

---
 web/src/app/assistants/mine/AssistantsList.tsx   | 4 +++-
 web/src/components/assistants/AssistantCards.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/app/assistants/mine/AssistantsList.tsx b/web/src/app/assistants/mine/AssistantsList.tsx
index e79a0bd2b..59bf98cd0 100644
--- a/web/src/app/assistants/mine/AssistantsList.tsx
+++ b/web/src/app/assistants/mine/AssistantsList.tsx
@@ -52,7 +52,9 @@ function DraggableAssistantListItem(props: any) {
   } = useSortable({ id: props.assistant.id.toString() });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      : undefined,
     transition,
     opacity: isDragging ? 0.9 : 1,
     zIndex: isDragging ? 1000 : "auto",
diff --git a/web/src/components/assistants/AssistantCards.tsx b/web/src/components/assistants/AssistantCards.tsx
index 586d9fe11..ec71e5951 100644
--- a/web/src/components/assistants/AssistantCards.tsx
+++ b/web/src/components/assistants/AssistantCards.tsx
@@ -94,7 +94,9 @@ export function DraggableAssistantCard(props: {
   } = useSortable({ id: props.assistant.id.toString() });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      : undefined,
     transition,
     opacity: isDragging ? 0.9 : 1,
   };