1425 lines
40 KiB
TypeScript
1425 lines
40 KiB
TypeScript
import { useEffect, useMemo, useRef, useState, useCallback } from "react";
|
|
import type { ReactNode } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
FlatList,
|
|
ListRenderItemInfo,
|
|
NativeScrollEvent,
|
|
NativeSyntheticEvent,
|
|
InteractionManager,
|
|
Platform,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
import Markdown from "react-native-markdown-display";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
|
|
import { useMutation } from "@tanstack/react-query";
|
|
import Animated, {
|
|
FadeIn,
|
|
FadeOut,
|
|
cancelAnimation,
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withDelay,
|
|
withRepeat,
|
|
withSequence,
|
|
withTiming,
|
|
} from "react-native-reanimated";
|
|
import { Check, ChevronDown, X } from "lucide-react-native";
|
|
import { usePanelStore } from "@/stores/panel-store";
|
|
import {
|
|
AssistantMessage,
|
|
UserMessage,
|
|
ActivityLog,
|
|
ToolCall,
|
|
TodoListCard,
|
|
CompactionMarker,
|
|
TurnCopyButton,
|
|
MessageOuterSpacingProvider,
|
|
type InlinePathTarget,
|
|
} from "./message";
|
|
import type { StreamItem } from "@/types/stream";
|
|
import type { PendingPermission } from "@/types/shared";
|
|
import type { AgentPermissionResponse } from "@server/server/agent/agent-sdk-types";
|
|
import type { Agent } from "@/contexts/session-context";
|
|
import { useSessionStore } from "@/stores/session-store";
|
|
import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
|
|
import type { DaemonClient } from "@server/client/daemon-client";
|
|
import { ToolCallDetailsContent } from "./tool-call-details";
|
|
import { QuestionFormCard } from "./question-form-card";
|
|
import { ToolCallSheetProvider } from "./tool-call-sheet";
|
|
import {
|
|
WebDesktopScrollbarOverlay,
|
|
useWebDesktopScrollbarMetrics,
|
|
} from "./web-desktop-scrollbar";
|
|
import { createMarkdownStyles } from "@/styles/markdown-styles";
|
|
import { MAX_CONTENT_WIDTH } from "@/constants/layout";
|
|
import { isPerfLoggingEnabled, measurePayload, perfLog } from "@/utils/perf";
|
|
import { getMarkdownListMarker } from "@/utils/markdown-list";
|
|
|
|
const isUserMessageItem = (item?: StreamItem) => item?.kind === "user_message";
|
|
const isToolSequenceItem = (item?: StreamItem) =>
|
|
item?.kind === "tool_call" || item?.kind === "thought" || item?.kind === "todo_list";
|
|
const AGENT_STREAM_LOG_TAG = "[AgentStreamView]";
|
|
const STREAM_ITEM_LOG_MIN_COUNT = 200;
|
|
const STREAM_ITEM_LOG_DELTA_THRESHOLD = 50;
|
|
|
|
function collectAssistantTurnContent(
|
|
flatListData: StreamItem[],
|
|
startIndex: number
|
|
): string {
|
|
const messages: string[] = [];
|
|
for (let i = startIndex; i < flatListData.length; i++) {
|
|
const currentItem = flatListData[i];
|
|
if (currentItem.kind === "user_message") {
|
|
break;
|
|
}
|
|
if (currentItem.kind === "assistant_message") {
|
|
messages.push(currentItem.text);
|
|
}
|
|
}
|
|
return messages.reverse().join("\n\n");
|
|
}
|
|
export interface AgentStreamViewProps {
|
|
agentId: string;
|
|
serverId?: string;
|
|
agent: Agent;
|
|
streamItems: StreamItem[];
|
|
pendingPermissions: Map<string, PendingPermission>;
|
|
}
|
|
|
|
export function AgentStreamView({
|
|
agentId,
|
|
serverId,
|
|
agent,
|
|
streamItems,
|
|
pendingPermissions,
|
|
}: AgentStreamViewProps) {
|
|
const flatListRef = useRef<FlatList<StreamItem>>(null);
|
|
const { theme } = useUnistyles();
|
|
const isMobile =
|
|
UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
|
|
const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
|
|
const insets = useSafeAreaInsets();
|
|
const [isNearBottom, setIsNearBottom] = useState(true);
|
|
const hasScrolledInitially = useRef(false);
|
|
const hasAutoScrolledOnce = useRef(false);
|
|
const isNearBottomRef = useRef(true);
|
|
const streamItemCountRef = useRef(0);
|
|
const streamScrollbarMetrics = useWebDesktopScrollbarMetrics();
|
|
const [expandedInlineToolCallIds, setExpandedInlineToolCallIds] = useState<Set<string>>(new Set());
|
|
const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
|
|
const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);
|
|
|
|
// Get serverId (fallback to agent's serverId if not provided)
|
|
const resolvedServerId = serverId ?? agent.serverId ?? "";
|
|
|
|
const client = useSessionStore(
|
|
(state) => state.sessions[resolvedServerId]?.client ?? null
|
|
);
|
|
const streamHead = useSessionStore((state) =>
|
|
state.sessions[resolvedServerId]?.agentStreamHead?.get(agentId)
|
|
);
|
|
|
|
const { requestDirectoryListing, requestFilePreview, selectExplorerEntry } =
|
|
useFileExplorerActions(resolvedServerId);
|
|
// Keep entry/exit animations off on Android due to RN dispatchDraw crashes
|
|
// tracked in react-native-reanimated#8422.
|
|
const shouldDisableEntryExitAnimations = Platform.OS === "android";
|
|
const scrollIndicatorFadeIn = shouldDisableEntryExitAnimations
|
|
? undefined
|
|
: FadeIn.duration(200);
|
|
const scrollIndicatorFadeOut = shouldDisableEntryExitAnimations
|
|
? undefined
|
|
: FadeOut.duration(200);
|
|
|
|
useEffect(() => {
|
|
hasScrolledInitially.current = false;
|
|
hasAutoScrolledOnce.current = false;
|
|
isNearBottomRef.current = true;
|
|
setExpandedInlineToolCallIds(new Set());
|
|
}, [agentId]);
|
|
|
|
const handleInlinePathPress = useCallback(
|
|
(target: InlinePathTarget) => {
|
|
if (!target.path) {
|
|
return;
|
|
}
|
|
|
|
const normalized = normalizeInlinePath(target.path, agent.cwd);
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
|
|
requestDirectoryListing(agentId, normalized.directory, {
|
|
recordHistory: false,
|
|
setCurrentPath: false,
|
|
});
|
|
if (normalized.file) {
|
|
selectExplorerEntry(agentId, normalized.file);
|
|
requestFilePreview(agentId, normalized.file);
|
|
}
|
|
|
|
setExplorerTabForCheckout({
|
|
serverId: resolvedServerId,
|
|
cwd: agent.cwd,
|
|
isGit: agent.projectPlacement?.checkout?.isGit ?? true,
|
|
tab: "files",
|
|
});
|
|
openFileExplorer();
|
|
},
|
|
[
|
|
agent.cwd,
|
|
agentId,
|
|
requestDirectoryListing,
|
|
requestFilePreview,
|
|
selectExplorerEntry,
|
|
setExplorerTabForCheckout,
|
|
openFileExplorer,
|
|
]
|
|
);
|
|
|
|
const handleScroll = useCallback(
|
|
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
const { contentOffset } = event.nativeEvent;
|
|
const threshold = Math.max(insets.bottom, 32);
|
|
// In inverted list: scrollTop 0 = bottom, higher values = scrolled up
|
|
const nearBottom = contentOffset.y <= threshold;
|
|
|
|
if (isNearBottomRef.current !== nearBottom) {
|
|
isNearBottomRef.current = nearBottom;
|
|
setIsNearBottom(nearBottom);
|
|
}
|
|
|
|
if (showDesktopWebScrollbar) {
|
|
streamScrollbarMetrics.onScroll(event);
|
|
}
|
|
},
|
|
[insets.bottom, showDesktopWebScrollbar, streamScrollbarMetrics]
|
|
);
|
|
|
|
const scrollToBottomInternal = useCallback(
|
|
({ animated }: { animated: boolean }) => {
|
|
const list = flatListRef.current;
|
|
if (!list) {
|
|
return;
|
|
}
|
|
|
|
list.scrollToOffset({ offset: 0, animated });
|
|
isNearBottomRef.current = true;
|
|
setIsNearBottom(true);
|
|
},
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (streamItems.length === 0) {
|
|
return;
|
|
}
|
|
|
|
if (!hasAutoScrolledOnce.current) {
|
|
const handle = InteractionManager.runAfterInteractions(() => {
|
|
scrollToBottomInternal({ animated: false });
|
|
hasAutoScrolledOnce.current = true;
|
|
hasScrolledInitially.current = true;
|
|
});
|
|
return () => handle.cancel();
|
|
}
|
|
|
|
if (!isNearBottomRef.current) {
|
|
return;
|
|
}
|
|
|
|
const shouldAnimate = hasScrolledInitially.current;
|
|
scrollToBottomInternal({ animated: shouldAnimate });
|
|
hasScrolledInitially.current = true;
|
|
}, [streamItems, scrollToBottomInternal]);
|
|
|
|
function scrollToBottom() {
|
|
scrollToBottomInternal({ animated: true });
|
|
isNearBottomRef.current = true;
|
|
setIsNearBottom(true);
|
|
}
|
|
|
|
const flatListData = useMemo(() => {
|
|
return [...streamItems].reverse();
|
|
}, [streamItems]);
|
|
|
|
const tightGap = theme.spacing[1]; // 4px
|
|
const looseGap = theme.spacing[4]; // 16px
|
|
|
|
// The FlatList is inverted, but each row is re-inverted by RN, so `marginBottom` still
|
|
// manifests as the gap *below* the row in the final visual layout. Compute spacing
|
|
// against the item visually below (index - 1 in our inverted list).
|
|
const getGapBelow = useCallback(
|
|
(item: StreamItem, index: number) => {
|
|
const belowItem = flatListData[index - 1];
|
|
if (!belowItem) {
|
|
// This is the bottommost (newest) item; nothing below it visually.
|
|
return 0;
|
|
}
|
|
|
|
// Same type groups get tight gap (4px)
|
|
if (isUserMessageItem(item) && isUserMessageItem(belowItem)) {
|
|
return tightGap;
|
|
}
|
|
|
|
if (isToolSequenceItem(item) && isToolSequenceItem(belowItem)) {
|
|
return tightGap;
|
|
}
|
|
|
|
// Give user messages more breathing room before tool sequences.
|
|
if (item.kind === "user_message" && isToolSequenceItem(belowItem)) {
|
|
return looseGap;
|
|
}
|
|
|
|
// Keep tool sequences visually connected to the preceding user/assistant message.
|
|
if (
|
|
(item.kind === "user_message" || item.kind === "assistant_message") &&
|
|
isToolSequenceItem(belowItem)
|
|
) {
|
|
return tightGap;
|
|
}
|
|
|
|
// Keep todo lists visually connected to the following tool sequence (symmetry).
|
|
if (item.kind === "todo_list" && isToolSequenceItem(belowItem)) {
|
|
return tightGap;
|
|
}
|
|
|
|
// Keep tool sequences visually connected to the assistant response (symmetry).
|
|
if (isToolSequenceItem(item) && belowItem.kind === "assistant_message") {
|
|
return tightGap;
|
|
}
|
|
|
|
// Different types get loose gap (16px)
|
|
return looseGap;
|
|
},
|
|
[flatListData, looseGap, tightGap]
|
|
);
|
|
|
|
const renderStreamItemContent = useCallback(
|
|
(item: StreamItem, index: number) => {
|
|
const handleInlineDetailsExpandedChange = (expanded: boolean) => {
|
|
if (Platform.OS !== "web") {
|
|
return;
|
|
}
|
|
setExpandedInlineToolCallIds((previous) => {
|
|
const next = new Set(previous);
|
|
if (expanded) {
|
|
next.add(item.id);
|
|
} else {
|
|
next.delete(item.id);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
switch (item.kind) {
|
|
case "user_message": {
|
|
// In inverted list: index+1 is the item above, index-1 is below.
|
|
const prevItem = flatListData[index + 1];
|
|
const nextItem = flatListData[index - 1];
|
|
const isFirstInGroup = prevItem?.kind !== "user_message";
|
|
const isLastInGroup = nextItem?.kind !== "user_message";
|
|
return (
|
|
<UserMessage
|
|
message={item.text}
|
|
images={item.images}
|
|
timestamp={item.timestamp.getTime()}
|
|
isFirstInGroup={isFirstInGroup}
|
|
isLastInGroup={isLastInGroup}
|
|
/>
|
|
);
|
|
}
|
|
|
|
case "assistant_message":
|
|
return (
|
|
<AssistantMessage
|
|
message={item.text}
|
|
timestamp={item.timestamp.getTime()}
|
|
onInlinePathPress={handleInlinePathPress}
|
|
/>
|
|
);
|
|
|
|
case "thought": {
|
|
// In inverted list: index+1 is the item above, index-1 is below.
|
|
const nextItem = flatListData[index - 1];
|
|
const isLastInSequence =
|
|
nextItem?.kind !== "tool_call" && nextItem?.kind !== "thought";
|
|
return (
|
|
<ToolCall
|
|
toolName="thinking"
|
|
args={item.text}
|
|
status={item.status === "ready" ? "completed" : "executing"}
|
|
isLastInSequence={isLastInSequence}
|
|
onInlineDetailsExpandedChange={handleInlineDetailsExpandedChange}
|
|
/>
|
|
);
|
|
}
|
|
|
|
case "tool_call": {
|
|
const { payload } = item;
|
|
// In inverted list: index+1 is the item above, index-1 is below.
|
|
const nextItem = flatListData[index - 1];
|
|
const isLastInSequence =
|
|
nextItem?.kind !== "tool_call" && nextItem?.kind !== "thought";
|
|
|
|
if (payload.source === "agent") {
|
|
const data = payload.data;
|
|
return (
|
|
<ToolCall
|
|
toolName={data.name}
|
|
error={data.error}
|
|
status={data.status}
|
|
detail={data.detail}
|
|
cwd={agent.cwd}
|
|
metadata={data.metadata}
|
|
isLastInSequence={isLastInSequence}
|
|
onInlineDetailsExpandedChange={handleInlineDetailsExpandedChange}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const data = payload.data;
|
|
return (
|
|
<ToolCall
|
|
toolName={data.toolName}
|
|
args={data.arguments}
|
|
result={data.result}
|
|
status={data.status}
|
|
isLastInSequence={isLastInSequence}
|
|
onInlineDetailsExpandedChange={handleInlineDetailsExpandedChange}
|
|
/>
|
|
);
|
|
}
|
|
|
|
case "activity_log":
|
|
return (
|
|
<ActivityLog
|
|
type={item.activityType}
|
|
message={item.message}
|
|
timestamp={item.timestamp.getTime()}
|
|
metadata={item.metadata}
|
|
/>
|
|
);
|
|
|
|
case "todo_list":
|
|
return (
|
|
<TodoListCard
|
|
items={item.items}
|
|
/>
|
|
);
|
|
|
|
case "compaction":
|
|
return (
|
|
<CompactionMarker
|
|
status={item.status}
|
|
preTokens={item.preTokens}
|
|
/>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
[handleInlinePathPress, agent.cwd, flatListData]
|
|
);
|
|
|
|
const renderStreamItem = useCallback(
|
|
({ item, index }: ListRenderItemInfo<StreamItem>) => {
|
|
const content = renderStreamItemContent(item, index);
|
|
if (!content) {
|
|
return null;
|
|
}
|
|
|
|
const gapBelow = getGapBelow(item, index);
|
|
const nextItem = flatListData[index - 1];
|
|
const isEndOfAssistantTurn =
|
|
item.kind === "assistant_message" &&
|
|
(nextItem?.kind === "user_message" ||
|
|
(nextItem === undefined && agent.status !== "running"));
|
|
const getTurnContent = () => collectAssistantTurnContent(flatListData, index);
|
|
|
|
return (
|
|
<View style={[stylesheet.streamItemWrapper, { marginBottom: gapBelow }]}>
|
|
{content}
|
|
{isEndOfAssistantTurn ? (
|
|
<TurnCopyButton getContent={getTurnContent} />
|
|
) : null}
|
|
</View>
|
|
);
|
|
},
|
|
[getGapBelow, renderStreamItemContent, flatListData, agent.status]
|
|
);
|
|
|
|
const pendingPermissionItems = useMemo(
|
|
() =>
|
|
Array.from(pendingPermissions.values()).filter(
|
|
(perm) => perm.agentId === agentId
|
|
),
|
|
[pendingPermissions, agentId]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isPerfLoggingEnabled()) {
|
|
return;
|
|
}
|
|
const totalCount = streamItems.length;
|
|
const prevCount = streamItemCountRef.current;
|
|
if (totalCount === prevCount) {
|
|
return;
|
|
}
|
|
const delta = Math.abs(totalCount - prevCount);
|
|
streamItemCountRef.current = totalCount;
|
|
if (
|
|
totalCount < STREAM_ITEM_LOG_MIN_COUNT &&
|
|
delta < STREAM_ITEM_LOG_DELTA_THRESHOLD
|
|
) {
|
|
return;
|
|
}
|
|
let userCount = 0;
|
|
let assistantCount = 0;
|
|
let toolCallCount = 0;
|
|
let thoughtCount = 0;
|
|
let activityCount = 0;
|
|
let todoCount = 0;
|
|
for (const item of streamItems) {
|
|
switch (item.kind) {
|
|
case "user_message":
|
|
userCount += 1;
|
|
break;
|
|
case "assistant_message":
|
|
assistantCount += 1;
|
|
break;
|
|
case "tool_call":
|
|
toolCallCount += 1;
|
|
break;
|
|
case "thought":
|
|
thoughtCount += 1;
|
|
break;
|
|
case "activity_log":
|
|
activityCount += 1;
|
|
break;
|
|
case "todo_list":
|
|
todoCount += 1;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
const metrics =
|
|
totalCount >= STREAM_ITEM_LOG_MIN_COUNT
|
|
? measurePayload(streamItems)
|
|
: null;
|
|
perfLog(AGENT_STREAM_LOG_TAG, {
|
|
event: "stream_items",
|
|
agentId,
|
|
totalCount,
|
|
userCount,
|
|
assistantCount,
|
|
toolCallCount,
|
|
thoughtCount,
|
|
activityCount,
|
|
todoCount,
|
|
pendingPermissionCount: pendingPermissionItems.length,
|
|
streamHeadCount: streamHead?.length ?? 0,
|
|
payloadApproxBytes: metrics?.approxBytes ?? 0,
|
|
payloadFieldCount: metrics?.fieldCount ?? 0,
|
|
});
|
|
}, [agentId, pendingPermissionItems.length, streamHead, streamItems]);
|
|
|
|
const showWorkingIndicator = agent.status === "running";
|
|
const showBottomBar = showWorkingIndicator;
|
|
|
|
const listHeaderComponent = useMemo(() => {
|
|
const hasPermissions = pendingPermissionItems.length > 0;
|
|
const hasHeadItems = streamHead && streamHead.length > 0;
|
|
|
|
if (!hasPermissions && !showBottomBar && !hasHeadItems) {
|
|
return null;
|
|
}
|
|
|
|
const leftContent = showWorkingIndicator ? <WorkingIndicator /> : null;
|
|
|
|
return (
|
|
<View style={stylesheet.contentWrapper}>
|
|
<View
|
|
style={[
|
|
stylesheet.listHeaderContent,
|
|
// In an inverted FlatList, the header is rendered at the visual bottom, so its
|
|
// top edge can sit directly against the newest timeline item. Add a small
|
|
// padding to prevent badges (e.g. Thinking/Setup) from butting up against
|
|
// the last user message when the streaming head is present.
|
|
hasHeadItems ? { paddingTop: tightGap } : null,
|
|
]}
|
|
>
|
|
{hasPermissions ? (
|
|
<View style={stylesheet.permissionsContainer}>
|
|
{pendingPermissionItems.map((permission) => (
|
|
<PermissionRequestCard
|
|
key={permission.key}
|
|
permission={permission}
|
|
client={client}
|
|
/>
|
|
))}
|
|
</View>
|
|
) : null}
|
|
|
|
{hasHeadItems
|
|
? [...streamHead].reverse().map((item, index) => {
|
|
const rendered = renderStreamItemContent(item, index);
|
|
return rendered ? (
|
|
<View key={item.id} style={stylesheet.streamItemWrapper}>
|
|
{rendered}
|
|
</View>
|
|
) : null;
|
|
})
|
|
: null}
|
|
|
|
{showBottomBar ? <View style={stylesheet.bottomBarWrapper}>{leftContent}</View> : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
}, [
|
|
pendingPermissionItems,
|
|
showWorkingIndicator,
|
|
client,
|
|
streamHead,
|
|
renderStreamItemContent,
|
|
tightGap,
|
|
showBottomBar,
|
|
]);
|
|
|
|
const flatListExtraData = useMemo(
|
|
() => ({
|
|
pendingPermissionCount: pendingPermissionItems.length,
|
|
showWorkingIndicator,
|
|
showBottomBar,
|
|
}),
|
|
[
|
|
pendingPermissionItems.length,
|
|
showWorkingIndicator,
|
|
showBottomBar,
|
|
]
|
|
);
|
|
|
|
// FlatList's ListHeaderComponent renders at the *bottom* when inverted.
|
|
// Without explicit spacing, the newest "head" rows (like Thinking/Setup tool badges)
|
|
// can butt up directly against the most recent stream item.
|
|
const headerGapStyle = useMemo(() => {
|
|
if (!listHeaderComponent) {
|
|
return undefined;
|
|
}
|
|
return { marginBottom: tightGap };
|
|
}, [listHeaderComponent, tightGap]);
|
|
|
|
const listEmptyComponent = useMemo(() => {
|
|
const hasPermissions = pendingPermissionItems.length > 0;
|
|
const hasHeadItems = (streamHead?.length ?? 0) > 0;
|
|
if (hasPermissions || hasHeadItems) {
|
|
return null;
|
|
}
|
|
|
|
const shouldShowWorking = agent.status === "running";
|
|
|
|
if (shouldShowWorking) {
|
|
return (
|
|
<View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
|
|
<ActivityIndicator
|
|
size="small"
|
|
color={theme.colors.foregroundMuted}
|
|
/>
|
|
<Text style={stylesheet.emptyStateText}>Working…</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
|
|
<Text style={stylesheet.emptyStateText}>
|
|
Start chatting with this agent...
|
|
</Text>
|
|
</View>
|
|
);
|
|
}, [
|
|
agent.status,
|
|
pendingPermissionItems.length,
|
|
streamHead,
|
|
theme.colors.foregroundMuted,
|
|
]);
|
|
|
|
return (
|
|
<ToolCallSheetProvider>
|
|
<View style={stylesheet.container}>
|
|
<MessageOuterSpacingProvider disableOuterSpacing>
|
|
<FlatList
|
|
ref={flatListRef}
|
|
data={flatListData}
|
|
renderItem={renderStreamItem}
|
|
keyExtractor={(item) => item.id}
|
|
testID="agent-chat-scroll"
|
|
ListHeaderComponentStyle={headerGapStyle}
|
|
contentContainerStyle={{
|
|
paddingVertical: 0,
|
|
flexGrow: 1,
|
|
}}
|
|
style={stylesheet.list}
|
|
onLayout={
|
|
showDesktopWebScrollbar
|
|
? streamScrollbarMetrics.onLayout
|
|
: undefined
|
|
}
|
|
onScroll={handleScroll}
|
|
scrollEventThrottle={16}
|
|
onContentSizeChange={
|
|
showDesktopWebScrollbar
|
|
? streamScrollbarMetrics.onContentSizeChange
|
|
: undefined
|
|
}
|
|
ListEmptyComponent={listEmptyComponent}
|
|
ListHeaderComponent={listHeaderComponent}
|
|
extraData={flatListExtraData}
|
|
maintainVisibleContentPosition={
|
|
// Disable when streaming and user is at bottom - we handle auto-scroll ourselves
|
|
agent.status === "running" && isNearBottom
|
|
? undefined
|
|
: { minIndexForVisible: 0, autoscrollToTopThreshold: 40 }
|
|
}
|
|
initialNumToRender={12}
|
|
windowSize={10}
|
|
scrollEnabled={Platform.OS !== "web" || expandedInlineToolCallIds.size === 0}
|
|
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
|
inverted
|
|
/>
|
|
</MessageOuterSpacingProvider>
|
|
<WebDesktopScrollbarOverlay
|
|
enabled={showDesktopWebScrollbar}
|
|
metrics={streamScrollbarMetrics}
|
|
inverted
|
|
onScrollToOffset={(nextOffset) => {
|
|
flatListRef.current?.scrollToOffset({
|
|
offset: nextOffset,
|
|
animated: false,
|
|
});
|
|
streamScrollbarMetrics.setOffset(nextOffset);
|
|
}}
|
|
/>
|
|
|
|
{/* Scroll to bottom button */}
|
|
{!isNearBottom && (
|
|
<Animated.View
|
|
style={stylesheet.scrollToBottomContainer}
|
|
entering={scrollIndicatorFadeIn}
|
|
exiting={scrollIndicatorFadeOut}
|
|
>
|
|
<View style={stylesheet.scrollToBottomInner}>
|
|
<Pressable
|
|
style={stylesheet.scrollToBottomButton}
|
|
onPress={scrollToBottom}
|
|
>
|
|
<ChevronDown
|
|
size={24}
|
|
color={stylesheet.scrollToBottomIcon.color}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
</Animated.View>
|
|
)}
|
|
</View>
|
|
</ToolCallSheetProvider>
|
|
);
|
|
}
|
|
|
|
function normalizeInlinePath(
|
|
rawPath: string,
|
|
cwd?: string
|
|
): { directory: string; file?: string } | null {
|
|
if (!rawPath) {
|
|
return null;
|
|
}
|
|
|
|
const normalizedInput = normalizePathInput(rawPath);
|
|
if (!normalizedInput) {
|
|
return null;
|
|
}
|
|
|
|
let normalized = normalizedInput;
|
|
const cwdRelative = resolvePathAgainstCwd(normalized, cwd);
|
|
if (cwdRelative) {
|
|
normalized = cwdRelative;
|
|
}
|
|
|
|
if (normalized.startsWith("./")) {
|
|
normalized = normalized.slice(2) || ".";
|
|
}
|
|
|
|
if (!normalized.length) {
|
|
normalized = ".";
|
|
}
|
|
|
|
if (normalized === ".") {
|
|
return { directory: "." };
|
|
}
|
|
|
|
if (normalized.endsWith("/")) {
|
|
const dir = normalized.replace(/\/+$/, "");
|
|
return { directory: dir.length > 0 ? dir : "." };
|
|
}
|
|
|
|
const lastSlash = normalized.lastIndexOf("/");
|
|
const directory = lastSlash >= 0 ? normalized.slice(0, lastSlash) : ".";
|
|
|
|
return {
|
|
directory: directory.length > 0 ? directory : ".",
|
|
file: normalized,
|
|
};
|
|
}
|
|
|
|
function normalizePathInput(value: string | undefined): string | null {
|
|
if (!value) {
|
|
return null;
|
|
}
|
|
|
|
const trimmed = value
|
|
.trim()
|
|
.replace(/^['"`]/, "")
|
|
.replace(/['"`]$/, "");
|
|
if (!trimmed) {
|
|
return null;
|
|
}
|
|
|
|
return trimmed.replace(/\\/g, "/").replace(/\/{2,}/g, "/");
|
|
}
|
|
|
|
function resolvePathAgainstCwd(pathValue: string, cwd?: string): string | null {
|
|
const normalizedCwd = normalizePathInput(cwd);
|
|
if (
|
|
!normalizedCwd ||
|
|
!isAbsolutePath(pathValue) ||
|
|
!isAbsolutePath(normalizedCwd)
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
const normalizedCwdBase = normalizedCwd.replace(/\/+$/, "") || "/";
|
|
const comparePath = normalizePathForCompare(pathValue);
|
|
const compareCwd = normalizePathForCompare(normalizedCwdBase);
|
|
const prefix = normalizedCwdBase === "/" ? "/" : `${normalizedCwdBase}/`;
|
|
const comparePrefix = normalizePathForCompare(prefix);
|
|
|
|
if (comparePath === compareCwd) {
|
|
return ".";
|
|
}
|
|
|
|
if (comparePath.startsWith(comparePrefix)) {
|
|
return pathValue.slice(prefix.length) || ".";
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function normalizePathForCompare(value: string): string {
|
|
return /^[A-Za-z]:/.test(value) ? value.toLowerCase() : value;
|
|
}
|
|
|
|
function isAbsolutePath(value: string): boolean {
|
|
return value.startsWith("/") || /^[A-Za-z]:\//.test(value);
|
|
}
|
|
|
|
function WorkingIndicator() {
|
|
const dotOne = useSharedValue(0);
|
|
const dotTwo = useSharedValue(0);
|
|
const dotThree = useSharedValue(0);
|
|
const bounceDuration = 600;
|
|
const bounceDelayOffset = 160;
|
|
|
|
useEffect(() => {
|
|
const sharedValues = [dotOne, dotTwo, dotThree];
|
|
sharedValues.forEach((value, index) => {
|
|
value.value = withDelay(
|
|
index * bounceDelayOffset,
|
|
withRepeat(
|
|
withSequence(
|
|
withTiming(1, { duration: bounceDuration }),
|
|
withTiming(0, { duration: bounceDuration })
|
|
),
|
|
-1
|
|
)
|
|
);
|
|
});
|
|
|
|
return () => {
|
|
sharedValues.forEach((value) => {
|
|
cancelAnimation(value);
|
|
value.value = 0;
|
|
});
|
|
};
|
|
}, [dotOne, dotTwo, dotThree]);
|
|
|
|
const translateDistance = -2;
|
|
const dotOneStyle = useAnimatedStyle(() => ({
|
|
opacity: 0.3 + dotOne.value * 0.7,
|
|
transform: [{ translateY: dotOne.value * translateDistance }],
|
|
}));
|
|
|
|
const dotTwoStyle = useAnimatedStyle(() => ({
|
|
opacity: 0.3 + dotTwo.value * 0.7,
|
|
transform: [{ translateY: dotTwo.value * translateDistance }],
|
|
}));
|
|
|
|
const dotThreeStyle = useAnimatedStyle(() => ({
|
|
opacity: 0.3 + dotThree.value * 0.7,
|
|
transform: [{ translateY: dotThree.value * translateDistance }],
|
|
}));
|
|
|
|
return (
|
|
<View style={stylesheet.workingIndicatorBubble}>
|
|
<View style={stylesheet.workingDotsRow}>
|
|
<Animated.View style={[stylesheet.workingDot, dotOneStyle]} />
|
|
<Animated.View style={[stylesheet.workingDot, dotTwoStyle]} />
|
|
<Animated.View style={[stylesheet.workingDot, dotThreeStyle]} />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Permission Request Card Component
|
|
function PermissionRequestCard({
|
|
permission,
|
|
client,
|
|
}: {
|
|
permission: PendingPermission;
|
|
client: DaemonClient | null;
|
|
}) {
|
|
const { theme } = useUnistyles();
|
|
const isMobile =
|
|
UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
|
|
|
|
const { request } = permission;
|
|
const isPlanRequest = request.kind === "plan";
|
|
const title = isPlanRequest
|
|
? "Plan"
|
|
: request.title ?? request.name ?? "Permission Required";
|
|
const description = request.description ?? "";
|
|
|
|
const planMarkdown = useMemo(() => {
|
|
if (!request) {
|
|
return undefined;
|
|
}
|
|
const planFromMetadata =
|
|
typeof request.metadata?.planText === "string"
|
|
? request.metadata.planText
|
|
: undefined;
|
|
if (planFromMetadata) {
|
|
return planFromMetadata;
|
|
}
|
|
const candidate = request.input?.["plan"];
|
|
if (typeof candidate === "string") {
|
|
return candidate;
|
|
}
|
|
return undefined;
|
|
}, [request]);
|
|
|
|
const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
|
|
|
|
const markdownRules = useMemo(() => {
|
|
return {
|
|
text: (
|
|
node: any,
|
|
_children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any,
|
|
inheritedStyles: any = {}
|
|
) => (
|
|
<Text key={node.key} style={[inheritedStyles, styles.text]}>
|
|
{node.content}
|
|
</Text>
|
|
),
|
|
textgroup: (
|
|
node: any,
|
|
children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any,
|
|
inheritedStyles: any = {}
|
|
) => (
|
|
<Text
|
|
key={node.key}
|
|
style={[inheritedStyles, styles.textgroup]}
|
|
>
|
|
{children}
|
|
</Text>
|
|
),
|
|
code_block: (
|
|
node: any,
|
|
_children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any,
|
|
inheritedStyles: any = {}
|
|
) => (
|
|
<Text
|
|
key={node.key}
|
|
style={[inheritedStyles, styles.code_block]}
|
|
>
|
|
{node.content}
|
|
</Text>
|
|
),
|
|
fence: (
|
|
node: any,
|
|
_children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any,
|
|
inheritedStyles: any = {}
|
|
) => (
|
|
<Text key={node.key} style={[inheritedStyles, styles.fence]}>
|
|
{node.content}
|
|
</Text>
|
|
),
|
|
code_inline: (
|
|
node: any,
|
|
_children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any,
|
|
inheritedStyles: any = {}
|
|
) => (
|
|
<Text
|
|
key={node.key}
|
|
style={[inheritedStyles, styles.code_inline]}
|
|
>
|
|
{node.content}
|
|
</Text>
|
|
),
|
|
bullet_list: (
|
|
node: any,
|
|
children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any
|
|
) => (
|
|
<View key={node.key} style={styles.bullet_list}>
|
|
{children}
|
|
</View>
|
|
),
|
|
ordered_list: (
|
|
node: any,
|
|
children: React.ReactNode[],
|
|
_parent: any,
|
|
styles: any
|
|
) => (
|
|
<View key={node.key} style={styles.ordered_list}>
|
|
{children}
|
|
</View>
|
|
),
|
|
list_item: (
|
|
node: any,
|
|
children: React.ReactNode[],
|
|
parent: any,
|
|
styles: any
|
|
) => {
|
|
const { isOrdered, marker } = getMarkdownListMarker(node, parent);
|
|
const iconStyle = isOrdered
|
|
? styles.ordered_list_icon
|
|
: styles.bullet_list_icon;
|
|
const contentStyle = isOrdered
|
|
? styles.ordered_list_content
|
|
: styles.bullet_list_content;
|
|
|
|
return (
|
|
<View key={node.key} style={[styles.list_item, { flexShrink: 0 }]}>
|
|
<Text style={iconStyle}>{marker}</Text>
|
|
<Text
|
|
style={[contentStyle, { flex: 1, flexShrink: 1, minWidth: 0 }]}
|
|
>
|
|
{children}
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
};
|
|
}, []);
|
|
|
|
const permissionMutation = useMutation({
|
|
mutationFn: async (input: {
|
|
agentId: string;
|
|
requestId: string;
|
|
response: AgentPermissionResponse;
|
|
}) => {
|
|
if (!client) {
|
|
throw new Error("Daemon client unavailable");
|
|
}
|
|
return client.respondToPermissionAndWait(
|
|
input.agentId,
|
|
input.requestId,
|
|
input.response,
|
|
15000
|
|
);
|
|
},
|
|
});
|
|
const {
|
|
reset: resetPermissionMutation,
|
|
mutateAsync: respondToPermission,
|
|
isPending: isResponding,
|
|
} = permissionMutation;
|
|
|
|
const [respondingAction, setRespondingAction] = useState<"accept" | "deny" | null>(null);
|
|
|
|
useEffect(() => {
|
|
resetPermissionMutation();
|
|
setRespondingAction(null);
|
|
}, [permission.request.id, resetPermissionMutation]);
|
|
const handleResponse = useCallback(
|
|
(response: AgentPermissionResponse) => {
|
|
respondToPermission({
|
|
agentId: permission.agentId,
|
|
requestId: permission.request.id,
|
|
response,
|
|
}).catch((error) => {
|
|
console.error(
|
|
"[PermissionRequestCard] Failed to respond to permission:",
|
|
error
|
|
);
|
|
});
|
|
},
|
|
[permission.agentId, permission.request.id, respondToPermission]
|
|
);
|
|
|
|
if (request.kind === "question") {
|
|
return (
|
|
<QuestionFormCard
|
|
permission={permission}
|
|
onRespond={handleResponse}
|
|
isResponding={isResponding}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
permissionStyles.container,
|
|
{
|
|
backgroundColor: theme.colors.surface1,
|
|
borderColor: theme.colors.border,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[permissionStyles.title, { color: theme.colors.foreground }]}
|
|
>
|
|
{title}
|
|
</Text>
|
|
|
|
{description ? (
|
|
<Text
|
|
style={[
|
|
permissionStyles.description,
|
|
{ color: theme.colors.foregroundMuted },
|
|
]}
|
|
>
|
|
{description}
|
|
</Text>
|
|
) : null}
|
|
|
|
{planMarkdown ? (
|
|
<View style={permissionStyles.section}>
|
|
{!isPlanRequest ? (
|
|
<Text
|
|
style={[
|
|
permissionStyles.sectionTitle,
|
|
{ color: theme.colors.foregroundMuted },
|
|
]}
|
|
>
|
|
Proposed plan
|
|
</Text>
|
|
) : null}
|
|
<Markdown style={markdownStyles} rules={markdownRules}>
|
|
{planMarkdown}
|
|
</Markdown>
|
|
</View>
|
|
) : null}
|
|
|
|
{!isPlanRequest ? (
|
|
<ToolCallDetailsContent
|
|
detail={
|
|
request.detail ?? {
|
|
type: "unknown",
|
|
input: request.input ?? null,
|
|
output: null,
|
|
}
|
|
}
|
|
maxHeight={200}
|
|
/>
|
|
) : null}
|
|
|
|
<Text
|
|
testID="permission-request-question"
|
|
style={[
|
|
permissionStyles.question,
|
|
{ color: theme.colors.foregroundMuted },
|
|
]}
|
|
>
|
|
How would you like to proceed?
|
|
</Text>
|
|
|
|
<View
|
|
style={[
|
|
permissionStyles.optionsContainer,
|
|
!isMobile && permissionStyles.optionsContainerDesktop,
|
|
]}
|
|
>
|
|
<Pressable
|
|
testID="permission-request-deny"
|
|
style={({ pressed, hovered = false }) => [
|
|
permissionStyles.optionButton,
|
|
{
|
|
backgroundColor: hovered
|
|
? theme.colors.surface2
|
|
: theme.colors.surface1,
|
|
borderColor: theme.colors.borderAccent,
|
|
},
|
|
pressed ? permissionStyles.optionButtonPressed : null,
|
|
]}
|
|
onPress={() => {
|
|
setRespondingAction("deny");
|
|
handleResponse({
|
|
behavior: "deny",
|
|
message: "Denied by user",
|
|
});
|
|
}}
|
|
disabled={isResponding}
|
|
>
|
|
{respondingAction === "deny" ? (
|
|
<ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
|
|
) : (
|
|
<View style={permissionStyles.optionContent}>
|
|
<X size={14} color={theme.colors.foregroundMuted} />
|
|
<Text
|
|
style={[
|
|
permissionStyles.optionText,
|
|
{ color: theme.colors.foregroundMuted },
|
|
]}
|
|
>
|
|
Deny
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
testID="permission-request-accept"
|
|
style={({ pressed, hovered = false }) => [
|
|
permissionStyles.optionButton,
|
|
{
|
|
backgroundColor: hovered
|
|
? theme.colors.surface2
|
|
: theme.colors.surface1,
|
|
borderColor: theme.colors.borderAccent,
|
|
},
|
|
pressed ? permissionStyles.optionButtonPressed : null,
|
|
]}
|
|
onPress={() => {
|
|
setRespondingAction("accept");
|
|
handleResponse({ behavior: "allow" });
|
|
}}
|
|
disabled={isResponding}
|
|
>
|
|
{respondingAction === "accept" ? (
|
|
<ActivityIndicator size="small" color={theme.colors.foreground} />
|
|
) : (
|
|
<View style={permissionStyles.optionContent}>
|
|
<Check size={14} color={theme.colors.foreground} />
|
|
<Text
|
|
style={[
|
|
permissionStyles.optionText,
|
|
{ color: theme.colors.foreground },
|
|
]}
|
|
>
|
|
Accept
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const stylesheet = StyleSheet.create((theme) => ({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.surface0,
|
|
},
|
|
contentWrapper: {
|
|
width: "100%",
|
|
maxWidth: MAX_CONTENT_WIDTH,
|
|
alignSelf: "center",
|
|
},
|
|
list: {
|
|
flex: 1,
|
|
paddingHorizontal: {
|
|
xs: theme.spacing[2],
|
|
md: theme.spacing[4],
|
|
},
|
|
},
|
|
streamItemWrapper: {
|
|
width: "100%",
|
|
maxWidth: MAX_CONTENT_WIDTH,
|
|
alignSelf: "center",
|
|
},
|
|
emptyState: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: theme.spacing[12],
|
|
},
|
|
permissionsContainer: {
|
|
gap: theme.spacing[2],
|
|
},
|
|
listHeaderContent: {
|
|
gap: theme.spacing[3],
|
|
},
|
|
bottomBarWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
paddingLeft: 3,
|
|
paddingRight: 3,
|
|
paddingTop: theme.spacing[3],
|
|
paddingBottom: theme.spacing[2],
|
|
gap: theme.spacing[2],
|
|
},
|
|
workingIndicatorBubble: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
paddingHorizontal: 0,
|
|
paddingVertical: theme.spacing[1],
|
|
paddingLeft: theme.spacing[2],
|
|
borderRadius: theme.borderRadius.full,
|
|
backgroundColor: "transparent",
|
|
borderWidth: 0,
|
|
alignSelf: "flex-start",
|
|
},
|
|
workingDotsRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[1],
|
|
},
|
|
workingDot: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
backgroundColor: theme.colors.foregroundMuted,
|
|
},
|
|
syncingIndicator: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
paddingVertical: theme.spacing[1],
|
|
paddingLeft: theme.spacing[2],
|
|
},
|
|
syncingIndicatorText: {
|
|
color: theme.colors.foregroundMuted,
|
|
fontSize: theme.fontSize.sm,
|
|
},
|
|
invertedWrapper: {
|
|
transform: [{ scaleY: -1 }],
|
|
width: "100%",
|
|
},
|
|
emptyStateText: {
|
|
color: theme.colors.foregroundMuted,
|
|
fontSize: theme.fontSize.sm,
|
|
textAlign: "center",
|
|
},
|
|
scrollToBottomContainer: {
|
|
position: "absolute",
|
|
bottom: 16,
|
|
left: 0,
|
|
right: 0,
|
|
alignItems: "center",
|
|
pointerEvents: "box-none",
|
|
},
|
|
scrollToBottomInner: {
|
|
width: "100%",
|
|
maxWidth: MAX_CONTENT_WIDTH,
|
|
alignSelf: "center",
|
|
alignItems: "center",
|
|
},
|
|
scrollToBottomButton: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: theme.colors.surface2,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
scrollToBottomIcon: {
|
|
color: theme.colors.foreground,
|
|
},
|
|
}));
|
|
|
|
const permissionStyles = StyleSheet.create((theme) => ({
|
|
container: {
|
|
marginVertical: theme.spacing[3],
|
|
padding: theme.spacing[3],
|
|
borderRadius: theme.spacing[2],
|
|
borderWidth: 1,
|
|
gap: theme.spacing[2],
|
|
},
|
|
title: {
|
|
fontSize: theme.fontSize.base,
|
|
lineHeight: 22,
|
|
},
|
|
description: {
|
|
fontSize: theme.fontSize.sm,
|
|
lineHeight: 20,
|
|
},
|
|
section: {
|
|
gap: theme.spacing[2],
|
|
},
|
|
sectionTitle: {
|
|
fontSize: theme.fontSize.xs,
|
|
},
|
|
question: {
|
|
fontSize: theme.fontSize.sm,
|
|
marginTop: theme.spacing[1],
|
|
marginBottom: theme.spacing[1],
|
|
},
|
|
optionsContainer: {
|
|
gap: theme.spacing[2],
|
|
},
|
|
optionsContainerDesktop: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
},
|
|
optionButton: {
|
|
paddingVertical: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
borderRadius: theme.borderRadius.md,
|
|
alignItems: "center",
|
|
borderWidth: theme.borderWidth[1],
|
|
},
|
|
optionButtonPressed: {
|
|
opacity: 0.9,
|
|
},
|
|
optionContent: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
},
|
|
optionText: {
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: theme.fontWeight.normal,
|
|
},
|
|
}));
|