Add memo to sticker

packages/mdx/dev/chat/fake-gpt.tsx

@@ -13,7 +13,7 @@ type ConversationEntry = {
 
 type Conversation = ConversationEntry[]
 const THINKING_MS = 300
-const WRITING_MS = 90
+const WRITING_MS = 400
 
 export function useFakeGPT(
   convo: Conversation,

packages/mdx/pages/chat.tsx

@@ -4,7 +4,10 @@ import { useFakeGPT } from "../dev/chat/fake-gpt"
 
 export default function Page() {
   const inputRef = React.useRef<any>(null)
-  const [convo, sendQuestion] = useFakeGPT(conversation)
+  const [convo, sendQuestion] = useFakeGPT(
+    conversation,
+    true
+  )
 
   const handleSend = () => {
     const value = inputRef?.current?.value
@@ -72,7 +75,10 @@ export default function Page() {
 
 const conversation = [
   {
-    question: `how to stop a <Fetch/> in js?`,
+    question:
+      'convert into typescript function\n{\n      name: "getCityWeather",\n      description: "Get the weather in a given city",\n      parameters: {\n        type: "object",\n        properties: {\n          city: { type: "string", description: "The city" },\n          unit: { type: "string", enum: ["C", "F"] },\n        },\n        required: ["city"],\n      },\n    },'
+        .replace(/\r\n|\r|\n/g, "  \n")
+        .replace(/\t/g, "  "),
     answer: `I'm assuming you're currently using {the Fetch API}
 to make a {request.
 

packages/mdx/src/mdx-client/chat.tsx

@@ -90,21 +90,10 @@ export function Chat({
         ref={stickerRef}
       >
         {newFiles && (
-          <InnerCode
-            codeConfig={{
-              showCopyButton: true,
-              showExpandButton: true,
-            }}
-            northPanel={{
-              tabs: newFiles.map(f => f.name),
-              active: activeFile || newFiles[0]?.name,
-              heightRatio: 1,
-            }}
+          <StickerCode
             files={newFiles}
-            style={{ height: "100%" }}
-            onTabClick={tab => {
-              setActiveFile(tab)
-            }}
+            setActiveFile={setActiveFile}
+            activeFile={activeFile}
           />
         )}
       </div>
@@ -134,6 +123,37 @@ export function Chat({
   )
 }
 
+const StickerCode = React.memo(
+  ({
+    files,
+    setActiveFile,
+    activeFile,
+  }: {
+    files: any[]
+    setActiveFile: any
+    activeFile: any
+  }) => {
+    return (
+      <InnerCode
+        codeConfig={{
+          showCopyButton: true,
+          showExpandButton: true,
+        }}
+        northPanel={{
+          tabs: files.map(f => f.name),
+          active: activeFile || files[0]?.name,
+          heightRatio: 1,
+        }}
+        files={files}
+        style={{ height: "100%" }}
+        onTabClick={tab => {
+          setActiveFile(tab)
+        }}
+      />
+    )
+  }
+)
+
 function Replies({ replies, onReply }) {
   if (!replies || replies.length === 0) return null
   return (
@@ -230,7 +250,10 @@ async function mapFile(
   //   .join(",")
   const code = text
 
-  const result = await highlight(code, lang, theme)
+  const result = await highlight(code, lang, theme).catch(
+    () => highlight(code, "text", theme)
+  )
+
   return {
     name: title,
     focus,