Show the attached file in message bubble

packages/host/app/components/ai-assistant/message/index.gts

@@ -15,10 +15,12 @@ import { and, cn } from '@cardstack/boxel-ui/helpers';
 import { FailureBordered } from '@cardstack/boxel-ui/icons';
 
 import CardPill from '@cardstack/host/components/card-pill';
+import FilePill from '@cardstack/host/components/file-pill';
 
 import type CardService from '@cardstack/host/services/card-service';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
+import { type FileDef } from 'https://cardstack.com/base/file-api';
 
 import type { ComponentLike } from '@glint/template';
 
@@ -59,6 +61,7 @@ interface Signature {
     profileAvatar?: ComponentLike;
     resources?: {
       cards: CardDef[] | undefined;
+      files: FileDef[] | undefined;
       errors: { id: string; error: Error }[] | undefined;
     };
     index: number;
@@ -215,6 +218,14 @@ export default class AiAssistantMessage extends Component<Signature> {
             </div>
           {{/if}}
 
+          {{#if @resources.files.length}}
+            <div class='cards' data-test-message-files>
+              {{#each @resources.files as |file|}}
+                <FilePill @file={{file}} />
+              {{/each}}
+            </div>
+          {{/if}}
+
           {{#if @resources.errors.length}}
             <div class='error-container'>
               {{#each @resources.errors as |resourceError|}}

packages/host/app/components/matrix/room-message.gts

@@ -211,6 +211,9 @@ export default class RoomMessage extends Component<Signature> {
 
     return {
       cards: cards.length ? cards : undefined,
+      files: this.args.message.attachedFiles?.length
+        ? this.args.message.attachedFiles
+        : undefined,
       errors: errors.length ? errors : undefined,
     };
   });

packages/host/tests/acceptance/ai-assistant-test.gts

@@ -49,10 +49,11 @@ async function assertMessages(
     from: string;
     message?: string;
     cards?: { id: string; title?: string; realmIconUrl?: string }[];
+    files?: { name: string; sourceUrl: string }[];
   }[],
 ) {
   assert.dom('[data-test-message-idx]').exists({ count: messages.length });
-  for (let [index, { from, message, cards }] of messages.entries()) {
+  for (let [index, { from, message, cards, files }] of messages.entries()) {
     assert
       .dom(
         `[data-test-message-idx="${index}"][data-test-boxel-message-from="${from}"]`,
@@ -98,6 +99,25 @@ async function assertMessages(
         .dom(`[data-test-message-idx="${index}"] [data-test-message-cards]`)
         .doesNotExist();
     }
+    if (files?.length) {
+      assert
+        .dom(`[data-test-message-idx="${index}"] [data-test-message-files]`)
+        .exists({ count: 1 });
+      assert
+        .dom(`[data-test-message-idx="${index}"] [data-test-attached-file]`)
+        .exists({ count: files.length });
+      files.map(async (file) => {
+        assert
+          .dom(
+            `[data-test-message-idx="${index}"] [data-test-attached-file="${file.sourceUrl}"]`,
+          )
+          .containsText(file.name);
+      });
+    } else {
+      assert
+        .dom(`[data-test-message-idx="${index}"] [data-test-message-files]`)
+        .doesNotExist();
+    }
   }
 }
 
@@ -406,9 +426,20 @@ module('Acceptance | AI Assistant tests', function (hooks) {
       `[data-test-attached-file="${testRealmURL}person.gts"] [data-test-remove-file-btn]`,
     );
     assert.dom('[data-test-attached-file]').hasText('pet.gts');
+
+    await fillIn('[data-test-message-field]', `Message With File`);
+    await click('[data-test-send-message-btn]');
+
+    assertMessages(assert, [
+      {
+        from: 'testuser',
+        message: 'Message With File',
+        files: [{ sourceUrl: `${testRealmURL}pet.gts`, name: 'pet.gts' }],
+      },
+    ]);
   });
 
-  test('can display and remove auto attached card', async function (assert) {
+  test('can display and remove auto attached file', async function (assert) {
     await visitOperatorMode({
       submode: 'code',
       stacks: [