[AiAssistance] Add ability to open image (sent as input) in a new tab

Bug:393036589
Change-Id: I17ba0674b6636028bdfd8845a78ceb5741372b89
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6262088
Commit-Queue: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Samiya Caur

front_end/panels/ai_assistance/components/ChatView.ts

@@ -284,6 +284,10 @@ const UIStringsNotTranslate = {
    *@description Alt text for the account avatar.
    */
   accountAvatar: 'Account avatar',
+  /**
+   *@description Title for the x-link which wraps the image input rendered in chat messages.
+   */
+  openImageInNewTab: 'Open image in a new tab',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
@@ -1116,7 +1120,14 @@ function renderChatMessage({
     let imageInput = html``;
     if (message.imageInput && 'inlineData' in message.imageInput) {
       const imageUrl = `data:image/jpeg;base64,${message.imageInput.inlineData.data}`;
-      imageInput = html`<img src=${imageUrl} alt=${UIStringsNotTranslate.imageInputSentToTheModel} />`;
+      // clang-format off
+      imageInput = html`<x-link
+        class="image-link" title=${UIStringsNotTranslate.openImageInNewTab}
+        href=${imageUrl}
+      >
+        <img src=${imageUrl} alt=${UIStringsNotTranslate.imageInputSentToTheModel} />
+      </x-link>`;
+      // clang-format on
     }
     // clang-format off
     return html`<section

front_end/panels/ai_assistance/components/chatView.css

@@ -291,6 +291,10 @@
     border: 1px solid var(--sys-color-neutral-outline);
     width: fit-content;
   }
+
+  .image-link {
+    width: fit-content;
+  }
 }
 
 .select-element {