plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
32 lines (31 loc) • 1.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { usePlazbotContext } from '../../context/PlazbotContext';
import { MessageBubble } from './MessageBubble';
import { ToolResultRenderer } from '../cards/ToolResultRenderer';
import { SourceCard } from '../cards/SourceCard';
import { DateSeparator } from './DateSeparator';
function shouldShowDateSeparator(current, previous) {
if (!previous)
return true;
const a = new Date(current.timestamp).toDateString();
const b = new Date(previous.timestamp).toDateString();
return a !== b;
}
export function MessageList({ messages, children, style }) {
const { theme } = usePlazbotContext();
const bottomRef = useRef(null);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages.length, children]);
return (_jsxs("div", { "data-plazbot-messages": "", style: {
flex: 1,
overflowY: 'auto',
padding: '16px',
display: 'flex',
flexDirection: 'column',
gap: '8px',
backgroundColor: theme.surfaceColor,
...style,
}, children: [messages.map((msg, i) => (_jsxs("div", { children: [shouldShowDateSeparator(msg, messages[i - 1]) && (_jsx(DateSeparator, { date: msg.timestamp })), _jsx(MessageBubble, { message: msg }), msg.actionsExecuted?.map((action, j) => (_jsx("div", { style: { marginTop: '6px' }, children: _jsx(ToolResultRenderer, { action: action }) }, j))), msg.sources && msg.sources.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '6px' }, children: msg.sources.map((source, j) => (_jsx(SourceCard, { source: source }, j))) }))] }, msg.id))), children, _jsx("div", { ref: bottomRef })] }));
}