small usability improvements

FormsWizard · Aug 20, 2024 · f719d6c · f719d6c
1 parent 8606ac3
commit f719d6c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 18 deletions.
diff --git 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) =
           </Button>
           <Button onClick={handleLoad}>load only Data</Button>
           <Button onClick={handleRemove}>Eintrag entfernen</Button>
+          {originalPrompt && <ConfirmButton defaultPrompt={originalPrompt}>KI text bearbeiten</ConfirmButton> }
         </CardActionArea>
       )}
     </Card>

diff --git 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
           <CardActionArea>
             <Button onClick={handleReplace}>Formular ersetzen</Button>
             <Button onClick={handleRemove}>Template entfernen</Button>
+            {originalPrompt && <ConfirmButton defaultPrompt={originalPrompt}>KI text bearbeiten</ConfirmButton> }
           </CardActionArea>
         )}
       </CardActionArea>

diff --git 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 (
     <Button startIcon={<CreateRounded />} variant={'contained'} onClick={handleNewEntry}>
       New Entry
@@ -207,13 +208,13 @@ export default function LeftDrawer() {
             return <DragBox name={component.name} key={component.name} componentMeta={component}></DragBox>
           })}
           {templates.map((component, index) => {
-            return <DragBox name={component.name} key={component.name} componentMeta={component}></DragBox>
+            return <DragBox name={component.name} key={component.name} componentMeta={component} originalPrompt={component.originalPrompt}></DragBox>
           })}
         </TabPanel>
         <TabPanel value={'3'} sx={{ p: 0 }}>
           <NewEntryButton></NewEntryButton>
-          {formDataList.map(({ id, title, avatar }) => {
-            return <ClickBox key={id} title={title} avatar={avatar} id={id}></ClickBox>
+          {formDataList.map(({ id, title, avatar, originalPrompt }) => {
+            return <ClickBox key={id} title={title} avatar={avatar} id={id} originalPrompt={originalPrompt}></ClickBox>
           })}
         </TabPanel>
       </TabContext>

diff --git a/src/features/modals/ChatGptModal.tsx b/src/features/modals/ChatGptModal.tsx
@@ -15,21 +15,23 @@ 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
   onReject?: () => void
   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 <Slide direction="up" ref={ref} {...props} />
 })
 
-const ChatGptModal = NiceModal.create<ConfirmModalProps>(({ onConfirm = () => null, onReject = () => null }) => {
+const ChatGptModal = NiceModal.create<ConfirmModalProps>(({ 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<DraggableComponent | undefined>(undefined)
   const dispatch = useAppDispatch()
   const [activeTab, setActiveTab] = useState('2')
@@ -61,6 +63,7 @@ const ChatGptModal = NiceModal.create<ConfirmModalProps>(({ 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<ConfirmModalProps>(({ 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<ConfirmModalProps>(({ 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 (
     <Dialog
       TransitionComponent={Transition}
@@ -202,7 +220,8 @@ const ChatGptModal = NiceModal.create<ConfirmModalProps>(({ onConfirm = () => nu
         </Grid>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleAgree} color="primary">
+        <Button variant={'contained'} color='secondary' onClick={handleReplace} disabled={!newElement}>aktuelles Formular ersetzten</Button>
+        <Button onClick={handleAgree} color="primary" disabled={!newElement}>
           <FormattedMessage description="confirm modal header" defaultMessage="agree" id="agree"></FormattedMessage>
         </Button>
         <Button onClick={handleDisagree} color="primary">
@@ -229,9 +248,9 @@ export function ConfirmButton({
         NiceModal.show(ChatGptModal, {
           onConfirm,
           onReject,
+          ...props
         })
       }
-      {...props}
     >
       {children}
     </Button>

diff --git a/src/features/wizard/FormDataSlice.ts b/src/features/wizard/FormDataSlice.ts
@@ -7,6 +7,7 @@ export type FormContent = {
   id: string
   title: string
   avatar?: string
+  originalPrompt?: string,
   jsonSchema: JsonSchema
   uiSchema: ScopableUISchemaElement | null | undefined
   formData: any
@@ -72,11 +73,12 @@ export const formsContentSlice = createSlice({
     setAvatar: (state: FormsContentReducer, action: PayloadAction<string>) => {
       state.formData[state.currentID].avatar = action.payload
     },
-    newForm: (state: FormsContentReducer, action: PayloadAction<{ jsonSchema: JsonSchema; uiSchema: any }>) => {
+    newForm: (state: FormsContentReducer, action: PayloadAction<{ jsonSchema: JsonSchema; uiSchema: any, originalPrompt?: string }>) => {
       const newID = new Date().getTime().toString()
       state.formData[newID] = {
         id: newID,
         title: 'New Form',
+        originalPrompt: action.payload.originalPrompt,
         jsonSchema: action.payload.jsonSchema,
         uiSchema: action.payload.uiSchema,
         formData: {},

diff --git a/src/features/wizard/WizardSlice.ts b/src/features/wizard/WizardSlice.ts
@@ -48,13 +48,16 @@ const initialState: JsonFormsEditState = {
 
 export type DraggableComponent = {
   name: string
+  originalPrompt?: string
   jsonSchemaElement: JsonSchema
   uiSchema?: UISchemaElement
 }
 export const selectJsonSchema = (state: RootState) => state.jsonFormsEdit.jsonSchema
 
 export const selectUiSchema = (state: RootState) => state.jsonFormsEdit.uiSchema
 
+export const selectOriginalPrompt = (state: RootState) => state.jsonFormsEdit.uiSchema?.originalPrompt
+
 export const selectSelectedElementKey = (state: RootState) => state.jsonFormsEdit.selectedElementKey
 
 export const selectUIElementByScope = (state: RootState, scope: string) => {