Merge branch 'main' into pr/ShikangPang/98

This commit is contained in:
Andrew 2024-10-14 16:45:31 -07:00
commit 00f59e9555
3 changed files with 23 additions and 22 deletions

View file

@ -56,8 +56,8 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
</>
}
else if (role === 'assistant') {
const tokens = marked.lexer(children); // https://marked.js.org/using_pro#renderer
chatbubbleContents = <MarkdownRender tokens={tokens} /> // sectionsHTML
chatbubbleContents = <MarkdownRender string={children} /> // sectionsHTML
}

View file

@ -60,9 +60,6 @@ function ChatProvider({ children }: { children: ReactNode }) {
setCurrentThreadId(currentThread.id)
}
console.log('adding message: ', currentThreadId, currentThread.id, message.displayContent)
console.log('allThreads', allThreads)
setAllThreads({
...allThreads.current,
[currentThread.id]: {

View file

@ -1,9 +1,9 @@
import React, { JSX, useState } from "react"
import { MarkedToken, Token, TokensList } from "marked"
import { awaitVSCodeResponse, getVSCodeAPI } from "../getVscodeApi"
import React, { JSX } from "react"
import { marked, MarkedToken, Token, TokensList } from "marked"
import BlockCode from "./BlockCode"
const Render = ({ token }: { token: Token }) => {
const RenderToken = ({ token, nested = false }: { token: Token | string, nested?: boolean }): JSX.Element => {
// deal with built-in tokens first (assume marked token)
const t = token as MarkedToken
@ -62,7 +62,7 @@ const Render = ({ token }: { token: Token }) => {
const ListTag = t.ordered ? "ol" : "ul"
return (
<ListTag
start={t.start !== "" ? t.start : undefined}
start={t.start ? t.start : undefined}
className={`list-inside ${t.ordered ? "list-decimal" : "list-disc"}`}
>
{t.items.map((item, index) => (
@ -70,7 +70,7 @@ const Render = ({ token }: { token: Token }) => {
{item.task && (
<input type="checkbox" checked={item.checked} readOnly />
)}
{item.text}
<MarkdownRender string={item.text} nested={true} />
</li>
))}
</ListTag>
@ -78,15 +78,17 @@ const Render = ({ token }: { token: Token }) => {
}
if (t.type === "paragraph") {
return (
<p>
{t.tokens.map((token, index) => (
<Render key={index} token={token} />
))}
</p>
)
const contents = <>
{t.tokens.map((token, index) => (
<RenderToken key={index} token={token} />
))}
</>
if (nested)
return contents
return <p>{contents}</p>
}
// don't actually render <html> tags, just render strings of them
if (t.type === "html") {
return (
<pre>
@ -102,7 +104,7 @@ const Render = ({ token }: { token: Token }) => {
}
if (t.type === "def") {
return null // Definitions are typically not rendered
return <></> // Definitions are typically not rendered
}
if (t.type === "link") {
@ -138,6 +140,7 @@ const Render = ({ token }: { token: Token }) => {
return <br />
}
// strikethrough
if (t.type === "del") {
return <del>{t.text}</del>
}
@ -151,14 +154,15 @@ const Render = ({ token }: { token: Token }) => {
)
}
const MarkdownRender = ({ tokens }: { tokens: TokensList }) => {
const MarkdownRender = ({ string, nested = false }: { string: string, nested?: boolean }) => {
const tokens = marked.lexer(string); // https://marked.js.org/using_pro#renderer
return (
<>
{tokens.map((token, index) => (
<Render key={index} token={token} />
<RenderToken key={index} token={token} nested={nested} />
))}
</>
)
}
export default MarkdownRender
export default MarkdownRender