(Feat): Enhance PromptInput with SourceDocument functionality

[FranciscoMoretti]

• Added support for managing referenced sources within the PromptInput component.
• Updated Cursor's example to demonstrate the usage of referenced sources in the PromptInput.

Screen.Recording.2025-11-12.at.14.09.55.mov

Open Questions - New component?

I think PromptInputReferencedSources and PromptInputAttachments should map the SourceDocument and Attachments respectively. The responsibility of wrapping them in a div with flex flex-wrap items-center gap-2 p-3 should be in a new component ContextReferenceContainer. This has the advantage of being able to flex wrap attachments and sources. Otherwise, we end up with 2 lines like in the video demo. Creating a new component also has the advantage that users can decide if they place attachments or sources first. The disadvantage is that it can break the interface, since people using PromptInputAttachments now have to wrap it in a new component after they update their AI Elements prompt-input file.

[vercel]

@FranciscoMoretti 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:

Referenced sources are not cleared after successful form submission, while attachments are. This causes referenced sources to persist across submissions, which is inconsistent behavior.

View Details

📝 Patch Details

diff --git a/packages/elements/src/prompt-input.tsx b/packages/elements/src/prompt-input.tsx
index 3be6230..fb6df09 100644
--- a/packages/elements/src/prompt-input.tsx
+++ b/packages/elements/src/prompt-input.tsx
@@ -862,6 +862,7 @@ export const PromptInput = ({
           result
             .then(() => {
               clear();
+              refsCtx.clear();
               if (usingProvider) {
                 controller.textInput.clear();
               }
@@ -872,6 +873,7 @@ export const PromptInput = ({
         } else {
           // Sync function completed without throwing, clear attachments
           clear();
+          refsCtx.clear();
           if (usingProvider) {
             controller.textInput.clear();
           }

Analysis

Referenced sources not cleared after successful form submission

What fails: PromptInput component does not clear referenced sources after successful form submission, while attachments and text input are cleared. This creates inconsistent behavior where referenced sources persist across multiple message submissions.

How to reproduce:

1. Render a PromptInput component with referenced sources display
2. Add a referenced source to the input
3. Type a message
4. Submit the form with a successful onSubmit handler
5. Observe that the referenced source remains visible for the next message

Expected vs Actual:

• Expected: After successful submission, referenced sources should be cleared along with attachments and text input
• Actual: Referenced sources persist in the UI after submission, while attachments and text input are correctly cleared

Root cause: In packages/elements/src/prompt-input.tsx, the handleSubmit function calls clear() to clear attachments and controller.textInput.clear() to clear text input after successful submissions (both async via Promise and sync), but never calls refsCtx.clear() to clear the referenced sources. The refsCtx object with its clear() method is defined in the same scope but remains unused.

Fix: Added refsCtx.clear() calls in both the async submission success path (around line 864) and sync submission path (around line 874), matching the pattern used for clearing attachments and text input.

[FranciscoMoretti]

Additional Suggestion:

Referenced sources are not cleared after successful form submission, while attachments are. This causes referenced sources to persist across submissions, which is inconsistent behavior.

View Details

📝 Patch Details

diff --git a/packages/elements/src/prompt-input.tsx b/packages/elements/src/prompt-input.tsx
index 3be6230..fb6df09 100644
--- a/packages/elements/src/prompt-input.tsx
+++ b/packages/elements/src/prompt-input.tsx
@@ -862,6 +862,7 @@ export const PromptInput = ({
           result
             .then(() => {
               clear();
+              refsCtx.clear();
               if (usingProvider) {
                 controller.textInput.clear();
               }
@@ -872,6 +873,7 @@ export const PromptInput = ({
         } else {
           // Sync function completed without throwing, clear attachments
           clear();
+          refsCtx.clear();
           if (usingProvider) {
             controller.textInput.clear();
           }

Analysis

Referenced sources not cleared after successful form submission

What fails: PromptInput component does not clear referenced sources after successful form submission, while attachments and text input are cleared. This creates inconsistent behavior where referenced sources persist across multiple message submissions.

How to reproduce:

1. Render a PromptInput component with referenced sources display
2. Add a referenced source to the input
3. Type a message
4. Submit the form with a successful onSubmit handler
5. Observe that the referenced source remains visible for the next message

Expected vs Actual:

• Expected: After successful submission, referenced sources should be cleared along with attachments and text input
• Actual: Referenced sources persist in the UI after submission, while attachments and text input are correctly cleared

Root cause: In packages/elements/src/prompt-input.tsx, the handleSubmit function calls clear() to clear attachments and controller.textInput.clear() to clear text input after successful submissions (both async via Promise and sync), but never calls refsCtx.clear() to clear the referenced sources. The refsCtx object with its clear() method is defined in the same scope but remains unused.

Fix: Added refsCtx.clear() calls in both the async submission success path (around line 864) and sync submission path (around line 874), matching the pattern used for clearing attachments and text input.

This was addressed