Merge pull request #202 from l3vels/feat/chat-link

Feat/chat link

apps/server/models/chat.py

@@ -171,13 +171,13 @@ def get_chats(cls, db, account):
         return agents
 
     @classmethod
-    def delete_by_id(cls, db, agent_id, account):
-        db_agent = db.session.query(ChatModel).filter(ChatModel.id == agent_id, ChatModel.provider_account_id==account.id).first()
+    def delete_by_id(cls, db, chat_id, account):
+        db_chat = db.session.query(ChatModel).filter(ChatModel.id == chat_id, ChatModel.provider_account_id==account.id).first()
 
-        if not db_agent or db_agent.is_deleted:
+        if not db_chat or db_chat.is_deleted:
             raise ChatNotFoundException("Agent not found")
 
-        db_agent.is_deleted = True
+        db_chat.is_deleted = True
         db.session.commit()
 
     def to_dict(self):

apps/ui/src/components/ChatCards/AgentChatCard.tsx

@@ -17,8 +17,8 @@ import {
 
 type AgentChatCardProps = {
   onClick: () => void
-  onViewClick: (event: any) => void
-  onEditClick?: (event: any) => void
+  onViewClick: () => void
+  onEditClick?: () => void
   picked: boolean
   agent: any
 }
@@ -30,14 +30,26 @@ const AgentChatCard = ({
   picked,
   agent,
 }: AgentChatCardProps) => {
+  const handleEdit = (event: any) => {
+    event.stopPropagation()
+    if (onEditClick) {
+      onEditClick()
+    }
+  }
+
+  const handleView = (event: any) => {
+    event.stopPropagation()
+    onViewClick()
+  }
+
   return (
     <StyledAgentWrapper onClick={onClick} picked={picked}>
       <AvatarGenerator name={agent?.name} size={30} avatar={agent.avatar} />
       <MemberText name={agent?.name} role={agent?.role} />
 
       <StyledIconButtonWrapper className='hiddenButton'>
         <IconButton
-          onClick={onViewClick}
+          onClick={handleView}
           icon={() => (
             <StyledIconWrapper>
               <StyledEyeOpenIcon size={50} />
@@ -50,7 +62,7 @@ const AgentChatCard = ({
 
         {onEditClick && (
           <IconButton
-            onClick={onEditClick}
+            onClick={handleEdit}
             icon={() => <StyledEditIcon />}
             size={IconButton.sizes.SMALL}
             kind={IconButton.kinds.TERTIARY}

apps/ui/src/components/ChatCards/CustomerChatCard.tsx

@@ -1,17 +1,40 @@
 import MemberText from 'modals/AIChatModal/components/ChatMembers/components/MemberText'
-import { StyledAgentWrapper } from './TeamChatCard'
+import { StyledAgentWrapper, StyledIconButtonWrapper } from './TeamChatCard'
+
+import IconButton from '@l3-lib/ui-core/dist/IconButton'
+import { StyledDeleteIcon } from 'pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard'
 
 type CustomerChatCardProps = {
   onClick: () => void
   picked: boolean
   name: string
+  onDeleteClick?: () => void
 }
 
-const CustomerChatCard = ({ onClick, picked, name }: CustomerChatCardProps) => {
+const CustomerChatCard = ({ onClick, picked, name, onDeleteClick }: CustomerChatCardProps) => {
+  const handleDelete = (event: any) => {
+    event.stopPropagation()
+    if (onDeleteClick) {
+      onDeleteClick()
+    }
+  }
+
   return (
     <StyledAgentWrapper onClick={onClick} picked={picked}>
       {/* <AvatarGenerator name={team?.name} size={30} avatar={team.avatar} /> */}
       <MemberText name={name} />
+
+      <StyledIconButtonWrapper className='hiddenButton'>
+        {onDeleteClick && (
+          <IconButton
+            onClick={onDeleteClick}
+            icon={() => <StyledDeleteIcon />}
+            size={IconButton.sizes.SMALL}
+            kind={IconButton.kinds.TERTIARY}
+            // ariaLabel='Delete'
+          />
+        )}
+      </StyledIconButtonWrapper>
     </StyledAgentWrapper>
   )
 }

apps/ui/src/components/ChatCards/TeamChatCard.tsx

@@ -12,8 +12,8 @@ import {
 
 type TeamChatCardProps = {
   onClick: () => void
-  onViewClick: (event: any) => void
-  onEditClick?: (event: any) => void
+  onViewClick: () => void
+  onEditClick?: () => void
   picked: boolean
   team: any
   agents: any
@@ -27,6 +27,18 @@ const TeamChatCard = ({
   team,
   agents,
 }: TeamChatCardProps) => {
+  const handleEdit = (event: any) => {
+    event.stopPropagation()
+    if (onEditClick) {
+      onEditClick()
+    }
+  }
+
+  const handleView = (event: any) => {
+    event.stopPropagation()
+    onViewClick()
+  }
+
   return (
     <StyledAgentWrapper onClick={onClick} picked={picked}>
       <AvatarGenerator name={team?.name} size={30} avatar={team.avatar} />
@@ -44,7 +56,7 @@ const TeamChatCard = ({
 
       <StyledIconButtonWrapper className='hiddenButton'>
         <IconButton
-          onClick={onViewClick}
+          onClick={handleView}
           icon={() => (
             <StyledIconWrapper>
               <StyledEyeOpenIcon size={50} />
@@ -57,7 +69,7 @@ const TeamChatCard = ({
 
         {onEditClick && (
           <IconButton
-            onClick={onEditClick}
+            onClick={handleEdit}
             icon={() => <StyledEditIcon />}
             size={IconButton.sizes.SMALL}
             kind={IconButton.kinds.TERTIARY}

apps/ui/src/gql/chat/chatById.gql

@@ -0,0 +1,16 @@
+query chatById($id: id!) @api(name: "ai") {
+  chatById(id: $id)
+    @rest(type: "ChatMessage", path: "/chat/{args.id}", method: "GET", endpoint: "ai") {
+    id
+    name
+    agent_id
+    team_id
+    team
+    agent {
+      agent
+      configs
+    }
+    creator_user
+    creator_account
+  }
+}

apps/ui/src/gql/chat/deleteChat.gql

@@ -0,0 +1,13 @@
+mutation deleteChat($id: id!) @api(name: ai) {
+  deleteChat(id: $id)
+    @rest(
+      type: "ChatMessage"
+      path: "/chat/{args.id}"
+      method: "DELETE"
+      bodyKey: "input"
+      endpoint: "ai"
+    ) {
+    id
+    name
+  }
+}

apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx

@@ -55,17 +55,21 @@ const ChatMembers = ({
         <StyledDiv>
           <TabList size='small'>
             <Tab onClick={() => setActiveTab(0)}>
-              <StyledSpan>Members</StyledSpan>
+              <StyledSpan>Info</StyledSpan>
             </Tab>
             <Tab onClick={() => setActiveTab(1)}>
-              <StyledSpan>Info</StyledSpan>
+              <StyledSpan>Members</StyledSpan>
             </Tab>
           </TabList>
         </StyledDiv>
 
         <StyledContainer>
           <TabsContext activeTabId={activeTab}>
             <TabPanels noAnimation>
+              <TabPanel>
+                <AgentViewDetailBox agentData={agentById} />
+              </TabPanel>
+
               <TabPanel>
                 {!isHistory && user?.name && (
                   <StyledAgentWrapper>
@@ -116,10 +120,6 @@ const ChatMembers = ({
                   </StyledAgentWrapper>
                 </>
               </TabPanel>
-
-              <TabPanel>
-                <AgentViewDetailBox agentData={agentById} />
-              </TabPanel>
             </TabPanels>
           </TabsContext>
         </StyledContainer>
@@ -131,13 +131,17 @@ const ChatMembers = ({
     return (
       <StyledRoot>
         <TabList size='small'>
-          <Tab onClick={() => setActiveTab(0)}>Members</Tab>
-          <Tab onClick={() => setActiveTab(1)}>Info</Tab>
+          <Tab onClick={() => setActiveTab(0)}>Info</Tab>
+          <Tab onClick={() => setActiveTab(1)}>Members</Tab>
         </TabList>
 
         <StyledContainer>
           <TabsContext activeTabId={activeTab}>
             <TabPanels noAnimation>
+              <TabPanel>
+                <TeamOfAgentsDetailsBox teamData={teamOfAgents} />
+              </TabPanel>
+
               <TabPanel>
                 {!isHistory && user?.name && (
                   <StyledAgentWrapper>
@@ -198,10 +202,6 @@ const ChatMembers = ({
                     )
                   })}
               </TabPanel>
-
-              <TabPanel>
-                <TeamOfAgentsDetailsBox teamData={teamOfAgents} />
-              </TabPanel>
             </TabPanels>
           </TabsContext>
         </StyledContainer>

apps/ui/src/modals/AIChatModal/components/ChatMembers/components/MemberText.tsx

@@ -3,18 +3,35 @@ import styled from 'styled-components'
 import Typography from '@l3-lib/ui-core/dist/Typography'
 import TypographyPrimary from 'components/Typography/Primary'
 import TypographySecondary from 'components/Typography/Secondary'
+import { textSlicer } from 'utils/textSlicer'
 
 type MemberTextProps = {
   name: string
   role?: string
 }
 
 const MemberText = ({ name, role }: MemberTextProps) => {
+  const { shortText: shortName } = textSlicer(name, 20)
+
+  let shortRole
+  if (role) {
+    const { shortText } = textSlicer(role, 30)
+    shortRole = shortText
+  }
+
   return (
     <StyledNameWrapper>
-      <TypographyPrimary value={name} type={Typography.types.LABEL} size={Typography.sizes.sm} />
+      <TypographyPrimary
+        value={shortName}
+        type={Typography.types.LABEL}
+        size={Typography.sizes.sm}
+      />
 
-      <TypographySecondary value={role} type={Typography.types.LABEL} size={Typography.sizes.xss} />
+      <TypographySecondary
+        value={shortRole}
+        type={Typography.types.LABEL}
+        size={Typography.sizes.xss}
+      />
     </StyledNameWrapper>
   )
 }

apps/ui/src/modals/AIChatModal/components/ChatMessageList/ChatMessageListV2.tsx

@@ -21,7 +21,6 @@ export enum MessageTypeEnum {
   User = 'User',
 }
 
-
 type ChatMessageListV2Props = {
   data: any
   thinking: boolean
@@ -175,6 +174,7 @@ const ChatMessageListV2 = ({
                     ))}
                 </StyledReplyMessageContainer>
                 <HumanMessage
+                  userName={chat.sender_user?.name}
                   avatarImg={chat.sender_user?.avatar}
                   userId={chat.sender_user_id}
                   messageDate={chat.date}

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx

@@ -18,6 +18,7 @@ type HumanMessageProps = {
   messageDate: string
   messageText: string
   userId: string
+  userName: string
   onReplyClick?: () => void
 }
 
@@ -26,7 +27,7 @@ const HumanMessage = ({
   messageDate,
   messageText,
   userId,
-
+  userName,
   onReplyClick,
 }: HumanMessageProps) => {
   const { wordArray, handleFileClick, authorName, fileUrlMatch, fileName } = useHumanMessage({
@@ -39,14 +40,14 @@ const HumanMessage = ({
     <>
       <StyledMessageWrapper>
         <StyledAvatarWrapper>
-          <AvatarGenerator name={authorName} size={50} avatar={avatarImg} />
+          <AvatarGenerator name={userName} size={50} avatar={avatarImg} />
         </StyledAvatarWrapper>
 
         <StyledMainContent>
           <StyledMessageTop>
             <StyledMessageInfo>
               <TypographyPrimary
-                value={authorName}
+                value={userName}
                 type={Typography.types.LABEL}
                 size={Typography.sizes.sm}
               />

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessageText.tsx

@@ -30,7 +30,7 @@ const HumanMessageText = ({ textArray }: { textArray: any }) => {
         return (
           <React.Fragment key={index}>
             <TypographySecondary
-              value={word}
+              value={`${word} `}
               type={Typography.types.LABEL}
               size={Typography.sizes.sm}
             />

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanReply.tsx

@@ -55,7 +55,7 @@ export const StyledReplyWrapper = styled.div`
   width: calc(100vw - 100px);
 
   max-width: 850px;
-  height: 30px;
+  height: 20px;
   /* background: red; */
   gap: 10px;
 `
@@ -69,7 +69,7 @@ export const StyledReplyInfoWrapper = styled.div`
 `
 export const StyledReplyTextWrapper = styled.div`
   overflow: hidden;
-  margin-top: 4px;
+  margin-top: 2px;
 `
 export const StyledReplyLine = styled.div`
   width: 24px;