Fix white screen bug when deleting chats under Workspace Chats menu (#…

…681) * use filter instead of ref to delete row from workspace chat component on delete/fix backend invalid json error * remove ref from pagination on embed chats and fix white screen bug * remove unneeded import * normalize response object --------- Co-authored-by: timothycarambat <[email protected]>
Mintplex-Labs · Feb 6, 2024 · 3655835 · 3655835
1 parent b94da20
commit 3655835
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
@@ -1,12 +1,10 @@
-import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash } from "@phosphor-icons/react";
 import System from "@/models/system";
 import ModalWrapper from "@/components/ModalWrapper";
 import { useModal } from "@/hooks/useModal";
 
-export default function ChatRow({ chat }) {
-  const rowRef = useRef(null);
+export default function ChatRow({ chat, onDelete }) {
   const {
     isOpen: isPromptOpen,
     openModal: openPromptModal,
@@ -25,16 +23,13 @@ export default function ChatRow({ chat }) {
       )
     )
       return false;
-    rowRef?.current?.remove();
     await System.deleteChat(chat.id);
+    onDelete(chat.id);
   };
 
   return (
     <>
-      <tr
-        ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
-      >
+      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
         <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
           {chat.id}
         </td>

diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -142,6 +142,10 @@ function ChatsContainer() {
     setOffset(offset + 1);
   };
 
+  const handleDeleteChat = (chatId) => {
+    setChats((prevChats) => prevChats.filter((chat) => chat.id !== chatId));
+  };
+
   useEffect(() => {
     async function fetchChats() {
       const { chats: _chats, hasPages = false } = await System.chats(offset);
@@ -196,7 +200,9 @@ function ChatsContainer() {
         </thead>
         <tbody>
           {!!chats &&
-            chats.map((chat) => <ChatRow key={chat.id} chat={chat} />)}
+            chats.map((chat) => (
+              <ChatRow key={chat.id} chat={chat} onDelete={handleDeleteChat} />
+            ))}
         </tbody>
       </table>
       <div className="flex w-full justify-between items-center">

diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
@@ -1,13 +1,11 @@
-import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash, LinkSimple } from "@phosphor-icons/react";
 import ModalWrapper from "@/components/ModalWrapper";
 import { useModal } from "@/hooks/useModal";
 import paths from "@/utils/paths";
 import Embed from "@/models/embed";
 
-export default function ChatRow({ chat }) {
-  const rowRef = useRef(null);
+export default function ChatRow({ chat, onDelete }) {
   const {
     isOpen: isPromptOpen,
     openModal: openPromptModal,
@@ -26,16 +24,13 @@ export default function ChatRow({ chat }) {
       )
     )
       return false;
-    rowRef?.current?.remove();
     await Embed.deleteChat(chat.id);
+    onDelete(chat.id);
   };
 
   return (
     <>
-      <tr
-        ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
-      >
+      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
         <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
           <a
             href={paths.settings.embedSetup()}

diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -48,6 +48,10 @@ function ChatsContainer() {
     setOffset(offset + 1);
   };
 
+  const handleDeleteChat = (chatId) => {
+    setChats((prevChats) => prevChats.filter((chat) => chat.id !== chatId));
+  };
+
   useEffect(() => {
     async function fetchChats() {
       const { chats: _chats, hasPages = false } = await Embed.chats(offset);
@@ -99,7 +103,9 @@ function ChatsContainer() {
         </thead>
         <tbody>
           {!!chats &&
-            chats.map((chat) => <ChatRow key={chat.id} chat={chat} />)}
+            chats.map((chat) => (
+              <ChatRow key={chat.id} chat={chat} onDelete={handleDeleteChat} />
+            ))}
         </tbody>
       </table>
       <div className="flex w-full justify-between items-center">

diff --git a/server/endpoints/system.js b/server/endpoints/system.js
@@ -774,7 +774,7 @@ function systemEndpoints(app) {
       try {
         const { id } = request.params;
         await WorkspaceChats.delete({ id: Number(id) });
-        response.sendStatus(200).end();
+        response.json({ success: true, error: null });
       } catch (e) {
         console.error(e);
         response.sendStatus(500).end();