From 57ad0894ab0730f731daa7f0f440a0af2ee9ffed Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 12 Jun 2025 14:35:34 +0700
Subject: [PATCH] fix: cleanup console error and warning render FE (#5253)

* fix: console error render FE

* chore: cleanup error and warning console
---
 web-app/src/components/ui/dialog.tsx              |  5 ++++-
 web-app/src/containers/ChatInput.tsx              | 14 ++++++++++----
 web-app/src/containers/DropdownToolsAvailable.tsx | 11 +++++++++--
 web-app/src/containers/ThreadContent.tsx          |  2 +-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/web-app/src/components/ui/dialog.tsx b/web-app/src/components/ui/dialog.tsx
index 9fa6d9158..632150029 100644
--- a/web-app/src/components/ui/dialog.tsx
+++ b/web-app/src/components/ui/dialog.tsx
@@ -47,13 +47,15 @@ function DialogOverlay({
 type DialogContentProps = React.ComponentProps<
   typeof DialogPrimitive.Content
 > & {
-  showCloseButton?: boolean
+  'showCloseButton'?: boolean
+  'aria-describedby'?: string | undefined
 }
 
 function DialogContent({
   showCloseButton = true,
   className,
   children,
+  'aria-describedby': ariaDescribedBy,
   ...props
 }: DialogContentProps) {
   return (
@@ -61,6 +63,7 @@ function DialogContent({
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        aria-describedby={ariaDescribedBy}
         className={cn(
           'bg-main-view max-h-[calc(100%-48px)] overflow-auto border-main-view-fg/10 text-main-view-fg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           className
diff --git a/web-app/src/containers/ChatInput.tsx b/web-app/src/containers/ChatInput.tsx
index 4f858f94f..af5da384c 100644
--- a/web-app/src/containers/ChatInput.tsx
+++ b/web-app/src/containers/ChatInput.tsx
@@ -142,6 +142,12 @@ const ChatInput = ({
     }
   }, [])
 
+  useEffect(() => {
+    if (tooltipToolsAvailable && dropdownToolsAvailable) {
+      setTooltipToolsAvailable(false)
+    }
+  }, [dropdownToolsAvailable, tooltipToolsAvailable])
+
   // Focus when thread changes
   useEffect(() => {
     if (textareaRef.current) {
@@ -479,12 +485,12 @@ const ChatInput = ({
                           >
                             <DropdownToolsAvailable
                               initialMessage={initialMessage}
+                              onOpenChange={(isOpen) => {
+                                setDropdownToolsAvailable(isOpen)
+                                setTooltipToolsAvailable(false)
+                              }}
                             >
                               {(isOpen, toolsCount) => {
-                                setDropdownToolsAvailable(isOpen)
-                                if (tooltipToolsAvailable && isOpen) {
-                                  setTooltipToolsAvailable(false)
-                                }
                                 return (
                                   <div
                                     className={cn(
diff --git a/web-app/src/containers/DropdownToolsAvailable.tsx b/web-app/src/containers/DropdownToolsAvailable.tsx
index d9964a188..7a7602d44 100644
--- a/web-app/src/containers/DropdownToolsAvailable.tsx
+++ b/web-app/src/containers/DropdownToolsAvailable.tsx
@@ -18,14 +18,21 @@ import { useAppState } from '@/hooks/useAppState'
 interface DropdownToolsAvailableProps {
   children: (isOpen: boolean, toolsCount: number) => React.ReactNode
   initialMessage?: boolean
+  onOpenChange?: (isOpen: boolean) => void
 }
 
 export default function DropdownToolsAvailable({
   children,
   initialMessage = false,
+  onOpenChange,
 }: DropdownToolsAvailableProps) {
   const { tools } = useAppState()
   const [isOpen, setIsOpen] = useState(false)
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open)
+    onOpenChange?.(open)
+  }
   const { getCurrentThread } = useThreads()
   const {
     isToolDisabled,
@@ -86,7 +93,7 @@ export default function DropdownToolsAvailable({
 
   if (tools.length === 0) {
     return (
-      <DropdownMenu onOpenChange={setIsOpen}>
+      <DropdownMenu onOpenChange={handleOpenChange}>
         <DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="max-w-64">
           <DropdownMenuItem disabled>No tools available</DropdownMenuItem>
@@ -96,7 +103,7 @@ export default function DropdownToolsAvailable({
   }
 
   return (
-    <DropdownMenu onOpenChange={setIsOpen}>
+    <DropdownMenu onOpenChange={handleOpenChange}>
       <DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger>
 
       <DropdownMenuContent
diff --git a/web-app/src/containers/ThreadContent.tsx b/web-app/src/containers/ThreadContent.tsx
index a3ab330d1..1969c4ff6 100644
--- a/web-app/src/containers/ThreadContent.tsx
+++ b/web-app/src/containers/ThreadContent.tsx
@@ -184,7 +184,7 @@ export const ThreadContent = memo(
       | undefined
 
     return (
-      <Fragment>
+      <Fragment key={item.id}>
         {item.content?.[0]?.text && item.role === 'user' && (
           <div className="w-full">
             <div className="flex justify-end w-full h-full text-start break-words whitespace-normal">