github/OpenHands
1
1
Fork 0
mirror of https://github.com/All-Hands-AI/OpenHands.git synced 2026-01-10 15:28:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: make input for message autoresize (#466)

Browse Source
This commit is contained in:
Alex Bäuerle
2024-03-31 13:25:44 -07:00
committed by GitHub
parent 838ca200a8
commit 15ab5e1617
1 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/ChatInterface.tsx
View File

@@ -1,4 +1,4 @@
import { Card, CardBody } from "@nextui-org/react";
import { Card, CardBody, Textarea } from "@nextui-org/react";
import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import assistantAvatar from "../assets/assistant-avatar.png";
@@ -107,29 +107,32 @@ function ChatInterface({ setSettingOpen }: Props): JSX.Element {
</div>
</div>
{initialized ? <MessageList /> : <InitializingStatus />}
<div className="w-full flex items-center p-5 rounded-none rounded-bl-lg rounded-br-lg">
<div className="w-full flex items-center rounded-xl text-base bg-bg-input">
<input
type="text"
className="flex-1 py-4 px-2.5 border-none mx-4 bg-bg-input text-white outline-none"
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
placeholder="Send a message (won't interrupt the Assistant)"
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSendMessage();
}
}}
/>
<button
type="button"
className="bg-transparent border-none rounded py-2.5 px-5 hover:opacity-80 cursor-pointer select-none"
onClick={handleSendMessage}
disabled={!initialized}
>
Send
</button>
</div>
<div className="w-full relative text-base">
<Textarea
className="py-4 px-4"
classNames={{
input: "pr-16 py-2",
}}
value={inputMessage}
maxRows={10}
minRows={1}
variant="bordered"
onChange={(e) => setInputMessage(e.target.value)}
placeholder="Send a message (won't interrupt the Assistant)"
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
handleSendMessage();
}
}}
/>
<button
type="button"
className="bg-transparent border-none rounded py-2.5 px-5 hover:opacity-80 cursor-pointer select-none absolute right-5 bottom-6"
onClick={handleSendMessage}
disabled={!initialized}
>
Send
</button>
</div>
</div>
);