Spaces:
Running
Running
File size: 2,863 Bytes
6e29063 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import { Center, Container, Loader, Stack } from "@mantine/core";
import { usePubSub } from "create-pubsub/react";
import { Suspense } from "react";
import { lazy } from "react";
import {
imageSearchStatePubSub,
queryPubSub,
settingsPubSub,
textGenerationStatePubSub,
textSearchStatePubSub,
} from "../../../modules/pubSub";
import { searchAndRespond } from "../../../modules/textGeneration";
const AiResponseSection = lazy(
() => import("../../AiResponse/AiResponseSection"),
);
const SearchResultsSection = lazy(
() => import("../../Search/Results/SearchResultsSection"),
);
const MenuButton = lazy(() => import("./Menu/MenuButton"));
const SearchForm = lazy(() => import("../../Search/Form/SearchForm"));
const EnableAiResponsePrompt = lazy(
() => import("../../AiResponse/EnableAiResponsePrompt"),
);
export default function MainPage() {
const [query, updateQuery] = usePubSub(queryPubSub);
const [textSearchState] = usePubSub(textSearchStatePubSub);
const [imageSearchState] = usePubSub(imageSearchStatePubSub);
const [textGenerationState] = usePubSub(textGenerationStatePubSub);
const [settings, setSettings] = usePubSub(settingsPubSub);
const isQueryEmpty = query.length === 0;
return (
<Container>
<Stack py="md" mih="100vh" justify={isQueryEmpty ? "center" : undefined}>
<Suspense
fallback={
<Center>
<Loader type="bars" />
</Center>
}
>
<SearchForm
query={query}
updateQuery={updateQuery}
additionalButtons={<MenuButton />}
/>
</Suspense>
{!isQueryEmpty && (
<>
{settings.showEnableAiResponsePrompt && (
<Suspense>
<EnableAiResponsePrompt
onAccept={() => {
setSettings({
...settings,
showEnableAiResponsePrompt: false,
enableAiResponse: true,
});
searchAndRespond();
}}
onDecline={() => {
setSettings({
...settings,
showEnableAiResponsePrompt: false,
enableAiResponse: false,
});
}}
/>
</Suspense>
)}
{!settings.showEnableAiResponsePrompt &&
textGenerationState !== "idle" && (
<Suspense>
<AiResponseSection />
</Suspense>
)}
{(textSearchState !== "idle" || imageSearchState !== "idle") && (
<Suspense>
<SearchResultsSection />
</Suspense>
)}
</>
)}
</Stack>
</Container>
);
}
|