feat(SHAPE-8085): apply review feedback

Author: demetriusfeijoo

packages/demo/src/components/PromptAI.tsx

@@ -1,4 +1,13 @@
-import { Button, MenuItem, Stack, TextField, Typography } from '@mui/material'
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  MenuItem,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { useState } from 'react'
 import {
   isPromptAIPayloadValid,
@@ -14,24 +23,27 @@ export const PromptAI: PluginComponent = (props) => {
   const [promptAction, setPromptAction] = useState<PromptAIAction>('prompt')
   const [promptLanguage, setPromptLanguage] = useState<string>()
   const [promptTone, setPromptTone] = useState<string>()
-  const [promptOutput, setPromptOutput] = useState<string>()
+  const [promptAIGeneratedText, setPromptAIGeneratedText] = useState<string>()
+  const [promptBasedOnCurrentStory, setPromptBasedOnCurrentStory] =
+    useState<boolean>(false)
 
   const onSubmit = async () => {
     const payload = {
       action: promptAction,
       text: promptQuestion,
       language: promptLanguage,
       tone: promptTone,
+      basedOnCurrentStory: promptBasedOnCurrentStory,
     }
 
     if (!isPromptAIPayloadValid(payload)) {
       console.error('Invalid Prompt AI payload')
       return
     }
 
-    const output = await actions.promptAI(payload)
+    const promptAIGeneratedText = await actions.promptAI(payload)
 
-    setPromptOutput(output)
+    setPromptAIGeneratedText(promptAIGeneratedText)
   }
 
   return (
@@ -70,7 +82,17 @@ export const PromptAI: PluginComponent = (props) => {
           label="Tone (optional)"
           onChange={(e) => setPromptTone(e.target.value)}
         />
-        <Typography>Output: {promptOutput}</Typography>
+        <FormControl>
+          <FormLabel htmlFor="based-on-current-story-checkbox">
+            Based on the current story:
+          </FormLabel>
+          <Checkbox
+            id="based-on-current-story-checkbox"
+            value={promptBasedOnCurrentStory}
+            onChange={(e) => setPromptBasedOnCurrentStory(e.target.checked)}
+          />
+        </FormControl>
+        <Typography>AI Generated Text: {promptAIGeneratedText}</Typography>
         <Button
           variant="outlined"
           color="secondary"

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/PromptAIResponseMessage.ts

@@ -5,20 +5,20 @@ import { isMessageToPlugin, type MessageToPlugin } from './MessageToPlugin'
  * The object returned when calling the "prompt-ai" action.
  */
 export type PromptAIResponseMessage = MessageToPlugin<'prompt-ai'> & {
-  output: string
+  aiGeneratedText: string
 }
 
 export const isPromptAIMessage = (
   data: unknown,
 ): data is PromptAIResponseMessage =>
   isMessageToPlugin(data) &&
   data.action === 'prompt-ai' &&
-  hasKey(data, 'output') &&
-  typeof data.output === 'string'
+  hasKey(data, 'aiGeneratedText') &&
+  typeof data.aiGeneratedText === 'string'
 
 export const getResponseFromPromptAIMessage = (
   message: PromptAIResponseMessage,
 ): string => {
-  const { output } = message
-  return output
+  const { aiGeneratedText } = message
+  return aiGeneratedText
 }

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/MessageToContainer.ts

@@ -1,7 +1,7 @@
 import { hasKey } from '../../../utils'
 
 export type MessageToContainer<Event extends string> = {
-  action: 'plugin-changed'
+  action: 'plugin-changed' | 'prompt-ai'
   uid: string
   event: Event
   callbackId?: string

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PromptAIMessage.ts

@@ -36,8 +36,7 @@ export const promptAIActionsList: PromptAIAction[] = [
 export type PromptAIPayload = {
   action: PromptAIAction
   text: string
-  // todo: pass the storyId to the container when accepted by the API
-  // storyId?: number
+  basedOnCurrentStory?: boolean
   language?: string
   textLength?: string
   tone?: string