diff --git a/samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/UserMessage.tsx b/samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/UserMessage.tsx index 36ceb6ff9..a62409fce 100644 --- a/samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/UserMessage.tsx +++ b/samples/react-azure-openai-api-stream/src/webparts/chatStreaming/components/UserMessage.tsx @@ -20,20 +20,15 @@ export default class UserMessage extends React.Component await this.props.sendQuery(); }; - private _keyDownHandler = async (e: KeyboardEvent): Promise => { - if (e.ctrlKey && e.code === "Enter") { - await this._handleClick(); + + private _keyDownHandler = async (event: React.KeyboardEvent): Promise => { + if(!event.shiftKey && event.key === "Enter") { + //Submits message when a user hits return (but still allows newlines for shift+enter) + event.preventDefault(); + return this._handleClick(); } }; - public componentDidMount(): void { - window.addEventListener("keydown", this._keyDownHandler); - } - - public componentWillUnmount(): void { - window.removeEventListener("keydown", this._keyDownHandler); - } - public render(): React.ReactElement { return ( @@ -43,6 +38,7 @@ export default class UserMessage extends React.Component autoAdjustHeight value={this.props.textFieldValue} onChange={this._onChange} + onKeyDown={this._keyDownHandler} label="User message" placeholder="Type user query here." />