Feat: Receive reply messages of different event types from the agent #3221 (#8100)

### What problem does this PR solve?
Feat: Receive reply messages of different event types from the agent
#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/chat/chat-sheet.tsx

@@ -1,25 +1,22 @@
 import {
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetHeader,
   SheetTitle,
-  SheetTrigger,
 } from '@/components/ui/sheet';
 import { IModalProps } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
+import AgentChatBox from './box';
 
-export function ChatSheet({ visible }: IModalProps<any>) {
+export function ChatSheet({ visible, hideModal }: IModalProps<any>) {
   return (
-    <Sheet open={visible} modal={false}>
-      <SheetTrigger>Open</SheetTrigger>
-      <SheetContent>
+    <Sheet open={visible} modal={false} onOpenChange={hideModal}>
+      <SheetTitle className="hidden"></SheetTitle>
+      <SheetContent className={cn('top-20 p-0')}>
         <SheetHeader>
           <SheetTitle>Are you absolutely sure?</SheetTitle>
-          <SheetDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </SheetDescription>
         </SheetHeader>
+        <AgentChatBox></AgentChatBox>
       </SheetContent>
     </Sheet>
   );