Merge pull request #283 from easyops-cn/steve/convert-jsx

feat(): support chat stream

Author: weareoutman

bricks/ai-portal/src/chat-stream/Aside/Aside.module.css

@@ -0,0 +1,32 @@
+.aside {
+  padding: 12px 12px 12px 0;
+  height: 100%;
+}
+
+.box {
+  background: #ffffff;
+  box-shadow: 1px 1px 10px 0px rgba(0, 10, 26, 0.1);
+  border-radius: 12px;
+  height: 100%;
+}
+
+.heading {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 0 20px;
+}
+
+.title {
+  font-weight: 500;
+  font-size: 16px;
+  color: #262626;
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  padding: 20px;
+}

bricks/ai-portal/src/chat-stream/Aside/Aside.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+import styles from "./Aside.module.css";
+import { WrappedIconButton } from "../../shared/bricks";
+import type { Job } from "../../cruise-canvas/interfaces";
+import { ToolCallStatus } from "../../cruise-canvas/ToolCallStatus/ToolCallStatus";
+import { TaskContext } from "../../shared/TaskContext";
+
+const ICON_SHRINK: GeneralIconProps = {
+  lib: "antd",
+  icon: "shrink",
+};
+
+export interface AsideProps {
+  job: Job;
+}
+
+export function Aside({ job }: AsideProps) {
+  const { setActiveToolCallJobId } = useContext(TaskContext);
+
+  return (
+    <div className={styles.aside}>
+      <div className={styles.box}>
+        <div className={styles.heading}>
+          <div className={styles.title}>Elevo&#39;s Computer</div>
+          <WrappedIconButton
+            icon={ICON_SHRINK}
+            variant="mini"
+            onClick={() => {
+              setActiveToolCallJobId(null);
+            }}
+          />
+        </div>
+        <div className={styles.body}>
+          <ToolCallStatus job={job} variant="read-only" />
+        </div>
+      </div>
+    </div>
+  );
+}

bricks/ai-portal/src/chat-stream/AssistantMessage/AssistantMessage.module.css

@@ -5,5 +5,29 @@
 .body {
   flex: 1;
   min-width: 0;
-  padding-left: 16px;
+  padding: 5px 0 5px 16px;
+}
+
+.texting::after {
+  content: "   ";
+  animation: texting 2s infinite;
+  white-space: pre;
+}
+
+@keyframes texting {
+  0% {
+    content: "   ";
+  }
+  25% {
+    content: ".  ";
+  }
+  50% {
+    content: ".. ";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "   ";
+  }
 }

bricks/ai-portal/src/chat-stream/AssistantMessage/AssistantMessage.tsx

@@ -1,15 +1,31 @@
-import React from "react";
+import React, { useMemo } from "react";
 import type { Job, TaskState } from "../../cruise-canvas/interfaces.js";
 import styles from "./AssistantMessage.module.css";
 import Avatar from "../images/[email protected]";
 import { NodeJob } from "../NodeJob/NodeJob.js";
+import { DONE_STATES } from "../../cruise-canvas/constants.js";
 
 export interface AssistantMessageProps {
   jobs: Job[];
   taskState: TaskState | undefined;
 }
 
 export function AssistantMessage({ jobs, taskState }: AssistantMessageProps) {
+  const working = useMemo(() => {
+    if (DONE_STATES.includes(taskState!)) {
+      return false;
+    }
+    for (const job of jobs) {
+      if (job.state === "input-required") {
+        return false;
+      }
+      if (job.state === "working") {
+        return true;
+      }
+    }
+    return true;
+  }, [jobs, taskState]);
+
   return (
     <div className={styles.assistant}>
       <div className={styles.avatar}>
@@ -19,6 +35,7 @@ export function AssistantMessage({ jobs, taskState }: AssistantMessageProps) {
         {jobs.map((job) => (
           <NodeJob key={job.id} job={job} taskState={taskState} />
         ))}
+        {working && <div className={styles.texting}></div>}
       </div>
     </div>
   );

bricks/ai-portal/src/chat-stream/HumanAdjustPlanResult/HumanAdjustPlanResult.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react";
+import type { Job } from "../../cruise-canvas/interfaces";
+import styles from "../NodeJob/NodeJob.module.css";
+
+export interface HumanAdjustPlanResultProps {
+  job: Job;
+}
+
+export function HumanAdjustPlanResult({
+  job,
+}: HumanAdjustPlanResultProps): JSX.Element {
+  const response = useMemo(() => {
+    const msg = job.messages?.find((msg) => {
+      return msg.role === "tool";
+    });
+    if (msg) {
+      const text = msg.parts?.find((part) => part.type === "text")?.text;
+      if (text) {
+        try {
+          return JSON.parse(text) as { type: "plan"; steps: string[] };
+        } catch {
+          // Fallback to original text
+        }
+      }
+    }
+    return null;
+  }, [job.messages]);
+
+  if (response?.type === "plan" && Array.isArray(response.steps)) {
+    return (
+      <div className={`${styles.message} ${styles["role-user"]}`}>
+        <ol
+          style={{
+            paddingLeft: `${Math.floor(Math.log10(response.steps.length + 1)) * 0.5 + 1.5}em`,
+          }}
+        >
+          {response.steps.map((step, index) => (
+            <li key={index}>{step}</li>
+          ))}
+        </ol>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.message} ${styles["role-user"]}`}>
+      Something went wrong.
+    </div>
+  );
+}

bricks/ai-portal/src/chat-stream/NodeJob/NodeJob.module.css

@@ -1,51 +1,91 @@
 .heading {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
+  padding: 5px 8px;
+  margin: 0 -8px 12px;
+  cursor: pointer;
+}
+
+.caret {
+  opacity: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.heading:hover {
+  background: rgba(184, 187, 205, 0.15);
+  border-radius: 8px;
+
+  .caret {
+    opacity: 1;
+  }
 }
 
 .icon {
-  width: 26px;
   display: flex;
   align-items: center;
+  margin-right: 12px;
 }
 
 .title {
   color: #262626;
   font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .tool {
-  background: #e6e9f3;
-  border-radius: 12px;
-  border: 1px solid #e2e2ec;
+  background: #e2e5ef;
+  border: 1px solid #d4d4de;
+  border-radius: 13px;
+  line-height: 24px;
   padding: 0 12px;
   width: fit-content;
   color: #595959;
+  cursor: pointer;
 }
 
 .body {
   padding-left: 26px;
   margin-bottom: 20px;
 }
 
+.collapsed {
+  .body {
+    display: none;
+  }
+
+  .caret {
+    transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
 .content {
   margin-top: 14px;
 
   .markdown :global(.mermaid) {
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.6);
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
     padding: 20px;
-    max-width: 453px;
+    min-width: var(--cruise-canvas-node-width-medium);
+    width: fit-content;
+    max-width: 100%;
   }
 }
 
 .content:empty {
   display: none;
 }
 
+.message:first-child > .message-part:first-child > :first-child {
+  margin-top: 0;
+}
+
 .icon {
   color: #abaab7;
 }