Fix working indicator padding and remove redundant streaming dots

- Align working indicator left padding with AssistantMessage (spacing[4])
- Remove isStreaming prop and "..." indicator from AssistantMessage
- The WorkingIndicator already shows agent is running, no need for duplicate

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2026-01-01 21:26:05 +07:00
co-authored by Claude Opus 4.5
parent b3a1729df2
commit 8023aed98b
3 changed files with 1 additions and 46 deletions
@@ -272,7 +272,6 @@ export function AgentStreamView({
message={item.text} message={item.text}
timestamp={item.timestamp.getTime()} timestamp={item.timestamp.getTime()}
onInlinePathPress={handleInlinePathPress} onInlinePathPress={handleInlinePathPress}
isStreaming={streamingItemId === item.id}
/> />
); );
break; break;
@@ -1074,7 +1073,7 @@ const stylesheet = StyleSheet.create((theme) => ({
gap: theme.spacing[2], gap: theme.spacing[2],
paddingHorizontal: 0, paddingHorizontal: 0,
paddingVertical: theme.spacing[1], paddingVertical: theme.spacing[1],
paddingLeft: theme.spacing[1], paddingLeft: theme.spacing[4],
borderRadius: theme.borderRadius.full, borderRadius: theme.borderRadius.full,
backgroundColor: "transparent", backgroundColor: "transparent",
borderWidth: 0, borderWidth: 0,
-43
View File
@@ -144,7 +144,6 @@ export interface InlinePathTarget {
interface AssistantMessageProps { interface AssistantMessageProps {
message: string; message: string;
timestamp: number; timestamp: number;
isStreaming?: boolean;
onInlinePathPress?: (target: InlinePathTarget) => void; onInlinePathPress?: (target: InlinePathTarget) => void;
} }
@@ -154,14 +153,6 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
paddingHorizontal: theme.spacing[4], paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[3], paddingVertical: theme.spacing[3],
}, },
streamingIndicator: {
marginTop: theme.spacing[1],
},
streamingText: {
color: theme.colors.palette.teal[200],
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.bold,
},
// Used in custom markdownRules for inline code styling // Used in custom markdownRules for inline code styling
markdownCodeInline: { markdownCodeInline: {
backgroundColor: theme.colors.secondary, backgroundColor: theme.colors.secondary,
@@ -326,11 +317,9 @@ function parseInlinePathToken(
export const AssistantMessage = memo(function AssistantMessage({ export const AssistantMessage = memo(function AssistantMessage({
message, message,
timestamp, timestamp,
isStreaming = false,
onInlinePathPress, onInlinePathPress,
}: AssistantMessageProps) { }: AssistantMessageProps) {
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const fadeAnim = useRef(new Animated.Value(0.3)).current;
const lastPathRef = useRef<string | null>(null); const lastPathRef = useRef<string | null>(null);
const markdownStyles = useMemo( const markdownStyles = useMemo(
@@ -467,43 +456,11 @@ export const AssistantMessage = memo(function AssistantMessage({
}; };
}, [onInlinePathPress]); }, [onInlinePathPress]);
useEffect(() => {
if (isStreaming) {
Animated.loop(
Animated.sequence([
Animated.timing(fadeAnim, {
toValue: 1,
duration: 600,
useNativeDriver: true,
}),
Animated.timing(fadeAnim, {
toValue: 0.3,
duration: 600,
useNativeDriver: true,
}),
])
).start();
} else {
fadeAnim.stopAnimation();
fadeAnim.setValue(1);
}
}, [isStreaming, fadeAnim]);
return ( return (
<View style={assistantMessageStylesheet.container}> <View style={assistantMessageStylesheet.container}>
<Markdown style={markdownStyles} rules={markdownRules}> <Markdown style={markdownStyles} rules={markdownRules}>
{message} {message}
</Markdown> </Markdown>
{isStreaming && (
<Animated.View
style={[
assistantMessageStylesheet.streamingIndicator,
{ opacity: fadeAnim },
]}
>
<Text style={assistantMessageStylesheet.streamingText}>...</Text>
</Animated.View>
)}
</View> </View>
); );
}); });
@@ -98,7 +98,6 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
<AssistantMessage <AssistantMessage
message={currentAssistantMessage} message={currentAssistantMessage}
timestamp={Date.now()} timestamp={Date.now()}
isStreaming={true}
/> />
)} )}
</ScrollView> </ScrollView>