@teamsparta/chat-ui
Version:
simple chat-ui
72 lines • 2.06 kB
JavaScript
import React, { useState } from "react";
import * as S from "./InputArea.style";
export default function InputArea({
theme,
scrollToBottom,
handleSendMessagae
}) {
const [query, setQuery] = useState("");
const [isTyping, setIsTyping] = useState(false);
const [inputLines, setInputLines] = useState(1);
function cleanInput() {
setQuery("");
setInputLines(1);
}
async function send(e) {
if (isTyping) return;
if (!isValidString(query)) return;
setIsTyping(true);
scrollToBottom();
cleanInput();
await handleSendMessagae(query);
setIsTyping(false);
}
function isValidString(str) {
// 문자열에서 공백, 탭, 줄바꿈을 제거하고 남은 내용이 있는지 확인
return str.trim().length !== 0;
}
function updateLines(text) {
const lines = text.split("\n").length;
setInputLines(lines);
}
return /*#__PURE__*/React.createElement(S.InputContainer, {
theme: theme
}, /*#__PURE__*/React.createElement(S.Input, {
theme: theme,
onChange: e => {
setQuery(e.target.value);
updateLines(e.target.value);
},
value: query,
onKeyPress: e => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
send(e);
}
},
lines: inputLines,
placeholder: "\uC9C8\uBB38\uD558\uC2E4 \uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694.",
rows: 1
}), /*#__PURE__*/React.createElement(S.Button, {
onClick: send,
brighter: !isValidString(query) || isTyping
}, /*#__PURE__*/React.createElement("svg", {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
d: "M4 7.33319L8 3.33319L12 7.33319",
stroke: "white",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}), /*#__PURE__*/React.createElement("path", {
d: "M8 4L8 12.6667",
stroke: "white",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}))));
}