Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import { AiHydroMessage } from "@shared/ExtensionMessage"
import React from "react"
import BrowserSessionRow from "@/components/chat/BrowserSessionRow"
import ChatRow from "@/components/chat/ChatRow"
import { MessageHandlers } from "../../types/chatTypes"
interface MessageRendererProps {
index: number
messageOrGroup: AiHydroMessage | AiHydroMessage[]
groupedMessages: (AiHydroMessage | AiHydroMessage[])[]
modifiedMessages: AiHydroMessage[]
expandedRows: Record<number, boolean>
onToggleExpand: (ts: number) => void
onHeightChange: (isTaller: boolean) => void
onSetQuote: (quote: string | null) => void
inputValue: string
messageHandlers: MessageHandlers
}
/**
* Specialized component for rendering different message types
* Handles browser sessions, regular messages, and checkpoint logic
*/
export const MessageRenderer: React.FC<MessageRendererProps> = ({
index,
messageOrGroup,
groupedMessages,
modifiedMessages,
expandedRows,
onToggleExpand,
onHeightChange,
onSetQuote,
inputValue,
messageHandlers,
}) => {
// Browser session group
if (Array.isArray(messageOrGroup)) {
return (
<BrowserSessionRow
expandedRows={expandedRows}
isLast={index === groupedMessages.length - 1}
key={messageOrGroup[0]?.ts}
lastModifiedMessage={modifiedMessages.at(-1)}
messages={messageOrGroup}
onHeightChange={onHeightChange}
onSetQuote={onSetQuote}
onToggleExpand={onToggleExpand}
/>
)
}
// Determine if this is the last message for status display purposes
const nextMessage = index < groupedMessages.length - 1 && groupedMessages[index + 1]
const isNextCheckpoint = !Array.isArray(nextMessage) && nextMessage && nextMessage?.say === "checkpoint_created"
const isLastMessageGroup = isNextCheckpoint && index === groupedMessages.length - 2
const isLast = index === groupedMessages.length - 1 || isLastMessageGroup
// Regular message
return (
<ChatRow
inputValue={inputValue}
isExpanded={expandedRows[messageOrGroup.ts] || false}
isLast={isLast}
key={messageOrGroup.ts}
lastModifiedMessage={modifiedMessages.at(-1)}
message={messageOrGroup}
onCancelCommand={() => messageHandlers.executeButtonAction("cancel")}
onHeightChange={onHeightChange}
onSetQuote={onSetQuote}
onToggleExpand={onToggleExpand}
sendMessageFromChatRow={messageHandlers.handleSendMessage}
/>
)
}
/**
* Factory function to create the itemContent callback for Virtuoso
* This allows us to encapsulate the rendering logic while maintaining performance
*/
export const createMessageRenderer = (
groupedMessages: (AiHydroMessage | AiHydroMessage[])[],
modifiedMessages: AiHydroMessage[],
expandedRows: Record<number, boolean>,
onToggleExpand: (ts: number) => void,
onHeightChange: (isTaller: boolean) => void,
onSetQuote: (quote: string | null) => void,
inputValue: string,
messageHandlers: MessageHandlers,
) => {
return (index: number, messageOrGroup: AiHydroMessage | AiHydroMessage[]) => (
<MessageRenderer
expandedRows={expandedRows}
groupedMessages={groupedMessages}
index={index}
inputValue={inputValue}
messageHandlers={messageHandlers}
messageOrGroup={messageOrGroup}
modifiedMessages={modifiedMessages}
onHeightChange={onHeightChange}
onSetQuote={onSetQuote}
onToggleExpand={onToggleExpand}
/>
)
}
|