From 5e7f8064d054a66779cfab108be1db4de96fffbb Mon Sep 17 00:00:00 2001
From: Mathias Romeo <hmromeo1991@gmail.com>
Date: Tue, 11 Jun 2024 18:42:31 -0300
Subject: [PATCH] feat(*): added margin to the ai-overlay to separate from
boundaries
---
.../src/AiService/components/AskAIOverlay.js | 16 +++++-----------
1 file changed, 5 insertions(+), 11 deletions(-)
diff --git a/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js b/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js
index a72747e1c..4909dba53 100644
--- a/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js
+++ b/wax-prosemirror-services/src/AiService/components/AskAIOverlay.js
@@ -27,6 +27,8 @@ const Root = styled.div`
display: flex;
filter: drop-shadow(0 0 1px #0002);
flex-direction: column;
+ margin: 0 10px 10px;
+ max-width: 95%;
width: var(--ai-tool-width);
div {
@@ -100,7 +102,6 @@ const AskAIForm = styled(FlexCol)`
const PromptInput = styled.input`
background: transparent;
border: none;
- border-right: var(--ai-tool-border);
color: #555;
font-family: 'Helvetica Neue', sans-serif;
font-size: 14px;
@@ -116,16 +117,6 @@ const SendButton = styled(ButtonBase)`
transform: scale(1.3);
`;
-// const SettingsButton = styled(ButtonBase)`
-// padding: 0 0 0 8px;
-
-// > svg {
-// fill: #777;
-// height: 16px;
-// width: 16px;
-// }
-// `;
-
// #endregion FORM --------------------------
// #region RESULT -----------------------
@@ -305,6 +296,7 @@ const AskAIOverlay = ({ setPosition, position, config }) => {
options,
} = ctx;
const inputRef = useRef(null);
+ const resultRef = useRef(null);
const [userPrompt, setUserPrompt] = useState('');
const [optionsState, setOptionsState] = useState({ ...options });
@@ -499,9 +491,11 @@ const AskAIOverlay = ({ setPosition, position, config }) => {
))}
</ResultHeading>
<ResultContent
+ contentEditable
dangerouslySetInnerHTML={{
__html: resultsToHtml(resultKey, result[resultKey]),
}}
+ ref={resultRef} // to get the text from this innerHTML in the future
/>
<ResultActions $show={enabled.results}>
{Object.values(resultActions).map(({ title, Icon, ...rest }) => (
--
GitLab