From 020e4253faae2cd89f241b494622494830f7d222 Mon Sep 17 00:00:00 2001
From: Ilya Hancharyk <Ilya_Hancharyk@epam.com>
Date: Tue, 12 Dec 2023 17:49:40 +0300
Subject: [PATCH] Actualize styles

---
 .../tabs/selectDefectManually/ai-inline.svg   |  2 +-
 .../tabs/selectDefectManually/ai.svg          |  3 --
 .../selectDefectManually.jsx                  | 47 ++++++++++---------
 .../selectDefectManually.scss                 | 16 +++++--
 4 files changed, 38 insertions(+), 30 deletions(-)
 delete mode 100644 app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai.svg

diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai-inline.svg b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai-inline.svg
index f8fe8fee79..c310e97bfe 100644
--- a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai-inline.svg
+++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai-inline.svg
@@ -1,3 +1,3 @@
 <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.7474 8.18524C18.1842 6.82311 18.0339 5.33162 17.3352 4.09297C16.2847 2.1928 14.1724 1.21552 12.1098 1.67535C11.1924 0.601638 9.87379 -0.00901362 8.49179 0.000100587C6.38284 -0.00519153 4.51224 1.40486 3.86342 3.48908C2.50888 3.7772 1.33975 4.65805 0.655546 5.9061C-0.403177 7.80098 -0.161992 10.1892 1.25228 11.8148C0.815486 13.1769 0.965803 14.6684 1.66445 15.907C2.71496 17.8072 4.82731 18.7845 6.88984 18.3246C7.8073 19.3984 9.12589 20.009 10.5079 19.9999C12.618 20.0055 14.4894 18.5945 15.1377 16.5089C16.4922 16.2207 17.6613 15.3399 18.3456 14.0918C19.4031 12.197 19.1614 9.80992 17.7474 8.18524ZM10.5096 18.6922C9.66544 18.6933 8.84791 18.3864 8.19965 17.8248C8.22881 17.8084 8.28005 17.779 8.31345 17.7578L12.1475 15.4575C12.3434 15.3417 12.464 15.125 12.4626 14.8909V9.27689L14.0832 10.2489C14.1005 10.2577 14.1124 10.275 14.1146 10.295V14.9445C14.1124 17.0116 12.5002 18.6875 10.5096 18.6922ZM2.75601 15.2529C2.33308 14.494 2.18079 13.605 2.32544 12.7412C2.35403 12.7588 2.40357 12.7906 2.43924 12.8117L6.27329 15.112C6.46776 15.2302 6.70866 15.2302 6.90314 15.112L11.5842 12.3049V14.2485C11.5853 14.2688 11.5765 14.2879 11.561 14.3003L7.68501 16.6244C5.95935 17.657 3.75415 17.0434 2.75601 15.2529ZM1.74739 6.55939C2.16833 5.79967 2.83329 5.21784 3.62563 4.91618C3.62563 4.95058 3.62365 5.01115 3.62365 5.05349V9.65381C3.62223 9.88784 3.74254 10.1042 3.93843 10.2201L8.61946 13.0269L6.99882 13.9986C6.98269 14.0098 6.96202 14.0116 6.94419 14.0039L3.06796 11.6777C1.34513 10.6411 0.754341 8.35195 1.74739 6.55939ZM15.0624 9.77758L10.3811 6.97041L12.0017 5.99901C12.0178 5.98784 12.0385 5.98607 12.0563 5.99401L15.9326 8.31814C17.6588 9.35363 18.2499 11.6466 17.2529 13.4391C16.8311 14.1977 16.1667 14.7789 15.3749 15.0818V10.3438C15.3769 10.1101 15.2574 9.89372 15.0624 9.77758ZM16.6754 7.25618C16.6468 7.23796 16.5972 7.20679 16.5616 7.18562L12.7272 4.88531C12.5328 4.76742 12.2922 4.76742 12.0974 4.88531L7.41637 7.69249V5.74881C7.41523 5.72852 7.42401 5.70941 7.43958 5.69707L11.3155 3.37471C13.0423 2.34069 15.2492 2.95604 16.2448 4.74948C16.6655 5.50743 16.8178 6.39416 16.6754 7.25618ZM6.53514 10.7208L4.91421 9.74877C4.89695 9.73995 4.88506 9.7226 4.88279 9.70261V5.05349C4.88421 2.98339 6.50088 1.30608 8.49434 1.30755C9.33735 1.30814 10.1535 1.61508 10.8012 2.17516C10.772 2.19163 10.7211 2.22103 10.6874 2.24219L6.85332 4.5425C6.65743 4.65805 6.53683 4.87473 6.53825 5.10876L6.53514 10.7208ZM7.41552 8.74944L9.50041 7.49874L11.5853 8.74856V11.2491L9.50041 12.4989L7.41552 11.2491V8.74944Z" fill="#EABCFF"/>
+<path fill="#EABCFF" fill-rule="evenodd" d="M17.7474 8.18524C18.1842 6.82311 18.0339 5.33162 17.3352 4.09297C16.2847 2.1928 14.1724 1.21552 12.1098 1.67535C11.1924 0.601638 9.87379 -0.00901362 8.49179 0.000100587C6.38284 -0.00519153 4.51224 1.40486 3.86342 3.48908C2.50888 3.7772 1.33975 4.65805 0.655546 5.9061C-0.403177 7.80098 -0.161992 10.1892 1.25228 11.8148C0.815486 13.1769 0.965803 14.6684 1.66445 15.907C2.71496 17.8072 4.82731 18.7845 6.88984 18.3246C7.8073 19.3984 9.12589 20.009 10.5079 19.9999C12.618 20.0055 14.4894 18.5945 15.1377 16.5089C16.4922 16.2207 17.6613 15.3399 18.3456 14.0918C19.4031 12.197 19.1614 9.80992 17.7474 8.18524ZM10.5096 18.6922C9.66544 18.6933 8.84791 18.3864 8.19965 17.8248C8.22881 17.8084 8.28005 17.779 8.31345 17.7578L12.1475 15.4575C12.3434 15.3417 12.464 15.125 12.4626 14.8909V9.27689L14.0832 10.2489C14.1005 10.2577 14.1124 10.275 14.1146 10.295V14.9445C14.1124 17.0116 12.5002 18.6875 10.5096 18.6922ZM2.75601 15.2529C2.33308 14.494 2.18079 13.605 2.32544 12.7412C2.35403 12.7588 2.40357 12.7906 2.43924 12.8117L6.27329 15.112C6.46776 15.2302 6.70866 15.2302 6.90314 15.112L11.5842 12.3049V14.2485C11.5853 14.2688 11.5765 14.2879 11.561 14.3003L7.68501 16.6244C5.95935 17.657 3.75415 17.0434 2.75601 15.2529ZM1.74739 6.55939C2.16833 5.79967 2.83329 5.21784 3.62563 4.91618C3.62563 4.95058 3.62365 5.01115 3.62365 5.05349V9.65381C3.62223 9.88784 3.74254 10.1042 3.93843 10.2201L8.61946 13.0269L6.99882 13.9986C6.98269 14.0098 6.96202 14.0116 6.94419 14.0039L3.06796 11.6777C1.34513 10.6411 0.754341 8.35195 1.74739 6.55939ZM15.0624 9.77758L10.3811 6.97041L12.0017 5.99901C12.0178 5.98784 12.0385 5.98607 12.0563 5.99401L15.9326 8.31814C17.6588 9.35363 18.2499 11.6466 17.2529 13.4391C16.8311 14.1977 16.1667 14.7789 15.3749 15.0818V10.3438C15.3769 10.1101 15.2574 9.89372 15.0624 9.77758ZM16.6754 7.25618C16.6468 7.23796 16.5972 7.20679 16.5616 7.18562L12.7272 4.88531C12.5328 4.76742 12.2922 4.76742 12.0974 4.88531L7.41637 7.69249V5.74881C7.41523 5.72852 7.42401 5.70941 7.43958 5.69707L11.3155 3.37471C13.0423 2.34069 15.2492 2.95604 16.2448 4.74948C16.6655 5.50743 16.8178 6.39416 16.6754 7.25618ZM6.53514 10.7208L4.91421 9.74877C4.89695 9.73995 4.88506 9.7226 4.88279 9.70261V5.05349C4.88421 2.98339 6.50088 1.30608 8.49434 1.30755C9.33735 1.30814 10.1535 1.61508 10.8012 2.17516C10.772 2.19163 10.7211 2.22103 10.6874 2.24219L6.85332 4.5425C6.65743 4.65805 6.53683 4.87473 6.53825 5.10876L6.53514 10.7208ZM7.41552 8.74944L9.50041 7.49874L11.5853 8.74856V11.2491L9.50041 12.4989L7.41552 11.2491V8.74944Z"/>
 </svg>
diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai.svg b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai.svg
deleted file mode 100644
index f8fe8fee79..0000000000
--- a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.7474 8.18524C18.1842 6.82311 18.0339 5.33162 17.3352 4.09297C16.2847 2.1928 14.1724 1.21552 12.1098 1.67535C11.1924 0.601638 9.87379 -0.00901362 8.49179 0.000100587C6.38284 -0.00519153 4.51224 1.40486 3.86342 3.48908C2.50888 3.7772 1.33975 4.65805 0.655546 5.9061C-0.403177 7.80098 -0.161992 10.1892 1.25228 11.8148C0.815486 13.1769 0.965803 14.6684 1.66445 15.907C2.71496 17.8072 4.82731 18.7845 6.88984 18.3246C7.8073 19.3984 9.12589 20.009 10.5079 19.9999C12.618 20.0055 14.4894 18.5945 15.1377 16.5089C16.4922 16.2207 17.6613 15.3399 18.3456 14.0918C19.4031 12.197 19.1614 9.80992 17.7474 8.18524ZM10.5096 18.6922C9.66544 18.6933 8.84791 18.3864 8.19965 17.8248C8.22881 17.8084 8.28005 17.779 8.31345 17.7578L12.1475 15.4575C12.3434 15.3417 12.464 15.125 12.4626 14.8909V9.27689L14.0832 10.2489C14.1005 10.2577 14.1124 10.275 14.1146 10.295V14.9445C14.1124 17.0116 12.5002 18.6875 10.5096 18.6922ZM2.75601 15.2529C2.33308 14.494 2.18079 13.605 2.32544 12.7412C2.35403 12.7588 2.40357 12.7906 2.43924 12.8117L6.27329 15.112C6.46776 15.2302 6.70866 15.2302 6.90314 15.112L11.5842 12.3049V14.2485C11.5853 14.2688 11.5765 14.2879 11.561 14.3003L7.68501 16.6244C5.95935 17.657 3.75415 17.0434 2.75601 15.2529ZM1.74739 6.55939C2.16833 5.79967 2.83329 5.21784 3.62563 4.91618C3.62563 4.95058 3.62365 5.01115 3.62365 5.05349V9.65381C3.62223 9.88784 3.74254 10.1042 3.93843 10.2201L8.61946 13.0269L6.99882 13.9986C6.98269 14.0098 6.96202 14.0116 6.94419 14.0039L3.06796 11.6777C1.34513 10.6411 0.754341 8.35195 1.74739 6.55939ZM15.0624 9.77758L10.3811 6.97041L12.0017 5.99901C12.0178 5.98784 12.0385 5.98607 12.0563 5.99401L15.9326 8.31814C17.6588 9.35363 18.2499 11.6466 17.2529 13.4391C16.8311 14.1977 16.1667 14.7789 15.3749 15.0818V10.3438C15.3769 10.1101 15.2574 9.89372 15.0624 9.77758ZM16.6754 7.25618C16.6468 7.23796 16.5972 7.20679 16.5616 7.18562L12.7272 4.88531C12.5328 4.76742 12.2922 4.76742 12.0974 4.88531L7.41637 7.69249V5.74881C7.41523 5.72852 7.42401 5.70941 7.43958 5.69707L11.3155 3.37471C13.0423 2.34069 15.2492 2.95604 16.2448 4.74948C16.6655 5.50743 16.8178 6.39416 16.6754 7.25618ZM6.53514 10.7208L4.91421 9.74877C4.89695 9.73995 4.88506 9.7226 4.88279 9.70261V5.05349C4.88421 2.98339 6.50088 1.30608 8.49434 1.30755C9.33735 1.30814 10.1535 1.61508 10.8012 2.17516C10.772 2.19163 10.7211 2.22103 10.6874 2.24219L6.85332 4.5425C6.65743 4.65805 6.53683 4.87473 6.53825 5.10876L6.53514 10.7208ZM7.41552 8.74944L9.50041 7.49874L11.5853 8.74856V11.2491L9.50041 12.4989L7.41552 11.2491V8.74944Z" fill="#EABCFF"/>
-</svg>
diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx
index 46f91e5429..0df9d1b402 100644
--- a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx
+++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx
@@ -72,7 +72,8 @@ export const SelectDefectManually = ({
   const [commentEditor, setCommentEditor] = useState(null);
   const defectFromTIGroup =
     itemData.issue && itemData.issue.issueType.startsWith(TO_INVESTIGATE_LOCATOR_PREFIX);
-  const [llmSuggestLoading, setLllmSuggestLoading] = useState(false);
+  const [llmSuggestLoading, setLlmSuggestLoading] = useState(false);
+  const [suggestionApplied, setSuggestionApplied] = useState(false);
 
   const source = modalState.selectManualChoice;
 
@@ -118,11 +119,12 @@ export const SelectDefectManually = ({
     const suggestedComment = "This defect is not a bug. It's a feature";
     const { comment: existingComment } = source.issue;
     const comment = existingComment ? `${existingComment}\n${suggestedComment}` : suggestedComment;
-    setLllmSuggestLoading(true);
+    setLlmSuggestLoading(true);
     // TODO: API request will be here instead of a timeout
     setTimeout(() => {
       handleDefectCommentChange(comment);
-      setLllmSuggestLoading(false);
+      setSuggestionApplied(true);
+      setLlmSuggestLoading(false);
     }, 1000);
   };
 
@@ -232,25 +234,6 @@ export const SelectDefectManually = ({
         isNarrowView={getDefectTypeNarrowView()}
       />
       <div className={cx('defect-comment')}>
-        {extensions.map((extensionComponent) => (
-          <extensionComponent.component
-            key={extensionComponent.name}
-            onChangeComment={handleDefectCommentChange}
-            comment={source.issue.comment}
-          />
-        ))}
-        <div className={cx('llm-suggestion-control')}>
-          {llmSuggestLoading ? (
-            <span className={cx('loader')}>
-              <BubblesPreloader color="#eabcff" />
-            </span>
-          ) : (
-            <button className={cx('ask-ai-button')} onClick={loadLlmSuggestion}>
-              <span className={cx('ai-icon')}>{Parser(AiIcon)}</span>
-              Generate with AI
-            </button>
-          )}
-        </div>
         <MarkdownEditor
           value={
             modalState.decisionType === SELECT_DEFECT_MANUALLY
@@ -268,6 +251,26 @@ export const SelectDefectManually = ({
           mode="dark"
           controlled
         />
+        <div className={cx('llm-suggestion-control', { applied: suggestionApplied })}>
+          {llmSuggestLoading ? (
+            <span className={cx('loader')}>
+              <BubblesPreloader color="#eabcff" />
+            </span>
+          ) : (
+            <button className={cx('ask-ai-button')} onClick={loadLlmSuggestion}>
+              <span className={cx('ai-icon')}>{Parser(AiIcon)}</span>
+              {suggestionApplied ? 'Pasted' : 'Ask AI to generate a comment'}
+            </button>
+          )}
+        </div>
+        {extensions.map((extensionComponent) => (
+          <extensionComponent.component
+            key={extensionComponent.name}
+            onChangeComment={handleDefectCommentChange}
+            comment={source.issue.comment}
+            item={itemData}
+          />
+        ))}
       </div>
       {!debugMode && (
         <ActionButtonsBar
diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.scss b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.scss
index d258ac408b..4d1232944b 100644
--- a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.scss
+++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.scss
@@ -36,11 +36,17 @@
 }
 
 .llm-suggestion-control {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  height: 22px;
   margin: 10px 0;
   font-size: 13px;
+  color: #eabcff;
+
+  &.applied {
+    color: #515151;
+    path {
+      fill: #515151;
+    }
+  }
 }
 
 .ask-ai-button {
@@ -48,9 +54,10 @@
   align-items: center;
   height: 22px;
   gap: 8px;
+  padding: 0;
   background: none;
   border: none;
-  color: #eabcff;
+  color: inherit;
   cursor: pointer;
 
   &:hover {
@@ -82,6 +89,7 @@
 //}
 
 .loader {
+  display: inline-block;
   width: 50px;
   height: 6px;
 }