Merge pull request #2 from devchat-ai/fix_chatmark_bugs

Fix chatmark bugs

Author: Rankin Zheng

src/views/components/MessageMarkdown/Step.tsx

@@ -12,17 +12,18 @@ import { keyframes,css } from "@emotion/react";
 interface StepProps {
     language: string;
     children: string;
-    done:boolean;
+    done: boolean;
+    index: number|undefined;
 }
 
 const Step = observer((props:StepProps) => {
   const { chat } = useMst();
-  const {language,children,done} = props;
+  const {language,children,done,index} = props;
   const [opened, { toggle }] = useDisclosure(false);
 
   // extract first line with # as button label
   const lines = children.split('\n');
-  const title = lines.length>0&&lines[0].indexOf('#')>=0?lines[0].split('#')[1]:'';
+  const title = lines.length>0&&lines[0].indexOf('#')>=0?lines[0].split('#')[1]:'Thinking...';
   const contents = lines.slice(1,lines.length-1);
 
   const spin = keyframes`
@@ -82,7 +83,7 @@ const Step = observer((props:StepProps) => {
               }
           }}
         >
-          <Accordion.Item value={title} mah='200'>
+          <Accordion.Item value={'step'+index} mah='200'>
               <Accordion.Control icon={
                   done
                   ?<IconCheck size="1.125rem"/>

src/views/components/MessageMarkdown/index.tsx

@@ -22,6 +22,11 @@ const useStyles = createStyles((theme) => ({
         '&:hover':{
             color:theme.colors.merico[6]
         }
+    },
+    codeOverride:{
+        code:{
+            padding: "1px 0px !important",
+        }
     }
 }));
 interface MessageMarkdownProps extends React.ComponentProps<typeof ReactMarkdown> {
@@ -223,7 +228,7 @@ 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}>{value}</Step>;
+                    return <Step language={lanugage} done={temp?done:true} index={index}>{value}</Step>;
                 }
 
                 if (lanugage === 'chatmark' || lanugage === 'ChatMark') {
@@ -236,12 +241,12 @@ Generate a professionally written and formatted release note in markdown with th
                 }
 
                 return !inline && lanugage ? (
-                    <div style={{ position: 'relative' }}>
+                    <div style={{ position: 'relative' }} className={classes.codeOverride}>
                         <LanguageCorner language={lanugage} />
                         <CodeButtons language={lanugage} code={value} />
                         <SyntaxHighlighter {...props}
                             language={lanugage}
-                            customStyle={{ padding: '3em 1em 1em 2em' }}
+                            customStyle={{ padding: '35px 10px 10px 10px' }}
                             style={okaidia}
                             wrapLongLines={wrapLongLines}
                             PreTag="div">

src/views/stores/ChatStore.ts

@@ -4,6 +4,7 @@ import { ChatContext } from "@/views/stores/InputStore";
 import { features } from "process";
 import { Slice } from "@tiptap/pm/model";
 import yaml from "js-yaml";
+import { Step } from "@mantine/core";
 
 interface Context {
   content: string;
@@ -251,10 +252,16 @@ DevChat key is missing from your environment or settings. Kindly input your DevC
 ${yaml.dump(values)}
 \`\`\`
 `;
-      self.currentMessage = self.currentMessage + inputStr;
+      self.currentMessage = `
+${self.currentMessage}
+${inputStr}
+\`\`\`Step
+Thinking...123
+\`\`\`
+      `;
       messageUtil.sendMessage({
         command: "userInput",
-        text: inputStr,
+        text: inputStr
       });
       // goto bottom
       goScrollBottom();