150 lines
4.1 KiB
TypeScript
150 lines
4.1 KiB
TypeScript
import CardBox from '../CardBox';
|
|
import { mdiCog } from '@mdi/js';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import { ToastContainer, toast } from 'react-toastify';
|
|
import FormField from '../FormField';
|
|
import React from 'react';
|
|
import {
|
|
aiPrompt,
|
|
setErrorNotification,
|
|
resetNotify,
|
|
} from '../../stores/openAiSlice';
|
|
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
|
|
|
|
import { fetchWidgets } from '../../stores/roles/rolesSlice';
|
|
|
|
import BaseButton from '../BaseButton';
|
|
import CardBoxModal from '../CardBoxModal';
|
|
import { RoleSelect } from './RoleSelect';
|
|
|
|
export const WidgetCreator = ({
|
|
currentUser,
|
|
isFetchingQuery,
|
|
setWidgetsRole,
|
|
widgetsRole,
|
|
}) => {
|
|
const dispatch = useAppDispatch();
|
|
const [isModalOpen, setIsModalOpen] = React.useState(false);
|
|
const { notify: openAiNotify } = useAppSelector((state) => state.openAi);
|
|
|
|
const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
|
|
React.useEffect(() => {
|
|
if (openAiNotify.showNotification) {
|
|
notify(openAiNotify.typeNotification, openAiNotify.textNotification);
|
|
dispatch(resetNotify());
|
|
}
|
|
}, [openAiNotify.showNotification]);
|
|
|
|
const openModal = (): void => {
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleCloseModal = (value = {}) => {
|
|
setWidgetsRole(value);
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
const getWidgets = async () => {
|
|
await dispatch(fetchWidgets(widgetsRole?.role?.value || ''));
|
|
};
|
|
|
|
const smartSearch = async (
|
|
values: { description: string },
|
|
resetForm: any,
|
|
) => {
|
|
const description = values.description;
|
|
const projectId = '29665';
|
|
|
|
const payload = {
|
|
roleId: widgetsRole?.role?.value,
|
|
description,
|
|
projectId,
|
|
userId: currentUser?.id,
|
|
};
|
|
const { payload: responcePayload, error }: any = await dispatch(
|
|
aiPrompt(payload),
|
|
);
|
|
|
|
await getWidgets().then();
|
|
|
|
resetForm({ values: { description: '' } });
|
|
if (responcePayload.data?.error || error) {
|
|
const errorMessage =
|
|
responcePayload.data?.error?.message || error?.message;
|
|
await dispatch(
|
|
setErrorNotification(errorMessage || 'Error with widget creation'),
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<CardBox id='widgetCreator' className='mb-6 relative'>
|
|
<BaseButton
|
|
className='absolute top-0 right-0 m-4'
|
|
icon={mdiCog}
|
|
color='whiteDark'
|
|
roundedFull
|
|
onClick={openModal}
|
|
/>
|
|
<Formik
|
|
initialValues={{
|
|
description: '',
|
|
}}
|
|
onSubmit={(values, { resetForm }) => smartSearch(values, resetForm)}
|
|
>
|
|
<Form>
|
|
<FormField
|
|
label='Create Chart or Widget'
|
|
help={
|
|
isFetchingQuery
|
|
? 'Loading...'
|
|
: 'Describe your new widget or chart in natural language. For example: "Number of admin users" OR "red chart with number of closed contracts grouped by month"'
|
|
}
|
|
>
|
|
<Field
|
|
type='input'
|
|
name='description'
|
|
disabled={isFetchingQuery}
|
|
/>
|
|
</FormField>
|
|
</Form>
|
|
</Formik>
|
|
</CardBox>
|
|
<Formik
|
|
initialValues={{
|
|
role: '',
|
|
}}
|
|
onSubmit={(values) => handleCloseModal(values)}
|
|
>
|
|
{({ submitForm }) => (
|
|
<CardBoxModal
|
|
title='Widget Creator Settings'
|
|
buttonColor='info'
|
|
buttonLabel='Done'
|
|
isActive={isModalOpen}
|
|
onConfirm={submitForm}
|
|
onCancel={() => setIsModalOpen(false)}
|
|
>
|
|
<p>What role are we showing and creating widgets for?</p>
|
|
|
|
<Form>
|
|
<FormField>
|
|
<Field
|
|
name='role'
|
|
id='role'
|
|
component={RoleSelect}
|
|
options={widgetsRole?.role || []}
|
|
itemRef={'roles'}
|
|
currentUser={currentUser}
|
|
></Field>
|
|
</FormField>
|
|
</Form>
|
|
</CardBoxModal>
|
|
)}
|
|
</Formik>
|
|
<ToastContainer />
|
|
</>
|
|
);
|
|
};
|