import { usePubSub } from "create-pubsub/react"; import { lazy, Suspense, useMemo } from "react"; import { match, Pattern } from "ts-pattern"; import { modelLoadingProgressPubSub, responsePubSub, settingsPubSub, queryPubSub, textGenerationStatePubSub, } from "../../modules/pubSub"; const AiResponseContent = lazy(() => import("./AiResponseContent")); const PreparingContent = lazy(() => import("./PreparingContent")); const LoadingModelContent = lazy(() => import("./LoadingModelContent")); const ChatInterface = lazy(() => import("./ChatInterface")); const AiModelDownloadAllowanceContent = lazy( () => import("./AiModelDownloadAllowanceContent"), ); export default function AiResponseSection() { const [query] = usePubSub(queryPubSub); const [response] = usePubSub(responsePubSub); const [textGenerationState, setTextGenerationState] = usePubSub( textGenerationStatePubSub, ); const [modelLoadingProgress] = usePubSub(modelLoadingProgressPubSub); const [settings] = usePubSub(settingsPubSub); return useMemo( () => match([settings.enableAiResponse, textGenerationState]) .with([true, Pattern.not("idle").select()], (textGenerationState) => match(textGenerationState) .with( Pattern.union("generating", "interrupted", "completed", "failed"), (textGenerationState) => ( <> {textGenerationState === "completed" && ( )} ), ) .with("awaitingModelDownloadAllowance", () => ( )) .with("loadingModel", () => ( )) .with( Pattern.union("awaitingSearchResults", "preparingToGenerate"), (textGenerationState) => ( ), ) .exhaustive(), ) .otherwise(() => null), [ settings, textGenerationState, setTextGenerationState, modelLoadingProgress, response, query, ], ); }