Merge pull request #211 from tipisai/refactor/chat

refactor: preview to chat dashboard

apps/agent/package.json

@@ -96,6 +96,7 @@
     "react-use-measure": "^2.1.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^3.0.0",
+    "sse.js": "^2.4.1",
     "streamsaver": "^2.0.6",
     "tern": "^0.24.3",
     "uuid": "^9.0.1",

apps/agent/src/api/ws/index.ts

@@ -1,4 +1,4 @@
-import { SEND_MESSAGE_WS_TYPE } from "@/components/PreviewChat/TipisWebscoketContext/interface"
+import { SEND_MESSAGE_WS_TYPE } from "@/components/_PreviewChatCache/TipisWebscoketContext/interface"
 import { Broadcast, FILE_SOURCE } from "./interface"
 import { TextSignal, TextTarget } from "./textSignal"
 

apps/agent/src/components/ChatDashBoard/components/AIMessage/MessageDivide/index.tsx

@@ -0,0 +1,12 @@
+import { FC } from "react"
+import { lineContainerStyle, lineStyle } from "./style"
+
+const MessageDivide: FC = () => {
+  return (
+    <div css={lineContainerStyle}>
+      <div css={lineStyle} />
+    </div>
+  )
+}
+
+export default MessageDivide

apps/agent/src/components/ChatDashBoard/components/AIMessage/MessageDivide/style.ts

@@ -0,0 +1,15 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-public/color-scheme"
+
+export const lineContainerStyle = css`
+  display: flex;
+  padding: 0px 32px;
+  align-items: flex-start;
+  gap: 8px;
+`
+
+export const lineStyle = css`
+  width: 1px;
+  height: 16px;
+  background-color: ${getColor("grayBlue", "08")};
+`

apps/agent/src/components/ChatDashBoard/components/AIMessage/PureMessage/index.tsx

@@ -0,0 +1,59 @@
+import Icon from "@ant-design/icons"
+import { App, Tooltip } from "antd"
+import { FC, useRef } from "react"
+import { useTranslation } from "react-i18next"
+import { CopyIcon } from "@illa-public/icon"
+import { copyToClipboard } from "@illa-public/utils"
+import MarkdownMessage from "../../MarkdownMessage"
+import { IPureMessageProps } from "./interface"
+import { markdownHoverCopyStyle, pureMessageContainerStyle } from "./style"
+
+export const PureMessage: FC<IPureMessageProps> = ({ content, isMobile }) => {
+  const { message: messageAPI } = App.useApp()
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const contentBody = (
+    <div css={pureMessageContainerStyle} ref={containerRef}>
+      <MarkdownMessage>{content}</MarkdownMessage>
+    </div>
+  )
+
+  if (!content) return null
+  return isMobile ? (
+    contentBody
+  ) : (
+    <Tooltip
+      color="transparent"
+      zIndex={0}
+      overlayInnerStyle={{
+        padding: 0,
+        minHeight: "24px",
+        minWidth: "24px",
+        boxShadow: "none",
+      }}
+      mouseEnterDelay={0}
+      mouseLeaveDelay={0.5}
+      title={
+        <span
+          css={markdownHoverCopyStyle}
+          onClick={() => {
+            copyToClipboard(content ?? "")
+            messageAPI.success({
+              content: t("copied"),
+            })
+          }}
+        >
+          <Icon component={CopyIcon} />
+        </span>
+      }
+      placement="rightBottom"
+      showArrow={false}
+      autoAdjustOverflow={false}
+      trigger="hover"
+      getTooltipContainer={() => containerRef.current!}
+    >
+      {contentBody}
+    </Tooltip>
+  )
+}

apps/agent/src/components/ChatDashBoard/components/AIMessage/PureMessage/interface.ts

@@ -0,0 +1,4 @@
+export interface IPureMessageProps {
+  content: string
+  isMobile?: boolean
+}

apps/agent/src/components/ChatDashBoard/components/AIMessage/PureMessage/style.ts

@@ -0,0 +1,29 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-public/color-scheme"
+import { applyMobileStyle } from "@illa-public/utils"
+
+export const pureMessageContainerStyle = css`
+  border-radius: 16px;
+  background: ${getColor("grayBlue", "09")};
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 100%;
+  ${applyMobileStyle(css`
+    margin-right: 0;
+  `)}
+`
+
+export const markdownHoverCopyStyle = css`
+  display: inline-flex;
+  padding: 4px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px solid ${getColor("grayBlue", "08")};
+  background: ${getColor("white", "01")};
+  cursor: pointer;
+  color: ${getColor("grayBlue", "02")};
+  transform: translateX(-4px);
+`

apps/agent/src/components/ChatDashBoard/components/AIMessage/ToolMessage/index.tsx

@@ -0,0 +1,103 @@
+import Icon from "@ant-design/icons"
+import { FC, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { DownIcon, UpIcon } from "@illa-public/icon"
+import { MESSAGE_STATUS } from "@/components/ChatDashBoard/interface"
+import LottieItem from "@/components/LottieItem"
+import tipiRunLoading from "@/config/lottieConfig/tipiRunLoading.json"
+import MarkdownMessage from "../../MarkdownMessage"
+import { CODE_STATUS } from "../../MarkdownMessage/interface"
+import MessageDivide from "../MessageDivide"
+import { IToolMessageProps } from "./interface"
+import {
+  actionIconStyle,
+  containerStyle,
+  errorInfoLineStyle,
+  headerContainerStyle,
+  iconStyle,
+  infoContainerStyle,
+  infoDescStyle,
+  infoTextContainerStyle,
+  infoTitleStyle,
+  inlineLineStyle,
+  lottieLoadingStyle,
+  messageContainerStyle,
+  responseStyle,
+  textAndIconContainerStyle,
+} from "./style"
+import { useGetInfoByStatus } from "./utils"
+
+const ToolMessage: FC<IToolMessageProps> = ({
+  content,
+  functionName,
+  status,
+  message_result,
+}) => {
+  const { t } = useTranslation()
+  const [showMessage, setShowMessage] = useState(false)
+
+  const code = `\`\`\`python\n${content?.input.code}\n\`\`\``
+
+  const getInfoByStatus = useGetInfoByStatus()
+
+  const { infoDesc, InfoIcon, infoTitle } = getInfoByStatus(
+    status,
+    functionName,
+  )
+
+  return (
+    <div css={containerStyle}>
+      <div
+        css={headerContainerStyle}
+        onClick={() => setShowMessage(!showMessage)}
+      >
+        <div css={infoContainerStyle}>
+          {status !== MESSAGE_STATUS.ANALYZE_PENDING ? (
+            <>
+              <div css={textAndIconContainerStyle}>
+                <div css={iconStyle(status)}>{InfoIcon}</div>
+                <div css={infoTextContainerStyle}>
+                  <span css={infoTitleStyle}>{infoTitle}</span>
+                  <span css={infoDescStyle(status)}>{infoDesc}</span>
+                </div>
+              </div>
+              {code && (
+                <Icon
+                  component={showMessage ? UpIcon : DownIcon}
+                  css={actionIconStyle}
+                />
+              )}
+            </>
+          ) : (
+            <div css={lottieLoadingStyle}>
+              <LottieItem configJson={tipiRunLoading} autoplay loop />
+            </div>
+          )}
+        </div>
+      </div>
+      {!!(code && showMessage) && (
+        <>
+          <MessageDivide />
+          <div css={messageContainerStyle}>
+            <MarkdownMessage>{code}</MarkdownMessage>
+            {message_result && (
+              <>
+                <div css={errorInfoLineStyle}>
+                  <div css={inlineLineStyle} />
+                </div>
+                <span css={responseStyle}>
+                  {t("homepage.tipi_chat.response.resonse")}
+                </span>
+                <MarkdownMessage codeStatus={CODE_STATUS.ERROR}>
+                  {message_result}
+                </MarkdownMessage>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default ToolMessage

apps/agent/src/components/ChatDashBoard/components/AIMessage/ToolMessage/interface.ts

@@ -0,0 +1,11 @@
+import {
+  IToolUseMessageContent,
+  MESSAGE_STATUS,
+} from "@/components/ChatDashBoard/interface"
+
+export interface IToolMessageProps {
+  content: IToolUseMessageContent
+  functionName: string
+  status: MESSAGE_STATUS
+  message_result?: string
+}