Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 4178 - current generated message options should be visible

Browse Source
This commit is contained in:
Louis 2024-12-03 13:25:54 +07:00
parent d9313d670a
commit a058710fed
No known key found for this signature in database
GPG Key ID: 44FA9F4D33C37DE2
2 changed files with 52 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
View File

@ -54,7 +54,12 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
<> <>
{status !== MessageStatus.Error && content?.length > 0 && ( {status !== MessageStatus.Error && content?.length > 0 && (
<div ref={ref} className="relative"> <div ref={ref} className="relative">
<MessageContainer {...message} content={content} status={status} /> <MessageContainer
{...message}
content={content}
status={status}
isCurrentMessage={message.isCurrentMessage ?? false}
/>
</div> </div>
)} )}
{errorMessage && !message.loadModelError && ( {errorMessage && !message.loadModelError && (

34
web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
View File

@ -19,19 +19,18 @@ import { MarkdownTextMessage } from './MarkdownTextMessage'
import { import {
editMessageAtom, editMessageAtom,
getCurrentChatMessagesAtom,
tokenSpeedAtom, tokenSpeedAtom,
} from '@/helpers/atoms/ChatMessage.atom' } from '@/helpers/atoms/ChatMessage.atom'
import { activeThreadAtom } from '@/helpers/atoms/Thread.atom' import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
const MessageContainer: React.FC<ThreadMessage> = (props) => { const MessageContainer: React.FC<
ThreadMessage & { isCurrentMessage: boolean }
> = (props) => {
const isUser = props.role === ChatCompletionRole.User const isUser = props.role === ChatCompletionRole.User
const isSystem = props.role === ChatCompletionRole.System const isSystem = props.role === ChatCompletionRole.System
const editMessage = useAtomValue(editMessageAtom) const editMessage = useAtomValue(editMessageAtom)
const activeThread = useAtomValue(activeThreadAtom) const activeThread = useAtomValue(activeThreadAtom)
const tokenSpeed = useAtomValue(tokenSpeedAtom) const tokenSpeed = useAtomValue(tokenSpeedAtom)
const messages = useAtomValue(getCurrentChatMessagesAtom)
const text = useMemo( const text = useMemo(
() => props.content[0]?.text?.value ?? '', () => props.content[0]?.text?.value ?? '',
@ -81,16 +80,6 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
<p className="text-xs font-medium text-gray-400"> <p className="text-xs font-medium text-gray-400">
{displayDate(props.created)} {displayDate(props.created)}
</p> </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 &&
tokenSpeed.message === props.id && tokenSpeed.message === props.id &&
tokenSpeed.tokenSpeed > 0 && ( tokenSpeed.tokenSpeed > 0 && (
@ -100,10 +89,22 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
)} )}
</div> </div>
<div className="flex w-full flex-col">
<div <div
className={twMerge( className={twMerge(
'w-full', 'absolute right-0 order-1 mt-2 flex cursor-pointer items-center justify-start gap-x-2 transition-all',
!isUser && !text.includes(' ') && 'break-all' props.isCurrentMessage && !isUser
? 'relative order-2 flex justify-end'
: 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
)}
>
<MessageToolbar message={props} />
</div>
<div
className={twMerge(
'order-2 w-full',
!isUser && !text.includes(' ') && 'break-all',
props.isCurrentMessage && !isUser && 'order-1'
)} )}
> >
<> <>
@ -135,6 +136,7 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
</> </>
</div> </div>
</div> </div>
</div>
) )
} }