diff --git a/src/components/chat/ChatSelectedTextModal.tsx b/src/components/chat/ChatSelectedTextModal.tsx index ff6d3d8..cd13ed8 100644 --- a/src/components/chat/ChatSelectedTextModal.tsx +++ b/src/components/chat/ChatSelectedTextModal.tsx @@ -20,7 +20,9 @@ export const ChatSelectedTextModal: React.FC = ({ + > + Cancel + ); diff --git a/src/components/chat/ChatUserInput.tsx b/src/components/chat/ChatUserInput.tsx index 43d5aac..4242a05 100644 --- a/src/components/chat/ChatUserInput.tsx +++ b/src/components/chat/ChatUserInput.tsx @@ -12,7 +12,6 @@ import { } from "react"; import { ChatSelectedTextModal } from "./ChatSelectedTextModal"; -const MAX_CHARACTERS = 4200; const TEXTAREA_LINE_HEIGHT = 14; const buttonVariants = { @@ -25,6 +24,7 @@ interface ChatUserInputProps {} export const ChatUserInput: React.FC = () => { const [userInputMessage, setUserInputMessage] = useState(""); + const [wordCount, setWordCount] = useState(0); const [charCount, setCharCount] = useState(0); const [isHovered, setIsHovered] = useState(false); const [isFocused, setIsFocused] = useState(false); @@ -65,11 +65,11 @@ export const ChatUserInput: React.FC = () => { }; }, []); - // Extracted submission logic into a separate function const submitMessage = async () => { try { // Do this early setUserInputMessage(""); + setWordCount(0); setCharCount(0); const selection = userSelection; @@ -90,32 +90,28 @@ export const ChatUserInput: React.FC = () => { await submitMessage(); }; - const handleChange = (event: ChangeEvent) => { - let value = event.target.value; + const countWords = (text: string): number => { + return text.trim() === "" ? 0 : text.trim().split(/\s+/).length; + }; - if (value.length > MAX_CHARACTERS) { - value = value.slice(0, MAX_CHARACTERS); - } + const handleChange = (event: ChangeEvent) => { + const value = event.target.value; setUserInputMessage(value); setCharCount(value.length); + setWordCount(countWords(value)); }; const handlePaste = (event: ClipboardEvent) => { - event.preventDefault(); - const pasteData = event.clipboardData.getData("text"); - const remainingChars = MAX_CHARACTERS - userInputMessage.length; - - if (remainingChars <= 0) { - return; - } - - const trimmedData = pasteData.slice(0, remainingChars); - const newValue = userInputMessage + trimmedData; + const currentValue = userInputMessage; + const newValue = currentValue + pasteData; setUserInputMessage(newValue); setCharCount(newValue.length); + setWordCount(countWords(newValue)); + + event.preventDefault(); }; const handleFocus = () => { @@ -192,7 +188,6 @@ export const ChatUserInput: React.FC = () => { value={userInputMessage} onChange={handleChange} onPaste={handlePaste} - maxLength={MAX_CHARACTERS} className="ow-textarea" onFocus={handleFocus} onBlur={handleBlur} @@ -232,15 +227,20 @@ export const ChatUserInput: React.FC = () => { )}
-
MAX_CHARACTERS - ? "ow-character-limit-exceeded" - : "" - }`} - > - {charCount}/{MAX_CHARACTERS} -
+ {userInputMessage.length > 0 && (plugin.settings.enableWordCounter || plugin.settings.enableCharacterCounter)? ( +
+ {plugin.settings.enableWordCounter ? ( +
+ {wordCount} +
+ ): null} + {plugin.settings.enableCharacterCounter ? ( +
+ {charCount} +
+ ) : null} +
+ ): null}