Change the context limit from characters to words

- Was checking character counts instead of word counts - Also adds a counter for the user to see when over and how much. Signed-off-by: Brent Salisbury <[email protected]>
instructlab · Jan 11, 2025 · cc6eddc · cc6eddc
1 parent d9f7229
commit cc6eddc
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 64 deletions.
diff --git a/.env.github.example b/.env.github.example
@@ -1,3 +1,5 @@
+IL_UI_ADMIN_USERNAME=admin # user/pass for dev mode
+IL_UI_ADMIN_PASSWORD=password
 IL_UI_DEPLOYMENT=github # Start UI stack in github mode.
 OAUTH_GITHUB_ID=<OAUTH_APP_ID>
 OAUTH_GITHUB_SECRET=<OAUTH_APP_SECRET>

diff --git a/...onents/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx b/...onents/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { KnowledgeSeedExample, QuestionAndAnswerPair } from '@/types';
 import { FormGroup, TextArea, ValidatedOptions, FormHelperText, HelperText, HelperTextItem, FormFieldGroupHeader } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
@@ -24,6 +24,30 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
   handleAnswerInputChange,
   handleAnswerBlur
 }) => {
+  const [contextWordCount, setContextWordCount] = useState(0);
+  const MAX_WORDS = 500;
+
+  // Function to count words
+  const countWords = (text: string) => {
+    return text.trim().split(/\s+/).filter(Boolean).length;
+  };
+
+  // Update word count whenever context changes
+  useEffect(() => {
+    setContextWordCount(countWords(seedExample.context));
+  }, [seedExample.context]);
+
+  // Handle context input change with word count validation
+  const onContextChange = (_event: React.FormEvent<HTMLTextAreaElement>, contextValue: string) => {
+    const wordCount = countWords(contextValue);
+    if (wordCount <= MAX_WORDS) {
+      handleContextInputChange(seedExampleIndex, contextValue);
+    } else {
+      // allow the overage and show validation error
+      handleContextInputChange(seedExampleIndex, contextValue);
+    }
+  };
+
   return (
     <FormGroup key={seedExampleIndex}>
       <TextArea
@@ -34,10 +58,19 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
         placeholder="Enter the context from which the Q&A pairs are derived. (500 words max)"
         value={seedExample.context}
         validated={seedExample.isContextValid}
-        maxLength={500}
-        onChange={(_event, contextValue: string) => handleContextInputChange(seedExampleIndex, contextValue)}
+        onChange={onContextChange}
         onBlur={() => handleContextBlur(seedExampleIndex)}
       />
+
+      {/* Display word count */}
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>
+            {contextWordCount} / {MAX_WORDS} words
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+
       {seedExample.isContextValid === ValidatedOptions.error && (
         <FormHelperText key={seedExampleIndex * 10 + 2}>
           <HelperText>

diff --git a/src/components/Contribute/Knowledge/Native/DocumentInformation/DocumentInformation.tsx b/src/components/Contribute/Knowledge/Native/DocumentInformation/DocumentInformation.tsx
@@ -44,17 +44,17 @@ interface AlertInfo {
 }
 
 const DocumentInformation: React.FC<Props> = ({
-  reset,
-  isEditForm,
-  knowledgeFormData,
-  setDisableAction,
-  knowledgeDocumentRepositoryUrl,
-  setKnowledgeDocumentRepositoryUrl,
-  knowledgeDocumentCommit,
-  setKnowledgeDocumentCommit,
-  documentName,
-  setDocumentName
-}) => {
+                                                reset,
+                                                isEditForm,
+                                                knowledgeFormData,
+                                                setDisableAction,
+                                                knowledgeDocumentRepositoryUrl,
+                                                setKnowledgeDocumentRepositoryUrl,
+                                                knowledgeDocumentCommit,
+                                                setKnowledgeDocumentCommit,
+                                                documentName,
+                                                setDocumentName
+                                              }) => {
   const [useFileUpload, setUseFileUpload] = useState(true);
   const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);

diff --git a/src/components/Contribute/Knowledge/Native/index.tsx b/src/components/Contribute/Knowledge/Native/index.tsx
@@ -273,9 +273,9 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
       prevSeedExamples.map((seedExample: KnowledgeSeedExample, index: number) =>
         index === seedExampleIndex
           ? {
-              ...seedExample,
-              context: contextValue
-            }
+            ...seedExample,
+            context: contextValue
+          }
           : seedExample
       )
     );
@@ -303,16 +303,16 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
       prevSeedExamples.map((seedExample: KnowledgeSeedExample, index: number) =>
         index === seedExampleIndex
           ? {
-              ...seedExample,
-              questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) =>
-                qaIndex === questionAndAnswerIndex
-                  ? {
-                      ...questionAndAnswerPair,
-                      question: questionValue
-                    }
-                  : questionAndAnswerPair
-              )
-            }
+            ...seedExample,
+            questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) =>
+              qaIndex === questionAndAnswerIndex
+                ? {
+                  ...questionAndAnswerPair,
+                  question: questionValue
+                }
+                : questionAndAnswerPair
+            )
+          }
           : seedExample
       )
     );
@@ -324,20 +324,20 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
       prevSeedExamples.map((seedExample: KnowledgeSeedExample, index: number) =>
         index === seedExampleIndex
           ? {
-              ...seedExample,
-              questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) => {
-                if (qaIndex === questionAndAnswerIndex) {
-                  const { msg, status } = validateQuestion(questionAndAnswerPair.question);
-                  devLog(`Question Validation for Seed Example ${seedExampleIndex + 1}, Q&A Pair ${questionAndAnswerIndex + 1}: ${msg} (${status})`);
-                  return {
-                    ...questionAndAnswerPair,
-                    isQuestionValid: status,
-                    questionValidationError: msg
-                  };
-                }
-                return questionAndAnswerPair;
-              })
-            }
+            ...seedExample,
+            questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) => {
+              if (qaIndex === questionAndAnswerIndex) {
+                const { msg, status } = validateQuestion(questionAndAnswerPair.question);
+                devLog(`Question Validation for Seed Example ${seedExampleIndex + 1}, Q&A Pair ${questionAndAnswerIndex + 1}: ${msg} (${status})`);
+                return {
+                  ...questionAndAnswerPair,
+                  isQuestionValid: status,
+                  questionValidationError: msg
+                };
+              }
+              return questionAndAnswerPair;
+            })
+          }
           : seedExample
       )
     );
@@ -348,16 +348,16 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
       seedExamples.map((seedExample: KnowledgeSeedExample, index: number) =>
         index === seedExampleIndex
           ? {
-              ...seedExample,
-              questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) =>
-                qaIndex === questionAndAnswerIndex
-                  ? {
-                      ...questionAndAnswerPair,
-                      answer: answerValue
-                    }
-                  : questionAndAnswerPair
-              )
-            }
+            ...seedExample,
+            questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) =>
+              qaIndex === questionAndAnswerIndex
+                ? {
+                  ...questionAndAnswerPair,
+                  answer: answerValue
+                }
+                : questionAndAnswerPair
+            )
+          }
           : seedExample
       )
     );
@@ -368,19 +368,19 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
       prevSeedExamples.map((seedExample: KnowledgeSeedExample, index: number) =>
         index === seedExampleIndex
           ? {
-              ...seedExample,
-              questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) => {
-                if (qaIndex === questionAndAnswerIndex) {
-                  const { msg, status } = validateAnswer(questionAndAnswerPair.answer);
-                  return {
-                    ...questionAndAnswerPair,
-                    isAnswerValid: status,
-                    answerValidationError: msg
-                  };
-                }
-                return questionAndAnswerPair;
-              })
-            }
+            ...seedExample,
+            questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, qaIndex: number) => {
+              if (qaIndex === questionAndAnswerIndex) {
+                const { msg, status } = validateAnswer(questionAndAnswerPair.answer);
+                return {
+                  ...questionAndAnswerPair,
+                  isAnswerValid: status,
+                  answerValidationError: msg
+                };
+              }
+              return questionAndAnswerPair;
+            })
+          }
           : seedExample
       )
     );

diff --git a/src/components/Dashboard/Native/dashboard.tsx b/src/components/Dashboard/Native/dashboard.tsx
@@ -528,3 +528,4 @@ const DashboardNative: React.FunctionComponent = () => {
 };
 
 export { DashboardNative };
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -528,3 +528,4 @@ const DashboardNative: React.FunctionComponent = () => {
		};

		export { DashboardNative };