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,16 +45,172 @@ 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 { 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
|
||||
className={twMerge(
|
||||
'mb-2 flex items-center justify-start gap-x-2',
|
||||
!isUser && 'mt-2'
|
||||
)}
|
||||
>
|
||||
{!isUser && !isSystem && <LogoMark width={28} />}
|
||||
{isUser && (
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-[hsla(var(--app-border))] last:border-none">
|
||||
<svg
|
||||
width="12"
|
||||
height="16"
|
||||
viewBox="0 0 12 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 0.497864C4.34315 0.497864 3 1.84101 3 3.49786C3 5.15472 4.34315 6.49786 6 6.49786C7.65685 6.49786 9 5.15472 9 3.49786C9 1.84101 7.65685 0.497864 6 0.497864ZM9.75 7.99786L2.24997 7.99787C1.00734 7.99787 0 9.00527 0 10.2479C0 11.922 0.688456 13.2633 1.81822 14.1701C2.93013 15.0625 4.42039 15.4979 6 15.4979C7.57961 15.4979 9.06987 15.0625 10.1818 14.1701C11.3115 13.2633 12 11.922 12 10.2479C12 9.00522 10.9926 7.99786 9.75 7.99786Z"
|
||||
fill="#9CA3AF"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
'font-extrabold capitalize',
|
||||
isUser && 'text-gray-500'
|
||||
)}
|
||||
>
|
||||
{isUser
|
||||
? props.role
|
||||
: (activeThread?.assistants[0].assistant_name ?? props.role)}
|
||||
</div>
|
||||
<p className="text-xs font-medium text-gray-400">
|
||||
{displayDate(props.created)}
|
||||
</p>
|
||||
<div
|
||||
className={twMerge(
|
||||
'absolute right-0 cursor-pointer transition-all',
|
||||
messages[messages.length - 1]?.id === props.id && !isUser
|
||||
? 'absolute -bottom-8 right-4'
|
||||
: 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
|
||||
)}
|
||||
>
|
||||
<MessageToolbar message={props} />
|
||||
</div>
|
||||
{tokenSpeed &&
|
||||
tokenSpeed.message === props.id &&
|
||||
tokenSpeed.tokenSpeed > 0 && (
|
||||
<p className="absolute right-8 text-xs font-medium text-[hsla(var(--text-secondary))]">
|
||||
Token Speed: {Number(tokenSpeed.tokenSpeed).toFixed(2)}t/s
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
'w-full',
|
||||
!isUser && !text.includes(' ') && 'break-all'
|
||||
)}
|
||||
>
|
||||
<>
|
||||
{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={annotation}
|
||||
id={props.id}
|
||||
onClick={() => onViewFile(annotation)}
|
||||
/>
|
||||
</div>
|
||||
<Tooltip
|
||||
trigger={
|
||||
<div
|
||||
className="absolute right-2 top-2 z-20 hidden h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--app-bg))] group-hover/image:flex"
|
||||
onClick={onViewFileContainer}
|
||||
>
|
||||
<FolderOpenIcon size={20} />
|
||||
</div>
|
||||
}
|
||||
content={<span>{openFileTitle()}</span>}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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}.${messageType}`)}
|
||||
/>
|
||||
<Tooltip
|
||||
trigger={
|
||||
<div
|
||||
className="absolute right-2 top-2 z-20 hidden h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--app-bg))] group-hover/file:flex"
|
||||
onClick={onViewFileContainer}
|
||||
>
|
||||
<FolderOpenIcon size={20} />
|
||||
</div>
|
||||
}
|
||||
content={<span>{openFileTitle()}</span>}
|
||||
/>
|
||||
<Icon type={props.content[0].type} />
|
||||
<div className="w-full">
|
||||
<h6 className="line-clamp-1 w-4/5 font-medium">
|
||||
{props.content[0].text.name?.replaceAll(/[-._]/g, ' ')}
|
||||
</h6>
|
||||
<p className="text-[hsla(var(--text-secondary)]">
|
||||
{toGibibytes(Number(props.content[0].text.size))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editMessage === props.id ? (
|
||||
<div>
|
||||
<EditChatInput message={props} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={twMerge(
|
||||
'message max-width-[100%] flex flex-col gap-y-2 overflow-auto leading-relaxed'
|
||||
)}
|
||||
dir="ltr"
|
||||
>
|
||||
<MarkdownTextMessage
|
||||
id={props.id}
|
||||
text={text}
|
||||
></MarkdownTextMessage>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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[] }[] }) {
|
||||
@ -101,7 +252,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
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(
|
||||
const language =
|
||||
node.children[0].properties.className?.[1]?.replace(
|
||||
'language-',
|
||||
''
|
||||
)
|
||||
@ -232,143 +384,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const { onViewFile, onViewFileContainer } = usePath()
|
||||
const tokenSpeed = useAtomValue(tokenSpeedAtom)
|
||||
const messages = useAtomValue(getCurrentChatMessagesAtom)
|
||||
|
||||
return (
|
||||
<div className="group relative mx-auto max-w-[700px] p-4">
|
||||
<div
|
||||
className={twMerge(
|
||||
'mb-2 flex items-center justify-start gap-x-2',
|
||||
!isUser && 'mt-2'
|
||||
)}
|
||||
>
|
||||
{!isUser && !isSystem && <LogoMark width={28} />}
|
||||
{isUser && (
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-[hsla(var(--app-border))] last:border-none">
|
||||
<svg
|
||||
width="12"
|
||||
height="16"
|
||||
viewBox="0 0 12 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 0.497864C4.34315 0.497864 3 1.84101 3 3.49786C3 5.15472 4.34315 6.49786 6 6.49786C7.65685 6.49786 9 5.15472 9 3.49786C9 1.84101 7.65685 0.497864 6 0.497864ZM9.75 7.99786L2.24997 7.99787C1.00734 7.99787 0 9.00527 0 10.2479C0 11.922 0.688456 13.2633 1.81822 14.1701C2.93013 15.0625 4.42039 15.4979 6 15.4979C7.57961 15.4979 9.06987 15.0625 10.1818 14.1701C11.3115 13.2633 12 11.922 12 10.2479C12 9.00522 10.9926 7.99786 9.75 7.99786Z"
|
||||
fill="#9CA3AF"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
'font-extrabold capitalize',
|
||||
isUser && 'text-gray-500'
|
||||
)}
|
||||
>
|
||||
{isUser
|
||||
? props.role
|
||||
: (activeThread?.assistants[0].assistant_name ?? props.role)}
|
||||
</div>
|
||||
<p className="text-xs font-medium text-gray-400">
|
||||
{displayDate(props.created)}
|
||||
</p>
|
||||
<div
|
||||
className={twMerge(
|
||||
'absolute right-0 cursor-pointer transition-all',
|
||||
messages[messages.length - 1]?.id === props.id && !isUser
|
||||
? 'absolute -bottom-8 right-4'
|
||||
: 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
|
||||
)}
|
||||
>
|
||||
<MessageToolbar message={props} />
|
||||
</div>
|
||||
{tokenSpeed &&
|
||||
tokenSpeed.message === props.id &&
|
||||
tokenSpeed.tokenSpeed > 0 && (
|
||||
<p className="absolute right-8 text-xs font-medium text-[hsla(var(--text-secondary))]">
|
||||
Token Speed: {Number(tokenSpeed.tokenSpeed).toFixed(2)}t/s
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
'w-full',
|
||||
!isUser && !text.includes(' ') && 'break-all'
|
||||
)}
|
||||
>
|
||||
<>
|
||||
{props.content[0]?.type === 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]}
|
||||
id={props.id}
|
||||
onClick={() =>
|
||||
onViewFile(`${props.content[0]?.text.annotations[0]}`)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Tooltip
|
||||
trigger={
|
||||
<div
|
||||
className="absolute right-2 top-2 z-20 hidden h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--app-bg))] group-hover/image:flex"
|
||||
onClick={onViewFileContainer}
|
||||
>
|
||||
<FolderOpenIcon size={20} />
|
||||
</div>
|
||||
}
|
||||
content={<span>{openFileTitle()}</span>}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.content[0]?.type === 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}`)
|
||||
}
|
||||
/>
|
||||
<Tooltip
|
||||
trigger={
|
||||
<div
|
||||
className="absolute right-2 top-2 z-20 hidden h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--app-bg))] group-hover/file:flex"
|
||||
onClick={onViewFileContainer}
|
||||
>
|
||||
<FolderOpenIcon size={20} />
|
||||
</div>
|
||||
}
|
||||
content={<span>{openFileTitle()}</span>}
|
||||
/>
|
||||
<Icon type={props.content[0].type} />
|
||||
<div className="w-full">
|
||||
<h6 className="line-clamp-1 w-4/5 font-medium">
|
||||
{props.content[0].text.name?.replaceAll(/[-._]/g, ' ')}
|
||||
</h6>
|
||||
<p className="text-[hsla(var(--text-secondary)]">
|
||||
{toGibibytes(Number(props.content[0].text.size))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editMessage === props.id ? (
|
||||
<div>
|
||||
<EditChatInput message={props} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={twMerge(
|
||||
'message max-width-[100%] flex flex-col gap-y-2 overflow-auto leading-relaxed'
|
||||
)}
|
||||
dir="ltr"
|
||||
>
|
||||
<Markdown
|
||||
remarkPlugins={[remarkMath]}
|
||||
rehypePlugins={[
|
||||
@ -391,12 +408,9 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
|
||||
>
|
||||
{text}
|
||||
</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default React.memo(SimpleTextMessage)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user