Spaces:
Build error
Build error
File size: 2,083 Bytes
b59aa07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import React from "react";
import { ChatInput } from "./chat-input";
import { cn } from "#/utils/utils";
import { ImageCarousel } from "../images/image-carousel";
import { UploadImageInput } from "../images/upload-image-input";
interface InteractiveChatBoxProps {
isDisabled?: boolean;
mode?: "stop" | "submit";
onSubmit: (message: string, images: File[]) => void;
onStop: () => void;
value?: string;
onChange?: (message: string) => void;
}
export function InteractiveChatBox({
isDisabled,
mode = "submit",
onSubmit,
onStop,
value,
onChange,
}: InteractiveChatBoxProps) {
const [images, setImages] = React.useState<File[]>([]);
const handleUpload = (files: File[]) => {
setImages((prevImages) => [...prevImages, ...files]);
};
const handleRemoveImage = (index: number) => {
setImages((prevImages) => {
const newImages = [...prevImages];
newImages.splice(index, 1);
return newImages;
});
};
const handleSubmit = (message: string) => {
onSubmit(message, images);
setImages([]);
if (message) {
onChange?.("");
}
};
return (
<div
data-testid="interactive-chat-box"
className="flex flex-col gap-[10px]"
>
{images.length > 0 && (
<ImageCarousel
size="small"
images={images.map((image) => URL.createObjectURL(image))}
onRemove={handleRemoveImage}
/>
)}
<div
className={cn(
"flex items-end gap-1",
"bg-tertiary border border-neutral-600 rounded-lg px-2",
"transition-colors duration-200",
"hover:border-neutral-500 focus-within:border-neutral-500",
)}
>
<UploadImageInput onUpload={handleUpload} />
<ChatInput
disabled={isDisabled}
button={mode}
onChange={onChange}
onSubmit={handleSubmit}
onStop={onStop}
value={value}
onImagePaste={handleUpload}
className="py-[10px]"
buttonClassName="py-[10px]"
/>
</div>
</div>
);
}
|