-
- setOption('jailbreak')(value === 'Sydney')}
diff --git a/client/src/components/Input/ChatGPTOptions/index.jsx b/client/src/components/Input/ChatGPTOptions/index.jsx
index 23befa36b9..951daf9b8b 100644
--- a/client/src/components/Input/ChatGPTOptions/index.jsx
+++ b/client/src/components/Input/ChatGPTOptions/index.jsx
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
-import SelectDropdown from '../../ui/SelectDropDown.jsx';
+import SelectDropDown from '../../ui/SelectDropDown';
import { cn } from '~/utils/';
import store from '~/store';
@@ -41,7 +41,7 @@ function ChatGPTOptions() {
return (
-
*/}
-
{!!isSearchEnabled && (
)}
diff --git a/client/src/components/Nav/SearchBar.jsx b/client/src/components/Nav/SearchBar.jsx
index 0d3befc762..35daa6de05 100644
--- a/client/src/components/Nav/SearchBar.jsx
+++ b/client/src/components/Nav/SearchBar.jsx
@@ -1,66 +1,29 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { debounce } from 'lodash';
import { Search } from 'lucide-react';
import { useRecoilState } from 'recoil';
-
import store from '~/store';
-export default function SearchBar({ fetch, clearSearch }) {
- // const dispatch = useDispatch();
- const [inputValue, setInputValue] = useState('');
+export default function SearchBar({ clearSearch }) {
+
const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
- // const [inputValue, setInputValue] = useState('');
-
- const debouncedChangeHandler = useCallback(
- debounce(q => {
- setSearchQuery(q);
- }, 750),
- [setSearchQuery]
- );
-
- useEffect(() => {
- if (searchQuery.length > 0) {
- fetch(searchQuery, 1);
- setInputValue(searchQuery);
- }
- }, [searchQuery]);
-
const handleKeyUp = e => {
const { value } = e.target;
if (e.keyCode === 8 && value === '') {
- // Value after clearing input: ""
- console.log(`Value after clearing input: "${value}"`);
setSearchQuery('');
clearSearch();
}
};
- const changeHandler = e => {
- let q = e.target.value;
- setInputValue(q);
- q = q.trim();
-
- if (q === '') {
- setSearchQuery('');
- clearSearch();
- } else {
- debouncedChangeHandler(q);
- }
- };
-
return (
{}
setSearchQuery(e.target.value)}
placeholder="Search messages"
onKeyUp={handleKeyUp}
- // onBlur={onRename}
/>
);
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 6e1530cdbb..3cb9fb4d6f 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -1,14 +1,12 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import _ from 'lodash';
+import { useState, useEffect, useRef } from 'react';
import NewChat from './NewChat';
import Spinner from '../svg/Spinner';
import Pages from '../Conversations/Pages';
import Conversations from '../Conversations';
import NavLinks from './NavLinks';
-import { searchFetcher } from '~/utils/fetchers';
import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useGetConversationsQuery } from '~/data-provider';
-
+import { useGetConversationsQuery, useSearchQuery } from '~/data-provider';
+import useDebounce from '~/hooks/useDebounce';
import store from '~/store';
export default function Nav({ navVisible, setNavVisible }) {
@@ -17,7 +15,6 @@ export default function Nav({ navVisible, setNavVisible }) {
const containerRef = useRef(null);
const scrollPositionRef = useRef(null);
- // const dispatch = useDispatch();
const [conversations, setConversations] = useState([]);
// current page
const [pageNumber, setPageNumber] = useState(1);
@@ -43,6 +40,7 @@ export default function Nav({ navVisible, setNavVisible }) {
const [isFetching, setIsFetching] = useState(false);
const onSearchSuccess = (data, expectedPage) => {
+ console.log('onSearchSuccess', data, expectedPage)
const res = data;
setConversations(res.conversations);
if (expectedPage) {
@@ -55,14 +53,22 @@ export default function Nav({ navVisible, setNavVisible }) {
setSearchResultMessages(res.messages);
};
- // TODO: dont need this
- const fetch = useCallback(
- _.partialRight(
- searchFetcher.bind(null, () => setIsFetching(true)),
- onSearchSuccess
- ),
- [setIsFetching]
- );
+ const debouncedSearchTerm = useDebounce(searchQuery, 750);
+ const searchQueryFn = useSearchQuery(debouncedSearchTerm, 1, {
+ enabled: !!debouncedSearchTerm &&
+ debouncedSearchTerm.length > 0 &&
+ isSearchEnabled &&
+ isSearching,
+ });
+
+ useEffect(() => {
+ if (searchQueryFn.isInitialLoading) {
+ setIsFetching(true);
+ }
+ else if (searchQueryFn.data) {
+ onSearchSuccess(searchQueryFn.data);
+ }
+ }, [searchQueryFn.data, searchQueryFn.isInitialLoading])
const clearSearch = () => {
setPageNumber(1);
@@ -178,8 +184,6 @@ export default function Nav({ navVisible, setNavVisible }) {
diff --git a/client/src/components/ui/SelectDropDown.jsx b/client/src/components/ui/SelectDropDown.jsx
index d2e2e15f58..3ea1dd1170 100644
--- a/client/src/components/ui/SelectDropDown.jsx
+++ b/client/src/components/ui/SelectDropDown.jsx
@@ -3,7 +3,7 @@ import CheckMark from '../svg/CheckMark.jsx';
import { Listbox, Transition } from '@headlessui/react';
import { cn } from '~/utils/';
-function SelectDropdown({
+function SelectDropDown({
title = 'Model',
value,
disabled,
@@ -111,4 +111,4 @@ function SelectDropdown({
);
}
-export default SelectDropdown;
+export default SelectDropDown;
diff --git a/client/src/data-provider/data-service.ts b/client/src/data-provider/data-service.ts
index 40aa98a001..db34b15d0b 100644
--- a/client/src/data-provider/data-service.ts
+++ b/client/src/data-provider/data-service.ts
@@ -49,35 +49,14 @@ export function getSearchEnabled(): Promise
{
return request.get(endpoints.searchEnabled());
}
-export function getSearchResults(q: string, pageNumber: string): Promise {
- return request.get(endpoints.search(q, pageNumber));
-}
-
export function getUser(): Promise {
return request.get(endpoints.user());
}
-type TSearchFetcherProps = {
- pre: () => void,
- q: string,
- pageNumber: string,
- callback: (data: any) => void
-};
-
-export const searchConversations = async({ q, pageNumber, callback }: TSearchFetcherProps) => {
- return request.get(endpoints.search(q, pageNumber)).then(({ data }) => {
- callback(data);
- });
+export const searchConversations = async(q: string, pageNumber: string): Promise => {
+ return request.get(endpoints.search(q, pageNumber));
}
-export const searchFetcher = async ({ pre, q, pageNumber, callback }: TSearchFetcherProps) => {
- pre();
- //@ts-ignore
- const { data } = await request.get(endpoints.search(q, pageNumber));
- console.log('search data', data);
- callback(data);
-};
-
export const getAIEndpoints = () => {
return request.get(endpoints.aiEndpoints());
}
\ No newline at end of file
diff --git a/client/src/data-provider/react-query-service.ts b/client/src/data-provider/react-query-service.ts
index 1b08d45546..67ba0eeda0 100644
--- a/client/src/data-provider/react-query-service.ts
+++ b/client/src/data-provider/react-query-service.ts
@@ -120,7 +120,6 @@ export const useClearConversationsMutation = (): UseMutationResult => {
export const useGetConversationsQuery = (pageNumber: string): QueryObserverResult => {
return useQuery([QueryKeys.allConversations, pageNumber], () =>
dataService.getConversations(pageNumber), {
- // refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
}
@@ -191,13 +190,18 @@ export const useDeleteAllPresetsMutation = (): UseMutationResult => {
});
}
-export const useSearchFetcher = (query: string, pageNumber: string, callback: () => void, config?: UseQueryOptions): QueryObserverResult => {
- return useQuery([QueryKeys.searchResults, pageNumber, query], () =>
- dataService.searchConversations(query, pageNumber, callback), {
+export const useSearchQuery = (
+ searchQuery: string,
+ pageNumber: string,
+ config?: UseQueryOptions
+ ): QueryObserverResult => {
+ console.log('useSearchFetcher', searchQuery, pageNumber)
+ return useQuery([QueryKeys.searchResults, pageNumber, searchQuery], () =>
+ dataService.searchConversations(searchQuery, pageNumber), {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config
}
);
-}
+}
\ No newline at end of file
diff --git a/client/src/data-provider/types.ts b/client/src/data-provider/types.ts
index d4cb3926c8..ce2162c232 100644
--- a/client/src/data-provider/types.ts
+++ b/client/src/data-provider/types.ts
@@ -121,7 +121,7 @@ export type TDeleteConversationResponse = {
}
};
-export type TSearchResponse = {
+export type TSearchResults = {
conversations: TConversation[],
messages: TMessage[],
pageNumber: string,
diff --git a/client/src/hooks/useDebounce.js b/client/src/hooks/useDebounce.js
new file mode 100644
index 0000000000..910395fce6
--- /dev/null
+++ b/client/src/hooks/useDebounce.js
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(
+ () => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ },
+ [value, delay]
+ );
+
+ return debouncedValue;
+}
+
+export default useDebounce;
\ No newline at end of file