lobehub / lobe-chat

🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / Azure / DeepSeek), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT/ Claude application.
https://chat-preview.lobehub.com
Other
40.97k stars 9.34k forks source link

[Request] 建议:用户消息不用渲染markdown(代码中的注释“#”被渲染成一级标题) #3858

Open SunLemuria opened 1 week ago

SunLemuria commented 1 week ago

🥰 需求描述

image

如python代码,用"#"做注释就会被渲染成一级标题

image image

这个地方渲染成了text block,不确定是不是因为空格原因导致

🧐 解决方案

不渲染markdown,claude官网貌似就是这样的

📝 补充信息

No response

lobehubbot commented 1 week ago

👀 @SunLemuria

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事,并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

dosubot[bot] commented 1 week ago

To address the issue of user messages rendering Markdown (e.g., Python comments using # being rendered as headers), you can modify the rendering logic to disable Markdown for user messages. Here's how you can do it:

  1. Locate the UserMessage Component: The UserMessage component is responsible for rendering user messages. You need to update this component to disable Markdown rendering.

  2. Update the UserMessage Component: Modify the UserMessage component to render the content as plain text instead of Markdown. Here's an example of how you can do this:

    import React from 'react';
    import { ChatMessage } from '@/types/message';
    
    const UserMessage: React.FC<ChatMessage> = ({ content }) => {
     return (
       <div style={{ whiteSpace: 'pre-wrap' }}>
         {content}
       </div>
     );
    };
    
    export default UserMessage;
  3. Update the renderMessages Mapping: Ensure that the renderMessages mapping uses the updated UserMessage component:

    import { UserMessage } from './User';
    
    export const renderMessages: Record<string, RenderMessage> = {
     user: UserMessage,
    };

By making these changes, user messages will be rendered as plain text, avoiding the issue of Markdown rendering (e.g., # being interpreted as headers).

This approach ensures that user messages are displayed as intended without any Markdown formatting, similar to the behavior on the Claude website.

To continue talking to Dosu, mention @dosu.

arvinxx commented 1 week ago

你包一个 ```python 不行吗

lobehubbot commented 1 week ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


Can't you include ```python?

SunLemuria commented 1 week ago

你包一个 ```python 不行吗

这应该算一个小缺陷?而且应该存在解法(可以看看别家的) 另外如果我的代码很长,往往要跳很远去包 而且让用户机械重复去迁就是不太user friendly的,长久下来体验不会很好

希望lobe-chat越来越好

lobehubbot commented 1 week ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


Can't you include ```python?

Should this be considered a minor flaw? And there should be a solution (you can look at others) In addition, if my code is very long, I often have to jump far to wrap it up. Moreover, it is not very user friendly to allow users to repeat themselves mechanically, and the long-term experience will not be very good.

arvinxx commented 1 week ago

这应该算一个小缺陷?而且应该存在解法(可以看看别家的)

具体能介绍下是怎么样的解法么?

lobehubbot commented 1 week ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


Should this be considered a minor flaw? And there should be a solution (you can look at others)

Can you tell me specifically what the solution is?

SunLemuria commented 1 week ago

这应该算一个小缺陷?而且应该存在解法(可以看看别家的)

具体能介绍下是怎么样的解法么?

这块没有研究过,但目前这个问题只有在lobe这里遇到了,我可以多看看其他家的处理方式(指页面表现,前端我不熟),包括商业的开源的,然后整理出来,但不确定什么时候能完成,因为最近比较忙

lobehubbot commented 1 week ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


Should this be considered a minor flaw? And there should be a solution (you can look at others)

Can you specifically introduce the solution?

I have not studied this area, but currently this problem has only been encountered here at Lobe. I can look at other companies' handling methods (referring to page performance, I am not familiar with the front end), including commercial open source ones, and then sort them out, but I can't Determine when it can be completed because I have been quite busy recently.

TONY-STARK-TECH commented 1 week ago

ಥ_ಥ

lobehubbot commented 1 week ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


th_th

jorben commented 1 week ago

个人觉得Markdown挺好的,可以非常清晰的指定 不同的内容是什么格式,输入代码就用代码块

就是有个小问题,如果输入框中内容已经输入了多行,不支持在前面的行前增加换行,会跳到末尾

lobehubbot commented 1 week ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


Personally, I think Markdown is very good. It can specify the format of different content very clearly. Just use code blocks to enter the code.

There is just a small problem. If multiple lines have been entered in the input box, adding a newline before the previous line is not supported and will jump to the end.