konnosDashboard
Message.tsx138 lines · main
1import { UIMessage as VercelMessage } from '@ai-sdk/react'
2import { useState } from 'react'
3import { toast } from 'sonner'
4import { cn } from 'ui'
5
6import { DeleteMessageConfirmModal } from './DeleteMessageConfirmModal'
7import { MessageActions } from './Message.Actions'
8import type { AddToolApprovalResponse, MessageInfo } from './Message.Context'
9import { MessageProvider, useMessageActionsContext, useMessageInfoContext } from './Message.Context'
10import { MessageDisplay } from './Message.Display'
11
12function AssistantMessage({ message }: { message: VercelMessage }) {
13 const { id, variant, state, isLastMessage, readOnly, rating, isLoading } = useMessageInfoContext()
14 const { onCancelEdit, onRate } = useMessageActionsContext()
15
16 const handleRate = (newRating: 'positive' | 'negative', reason?: string) => {
17 onRate?.(id, newRating, reason)
18 }
19
20 return (
21 <MessageDisplay.Container
22 className={cn(
23 variant === 'warning' && 'bg-warning-200',
24 state === 'predecessor-editing' && 'opacity-50 transition-opacity cursor-pointer'
25 )}
26 onClick={state === 'predecessor-editing' ? onCancelEdit : undefined}
27 >
28 <MessageDisplay.MainArea>
29 <MessageDisplay.Content message={message} />
30 </MessageDisplay.MainArea>
31 {!readOnly && isLastMessage && onRate && !isLoading && (
32 <MessageActions alwaysShow>
33 <MessageActions.ThumbsUp
34 onClick={() => handleRate('positive')}
35 isActive={rating === 'positive'}
36 disabled={!!rating}
37 />
38 <MessageActions.ThumbsDown
39 onClick={(reason) => handleRate('negative', reason)}
40 isActive={rating === 'negative'}
41 disabled={!!rating}
42 />
43 </MessageActions>
44 )}
45 </MessageDisplay.Container>
46 )
47}
48
49function UserMessage({ message }: { message: VercelMessage }) {
50 const { id, variant, state } = useMessageInfoContext()
51 const { onCancelEdit, onEdit, onDelete } = useMessageActionsContext()
52 const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false)
53
54 return (
55 <>
56 <MessageDisplay.Container
57 className={cn(
58 'mt-6 text-foreground',
59 variant === 'warning' && 'bg-warning-200',
60 state === 'predecessor-editing' && 'opacity-50 transition-opacity cursor-pointer'
61 )}
62 onClick={state === 'predecessor-editing' ? onCancelEdit : undefined}
63 >
64 <MessageDisplay.MainArea>
65 <MessageDisplay.ProfileImage />
66 <MessageDisplay.Content message={message} />
67 </MessageDisplay.MainArea>
68 <MessageActions>
69 <MessageActions.Edit
70 onClick={state === 'idle' ? () => onEdit(id) : onCancelEdit}
71 tooltip={state === 'idle' ? 'Edit message' : 'Cancel editing'}
72 />
73 <MessageActions.Delete onClick={() => setShowDeleteConfirmModal(true)} />
74 </MessageActions>
75 </MessageDisplay.Container>
76 <DeleteMessageConfirmModal
77 visible={showDeleteConfirmModal}
78 onConfirm={() => {
79 onDelete(id)
80 setShowDeleteConfirmModal(false)
81 toast.success('Message deleted successfully')
82 }}
83 onCancel={() => setShowDeleteConfirmModal(false)}
84 />
85 </>
86 )
87}
88
89interface MessageProps {
90 id: string
91 message: VercelMessage
92 isLoading: boolean
93 readOnly?: boolean
94 variant?: 'default' | 'warning'
95 addToolApprovalResponse?: AddToolApprovalResponse
96 onDelete: (id: string) => void
97 onEdit: (id: string) => void
98 isAfterEditedMessage: boolean
99 isBeingEdited: boolean
100 onCancelEdit: () => void
101 isLastMessage?: boolean
102 onRate?: (id: string, rating: 'positive' | 'negative', reason?: string) => void
103 rating?: 'positive' | 'negative' | null
104}
105
106export function Message(props: MessageProps) {
107 const message = props.message
108 const { role } = message
109 const isUserMessage = role === 'user'
110
111 const messageInfo = {
112 id: props.id,
113 isLoading: props.isLoading,
114 readOnly: props.readOnly,
115 variant: props.variant,
116 state: props.isBeingEdited
117 ? 'editing'
118 : props.isAfterEditedMessage
119 ? 'predecessor-editing'
120 : 'idle',
121 isLastMessage: props.isLastMessage,
122 rating: props.rating,
123 } satisfies MessageInfo
124
125 const messageActions = {
126 addToolApprovalResponse: props.addToolApprovalResponse,
127 onDelete: props.onDelete,
128 onEdit: props.onEdit,
129 onCancelEdit: props.onCancelEdit,
130 onRate: props.onRate,
131 }
132
133 return (
134 <MessageProvider messageInfo={messageInfo} messageActions={messageActions}>
135 {isUserMessage ? <UserMessage message={message} /> : <AssistantMessage message={message} />}
136 </MessageProvider>
137 )
138}