Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: conflicting fetch with /api/convos

Browse source
This commit is contained in:
Daniel Avila 2023-03-18 14:28:10 -04:00
parent 0f54ffd8b4
commit b97594c000
10 changed files with 199 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

3
api/models/Conversation.js
View file

@ -145,10 +145,11 @@ module.exports = {
const promises = convoIds.map(convo => { const promises = convoIds.map(convo => {
return Conversation.findOne({ user, conversationId: convo.conversationId}).exec(); return Conversation.findOne({ user, conversationId: convo.conversationId}).exec();
}); });
const results = await Promise.all(promises); const results = (await Promise.all(promises)).filter(convo => convo);
const startIndex = (pageNumber - 1) * pageSize; const startIndex = (pageNumber - 1) * pageSize;
const convos = results.slice(startIndex, startIndex + pageSize); const convos = results.slice(startIndex, startIndex + pageSize);
const totalPages = Math.ceil(results.length / pageSize); const totalPages = Math.ceil(results.length / pageSize);
console.log(results.length, totalPages, convos.length);
return { conversations: convos, pages: totalPages, pageNumber, pageSize }; return { conversations: convos, pages: totalPages, pageNumber, pageSize };
} catch (error) { } catch (error) {
console.log(error); console.log(error);

33
api/server/routes/search.js
View file

@ -2,7 +2,7 @@ const express = require('express');
const router = express.Router(); const router = express.Router();
const { Message } = require('../../models/Message'); const { Message } = require('../../models/Message');
const { Conversation, getConvosQueried } = require('../../models/Conversation'); const { Conversation, getConvosQueried } = require('../../models/Conversation');
const {reduceMessages, reduceHits} = require('../../lib/utils/reduceHits'); const { reduceMessages, reduceHits } = require('../../lib/utils/reduceHits');
// const { MeiliSearch } = require('meilisearch'); // const { MeiliSearch } = require('meilisearch');
router.get('/sync', async function (req, res) { router.get('/sync', async function (req, res) {
@ -12,19 +12,24 @@ router.get('/sync', async function (req, res) {
}); });
router.get('/', async function (req, res) { router.get('/', async function (req, res) {
const { q } = req.query; try {
console.log(req.query); const { q } = req.query;
const pageNumber = req.query.pageNumber || 1; console.log(req.query, req.params);
// const message = await Message.meiliSearch(q, { attributesToHighlight: ['text', 'sender'] }); const pageNumber = req.query.pageNumber || 1;
const message = await Message.meiliSearch(q); const message = await Message.meiliSearch(q);
const title = await Conversation.meiliSearch(q, { attributesToHighlight: ['title'] }); const title = await Conversation.meiliSearch(q, { attributesToHighlight: ['title'] });
// console.log('titles', title); const sortedHits = reduceHits(message.hits, title.hits);
// console.log(sortedHits); const result = await getConvosQueried(
const sortedHits = reduceHits(message.hits, title.hits); req?.session?.user?.username,
const result = await getConvosQueried(req?.session?.user?.username, sortedHits, pageNumber); sortedHits,
// const sortedHits = reduceMessages(message.hits); pageNumber
// res.status(200).send(sortedHits || result); );
res.status(200).send(result); console.log('result', result.pageNumber, result.pages, result.pageSize);
res.status(200).send(result);
} catch (error) {
console.log(error);
res.status(500).send({ message: 'Error searching' });
}
}); });
router.get('/clear', async function (req, res) { router.get('/clear', async function (req, res) {

36
client/src/components/Conversations/Pages.jsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
export default function Pages({ pageNumber, pages, nextPage, previousPage }) {
const clickHandler = (func) => async (e) => {
e.preventDefault();
await func();
};
return (
<div className="m-auto mt-4 mb-2 flex items-center justify-center gap-2">
<button
onClick={clickHandler(previousPage)}
className={
'btn btn-small bg-transition m-auto flex gap-2 transition hover:bg-gray-800 disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400' +
(pageNumber <= 1 ? ' hidden-visibility' : '')
}
disabled={pageNumber <= 1}
>
&lt;&lt;
</button>
<span className="flex-none text-gray-400">
{pageNumber} / {pages}
</span>
<button
onClick={clickHandler(nextPage)}
className={
'btn btn-small bg-transition m-auto flex gap-2 transition hover:bg-gray-800 disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400' +
(pageNumber >= pages ? ' hidden-visibility' : '')
}
disabled={pageNumber >= pages}
>
&gt;&gt;
</button>
</div>
);
}

25
client/src/components/Conversations/index.jsx
View file

@ -1,11 +1,7 @@
import React from 'react'; import React from 'react';
import Conversation from './Conversation'; import Conversation from './Conversation';
export default function Conversations({ conversations, conversationId, pageNumber, pages, nextPage, previousPage, moveToTop }) { export default function Conversations({ conversations, conversationId, moveToTop }) {
const clickHandler = (func) => async (e) => {
e.preventDefault();
await func();
};
return ( return (
<> <>
@ -37,25 +33,6 @@ export default function Conversations({ conversations, conversationId, pageNumbe
/> />
); );
})} })}
<div className="m-auto mt-4 mb-2 flex justify-center items-center gap-2">
<button
onClick={clickHandler(previousPage)}
className={"flex btn btn-small transition bg-transition dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400 m-auto gap-2 hover:bg-gray-800" + (pageNumber<=1?" hidden-visibility":"")}
disabled={pageNumber<=1}
>
&lt;&lt;
</button>
<span className="flex-none text-gray-400">
{pageNumber} / {pages}
</span>
<button
onClick={clickHandler(nextPage)}
className={"flex btn btn-small transition bg-transition dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400 m-auto gap-2 hover:bg-gray-800" + (pageNumber>=pages?" hidden-visibility":"")}
disabled={pageNumber>=pages}
>
&gt;&gt;
</button>
</div>
</> </>
); );
} }

4
client/src/components/Nav/NavLinks.jsx
View file

@ -6,10 +6,10 @@ import ClearConvos from './ClearConvos';
import DarkMode from './DarkMode'; import DarkMode from './DarkMode';
import Logout from './Logout'; import Logout from './Logout';
export default function NavLinks() { export default function NavLinks({ onSearchSuccess, clearSearch }) {
return ( return (
<> <>
<SearchBar /> <SearchBar onSuccess={onSearchSuccess} clearSearch={clearSearch}/>
<ClearConvos /> <ClearConvos />
<DarkMode /> <DarkMode />
<Logout /> <Logout />

42
client/src/components/Nav/SearchBar.jsx
View file

@ -1,18 +1,34 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch } from 'react-redux';
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import { setQuery } from '~/store/searchSlice'; import { setQuery } from '~/store/searchSlice';
import { setPage, refreshConversation } from '~/store/convoSlice'; import { setConvos, refreshConversation } from '~/store/convoSlice';
import axios from 'axios';
export default function SearchBar() { const fetch = async (q, pageNumber, callback) => {
const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
console.log(data);
callback(data);
};
export default function SearchBar({ onSuccess, clearSearch }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const { search } = useSelector((state) => state.search);
// const onSuccess = (data) => {
// const { conversations, pages, pageNumber } = data;
// dispatch(setConvos({ convos: conversations, searchFetch: true }));
// dispatch(setPage(pageNumber));
// dispatch(setPages(pages));
// };
const debouncedChangeHandler = useCallback( const debouncedChangeHandler = useCallback(
debounce((q) => { debounce((q) => {
dispatch(setQuery(q)); dispatch(setQuery(q));
if (q.length > 0) {
fetch(q, 1, onSuccess);
}
}, 750), }, 750),
[dispatch] [dispatch]
); );
@ -22,27 +38,27 @@ export default function SearchBar() {
if (e.keyCode === 8 && value === '') { if (e.keyCode === 8 && value === '') {
// Value after clearing input: "" // Value after clearing input: ""
console.log(`Value after clearing input: "${value}"`); console.log(`Value after clearing input: "${value}"`);
dispatch(setPage(1));
dispatch(setQuery('')); dispatch(setQuery(''));
dispatch(refreshConversation()); clearSearch();
} }
}; };
const changeHandler = (e) => { const changeHandler = (e) => {
if (!search) { // if (!search) {
console.log('setting page to 1'); // console.log('setting page to 1');
dispatch(setPage(1)); // dispatch(setPage(1));
} // }
let q = e.target.value; let q = e.target.value;
setInputValue(q); setInputValue(q);
q = q.trim(); q = q.trim();
if (q === '' || !q) { if (q === '') {
dispatch(setPage(1));
dispatch(setQuery('')); dispatch(setQuery(''));
dispatch(refreshConversation()); // dispatch(setPage(1));
// dispatch(refreshConversation());
clearSearch();
} else { } else {
debouncedChangeHandler(q); debouncedChangeHandler(q);
} }

90
client/src/components/Nav/index.jsx
View file

@ -1,36 +1,63 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import _ from 'lodash';
import NewChat from './NewChat'; import NewChat from './NewChat';
import Spinner from '../svg/Spinner'; import Spinner from '../svg/Spinner';
import Pages from '../Conversations/Pages';
import Conversations from '../Conversations'; import Conversations from '../Conversations';
import NavLinks from './NavLinks'; import NavLinks from './NavLinks';
import { swr } from '~/utils/fetchers'; import { swr } from '~/utils/fetchers';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { increasePage, decreasePage, setPage, setConvos, setPages } from '~/store/convoSlice'; import { setConvos, refreshConversation } from '~/store/convoSlice';
const fetch = async (q, pageNumber, callback) => {
const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
console.log(data);
callback(data);
};
export default function Nav({ navVisible, setNavVisible }) { export default function Nav({ navVisible, setNavVisible }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
const [pages, setPages] = useState(1);
const [pageNumber, setPage] = useState(1);
const { search, query } = useSelector((state) => state.search); const { search, query } = useSelector((state) => state.search);
const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector( const { conversationId, convos, refreshConvoHint } = useSelector((state) => state.convo);
(state) => state.convo const onSuccess = (data, searchFetch = false) => {
); if (search) {
const onSuccess = (data) => { return;
const { conversations, pages } = data; }
const { conversations, pages } = data;
if (pageNumber > pages) { if (pageNumber > pages) {
dispatch(setPage(pages)); setPage(pages);
} else { } else {
dispatch(setConvos(conversations)); dispatch(setConvos({ convos: conversations, searchFetch }));
dispatch(setPages(pages)); setPages(pages);
} }
}; };
const { data, isLoading, mutate } = swr(`/api/${search ? `search?q=${query}&pageNumber=${pageNumber}` : `convos?pageNumber=${pageNumber}`}`, onSuccess, { const onSearchSuccess = (data, expectedPage) => {
const res = data;
dispatch(setConvos({ convos: res.conversations, searchFetch: true }));
if (expectedPage) {
setPage(expectedPage);
}
setPage(res.pageNumber);
setPages(res.pages);
};
const clearSearch = () => {
setPage(1);
dispatch(refreshConversation());
};
const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, {
revalidateOnMount: false, revalidateOnMount: false,
revalidateIfStale: !search, // populateCache: false,
revalidateOnFocus: !search, // revalidateIfStale: false,
revalidateOnReconnect: !search, // revalidateOnFocus: false,
populateCache: !search, // revalidateOnReconnect : false,
}); });
const containerRef = useRef(null); const containerRef = useRef(null);
@ -46,19 +73,29 @@ export default function Nav({ navVisible, setNavVisible }) {
const nextPage = async () => { const nextPage = async () => {
moveToTop(); moveToTop();
dispatch(increasePage()); if (!search) {
await mutate(); setPage((prev) => prev + 1);
await mutate();
} else {
await fetch(query, +pageNumber + 1, _.partialRight(onSearchSuccess, +pageNumber + 1));
}
}; };
const previousPage = async () => { const previousPage = async () => {
moveToTop(); moveToTop();
dispatch(decreasePage()); if (!search) {
await mutate(); setPage((prev) => prev - 1);
await mutate();
} else {
await fetch(query, +pageNumber - 1, _.partialRight(onSearchSuccess, +pageNumber - 1));
}
}; };
useEffect(() => { useEffect(() => {
mutate(); if (!search) {
mutate();
}
}, [pageNumber, conversationId, refreshConvoHint]); }, [pageNumber, conversationId, refreshConvoHint]);
useEffect(() => { useEffect(() => {
@ -114,16 +151,21 @@ export default function Nav({ navVisible, setNavVisible }) {
<Conversations <Conversations
conversations={convos} conversations={convos}
conversationId={conversationId} conversationId={conversationId}
nextPage={nextPage}
previousPage={previousPage}
moveToTop={moveToTop} moveToTop={moveToTop}
pageNumber={pageNumber}
pages={pages}
/> />
)} )}
<Pages
pageNumber={pageNumber}
pages={pages}
nextPage={nextPage}
previousPage={previousPage}
/>
</div> </div>
</div> </div>
<NavLinks /> <NavLinks
onSearchSuccess={onSearchSuccess}
clearSearch={clearSearch}
/>
</nav> </nav>
</div> </div>
</div> </div>

29
client/src/store/convoSlice.js
View file

@ -17,7 +17,7 @@ const initialState = {
refreshConvoHint: 0, refreshConvoHint: 0,
search: false, search: false,
latestMessage: null, latestMessage: null,
convos: [], convos: []
}; };
const currentSlice = createSlice({ const currentSlice = createSlice({
@ -57,9 +57,12 @@ const currentSlice = createSlice({
state.latestMessage = null; state.latestMessage = null;
}, },
setConvos: (state, action) => { setConvos: (state, action) => {
state.convos = action.payload.sort( const { convos, searchFetch } = action.payload;
(a, b) => new Date(b.createdAt) - new Date(a.createdAt) if (searchFetch) {
); state.convos = convos;
} else {
state.convos = convos.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
}
}, },
setPages: (state, action) => { setPages: (state, action) => {
state.pages = action.payload; state.pages = action.payload;
@ -72,11 +75,23 @@ const currentSlice = createSlice({
}, },
setLatestMessage: (state, action) => { setLatestMessage: (state, action) => {
state.latestMessage = action.payload; state.latestMessage = action.payload;
}, }
} }
}); });
export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll, setLatestMessage } = export const {
currentSlice.actions; refreshConversation,
setConversation,
setPages,
setConvos,
setNewConvo,
setError,
increasePage,
decreasePage,
setPage,
removeConvo,
removeAll,
setLatestMessage
} = currentSlice.actions;
export default currentSlice.reducer; export default currentSlice.reducer;

4
client/src/store/searchSlice.js
View file

@ -16,9 +16,9 @@ const currentSlice = createSlice({
const q = action.payload; const q = action.payload;
state.query = q; state.query = q;
if (!q || q === '') { if (q === '') {
state.search = false; state.search = false;
} else { } else if (q?.length > 0 && !state.search) {
state.search = true; state.search = true;
} }
}, },

23
client/src/utils/fetchers.js
View file

@ -3,21 +3,25 @@ import axios from 'axios';
import useSWR from 'swr'; import useSWR from 'swr';
import useSWRMutation from 'swr/mutation'; import useSWRMutation from 'swr/mutation';
const fetcher = (url) => fetch(url, {credentials: 'include'}).then((res) => res.json()); const fetcher = (url) => fetch(url, { credentials: 'include' }).then((res) => res.json());
const axiosFetcher = async (url, params) => {
console.log(params, 'params');
return axios.get(url, params);
};
const postRequest = async (url, { arg }) => { const postRequest = async (url, { arg }) => {
return await axios.post(url, { withCredentials: true, arg }); return await axios.post(url, { withCredentials: true, arg });
}; };
export const swr = (path, successCallback, options) => { export const swr = (path, successCallback, options) => {
const _options = {...options}; const _options = { ...options };
if (successCallback) { if (successCallback) {
_options.onSuccess = successCallback; _options.onSuccess = successCallback;
} }
return useSWR(path, fetcher, _options); return useSWR(path, fetcher, _options);
} };
export default function manualSWR(path, type, successCallback) { export default function manualSWR(path, type, successCallback) {
const options = {}; const options = {};
@ -28,3 +32,16 @@ export default function manualSWR(path, type, successCallback) {
const fetchFunction = type === 'get' ? fetcher : postRequest; const fetchFunction = type === 'get' ? fetcher : postRequest;
return useSWRMutation(path, fetchFunction, options); return useSWRMutation(path, fetchFunction, options);
} }
export function useManualSWR({ path, params, type, onSuccess }) {
const options = {};
if (onSuccess) {
options.onSuccess = onSuccess;
}
console.log(params, 'params');
const fetchFunction = type === 'get' ? _.partialRight(axiosFetcher, params) : postRequest;
return useSWRMutation(path, fetchFunction, options);
}