feat(prompt-input): add file property to attachment messages for pers…

[chaxus]

Description

I encountered a use case similar to the one described in #89, where I need to persist chat messages. This requires the ability to upload files attached via the Prompt Input component.

Currently, the component provides file metadata like id, type, url (a local object URL), mediaType, and filename. However, these properties are insufficient for actual file persistence because:

• The url is a temporary blob link that becomes invalid after the session.

• We lack access to the actual File object, which is required to upload the file data to a server or persistent storage.

Proposed Solution

I would like to suggest exposing the file property from the component. This would allow users to access the File object directly during the onSubmit event.

With access to the file data, we can then handle the file upload and storage independently, fitting it into our own persistence layer.

Benefits

Flexibility: Enables developers to implement custom file upload workflows.

Persistence: Supports use cases where messages (and their associated files) need to be saved permanently.

This is just a suggestion from my perspective, and I believe it would be a helpful addition for others with similar needs. Thank you for considering it!

[vercel]

@chaxus is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

Additional Suggestion:

The PromptInputMessage type declares files: FileUIPart[], but the actual runtime value includes the file?: File property that was added in this PR. This creates a type mismatch that violates type safety.

View Details

📝 Patch Details

diff --git a/packages/elements/src/prompt-input.tsx b/packages/elements/src/prompt-input.tsx
index 6a07a69..188c1c3 100644
--- a/packages/elements/src/prompt-input.tsx
+++ b/packages/elements/src/prompt-input.tsx
@@ -430,7 +430,7 @@ export const PromptInputActionAddAttachments = ({
 
 export type PromptInputMessage = {
   text: string;
-  files: FileUIPart[];
+  files: (FileUIPart & { file?: File })[];
 };
 
 export type PromptInputProps = Omit<
@@ -731,7 +731,7 @@ export const PromptInput = ({
         return item;
       })
     )
-      .then((convertedFiles: FileUIPart[]) => {
+      .then((convertedFiles: (FileUIPart & { file?: File })[]) => {
         try {
           const result = onSubmit({ text, files: convertedFiles }, event);
 

Analysis

Type mismatch in PromptInputMessage after adding file property to attachments

What fails: The PromptInputMessage type declares files: FileUIPart[], but the actual runtime value in the onSubmit callback includes the file?: File property. This prevents TypeScript from type-checking access to the file property in user code.

How to reproduce:

// User code trying to access the file property
const handleSubmit = (message: PromptInputMessage) => {
  const file = message.files[0]?.file;  // TypeScript error: property 'file' does not exist
};

Result: TypeScript error: Property 'file' does not exist on type 'FileUIPart'

Expected: The type should match the runtime value. Since the onSubmit callback receives files with the file?: File property (preserved during destructuring in handleSubmit), the type should reflect this.

Changes made:

• Line 433: Updated PromptInputMessage.files type from FileUIPart[] to (FileUIPart & { file?: File })[]
• Line 734: Updated the Promise.all .then() type annotation to match: (FileUIPart & { file?: File })[]

This aligns with the property added in commit ce0f8cb (feat: add file property to attachment messages for persistent storage).

[chaxus]

Additional Suggestion:

The PromptInputMessage type declares files: FileUIPart[], but the actual runtime value includes the file?: File property that was added in this PR. This creates a type mismatch that violates type safety.

View Details

📝 Patch Details

diff --git a/packages/elements/src/prompt-input.tsx b/packages/elements/src/prompt-input.tsx
index 6a07a69..188c1c3 100644
--- a/packages/elements/src/prompt-input.tsx
+++ b/packages/elements/src/prompt-input.tsx
@@ -430,7 +430,7 @@ export const PromptInputActionAddAttachments = ({
 
 export type PromptInputMessage = {
   text: string;
-  files: FileUIPart[];
+  files: (FileUIPart & { file?: File })[];
 };
 
 export type PromptInputProps = Omit<
@@ -731,7 +731,7 @@ export const PromptInput = ({
         return item;
       })
     )
-      .then((convertedFiles: FileUIPart[]) => {
+      .then((convertedFiles: (FileUIPart & { file?: File })[]) => {
         try {
           const result = onSubmit({ text, files: convertedFiles }, event);
 

Analysis

Type mismatch in PromptInputMessage after adding file property to attachments

What fails: The PromptInputMessage type declares files: FileUIPart[], but the actual runtime value in the onSubmit callback includes the file?: File property. This prevents TypeScript from type-checking access to the file property in user code.

How to reproduce:

// User code trying to access the file property
const handleSubmit = (message: PromptInputMessage) => {
  const file = message.files[0]?.file;  // TypeScript error: property 'file' does not exist
};

Result: TypeScript error: Property 'file' does not exist on type 'FileUIPart'

Expected: The type should match the runtime value. Since the onSubmit callback receives files with the file?: File property (preserved during destructuring in handleSubmit), the type should reflect this.

Changes made:

• Line 433: Updated PromptInputMessage.files type from FileUIPart[] to (FileUIPart & { file?: File })[]
• Line 734: Updated the Promise.all .then() type annotation to match: (FileUIPart & { file?: File })[]

This aligns with the property added in commit ce0f8cb (feat: add file property to attachment messages for persistent storage).

The PromptInputMessage type has been added