New chat

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

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

packages/mdx/pages/new-chat.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { NewChat } from "../src/chat/new-chat"
+import { useConversation } from "../src/chat/use-conversation"
+import theme from "@code-hike/lighter/themes/github-dark.json"
+
+export default function Page() {
+  const conversation = useConversation(
+    messages,
+    false,
+    x => {
+      console.log(x)
+    },
+    theme
+  )
+  console.log(conversation)
+  return (
+    <div>
+      <style jsx global>{`
+        html,
+        body,
+        body > div:first-child,
+        div#__next,
+        div#__next > div {
+          background: #ccc !important;
+          color: #fff;
+        }
+
+        .ch-chat {
+          width: 900px;
+          margin: 10vh auto;
+        }
+      `}</style>
+      <NewChat
+        conversation={conversation}
+        height="80vh"
+        theme={theme as any}
+      />
+    </div>
+  )
+}
+
+const messages = [
+  {
+    role: "user",
+    content: "hi",
+  },
+  {
+    role: "assistant",
+    content: `
+~~~js foo.js
+console.log("this is foo")
+~~~
+
+~~~js bar.js
+console.log("this is bar")
+~~~
+
+That is foo
+`,
+  },
+  {
+    role: "user",
+    content: "help me `code`",
+  },
+].map(m => ({
+  ...m,
+  content: m.content.replace(/~/g, "`"),
+}))

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

@@ -0,0 +1,108 @@
+// Vitest Snapshot v1
+
+exports[`
+\`\`\`js foo.js
+console.log(1)
+
+ 1`] = `
+{
+  "content": "",
+  "fileInfoList": [
+    {
+      "lang": "js",
+      "name": "foo.js",
+      "open": true,
+      "text": "console.log(1)
+
+",
+    },
+  ],
+  "replies": [],
+}
+`;
+
+exports[`
+\`\`\`js foo.js
+console.log(1)
+
+\`\`\`
+
+\`\`\`ts bar.ts
+console.log(2)
+\`\`\`
+
+# hello
+
+world 1`] = `
+{
+  "content": "# hello
+
+world",
+  "fileInfoList": [
+    {
+      "lang": "js",
+      "name": "foo.js",
+      "open": false,
+      "text": "console.log(1)
+",
+    },
+    {
+      "lang": "ts",
+      "name": "bar.ts",
+      "open": false,
+      "text": "console.log(2)",
+    },
+  ],
+  "replies": [],
+}
+`;
+
+exports[`
+\`\`\`js foo.js
+console.log(1)
+\`\`\`
+
+# hello
+
+world
+
+---
+
+- yes
+- no
+
+ 1`] = `
+{
+  "content": "# hello
+
+world",
+  "fileInfoList": [
+    {
+      "lang": "js",
+      "name": "foo.js",
+      "open": false,
+      "text": "console.log(1)",
+    },
+  ],
+  "replies": [
+    "yes",
+    "no",
+  ],
+}
+`;
+
+exports[` 1`] = `
+{
+  "content": "",
+  "fileInfoList": [],
+  "replies": [],
+}
+`;
+
+exports[`Hello 1`] = `
+{
+  "content": "Hello",
+  "fileInfoList": [],
+  "replies": [],
+}
+`;

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

@@ -0,0 +1,44 @@
+import { expect, test } from "vitest"
+import { parseAnswer } from "./answer-parser"
+
+const fixtures = [
+  ``,
+  `Hello`,
+  `
+~~~js foo.js
+console.log(1)
+~~~
+
+# hello
+
+world
+
+---
+
+- yes
+- no
+
+`,
+  `
+~~~js foo.js
+console.log(1)
+
+~~~
+
+~~~ts bar.ts
+console.log(2)
+~~~
+
+# hello
+
+world`,
+  `
+~~~js foo.js
+console.log(1)
+
+`,
+].map(x => x.replace(/~/g, "`"))
+
+test.each(fixtures)("%s", async markdown => {
+  expect(parseAnswer(markdown)).toMatchSnapshot()
+})

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

@@ -0,0 +1,65 @@
+// turns streaming markdown into codeblocks, content and replies
+// doesnt care about previous answers
+export function parseAnswer(markdown: string) {
+  const { markdownWithoutCode, fileInfoList } =
+    extractCodeBlocks(markdown)
+  const [answerText, repliesText] =
+    markdownWithoutCode.split(/\n+---\n+/)
+  const replies = repliesText
+    ? repliesText
+        .split(/\n/)
+        .map((r: string) => r.replace(/^-\s*/, "").trim())
+        .filter((r: any) => r !== "")
+    : []
+  return {
+    fileInfoList: fileInfoList,
+    content: answerText,
+    replies,
+  }
+}
+
+function extractCodeBlocks(markdown: string) {
+  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,
+    })
+  }
+  return { markdownWithoutCode, fileInfoList }
+}
+
+function codeblockToFileInfo(codeblock: string): {
+  lang: string
+  name: string
+  text: string
+} {
+  const codeBlockPattern =
+    /```([^ \n]+)? ?([^\n]+)?\n([\s\S]*?)\n?```/g
+
+  const match = codeBlockPattern.exec(codeblock)
+
+  return {
+    lang: match?.[1] || "",
+    name: match?.[2] || "",
+    text: match?.[3] || "",
+  }
+}

packages/mdx/src/chat/laguages.ts

@@ -0,0 +1,34 @@
+import { preload } from "@code-hike/lighter/dist/browser.esm.mjs"
+
+const cache = new Map<
+  string,
+  { promise: Promise<boolean>; loaded: boolean }
+>()
+
+export function getLoadedLanguages() {
+  return Array.from(cache.entries())
+    .filter(([, { loaded }]) => loaded)
+    .map(([lang]) => lang)
+}
+
+export function isLangLoaded(lang: string) {
+  // if is server side return false
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  return cache.get(lang)?.loaded
+}
+
+export async function loadLang(lang: string) {
+  // TODO what happens if the lang is not supported?
+  if (cache.has(lang)) {
+    return cache.get(lang)!.promise
+  }
+
+  const promise = preload([lang])
+  cache.set(lang, { promise, loaded: false })
+  await promise
+  cache.set(lang, { promise, loaded: true })
+  return promise
+}