Update message body component to use activeStep prop

Author: Rankin Zheng

src/views/components/CurrentMessage/index.tsx

@@ -84,7 +84,7 @@ const CurrentMessage = observer((props: any) => {
                     whiteSpace: 'break-spaces'
                 },
             }}>
-            <MessageBody messageType="bot" temp={true} >
+            <MessageBody messageType="bot" activeStep={true} >
                 {renderBlocks.length>0?toMarkdown(renderBlocks[0]):''}
             </MessageBody>
             <MessageBlink />

src/views/components/MessageBody/index.tsx

@@ -8,7 +8,7 @@ interface IProps {
     messageType: string,
     children: string,
     messageDone?: boolean,
-    temp?: boolean
+    activeStep?: boolean
 }
 
 
@@ -24,14 +24,14 @@ const useStyles = createStyles((theme, options:any) => ({
 }));
 
 const MessageBody = observer((props: IProps) => {
-    const { children, messageType, temp=false ,messageDone} = props;
+    const { children, messageType, activeStep=false ,messageDone} = props;
     const { chat } = useMst();
     const {classes} = useStyles({
         chatPanelWidth:chat.chatPanelWidth
     });
     return (
         messageType === 'bot'
-            ? <MessageMarkdown className={classes.bodyWidth} temp={temp} messageDone={messageDone}>
+            ? <MessageMarkdown className={classes.bodyWidth} activeStep={activeStep} messageDone={messageDone}>
                 {children}
             </MessageMarkdown>
             : <Container

src/views/components/MessageMarkdown/Step.tsx

@@ -12,13 +12,13 @@ import { keyframes,css } from "@emotion/react";
 interface StepProps {
     language: string;
     children: string;
-    done: boolean;
+    status: string;
     index: number|undefined;
 }
 
 const Step = observer((props:StepProps) => {
   const { chat } = useMst();
-  const {language,children,done,index} = props;
+  const {language,children,status,index} = props;
   const [opened, { toggle }] = useDisclosure(false);
 
   // extract first line with # as button label
@@ -85,7 +85,7 @@ const Step = observer((props:StepProps) => {
         >
           <Accordion.Item value={'step'+index} mah='200'>
               <Accordion.Control icon={
-                  done
+                  status === "done"
                   ?<IconCheck size="1.125rem"/>
                   :<Loader size="xs" color="#ED6A45" speed={1} />
                 }

src/views/components/MessageMarkdown/index.tsx

@@ -33,7 +33,7 @@ interface MessageMarkdownProps extends React.ComponentProps<typeof ReactMarkdown
     children: string,
     className: string,
     messageDone?: boolean,
-    temp?: boolean
+    activeStep?: boolean
 }
 
 type Step = {
@@ -54,7 +54,7 @@ function parseMetaData(string) {
 }
 
 const MessageMarkdown = observer((props: MessageMarkdownProps) => {
-    const { children,temp=false,messageDone } = props;
+    const { children,activeStep=false,messageDone } = props;
     const { chat } = useMst();
     const [steps, setSteps] = useState<Step[]>([]);
     const tree = fromMarkdown(children);
@@ -177,7 +177,7 @@ Generate a professionally written and formatted release note in markdown with th
     return <ReactMarkdown
         {...props}
         remarkPlugins={[()=> (tree) =>{
-            let stepCount = 1;
+            let stepCount = 0;
             let chatmarkCount = 0;
             let previousNode:any = null;
             visit(tree, function (node) {
@@ -227,8 +227,8 @@ Generate a professionally written and formatted release note in markdown with th
                 }
 
                 if (lanugage === 'step' || lanugage === 'Step') {
-                    let done = Number(index) < codes.length? true : lastNode.type !== 'code';
-                    return <Step language={lanugage} done={temp?done:true} index={index}>{value}</Step>;
+                    const status = activeStep && Number(index) === codes.length - 1 && lastNode.type === 'code' ? "running" : "done";
+                    return <Step language={lanugage} status={status} index={index}>{value}</Step>;
                 }
 
                 if (lanugage === 'chatmark' || lanugage === 'ChatMark') {