visual-novel-web/src/app/(main)/character/[id]/chat/ChatMode/input.tsx

'use client';

import { VoiceIcon } from '@/assets/chatacter';
import { cn } from '@/lib';
import Image from 'next/image';
import { useRef, useEffect, useState } from 'react';

export default function Input() {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const [value, setValue] = useState('');

  const className =
    'h-11 inline-flex items-center justify-center w-15 rounded-full hover:cursor-pointer shrink-0';

  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      const newHeight = Math.min(textarea.scrollHeight, 100); // 最大高度 100px
      textarea.style.height = `${newHeight}px`;

      // 隐藏滚动条
      textarea.style.scrollbarWidth = 'none'; // Firefox
      // @ts-ignore
      textarea.style.msOverflowStyle = 'none'; // IE/Edge
    }
  }, [value]);

  return (
    <div className="mb-10 flex min-h-13 w-full items-end justify-between gap-2 rounded-[25px] bg-white/15 px-1 py-1">
      <div className={cn(className, 'hover:bg-white/20')}>
        <VoiceIcon />
      </div>
      <textarea
        ref={textareaRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="输入消息..."
        className="hide-scrollbar h-10 max-h-25 w-full resize-none bg-transparent px-1 py-2.5 leading-normal outline-none"
        rows={1}
      />
      <div
        style={{
          background:
            'linear-gradient(92.99deg, rgba(166, 83, 255, 1) 0%, rgba(0, 101, 255, 1) 112.3%, rgba(0, 157, 255, 1) 140.37%)',
        }}
        className={cn(className)}
      >
        <Image src="/component/send.svg" width={20} height={20} alt="send" />
      </div>
    </div>
  );
}