diff --git a/src/features/home/ClickBox.tsx b/src/features/home/ClickBox.tsx
index b1dc735..922510c 100644
--- a/src/features/home/ClickBox.tsx
+++ b/src/features/home/ClickBox.tsx
@@ -4,14 +4,16 @@ import { useAppDispatch, useAppSelector } from '../../app/hooks/reduxHooks'
import { listFormData, loadForm, removeForm } from '../wizard/FormDataSlice'
import { red } from '@mui/material/colors'
import { replaceSchema, replaceUISchema } from '../wizard/WizardSlice'
+import {ConfirmButton} from "../modals/ChatGptModal";
type ClickBoxProps = {
id: string
title: string
avatar?: string
disableActions?: boolean
+ originalPrompt?: string
}
-export const ClickBox = ({ id, title, avatar, disableActions }: ClickBoxProps) => {
+export const ClickBox = ({ id, title, avatar, originalPrompt, disableActions }: ClickBoxProps) => {
const dispatch = useAppDispatch()
const formList = useAppSelector(listFormData)
const handleLoad = useCallback(() => {
@@ -48,6 +50,7 @@ export const ClickBox = ({ id, title, avatar, disableActions }: ClickBoxProps) =
+ {originalPrompt && KI text bearbeiten }
)}
diff --git a/src/features/home/DragBox.tsx b/src/features/home/DragBox.tsx
index ef9a4f7..b34119a 100644
--- a/src/features/home/DragBox.tsx
+++ b/src/features/home/DragBox.tsx
@@ -5,14 +5,16 @@ import { DraggableComponent, replaceSchema, replaceUISchema } from '../wizard/Wi
import { useAppDispatch } from '../../app/hooks/reduxHooks'
import { newForm } from '../wizard/FormDataSlice'
import { removeTemplate } from '../wizard/TemplateSlice'
+import {ConfirmButton} from "../modals/ChatGptModal";
type DragBoxProps = {
name: string
img?: string
componentMeta: DraggableComponent
- disableActions?: boolean
+ disableActions?: boolean,
+ originalPrompt?: string
}
-const DragBox = ({ name = 'Eingabefeld', img = '', componentMeta, disableActions }: DragBoxProps) => {
+const DragBox = ({ name = 'Eingabefeld', img = '', componentMeta, disableActions, originalPrompt}: DragBoxProps) => {
const dispatch = useAppDispatch()
const [, dragRef] = useDrag(
() => ({
@@ -33,7 +35,7 @@ const DragBox = ({ name = 'Eingabefeld', img = '', componentMeta, disableActions
const handleReplace = useCallback(() => {
dispatch(replaceSchema(componentMeta.jsonSchemaElement))
dispatch(replaceUISchema(componentMeta.uiSchema))
- dispatch(newForm({ jsonSchema: componentMeta.jsonSchemaElement, uiSchema: componentMeta.uiSchema }))
+ dispatch(newForm({ jsonSchema: componentMeta.jsonSchemaElement, uiSchema: componentMeta.uiSchema, originalPrompt: componentMeta.originalPrompt }))
}, [dispatch, componentMeta])
const handleRemove = useCallback(() => {
@@ -52,6 +54,7 @@ const DragBox = ({ name = 'Eingabefeld', img = '', componentMeta, disableActions
+ {originalPrompt && KI text bearbeiten }
)}
diff --git a/src/features/home/LeftDrawer.tsx b/src/features/home/LeftDrawer.tsx
index 5423dcc..fd94fe4 100644
--- a/src/features/home/LeftDrawer.tsx
+++ b/src/features/home/LeftDrawer.tsx
@@ -5,7 +5,7 @@ import Drawer from '@mui/material/Drawer'
import Toolbar from '@mui/material/Toolbar'
import DragBox from './DragBox'
-import { DraggableComponent, selectJsonSchema, selectUiSchema } from '../wizard/WizardSlice'
+import {DraggableComponent, selectJsonSchema, selectOriginalPrompt, selectUiSchema} from '../wizard/WizardSlice'
import { TabContext, TabList, TabPanel } from '@mui/lab'
import { Button, Tab } from '@mui/material'
import { useCallback } from 'react'
@@ -142,9 +142,10 @@ export const NewEntryButton = () => {
const dispatch = useAppDispatch()
const jsonSchema = useAppSelector(selectJsonSchema)
const uiSchema = useAppSelector(selectUiSchema)
+ const originalPrompt = useAppSelector(selectOriginalPrompt)
const handleNewEntry = useCallback(() => {
- dispatch(newForm({ jsonSchema, uiSchema }))
- }, [dispatch, jsonSchema, uiSchema])
+ dispatch(newForm({ jsonSchema, uiSchema, originalPrompt }))
+ }, [dispatch, jsonSchema, uiSchema, originalPrompt])
return (
} variant={'contained'} onClick={handleNewEntry}>
New Entry
@@ -207,13 +208,13 @@ export default function LeftDrawer() {
return
})}
{templates.map((component, index) => {
- return
+ return
})}
- {formDataList.map(({ id, title, avatar }) => {
- return
+ {formDataList.map(({ id, title, avatar, originalPrompt }) => {
+ return
})}
diff --git a/src/features/modals/ChatGptModal.tsx b/src/features/modals/ChatGptModal.tsx
index 867d21c..1a3e403 100644
--- a/src/features/modals/ChatGptModal.tsx
+++ b/src/features/modals/ChatGptModal.tsx
@@ -15,13 +15,14 @@ import { Backdrop, CircularProgress, Grid, Tab, TextField } from '@mui/material'
import { useAppDispatch } from '../../app/hooks/reduxHooks'
import { addTemplate } from '../wizard/TemplateSlice'
import { generateDefaultUISchema } from '@jsonforms/core'
-import { DraggableComponent } from '../wizard/WizardSlice'
+import {DraggableComponent, replaceSchema, replaceUISchema} from '../wizard/WizardSlice'
import Box from '@mui/material/Box'
import { LoadingButton, TabContext, TabList, TabPanel } from '@mui/lab'
import DropTargetFormsPreview from '../dragAndDrop/DropTargetFormsPreview'
import Vocal from '@untemps/react-vocal'
import { AndroidRounded } from '@mui/icons-material'
import { useAI } from '../../app/hooks/aiContext'
+import {newForm} from "../wizard/FormDataSlice";
interface ConfirmModalProps {
onConfirm?: () => void
@@ -29,7 +30,8 @@ interface ConfirmModalProps {
confirmButtonTextID?: string
cancelButtonTextID?: string
modalBodyTextID?: string
- modalHeaderTextID?: string
+ modalHeaderTextID?: string,
+ defaultPrompt?: string
}
const Transition = React.forwardRef(function Transition(
@@ -39,11 +41,11 @@ const Transition = React.forwardRef(function Transition(
return
})
-const ChatGptModal = NiceModal.create(({ onConfirm = () => null, onReject = () => null }) => {
+const ChatGptModal = NiceModal.create(({ onConfirm = () => null, onReject = () => null, defaultPrompt }) => {
const modal = useModal()
const [response, setResponse] = useState('')
const [formTitle, setFormTitle] = useState('AI-generated form')
- const [message, setMessage] = useState('')
+ const [message, setMessage] = useState(defaultPrompt || '')
const [newElement, setNewElement] = useState(undefined)
const dispatch = useAppDispatch()
const [activeTab, setActiveTab] = useState('2')
@@ -61,6 +63,7 @@ const ChatGptModal = NiceModal.create(({ onConfirm = () => nu
let jsonSchema = JSON.parse(response)
const element = {
name: formTitle,
+ originalPrompt: message,
jsonSchemaElement: jsonSchema,
uiSchema: {
type: 'Group',
@@ -73,7 +76,7 @@ const ChatGptModal = NiceModal.create(({ onConfirm = () => nu
} catch (e) {
console.error(e)
}
- }, [response, formTitle])
+ }, [response, formTitle, message, setNewElement])
const talkToAI = useCallback(
async (text) => {
@@ -149,6 +152,21 @@ const ChatGptModal = NiceModal.create(({ onConfirm = () => nu
},
[setActiveTab]
)
+
+ const handleReplace = useCallback(() => {
+
+ dispatch(
+ addTemplate({
+ element: newElement,
+ })
+ )
+ const componentMeta = newElement
+ dispatch(replaceSchema(componentMeta.jsonSchemaElement))
+ dispatch(replaceUISchema(componentMeta.uiSchema))
+ dispatch(newForm({ jsonSchema: componentMeta.jsonSchemaElement, uiSchema: componentMeta.uiSchema, originalPrompt: componentMeta.originalPrompt }))
+ modal.hide()
+ onConfirm()
+ }, [newElement, dispatch, modal, onConfirm])
return (