Update LLM Q validation to match designs

isaacphysics · Oct 10, 2024 · b5dec2f · b5dec2f
1 parent cc65d53
commit b5dec2f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/public/assets/cs/icons/error.svg b/public/assets/cs/icons/error.svg
diff --git a/src/app/components/content/IsaacLLMFreeTextQuestion.tsx b/src/app/components/content/IsaacLLMFreeTextQuestion.tsx
@@ -56,16 +56,17 @@ function validatedChoiceDtoFromEvent(event: React.ChangeEvent<HTMLInputElement>)
 
 const FreeTextEntryValidation = ({validValue, wordLimit, charLimit, piiDetected}: Validation) => {
     return validValue ? null
-        : <Alert color="warning" className={"no-print"}>
-            <strong>Warning:</strong>
-            <ul>
-                {charLimit.exceeded && <li>Character limit exceeded ({charLimit.current}/{charLimit.limit})</li>}
-                {wordLimit.exceeded && <li>Word limit exceeded ({wordLimit.current}/{wordLimit.limit})</li>}
-                {piiDetected && <li><strong>Possible PII detected:</strong><br />
+        : <div className="no-print text-failed">
+            {charLimit.exceeded && <div><span className="icon-error" /> Character limit exceeded ({charLimit.current}/{charLimit.limit})</div>}
+            {wordLimit.exceeded && <div><span className="icon-error" /> Word limit exceeded ({wordLimit.current}/{wordLimit.limit})</div>}
+            {piiDetected && <div className="d-flex">
+                <span className="icon-error" />
+                <span className="ms-1">
+                    <strong>Possible PII detected:</strong><br />
                     It looks like your answer contains personal information, like a name, email or street address. Sending this data to OpenAI is against their Usage policy.
-                </li>}
-            </ul>
-        </Alert>;
+                </span>
+            </div>}
+        </div>;
 };
 
 const IsaacLLMFreeTextQuestion = ({doc, questionId, readonly}: IsaacQuestionProps<IsaacLLMFreeTextQuestionDTO>) => {

diff --git a/src/scss/cs/icons.scss b/src/scss/cs/icons.scss
@@ -24,7 +24,14 @@
   background: url(/assets/cs/icons/help.svg) no-repeat;
   margin-right: 10px;
 }
-
+.icon-error {
+  display: inline-block;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  background: url(/assets/cs/icons/error.svg) no-repeat;
+  margin-bottom: -6px;
+}
 .icon-person-active {
   display: inline-block;
   width: 1.25rem;