diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js index a3d88270db8064ef37483ad944169e5aceb75ee3..815dd332a718821bd5e1ecdfc5ee9676269d979f 100644 --- a/editors/demo/src/Editoria/config/config.js +++ b/editors/demo/src/Editoria/config/config.js @@ -180,6 +180,8 @@ export default { AskAiContentService: { AskAiContentTransformation: DummyPromise, AiOn: true, + customPromptsOn: true, + freeTextPrompts: [], }, services: [ diff --git a/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js b/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js index aea72c7d1dcc0fd6d967f89fedd66f28e2352109..56202f4e57b65e335451ced919537297727fe64d 100644 --- a/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js +++ b/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js @@ -96,14 +96,25 @@ const ResultText = styled.div` const SubmitButton = styled.button` background: none; border: none; - cursor: pointer; + cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; outline: none; padding: 0 8px; /* Adjust padding as needed */ `; +const PromptDiv = styled.div` + background: white; + border: 0.5px #dcdcdc solid; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); + display: inline-flex; + justify-content: space-between; + padding: 8px 12px; + width: 458px; +`; + const AskAIOverlay = ({ setPosition, position, config }) => { const { t, i18n } = useTranslation(); const { + app, pmViews: { main }, options, } = useContext(WaxContext); @@ -113,6 +124,9 @@ const AskAIOverlay = ({ setPosition, position, config }) => { const { AskAiContentTransformation } = config; const inputRef = useRef(null); + const aiService = app.config.get('config.AskAiContentService'); + const prompts = aiService.freeTextPrompts; + useLayoutEffect(() => { const WaxSurface = main.dom.getBoundingClientRect(); const { selection } = main.state; @@ -198,10 +212,16 @@ const AskAIOverlay = ({ setPosition, position, config }) => { } }; + const handleSubmitPrompt = idx => { + inputRef.current.value = prompts[idx]; + handleSubmit(); + }; + return options?.AiOn ? ( <Wrapper id="ai-overlay"> <AskAIForm> <AskAIFormInput + disabled={!aiService.customPromptsOn} id="askAiInput" onKeyPress={handleKeyDown} placeholder={ @@ -212,10 +232,24 @@ const AskAIOverlay = ({ setPosition, position, config }) => { ref={inputRef} type="text" /> - <SubmitButton onClick={handleSubmit}> + <SubmitButton + disabled={!aiService.customPromptsOn} + onClick={handleSubmit} + > {isLoading ? <icons.loaderIco /> : <icons.submitIco />} </SubmitButton> </AskAIForm> + {prompts.map((prompt, idx) => ( + <PromptDiv key={prompt}> + <ResultText>{prompt}</ResultText> + <SubmitButton + disabled={isLoading} + onClick={() => handleSubmitPrompt(idx)} + > + <icons.submitIco /> + </SubmitButton> + </PromptDiv> + ))} {isSubmitted && ( <> <ResultDiv>