Merge pull request #181 from tipisai/improve/message-list

Improve/message list
tipisai · May 7, 2024 · 5294909 · 5294909
2 parents 74aa434 + 8a4cdea
commit 5294909
Show file tree

Hide file tree

Showing 25 changed files with 265 additions and 110 deletions.
diff --git a/apps/agent/src/components/PreviewChat/MessageList/components/MessageListItem/index.tsx b/apps/agent/src/components/PreviewChat/MessageList/components/MessageListItem/index.tsx
@@ -0,0 +1,46 @@
+import { FC } from "react"
+import AIAgentMessage from "@/page/WorkSpace/AI/components/AIAgentMessage"
+import GroupAgentMessage from "@/page/WorkSpace/AI/components/GroupAgentMessage"
+import UserMessage from "@/page/WorkSpace/AI/components/UserMessage"
+import { isGroupMessage } from "@/utils/agent/typeHelper"
+import { SenderType } from "../../../interface"
+import { IMessageListItemProps } from "./interface"
+
+const MessageListItem: FC<IMessageListItemProps> = ({
+  message,
+  currentUserID,
+  isReceiving,
+  isLastMessage,
+}) => {
+  if (isGroupMessage(message)) {
+    return (
+      <GroupAgentMessage
+        key={message.threadID}
+        message={message}
+        disableTrigger={isReceiving && isLastMessage}
+      />
+    )
+  } else if (
+    message.sender.senderType === SenderType.USER &&
+    message.sender.senderID === currentUserID
+  ) {
+    return (
+      <UserMessage
+        key={message.threadID}
+        message={message}
+        disableTrigger={isReceiving && isLastMessage}
+      />
+    )
+  } else {
+    return (
+      <AIAgentMessage
+        key={message.threadID}
+        message={message}
+        isLastMessage={isLastMessage}
+        isReceiving={isReceiving}
+      />
+    )
+  }
+}
+
+export default MessageListItem
diff --git a/apps/agent/src/components/PreviewChat/MessageList/components/MessageListItem/interface.ts b/apps/agent/src/components/PreviewChat/MessageList/components/MessageListItem/interface.ts
@@ -0,0 +1,8 @@
+import { ChatMessage, IGroupMessage } from "../../../interface"
+
+export interface IMessageListItemProps {
+  message: IGroupMessage | ChatMessage
+  isReceiving: boolean
+  isLastMessage: boolean
+  currentUserID: string
+}
diff --git a/apps/agent/src/components/PreviewChat/MessageList/index.tsx b/apps/agent/src/components/PreviewChat/MessageList/index.tsx
@@ -1,50 +1,39 @@
 import { forwardRef } from "react"
-import { isGroupMessage } from "@/utils/agent/typeHelper"
-import AIAgentMessage from "../../../page/WorkSpace/AI/components/AIAgentMessage"
-import GroupAgentMessage from "../../../page/WorkSpace/AI/components/GroupAgentMessage"
-import UserMessage from "../../../page/WorkSpace/AI/components/UserMessage"
-import { SenderType } from "../interface"
+import MessageItem from "./components/MessageListItem"
 import { IMessageListProps } from "./interface"
 import { chatContainerStyle, maxWidthStyle } from "./style"
 
 const MessageList = forwardRef<HTMLDivElement, IMessageListProps>(
   (props, ref) => {
-    const { handleScroll, chatMessages, isReceiving, currentUserID } = props
+    const {
+      handleScroll,
+      chatMessages,
+      isReceiving,
+      currentUserID,
+      currentRenderMessage,
+    } = props
     return (
       <div ref={ref} css={chatContainerStyle} onScroll={handleScroll}>
         <div css={maxWidthStyle}>
-          {chatMessages.map((message, i) => {
-            if (isGroupMessage(message)) {
-              return (
-                <GroupAgentMessage
-                  key={message.threadID}
-                  message={message}
-                  isReceiving={isReceiving}
-                  isLastMessage={i === chatMessages.length - 1}
-                />
-              )
-            } else if (
-              message.sender.senderType === SenderType.USER &&
-              message.sender.senderID === currentUserID
-            ) {
-              return (
-                <UserMessage
-                  key={message.threadID}
-                  message={message}
-                  isReceiving={isReceiving}
-                />
-              )
-            } else {
-              return (
-                <AIAgentMessage
-                  key={message.threadID}
-                  message={message}
-                  isLastMessage={i === chatMessages.length - 1}
-                  isReceiving={isReceiving}
-                />
-              )
-            }
-          })}
+          {chatMessages.map((message, i) => (
+            <MessageItem
+              key={message.threadID}
+              message={message}
+              currentUserID={currentUserID}
+              isLastMessage={i === chatMessages.length - 1}
+              isReceiving={isReceiving}
+            />
+          ))}
+
+          {!!currentRenderMessage && (
+            <MessageItem
+              key={currentRenderMessage.threadID}
+              message={currentRenderMessage}
+              currentUserID={currentUserID}
+              isLastMessage
+              isReceiving={isReceiving}
+            />
+          )}
         </div>
       </div>
     )

diff --git a/apps/agent/src/components/PreviewChat/MessageList/interface.ts b/apps/agent/src/components/PreviewChat/MessageList/interface.ts
@@ -6,4 +6,5 @@ export interface IMessageListProps {
   chatMessages: (IGroupMessage | ChatMessage)[]
   isReceiving: boolean
   currentUserID: string
+  currentRenderMessage: IGroupMessage | ChatMessage | null
 }
diff --git a/apps/agent/src/components/PreviewChat/index.tsx b/apps/agent/src/components/PreviewChat/index.tsx
@@ -22,7 +22,8 @@ import {
 export const PreviewChat: FC<PreviewChatProps> = (props) => {
   const { blockInput, onSendMessage, wsContextValue } = props
 
-  const { chatMessages, isReceiving, sendMessage } = wsContextValue
+  const { chatMessages, isReceiving, sendMessage, currentRenderMessage } =
+    wsContextValue
 
   const { data: currentUserInfo } = useGetUserInfoQuery(null)
 
@@ -80,6 +81,7 @@ export const PreviewChat: FC<PreviewChatProps> = (props) => {
         chatMessages={chatMessages}
         isReceiving={isReceiving}
         currentUserID={currentUserInfo?.userID ?? ""}
+        currentRenderMessage={currentRenderMessage}
       />
       <div css={[inputTextContainerStyle, maxWidthStyle]}>
         {blockInput ? (

diff --git a/apps/agent/src/components/PreviewChat/interface.ts b/apps/agent/src/components/PreviewChat/interface.ts
@@ -77,6 +77,7 @@ export interface PreviewChatProps {
   onSendMessage: (cheatMessage: ChatMessage) => void
   wsContextValue: {
     chatMessages: (IGroupMessage | ChatMessage)[]
+    currentRenderMessage: IGroupMessage | ChatMessage | null
     isReceiving: boolean
     sendMessage: IChatSendMessage
   }

diff --git a/apps/agent/src/page/WorkSpace/AI/AIAgent/modules/PreviewChatHistory/index.tsx b/apps/agent/src/page/WorkSpace/AI/AIAgent/modules/PreviewChatHistory/index.tsx
@@ -17,6 +17,7 @@ const PreviewChatHistory: FC = memo(() => {
     isReceiving,
     sendMessage,
     lastRunAgent,
+    currentRenderMessage,
   } = useContext(AgentWSContext)
   const [prompt, variables, knowledge, aiTools] = useWatch({
     control,
@@ -57,6 +58,7 @@ const PreviewChatHistory: FC = memo(() => {
       isReceiving,
       sendMessage,
       lastRunAgent,
+      currentRenderMessage,
     }),
     [
       chatMessages,
@@ -65,6 +67,7 @@ const PreviewChatHistory: FC = memo(() => {
       lastRunAgent,
       sendMessage,
       getReadyState,
+      currentRenderMessage,
     ],
   )
 

diff --git a/apps/agent/src/page/WorkSpace/AI/AIAgentRun/AIAgentRunMobile/index.tsx b/apps/agent/src/page/WorkSpace/AI/AIAgentRun/AIAgentRunMobile/index.tsx
@@ -29,6 +29,7 @@ export const AIAgentRunMobile: FC = () => {
     connect,
     isConnecting,
     inRoomUsers,
+    currentRenderMessage,
   } = useContext(AgentWSContext)
 
   const wsContext = useMemo(
@@ -39,6 +40,7 @@ export const AIAgentRunMobile: FC = () => {
       isReceiving,
       sendMessage,
       lastRunAgent,
+      currentRenderMessage,
     }),
     [
       chatMessages,
@@ -47,6 +49,7 @@ export const AIAgentRunMobile: FC = () => {
       lastRunAgent,
       sendMessage,
       getReadyState,
+      currentRenderMessage,
     ],
   )
 

diff --git a/apps/agent/src/page/WorkSpace/AI/AIAgentRun/AIAgentRunPC/index.tsx b/apps/agent/src/page/WorkSpace/AI/AIAgentRun/AIAgentRunPC/index.tsx
@@ -41,6 +41,7 @@ export const AIAgentRunPC: FC = () => {
     sendMessage,
     lastRunAgent,
     tabID,
+    currentRenderMessage,
   } = useContext(AgentWSContext)
 
   const isVariablesDirty = getFieldState("variables").isDirty
@@ -65,6 +66,7 @@ export const AIAgentRunPC: FC = () => {
       isReceiving,
       sendMessage,
       lastRunAgent,
+      currentRenderMessage,
     }),
     [
       chatMessages,
@@ -73,6 +75,7 @@ export const AIAgentRunPC: FC = () => {
       lastRunAgent,
       sendMessage,
       getReadyState,
+      currentRenderMessage,
     ],
   )
 

diff --git a/apps/agent/src/page/WorkSpace/AI/components/AIAgentMessage/index.tsx b/apps/agent/src/page/WorkSpace/AI/components/AIAgentMessage/index.tsx
@@ -48,7 +48,7 @@ export const AIAgentMessage: FC<AIAgentMessageProps> = (props) => {
 
   const contentBody = (
     <div css={messageContainerStyle} ref={containerRef}>
-      <MarkdownMessage isReceiving={isReceiving}>
+      <MarkdownMessage disableTrigger={isReceiving && isLastMessage}>
         {message.message}
       </MarkdownMessage>
     </div>

diff --git a/apps/agent/src/page/WorkSpace/AI/components/GroupAgentMessage/index.tsx b/apps/agent/src/page/WorkSpace/AI/components/GroupAgentMessage/index.tsx
@@ -18,7 +18,7 @@ import {
 } from "./style"
 
 export const GroupAgentMessage: FC<GroupAgentMessageProps> = (props) => {
-  const { message, isReceiving, isLastMessage } = props
+  const { message, disableTrigger } = props
   const chatContext = useContext(ChatContext)
   const isMobile = useIsMobile()
 
@@ -68,15 +68,15 @@ export const GroupAgentMessage: FC<GroupAgentMessageProps> = (props) => {
                   messageItem.status ?? MESSAGE_STATUS.ANALYZE_PENDING
                 }
                 messageResult={messageItem.messageResult}
-                isReceiving={isReceiving}
+                disableTrigger={disableTrigger}
               />
             )
           } else {
             element = (
               <PureMessage
                 message={messageItem.message}
                 isMobile={isMobile}
-                disableTrigger={isReceiving && isLastMessage}
+                disableTrigger={disableTrigger}
               />
             )
           }

diff --git a/apps/agent/src/page/WorkSpace/AI/components/GroupAgentMessage/interface.ts b/apps/agent/src/page/WorkSpace/AI/components/GroupAgentMessage/interface.ts
@@ -2,6 +2,5 @@ import { IGroupMessage } from "@/components/PreviewChat/interface"
 
 export interface GroupAgentMessageProps {
   message: IGroupMessage
-  isReceiving: boolean
-  isLastMessage: boolean
+  disableTrigger: boolean
 }
diff --git a/apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/components/CustomCode/index.tsx b/apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/components/CustomCode/index.tsx
@@ -17,16 +17,16 @@ import {
 } from "./style"
 
 const CustomCode: FC<
-  CodeProps & Pick<MarkdownMessageProps, "codeStatus" | "isReceiving">
+  CodeProps & Pick<MarkdownMessageProps, "codeStatus" | "disableTrigger">
 > = (props) => {
-  const { codeStatus = CODE_STATUS.DEFAULT, isReceiving } = props
+  const { codeStatus = CODE_STATUS.DEFAULT, disableTrigger } = props
   const { t } = useTranslation()
   const { message: messageAPI } = App.useApp()
   const language =
     /language-(\w+)/.exec(props.className || "")?.[1] ?? "markdown"
 
   const handleCopyClick = () => {
-    if (isReceiving) {
+    if (disableTrigger) {
       return
     }
     copyToClipboard(props.children?.[0])
@@ -43,7 +43,7 @@ const CustomCode: FC<
     <div css={codeBlockContainerStyle(codeStatus)}>
       <div css={codeBlockHeaderStyle(codeStatus)}>
         <span>{language.toLocaleLowerCase()}</span>
-        <div css={copyStyle(isReceiving)} onClick={handleCopyClick}>
+        <div css={copyStyle(!!disableTrigger)} onClick={handleCopyClick}>
           <Icon component={CopyIcon} size={16} />
           <span>{t("editor.ai-agent.copy_code")}</span>
         </div>

diff --git a/apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/index.tsx b/apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/index.tsx
@@ -30,7 +30,7 @@ import CustomImage from "./components/CustomImage"
 import { handleParseText } from "./utils"
 
 export const MarkdownMessage = memo((props: MarkdownMessageProps) => {
-  const { children, isOwnMessage, codeStatus, isReceiving } = props
+  const { children, isOwnMessage, codeStatus, disableTrigger } = props
 
   return (
     <div css={markdownMessageContainerStyle}>
@@ -99,7 +99,7 @@ export const MarkdownMessage = memo((props: MarkdownMessageProps) => {
             <CustomCode
               {...props}
               codeStatus={codeStatus}
-              isReceiving={isReceiving}
+              disableTrigger={disableTrigger}
             />
           ),
           img: ({ src, alt }) => <CustomImage src={src} alt={alt} />,

diff --git a/apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/interface.ts b/apps/agent/src/page/WorkSpace/AI/components/MarkdownMessage/interface.ts
@@ -5,7 +5,7 @@ export enum CODE_STATUS {
 }
 
 export interface MarkdownMessageProps {
-  isReceiving: boolean
+  disableTrigger?: boolean
   isOwnMessage?: boolean
   children?: string
   codeStatus?: CODE_STATUS

diff --git a/apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/index.tsx b/apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/index.tsx
@@ -44,7 +44,7 @@ export const PureMessage: FC<PureMessageProps> = ({
 
   const contentBody = (
     <div css={pureMessageContainerStyle} ref={containerRef}>
-      <MarkdownMessage isReceiving={false}>{message}</MarkdownMessage>
+      <MarkdownMessage>{message}</MarkdownMessage>
     </div>
   )
 
@@ -91,7 +91,7 @@ export const SyncMessageCard: FC<SyncMessageCardProps> = ({
   message,
   messageStatus,
   messageResult,
-  isReceiving,
+  disableTrigger,
 }) => {
   const { t } = useTranslation()
   const [showMessage, setShowMessage] = useState(false)
@@ -156,7 +156,7 @@ export const SyncMessageCard: FC<SyncMessageCardProps> = ({
         <>
           <SyncMessageLine />
           <div css={messageContainerStyle}>
-            <MarkdownMessage isReceiving={isReceiving}>
+            <MarkdownMessage disableTrigger={disableTrigger}>
               {formatMessage}
             </MarkdownMessage>
             {errorInfo && (
@@ -168,7 +168,7 @@ export const SyncMessageCard: FC<SyncMessageCardProps> = ({
                   {t("homepage.tipi_chat.response.resonse")}
                 </span>
                 <MarkdownMessage
-                  isReceiving={isReceiving}
+                  disableTrigger={disableTrigger}
                   codeStatus={CODE_STATUS.ERROR}
                 >
                   {errorInfo}

diff --git a/apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/interface.ts b/apps/agent/src/page/WorkSpace/AI/components/SyncMessageCard/interface.ts
@@ -1,7 +1,7 @@
 import { MESSAGE_STATUS } from "@/components/PreviewChat/interface"
 
 export interface SyncMessageCardProps {
-  isReceiving: boolean
+  disableTrigger: boolean
   message: string
   messageStatus: MESSAGE_STATUS
   messageResult?: string