fix: prevent other DOM elements from rerendering when generating
This commit is contained in:
Louis
parent
b5d88f9aa7
commit
4cdab2b98b
@ -1,16 +1,11 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { memo, useMemo } from 'react'
|
||||
|
||||
import Markdown from 'react-markdown'
|
||||
|
||||
import {
|
||||
ChatCompletionRole,
|
||||
ContentType,
|
||||
MessageStatus,
|
||||
ThreadMessage,
|
||||
} from '@janhq/core'
|
||||
import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
|
||||
|
||||
import { Tooltip } from '@janhq/joi'
|
||||
|
||||
@ -50,193 +45,29 @@ import {
|
||||
import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
|
||||
|
||||
const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
let text = ''
|
||||
const isUser = props.role === ChatCompletionRole.User
|
||||
const isSystem = props.role === ChatCompletionRole.System
|
||||
const editMessage = useAtomValue(editMessageAtom)
|
||||
const activeThread = useAtomValue(activeThreadAtom)
|
||||
|
||||
if (props.content && props.content.length > 0) {
|
||||
text = props.content[0]?.text?.value ?? ''
|
||||
}
|
||||
|
||||
const clipboard = useClipboard({ timeout: 1000 })
|
||||
|
||||
function extractCodeLines(node: { children: { children: any[] }[] }) {
|
||||
const codeLines: any[] = []
|
||||
|
||||
// Helper function to extract text recursively from children
|
||||
function getTextFromNode(node: {
|
||||
type: string
|
||||
value: any
|
||||
children: any[]
|
||||
}): string {
|
||||
if (node.type === 'text') {
|
||||
return node.value
|
||||
} else if (node.children) {
|
||||
return node.children.map(getTextFromNode).join('')
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// Traverse each line in the <code> block
|
||||
node.children[0].children.forEach(
|
||||
(lineNode: {
|
||||
type: string
|
||||
tagName: string
|
||||
value: any
|
||||
children: any[]
|
||||
}) => {
|
||||
if (lineNode.type === 'element' && lineNode.tagName === 'span') {
|
||||
const lineContent = getTextFromNode(lineNode)
|
||||
codeLines.push(lineContent)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Join the lines with newline characters for proper formatting
|
||||
return codeLines.join('\n')
|
||||
}
|
||||
function wrapCodeBlocksWithoutVisit() {
|
||||
return (tree: { children: any[] }) => {
|
||||
tree.children = tree.children.map((node) => {
|
||||
if (node.tagName === 'pre' && node.children[0]?.tagName === 'code') {
|
||||
const language = node.children[0].properties.className?.[1]?.replace(
|
||||
'language-',
|
||||
''
|
||||
)
|
||||
|
||||
if (extractCodeLines(node) === '') {
|
||||
return node
|
||||
}
|
||||
|
||||
return {
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className: ['code-block-wrapper'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className: [
|
||||
'code-block',
|
||||
'group/item',
|
||||
'relative',
|
||||
'my-4',
|
||||
'overflow-auto',
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className:
|
||||
'code-header bg-[hsla(var(--app-code-block))] flex justify-between items-center py-2 px-3 code-header--border rounded-t-lg',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {
|
||||
className: 'text-xs font-medium text-gray-300',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
value: language
|
||||
? `${getLanguageFromExtension(language)}`
|
||||
: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'button',
|
||||
properties: {
|
||||
className:
|
||||
'copy-button ml-auto flex items-center gap-1 text-xs font-medium text-gray-400 hover:text-gray-600 focus:outline-none',
|
||||
onClick: (event: Event) => {
|
||||
clipboard.copy(extractCodeLines(node))
|
||||
|
||||
const button = event.currentTarget as HTMLElement
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none text-green-600"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
<span>Copied</span>
|
||||
`
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy pointer-events-none text-gray-400"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
|
||||
<span>Copy</span>
|
||||
`
|
||||
}, 2000)
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
width: '16',
|
||||
height: '16',
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
stroke: 'currentColor',
|
||||
strokeWidth: '2',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
className:
|
||||
'lucide lucide-copy pointer-events-none text-gray-400',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'rect',
|
||||
properties: {
|
||||
width: '14',
|
||||
height: '14',
|
||||
x: '8',
|
||||
y: '8',
|
||||
rx: '2',
|
||||
ry: '2',
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: 'text', value: 'Copy' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
node,
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
return node
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const { onViewFile, onViewFileContainer } = usePath()
|
||||
const tokenSpeed = useAtomValue(tokenSpeedAtom)
|
||||
const messages = useAtomValue(getCurrentChatMessagesAtom)
|
||||
|
||||
const text = useMemo(
|
||||
() => props.content[0]?.text?.value ?? '',
|
||||
[props.content]
|
||||
)
|
||||
const messageType = useMemo(
|
||||
() => props.content[0]?.type ?? '',
|
||||
[props.content]
|
||||
)
|
||||
|
||||
const annotation = useMemo(
|
||||
() => props.content[0]?.text?.annotations[0] ?? '',
|
||||
[props.content]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="group relative mx-auto max-w-[700px] p-4">
|
||||
<div
|
||||
@ -302,15 +133,13 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
)}
|
||||
>
|
||||
<>
|
||||
{props.content[0]?.type === ContentType.Image && (
|
||||
{messageType === ContentType.Image && (
|
||||
<div className="group/image relative mb-2 inline-flex cursor-pointer overflow-hidden rounded-xl">
|
||||
<div className="left-0 top-0 z-20 h-full w-full group-hover/image:inline-block">
|
||||
<RelativeImage
|
||||
src={props.content[0]?.text.annotations[0]}
|
||||
src={annotation}
|
||||
id={props.id}
|
||||
onClick={() =>
|
||||
onViewFile(`${props.content[0]?.text.annotations[0]}`)
|
||||
}
|
||||
onClick={() => onViewFile(annotation)}
|
||||
/>
|
||||
</div>
|
||||
<Tooltip
|
||||
@ -327,13 +156,11 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.content[0]?.type === ContentType.Pdf && (
|
||||
{messageType === ContentType.Pdf && (
|
||||
<div className="group/file bg-secondary relative mb-2 inline-flex w-60 cursor-pointer gap-x-3 overflow-hidden rounded-lg p-4">
|
||||
<div
|
||||
className="absolute left-0 top-0 z-20 hidden h-full w-full bg-black/20 backdrop-blur-sm group-hover/file:inline-block"
|
||||
onClick={() =>
|
||||
onViewFile(`${props.id}.${props.content[0]?.type}`)
|
||||
}
|
||||
onClick={() => onViewFile(`${props.id}.${messageType}`)}
|
||||
/>
|
||||
<Tooltip
|
||||
trigger={
|
||||
@ -369,28 +196,10 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
)}
|
||||
dir="ltr"
|
||||
>
|
||||
<Markdown
|
||||
remarkPlugins={[remarkMath]}
|
||||
rehypePlugins={[
|
||||
[rehypeKatex, { throwOnError: false }],
|
||||
rehypeRaw,
|
||||
[
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
rehypeHighlight,
|
||||
{
|
||||
languages: { latex },
|
||||
subset: false,
|
||||
plainText: ['txt', 'text'],
|
||||
},
|
||||
],
|
||||
[rehypeHighlightCodeLines, { showLineNumbers: true }],
|
||||
wrapCodeBlocksWithoutVisit,
|
||||
]}
|
||||
skipHtml={true}
|
||||
>
|
||||
{text}
|
||||
</Markdown>
|
||||
<MarkdownTextMessage
|
||||
id={props.id}
|
||||
text={text}
|
||||
></MarkdownTextMessage>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@ -399,4 +208,209 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
)
|
||||
}
|
||||
|
||||
export const MarkdownTextMessage = memo(
|
||||
({ text, id }: { id: string; text: string }) => {
|
||||
console.log('rerender', id)
|
||||
const clipboard = useClipboard({ timeout: 1000 })
|
||||
|
||||
function extractCodeLines(node: { children: { children: any[] }[] }) {
|
||||
const codeLines: any[] = []
|
||||
|
||||
// Helper function to extract text recursively from children
|
||||
function getTextFromNode(node: {
|
||||
type: string
|
||||
value: any
|
||||
children: any[]
|
||||
}): string {
|
||||
if (node.type === 'text') {
|
||||
return node.value
|
||||
} else if (node.children) {
|
||||
return node.children.map(getTextFromNode).join('')
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// Traverse each line in the <code> block
|
||||
node.children[0].children.forEach(
|
||||
(lineNode: {
|
||||
type: string
|
||||
tagName: string
|
||||
value: any
|
||||
children: any[]
|
||||
}) => {
|
||||
if (lineNode.type === 'element' && lineNode.tagName === 'span') {
|
||||
const lineContent = getTextFromNode(lineNode)
|
||||
codeLines.push(lineContent)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Join the lines with newline characters for proper formatting
|
||||
return codeLines.join('\n')
|
||||
}
|
||||
function wrapCodeBlocksWithoutVisit() {
|
||||
return (tree: { children: any[] }) => {
|
||||
tree.children = tree.children.map((node) => {
|
||||
if (node.tagName === 'pre' && node.children[0]?.tagName === 'code') {
|
||||
const language =
|
||||
node.children[0].properties.className?.[1]?.replace(
|
||||
'language-',
|
||||
''
|
||||
)
|
||||
|
||||
if (extractCodeLines(node) === '') {
|
||||
return node
|
||||
}
|
||||
|
||||
return {
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className: ['code-block-wrapper'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className: [
|
||||
'code-block',
|
||||
'group/item',
|
||||
'relative',
|
||||
'my-4',
|
||||
'overflow-auto',
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className:
|
||||
'code-header bg-[hsla(var(--app-code-block))] flex justify-between items-center py-2 px-3 code-header--border rounded-t-lg',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {
|
||||
className: 'text-xs font-medium text-gray-300',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
value: language
|
||||
? `${getLanguageFromExtension(language)}`
|
||||
: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'button',
|
||||
properties: {
|
||||
className:
|
||||
'copy-button ml-auto flex items-center gap-1 text-xs font-medium text-gray-400 hover:text-gray-600 focus:outline-none',
|
||||
onClick: (event: Event) => {
|
||||
clipboard.copy(extractCodeLines(node))
|
||||
|
||||
const button = event.currentTarget as HTMLElement
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none text-green-600"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
<span>Copied</span>
|
||||
`
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy pointer-events-none text-gray-400"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
|
||||
<span>Copy</span>
|
||||
`
|
||||
}, 2000)
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
width: '16',
|
||||
height: '16',
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
stroke: 'currentColor',
|
||||
strokeWidth: '2',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
className:
|
||||
'lucide lucide-copy pointer-events-none text-gray-400',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'rect',
|
||||
properties: {
|
||||
width: '14',
|
||||
height: '14',
|
||||
x: '8',
|
||||
y: '8',
|
||||
rx: '2',
|
||||
ry: '2',
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: 'text', value: 'Copy' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
node,
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
return node
|
||||
})
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Markdown
|
||||
remarkPlugins={[remarkMath]}
|
||||
rehypePlugins={[
|
||||
[rehypeKatex, { throwOnError: false }],
|
||||
rehypeRaw,
|
||||
[
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
rehypeHighlight,
|
||||
{
|
||||
languages: { latex },
|
||||
subset: false,
|
||||
plainText: ['txt', 'text'],
|
||||
},
|
||||
],
|
||||
[rehypeHighlightCodeLines, { showLineNumbers: true }],
|
||||
wrapCodeBlocksWithoutVisit,
|
||||
]}
|
||||
skipHtml={true}
|
||||
>
|
||||
{text}
|
||||
</Markdown>
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default React.memo(SimpleTextMessage)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user