Add current step viewer

packages/mdx/pages/new-chat.tsx

@@ -30,6 +30,14 @@ export default function Page() {
     input.focus()
   }, [])
 
+  const preRef = React.useRef<HTMLPreElement>(null)
+
+  React.useEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight
+    }
+  }, [progress])
+
   return (
     <div>
       <style jsx global>{`
@@ -44,7 +52,10 @@ export default function Page() {
 
         .ch-chat {
           width: 900px;
-          margin: 10vh auto;
+          margin: 0 auto;
+        }
+
+        .ch-scrollycoding-sticker {
         }
       `}</style>
       <NewChat
@@ -55,11 +66,28 @@ export default function Page() {
       <div
         style={{
           position: "fixed",
-          bottom: 8,
+          bottom: 0,
           left: 0,
           right: 0,
+          height: "20vh",
+          padding: "2px 0 8px",
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column",
         }}
       >
+        <pre
+          ref={preRef}
+          style={{
+            width: "100%",
+            flex: 1,
+            background: "black",
+            color: "white",
+            overflow: "auto",
+          }}
+        >
+          {messages[messages.length - 1]?.content}
+        </pre>
         <input
           autoFocus
           style={{ width: "100%", padding: 0, margin: 0 }}

packages/mdx/src/chat/answer-parser.test.ts

@@ -40,5 +40,5 @@ console.log(1)
 ].map(x => x.replace(/~/g, "`"))
 
 test.each(fixtures)("%s", async markdown => {
-  expect(parseAnswer(markdown)).toMatchSnapshot()
+  expect(parseAnswer(markdown, true)).toMatchSnapshot()
 })

packages/mdx/src/chat/answer-parser.ts

@@ -1,8 +1,11 @@
 // turns streaming markdown into codeblocks, content and replies
 // doesnt care about previous answers
-export function parseAnswer(markdown: string) {
+export function parseAnswer(
+  markdown: string,
+  isStreaming: boolean
+) {
   const { markdownWithoutCode, fileInfoList } =
-    extractCodeBlocks(markdown)
+    extractCodeBlocks(markdown, isStreaming)
   const [answerText, repliesText] =
     markdownWithoutCode.split(/\n+---\n+/)
   const replies = repliesText
@@ -18,32 +21,48 @@ export function parseAnswer(markdown: string) {
   }
 }
 
-function extractCodeBlocks(markdown: string) {
+function extractCodeBlocks(
+  markdown: string,
+  isStreaming: boolean
+) {
   const closedCodeBlocks =
     markdown.match(/```[\s\S]*?```/g) || []
   const markdownWithoutClosedCodeBlocs = markdown.replace(
     /```[\s\S]*?```/g,
     ""
   )
 
-  const openCodeBlock =
-    markdownWithoutClosedCodeBlocs.match(/```[\s\S]*?$/g)
-
-  const markdownWithoutCode = markdownWithoutClosedCodeBlocs
-    .replace(/```[\s\S]*?$/g, "")
-    .trim()
-
   const fileInfoList = closedCodeBlocks.map(s => ({
     ...codeblockToFileInfo(s),
     open: false,
   }))
 
-  if (openCodeBlock) {
-    fileInfoList.push({
-      ...codeblockToFileInfo(openCodeBlock[0] + "\n```"),
-      open: true,
-    })
+  let markdownWithoutCode = markdownWithoutClosedCodeBlocs
+
+  if (isStreaming) {
+    const markdownWithoutLineInProgress =
+      markdownWithoutClosedCodeBlocs
+        .split("\n")
+        .slice(0, -1)
+        .join("\n")
+    const openCodeBlock =
+      markdownWithoutLineInProgress.match(/```[\s\S]*?$/g)
+
+    if (openCodeBlock) {
+      markdownWithoutCode = markdownWithoutLineInProgress
+        .replace(/```[\s\S]*?$/g, "")
+        .trim()
+
+      const streamingCodeBlock = openCodeBlock[0]
+      fileInfoList.push({
+        ...codeblockToFileInfo(
+          streamingCodeBlock + "\n```"
+        ),
+        open: isStreaming,
+      })
+    }
   }
+
   return { markdownWithoutCode, fileInfoList }
 }
 

packages/mdx/src/chat/use-conversation.tsx

@@ -128,11 +128,10 @@ function getEntry(
     }
   }
 
-  const content = isStreaming
-    ? newMessage.content.split("\n").slice(0, -1).join("\n")
-    : newMessage.content
-
-  const parsedAnswer = parseAnswer(content)
+  const parsedAnswer = parseAnswer(
+    newMessage.content,
+    isStreaming
+  )
 
   const { files, activeFile } = getFiles(
     parsedAnswer.fileInfoList,