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:
co-authored by
Claude Opus 4.5
parent
b3a1729df2
commit
8023aed98b
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user