File size: 2,740 Bytes
f0743f4 | 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 | import { useMemo } from 'react';
import { UserIcon } from '@librechat/client';
import type { TMessage, Assistant, Agent } from 'librechat-data-provider';
import type { TMessageProps } from '~/common';
import MessageEndpointIcon from '../Endpoints/MessageEndpointIcon';
import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
import { getIconEndpoint, logger } from '~/utils';
export default function MessageIcon(
props: Pick<TMessageProps, 'message' | 'conversation'> & {
assistant?: false | Assistant;
agent?: false | Agent;
},
) {
const { message, conversation, assistant, agent } = props;
const messageSettings = useMemo(
() => ({
...(conversation ?? {}),
...({
...message,
iconURL: message?.iconURL ?? '',
} as TMessage),
}),
[conversation, message],
);
const iconURL = messageSettings.iconURL ?? '';
let endpoint = messageSettings.endpoint;
endpoint = getIconEndpoint({ endpointsConfig: undefined, iconURL, endpoint });
const assistantName = (assistant ? assistant.name : '') ?? '';
const assistantAvatar = (assistant ? assistant.metadata?.avatar : '') ?? '';
const agentName = (agent ? agent.name : '') ?? '';
const agentAvatar = (agent ? agent?.avatar?.filepath : '') ?? '';
const avatarURL = useMemo(() => {
let result = '';
if (assistant) {
result = assistantAvatar;
} else if (agent) {
result = agentAvatar;
}
return result;
}, [assistant, agent, assistantAvatar, agentAvatar]);
logger.log('MessageIcon', {
endpoint,
iconURL,
assistantName,
assistantAvatar,
agentName,
agentAvatar,
});
if (message?.isCreatedByUser !== true && iconURL && iconURL.includes('http')) {
return (
<ConvoIconURL
iconURL={iconURL}
modelLabel={messageSettings.chatGptLabel ?? messageSettings.modelLabel ?? ''}
context="message"
assistantAvatar={assistantAvatar}
assistantName={assistantName}
agentAvatar={agentAvatar}
agentName={agentName}
/>
);
}
if (message?.isCreatedByUser === true) {
return (
<div
style={{
backgroundColor: 'rgb(121, 137, 255)',
width: '20px',
height: '20px',
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
}}
className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
>
<UserIcon />
</div>
);
}
return (
<MessageEndpointIcon
{...messageSettings}
endpoint={endpoint}
iconURL={avatarURL}
model={message?.model ?? conversation?.model}
assistantName={assistantName}
agentName={agentName}
size={28.8}
/>
);
}
|