show llm box only if active. else give link to docs

src/api/constants.ts

@@ -30,3 +30,4 @@ export const LOGIN_URL = `${API_V1}/o/login?redirect=${window.location.origin}`;
 
 // LLM queries
 export const LLM_QUERY_URL = `${API_V1}/llm`;
+export const IS_LLM_ACTIVE_URL = `${LLM_QUERY_URL}/isactive`;

src/pages/Query/Context.tsx

@@ -1,7 +1,10 @@
+import { Axios } from '@/api/axios';
+import { IS_LLM_ACTIVE_URL } from '@/api/constants';
+import useMountedState from '@/hooks/useMountedState';
 import useSubscribeState, { SubData } from '@/hooks/useSubscribeState';
 
 import type { FC } from 'react';
-import { ReactNode, createContext, useContext } from 'react';
+import { ReactNode, createContext, useContext, useEffect } from 'react';
 
 const Context = createContext({});
 
@@ -20,6 +23,7 @@ interface QueryPageContextMethods {}
 interface QueryPageContextValue {
 	state: QueryPageContextState;
 	methods: QueryPageContextMethods;
+	isLlmActive: boolean;
 }
 
 interface QueryPageProviderProps {
@@ -29,6 +33,7 @@ interface QueryPageProviderProps {
 const QueryPageProvider: FC<QueryPageProviderProps> = ({ children }) => {
 	const result = useSubscribeState<string>(defaultQueryResult);
 	const subSchemaToggle = useSubscribeState<boolean>(false);
+	const [isLlmActive, setIsLlmActive] = useMountedState(false);
 
 	const state: QueryPageContextState = {
 		result,
@@ -37,7 +42,22 @@ const QueryPageProvider: FC<QueryPageProviderProps> = ({ children }) => {
 
 	const methods: QueryPageContextMethods = {};
 
-	return <Provider value={{ state, methods }}>{children}</Provider>;
+	const checkIfLlmActive = async () => {
+		try {
+			const { data } = await Axios().post(IS_LLM_ACTIVE_URL);
+			if (data.is_active) {
+				setIsLlmActive(true);
+			}
+		} catch (error) {
+			console.log('Error in getting LLM status: ', error);
+		}
+	};
+
+	useEffect(() => {
+		checkIfLlmActive();
+	}, []);
+
+	return <Provider value={{ state, methods, isLlmActive }}>{children}</Provider>;
 };
 
 export const useQueryPageContext = () => useContext(Context) as QueryPageContextValue;

src/pages/Query/QueryCodeEditor.tsx

@@ -20,6 +20,7 @@ const QueryCodeEditor: FC = () => {
 	} = useHeaderContext();
 	const {
 		state: { result, subSchemaToggle },
+		isLlmActive,
 	} = useQueryPageContext();
 
 	const { data: queryResult, getQueryData, error, resetData } = useQueryResult();
@@ -176,6 +177,11 @@ const QueryCodeEditor: FC = () => {
 			<Box className={container}>
 				<Text className={textContext}>Query</Text>
 				<Box style={{ height: '100%', width: '100%', textAlign: 'right' }}>
+					{!isLlmActive ? (
+						<a style={{ marginRight: '2rem' }} href="https://www.parseable.io/docs/api/llm-queries">
+							Enable SQL generation with OpenAI
+						</a>
+					) : null}
 					<Tooltip
 						label={`View Schema for ${subLogQuery.get().streamName}`}
 						sx={{ color: 'white', backgroundColor: 'black' }}
@@ -206,20 +212,22 @@ const QueryCodeEditor: FC = () => {
 				</Box>
 			</Box>
 			<Box sx={{ marginTop: '5px', height: 'calc(100% - 60px)' }}>
-				<Box className="flex" style={{ display: 'flex', margin: '15px', flexWrap: 'wrap' }}>
-					<Input
-						type="text"
-						name="ai_query"
-						id="ai_query"
-						style={{ minWidth: '85%', margin: '2px 20px 10px 0' }}
-						value={aiQuery}
-						onChange={(e) => setAiQuery(e.target.value)}
-						placeholder="Ask Parseable AI"
-					/>
-					<Button variant="gradient" onClick={handleAIGenerate}>
-						Generate SQL
-					</Button>
-				</Box>
+				{isLlmActive ? (
+					<Box className="flex" style={{ display: 'flex', margin: '15px', flexWrap: 'wrap' }}>
+						<Input
+							type="text"
+							name="ai_query"
+							id="ai_query"
+							style={{ minWidth: '85%', margin: '2px 20px 10px 0' }}
+							value={aiQuery}
+							onChange={(e) => setAiQuery(e.target.value)}
+							placeholder="Ask Parseable AI"
+						/>
+						<Button variant="gradient" onClick={handleAIGenerate}>
+							Generate SQL
+						</Button>
+					</Box>
+				) : null}
 				<Editor
 					height={'100%'}
 					defaultLanguage="sql"