atrokhym commited on
Commit
5adc0f6
·
1 Parent(s): 235747a

adding drag and drop images to text area

Browse files
Files changed (1) hide show
  1. app/components/chat/BaseChat.tsx +35 -3
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) {