From 7857627e15997455fd8b5437eb75a37b7aa96414 Mon Sep 17 00:00:00 2001
From: levanion <levanion1998@gmail.com>
Date: Tue, 26 Sep 2023 11:48:39 +0400
Subject: [PATCH 1/2] fix: Agent view modal from ChatMembers

---
 .../components/ChatMembers/ChatMembers.tsx          | 13 +------------
 apps/ui/src/modals/AgentViewModal.tsx               |  8 ++++++--
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx
index c26fbc662..d081e21da 100644
--- a/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx
+++ b/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx
@@ -160,18 +160,7 @@ const ChatMembers = ({
                               openModal({
                                 name: 'agent-view-modal',
                                 data: {
-                                  agent: {
-                                    agent: agentData.agent,
-                                    configs: {
-                                      tools: [],
-                                      goals: [],
-                                      constraints: [],
-                                      instructions: [],
-                                      datasources: [],
-                                      suggestions: [],
-                                      greeting: [],
-                                    },
-                                  },
+                                  id: agentData.agent.id,
                                 },
                               })
                             }
diff --git a/apps/ui/src/modals/AgentViewModal.tsx b/apps/ui/src/modals/AgentViewModal.tsx
index 0f281cf0a..b9d3651df 100644
--- a/apps/ui/src/modals/AgentViewModal.tsx
+++ b/apps/ui/src/modals/AgentViewModal.tsx
@@ -8,9 +8,11 @@ import AgentView from 'pages/Agents/AgentView'
 import IconButton from '@l3-lib/ui-core/dist/IconButton'
 
 import Close from '@l3-lib/ui-core/dist/icons/Close'
+import { useDiscoverAgentByIdService } from 'services/discover/useDiscoverAgentById'
 
 type AgentViewModalProps = {
   data: {
+    id: string
     agent: any
   }
 }
@@ -18,7 +20,9 @@ type AgentViewModalProps = {
 const AgentViewModal = ({ data }: AgentViewModalProps) => {
   const { closeModal } = useModal()
 
-  const { agent } = data
+  const { id, agent } = data
+
+  const { data: agentById } = useDiscoverAgentByIdService({ id: id })
 
   return (
     <>
@@ -29,7 +33,7 @@ const AgentViewModal = ({ data }: AgentViewModalProps) => {
         hideCloseButton
       >
         <StyledModalBody>
-          <AgentView agentData={agent} />
+          <AgentView agentData={agentById || agent} />
         </StyledModalBody>
 
         <StyledButtonWrapper>

From abdef37c2597b293d562d11784c9f34525d9af39 Mon Sep 17 00:00:00 2001
From: levanion <levanion1998@gmail.com>
Date: Tue, 26 Sep 2023 12:02:31 +0400
Subject: [PATCH 2/2] feat: AgentView on TeamView

---
 .../pages/TeamOfAgents/TeamOfAgentView.tsx    | 53 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx b/apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx
index 624c96096..af553c10f 100644
--- a/apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx
+++ b/apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx
@@ -18,15 +18,21 @@ import styled from 'styled-components'
 
 import Typography from '@l3-lib/ui-core/dist/Typography'
 import Tags from '@l3-lib/ui-core/dist/Tags'
+import IconButton from '@l3-lib/ui-core/dist/IconButton'
+
+import EyeOpen from '@l3-lib/ui-core/dist/icons/EyeOpen'
 
 import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
 
 import TeamOfAgentsDetailsBox from './components/TeamOfAgentsDetailsBox'
+import { useModal } from 'hooks'
 
 const TeamOfAgentView = ({ teamOfAgentsData }: { teamOfAgentsData?: any }) => {
   const { teamId } = useParams()
   const { data } = useTeamOfAgentsByIdService({ id: teamId })
 
+  const { openModal } = useModal()
+
   if (!data && !teamOfAgentsData) return <div />
 
   const { team_agents } = data || teamOfAgentsData
@@ -89,7 +95,27 @@ const TeamOfAgentView = ({ teamOfAgentsData }: { teamOfAgentsData?: any }) => {
                       />
                     </StyledMainTextWrapper>
 
-                    <Tags label={role} readOnly size='small' outlined />
+                    <StyledSecondInfoWrapper>
+                      <IconButton
+                        onClick={() =>
+                          openModal({
+                            name: 'agent-view-modal',
+                            data: {
+                              id: agent.id,
+                            },
+                          })
+                        }
+                        icon={() => (
+                          <StyledIconWrapper className='hiddenButton'>
+                            <EyeOpen size={50} />
+                          </StyledIconWrapper>
+                        )}
+                        size={IconButton.sizes.SMALL}
+                        kind={IconButton.kinds.TERTIARY}
+                        // ariaLabel='View'
+                      />
+                      <Tags label={role} readOnly size='small' outlined />
+                    </StyledSecondInfoWrapper>
                   </StyledAgent>
                 )
               })}
@@ -115,7 +141,7 @@ const StyledAgentsWrapper = styled.div`
 
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 6px;
 `
 const StyledAgent = styled.div`
   display: flex;
@@ -123,6 +149,16 @@ const StyledAgent = styled.div`
   align-items: center;
 
   gap: 6px;
+
+  padding: 5px 10px;
+  border-radius: 8px;
+  :hover {
+    background: rgba(0, 0, 0, 0.1);
+
+    .hiddenButton {
+      opacity: 1;
+    }
+  }
 `
 const StyledMainTextWrapper = styled.div`
   /* text-align: center; */
@@ -134,3 +170,16 @@ const StyledMainTextWrapper = styled.div`
   /* width: 100%; */
   /* max-width: 400px; */
 `
+const StyledSecondInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  gap: 5px;
+`
+
+const StyledIconWrapper = styled.div`
+  /* color: #000; */
+  color: transparent;
+
+  opacity: 0;
+`