Skip to content

Commit

Permalink
Merge pull request #170 from l3vels/fix/AgentView
Browse files Browse the repository at this point in the history
Fix/agent view
  • Loading branch information
okradze authored Sep 26, 2023
2 parents bd166c9 + abdef37 commit c68bfa4
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
})
}
Expand Down
8 changes: 6 additions & 2 deletions apps/ui/src/modals/AgentViewModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,21 @@ 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
}
}

const AgentViewModal = ({ data }: AgentViewModalProps) => {
const { closeModal } = useModal()

const { agent } = data
const { id, agent } = data

const { data: agentById } = useDiscoverAgentByIdService({ id: id })

return (
<>
Expand All @@ -29,7 +33,7 @@ const AgentViewModal = ({ data }: AgentViewModalProps) => {
hideCloseButton
>
<StyledModalBody>
<AgentView agentData={agent} />
<AgentView agentData={agentById || agent} />
</StyledModalBody>

<StyledButtonWrapper>
Expand Down
53 changes: 51 additions & 2 deletions apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
)
})}
Expand All @@ -115,14 +141,24 @@ const StyledAgentsWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
gap: 6px;
`
const StyledAgent = styled.div`
display: flex;
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; */
Expand All @@ -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;
`

0 comments on commit c68bfa4

Please sign in to comment.