From 36558350e737d3baebde02fb574bc5a4ac2ea835 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Tue, 6 Feb 2024 13:11:44 -0800
Subject: [PATCH] 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>
---
.../src/pages/GeneralSettings/Chats/ChatRow/index.jsx | 11 +++--------
frontend/src/pages/GeneralSettings/Chats/index.jsx | 8 +++++++-
.../GeneralSettings/EmbedChats/ChatRow/index.jsx | 11 +++--------
.../src/pages/GeneralSettings/EmbedChats/index.jsx | 8 +++++++-
server/endpoints/system.js | 2 +-
5 files changed, 21 insertions(+), 19 deletions(-)
diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
index 3056e7659..5c0744f12 100644
--- 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
index f0ae8e973..336aadcce 100644
--- 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
index cc0bc2a83..a9c125cf4 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
+++ b/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()}
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index fdda8d4a2..6b84b3fde 100644
--- 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
index 4eb82fb0a..100d0a4b6 100644
--- 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();