NapCatQQ/napcat.webui/src/components/chat_input/components/reply_insert.tsx

import { Button } from '@heroui/button'
import { Input } from '@heroui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
import { Tooltip } from '@heroui/tooltip'
import { useState } from 'react'
import { BsChatQuoteFill } from 'react-icons/bs'
import { MdAdd } from 'react-icons/md'

export interface ReplyInsertProps {
  insertReply: (messageId: string) => void
}

const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
  const [replyId, setReplyId] = useState<string>('')

  return (
    <>
      <Popover>
        <Tooltip content="回复消息">
          <div className="max-w-fit">
            <PopoverTrigger>
              <Button color="primary" variant="flat" isIconOnly radius="full">
                <BsChatQuoteFill className="text-lg" />
              </Button>
            </PopoverTrigger>
          </div>
        </Tooltip>
        <PopoverContent className="flex-row gap-2 p-4">
          <Input
            placeholder="输入消息 ID"
            value={replyId}
            onChange={(e) => {
              const value = e.target.value
              const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
              if (isNumberReg.test(value)) {
                setReplyId(value)
              }
            }}
          />
          <Button
            color="primary"
            variant="flat"
            radius="full"
            isIconOnly
            onPress={() => {
              insertReply(replyId)
              setReplyId('')
            }}
          >
            <MdAdd />
          </Button>
        </PopoverContent>
      </Popover>
    </>
  )
}

export default ReplyInsert