88 useGlobalSearch ,
99 useGroupChatList ,
1010 useHandleMap ,
11+ useLoadSemanticResultsIntoMemory ,
1112} from "../../hooks/dataHooks" ;
12- import { LinearProgress } from "@mui/material" ;
13+ import { CircularProgress , LinearProgress } from "@mui/material" ;
1314import { Button , Checkbox , FormControlLabel , FormGroup } from "@mui/material" ;
1415
1516import { Virtuoso } from "react-virtuoso" ;
@@ -29,6 +30,7 @@ import { DayPicker } from "react-day-picker";
2930import Popover from "@mui/material/Popover" ;
3031import { shallow } from "zustand/shallow" ;
3132import { SemanticSearchInfo } from "../chat/OpenAiKey" ;
33+ import Backdrop from "@mui/material/Backdrop" ;
3234
3335const GloablSearchInput = ( ) => {
3436 const globalSearch = useMimessage ( ( state ) => state . globalSearch ) ;
@@ -190,28 +192,69 @@ const GroupChatFilter = () => {
190192 ) ;
191193} ;
192194
195+ const ToggleSemanticSearch = ( ) => {
196+ const { mutateAsync, isLoading } = useLoadSemanticResultsIntoMemory ( ) ;
197+ const { openAiKey, setUseSemanticSearch, useSemanticSearch } = useMimessage (
198+ ( state ) => ( {
199+ useSemanticSearch : state . useSemanticSearch ,
200+ setUseSemanticSearch : state . setUseSemanticSearch ,
201+ openAiKey : state . openAiKey ,
202+ } ) ,
203+ shallow ,
204+ ) ;
205+ return (
206+ < >
207+ { isLoading && (
208+ < Backdrop open >
209+ < Box
210+ onClick = { ( e ) => e . stopPropagation ( ) }
211+ sx = { { background : "#2c2c2c" , maxWidth : 600 , p : 2 , m : 2 } }
212+ display = { "flex" }
213+ flexDirection = { "column" }
214+ >
215+ < Typography variant = "h1" sx = { { color : "white" } } >
216+ Loading Vectors into Memory
217+ </ Typography >
218+ < Typography variant = "h6" sx = { { color : "white" } } >
219+ This takes ~2s per 100k messages
220+ </ Typography >
221+ < CircularProgress />
222+ </ Box >
223+ </ Backdrop >
224+ ) }
225+ < FormGroup >
226+ < FormControlLabel
227+ control = {
228+ < Checkbox
229+ style = { {
230+ color : "white" ,
231+ } }
232+ checked = { useSemanticSearch }
233+ onChange = { ( ) => {
234+ setUseSemanticSearch ( ! useSemanticSearch ) ;
235+ mutateAsync ( ) ;
236+ } }
237+ disabled = { ! openAiKey }
238+ title = { openAiKey ? "" : "OpenAI Key Required" }
239+ />
240+ }
241+ label = "Use Semantic Search"
242+ />
243+ </ FormGroup >
244+ </ >
245+ ) ;
246+ } ;
247+
193248const GlobalSearchFilter = ( ) => {
194249 const { data : results } = useGlobalSearch ( ) ;
195250 const count = results ?. length || 0 ;
196- const {
197- openAiKey,
198- setUseSemanticSearch,
199- useSemanticSearch,
200- startDate,
201- setStartDate,
202- setEndDate,
203- endDate,
204- globalSearch,
205- } = useMimessage (
251+ const { startDate, setStartDate, setEndDate, endDate, globalSearch } = useMimessage (
206252 ( state ) => ( {
207253 startDate : state . startDate ,
208254 endDate : state . endDate ,
209255 setStartDate : state . setStartDate ,
210256 setEndDate : state . setEndDate ,
211257 globalSearch : state . globalSearch ,
212- useSemanticSearch : state . useSemanticSearch ,
213- setUseSemanticSearch : state . setUseSemanticSearch ,
214- openAiKey : state . openAiKey ,
215258 } ) ,
216259 shallow ,
217260 ) ;
@@ -237,22 +280,7 @@ const GlobalSearchFilter = () => {
237280 < GroupChatFilter />
238281 < DateFilter selection = { startDate } setSelection = { setStartDate } text = { "Start Date" } />
239282 < DateFilter selection = { endDate } setSelection = { setEndDate } text = { "End Date" } />
240- < FormGroup >
241- < FormControlLabel
242- control = {
243- < Checkbox
244- style = { {
245- color : "white" ,
246- } }
247- checked = { useSemanticSearch }
248- onChange = { ( ) => setUseSemanticSearch ( ! useSemanticSearch ) }
249- disabled = { ! openAiKey }
250- title = { openAiKey ? "" : "OpenAI Key Required" }
251- />
252- }
253- label = "Use Semantic Search"
254- />
255- </ FormGroup >
283+ < ToggleSemanticSearch />
256284 </ Box >
257285 ) ;
258286} ;
0 commit comments