Merge pull request #306 from DavitBakhutashvili/fix/session-page-issues

Fix/session page issues

apps/ui/src/Route.tsx

@@ -273,6 +273,12 @@ const Route = () => {
               key={document.location.href}
             >
               <Router index element={<Sessions />} key={document.location.href} />
+
+              <Router
+                path={':agentId/edit-agent'}
+                element={<EditAgentForm />}
+                key={document.location.href}
+              />
             </Router>
 
             <Router path={'schedules'} element={<MainRouteLayout />} key={document.location.href}>

apps/ui/src/components/DatePicker/DatePicker.tsx

@@ -1,11 +1,10 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import DatePicker from '@l3-lib/ui-core/dist/DatePicker'
-import Button from '@l3-lib/ui-core/dist/Button'
+
 import styled from 'styled-components'
 import outsideClick from 'helpers/outsideClick'
 import Calendar from '@l3-lib/ui-core/dist/icons/Calendar'
-import { ButtonSecondary } from 'components/Button/Button'
 
 const DatePickerField = ({ start_date, end_date, onChange, onApply, onClear }: any) => {
   const { t } = useTranslation()
@@ -17,10 +16,16 @@ const DatePickerField = ({ start_date, end_date, onChange, onApply, onClear }: a
     if (is_open) setIsOpen(false)
   })
 
+  const formattedStartDate = start_date ? start_date.format('MMM D, YYYY h:mm A') : ''
+  const formattedEndDate = end_date ? end_date.format('MMM D, YYYY h:mm A') : ''
+
+  const displayValue = start_date && end_date ? `${formattedStartDate} - ${formattedEndDate}` : ''
+  const placeholder = start_date && end_date ? 'Select date range...' : 'Start date → End date'
+
   return (
     <StyledContainer ref={ref}>
       <StyledSearchContainer>
-        <StyledSearchInput placeholder='mm/dd/yyyy' disabled />
+        <StyledSearchInput value={displayValue} placeholder={placeholder} disabled />
         <StyledCalendarIcon onClick={() => setIsOpen(true)} />
       </StyledSearchContainer>
       {/* <ButtonSecondary leftIcon={() => <Calendar />} onClick={() => setIsOpen(true)}>
@@ -66,9 +71,10 @@ const StyledSearchInput = styled.input`
   color: ${({ theme }) => theme.body.textColorSecondary} !important;
   background: ${({ theme }) => theme.body.toolkitCardBgColorSecondary} !important;
   border: ${({ theme }) => theme.body.sessionDropdownBorder} !important;
-  min-width: 300px;
+  min-width: 390px;
   height: 48px;
   border-radius: 8px;
+  padding-left: 15px;
   padding-right: 40px;
 `
 const StyledSearchContainer = styled.div`

apps/ui/src/components/Table/components/TableCell.tsx

@@ -93,11 +93,13 @@ const TableCell = ({ cell }: TableCellProps) => {
           <Editor {...cellEditorParams} value={cellValue} ref={multiselectEditorRef} />
         </StyledWrapper>
       ) : (
-        <TypographySecondary
-          value={cell.render('Cell')}
-          type={Typography.types.LABEL}
-          size={Typography.sizes.sm}
-        />
+        <StyledTypographyWrapper>
+          <TypographySecondary
+            value={cell.render('Cell')}
+            type={Typography.types.LABEL}
+            size={Typography.sizes.sm}
+          />
+        </StyledTypographyWrapper>
       )}
     </StyledTd>
   )
@@ -132,3 +134,9 @@ const StyledTd = styled.td<{ isEditing: boolean }>`
 const StyledWrapper = styled.div`
   border: 1px solid #000;
 `
+
+const StyledTypographyWrapper = styled.div`
+  display: inline;
+  justify-content: space-between;
+  align-items: center;
+`

apps/ui/src/pages/Sessions/Session.tsx

@@ -255,6 +255,7 @@ const StyledSearchInput = styled.input`
   min-width: 300px;
   height: 48px;
   border-radius: 8px;
+  padding-left: 15px;
   padding-right: 40px;
 `
 

apps/ui/src/pages/Sessions/columnConfig.tsx

@@ -6,16 +6,21 @@ import Typography from '@l3-lib/ui-core/dist/Typography'
 import styled from 'styled-components'
 import TypographySecondary from 'components/Typography/Secondary'
 
-import { useNavigate } from 'react-router-dom'
+import { Navigate, useNavigate } from 'react-router-dom'
 import IconButton from '@l3-lib/ui-core/dist/IconButton'
 import {
   StyledDeleteIcon,
+  StyledEditIcon,
   StyledEyeOpenIcon,
 } from 'pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard'
 import { useChatsService } from 'services/chat/useChatsService'
 import { useDeleteChatService } from 'services/chat/useDeleteChatService'
 import { ToastContext } from 'contexts'
-import { Nullable } from 'types'
+import { AgentWithConfigs, Nullable } from 'types'
+import Edit from '@l3-lib/ui-core/dist/icons/Edit'
+import SearchOutline from '@l3-lib/ui-core/dist/icons/SearchOutline'
+import { useAgentsService } from 'services/agent/useAgentsService'
+import AudioPlayer from 'components/AudioPlayer'
 
 type CellProps = {
   value: Nullable<string>
@@ -35,7 +40,21 @@ const DateRenderer: React.FC<CellProps> = ({ value }) => {
     )
   } else {
     const formattedDate = moment(value).format('MMM DD, YYYY')
-    content = <span>{formattedDate}</span>
+    const formattedTime = moment(value).format('h:mm A')
+    content = (
+      <StyledDateWrapper>
+        <TypographySecondary
+          value={formattedDate}
+          type={Typography.types.LABEL}
+          size={Typography.sizes.sm}
+        />
+        <TypographySecondary
+          value={formattedTime}
+          type={Typography.types.LABEL}
+          size={Typography.sizes.sm}
+        />
+      </StyledDateWrapper>
+    )
   }
 
   return content
@@ -59,6 +78,60 @@ const columns = [
     accessor: 'agent_name',
     minWidth: 342,
     width: '24.8%',
+    Cell: (props: { row: { original: any } }) => {
+      const { original: data } = props.row
+      const navigate = useNavigate()
+      const { openModal } = useModal()
+
+      const { data: agentsData } = useAgentsService()
+
+      const handleAgentEditClick = () => {
+        const agentIdToEdit = data.agent_id
+
+        const agentToEdit = agentsData.find(agent => agent.agent.id === agentIdToEdit)
+
+        if (agentToEdit) {
+          navigate(`/agents/${agentToEdit.agent.id}/edit-agent`)
+        }
+      }
+
+      const handleViewClick = () => {
+        const selectedAgent = agentsData.find(agentObj => agentObj.agent.id === data.agent_id)
+
+        if (selectedAgent) {
+          openModal({ name: 'agent-view-modal', data: { agent: selectedAgent } })
+        }
+      }
+
+      return (
+        <StyledAgentNameCell>
+          <TypographySecondary
+            value={data.agent_name}
+            type={Typography.types.LABEL}
+            size={Typography.sizes.sm}
+          />
+          <StyledAgentIconsWrapper>
+            <IconButton
+              onClick={() => handleAgentEditClick()}
+              icon={() => <StyledEditIcon />}
+              size={IconButton.sizes.SMALL}
+              kind={IconButton.kinds.TERTIARY}
+              ariaLabel='Edit'
+              className='eye-icon'
+            />
+
+            <IconButton
+              onClick={() => handleViewClick()}
+              icon={() => <StyledEyeOpenIcon />}
+              size={IconButton.sizes.SMALL}
+              kind={IconButton.kinds.TERTIARY}
+              ariaLabel='View'
+              className='search-icon'
+            />
+          </StyledAgentIconsWrapper>
+        </StyledAgentNameCell>
+      )
+    },
   },
   {
     Header: 'Status',
@@ -67,7 +140,7 @@ const columns = [
     width: '24.8%',
   },
   {
-    Header: 'Sender Name',
+    Header: 'Voice',
     accessor: 'sender_name',
     minWidth: 343,
     width: '24.8%',
@@ -93,7 +166,7 @@ const columns = [
 
     Cell: (props: { row: { original: any } }) => {
       const { original: data } = props.row
-      const { data: chatsData, refetch: refetchChat } = useChatsService()
+      const { refetch: refetchChat } = useChatsService()
       const { deleteChat } = useDeleteChatService()
       const { openModal, closeModal } = useModal()
       const { setToast } = useContext(ToastContext)
@@ -197,3 +270,40 @@ const StyledActionWrapper = styled.div`
     }
   }
 `
+
+const StyledAgentNameCell = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 5px;
+
+  .components-IconButton-IconButton-module__iconButtonContainer--ttuRB {
+    &:hover {
+      background: ${({ theme }) => theme.body.humanMessageBgColor};
+      border-radius: 50%;
+    }
+  }
+`
+const StyledAgentIconsWrapper = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  bottom: 11px;
+  margin-left: auto;
+  opacity: 0;
+
+  ${StyledAgentNameCell}:hover & {
+    opacity: 1;
+  }
+
+  .edit-icon,
+  .search-icon {
+    margin-left: 10px;
+  }
+`
+
+const StyledDateWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`

apps/ui/src/pages/Sessions/useSession.ts

@@ -11,6 +11,9 @@ type Chat = {
   agent?: {
     agent?: {
       name: string
+      id: string
+      role: string
+      description: string
     }
   }
   team?: {
@@ -33,6 +36,9 @@ export const useSession = () => {
     id: chat?.id,
     name: chat?.name,
     agent_name: chat?.agent?.agent?.name,
+    gent_role: chat?.agent?.agent?.role,
+    gent_description: chat?.agent?.agent?.description,
+    agent_id: chat?.agent?.agent?.id,
     team_name: chat?.team?.team?.name,
     added_At: new Date().toISOString(),
   }))
@@ -100,6 +106,7 @@ export const useSession = () => {
     handleDateChange,
     startDate,
     endDate,
+    filterByDateRange,
     clearSelectedDays,
   }
 }