jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate ToolCallSheetProvider in AgentStreamView

Browse Source 
Wrapped AgentStreamView content with ToolCallSheetProvider to enable
tool call details to open in a bottom sheet on tap instead of expanding
inline. This improves mobile UX for viewing tool call information.

🤖 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
2025-12-21 18:24:07 +00:00
co-authored by Claude Opus 4.5
parent 09b7360a7e
commit a8053bc0b5
2 changed files with 60 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/agent-stream-view.tsx
+58 -56
View File
@@ -41,6 +41,7 @@ import {
extractEditEntries, extractEditEntries,
extractReadEntries, extractReadEntries,
} from "@/utils/tool-call-parsers"; } from "@/utils/tool-call-parsers";
import { ToolCallSheetProvider } from "./tool-call-sheet";
const MAX_CHAT_WIDTH = 960; const MAX_CHAT_WIDTH = 960;
type PermissionResolvedMessage = Extract< type PermissionResolvedMessage = Extract<
@@ -382,63 +383,64 @@ export function AgentStreamView({
); );
return ( return (
<View style={stylesheet.container}> <ToolCallSheetProvider>
<FlatList <View style={stylesheet.container}>
ref={flatListRef} <FlatList
data={flatListData} ref={flatListRef}
renderItem={renderStreamItem} data={flatListData}
keyExtractor={(item) => item.id} renderItem={renderStreamItem}
contentContainerStyle={{ keyExtractor={(item) => item.id}
paddingVertical: 0, contentContainerStyle={{
flexGrow: 1, paddingVertical: 0,
}} flexGrow: 1,
style={stylesheet.list} }}
onScroll={handleScroll} style={stylesheet.list}
onScrollBeginDrag={handleScrollBeginDrag} onScroll={handleScroll}
onScrollEndDrag={handleScrollEnd} onScrollBeginDrag={handleScrollBeginDrag}
onMomentumScrollBegin={handleMomentumScrollBegin} onScrollEndDrag={handleScrollEnd}
onMomentumScrollEnd={handleScrollEnd} onMomentumScrollBegin={handleMomentumScrollBegin}
scrollEventThrottle={16} onMomentumScrollEnd={handleScrollEnd}
ListEmptyComponent={ scrollEventThrottle={16}
<View style={[stylesheet.emptyState, stylesheet.contentWrapper]}> ListEmptyComponent={
<Text style={stylesheet.emptyStateText}> <View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
Start chatting with this agent... <Text style={stylesheet.emptyStateText}>
</Text> Start chatting with this agent...
</View> </Text>
} </View>
ListHeaderComponent={listHeaderComponent} }
extraData={flatListExtraData} ListHeaderComponent={listHeaderComponent}
maintainVisibleContentPosition={{ extraData={flatListExtraData}
minIndexForVisible: 0, maintainVisibleContentPosition={{
autoscrollToTopThreshold: 40, minIndexForVisible: 0,
}} autoscrollToTopThreshold: 40,
initialNumToRender={12} }}
windowSize={10} initialNumToRender={12}
inverted windowSize={10}
/> inverted
/>
{/* Scroll to bottom button */} {/* Scroll to bottom button */}
{!isNearBottom && ( {!isNearBottom && (
<Animated.View <Animated.View
style={stylesheet.scrollToBottomContainer} style={stylesheet.scrollToBottomContainer}
entering={scrollIndicatorFadeIn} entering={scrollIndicatorFadeIn}
exiting={scrollIndicatorFadeOut} exiting={scrollIndicatorFadeOut}
> >
<View style={stylesheet.scrollToBottomInner}> <View style={stylesheet.scrollToBottomInner}>
<Pressable <Pressable
style={stylesheet.scrollToBottomButton} style={stylesheet.scrollToBottomButton}
onPress={scrollToBottom} onPress={scrollToBottom}
> >
<ChevronDown <ChevronDown
size={24} size={24}
color={stylesheet.scrollToBottomIcon.color} color={stylesheet.scrollToBottomIcon.color}
/> />
</Pressable> </Pressable>
</View> </View>
</Animated.View> </Animated.View>
)} )}
</View>
</View> </ToolCallSheetProvider>
); );
} }
plan.md
+2 -1
View File
@@ -546,12 +546,13 @@ interface ToolCallSheetData {
- Run typecheck after changes. - Run typecheck after changes.
- **Done (2025-12-21 19:25)**: Updated `ToolCall` in `message.tsx` to use `useToolCallSheet` hook. On tap, calls `openToolCall()` with tool data instead of expanding inline. Removed ~300 lines of unused code including `toolCallStylesheet`, `formatFullValue`, `buildLineDiffFromStrings`, `isStructuredToolResult`, and inline rendering logic (all now in `tool-call-sheet.tsx`). Cleaned up imports (`ScrollView`, `DiffViewer`, `DiffLine` no longer needed). Typecheck passes. - **Done (2025-12-21 19:25)**: Updated `ToolCall` in `message.tsx` to use `useToolCallSheet` hook. On tap, calls `openToolCall()` with tool data instead of expanding inline. Removed ~300 lines of unused code including `toolCallStylesheet`, `formatFullValue`, `buildLineDiffFromStrings`, `isStructuredToolResult`, and inline rendering logic (all now in `tool-call-sheet.tsx`). Cleaned up imports (`ScrollView`, `DiffViewer`, `DiffLine` no longer needed). Typecheck passes.
- [ ] **Implement**: Integrate ToolCallSheetProvider in agent stream view. - [x] **Implement**: Integrate ToolCallSheetProvider in agent stream view.
- Wrap `AgentStreamView` content with `ToolCallSheetProvider` - Wrap `AgentStreamView` content with `ToolCallSheetProvider`
- Or add at the agent screen level if needed for proper context scope - Or add at the agent screen level if needed for proper context scope
- Ensure sheet renders above the stream content - Ensure sheet renders above the stream content
- Run typecheck after changes. - Run typecheck after changes.
- **Done (2025-12-21 20:48)**: Added `ToolCallSheetProvider` import and wrapped the entire return content of `AgentStreamView` with it. The provider wraps the `View` container which includes the `FlatList` and scroll-to-bottom button, ensuring the bottom sheet renders above the stream content. Typecheck passes.
- [ ] **Test**: Verify tool call bottom sheet works on mobile web. - [ ] **Test**: Verify tool call bottom sheet works on mobile web.