Attachment: improve auto-mime

src/apps/chat/components/attachments/AttachmentItem.tsx

@@ -23,8 +23,8 @@ const ellipsizeLabel = (label: string) =>
 /**
  * Displayed while a source is loading
  */
-function LoadingIndicator(props: { label: string }) {
-  return <Sheet
+const LoadingIndicator = React.forwardRef((props: { label: string }, ref) =>
+  <Sheet
     color='success' variant='soft'
     sx={{
       border: '1px solid',
@@ -35,13 +35,23 @@ function LoadingIndicator(props: { label: string }) {
       minWidth: ATTACHMENT_MIN_WIDTH,
       px: 1,
       py: 0.5,
-    }}>
+    }}
+  >
     <CircularProgress color='success' size='sm' />
     <Typography level='body-xs' sx={{ whiteSpace: 'break-spaces' }}>
       {ellipsizeLabel(props.label)}
     </Typography>
-  </Sheet>;
-}
+  </Sheet>,
+);
+LoadingIndicator.displayName = 'LoadingIndicator';
+
+const SourceErrorIndicator = () =>
+  <WarningRoundedIcon
+    sx={{
+      color: 'danger.solidBg',
+      minWidth: ATTACHMENT_MIN_WIDTH,
+    }}
+  />;
 
 
 export function AttachmentItem(props: {
@@ -93,9 +103,9 @@ export function AttachmentItem(props: {
   let color: ColorPaletteProp;
 
   // compose tooltip
-  tooltip = `${aLabel}`;
+  tooltip = `${props.attachment.source.type !== 'text' ? props.attachment.source.type + ': ' : ''}${aLabel}`;
   if (hasInput)
-    tooltip += `\n - ${aInput.mimeType}: ${aInput.dataSize.toLocaleString()} bytes`;
+    tooltip += `\n(${aInput.mimeType}: ${aInput.dataSize.toLocaleString()} bytes)`;
   if (hasOutputs)
     tooltip += `\n\n${JSON.stringify(aOutputs)}`;
 
@@ -134,12 +144,10 @@ export function AttachmentItem(props: {
           }}
         >
           {isSourceError
-            ? <WarningRoundedIcon sx={{ color: 'danger.solidBg', minWidth: ATTACHMENT_MIN_WIDTH }} />
+            ? <SourceErrorIndicator />
             : <Typography level='title-sm' sx={{ whiteSpace: 'break-spaces' }}>{ellipsizeLabel(aLabel)}</Typography>
           }
 
-          {/*{props.attachment.source.type}*/}
-
           {hasInput && <Typography level='body-xs'>
             {aInput.mimeType} - {aInput.dataSize.toLocaleString()}
           </Typography>}

src/apps/chat/components/attachments/store-attachments.tsx

@@ -117,11 +117,17 @@ async function resolveInputAsync(source: AttachmentSource, edit: (changes: Parti
     // Attach file as input
     case 'file':
       edit({ label: source.name });
+      let mimeType = source.fileWithHandle.type;
+      if (!mimeType) {
+        // see note on 'attachAppendDataTransfer'; this is a fallback for drag/drop missing Mimes sometimes
+        console.warn('Assuming the attachment is text/plain. From:', source.origin, ', name:', source.name);
+        mimeType = 'text/plain';
+      }
       try {
         const fileArrayBuffer = await source.fileWithHandle.arrayBuffer();
         edit({
           input: {
-            mimeType: source.fileWithHandle.type,
+            mimeType,
             data: fileArrayBuffer,
             dataSize: fileArrayBuffer.byteLength,
           },
@@ -134,7 +140,7 @@ async function resolveInputAsync(source: AttachmentSource, edit: (changes: Parti
     case 'text':
       if (source.textHtml && source.textPlain) {
         edit({
-          label: 'Text+',
+          label: 'Rich Text',
           input: {
             mimeType: 'text/plain',
             data: source.textPlain,
@@ -174,6 +180,4 @@ function defineConversions(input: AttachmentInput, edit: (changes: Partial<Attac
   // setComposeText(expandPromptTemplate(PromptTemplates.PasteFile, { fileName, fileText: urlContent }));
 
   return undefined;
-}
-
-
+}

src/apps/chat/components/attachments/useAttachments.tsx

@@ -46,8 +46,13 @@ export const useAttachments = (enableUrlAttachments: boolean) => {
 
       // attach as Files
       const overrideNames = overrideFileNames.length === dataTransfer.files.length;
-      for (let i = 0; i < dataTransfer.files.length; i++)
+      for (let i = 0; i < dataTransfer.files.length; i++) {
+        // drag/drop of folders (or .tsx from IntelliJ) will have no type
+        if (!dataTransfer.files[i].type) {
+          // NOTE: we are fixing it in resolveInputAsync, but would be better to do it here
+        }
         attachAppendFile(method, dataTransfer.files[i], overrideNames ? overrideFileNames[i] || undefined : undefined);
+      }
       return 'as_files';
     }
 
@@ -73,7 +78,7 @@ export const useAttachments = (enableUrlAttachments: boolean) => {
     }
 
     if (attachText)
-      console.log(`Unhandled ${method} event: `, dataTransfer.types?.map(t => `${t}: ${dataTransfer.getData(t)}`));
+      console.warn(`Unhandled '${method}' attachment: `, dataTransfer.types?.map(t => `${t}: ${dataTransfer.getData(t)}`));
 
     // did not attach anything from this data transfer
     return false;
@@ -138,7 +143,7 @@ export const useAttachments = (enableUrlAttachments: boolean) => {
         continue;
       }
 
-      console.log('Clipboard item has no text/html or text/plain item.', clipboardItem.types, clipboardItem);
+      console.warn('Clipboard item has no text/html or text/plain item.', clipboardItem.types, clipboardItem);
     }
   }, [attachAppendFile, createAttachment, enableUrlAttachments]);