@teamsparta/chat-ui/src/lib/component/InputArea.jsx

simple chat-ui

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 (
    <S.InputContainer theme={theme}>
      <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="질문하실 내용을 입력해 주세요."
        rows={1}
      />
      <S.Button onClick={send} brighter={!isValidString(query) || isTyping}>
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4 7.33319L8 3.33319L12 7.33319"
            stroke="white"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M8 4L8 12.6667"
            stroke="white"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </S.Button>
    </S.InputContainer>
  );
}