107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import { IconButton } from '@/components/ui/button';
|
||
import { cn } from '@/lib/utils';
|
||
import { useStreamChatStore } from '@/stores/stream-chat';
|
||
import { useState, useRef, useEffect } from 'react';
|
||
|
||
const AuthHeightTextarea = (props: React.ComponentProps<'textarea'> & { maxHeight?: number }) => {
|
||
const { maxHeight = 200, className, value, onChange, ...restProps } = props;
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
|
||
// 调整高度的函数
|
||
const adjustHeight = () => {
|
||
const textarea = textareaRef.current;
|
||
if (!textarea) return;
|
||
|
||
// 先重置高度为 0，这样才能获取真实的 scrollHeight
|
||
textarea.style.height = '0px';
|
||
|
||
// 获取内容实际需要的高度
|
||
const scrollHeight = textarea.scrollHeight;
|
||
|
||
// 计算新高度：取 scrollHeight 和 maxHeight 的较小值
|
||
const newHeight = Math.min(scrollHeight, maxHeight);
|
||
textarea.style.height = `${newHeight}px`;
|
||
|
||
// 如果内容超过最大高度，显示滚动条
|
||
textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
|
||
};
|
||
|
||
// 监听内容变化，自动调整高度
|
||
useEffect(() => {
|
||
adjustHeight();
|
||
}, [value, maxHeight]);
|
||
|
||
return (
|
||
<textarea
|
||
ref={textareaRef}
|
||
value={value}
|
||
onChange={onChange}
|
||
className={cn(
|
||
'w-full resize-none',
|
||
// 移除所有默认样式
|
||
'border-none outline-none focus:outline-none',
|
||
'bg-transparent',
|
||
// 自定义滚动条样式（可选）
|
||
'scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent',
|
||
className
|
||
)}
|
||
style={{
|
||
minHeight: '24px', // 最小高度，一行文字的高度
|
||
height: '24px', // 初始高度
|
||
overflow: 'hidden', // 初始隐藏滚动条
|
||
}}
|
||
{...restProps}
|
||
/>
|
||
);
|
||
};
|
||
|
||
export default function Input() {
|
||
const [isRecording, setIsRecording] = useState(false);
|
||
const [inputValue, setInputValue] = useState('');
|
||
const sendMessage = useStreamChatStore((state) => state.sendMessage);
|
||
|
||
return (
|
||
<div className="flex flex-col mb-6 items-end gap-4">
|
||
<div></div>
|
||
<div className="flex w-full items-end gap-4">
|
||
{/* 打电话按钮 */}
|
||
<IconButton onClick={() => {}} iconfont="icon-gift-border" />
|
||
<div className="flex-1 flex items-end gap-2 min-h-12 py-2 px-2 bg-white/15 rounded-3xl">
|
||
{/* 语音录制按钮 */}
|
||
<IconButton
|
||
variant="ghost"
|
||
size="small"
|
||
iconfont="icon-voice_msg"
|
||
className="flex-shrink-0"
|
||
/>
|
||
<AuthHeightTextarea
|
||
placeholder="Chat"
|
||
maxHeight={70}
|
||
value={inputValue}
|
||
onChange={(e) => setInputValue(e.target.value)}
|
||
className="py-1"
|
||
/>
|
||
{/* 提示词提示按钮 */}
|
||
<IconButton
|
||
variant="ghost"
|
||
size="small"
|
||
onClick={() => null}
|
||
className={cn('bg-surface-element-hover flex-shrink-0')}
|
||
iconfont="icon-prompt"
|
||
/>
|
||
</div>
|
||
<IconButton
|
||
size="large"
|
||
loading={false}
|
||
iconfont="icon-icon-send"
|
||
onClick={() => sendMessage(inputValue)}
|
||
disabled={false}
|
||
className="flex-shrink-0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|