coco-app-platform/app/components/ChatSender.tsx

'use client';
import TextareaAutosize from 'react-textarea-autosize';
import { BsCapslockFill } from "react-icons/bs";
import * as R from 'ramda'
import { BsFillStopFill } from "react-icons/bs";
import React, { useMemo } from 'react';

const Sender = ({ input, onInput, isSending, onCommit, onStop, effectButtons = [] }) => {
  const onKeyDown = (e) => {
    if (e.key === 'Enter' && R.none(R.equals(true), R.props(['altKey', 'shiftKey', 'ctrlKey', 'metaKey'], e))) {
      onCommit()
      e.preventDefault()
    }
  }
  const EffectElement = useMemo(() => {
    if (effectButtons?.length) {
      return (
        <div className="flex justify-start gap-1">
          {effectButtons}
        </div>
      )
    }
    return null
  }, [effectButtons])
  return (
    <div
      className="absolute flex flex-col gap-2 inset-x-2.5 bottom-2.5 w-auto"
    >
      {EffectElement}
      <TextareaAutosize className="textarea textarea-bordered pr-12 w-full resize-none" value={input} onChange={ev => onInput(ev.target.value)} maxRows={4} onKeyDown={onKeyDown} />
      {
        isSending
          ? (
            <button className="btn btn-secondary btn-sm absolute right-[8px] bottom-[8px] w-[2rem] px-0" onClick={onStop}>
              <BsFillStopFill size={18} />
            </button>
          )
          : (
            <button className="btn btn-primary btn-sm absolute right-[8px] bottom-[8px] w-[2rem] px-0" disabled={!input} onClick={onCommit}>
              <BsCapslockFill size={18} />
            </button>
          )
      }
    </div>
  )
}
export default React.memo(Sender)