-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lib): add new ai prompt action (#448)
* feat: add promptAI action * feat: fix ts * feat: add promptAI tests * feat: rename variable * feat: fix tests * feat: change test name * feat: adjust promptAI tests * feat: allow all types of prompt * feat: improve tests * feat: add todo to missing storyId payload property * feat: add missing tests * feat: add support to the new action in the test lib-helper * feat: add error message when promptAI action is used in the Sandbox * feat(SHAPE-8085): apply review feedback * feat(SHAPE-8085): fix tests * feat(SHAPE-8085): improve prompt ai response message * feat(SHAPE-8085): apply review feedback
- Loading branch information
1 parent
240f5e3
commit ba9a6ee
Showing
20 changed files
with
769 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
import { | ||
Button, | ||
Checkbox, | ||
FormControl, | ||
FormControlLabel, | ||
MenuItem, | ||
Stack, | ||
TextField, | ||
Typography, | ||
} from '@mui/material' | ||
import { useState } from 'react' | ||
import { | ||
isPromptAIPayloadValid, | ||
promptAIActionsList, | ||
PromptAIResponse, | ||
type PromptAIAction, | ||
} from '@storyblok/field-plugin' | ||
import type { PluginComponent } from './FieldPluginDemo' | ||
|
||
export const PromptAI: PluginComponent = (props) => { | ||
const { actions } = props | ||
|
||
const [promptQuestion, setPromptQuestion] = useState<string>('') | ||
const [promptAction, setPromptAction] = useState<PromptAIAction>('prompt') | ||
const [promptLanguage, setPromptLanguage] = useState<string>() | ||
const [promptTone, setPromptTone] = useState<string>() | ||
const [promptAIResponse, setPromptAIResponse] = useState<PromptAIResponse>() | ||
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 promptAIResponse = await actions.promptAI(payload) | ||
|
||
setPromptAIResponse(promptAIResponse) | ||
} | ||
|
||
return ( | ||
<Stack | ||
gap={2} | ||
direction={'column'} | ||
> | ||
<Typography variant="subtitle1">Prompt AI</Typography> | ||
<Stack gap={2}> | ||
<TextField | ||
label="Ask a question" | ||
onChange={(e) => setPromptQuestion(e.target.value)} | ||
required | ||
/> | ||
<TextField | ||
label="Action" | ||
value={promptAction} | ||
select | ||
required | ||
onChange={(e) => setPromptAction(e.target.value as PromptAIAction)} | ||
> | ||
{promptAIActionsList.map((promptAIAction) => ( | ||
<MenuItem | ||
key={promptAIAction} | ||
value={promptAIAction} | ||
> | ||
{promptAIAction} | ||
</MenuItem> | ||
))} | ||
</TextField> | ||
<TextField | ||
label="Language (optional)" | ||
onChange={(e) => setPromptLanguage(e.target.value)} | ||
/> | ||
<TextField | ||
label="Tone (optional)" | ||
onChange={(e) => setPromptTone(e.target.value)} | ||
/> | ||
<FormControl> | ||
<FormControlLabel | ||
label="Based on the current story" | ||
control={ | ||
<Checkbox | ||
value={promptBasedOnCurrentStory} | ||
onChange={(e) => setPromptBasedOnCurrentStory(e.target.checked)} | ||
/> | ||
} | ||
sx={{ ml: '-9px' }} | ||
/> | ||
</FormControl> | ||
<Typography> | ||
{promptAIResponse?.ok === true && | ||
`AI Generated Text: ${promptAIResponse.answer}`} | ||
{promptAIResponse?.ok === false && | ||
`AI Error: ${promptAIResponse.error}`} | ||
</Typography> | ||
<Button | ||
variant="outlined" | ||
color="secondary" | ||
onClick={onSubmit} | ||
> | ||
Prompt | ||
</Button> | ||
</Stack> | ||
</Stack> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.