File size: 2,676 Bytes
ab9d59a 2a3d5f5 ab9d59a df25c67 ab9d59a df25c67 ab9d59a 621b880 ab9d59a df25c67 |
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 |
import type { Message } from 'ai';
import React from 'react';
import { classNames } from '~/utils/classNames';
import { AssistantMessage } from './AssistantMessage';
import { UserMessage } from './UserMessage';
interface MessagesProps {
id?: string;
className?: string;
isStreaming?: boolean;
messages?: Message[];
}
export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
const { id, isStreaming = false, messages = [] } = props;
return (
<div id={id} ref={ref} className={props.className}>
{messages.length > 0
? messages.map((message, i) => {
const { role, content } = message;
const isUser = role === 'user';
const isFirst = i === 0;
const isLast = i === messages.length - 1;
const isUserMessage = message.role === 'user';
const isAssistantMessage = message.role === 'assistant';
return (
<div
key={message.id}
className={classNames('relative overflow-hidden rounded-md p-[1px]', {
'mt-4': !isFirst,
'bg-gray-200': isUserMessage || !isStreaming || (isStreaming && isAssistantMessage && !isLast),
'bg-gradient-to-b from-gray-200 to-transparent': isStreaming && isAssistantMessage && isLast,
})}
>
<div
className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.375rem-1px)]', {
'bg-white': isUserMessage || !isStreaming || (isStreaming && !isLast),
'bg-gradient-to-b from-white from-30% to-transparent': isStreaming && isLast,
})}
>
<div
className={classNames(
'flex items-center justify-center min-w-[34px] min-h-[34px] text-gray-600 rounded-md p-1 self-start',
{
'bg-gray-100': isUserMessage,
'bg-accent text-xl': isAssistantMessage,
},
)}
>
<div className={isUserMessage ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
</div>
<div className="grid grid-col-1 w-full">
{isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
</div>
</div>
</div>
);
})
: null}
{isStreaming && <div className="text-center w-full i-svg-spinners:3-dots-fade text-4xl mt-4"></div>}
</div>
);
});
|