Merge pull request #381 from l3vels/fix/thread-issues

Fix/thread issues
l3vels · Dec 14, 2023 · ece5489 · ece5489
2 parents 2a70fda + 32fa296
commit ece5489
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 184 deletions.
diff --git a/apps/ui/src/components/ChatCards/AgentChatCard.tsx b/apps/ui/src/components/ChatCards/AgentChatCard.tsx
@@ -3,9 +3,6 @@ import MemberText from 'modals/AIChatModal/components/ChatMembers/components/Mem
 
 import IconButton from 'share-ui/components/IconButton/IconButton'
 
-import Edit from 'share-ui/components/Icon/Icons/components/Edit'
-import EyeOpen from 'share-ui/components/Icon/Icons/components/EyeOpen'
-
 import {
   StyledAgentWrapper,
   StyledIconButtonWrapper,
@@ -53,10 +50,15 @@ const AgentChatCard = ({
     }
   }
 
+  const agentType = agent?.agent_type === 'voice' ? 'Voice' : 'Text'
+  const agentRole = agent?.role?.length > 0 ? `· ${agent?.role}` : ''
+
+  const roleText = `${agentType} ${agentRole}`
+
   return (
     <StyledAgentWrapper onClick={onClick} picked={picked}>
       <AvatarGenerator name={agent?.name} size={30} avatar={agent.avatar} />
-      <MemberText name={agent?.name} role={agent?.role} />
+      <MemberText name={agent?.name} role={roleText} />
 
       <StyledIconButtonWrapper className='hiddenButton'>
         {onDeleteClick && (

diff --git a/apps/ui/src/components/Table/Table.tsx b/apps/ui/src/components/Table/Table.tsx
@@ -96,7 +96,7 @@ const Table = ({ columns, data, expand, pagination }: TableProps) => {
           ))}
         </StyledThead>
         <StyledTbody {...getTableBodyProps()}>
-          {currentItems.map((row: any, index: number) => {
+          {rows?.map((row: any, index: number) => {
             prepareRow(row)
             return (
               <StyledTr {...row.getRowProps()} key={index} bodyRow>
@@ -108,7 +108,7 @@ const Table = ({ columns, data, expand, pagination }: TableProps) => {
           })}
         </StyledTbody>
       </StyledTable>
-      {pagination && (
+      {/* {pagination && (
         <PaginationWrapper>
           <PageNumber onClick={handlePrevPage}>
             <StyledNavigationChevronLeft size={16} />
@@ -122,7 +122,7 @@ const Table = ({ columns, data, expand, pagination }: TableProps) => {
             <StyledNavigationChevronRight size={16} />
           </PageNumber>
         </PaginationWrapper>
-      )}
+      )} */}
     </StyledRoot>
   )
 }
@@ -142,11 +142,11 @@ const StyledRoot = styled.div`
   }
 
   border-radius: 24px;
-  max-height: calc(100vh - 330px);
+  max-height: calc(100vh - 250px);
 `
 
 const StyledTable = styled.table<{ expand?: boolean }>`
-  ${({ expand }) => (expand ? 'height: calc(100vh - 335px);' : 'height: auto;')}
+  ${({ expand }) => (expand ? 'height: calc(100vh - 250px);' : 'height: auto;')}
   min-height: 400px;
   width: 100%;
 

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import Tab from 'share-ui/components/Tabs/Tab/Tab'
 import TabList from 'share-ui/components/Tabs/TabList/TabList'
@@ -30,6 +30,8 @@ import TypographyPrimary from 'components/Typography/Primary'
 import Logs from 'share-ui/components/Icon/Icons/components/Logs'
 import Typography from 'share-ui/components/typography/Typography'
 
+import TypographySecondary from 'components/Typography/Secondary'
+
 const ChatMembers = ({
   agentById,
   teamOfAgents,
@@ -52,6 +54,8 @@ const ChatMembers = ({
 
   const { openModal } = useModal()
 
+  const theme = useTheme()
+
   if (agentById) {
     const isCreator = user?.id === agentById.agent?.created_by
 
@@ -73,12 +77,29 @@ const ChatMembers = ({
             <TabPanels noAnimation>
               <TabPanel>
                 <AgentViewDetailBox agentData={agentById} />
-                <div style={{ height: '200px', width: '100%' }}>
+                <StyledAudioContainer>
                   {voiceUrl && (
                     <>
-                      <StyledAudioPlayerWrapper>
+                      <>
                         <AudioPlayer audioUrl={voiceUrl} />
-                      </StyledAudioPlayerWrapper>
+                      </>
+
+                      <StyledStatusWrapper>
+                        {call?.status && (
+                          <>
+                            <TypographySecondary
+                              value={'Status: '}
+                              type={Typography.types.P}
+                              size={Typography.sizes.sm}
+                            />
+                            <TypographySecondary
+                              value={call?.status}
+                              type={Typography.types.P}
+                              size={Typography.sizes.sm}
+                            />
+                          </>
+                        )}
+                      </StyledStatusWrapper>
 
                       <StyledLogsButton
                         onClick={() =>
@@ -100,7 +121,7 @@ const ChatMembers = ({
                       </StyledLogsButton>
                     </>
                   )}
-                </div>
+                </StyledAudioContainer>
               </TabPanel>
 
               <TabPanel>
@@ -292,8 +313,20 @@ const StyledIconButtonWrapper = styled.div`
   align-items: center;
 `
 
-const StyledAudioPlayerWrapper = styled.div`
+const StyledAudioContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
   margin-top: 12px;
+  gap: 16px;
+`
+
+const StyledStatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  gap: 5px;
 `
 
 const StyledLogsIcon = styled(Logs)`
@@ -306,5 +339,6 @@ const StyledLogsButton = styled.button`
   display: flex;
   align-items: center;
   gap: 5px;
-  margin-top: 12px;
+
+  margin-top: -10px;
 `
diff --git a/apps/ui/src/pages/Agents/AgentView/components/AgentViewDetailBox.tsx b/apps/ui/src/pages/Agents/AgentView/components/AgentViewDetailBox.tsx
@@ -28,6 +28,7 @@ import { useGetAccountModule } from 'utils/useGetAccountModule'
 import { useModelsService } from 'services'
 import { AgentWithConfigs } from 'types'
 import MenuDotsOutline from 'share-ui/components/Icon/Icons/components/MenuDotsOutline'
+import CopyButton from 'components/CopyButton'
 
 type AgentViewDetailBoxProps = {
   agentData: AgentWithConfigs
@@ -152,6 +153,16 @@ const AgentVIewDetailBox = ({ agentData }: AgentViewDetailBoxProps) => {
       <StyledDivider />
 
       <StyledWrapper>
+        {agent && (
+          <TagsRow
+            title={t('ID')}
+            items={[agent?.id]}
+            customButton={
+              <CopyButton onCopyClick={() => navigator.clipboard.writeText(agent?.id)} />
+            }
+          />
+        )}
+
         {role && <TagsRow title={t('role')} items={[role]} />}
 
         {agentModel?.length > 0 && <TagsRow title={t('model')} items={agentModel} />}

diff --git a/apps/ui/src/pages/Agents/AgentView/components/TagsRow.tsx b/apps/ui/src/pages/Agents/AgentView/components/TagsRow.tsx
@@ -5,34 +5,40 @@ import Tags from 'share-ui/components/Tags/Tags'
 
 import TypographySecondary from 'components/Typography/Secondary'
 import { textSlicer } from 'utils/textSlicer'
+import CopyButton from 'components/CopyButton'
+import { ReactElement } from 'react'
 
 type TagsRowProps = {
   items: string[]
   title: string
+  customButton?: ReactElement
 }
 
-const TagsRow = ({ items, title }: TagsRowProps) => {
+const TagsRow = ({ items, title, customButton }: TagsRowProps) => {
   const theme = useTheme()
 
   return (
     <StyledRow>
       <TypographySecondary value={title} type={Typography.types.LABEL} size={Typography.sizes.sm} />
 
-      <StyledContainer>
-        {items.map((item: string, index: number) => {
-          const { shortText: shortName } = textSlicer(item, 35)
-          return (
-            <Tags
-              key={index}
-              label={item}
-              color={theme.body.tagColor}
-              readOnly
-              size={Tags.sizes?.SMALL}
-              outlined
-            />
-          )
-        })}
-      </StyledContainer>
+      <StyledWrapper>
+        <StyledContainer>
+          {items.map((item: string, index: number) => {
+            const { shortText: shortName } = textSlicer(item, 35)
+            return (
+              <Tags
+                key={index}
+                label={item}
+                color={theme.body.tagColor}
+                readOnly
+                size={Tags.sizes?.SMALL}
+                outlined
+              />
+            )
+          })}
+        </StyledContainer>
+        {customButton}
+      </StyledWrapper>
     </StyledRow>
   )
 }
@@ -49,3 +55,7 @@ const StyledContainer = styled.div`
   flex-wrap: wrap;
   gap: 10px;
 `
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`