Skip to content

Commit f824459

Browse files
kartikpersistentkartikpersistent
committed
UX: improvement added deleteloader for chat
1 parent ffe1661 commit f824459

File tree

13 files changed

+71
-39
lines changed

13 files changed

+71
-39
lines changed

‎frontend/src/App.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,3 +394,16 @@
394394
.tbody-light .ndl-data-grid-tr:hover {
395395
--cell-background: rgb(226 227 229) !important;
396396
}
397+
.chatbot-deleteLoader{
398+
position:absolute;
399+
top:0;
400+
bottom:0;
401+
width:100%;
402+
height:100%;
403+
display: flex;
404+
align-items: center;
405+
justify-content: center;
406+
z-index: 111;
407+
opacity: 0.8;
408+
background-color: rgb(201 201 201 / 40%);
409+
}

‎frontend/src/components/ChatBot/ChatOnlyComponent.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import { getIsLoading } from '../../utils/Utils';
1212
import ThemeWrapper from '../../context/ThemeWrapper';
1313

1414
const ChatContent: React.FC<ChatProps> = ({ chatMessages }) => {
15-
const { clearHistoryData, messages, setMessages, setClearHistoryData } = useMessageContext();
15+
const { clearHistoryData, messages, setMessages, setClearHistoryData, setIsDeleteChatLoading, isDeleteChatLoading } =
16+
useMessageContext();
1617
const { setUserCredentials, setConnectionStatus, connectionStatus, setShowDisconnectButton } = useCredentials();
1718
const [showBackButton, setShowBackButton] = useReducer((state) => !state, false);
1819
const [openConnection, setOpenConnection] = useState<connectionState>({
@@ -71,13 +72,16 @@ const ChatContent: React.FC<ChatProps> = ({ chatMessages }) => {
7172
const deleteOnClick = async () => {
7273
try {
7374
setClearHistoryData(true);
75+
setIsDeleteChatLoading(true);
7476
const credentials = JSON.parse(localStorage.getItem('neo4j.connection') || '{}') as UserCredentials;
7577
const sessionId = sessionStorage.getItem('session_id') || '';
7678
const response = await clearChatAPI(credentials, sessionId);
79+
setIsDeleteChatLoading(false);
7780
if (response.data.status !== 'Success') {
7881
setClearHistoryData(false);
7982
}
8083
} catch (error) {
84+
setIsDeleteChatLoading(false);
8185
console.error('Error clearing chat history:', error);
8286
setClearHistoryData(false);
8387
}
@@ -130,6 +134,7 @@ const ChatContent: React.FC<ChatProps> = ({ chatMessages }) => {
130134
clear={clearHistoryData}
131135
isLoading={getIsLoading(messages)}
132136
connectionStatus={connectionStatus}
137+
isDeleteChatLoading={isDeleteChatLoading}
133138
/>
134139
</div>
135140
</div>

‎frontend/src/components/ChatBot/Chatbot.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import FallBackDialog from '../UI/FallBackDialog';
4141
import { downloadClickHandler, getDateTime } from '../../utils/Utils';
4242
import ChatModesSwitch from './ChatModesSwitch';
4343
import CommonActions from './CommonChatActions';
44+
import Loader from '../../utils/Loader';
4445
const InfoModal = lazy(() => import('./ChatInfoModal'));
4546
if (typeof window !== 'undefined') {
4647
if (!sessionStorage.getItem('session_id')) {
@@ -58,6 +59,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
5859
isFullScreen,
5960
connectionStatus,
6061
isChatOnly,
62+
isDeleteChatLoading,
6163
} = props;
6264
const [inputMessage, setInputMessage] = useState('');
6365
const [loading, setLoading] = useState<boolean>(isLoading);
@@ -249,7 +251,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
249251
} else {
250252
setListMessages((prev) =>
251253
prev.map((msg) =>
252-
msg.id === chatbotMessageId ? { ...msg, modes: { ...msg.modes, [mode]: responseMode } } : msg
254+
(msg.id === chatbotMessageId ? { ...msg, modes: { ...msg.modes, [mode]: responseMode } } : msg)
253255
)
254256
);
255257
}
@@ -264,7 +266,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
264266
} else {
265267
setListMessages((prev) =>
266268
prev.map((msg) =>
267-
msg.id === chatbotMessageId ? { ...msg, modes: { ...msg.modes, [mode]: responseMode } } : msg
269+
(msg.id === chatbotMessageId ? { ...msg, modes: { ...msg.modes, [mode]: responseMode } } : msg)
268270
)
269271
);
270272
}
@@ -273,15 +275,15 @@ const Chatbot: FC<ChatbotProps> = (props) => {
273275
console.error(`API call failed for mode ${mode}:`, result.reason);
274276
setListMessages((prev) =>
275277
prev.map((msg) =>
276-
msg.id === chatbotMessageId
278+
(msg.id === chatbotMessageId
277279
? {
278280
...msg,
279281
modes: {
280282
...msg.modes,
281283
[mode]: { message: 'Failed to fetch response for this mode.', error: result.reason },
282284
},
283285
}
284-
: msg
286+
: msg)
285287
)
286288
);
287289
}
@@ -294,7 +296,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
294296
if (error instanceof Error) {
295297
setListMessages((prev) =>
296298
prev.map((msg) =>
297-
msg.id === chatbotMessageId
299+
(msg.id === chatbotMessageId
298300
? {
299301
...msg,
300302
isLoading: false,
@@ -306,7 +308,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
306308
},
307309
},
308310
}
309-
: msg
311+
: msg)
310312
)
311313
);
312314
}
@@ -408,7 +410,12 @@ const Chatbot: FC<ChatbotProps> = (props) => {
408410
}, []);
409411

410412
return (
411-
<div className={'n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden'}>
413+
<div className='n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
414+
{isDeleteChatLoading && (
415+
<div className='chatbot-deleteLoader'>
416+
<Loader title='Deleting...'></Loader>
417+
</div>
418+
)}
412419
<div
413420
className={`flex overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
414421
isChatOnly ? 'min-h-[calc(100dvh-114px)] max-h-[calc(100dvh-114px)]' : ''

‎frontend/src/components/ChatBot/MultiModeMetrics.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -352,26 +352,23 @@ export default function MultiModeMetrics({
352352
],
353353
[]
354354
);
355-
const table = useReactTable({
356-
data,
357-
columns,
358-
getCoreRowModel: getCoreRowModel(),
359-
getFilteredRowModel: getFilteredRowModel(),
360-
getPaginationRowModel: getPaginationRowModel(),
361-
enableGlobalFilter: false,
362-
autoResetPageIndex: false,
363-
enableColumnResizing: true,
364-
enableRowSelection: true,
365-
enableMultiRowSelection: true,
366-
enableSorting: false,
367-
});
368-
useEffect(() => {
369-
if (isWithAdditionalMetrics === false) {
370-
table.setColumnVisibility({ 'Semantic Score': false, 'Rouge Score': false });
371-
} else {
372-
table.resetColumnVisibility(true);
373-
}
374-
}, [isWithAdditionalMetrics, table]);
355+
const config = useMemo(
356+
() => ({
357+
data,
358+
columns: !isWithAdditionalMetrics ? columnswithoutSemanticAndRougeScores : columns,
359+
getCoreRowModel: getCoreRowModel(),
360+
getFilteredRowModel: getFilteredRowModel(),
361+
getPaginationRowModel: getPaginationRowModel(),
362+
enableGlobalFilter: false,
363+
autoResetPageIndex: false,
364+
enableColumnResizing: true,
365+
enableRowSelection: true,
366+
enableMultiRowSelection: true,
367+
enableSorting: false,
368+
}),
369+
[isWithAdditionalMetrics]
370+
);
371+
const table = useReactTable(config);
375372

376373
return (
377374
<Box>

‎frontend/src/components/Layout/DrawerChatbot.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useLocation } from 'react-router';
66
import { useEffect } from 'react';
77

88
const DrawerChatbot: React.FC<DrawerChatbotProps> = ({ isExpanded, clearHistoryData, messages, connectionStatus }) => {
9-
const { setMessages } = useMessageContext();
9+
const { setMessages, isDeleteChatLoading } = useMessageContext();
1010
const location = useLocation();
1111

1212
useEffect(() => {
@@ -29,6 +29,7 @@ const DrawerChatbot: React.FC<DrawerChatbotProps> = ({ isExpanded, clearHistoryD
2929
clear={clearHistoryData}
3030
isLoading={getIsLoading(messages)}
3131
connectionStatus={connectionStatus}
32+
isDeleteChatLoading={isDeleteChatLoading}
3233
/>
3334
</Drawer.Body>
3435
</Drawer>

‎frontend/src/components/Layout/PageLayout.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const PageLayout: React.FC = () => {
5151
}
5252
};
5353

54-
const { messages, setClearHistoryData, clearHistoryData, setMessages } = useMessageContext();
54+
const { messages, setClearHistoryData, clearHistoryData, setMessages, setIsDeleteChatLoading } = useMessageContext();
5555
const { isSchema, setIsSchema, setShowTextFromSchemaDialog, showTextFromSchemaDialog } = useFileContext();
5656
const {
5757
setConnectionStatus,
@@ -63,7 +63,7 @@ const PageLayout: React.FC = () => {
6363
showDisconnectButton,
6464
} = useCredentials();
6565
const { cancel } = useSpeechSynthesis();
66-
66+
6767
useEffect(() => {
6868
async function initializeConnection() {
6969
const session = localStorage.getItem('neo4j.connection');
@@ -193,14 +193,15 @@ const PageLayout: React.FC = () => {
193193
const deleteOnClick = async () => {
194194
try {
195195
setClearHistoryData(true);
196+
setIsDeleteChatLoading(true);
196197
cancel();
197198
const response = await clearChatAPI(
198199
userCredentials as UserCredentials,
199200
sessionStorage.getItem('session_id') ?? ''
200201
);
202+
setIsDeleteChatLoading(false);
201203
if (response.data.status === 'Success') {
202204
const date = new Date();
203-
204205
setMessages([
205206
{
206207
datetime: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`,
@@ -218,6 +219,7 @@ const PageLayout: React.FC = () => {
218219
navigate('.', { replace: true, state: null });
219220
}
220221
} catch (error) {
222+
setIsDeleteChatLoading(false);
221223
console.log(error);
222224
setClearHistoryData(false);
223225
}

‎frontend/src/components/Layout/SideNav.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const SideNav: React.FC<SideNavProps> = ({
4343
}) => {
4444
const [isChatModalOpen, setIsChatModalOpen] = useState(false);
4545
const [isFullScreen, setIsFullScreen] = useState(false);
46-
const { setMessages } = useMessageContext();
46+
const { setMessages, isDeleteChatLoading } = useMessageContext();
4747
const [showChatMode, setshowChatMode] = useState<boolean>(false);
4848
const largedesktops = useMediaQuery(`(min-width:1440px )`);
4949
const { connectionStatus, isReadOnlyUser } = useCredentials();
@@ -267,6 +267,7 @@ const SideNav: React.FC<SideNavProps> = ({
267267
setMessages={setMessages}
268268
isLoading={getIsLoading(messages ?? [])}
269269
connectionStatus={connectionStatus}
270+
isDeleteChatLoading={isDeleteChatLoading}
270271
/>
271272
</Dialog.Content>
272273
</Dialog>,

‎frontend/src/components/Popups/ConnectionModal/ConnectionModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ export default function ConnectionModal({
450450
type: 'password',
451451
'aria-label': 'Password',
452452
placeholder: 'password',
453-
autoComplete:"current-password"
453+
autoComplete: 'current-password',
454454
}}
455455
value={password}
456456
isDisabled={false}

‎frontend/src/components/Popups/GraphEnhancementDialog/Deduplication/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ export default function DeduplicationTab() {
104104
const onRemove = (nodeid: string, similarNodeId: string) => {
105105
setDuplicateNodes((prev) => {
106106
return prev.map((d) =>
107-
d.e.elementId === nodeid
107+
(d.e.elementId === nodeid
108108
? {
109109
...d,
110110
similar: d.similar.filter((n) => n.elementId != similarNodeId),
111111
}
112-
: d
112+
: d)
113113
);
114114
});
115115
};

‎frontend/src/components/Popups/GraphEnhancementDialog/PostProcessingCheckList/SelectedJobList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ export default function SelectedJobList({
1111
}) {
1212
const ongoingPostProcessingTasks = useMemo(
1313
() =>
14-
isGdsActive
14+
(isGdsActive
1515
? postProcessingTasks.includes('enable_communities')
1616
? postProcessingTasks
1717
: postProcessingTasks.filter((s) => s != 'enable_communities')
18-
: postProcessingTasks.filter((s) => s != 'enable_communities'),
18+
: postProcessingTasks.filter((s) => s != 'enable_communities')),
1919
[isGdsActive, postProcessingTasks]
2020
);
2121
return (

0 commit comments

Comments
 (0)