130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
|
|
import { ChatCompletionRole, ContentType, ThreadMessage } from '@janhq/core'
|
|
|
|
import { Tooltip } from '@janhq/joi'
|
|
|
|
import { useAtomValue } from 'jotai'
|
|
import { FolderOpenIcon } from 'lucide-react'
|
|
import 'katex/dist/katex.min.css'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import LogoMark from '@/containers/Brand/Logo/Mark'
|
|
|
|
import { usePath } from '@/hooks/usePath'
|
|
|
|
import { displayDate } from '@/utils/datetime'
|
|
|
|
import EditChatInput from '../EditChatInput'
|
|
import MessageToolbar from '../MessageToolbar'
|
|
|
|
import { MarkdownTextMessage } from './MarkdownTextMessage'
|
|
|
|
import {
|
|
editMessageAtom,
|
|
getCurrentChatMessagesAtom,
|
|
tokenSpeedAtom,
|
|
} from '@/helpers/atoms/ChatMessage.atom'
|
|
import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
|
|
|
|
const TextMessage: React.FC<ThreadMessage> = (props) => {
|
|
const isUser = props.role === ChatCompletionRole.User
|
|
const isSystem = props.role === ChatCompletionRole.System
|
|
const editMessage = useAtomValue(editMessageAtom)
|
|
const activeThread = useAtomValue(activeThreadAtom)
|
|
|
|
const tokenSpeed = useAtomValue(tokenSpeedAtom)
|
|
const messages = useAtomValue(getCurrentChatMessagesAtom)
|
|
|
|
const text = useMemo(
|
|
() => props.content[0]?.text?.value ?? '',
|
|
[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'
|
|
)}
|
|
>
|
|
<>
|
|
{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} />
|
|
</div>
|
|
)}
|
|
</>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(TextMessage)
|