From 41d03a3144c4949185c6431ffac91fd94ae9ffb1 Mon Sep 17 00:00:00 2001
From: Jay Harris <jay.harris@outlook.co.nz>
Date: Fri, 10 Jan 2025 15:11:53 +1300
Subject: [PATCH] [AI Chat]: Add UI for Tab Informer

---
 components/ai_chat/core/browser/constants.cc  |   4 +
 .../page/components/attachments/index.tsx     |  56 ++++
 .../components/attachments/style.module.scss  |  76 ++++++
 .../page/components/header/index.tsx          |  13 +-
 .../resources/page/components/main/index.tsx  | 258 +++++++++---------
 .../page/components/main/style.module.scss    |  21 ++
 .../resources/page/state/ai_chat_context.tsx  |   2 +-
 .../page/state/conversation_context.tsx       |  26 +-
 components/resources/ai_chat_ui_strings.grdp  |   9 +
 ui/webui/resources/BUILD.gn                   |   1 +
 10 files changed, 338 insertions(+), 128 deletions(-)
 create mode 100644 components/ai_chat/resources/page/components/attachments/index.tsx
 create mode 100644 components/ai_chat/resources/page/components/attachments/style.module.scss

diff --git a/components/ai_chat/core/browser/constants.cc b/components/ai_chat/core/browser/constants.cc
index d41ba39177cb..305dc6025ee4 100644
--- a/components/ai_chat/core/browser/constants.cc
+++ b/components/ai_chat/core/browser/constants.cc
@@ -132,6 +132,10 @@ base::span<const webui::LocalizedString> GetLocalizedStrings() {
        {"searchQueries", IDS_CHAT_UI_SEARCH_QUERIES},
        {"learnMore", IDS_CHAT_UI_LEARN_MORE},
        {"closeNotice", IDS_CHAT_UI_CLOSE_NOTICE},
+       {"attachmentsTitle", IDS_CHAT_UI_ATTACHMENTS_TITLE},
+       {"attachmentsDescription", IDS_CHAT_UI_ATTACHMENTS_DESCRIPTION},
+       {"attachmentsBrowserTabsTitle",
+        IDS_CHAT_UI_ATTACHMENTS_BROWSER_TABS_TITLE},
        {"noticeConversationHistoryBody",
         IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_BODY},
        {"noticeConversationHistoryEmpty",
diff --git a/components/ai_chat/resources/page/components/attachments/index.tsx b/components/ai_chat/resources/page/components/attachments/index.tsx
new file mode 100644
index 000000000000..d21173c3f637
--- /dev/null
+++ b/components/ai_chat/resources/page/components/attachments/index.tsx
@@ -0,0 +1,56 @@
+// Copyright (c) 2025 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+import * as React from 'react'
+import styles from './style.module.scss'
+import Button from '@brave/leo/react/button'
+import Icon from '@brave/leo/react/icon'
+import Input from '@brave/leo/react/input'
+import RadioButton from '@brave/leo/react/radioButton'
+import Flex from '$web-common/Flex'
+import { useAIChat } from '../../state/ai_chat_context'
+import { Tab } from 'components/ai_chat/resources/common/mojom'
+import { useConversation } from '../../state/conversation_context'
+import { getLocale } from '$web-common/locale'
+
+function TabItem({ tab }: { tab: Tab }) {
+    const aiChat = useAIChat()
+    const { conversationUuid, associatedContentInfo } = useConversation()
+    return <RadioButton className={styles.tabItem} currentValue={associatedContentInfo?.contentId} value={tab.contentId} name='tab-item' onChange={() => {
+        aiChat.uiHandler?.associateTab(tab, conversationUuid!)
+    }}>
+        <span className={styles.title}>{tab.title}</span>
+        <img className={styles.icon} src={`chrome://favicon2/?size=20&pageUrl=${encodeURIComponent(tab.url.url)}`} />
+    </RadioButton>
+}
+
+export default function Attachments() {
+    const aiChat = useAIChat()
+    const conversation = useConversation()
+    const [search, setSearch] = React.useState('')
+
+    const tabs = aiChat.windows.flatMap(w => w.tabs).filter(t => t.title.toLowerCase().includes(search.toLowerCase()))
+    return <div className={styles.root}>
+        <div className={styles.header}>
+            <Flex direction='row' justify='space-between' align='center'>
+                <h4>{getLocale('attachmentsTitle')}</h4>
+                <Button fab kind='plain-faint' size='small' onClick={() => conversation.setShowAttachments(false)}>
+                    <Icon name='close' />
+                </Button>
+            </Flex>
+            <span className={styles.description}>{getLocale('attachmentsDescription')}</span>
+        </div>
+        <div className={styles.tabSearchContainer}>
+            <Flex direction='row' justify='space-between' align='center'>
+                <h5>{getLocale('attachmentsBrowserTabsTitle')}</h5>
+            </Flex>
+            <Input placeholder='Search tabs' value={search} onInput={e => setSearch(e.value)}>
+                <Icon name='search' slot='icon-after' />
+            </Input>
+            <div className={styles.tabList}>
+                {tabs.map(t => <TabItem key={t.id} tab={t} />)}
+            </div>
+        </div>
+    </div>
+}
diff --git a/components/ai_chat/resources/page/components/attachments/style.module.scss b/components/ai_chat/resources/page/components/attachments/style.module.scss
new file mode 100644
index 000000000000..126fac5c6f21
--- /dev/null
+++ b/components/ai_chat/resources/page/components/attachments/style.module.scss
@@ -0,0 +1,76 @@
+.root {
+    background: var(--leo-color-container-highlight);
+    padding: var(--leo-spacing-m);
+    margin-top: var(--leo-spacing-m);
+    border-radius: var(--leo-radius-l);
+    box-shadow: var(--leo-effect-elevation-01);
+
+    & leo-button[fab] {
+        flex: 0;
+    }
+
+    & h4 {
+        margin: 0;
+        color: var(--leo-color-text-secondary);
+        font: var(--leo-font-heading-h4);
+    }
+
+    & h5 {
+        margin: 0;
+        color: var(--leo-color-text-secondary);
+        font: var(--leo-font-default-semibold);
+    }
+}
+
+.header {
+    padding: var(--leo-spacing-l) var(--leo-spacing-xl);
+}
+
+.tabSearchContainer {
+    background: var(--leo-color-container-background);
+    padding: var(--leo-spacing-l) var(--leo-spacing-xl);
+    border-radius: var(--leo-radius-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--leo-spacing-m);
+}
+
+.tabList {
+    display: flex;
+    flex-direction: column;
+    gap: var(--leo-spacing-s);
+
+    border: 1px solid var(--leo-color-divider-subtle);
+    border-radius: var(--leo-radius-m);
+
+    padding: var(--leo-spacing-m);
+}
+
+.description {
+    font: var(--leo-font-small-regular);
+    color: var(--leo-color-text-tertiary);
+}
+
+.tabItem {
+    --leo-radiobutton-flex-direction: row-reverse;
+
+    padding: var(--leo-spacing-m);
+    display: flex;
+    gap: var(--leo-spacing-m);
+    align-items: center;
+    justify-content: space-between;
+
+    & .icon {
+        flex-shrink: 0;
+    }
+
+    & .title {
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1;
+
+        color: var(--leo-color-text-primary);
+        font: var(--leo-font-default-regular);
+    }
+}
diff --git a/components/ai_chat/resources/page/components/header/index.tsx b/components/ai_chat/resources/page/components/header/index.tsx
index c2acf2e09373..00823f20dec7 100644
--- a/components/ai_chat/resources/page/components/header/index.tsx
+++ b/components/ai_chat/resources/page/components/header/index.tsx
@@ -11,7 +11,7 @@ import getAPI from '../../api'
 import FeatureButtonMenu, { Props as FeatureButtonMenuProps } from '../feature_button_menu'
 import styles from './style.module.scss'
 import { useAIChat, useIsSmall } from '../../state/ai_chat_context'
-import { useConversation } from '../../state/conversation_context'
+import { useConversation, useSupportsAttachments } from '../../state/conversation_context'
 import { getLocale } from '$web-common/locale'
 import { tabAssociatedChatId, useActiveChat } from '../../state/active_chat_context'
 
@@ -42,6 +42,8 @@ export const ConversationHeader = React.forwardRef(function (props: FeatureButto
   const activeConversation = aiChatContext.visibleConversations.find(c => c.uuid === conversationContext.conversationUuid)
   const showTitle = (!isTabAssociated || aiChatContext.isStandalone) && !isMobile
   const canShowFullScreenButton = aiChatContext.isHistoryFeatureEnabled && !isMobile && !aiChatContext.isStandalone && conversationContext.conversationUuid
+  const supportsAttachments = useSupportsAttachments()
+
   return (
     <div className={styles.header} ref={ref}>
       {showTitle ? (
@@ -97,6 +99,15 @@ export const ConversationHeader = React.forwardRef(function (props: FeatureButto
               >
                 <Icon name='expand' />
               </Button>}
+            {supportsAttachments && <Button
+              fab
+              kind={conversationContext.showAttachments ? 'plain' : 'plain-faint'}
+              aria-label={getLocale('attachmentsTitle')}
+              title={getLocale('attachmentsTitle')}
+              onClick={() => conversationContext.setShowAttachments(!conversationContext.showAttachments)}
+            >
+              <Icon name='attachment' />
+            </Button>}
             <FeatureButtonMenu {...props} />
             {!aiChatContext.isStandalone &&
               <Button
diff --git a/components/ai_chat/resources/page/components/main/index.tsx b/components/ai_chat/resources/page/components/main/index.tsx
index 5dc19180ecdb..578abc985950 100644
--- a/components/ai_chat/resources/page/components/main/index.tsx
+++ b/components/ai_chat/resources/page/components/main/index.tsx
@@ -10,7 +10,7 @@ import Icon from '@brave/leo/react/icon'
 import { getLocale } from '$web-common/locale'
 import classnames from '$web-common/classnames'
 import * as Mojom from '../../../common/mojom'
-import { useConversation } from '../../state/conversation_context'
+import { useConversation, useSupportsAttachments } from '../../state/conversation_context'
 import { useAIChat } from '../../state/ai_chat_context'
 import { isLeoModel } from '../../model_utils'
 import ErrorConnection from '../alerts/error_connection'
@@ -33,6 +33,7 @@ import { GenerateSuggestionsButton, SuggestedQuestion } from '../suggested_quest
 import ToolsButtonMenu from '../tools_button_menu'
 import WelcomeGuide from '../welcome_guide'
 import styles from './style.module.scss'
+import Attachments from '../attachments'
 
 // Amount of pixels user has to scroll up to break out of
 // automatic scroll to bottom when new response lines are generated.
@@ -81,6 +82,8 @@ function Main() {
       isLastTurnBraveSearchSERPSummary) &&
     conversationContext.associatedContentInfo?.isContentAssociationPossible
 
+  const showAttachments = useSupportsAttachments() && conversationContext.showAttachments
+
   let currentErrorElement = null
 
   const headerElement = React.useRef<HTMLDivElement>(null)
@@ -119,7 +122,7 @@ function Main() {
       const el = e.currentTarget
       const idealScrollFromBottom = (el.scrollHeight -
         (scrollAnchor.current.offsetTop +
-        scrollAnchor.current.offsetHeight)
+          scrollAnchor.current.offsetHeight)
       )
       const scrollBottom = el.scrollHeight - (el.clientHeight + el.scrollTop)
       scrollIsAtBottom.current = scrollBottom <= (idealScrollFromBottom + SCROLL_BOTTOM_THRESHOLD)
@@ -129,7 +132,7 @@ function Main() {
 
   const handleConversationEntriesHeightChanged = () => {
     if (!conversationContext.isGenerating || !scrollElement.current ||
-        !scrollIsAtBottom.current || !scrollAnchor.current) {
+      !scrollIsAtBottom.current || !scrollAnchor.current) {
       return
     }
     scrollElement.current.scrollTop = (
@@ -200,20 +203,20 @@ function Main() {
       {isConversationListOpen && !aiChatContext.isStandalone && (
         <div className={styles.conversationsList}>
           <div
-        className={classnames({
-          [styles.conversationsListHeader]: true,
-        })}
-      >
-        <Button
-          kind='plain-faint'
-          fab
-          onClick={() => {
-            setIsConversationsListOpen?.(false)
-          }}
-        >
-          <Icon name='arrow-left' />
-        </Button>
-      </div>
+            className={classnames({
+              [styles.conversationsListHeader]: true,
+            })}
+          >
+            <Button
+              kind='plain-faint'
+              fab
+              onClick={() => {
+                setIsConversationsListOpen?.(false)
+              }}
+            >
+              <Icon name='arrow-left' />
+            </Button>
+          </div>
           <ConversationsList
             setIsConversationsListOpen={setIsConversationsListOpen}
           />
@@ -223,126 +226,131 @@ function Main() {
       <ConversationHeader ref={headerElement}
         setIsConversationsListOpen={setIsConversationsListOpen}
       />
-      <div className={classnames({
-        [styles.scroller]: true,
-        [styles.flushBottom]: !aiChatContext.hasAcceptedAgreement
-      })}
-        ref={scrollElement}
-        onScroll={handleScroll}
-      >
-        <AlertCenter position='top-left' className={styles.alertCenter} />
-        <div
-          className={classnames({
-            [styles.conversationContent]: true,
-            [styles.showContent]: showContent
-          })}
-          ref={conversationContentElement}
+      <div className={styles.mainContent}>
+        <div className={classnames({
+          [styles.scroller]: true,
+          [styles.flushBottom]: !aiChatContext.hasAcceptedAgreement
+        })}
+          ref={scrollElement}
+          onScroll={handleScroll}
         >
-          {aiChatContext.hasAcceptedAgreement && (
-            <>
-              <ModelIntro />
+          <AlertCenter position='top-left' className={styles.alertCenter} />
+          <div
+            className={classnames({
+              [styles.conversationContent]: true,
+              [styles.showContent]: showContent
+            })}
+            ref={conversationContentElement}
+          >
+            {aiChatContext.hasAcceptedAgreement && (
+              <>
+                <ModelIntro />
+
+                {conversationContext.associatedContentInfo?.isContentAssociationPossible && conversationContext.shouldSendPageContents && (
+                  <div className={styles.siteTitleContainer}>
+                    <SiteTitle size='default' />
+                  </div>
+                )}
 
-              {conversationContext.associatedContentInfo?.isContentAssociationPossible && conversationContext.shouldSendPageContents && (
-                <div className={styles.siteTitleContainer}>
-                  <SiteTitle size='default' />
+                <div ref={scrollAnchor}>
+                  {!!conversationContext.conversationUuid &&
+                    <aiChatContext.conversationEntriesComponent
+                      onIsContentReady={setIsContentReady}
+                      onHeightChanged={handleConversationEntriesHeightChanged}
+                    />
+                  }
                 </div>
-              )}
 
-              <div ref={scrollAnchor}>
-              {!!conversationContext.conversationUuid &&
-                <aiChatContext.conversationEntriesComponent
-                  onIsContentReady={setIsContentReady}
-                  onHeightChanged={handleConversationEntriesHeightChanged}
-                />
+                {conversationContext.isFeedbackFormVisible &&
+                  <div className={classnames([styles.promptContainer, styles.feedbackForm])}>
+                    <FeedbackForm />
+                  </div>
                 }
-              </div>
-
-              {conversationContext.isFeedbackFormVisible &&
-                <div className={classnames([styles.promptContainer, styles.feedbackForm])}>
-                  <FeedbackForm />
-                </div>
-              }
 
-              {showSuggestions && (
-              <div className={styles.suggestionsContainer}>
-                <div className={styles.questionsList}>
-                  {conversationContext.suggestedQuestions.map((question, i) => <SuggestedQuestion key={question} question={question} />)}
-                  {SUGGESTION_STATUS_SHOW_BUTTON.has(
-                    conversationContext.suggestionStatus
-                  ) && conversationContext.shouldSendPageContents && (
-                      <GenerateSuggestionsButton />
-                    )}
-                </div>
+                {showSuggestions && (
+                  <div className={styles.suggestionsContainer}>
+                    <div className={styles.questionsList}>
+                      {conversationContext.suggestedQuestions.map((question, i) => <SuggestedQuestion key={question} question={question} />)}
+                      {SUGGESTION_STATUS_SHOW_BUTTON.has(
+                        conversationContext.suggestionStatus
+                      ) && conversationContext.shouldSendPageContents && (
+                          <GenerateSuggestionsButton />
+                        )}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+            {currentErrorElement && (
+              <div className={styles.promptContainer}>{currentErrorElement}</div>
+            )}
+            {shouldShowStorageNotice && (
+              <div className={styles.promptContainer}>
+                <NoticeConversationStorage />
               </div>
             )}
-            </>
-          )}
-          {currentErrorElement && (
-            <div className={styles.promptContainer}>{currentErrorElement}</div>
-          )}
-          {shouldShowStorageNotice && (
-            <div className={styles.promptContainer}>
-              <NoticeConversationStorage />
-            </div>
-          )}
-          {shouldShowPremiumSuggestionForModel && (
-            <div className={styles.promptContainer}>
-              <PremiumSuggestion
-                title={getLocale('unlockPremiumTitle')}
-                secondaryActionButton={
-                  <Button
-                    kind='plain-faint'
-                    onClick={() => conversationContext.switchToBasicModel()}
-                  >
-                    {getLocale('switchToBasicModelButtonLabel')}
-                  </Button>
-                }
-              />
-            </div>
-          )}
-          {shouldShowPremiumSuggestionStandalone && (
-            <div className={styles.promptContainer}>
-              <PremiumSuggestion
-                title={getLocale('unlockPremiumTitle')}
-                secondaryActionButton={
-                  <Button
-                    kind='plain-faint'
-                    onClick={() => aiChatContext.dismissPremiumPrompt()}
-                  >
-                    {getLocale('dismissButtonLabel')}
-                  </Button>
-                }
-              />
-            </div>
-          )}
-          {aiChatContext.isPremiumUserDisconnected && (!conversationContext.currentModel || isLeoModel(conversationContext.currentModel)) && (
-            <div className={styles.promptContainer}>
-              <WarningPremiumDisconnected />
-            </div>
-          )}
-          {conversationContext.shouldShowLongConversationInfo && (
-            <div className={styles.promptContainer}>
-              <LongConversationInfo />
+            {shouldShowPremiumSuggestionForModel && (
+              <div className={styles.promptContainer}>
+                <PremiumSuggestion
+                  title={getLocale('unlockPremiumTitle')}
+                  secondaryActionButton={
+                    <Button
+                      kind='plain-faint'
+                      onClick={() => conversationContext.switchToBasicModel()}
+                    >
+                      {getLocale('switchToBasicModelButtonLabel')}
+                    </Button>
+                  }
+                />
+              </div>
+            )}
+            {shouldShowPremiumSuggestionStandalone && (
+              <div className={styles.promptContainer}>
+                <PremiumSuggestion
+                  title={getLocale('unlockPremiumTitle')}
+                  secondaryActionButton={
+                    <Button
+                      kind='plain-faint'
+                      onClick={() => aiChatContext.dismissPremiumPrompt()}
+                    >
+                      {getLocale('dismissButtonLabel')}
+                    </Button>
+                  }
+                />
+              </div>
+            )}
+            {aiChatContext.isPremiumUserDisconnected && (!conversationContext.currentModel || isLeoModel(conversationContext.currentModel)) && (
+              <div className={styles.promptContainer}>
+                <WarningPremiumDisconnected />
+              </div>
+            )}
+            {conversationContext.shouldShowLongConversationInfo && (
+              <div className={styles.promptContainer}>
+                <LongConversationInfo />
+              </div>
+            )}
+            {!aiChatContext.hasAcceptedAgreement && !conversationContext.conversationHistory.length && (
+              <WelcomeGuide />
+            )}
+          </div>
+        </div>
+        {showAttachments && <div className={styles.attachmentsContainer}>
+          <Attachments />
+        </div>}
+        <div className={styles.input}>
+          {showContextToggle && (
+            <div className={styles.toggleContainer}>
+              <PageContextToggle />
             </div>
           )}
-          {!aiChatContext.hasAcceptedAgreement && !conversationContext.conversationHistory.length && (
-            <WelcomeGuide />
-          )}
+          <ToolsButtonMenu {...conversationContext}>
+            <InputBox
+              context={{ ...conversationContext, ...aiChatContext }}
+              onFocusInputMobile={handleOnFocusInputMobile}
+            />
+          </ToolsButtonMenu>
         </div>
       </div>
-      <div className={styles.input}>
-        {showContextToggle && (
-          <div className={styles.toggleContainer}>
-            <PageContextToggle />
-          </div>
-        )}
-        <ToolsButtonMenu {...conversationContext}>
-          <InputBox
-            context={{ ...conversationContext, ...aiChatContext }}
-            onFocusInputMobile={handleOnFocusInputMobile}
-          />
-        </ToolsButtonMenu>
-      </div>
     </main>
   )
 }
diff --git a/components/ai_chat/resources/page/components/main/style.module.scss b/components/ai_chat/resources/page/components/main/style.module.scss
index e5d121533923..56dfe84b79c7 100644
--- a/components/ai_chat/resources/page/components/main/style.module.scss
+++ b/components/ai_chat/resources/page/components/main/style.module.scss
@@ -30,6 +30,27 @@
   margin-top: var(--conversation-content-margin);
 }
 
+.mainContent {
+  &:has(.attachmentsContainer) {
+    display: grid;
+    grid-template-columns: 1fr 400px;
+    grid-template-rows: auto min-content;
+    gap: var(--leo-spacing-m);
+
+    height: 100%;
+    width: 100%;
+  }
+
+  display: contents;
+}
+
+.attachmentsContainer {
+  margin: var(--leo-spacing-m);
+  align-self: start;
+  position: sticky;
+  top: 0;
+}
+
 .scroller {
   position: relative;
   --scrollbar-width: 6px;
diff --git a/components/ai_chat/resources/page/state/ai_chat_context.tsx b/components/ai_chat/resources/page/state/ai_chat_context.tsx
index 05404df1965e..646fe64d8f16 100644
--- a/components/ai_chat/resources/page/state/ai_chat_context.tsx
+++ b/components/ai_chat/resources/page/state/ai_chat_context.tsx
@@ -89,7 +89,7 @@ export function AIChatContextProvider(props: React.PropsWithChildren<AIChatConte
     setEditingConversationId,
     showSidebar,
     toggleSidebar: () => setShowSidebar(s => !s),
-    conversationEntriesComponent: props.conversationEntriesComponent
+    conversationEntriesComponent: props.conversationEntriesComponent,
   }
 
   return (
diff --git a/components/ai_chat/resources/page/state/conversation_context.tsx b/components/ai_chat/resources/page/state/conversation_context.tsx
index 4c290c43c87c..ebf7b07458de 100644
--- a/components/ai_chat/resources/page/state/conversation_context.tsx
+++ b/components/ai_chat/resources/page/state/conversation_context.tsx
@@ -59,6 +59,9 @@ export type ConversationContext = SendFeedbackState & CharCountContext & {
   setIsToolsMenuOpen: (isOpen: boolean) => void
   handleVoiceRecognition?: () => void
   conversationHandler?: Mojom.ConversationHandlerRemote
+
+  showAttachments: boolean
+  setShowAttachments: (show: boolean) => void
 }
 
 export const defaultCharCountContext: CharCountContext = {
@@ -96,6 +99,8 @@ const defaultContext: ConversationContext = {
   resetSelectedActionType: () => { },
   handleActionTypeClick: () => { },
   setIsToolsMenuOpen: () => { },
+  showAttachments: false,
+  setShowAttachments: () => { },
   ...defaultSendFeedbackState,
   ...defaultCharCountContext
 }
@@ -153,7 +158,15 @@ export const ConversationReactContext =
 
 export function ConversationContextProvider(props: React.PropsWithChildren) {
   const [context, setContext] =
-    React.useState<ConversationContext>(defaultContext)
+    React.useState<ConversationContext>({
+      ...defaultContext,
+      setShowAttachments: (showAttachments: boolean) => {
+        setContext((value) => ({
+          ...value,
+          showAttachments
+        }))
+      }
+    })
 
   const aiChatContext = useAIChat()
   const { conversationHandler, callbackRouter, selectedConversationId, updateSelectedConversationId } = useActiveChat()
@@ -171,6 +184,10 @@ export function ConversationContextProvider(props: React.PropsWithChildren) {
     }))
   }
 
+  React.useEffect(() => {
+    context.setShowAttachments(!!aiChatContext.isStandalone && !aiChatContext.visibleConversations.some(c => c.uuid === context.conversationUuid))
+  }, [context.conversationUuid])
+
   const getModelContext = (
     currentModelKey: string,
     allModels: Mojom.Model[]
@@ -522,3 +539,10 @@ export function ConversationContextProvider(props: React.PropsWithChildren) {
 export function useConversation() {
   return React.useContext(ConversationReactContext)
 }
+
+export function useSupportsAttachments() {
+  const aiChatContext = useAIChat()
+  const conversationContext = useConversation()
+  return aiChatContext.isStandalone
+    && !aiChatContext.visibleConversations.find(c => c.uuid === conversationContext.conversationUuid)
+}
diff --git a/components/resources/ai_chat_ui_strings.grdp b/components/resources/ai_chat_ui_strings.grdp
index 7c7b4ec9e87c..dd915b8caa9d 100644
--- a/components/resources/ai_chat_ui_strings.grdp
+++ b/components/resources/ai_chat_ui_strings.grdp
@@ -279,6 +279,15 @@
   <message name="IDS_CHAT_UI_CLOSE_NOTICE" desc="Label for button which closes a notice">
     Close this notice
   </message>
+  <message name="IDS_CHAT_UI_ATTACHMENTS_TITLE" desc="Title for the attachments section">
+    Attachments
+  </message>
+  <message name="IDS_CHAT_UI_ATTACHMENTS_DESCRIPTION" desc="Description for the attachments section">
+    Add your browser tabs to give Leo more context for the conversation
+  </message>
+  <message name="IDS_CHAT_UI_ATTACHMENTS_BROWSER_TABS_TITLE" desc="Title for the browser tabs section">
+    Browser tabs
+  </message>
   <message name="IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_BODY" desc="Main text for the notice about conversation history">
     Leo will now remember your conversations so you can go back to them. They are stored encrypted on your device, and you can delete them any time.
   </message>
diff --git a/ui/webui/resources/BUILD.gn b/ui/webui/resources/BUILD.gn
index 3caa87bbaaf8..e815f3b176af 100644
--- a/ui/webui/resources/BUILD.gn
+++ b/ui/webui/resources/BUILD.gn
@@ -138,6 +138,7 @@ leo_icons_base_path = "../../../node_modules/@brave/leo/icons"
 # your needs here: https://leo.bravesoftware.com/?path=/story/icon--all-icons
 leo_icons = [
   "activity.svg",
+  "attachment.svg",
   "appearance.svg",
   "arrow-diagonal-down-right.svg",
   "arrow-diagonal-up-right.svg",