Use the aiFlags api to know when to enable the ai chat box.

Signed-off-by: Hiram Chirino <[email protected]>

client/src/app/components/ai-assistant.tsx

@@ -11,7 +11,7 @@ import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { MessageCircle, Send, X } from "lucide-react";
 import { ChatMessage, ChatState } from "../client";
-import { useCompletionMutation } from "../queries/ai";
+import { useCompletionMutation, useFetchAiFlagsQuery } from "../queries/ai";
 import ReactMarkdown from "react-markdown";
 
 interface Conversation {
@@ -35,8 +35,8 @@ export function AIAssistantProvider({
 }: {
   children: React.ReactNode;
 }) {
-  // todo: querying the API to see if the feature is enabled.
-  const [isEnabled] = useState(true);
+  const aiFlags = useFetchAiFlagsQuery();
+  const isEnabled = aiFlags.data?.completions || false;
 
   const [isOpen, setIsOpen] = useState(false);
   const [chatState, setChatState] = useState({ messages: [] } as ChatState);

client/src/app/queries/ai.ts

@@ -1,7 +1,8 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { client } from "@app/axios-config/apiInit";
-import { ChatState, completions } from "@app/client";
+import { aiFlags, ChatState, completions } from "@app/client";
+import { dataOf } from "./dataOf";
 
 export const useCompletionMutation = (
   onError?: (err: AxiosError, next: ChatState) => void,
@@ -16,3 +17,13 @@ export const useCompletionMutation = (
     onError,
   });
 };
+
+export const useFetchAiFlagsQuery = () => {
+  return useQuery({
+    queryKey: ["ai/flags"],
+    queryFn: () => {
+      return dataOf(aiFlags({ client }));
+    },
+    refetchInterval: false,
+  });
+};