Support rendering partial markdown and improve performance

CNSeniorious000 commented 1 month ago

Use solid-markdown to parse and render markdown without frequently updating DOM

Closes #68

Sourcery 的总结

用 solid-markdown 替换现有的 markdown 渲染方法，以支持部分 markdown 渲染，并通过最小化 DOM 更新来提高性能。重构代码以使用带有 remark 和 rehype 插件的 unified，并更新 API 模型版本。

新功能：

引入使用 solid-markdown 库渲染部分 markdown 的支持，增强 markdown 渲染的灵活性。

增强：

通过使用 solid-markdown 进行 markdown 解析和渲染，减少频繁的 DOM 更新以提高性能。
重构 markdown 渲染逻辑以使用带有 remark 和 rehype 插件的 unified，以提高可扩展性和可维护性。

杂务：

将 API 请求中使用的模型从 'llama3-70b-8192' 更新为 'llama-3.2-90b-text-preview'。

Original summary in English

## Summary by Sourcery Replace the existing markdown rendering approach with `solid-markdown` to support partial markdown rendering and improve performance by minimizing DOM updates. Refactor the code to use `unified` with `remark` and `rehype` plugins, and update the API model version. New Features: - Introduce support for rendering partial markdown using the `solid-markdown` library, enhancing the flexibility of markdown rendering. Enhancements: - Improve performance by reducing frequent DOM updates through the use of `solid-markdown` for markdown parsing and rendering. - Refactor the markdown rendering logic to use `unified` with `remark` and `rehype` plugins for better extensibility and maintainability. Chores: - Update the model used in API requests from 'llama3-70b-8192' to 'llama-3.2-90b-text-preview'.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
endless-chat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 6:41am
free-chat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 6:41am

sourcery-ai[bot] commented 1 month ago

审核指南 by Sourcery

此拉取请求实现了重大更改，以改进 Markdown 渲染和代码块功能。主要更改包括从 markdown-it 切换到 solid-markdown 进行渲染，增强代码块样式和复制功能，并更新依赖项。

时序图

sequenceDiagram
    participant C as Component
    participant SM as SolidMarkdown
    participant RP as RemarkPlugins
    participant RH as RehypePlugins
    participant CB as CodeBlock
    C->>SM: Render markdown
    SM->>RP: Process with remark plugins
    SM->>RH: Process with rehype plugins
    SM->>CB: Render code blocks
    CB-->>SM: Return rendered code
    SM-->>C: Return rendered markdown

文件级更改

更改	详情	文件
用 solid-markdown 替换 markdown-it 进行渲染	移除 markdown-it 和相关插件添加 solid-markdown 和相关插件（remark-gfm, remark-breaks, remark-math, rehype-highlight, rehype-katex）更新 MessageItem 组件以使用 SolidMarkdown 而不是 markdown-it 实现一个新的 CodeBlock 组件以更好地渲染代码和复制功能	`pnpm-lock.yaml` `src/components/MessageItem.tsx` `src/components/CodeBlock.tsx`
改进代码块样式和功能	创建一个带有集成复制功能的新 CodeBlock 组件更新 message.css 中代码块的 CSS 修改 uno.config.ts 以调整复制按钮样式	`src/components/CodeBlock.tsx` `src/message.css` `uno.config.ts`
更新 API 模型和依赖项	将 API 模型从 'llama3-70b-8192' 更改为 'llama-3.2-90b-text-preview' 更新 pnpm-lock.yaml 中的各种依赖项	`src/utils/misc.ts` `pnpm-lock.yaml`

提示和命令

#### 与 Sourcery 互动 - **触发新审核：** 在拉取请求中评论 `@sourcery-ai review`。 - **继续讨论：** 直接回复 Sourcery 的审核评论。 - **从审核评论生成 GitHub 问题：** 通过回复审核评论请求 Sourcery 创建一个问题。 #### 自定义您的体验访问您的[仪表板](https://app.sourcery.ai)以： - 启用或禁用审核功能，如 Sourcery 生成的拉取请求摘要、审核指南等。 - 更改审核语言。 - 添加、删除或编辑自定义审核说明。 - 调整其他审核设置。 #### 获取帮助 - [联系我们的支持团队](mailto:support@sourcery.ai)以获取问题或反馈。 - 访问我们的[文档](https://docs.sourcery.ai)以获取详细指南和信息。 - 通过关注我们在 [X/Twitter](https://x.com/SourceryAI)、[LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 或 [GitHub](https://github.com/sourcery-ai) 上的 Sourcery 团队保持联系。

Original review guide in English

## Reviewer's Guide by Sourcery This pull request implements significant changes to improve markdown rendering and code block functionality. The main changes include switching from `markdown-it` to `solid-markdown` for rendering, enhancing code block styling and copy functionality, and updating dependencies. ### Sequence Diagram ```mermaid sequenceDiagram participant C as Component participant SM as SolidMarkdown participant RP as RemarkPlugins participant RH as RehypePlugins participant CB as CodeBlock C->>SM: Render markdown SM->>RP: Process with remark plugins SM->>RH: Process with rehype plugins SM->>CB: Render code blocks CB-->>SM: Return rendered code SM-->>C: Return rendered markdown ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Replaced markdown-it with solid-markdown for rendering |

Removed markdown-it and related plugins
Added solid-markdown and related plugins (remark-gfm, remark-breaks, remark-math, rehype-highlight, rehype-katex)
Updated MessageItem component to use SolidMarkdown instead of markdown-it
Implemented a new CodeBlock component for better code rendering and copy functionality

| `pnpm-lock.yaml`
`src/components/MessageItem.tsx`
`src/components/CodeBlock.tsx` | | Improved code block styling and functionality |

Created a new CodeBlock component with integrated copy functionality
Updated CSS for code blocks in message.css
Modified uno.config.ts to adjust copy button styling

| `src/components/CodeBlock.tsx`
`src/message.css`
`uno.config.ts` | | Updated API model and dependencies |

Changed the API model from 'llama3-70b-8192' to 'llama-3.2-90b-text-preview'
Updated various dependencies in pnpm-lock.yaml

| `src/utils/misc.ts`
`pnpm-lock.yaml` | ---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

netlify[bot] commented 1 month ago

Deploy Preview for promplate-demo ready!

Name	Link
Latest commit
Latest deploy log	https://app.netlify.com/sites/promplate-demo/deploys/670be3a15c531f920a288d3e
Deploy Preview	https://deploy-preview-73--promplate-demo.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

CNSeniorious000 commented 1 month ago

Still,

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'inTable')

https://github.com/remarkjs/remark-gfm/issues/57

CNSeniorious000 commented 1 month ago

Created a PR to the upstream: https://github.com/andi23rosca/solid-markdown/pull/36

CNSeniorious000 / free-chat