quivr/frontend/app/chat/components/ChatsList/hooks/useChatNotificationsSync.ts
Mamadou DICKO 36fd146fed
feat: improve app ux (#1281)
* style: make FeedItemIcon the same size

* feat: update feed component brain selector label position

* style: change purple to 600

* feat: improve already dropped file message ux

* feat: autoclose feedinput on chatId change

* style: change chat colors

* feat: prevent linebreak in knowledge to upload row

* feat(textFIeld): avoid textfield content going under icon

* feat(knowledgeToUpload): add tooltip on urls and files name

* feat(feedBrain): auto scroll on messages when feed modal get opened

* style: update colors

* refactor: rename uploadCard to FeedCard
2023-09-29 10:24:31 +02:00

76 lines
2.4 KiB
TypeScript

import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import { useEffect } from "react";
import { useChatApi } from "@/lib/api/chat/useChatApi";
import { useNotificationApi } from "@/lib/api/notification/useNotificationApi";
import { useChatContext } from "@/lib/context";
import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
import { getChatNotificationsQueryKey } from "../../../[chatId]/utils/getChatNotificationsQueryKey";
import { getMessagesFromChatItems } from "../../../[chatId]/utils/getMessagesFromChatItems";
import { getNotificationsFromChatItems } from "../../../[chatId]/utils/getNotificationsFromChatItems";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const useChatNotificationsSync = () => {
const { setMessages, setNotifications, notifications } = useChatContext();
const { getChatItems } = useChatApi();
const { getChatNotifications } = useNotificationApi();
const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext();
const params = useParams();
const chatId = params?.chatId as string | undefined;
const chatNotificationsQueryKey = getChatNotificationsQueryKey(chatId ?? "");
const { data: fetchedNotifications = [] } = useQuery({
queryKey: [chatNotificationsQueryKey],
enabled: notifications.length > 0,
queryFn: () => {
if (chatId === undefined) {
return [];
}
return getChatNotifications(chatId);
},
refetchInterval: () => {
if (notifications.length === 0) {
return false;
}
const hasAPendingNotification = notifications.find(
(item) => item.status === "Pending"
);
if (hasAPendingNotification) {
return 2_000; // in ms
}
return false;
},
});
useEffect(() => {
if (fetchedNotifications.length === 0) {
return;
}
setNotifications(fetchedNotifications);
}, [fetchedNotifications]);
useEffect(() => {
setShouldDisplayFeedCard(false);
const fetchHistory = async () => {
if (chatId === undefined) {
setMessages([]);
setNotifications([]);
return;
}
const chatItems = await getChatItems(chatId);
setMessages(getMessagesFromChatItems(chatItems));
setNotifications(getNotificationsFromChatItems(chatItems));
};
void fetchHistory();
}, [chatId]);
};