fix(slot-text): clip glyphs instead of ellipsizing during width anima… (#459)

Author: chengcheng84

src/components/SlotText/SlotText.tsx

@@ -49,6 +49,7 @@ export function SlotText({
   colorFadeDurationMs,
   containerStyle,
   durationMs,
+  ellipsizeMode,
   exitOffsetMs,
   maxFontSizeMultiplier,
   maxGraphemes,
@@ -59,6 +60,7 @@ export function SlotText({
   textClassName,
   textStyle,
 }: SlotTextProps) {
+  const resolvedEllipsizeMode = ellipsizeMode ?? 'clip';
   const reducedMotion = useReducedMotion();
   const resolved = resolveSlotTextOptions({
     bounce,
@@ -174,6 +176,7 @@ export function SlotText({
           accessible={false}
           allowFontScaling={allowFontScaling}
           className={textClassName}
+          ellipsizeMode={resolvedEllipsizeMode}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
           numberOfLines={1}
           style={textStyle}
@@ -230,6 +233,7 @@ export function SlotText({
               allowFontScaling={allowFontScaling}
               currentSegment={currentSegment}
               currentWidth={currentMetrics?.width ?? 0}
+              ellipsizeMode={resolvedEllipsizeMode}
               entryPhaseStartMs={transitionPhaseTiming.entryPhaseStartMs}
               exitPhaseDurationMs={transitionPhaseTiming.exitPhaseDurationMs}
               height={height}
@@ -252,6 +256,7 @@ export function SlotText({
           accessible={false}
           allowFontScaling={allowFontScaling}
           className={textClassName}
+          ellipsizeMode={resolvedEllipsizeMode}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
           numberOfLines={1}
           style={textStyle}
@@ -272,6 +277,7 @@ export function SlotText({
             accessible={false}
             allowFontScaling={allowFontScaling}
             className={textClassName}
+            ellipsizeMode={resolvedEllipsizeMode}
             key={segment}
             maxFontSizeMultiplier={maxFontSizeMultiplier}
             numberOfLines={1}

src/components/SlotText/SlotText.types.ts

@@ -15,6 +15,8 @@ export type SlotTextProps = {
   /** Keep a grapheme static only when it is unchanged and its slot offset will not move. */
   skipUnchanged?: boolean;
   staggerMs?: number;
+  /** How a grapheme is truncated when its slot is narrower than the glyph. Defaults to 'clip'. */
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
   testID?: string;
   text: string;
   textClassName?: string;

src/components/SlotText/components/SlotGlyph.tsx

@@ -35,6 +35,7 @@ type SlotGlyphProps = {
   allowFontScaling?: boolean;
   currentSegment: string;
   currentWidth: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
   entryPhaseStartMs: number;
   exitPhaseDurationMs: number;
   height: number;
@@ -53,7 +54,7 @@ type SlotGlyphProps = {
 
 type GlyphTextProps = Pick<
   SlotGlyphProps,
-  'allowFontScaling' | 'maxFontSizeMultiplier' | 'textClassName' | 'textStyle'
+  'allowFontScaling' | 'ellipsizeMode' | 'maxFontSizeMultiplier' | 'textClassName' | 'textStyle'
 > & {
   color?: string;
   segment: string;
@@ -63,6 +64,7 @@ export function SlotGlyph({
   allowFontScaling,
   currentSegment,
   currentWidth,
+  ellipsizeMode,
   entryPhaseStartMs,
   exitPhaseDurationMs,
   height,
@@ -222,6 +224,7 @@ export function SlotGlyph({
             <Animated.View style={[faceStyle, outgoingStyle]}>
               <GlyphText
                 allowFontScaling={allowFontScaling}
+                ellipsizeMode={ellipsizeMode}
                 maxFontSizeMultiplier={maxFontSizeMultiplier}
                 segment={currentSegment}
                 textClassName={textClassName}
@@ -234,6 +237,7 @@ export function SlotGlyph({
               <Animated.View style={[faceStyle, incomingStyle]}>
                 <GlyphText
                   allowFontScaling={allowFontScaling}
+                  ellipsizeMode={ellipsizeMode}
                   maxFontSizeMultiplier={maxFontSizeMultiplier}
                   segment={targetSegment}
                   textClassName={textClassName}
@@ -247,6 +251,7 @@ export function SlotGlyph({
                   <GlyphText
                     allowFontScaling={allowFontScaling}
                     color={highlightColor}
+                    ellipsizeMode={ellipsizeMode}
                     maxFontSizeMultiplier={maxFontSizeMultiplier}
                     segment={targetSegment}
                     textClassName={textClassName}
@@ -261,6 +266,7 @@ export function SlotGlyph({
         <View style={faceStyle}>
           <GlyphText
             allowFontScaling={allowFontScaling}
+            ellipsizeMode={ellipsizeMode}
             maxFontSizeMultiplier={maxFontSizeMultiplier}
             segment={targetSegment}
             textClassName={textClassName}
@@ -308,6 +314,7 @@ function createFaceAnimationStyle(
 function GlyphText({
   allowFontScaling,
   color,
+  ellipsizeMode,
   maxFontSizeMultiplier,
   segment,
   textClassName,
@@ -318,6 +325,7 @@ function GlyphText({
       accessible={false}
       allowFontScaling={allowFontScaling}
       className={textClassName}
+      ellipsizeMode={ellipsizeMode}
       maxFontSizeMultiplier={maxFontSizeMultiplier}
       numberOfLines={1}
       style={[textStyle, color ? { color } : undefined]}

src/screens/ChatScreen/input/components/ChatInputReasoningSection.tsx

@@ -70,6 +70,7 @@ export function ChatInputReasoningSection({
       <View className="flex-row items-center gap-1.5">
         <Text className="font-medium text-base text-foreground">{t('chat.reasoning.title')}</Text>
         <SlotText
+          ellipsizeMode="clip"
           text={currentOption ? t(currentOption.labelKey) : ''}
           textClassName="font-semibold text-base text-foreground"
           textStyle={