adding drag and drop images to text area
Browse files
app/components/chat/BaseChat.tsx
CHANGED
|
@@ -351,9 +351,41 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
|
|
| 351 |
>
|
| 352 |
<textarea
|
| 353 |
ref={textareaRef}
|
| 354 |
-
className={
|
| 355 |
-
'w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm'
|
| 356 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 357 |
onKeyDown={(event) => {
|
| 358 |
if (event.key === 'Enter') {
|
| 359 |
if (event.shiftKey) {
|
|
|
|
| 351 |
>
|
| 352 |
<textarea
|
| 353 |
ref={textareaRef}
|
| 354 |
+
className={classNames(
|
| 355 |
+
'w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm',
|
| 356 |
+
'transition-all duration-200',
|
| 357 |
+
'hover:border-bolt-elements-focus',
|
| 358 |
+
)}
|
| 359 |
+
onDragEnter={(e) => {
|
| 360 |
+
e.preventDefault();
|
| 361 |
+
e.currentTarget.style.border = '2px solid #1488fc';
|
| 362 |
+
}}
|
| 363 |
+
onDragOver={(e) => {
|
| 364 |
+
e.preventDefault();
|
| 365 |
+
e.currentTarget.style.border = '2px solid #1488fc';
|
| 366 |
+
}}
|
| 367 |
+
onDragLeave={(e) => {
|
| 368 |
+
e.preventDefault();
|
| 369 |
+
e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
|
| 370 |
+
}}
|
| 371 |
+
onDrop={(e) => {
|
| 372 |
+
e.preventDefault();
|
| 373 |
+
e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
|
| 374 |
+
|
| 375 |
+
const files = Array.from(e.dataTransfer.files);
|
| 376 |
+
files.forEach((file) => {
|
| 377 |
+
if (file.type.startsWith('image/')) {
|
| 378 |
+
const reader = new FileReader();
|
| 379 |
+
|
| 380 |
+
reader.onload = (e) => {
|
| 381 |
+
const base64Image = e.target?.result as string;
|
| 382 |
+
setUploadedFiles?.([...uploadedFiles, file]);
|
| 383 |
+
setImageDataList?.([...imageDataList, base64Image]);
|
| 384 |
+
};
|
| 385 |
+
reader.readAsDataURL(file);
|
| 386 |
+
}
|
| 387 |
+
});
|
| 388 |
+
}}
|
| 389 |
onKeyDown={(event) => {
|
| 390 |
if (event.key === 'Enter') {
|
| 391 |
if (event.shiftKey) {
|