Hide replies

packages/mdx/pages/chat.tsx

@@ -130,7 +130,7 @@ const messages = [
   {
     role: "assistant",
     content: `
-~~~ 
+~~~js foo.js
 console.log("this is foo")
 console.log("this too")
 console.log("this 3")
@@ -151,6 +151,23 @@ That is bar.
     role: "user",
     content: "help me `code`",
   },
+  {
+    role: "assistant",
+    content: `
+~~~js foo.js
+console.log("this is bar")
+console.log("this ssss")
+~~~
+
+
+That is bar.
+
+---
+
+- foo
+- bar bax
+`,
+  },
 ].map(m => ({
   ...m,
   content: m.content.replace(/~/g, "`"),

packages/mdx/src/chat/chat.scss

@@ -55,7 +55,7 @@
 
   .ch-scrollycoding-step-content {
     border-radius: 18px !important;
-    padding: 0px !important;
+    padding: 16px !important;
     border: 0px !important;
     margin: 0px !important;
     display: flex !important;
@@ -75,7 +75,7 @@
 }
 
 .ch-chat-message {
-  padding: 16px;
+  padding: 16px !important;
   border-radius: 16px;
   color: white;
   line-height: 1.5;
@@ -103,8 +103,12 @@
   border-top-left-radius: 3px;
 }
 
-.ch-chat-replies {
+.ch-chat-answer:last-child .ch-chat-replies {
   display: flex;
+}
+
+.ch-chat-replies {
+  display: none;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end;

packages/mdx/src/chat/chat.tsx

@@ -132,24 +132,30 @@ function DynamicChat({
         style={{ minHeight: height }}
         ref={contentRef}
       >
-        {conversation.map((kid, i) => (
-          <div
-            key={i}
-            className="ch-scrollycoding-step-content"
-          >
-            {kid.type === "answer" ? (
-              <div className="ch-chat-message ch-chat-answer">
-                {kid.children}
-              </div>
-            ) : kid.type === "question" ? (
-              <div className="ch-chat-message ch-chat-question">
-                {kid.children}
-              </div>
-            ) : (
-              kid.children
-            )}
-          </div>
-        ))}
+        {conversation.map((kid, i) =>
+          kid.type === "answer" ? (
+            <div
+              className="ch-scrollycoding-step-content ch-chat-message ch-chat-answer"
+              key={i}
+            >
+              {kid.children}
+            </div>
+          ) : kid.type === "question" ? (
+            <div
+              className="ch-scrollycoding-step-content ch-chat-message ch-chat-question"
+              key={i}
+            >
+              {kid.children}
+            </div>
+          ) : (
+            <div
+              className="ch-scrollycoding-step-content"
+              key={i}
+            >
+              {kid.children}
+            </div>
+          )
+        )}
       </div>
     </section>
   )