forked from 77media/video-flow
252 lines
8.5 KiB
TypeScript
252 lines
8.5 KiB
TypeScript
import React, { useRef, useState, useEffect } from "react";
|
||
import { Image as ImageIcon, Send, Trash2, ArrowUp } from "lucide-react";
|
||
import { MessageBlock } from "./types";
|
||
import { useUploadFile } from "@/app/service/domain/service";
|
||
|
||
interface InputBarProps {
|
||
onSend: (blocks: MessageBlock[], videoId?: string) => void;
|
||
setVideoPreview?: (url: string, id: string) => void;
|
||
initialVideoUrl?: string;
|
||
initialVideoId?: string;
|
||
}
|
||
|
||
export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVideoId }: InputBarProps) {
|
||
const [text, setText] = useState("");
|
||
const [isUploading, setIsUploading] = useState(false);
|
||
const [uploadProgress, setUploadProgress] = useState(0);
|
||
const [imageUrl, setImageUrl] = useState<string | null>(null);
|
||
const [videoUrl, setVideoUrl] = useState<string | null>(initialVideoUrl || null);
|
||
const [videoId, setVideoId] = useState<string | null>(initialVideoId || null);
|
||
const [isMultiline, setIsMultiline] = useState(false);
|
||
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
const { uploadFile } = useUploadFile();
|
||
|
||
const adjustHeight = () => {
|
||
const textarea = textareaRef.current;
|
||
if (textarea) {
|
||
textarea.style.height = 'auto';
|
||
const newHeight = Math.min(Math.max(textarea.scrollHeight, 48), 120);
|
||
textarea.style.height = `${newHeight}px`;
|
||
|
||
// 检查是否超过一行（48px 是单行高度）
|
||
setIsMultiline(newHeight > 48);
|
||
}
|
||
};
|
||
|
||
// 监听初始视频 URL 和 ID 的变化
|
||
useEffect(() => {
|
||
if (initialVideoUrl && initialVideoId) {
|
||
setVideoUrl(initialVideoUrl);
|
||
setVideoId(initialVideoId);
|
||
}
|
||
}, [initialVideoUrl, initialVideoId]);
|
||
|
||
// 监听文本变化和组件挂载时调整高度
|
||
useEffect(() => {
|
||
adjustHeight();
|
||
}, [text]);
|
||
|
||
const handleSend = () => {
|
||
const blocks: MessageBlock[] = [];
|
||
if (text.trim()) blocks.push({ type: "text" as const, text: text.trim() });
|
||
if (imageUrl) blocks.push({ type: "image" as const, url: imageUrl });
|
||
if (videoUrl) blocks.push({ type: "video" as const, url: videoUrl });
|
||
if (!blocks.length) return;
|
||
|
||
onSend(blocks, videoId || undefined);
|
||
setText("");
|
||
setImageUrl(null);
|
||
if (videoUrl && videoId && setVideoPreview) {
|
||
setVideoPreview(videoUrl, videoId);
|
||
}
|
||
setVideoUrl(null);
|
||
setVideoId(null);
|
||
};
|
||
|
||
const handleFileUpload = async (file: File) => {
|
||
try {
|
||
setIsUploading(true);
|
||
const url = await uploadFile(file, (progress) => {
|
||
setUploadProgress(progress);
|
||
});
|
||
// 如果已经有视频，先保存视频状态
|
||
const prevVideoUrl = videoUrl;
|
||
const prevVideoId = videoId;
|
||
|
||
setImageUrl(url);
|
||
|
||
// 恢复视频状态
|
||
if (prevVideoUrl && prevVideoId) {
|
||
setVideoUrl(prevVideoUrl);
|
||
setVideoId(prevVideoId);
|
||
}
|
||
} catch (error) {
|
||
console.error("上传失败:", error);
|
||
// 可以添加错误提示
|
||
} finally {
|
||
setIsUploading(false);
|
||
setUploadProgress(0);
|
||
}
|
||
};
|
||
|
||
const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
// 保存对 input 元素的引用
|
||
const inputElement = e.currentTarget;
|
||
|
||
if (file) {
|
||
if (!file.type.startsWith('image/')) {
|
||
alert('请选择图片文件');
|
||
inputElement.value = ""; // 重置 input
|
||
return;
|
||
}
|
||
await handleFileUpload(file);
|
||
// 使用保存的引用重置 input
|
||
inputElement.value = "";
|
||
}
|
||
};
|
||
|
||
const removeImage = () => {
|
||
setImageUrl(null);
|
||
};
|
||
|
||
return (
|
||
<div data-alt="input-bar">
|
||
{/* 媒体预览 */}
|
||
<div className="px-3 pt-3 flex gap-2" data-alt="media-preview">
|
||
{/* 图片预览 */}
|
||
{imageUrl && (
|
||
<div className="relative group w-24 h-24">
|
||
<img
|
||
src={imageUrl}
|
||
className="h-full w-full object-cover rounded-xl border border-white/10"
|
||
alt="预览图"
|
||
/>
|
||
<button
|
||
onClick={removeImage}
|
||
className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition bg-black/60 text-white rounded-full p-1"
|
||
title="移除"
|
||
data-alt="remove-image-button"
|
||
>
|
||
<Trash2 size={14} />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 视频预览 */}
|
||
{videoUrl && (
|
||
<div className="relative group w-24 h-24">
|
||
<video
|
||
src={videoUrl}
|
||
className="h-full w-full object-cover rounded-xl border border-white/10"
|
||
controls={false}
|
||
/>
|
||
<button
|
||
onClick={() => {
|
||
if (setVideoPreview) {
|
||
setVideoPreview(videoUrl!, videoId!);
|
||
}
|
||
setVideoUrl(null);
|
||
setVideoId(null);
|
||
}}
|
||
className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition bg-black/60 text-white rounded-full p-1"
|
||
title="移除"
|
||
data-alt="remove-video-button"
|
||
>
|
||
<Trash2 size={14} />
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 上传进度 */}
|
||
{isUploading && (
|
||
<div className="px-3 py-2">
|
||
<div className="w-full bg-gray-200 rounded-full h-1">
|
||
<div
|
||
className="bg-blue-500 h-1 rounded-full transition-all duration-300"
|
||
style={{ width: `${uploadProgress}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className={`${isMultiline ? 'flex flex-col' : 'flex items-center'} gap-2 px-3 m-3 border border-gray-700 rounded-[2rem]`}>
|
||
{/* 图片上传按钮 - 单行时显示在左侧，多行时显示在底部 */}
|
||
{!isMultiline && (
|
||
<label
|
||
className={`cursor-pointer inline-flex items-center gap-2 p-2 my-2 rounded-full hover:bg-gray-700/50 text-gray-100 ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||
data-alt="file-upload"
|
||
>
|
||
<ImageIcon size={16} />
|
||
<input
|
||
className="hidden"
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={onFileChange}
|
||
disabled={isUploading}
|
||
/>
|
||
</label>
|
||
)}
|
||
|
||
{/* 文本输入 */}
|
||
<textarea
|
||
ref={textareaRef}
|
||
placeholder="输入文字…"
|
||
className="w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
|
||
rows={1}
|
||
value={text}
|
||
onChange={(e) => setText(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSend();
|
||
}
|
||
}}
|
||
data-alt="text-input"
|
||
/>
|
||
|
||
{isMultiline ? (
|
||
// 多行模式：底部按钮区域
|
||
<div className="flex justify-between items-center pb-2">
|
||
{/* 图片上传 */}
|
||
<label
|
||
className={`cursor-pointer inline-flex items-center gap-2 p-2 rounded-full hover:bg-gray-700/50 text-gray-100 ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||
data-alt="file-upload"
|
||
>
|
||
<ImageIcon size={16} />
|
||
<input
|
||
className="hidden"
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={onFileChange}
|
||
disabled={isUploading}
|
||
/>
|
||
</label>
|
||
|
||
{/* 发送按钮 必须有文字 */}
|
||
<button
|
||
onClick={handleSend}
|
||
className="inline-flex items-center gap-2 p-2 rounded-full bg-[#f1f3f4] text-[#25294b] shadow disabled:text-white/25 disabled:border disabled:border-white/10 disabled:bg-[#1b1b1b80] disabled:cursor-not-allowed"
|
||
data-alt="send-button"
|
||
disabled={!text.trim()}
|
||
>
|
||
<ArrowUp size={18} />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
// 单行模式：发送按钮
|
||
<button
|
||
onClick={handleSend}
|
||
className="inline-flex items-center gap-2 p-2 my-2 rounded-full bg-[#f1f3f4] text-[#25294b] shadow disabled:text-white/25 disabled:border disabled:border-white/10 disabled:bg-[#1b1b1b80] disabled:cursor-not-allowed"
|
||
data-alt="send-button"
|
||
disabled={!text.trim()}
|
||
>
|
||
<ArrowUp size={18} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
} |