### What problem does this PR solve? Feat: Display Think for Deepseek R1 model #4903 ### Type of change - [x] New Feature (non-breaking change which adds functionality)tags/v0.17.0
| .messageItemContentReverse { | .messageItemContentReverse { | ||||
| flex-direction: row-reverse; | flex-direction: row-reverse; | ||||
| } | } | ||||
| .messageText { | |||||
| .chunkText(); | |||||
| padding: 0 14px; | |||||
| background-color: rgba(249, 250, 251, 1); | |||||
| word-break: break-word; | |||||
| } | |||||
| .messageTextBase() { | .messageTextBase() { | ||||
| padding: 6px 10px; | padding: 6px 10px; | ||||
| border-radius: 8px; | border-radius: 8px; | ||||
| & > p { | & > p { | ||||
| margin: 0; | margin: 0; | ||||
| } | } | ||||
| :global(section.think) { | |||||
| padding-left: 10px; | |||||
| color: #8b8b8b; | |||||
| border-left: 2px solid #d5d3d3; | |||||
| margin-bottom: 10px; | |||||
| font-size: 12px; | |||||
| } | |||||
| } | } | ||||
| .messageText { | .messageText { | ||||
| .chunkText(); | .chunkText(); | ||||
| .messageTextBase(); | .messageTextBase(); | ||||
| background-color: #1668dc; | background-color: #1668dc; | ||||
| word-break: break-word; | word-break: break-word; | ||||
| :global(section.think) { | |||||
| color: rgb(166, 166, 166); | |||||
| border-left-color: rgb(78, 78, 86); | |||||
| } | |||||
| } | } | ||||
| .messageUserText { | .messageUserText { |
| import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you | import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you | ||||
| import { preprocessLaTeX } from '@/utils/chat'; | |||||
| import { preprocessLaTeX, replaceThinkToSection } from '@/utils/chat'; | |||||
| import { replaceTextByOldReg } from '../utils'; | import { replaceTextByOldReg } from '../utils'; | ||||
| import { pipe } from 'lodash/fp'; | |||||
| import styles from './index.less'; | import styles from './index.less'; | ||||
| const reg = /(~{2}\d+={2})/g; | const reg = /(~{2}\d+={2})/g; | ||||
| text = t('chat.searching'); | text = t('chat.searching'); | ||||
| } | } | ||||
| const nextText = replaceTextByOldReg(text); | const nextText = replaceTextByOldReg(text); | ||||
| return loading ? nextText?.concat('~~2$$') : preprocessLaTeX(nextText); | |||||
| return loading | |||||
| ? nextText?.concat('~~2$$') | |||||
| : pipe(replaceThinkToSection, preprocessLaTeX)(nextText); | |||||
| }, [content, loading, t]); | }, [content, loading, t]); | ||||
| useEffect(() => { | useEffect(() => { |
| ); | ); | ||||
| return inlineProcessedContent; | return inlineProcessedContent; | ||||
| }; | }; | ||||
| export function replaceThinkToSection(text: string) { | |||||
| const pattern = /<think>([\s\S]*?)<\/think>/g; | |||||
| const result = text.replace(pattern, '<section class="think">$1</section>'); | |||||
| return result; | |||||
| } |