Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-04 01:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

✅ fix: Emojis rendering in SplitText Animation (#7460)

Browse source
This commit is contained in:
Sebastien Bruel 2025-05-20 22:26:58 +09:00 • committed by GitHub
parent af96666ff4
commit e86842fd19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/ui/SplitText.tsx
View file

@ -15,6 +15,17 @@ interface SplitTextProps {
onLineCountChange?: (lineCount: number) => void;
}
const splitGraphemes = (text: string): string[] => {
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
const segments = segmenter.segment(text);
return Array.from(segments).map((s) => s.segment);
} else {
// Fallback for browsers without Intl.Segmenter
return [...text];
}
};
const SplitText: React.FC<SplitTextProps> = ({
text = '',
className = '',
@ -28,7 +39,7 @@ const SplitText: React.FC<SplitTextProps> = ({
onLetterAnimationComplete,
onLineCountChange,
}) => {
const words = text.split(' ').map((word) => word.split(''));
const words = text.split(' ').map(splitGraphemes);
const letters = words.flat();
const [inView, setInView] = useState(false);
const ref = useRef<HTMLParagraphElement>(null);
@ -40,12 +51,12 @@ const SplitText: React.FC<SplitTextProps> = ({
from: animationFrom,
to: inView
? async (next: (props: any) => Promise<void>) => {
await next(animationTo);
animatedCount.current += 1;
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
onLetterAnimationComplete();
await next(animationTo);
animatedCount.current += 1;
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
onLetterAnimationComplete();
}
}
}
: animationFrom,
delay: i * delay,
config: { easing },