From 5fe69218ea56a49334ac925e4be7c34c997da4dd Mon Sep 17 00:00:00 2001
From: Pete Miller <miller.pete@gmail.com>
Date: Mon, 18 Nov 2024 16:05:17 -0800
Subject: [PATCH] AI Chat: fix action menu (#26555)

Resolves brave/brave-browser#41635
Resolves brave/brave-browser#42279
---
 .../resources/page/state/conversation_context.tsx     | 11 +++--------
 components/ai_rewriter/resources/page/Context.tsx     | 10 ++++++++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/components/ai_chat/resources/page/state/conversation_context.tsx b/components/ai_chat/resources/page/state/conversation_context.tsx
index 35a364b57887..0e2a43373244 100644
--- a/components/ai_chat/resources/page/state/conversation_context.tsx
+++ b/components/ai_chat/resources/page/state/conversation_context.tsx
@@ -4,13 +4,11 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-
 import * as mojom from 'gen/brave/components/ai_chat/core/common/mojom/ai_chat.mojom.m.js'
-import usePromise from '$web-common/usePromise'
 import * as API from '../api/'
-import { useAIChat } from './ai_chat_context'
 import { isLeoModel } from '../model_utils'
 import { loadTimeData } from '$web-common/loadTimeData'
+import { useAIChat } from './ai_chat_context'
 
 const MAX_INPUT_CHAR = 2000
 const CHAR_LIMIT_THRESHOLD = MAX_INPUT_CHAR * 0.8
@@ -126,10 +124,8 @@ export const getFirstValidAction = (actionList: mojom.ActionGroup[]) =>
 
 export function useActionMenu(
   filter: string,
-  getActions: () => Promise<mojom.ActionGroup[]>
+  actionList: mojom.ActionGroup[]
 ) {
-  const { result: actionList = [] } = usePromise(getActions, [])
-
   return React.useMemo(() => {
     const reg = new RegExp(/^\/\w+/)
 
@@ -309,8 +305,7 @@ export function ConversationContextProvider(
       })
   }, [context.conversationUuid, context.faviconCacheKey])
 
-  const actionList = useActionMenu(context.inputText, () =>
-    Promise.resolve(aiChatContext.allActions)
+  const actionList = useActionMenu(context.inputText, aiChatContext.allActions
   )
 
   const shouldShowLongConversationInfo = React.useMemo(() => {
diff --git a/components/ai_rewriter/resources/page/Context.tsx b/components/ai_rewriter/resources/page/Context.tsx
index 5ab6e31d0442..a36fc792826b 100644
--- a/components/ai_rewriter/resources/page/Context.tsx
+++ b/components/ai_rewriter/resources/page/Context.tsx
@@ -111,15 +111,21 @@ export default function Context(props: React.PropsWithChildren) {
   const [forwardHistory, setForwardHistory] = React.useState<string[]>([])
   const [backHistory, setBackHistory] = React.useState<string[]>([])
   const [isGenerating, setIsGenerating] = React.useState(false)
+  const [allActions, setAllActions] = React.useState<ActionGroup[]>([])
 
-  const actionList = useActionMenu(instructionsText, () => getRewriterPageHandler().getActionMenuList().then(({ actionList }) => actionList))
+  const actionList = useActionMenu(instructionsText, allActions)
   const charCountContext = useCharCountInfo(instructionsText)
 
   React.useEffect(() => {
-    getRewriterPageHandler()
+    const rewriterAPI = getRewriterPageHandler()
+    rewriterAPI
       .getInitialText()
       .then(({ initialText }) => setInitialText(initialText))
 
+    rewriterAPI
+      .getActionMenuList()
+      .then(({ actionList }) => setAllActions(actionList))
+
     const callbackRouter = getCallbackRouter()
     callbackRouter.onUpdatedGeneratedText.addListener(setGeneratedText)
     return () => {