From 4d1c402246b778fc8e533d44902260e50d5a220c Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Wed, 6 Sep 2023 13:45:05 +0530 Subject: [PATCH 01/10] Add AI based SQL generator from natural laguage --- .env.example | 1 + src/utils/index.ts | 26 ++++++++++++++++++++++++++ src/vite-env.d.ts | 1 + 3 files changed, 28 insertions(+) diff --git a/.env.example b/.env.example index 6cc5dc73..fdf29a3d 100644 --- a/.env.example +++ b/.env.example @@ -1 +1,2 @@ VITE_PARSEABLE_URL="https://demo.parseable.io" +VITE_OPENAI_API_KEY='sk-...' diff --git a/src/utils/index.ts b/src/utils/index.ts index 3b739354..3f325099 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,4 +1,5 @@ import dayjs from 'dayjs'; +import axios from 'axios'; export const wait = (sec = 1) => new Promise((res) => setTimeout(res, sec * 1000)); @@ -33,3 +34,28 @@ export const parseLogData = (value?: any, columnName?: string) => { return 'N/A'; }; + +export const makeAPIRequest = async (promptContent: string) => { + const data = { + model: 'gpt-3.5-turbo', + messages: [{ role: 'user', content: promptContent }], + temperature: 0.5, + }; + + const apiKey = import.meta.env.VITE_OPENAI_API_KEY; + + const headers = { + 'Content-Type': 'application/json', + Authorization: `Bearer ${apiKey}`, + }; + + try { + const response = await axios.post('https://api.openai.com/v1/chat/completions', data, { headers }); + const { + choices: [choice], + } = response.data; + return choice.message.content; + } catch (error) { + console.error(error); + } +}; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 2864218c..1314948b 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -2,6 +2,7 @@ interface ImportMetaEnv { readonly VITE_PARSEABLE_URL?: string; + readonly VITE_OPENAI_API_KEY?: string; } interface ImportMeta { From 34682c4c5854f5d4c562d5765b49367b356adac3 Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Thu, 7 Sep 2023 13:54:02 +0530 Subject: [PATCH 02/10] make llm query from backend api instead of env --- .env.example | 1 - src/api/constants.ts | 9 +++++++++ src/pages/Query/QueryCodeEditor.tsx | 9 --------- src/utils/index.ts | 26 -------------------------- src/vite-env.d.ts | 1 - 5 files changed, 9 insertions(+), 37 deletions(-) diff --git a/.env.example b/.env.example index fdf29a3d..6cc5dc73 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1 @@ VITE_PARSEABLE_URL="https://demo.parseable.io" -VITE_OPENAI_API_KEY='sk-...' diff --git a/src/api/constants.ts b/src/api/constants.ts index 75aa334b..6f1ec5fc 100644 --- a/src/api/constants.ts +++ b/src/api/constants.ts @@ -18,5 +18,14 @@ export const USER_URL = (username: string) => `${USERS_LIST_URL}/${username}`; export const USER_ROLES_URL = (username: string) => `${USER_URL(username)}/role`; export const USER_PASSWORD_URL = (username: string) => `${USER_URL(username)}/generate-new-password`; + +// Roles Management +export const ROLES_LIST_URL = `${API_V1}/role`; +export const ROLE_URL = (roleName: string) => `${ROLES_LIST_URL}/${roleName}`; + + +//USERS LOGIN + +export const LOGIN_URL = `${API_V1}/o/login?redirect=${window.location.origin}`; // LLM queries export const LLM_QUERY_URL = `${API_V1}/llm`; diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 832aa3b4..09d44153 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -112,15 +112,6 @@ const QueryCodeEditor: FC = () => { const query = sanitseSqlString(inputQuery); resetData(); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Running Query', - message: 'Data will be loaded.', - autoClose: false, - withCloseButton: false, - }); let LogQuery = { startTime: subLogQuery.get().startTime, endTime: subLogQuery.get().endTime, diff --git a/src/utils/index.ts b/src/utils/index.ts index 3f325099..3b739354 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,4 @@ import dayjs from 'dayjs'; -import axios from 'axios'; export const wait = (sec = 1) => new Promise((res) => setTimeout(res, sec * 1000)); @@ -34,28 +33,3 @@ export const parseLogData = (value?: any, columnName?: string) => { return 'N/A'; }; - -export const makeAPIRequest = async (promptContent: string) => { - const data = { - model: 'gpt-3.5-turbo', - messages: [{ role: 'user', content: promptContent }], - temperature: 0.5, - }; - - const apiKey = import.meta.env.VITE_OPENAI_API_KEY; - - const headers = { - 'Content-Type': 'application/json', - Authorization: `Bearer ${apiKey}`, - }; - - try { - const response = await axios.post('https://api.openai.com/v1/chat/completions', data, { headers }); - const { - choices: [choice], - } = response.data; - return choice.message.content; - } catch (error) { - console.error(error); - } -}; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 1314948b..2864218c 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -2,7 +2,6 @@ interface ImportMetaEnv { readonly VITE_PARSEABLE_URL?: string; - readonly VITE_OPENAI_API_KEY?: string; } interface ImportMeta { From 5f10483128895af19faa15f479c111b227190ef3 Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Thu, 7 Sep 2023 14:02:07 +0530 Subject: [PATCH 03/10] =?UTF-8?q?deepsource=20fix=F0=9F=A4=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Query/QueryCodeEditor.tsx | 10 ++++++++++ src/utils/index.ts | 9 +++++++++ 2 files changed, 19 insertions(+) diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 09d44153..0956a4ef 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -13,6 +13,7 @@ import dayjs from 'dayjs'; import { notify } from '@/utils/notification'; import { Axios } from '@/api/axios'; import { LLM_QUERY_URL } from '@/api/constants'; +import { filterUnnecessaryFieldsFromRecord } from '@/utils'; const QueryCodeEditor: FC = () => { const { @@ -112,6 +113,15 @@ const QueryCodeEditor: FC = () => { const query = sanitseSqlString(inputQuery); resetData(); + notifications.show({ + id: 'load-data', + loading: true, + color: '#545BEB', + title: 'Running Query', + message: 'Data will be loaded.', + autoClose: false, + withCloseButton: false, + }); let LogQuery = { startTime: subLogQuery.get().startTime, endTime: subLogQuery.get().endTime, diff --git a/src/utils/index.ts b/src/utils/index.ts index 3b739354..a7b94eb3 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,4 @@ +import { Field } from '@/@types/parseable/dataType'; import dayjs from 'dayjs'; export const wait = (sec = 1) => new Promise((res) => setTimeout(res, sec * 1000)); @@ -33,3 +34,11 @@ export const parseLogData = (value?: any, columnName?: string) => { return 'N/A'; }; + +export const filterUnnecessaryFieldsFromRecord = (objArray: Field[] = []) => { + // For selecting only the necessary parts of schema to pass on to llm query + return objArray.map((obj) => { + const { name, data_type } = obj; + return { name, data_type }; + }); +}; From 7be52e977db13f2e324b78fc0aa0e85999091d72 Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Thu, 7 Sep 2023 13:54:02 +0530 Subject: [PATCH 04/10] make llm query from backend api instead of env --- src/api/constants.ts | 1 + src/pages/Query/QueryCodeEditor.tsx | 9 --------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/api/constants.ts b/src/api/constants.ts index 6f1ec5fc..3b3ac0d1 100644 --- a/src/api/constants.ts +++ b/src/api/constants.ts @@ -27,5 +27,6 @@ export const ROLE_URL = (roleName: string) => `${ROLES_LIST_URL}/${roleName}`; //USERS LOGIN export const LOGIN_URL = `${API_V1}/o/login?redirect=${window.location.origin}`; + // LLM queries export const LLM_QUERY_URL = `${API_V1}/llm`; diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 0956a4ef..5b1d47ae 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -113,15 +113,6 @@ const QueryCodeEditor: FC = () => { const query = sanitseSqlString(inputQuery); resetData(); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Running Query', - message: 'Data will be loaded.', - autoClose: false, - withCloseButton: false, - }); let LogQuery = { startTime: subLogQuery.get().startTime, endTime: subLogQuery.get().endTime, From 9dad86854f3b7eaa3178f669a18513c69522b7ac Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Fri, 8 Sep 2023 19:48:05 +0530 Subject: [PATCH 05/10] move llm query to backend --- src/pages/Query/QueryCodeEditor.tsx | 1 - src/utils/index.ts | 8 -------- 2 files changed, 9 deletions(-) diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 5b1d47ae..09d44153 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -13,7 +13,6 @@ import dayjs from 'dayjs'; import { notify } from '@/utils/notification'; import { Axios } from '@/api/axios'; import { LLM_QUERY_URL } from '@/api/constants'; -import { filterUnnecessaryFieldsFromRecord } from '@/utils'; const QueryCodeEditor: FC = () => { const { diff --git a/src/utils/index.ts b/src/utils/index.ts index a7b94eb3..ed3e529d 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -34,11 +34,3 @@ export const parseLogData = (value?: any, columnName?: string) => { return 'N/A'; }; - -export const filterUnnecessaryFieldsFromRecord = (objArray: Field[] = []) => { - // For selecting only the necessary parts of schema to pass on to llm query - return objArray.map((obj) => { - const { name, data_type } = obj; - return { name, data_type }; - }); -}; From 0035b9a9aab3f1faf3f49bd45df5d55ceb3162a9 Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Fri, 8 Sep 2023 19:59:09 +0530 Subject: [PATCH 06/10] refactoring --- src/pages/Query/QueryCodeEditor.tsx | 9 +++++++++ src/utils/index.ts | 1 - 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 09d44153..832aa3b4 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -112,6 +112,15 @@ const QueryCodeEditor: FC = () => { const query = sanitseSqlString(inputQuery); resetData(); + notifications.show({ + id: 'load-data', + loading: true, + color: '#545BEB', + title: 'Running Query', + message: 'Data will be loaded.', + autoClose: false, + withCloseButton: false, + }); let LogQuery = { startTime: subLogQuery.get().startTime, endTime: subLogQuery.get().endTime, diff --git a/src/utils/index.ts b/src/utils/index.ts index ed3e529d..3b739354 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,4 +1,3 @@ -import { Field } from '@/@types/parseable/dataType'; import dayjs from 'dayjs'; export const wait = (sec = 1) => new Promise((res) => setTimeout(res, sec * 1000)); From 731d8f171042bccd44af4a210cddac8ab51c2d24 Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Mon, 11 Sep 2023 19:31:26 +0530 Subject: [PATCH 07/10] show llm box only if active. else give link to docs --- src/api/constants.ts | 1 + src/pages/Query/Context.tsx | 24 +++++++++++++++++-- src/pages/Query/QueryCodeEditor.tsx | 36 ++++++++++++++++++----------- 3 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/api/constants.ts b/src/api/constants.ts index 3b3ac0d1..c593433b 100644 --- a/src/api/constants.ts +++ b/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`; diff --git a/src/pages/Query/Context.tsx b/src/pages/Query/Context.tsx index bad4b199..a74fd75c 100644 --- a/src/pages/Query/Context.tsx +++ b/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 = ({ children }) => { const result = useSubscribeState(defaultQueryResult); const subSchemaToggle = useSubscribeState(false); + const [isLlmActive, setIsLlmActive] = useMountedState(false); const state: QueryPageContextState = { result, @@ -37,7 +42,22 @@ const QueryPageProvider: FC = ({ children }) => { const methods: QueryPageContextMethods = {}; - return {children}; + 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 {children}; }; export const useQueryPageContext = () => useContext(Context) as QueryPageContextValue; diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 832aa3b4..25044584 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/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 = () => { Query + {!isLlmActive ? ( + + Enable SQL generation with OpenAI + + ) : null} { - - setAiQuery(e.target.value)} - placeholder="Ask Parseable AI" - /> - - + {isLlmActive ? ( + + setAiQuery(e.target.value)} + placeholder="Ask Parseable AI" + /> + + + ) : null} Date: Mon, 11 Sep 2023 20:12:51 +0530 Subject: [PATCH 08/10] remove constants for Oauth --- src/api/constants.ts | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/api/constants.ts b/src/api/constants.ts index c593433b..07abda2a 100644 --- a/src/api/constants.ts +++ b/src/api/constants.ts @@ -18,16 +18,6 @@ export const USER_URL = (username: string) => `${USERS_LIST_URL}/${username}`; export const USER_ROLES_URL = (username: string) => `${USER_URL(username)}/role`; export const USER_PASSWORD_URL = (username: string) => `${USER_URL(username)}/generate-new-password`; - -// Roles Management -export const ROLES_LIST_URL = `${API_V1}/role`; -export const ROLE_URL = (roleName: string) => `${ROLES_LIST_URL}/${roleName}`; - - -//USERS LOGIN - -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`; From 86ec9f056e02c954d73f7a56df6445ef0240afbe Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Mon, 11 Sep 2023 20:56:23 +0530 Subject: [PATCH 09/10] Minor refactoring with useCallback --- src/pages/Query/Context.tsx | 5 ++--- src/pages/Query/QueryCodeEditor.tsx | 13 +++++++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/pages/Query/Context.tsx b/src/pages/Query/Context.tsx index a74fd75c..8c962011 100644 --- a/src/pages/Query/Context.tsx +++ b/src/pages/Query/Context.tsx @@ -42,12 +42,11 @@ const QueryPageProvider: FC = ({ children }) => { const methods: QueryPageContextMethods = {}; + // function to test if LLM key has been set up in the backend const checkIfLlmActive = async () => { try { const { data } = await Axios().post(IS_LLM_ACTIVE_URL); - if (data.is_active) { - setIsLlmActive(true); - } + setIsLlmActive(data.is_active); } catch (error) { console.log('Error in getting LLM status: ', error); } diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index 25044584..f177ee59 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect } from 'react'; +import React, { FC, useCallback, useEffect } from 'react'; import Editor from '@monaco-editor/react'; import { useQueryPageContext } from './Context'; import { useHeaderContext } from '@/layouts/MainLayout/Context'; @@ -32,12 +32,17 @@ const QueryCodeEditor: FC = () => { const [query, setQuery] = useMountedState(''); const [aiQuery, setAiQuery] = useMountedState('Show all records'); - const handleAIGenerate = async () => { + const handleAIGenerate = useCallback(async () => { if (!aiQuery?.length) { notify({ message: 'Please enter a valid query' }); return; } - notify({ message: 'AI based SQL being generated.', title: 'Getting suggestions', autoClose: 3000, color: 'blue' }); + notify({ + message: 'AI based SQL being generated.', + title: 'Getting suggestions', + autoClose: 3000, + color: 'blue', + }); const resp = await Axios().post(LLM_QUERY_URL, { prompt: aiQuery, stream: currentStreamName }); if (resp.status !== 200) { @@ -52,7 +57,7 @@ const QueryCodeEditor: FC = () => { const warningMsg = '-- Parseable AI is experimental and may produce incorrect answers\n-- Always verify the generated SQL before executing\n\n'; setQuery(warningMsg + resp.data); - }; + }, [aiQuery]); const handleEditorChange = (code: any) => { setQuery(code); From ceabd0f478d60c10cdd96c8e404b75f4cdc75989 Mon Sep 17 00:00:00 2001 From: Aldrin Jenson Date: Tue, 12 Sep 2023 03:32:00 +0530 Subject: [PATCH 10/10] move is llm active api to about API --- src/@types/parseable/api/about.ts | 24 ++--- src/components/Navbar/infoModal.tsx | 141 ++++++++++++++-------------- src/pages/Query/Context.tsx | 23 +---- src/pages/Query/QueryCodeEditor.tsx | 7 +- 4 files changed, 92 insertions(+), 103 deletions(-) diff --git a/src/@types/parseable/api/about.ts b/src/@types/parseable/api/about.ts index c83321a7..560ded50 100644 --- a/src/@types/parseable/api/about.ts +++ b/src/@types/parseable/api/about.ts @@ -1,11 +1,13 @@ -export type AboutData ={ - commit : string; - deploymentId : string; - latestVersion : string; - license : string; - mode : string; - staging : string; - store : string; - updateAvailable : boolean; - version : string; -} \ No newline at end of file +export type AboutData = { + commit: string; + deploymentId: string; + latestVersion: string; + license: string; + mode: string; + staging: string; + store: string; + updateAvailable: boolean; + version: string; + llmActive: boolean; + llmProvider: string; +}; diff --git a/src/components/Navbar/infoModal.tsx b/src/components/Navbar/infoModal.tsx index 7939e024..ae555a98 100644 --- a/src/components/Navbar/infoModal.tsx +++ b/src/components/Navbar/infoModal.tsx @@ -1,5 +1,5 @@ import { Box, Button, Modal, Text, Tooltip, px } from '@mantine/core'; -import { FC, useEffect } from 'react'; +import { FC, useEffect, useMemo } from 'react'; import { useInfoModalStyles } from './styles'; import { useGetAbout } from '@/hooks/useGetAbout'; import { IconAlertCircle, IconBook2, IconBrandGithub, IconBrandSlack, IconBusinessplan } from '@tabler/icons-react'; @@ -69,6 +69,14 @@ const InfoModal: FC = (props) => { }; }, []); + const llmStatus = useMemo(() => { + let status = 'LLM API Key not set'; + if (data?.llmActive) { + status = `${data.llmProvider} configured`; + } + return status; + }, [data?.llmActive]); + const { classes } = useInfoModalStyles(); const { container, @@ -80,96 +88,91 @@ const InfoModal: FC = (props) => { aboutTextKey, aboutTextValue, aboutTextInnerBox, - actionBtnRed + actionBtnRed, } = classes; return ( - + - - About Parseable - Important info about your Parseable deployment - {error ? ( - Error... - ) : loading ? ( - Loading... - ) : data ? ( - <> - - - License: - {data.license} - - - - - Commit: - {data.commit} - - - Version: - {data.version} - {data.updateAvailable ? ( - ): null} - - + + ) : null} - - - Deployment Id: - {data.deploymentId} - - - Mode - {data.mode} - - - Staging - {data.staging} - - - Store - {data.store} - + + + + Deployment Id: + {data.deploymentId} - - ) : null} - - Need help? - Ensure uninterrupted deployment + + Mode + {data.mode} + + + Staging + {data.staging} + + + Store + {data.store} + + + LLM Status + {llmStatus} + + + + ) : null} - - {helpResources.map((data) => ( - - ))} - + Need help? + Ensure uninterrupted deployment + + {helpResources.map((data) => ( + + ))} - + ); }; diff --git a/src/pages/Query/Context.tsx b/src/pages/Query/Context.tsx index 8c962011..bad4b199 100644 --- a/src/pages/Query/Context.tsx +++ b/src/pages/Query/Context.tsx @@ -1,10 +1,7 @@ -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, useEffect } from 'react'; +import { ReactNode, createContext, useContext } from 'react'; const Context = createContext({}); @@ -23,7 +20,6 @@ interface QueryPageContextMethods {} interface QueryPageContextValue { state: QueryPageContextState; methods: QueryPageContextMethods; - isLlmActive: boolean; } interface QueryPageProviderProps { @@ -33,7 +29,6 @@ interface QueryPageProviderProps { const QueryPageProvider: FC = ({ children }) => { const result = useSubscribeState(defaultQueryResult); const subSchemaToggle = useSubscribeState(false); - const [isLlmActive, setIsLlmActive] = useMountedState(false); const state: QueryPageContextState = { result, @@ -42,21 +37,7 @@ const QueryPageProvider: FC = ({ children }) => { const methods: QueryPageContextMethods = {}; - // function to test if LLM key has been set up in the backend - const checkIfLlmActive = async () => { - try { - const { data } = await Axios().post(IS_LLM_ACTIVE_URL); - setIsLlmActive(data.is_active); - } catch (error) { - console.log('Error in getting LLM status: ', error); - } - }; - - useEffect(() => { - checkIfLlmActive(); - }, []); - - return {children}; + return {children}; }; export const useQueryPageContext = () => useContext(Context) as QueryPageContextValue; diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index f177ee59..a264eb04 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect } from 'react'; +import React, { FC, useCallback, useEffect, useMemo } from 'react'; import Editor from '@monaco-editor/react'; import { useQueryPageContext } from './Context'; import { useHeaderContext } from '@/layouts/MainLayout/Context'; @@ -13,6 +13,7 @@ import dayjs from 'dayjs'; import { notify } from '@/utils/notification'; import { Axios } from '@/api/axios'; import { LLM_QUERY_URL } from '@/api/constants'; +import { useGetAbout } from '@/hooks/useGetAbout'; const QueryCodeEditor: FC = () => { const { @@ -20,7 +21,6 @@ const QueryCodeEditor: FC = () => { } = useHeaderContext(); const { state: { result, subSchemaToggle }, - isLlmActive, } = useQueryPageContext(); const { data: queryResult, getQueryData, error, resetData } = useQueryResult(); @@ -31,6 +31,8 @@ const QueryCodeEditor: FC = () => { const [currentStreamName, setCurrentStreamName] = useMountedState(subLogQuery.get().streamName); const [query, setQuery] = useMountedState(''); const [aiQuery, setAiQuery] = useMountedState('Show all records'); + const { data: aboutData, getAbout } = useGetAbout(); + const isLlmActive = useMemo(() => aboutData?.llmActive, [aboutData?.llmActive]); const handleAIGenerate = useCallback(async () => { if (!aiQuery?.length) { @@ -97,6 +99,7 @@ const QueryCodeEditor: FC = () => { if (subLogQuery.get().streamName) { setQuery(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100 ; `); } + getAbout(); }, []); function handleEditorDidMount(editor: any, monaco: any) {