diff --git a/packages/lib/src/message-input/MessageInput.test.tsx b/packages/lib/src/message-input/MessageInput.test.tsx index 10284a204..cbf98aeab 100644 --- a/packages/lib/src/message-input/MessageInput.test.tsx +++ b/packages/lib/src/message-input/MessageInput.test.tsx @@ -186,23 +186,23 @@ describe("Message Input component tests", () => { fireEvent.change(input, { target: { value: "test" } }); expect(onChange).toHaveBeenCalledWith({ value: "test", - error: "The minimum length is 5.", + error: "Min length 5, max length 10.", }); fireEvent.blur(input); expect(onBlur).toHaveBeenCalledWith({ value: "test", - error: "The minimum length is 5.", + error: "Min length 5, max length 10.", }); fireEvent.change(input, { target: { value: "test-maximum-length" } }); expect(onChange).toHaveBeenCalledWith({ value: "test-maximum-length", - error: "The maximum length is 10.", + error: "Min length 5, max length 10.", }); fireEvent.blur(input); expect(onBlur).toHaveBeenCalledWith({ value: "test-maximum-length", - error: "The maximum length is 10.", + error: "Min length 5, max length 10.", }); fireEvent.change(input, { target: { value: "length" } }); @@ -435,7 +435,7 @@ describe("useVoiceTranscription", () => { }); test("resets transcript and isRecording when recognition ends automatically", () => { - const { result } = renderHook(() => useVoiceTranscription({ lang: "eb-US" })); + const { result } = renderHook(() => useVoiceTranscription({ lang: "en-US" })); act(() => { result.current.startRecording(); diff --git a/packages/lib/src/message-input/MessageInput.tsx b/packages/lib/src/message-input/MessageInput.tsx index f3f97e520..1e7b093e9 100644 --- a/packages/lib/src/message-input/MessageInput.tsx +++ b/packages/lib/src/message-input/MessageInput.tsx @@ -22,7 +22,6 @@ import { HalstackLanguageContext } from "../HalstackContext"; import ErrorMessage from "../styles/forms/ErrorMessage"; import { useVoiceTranscription } from "./useVoiceTranscription"; import DxcSelect from "../select/Select"; -import { getLengthErrorMessage } from "../common/utils"; import DxcTypography from "../typography/Typography"; const sizes = { @@ -143,9 +142,8 @@ const DxcMessageInput = ({ tabIndex, value, }: PromptInputPropsType) => { - const languageContext = useContext(HalstackLanguageContext); - const translatedLabels = languageContext.labels; - const locale = languageContext.locale ?? "en-US"; + const translatedLabels = useContext(HalstackLanguageContext); + const locale = "en-US"; const inputId = `input-${useId()}`; const inputRef = useRef(null); const overlayRef = useRef(null); @@ -162,18 +160,17 @@ const DxcMessageInput = ({ } = useVoiceTranscription({ lang: locale, }); - const dropdownOptions = [{ label: languageContext.labels.messageInput.attachFileButtonTitle, value: "fileorphoto" }]; + const dropdownOptions = [{ label: translatedLabels.messageInput.attachFileButtonTitle, value: "fileorphoto" }]; const changeValue = (newValue: string) => { if (value == null) setInnerValue(newValue); - const lengthError = getLengthErrorMessage({ - value: newValue, - minLength, - maxLength, - minLengthErrorMessage: translatedLabels.formFields.minLengthErrorMessage, - maxLengthErrorMessage: translatedLabels.formFields.maxLengthErrorMessage, - }); + let lengthError: string | undefined; + if (minLength != null && newValue.length < minLength) { + lengthError = translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength); + } else if (maxLength != null && newValue.length > maxLength) { + lengthError = translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength); + } if (lengthError) { onChange?.({ value: newValue, error: lengthError }); @@ -199,13 +196,12 @@ const DxcMessageInput = ({ const handleInputOnBlur = (event: FocusEvent) => { setIsFocused(false); - const lengthError = getLengthErrorMessage({ - value: event.target.value, - minLength, - maxLength, - minLengthErrorMessage: translatedLabels.formFields.minLengthErrorMessage, - maxLengthErrorMessage: translatedLabels.formFields.maxLengthErrorMessage, - }); + let lengthError: string | undefined; + if (minLength != null && event.target.value.length < minLength) { + lengthError = translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength); + } else if (maxLength != null && event.target.value.length > maxLength) { + lengthError = translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength); + } if (lengthError) { onBlur?.({ value: event.target.value, error: lengthError }); @@ -326,7 +322,7 @@ const DxcMessageInput = ({ )} )} @@ -408,13 +404,13 @@ const DxcMessageInput = ({ onClick={!isGenerating ? handleSubmit : handleStop} title={ !isGenerating - ? languageContext.labels.messageInput.sendButtonTitle - : languageContext.labels.messageInput.stopButtonTitle + ? translatedLabels.messageInput.sendButtonTitle + : translatedLabels.messageInput.stopButtonTitle } aria-label={ !isGenerating - ? languageContext.labels.messageInput.sendButtonTitle - : languageContext.labels.messageInput.stopButtonTitle + ? translatedLabels.messageInput.sendButtonTitle + : translatedLabels.messageInput.stopButtonTitle } />