diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx index 7707fe7066..d3a3d3c8b1 100644 --- a/client/src/components/Chat/Landing.tsx +++ b/client/src/components/Chat/Landing.tsx @@ -2,11 +2,18 @@ import { useMemo, useCallback, useState, useEffect, useRef } from 'react'; import { easings } from '@react-spring/web'; import { EModelEndpoint } from 'librechat-data-provider'; import { BirthdayIcon, TooltipAnchor, SplitText } from '@librechat/client'; +import { + getIconEndpoint, + getEntity, + getModelSpec, + createConfigHtmlSanitizer, + CONFIG_HTML_MEDIA_TAGS, + CONFIG_HTML_MEDIA_ATTR, +} from '~/utils'; import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers'; import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider'; import ConvoIcon from '~/components/Endpoints/ConvoIcon'; import { useLocalize, useAuthContext } from '~/hooks'; -import { getIconEndpoint, getEntity } from '~/utils'; const containerClassName = 'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white dark:bg-presentation dark:text-white text-black dark:after:shadow-none '; @@ -61,8 +68,26 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding: assistant_id: conversation?.assistant_id, }); - const name = entity?.name ?? ''; - const description = (entity?.description || conversation?.greeting) ?? ''; + const modelSpec = useMemo( + () => getModelSpec({ specName: conversation?.spec, startupConfig }), + [conversation?.spec, startupConfig], + ); + + const brandedSpecLabel = modelSpec?.showOnLanding ? modelSpec.label : ''; + const brandedSpecDescription = (modelSpec?.showOnLanding && modelSpec.description) || ''; + const name = entity?.name ?? brandedSpecLabel; + const description = + (entity?.description || brandedSpecDescription || conversation?.greeting) ?? ''; + const descriptionIsHTML = description.trim().startsWith('<'); + + const sanitizeDescription = useMemo( + () => + createConfigHtmlSanitizer({ + allowedTags: CONFIG_HTML_MEDIA_TAGS, + allowedAttr: CONFIG_HTML_MEDIA_ATTR, + }), + [], + ); const getGreeting = useCallback(() => { if (typeof startupConfig?.interface?.customWelcome === 'string') { @@ -198,11 +223,17 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding: /> )} - {description && ( -
- {description} -
- )} + {description && + (descriptionIsHTML ? ( +
+ ) : ( +
+ {description} +
+ ))}
); diff --git a/client/src/components/Chat/Menus/Endpoints/components/ModelSpecItem.tsx b/client/src/components/Chat/Menus/Endpoints/components/ModelSpecItem.tsx index a73d1d8e47..10662fa55b 100644 --- a/client/src/components/Chat/Menus/Endpoints/components/ModelSpecItem.tsx +++ b/client/src/components/Chat/Menus/Endpoints/components/ModelSpecItem.tsx @@ -5,6 +5,7 @@ import type { TModelSpec } from 'librechat-data-provider'; import { useFavorites, useLocalize, useIsActiveItem } from '~/hooks'; import { useModelSelectorContext } from '../ModelSelectorContext'; import { CustomMenuItem as MenuItem } from '../CustomMenu'; +import SpecDescription from './SpecDescription'; import SpecIcon from './SpecIcon'; import { cn } from '~/utils'; @@ -48,9 +49,7 @@ export function ModelSpecItem({ spec, isSelected }: ModelSpecItemProps) { )}
{spec.label} - {spec.description && ( - {spec.description} - )} +