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 <rambat1010@gmail.com>

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>

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">

frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash, LinkSimple } from "@phosphor-icons/react";
 import ModalWrapper from "@/components/ModalWrapper";
@@ -6,8 +5,7 @@ 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()}

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">

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();