+
+ 
+ API KEY
+
+
+
+
+ API KEY
+
+
+
+
+
+
+
+
+
+
+
+ Don't have an API key?
+
+ ToolJet Copilot
+ is currently in beta and provided on request.
+ Join our waitlist to be notified when API keys become available, or sign up for beta access to get started
+ today.
+
+
+
+
+ 
+ 
{
e.stopPropagation();
callback();
diff --git a/frontend/src/Editor/CodeBuilder/utils.js b/frontend/src/Editor/CodeBuilder/utils.js
index aeddc40fcd..0e5db85e68 100644
--- a/frontend/src/Editor/CodeBuilder/utils.js
+++ b/frontend/src/Editor/CodeBuilder/utils.js
@@ -1,4 +1,40 @@
import _ from 'lodash';
+import { copilotService } from '@/_services/copilot.service';
+import { toast } from 'react-hot-toast';
+
+export async function getRecommendation(currentContext, query, lang = 'javascript') {
+ const words = query.split(' ');
+ let results = [];
+
+ function arrayToObject(arr) {
+ return _.reduce(
+ arr,
+ (result, { key, value }) => {
+ if (!result.hasOwnProperty(key)) {
+ result[key] = value;
+ }
+ return result;
+ },
+ {}
+ );
+ }
+
+ try {
+ words.forEach((word) => {
+ results = results.concat(searchQuery(word, currentContext));
+ });
+
+ const context = JSON.stringify(arrayToObject(results));
+
+ const { data } = await copilotService.getCopilotRecommendations({ context, query, lang });
+
+ return query + '\n' + data;
+ } catch ({ error, data }) {
+ const errorMessage = data?.message.includes('Unauthorized') ? 'Invalid Copilot API Key' : 'Something went wrong';
+ toast.error(errorMessage);
+ return query;
+ }
+}
function getResult(suggestionList, query) {
const result = suggestionList.filter((key) => key.includes(query));
@@ -249,3 +285,21 @@ export function handleChange(editor, onChange, ignoreBraces = false, currentStat
keystrokeCaller();
}
}
+
+function searchQuery(query, obj) {
+ const lcQuery = query.toLowerCase();
+ let results = [];
+
+ for (const key in obj) {
+ const value = obj[key];
+ if (value !== null && typeof value === 'object') {
+ results = results?.concat(searchQuery(lcQuery, value));
+ } else {
+ if (key?.toLowerCase()?.includes(lcQuery) || value?.toString()?.toLowerCase()?.includes(lcQuery)) {
+ results.push({ key, value });
+ }
+ }
+ }
+
+ return results;
+}
diff --git a/frontend/src/Editor/QueryManager/Transformation.jsx b/frontend/src/Editor/QueryManager/Transformation.jsx
index 1896aff857..e2f321ab4f 100644
--- a/frontend/src/Editor/QueryManager/Transformation.jsx
+++ b/frontend/src/Editor/QueryManager/Transformation.jsx
@@ -5,6 +5,7 @@ import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/search/match-highlighter';
import 'codemirror/addon/hint/show-hint.css';
import { CodeHinter } from '../CodeBuilder/CodeHinter';
+import { getRecommendation } from '../CodeBuilder/utils';
import { Popover, OverlayTrigger } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import Select from '@/_ui/Select';
@@ -12,9 +13,13 @@ import { useLocalStorageState } from '@/_hooks/use-local-storage';
import _ from 'lodash';
import { CustomToggleSwitch } from './CustomToggleSwitch';
import { queryManagerSelectComponentStyle } from '@/_ui/Select/styles';
+import { Button } from '@/_ui/LeftSidebar';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import { authenticationService } from '@/_services';
export const Transformation = ({ changeOption, currentState, options, darkMode, queryId }) => {
const { t } = useTranslation();
+ const { current_organization_id } = authenticationService.currentSessionValue;
const [lang, setLang] = React.useState(options?.transformationLanguage ?? 'javascript');
@@ -33,6 +38,17 @@ return [row for row in data if row['amount'] > 1000]
const [state, setState] = useLocalStorageState('transformation', defaultValue);
+ const [fetchingRecommendation, setFetchingRecommendation] = useState(false);
+ const isCopilotEnabled = localStorage.getItem(`copilotEnabled-${current_organization_id}`) === 'true';
+
+ const handleCallToGPT = async () => {
+ setFetchingRecommendation(true);
+ const query = state[lang];
+ const recommendation = await getRecommendation(currentState, query, lang);
+ setFetchingRecommendation(false);
+ changeOption('transformation', recommendation);
+ };
+
function toggleEnableTransformation() {
setEnableTransformation((prev) => !prev);
changeOption('enableTransformation', !enableTransformation);
@@ -136,22 +152,45 @@ return [row for row in data if row['amount'] > 1000]
);
- return (
-