426 lines
13 KiB
TypeScript
426 lines
13 KiB
TypeScript
import { useCallback, useEffect, useMemo, useReducer } from "react";
|
|
import { Keyboard, Platform, ScrollView, Text, View } from "react-native";
|
|
import { StyleSheet } from "react-native-unistyles";
|
|
import { AgentInputArea } from "@/components/agent-input-area";
|
|
import { AgentConfigRow } from "@/components/agent-form/agent-form-dropdowns";
|
|
import { AgentStreamView } from "@/components/agent-stream-view";
|
|
import { MAX_CONTENT_WIDTH } from "@/constants/layout";
|
|
import { useAgentFormState } from "@/hooks/use-agent-form-state";
|
|
import { useHostRuntimeSession } from "@/runtime/host-runtime";
|
|
import { useCreateFlowStore } from "@/stores/create-flow-store";
|
|
import { useSessionStore, type Agent } from "@/stores/session-store";
|
|
import { generateMessageId, type StreamItem, type UserMessageImageAttachment } from "@/types/stream";
|
|
import { encodeImages } from "@/utils/encode-images";
|
|
import type { AgentCapabilityFlags, AgentSessionConfig } from "@server/server/agent/agent-sdk-types";
|
|
import type { AgentSnapshotPayload } from "@server/shared/messages";
|
|
import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
|
|
|
|
const EMPTY_PENDING_PERMISSIONS = new Map();
|
|
const EMPTY_STREAM_ITEMS: StreamItem[] = [];
|
|
const DRAFT_CAPABILITIES: AgentCapabilityFlags = {
|
|
supportsStreaming: true,
|
|
supportsSessionPersistence: false,
|
|
supportsDynamicModes: false,
|
|
supportsMcpServers: false,
|
|
supportsReasoningStream: false,
|
|
supportsToolInvocations: false,
|
|
};
|
|
|
|
type WorkspaceDraftAgentTabProps = {
|
|
serverId: string;
|
|
workspaceId: string;
|
|
tabId: string;
|
|
draftId: string;
|
|
onCreated: (snapshot: AgentSnapshotPayload) => void;
|
|
};
|
|
|
|
type CreateAttempt = {
|
|
clientMessageId: string;
|
|
text: string;
|
|
timestamp: Date;
|
|
images?: UserMessageImageAttachment[];
|
|
};
|
|
|
|
type DraftAgentMachineState =
|
|
| { tag: "draft"; promptText: string; errorMessage: string }
|
|
| { tag: "creating"; attempt: CreateAttempt };
|
|
|
|
type DraftAgentMachineEvent =
|
|
| { type: "DRAFT_SET_PROMPT"; text: string }
|
|
| { type: "DRAFT_SET_ERROR"; message: string }
|
|
| { type: "SUBMIT"; attempt: CreateAttempt }
|
|
| { type: "CREATE_FAILED"; message: string };
|
|
|
|
function assertNever(value: never): never {
|
|
throw new Error(`Unhandled state: ${JSON.stringify(value)}`);
|
|
}
|
|
|
|
export function WorkspaceDraftAgentTab({
|
|
serverId,
|
|
workspaceId,
|
|
tabId,
|
|
draftId,
|
|
onCreated,
|
|
}: WorkspaceDraftAgentTabProps) {
|
|
const { client, isConnected } = useHostRuntimeSession(serverId);
|
|
|
|
const setPendingCreateAttempt = useCreateFlowStore((state) => state.setPending);
|
|
const updatePendingAgentId = useCreateFlowStore((state) => state.updateAgentId);
|
|
const markPendingCreateLifecycle = useCreateFlowStore((state) => state.markLifecycle);
|
|
const clearPendingCreateAttempt = useCreateFlowStore((state) => state.clear);
|
|
|
|
const {
|
|
selectedProvider,
|
|
setProviderFromUser,
|
|
selectedMode,
|
|
setModeFromUser,
|
|
selectedModel,
|
|
setModelFromUser,
|
|
selectedThinkingOptionId,
|
|
setThinkingOptionFromUser,
|
|
workingDir,
|
|
setWorkingDir,
|
|
providerDefinitions,
|
|
modeOptions,
|
|
availableModels,
|
|
availableThinkingOptions,
|
|
isModelLoading,
|
|
persistFormPreferences,
|
|
} = useAgentFormState({
|
|
initialServerId: serverId,
|
|
initialValues: { workingDir: workspaceId },
|
|
isVisible: true,
|
|
isCreateFlow: true,
|
|
onlineServerIds: isConnected ? [serverId] : [],
|
|
});
|
|
|
|
// Lock working directory to workspace.
|
|
useEffect(() => {
|
|
if (workingDir.trim() === workspaceId.trim()) {
|
|
return;
|
|
}
|
|
setWorkingDir(workspaceId);
|
|
}, [setWorkingDir, workingDir, workspaceId]);
|
|
|
|
const [machine, dispatch] = useReducer(
|
|
(state: DraftAgentMachineState, event: DraftAgentMachineEvent): DraftAgentMachineState => {
|
|
switch (event.type) {
|
|
case "DRAFT_SET_PROMPT": {
|
|
if (state.tag !== "draft") {
|
|
return state;
|
|
}
|
|
return { ...state, promptText: event.text };
|
|
}
|
|
case "DRAFT_SET_ERROR": {
|
|
if (state.tag !== "draft") {
|
|
return state;
|
|
}
|
|
return { ...state, errorMessage: event.message };
|
|
}
|
|
case "SUBMIT": {
|
|
return { tag: "creating", attempt: event.attempt };
|
|
}
|
|
case "CREATE_FAILED": {
|
|
if (state.tag !== "creating") {
|
|
return state;
|
|
}
|
|
return { tag: "draft", promptText: state.attempt.text, errorMessage: event.message };
|
|
}
|
|
default:
|
|
return assertNever(event);
|
|
}
|
|
},
|
|
{ tag: "draft", promptText: "", errorMessage: "" }
|
|
);
|
|
|
|
const promptValue = machine.tag === "draft" ? machine.promptText : "";
|
|
const formErrorMessage = machine.tag === "draft" ? machine.errorMessage : "";
|
|
const isSubmitting = machine.tag === "creating";
|
|
|
|
const optimisticStreamItems = useMemo<StreamItem[]>(() => {
|
|
if (machine.tag !== "creating") {
|
|
return EMPTY_STREAM_ITEMS;
|
|
}
|
|
return [
|
|
{
|
|
kind: "user_message",
|
|
id: machine.attempt.clientMessageId,
|
|
text: machine.attempt.text,
|
|
timestamp: machine.attempt.timestamp,
|
|
...(machine.attempt.images && machine.attempt.images.length > 0
|
|
? { images: machine.attempt.images }
|
|
: {}),
|
|
},
|
|
];
|
|
}, [machine]);
|
|
|
|
const draftAgent = useMemo<Agent | null>(() => {
|
|
if (machine.tag !== "creating") {
|
|
return null;
|
|
}
|
|
const now = machine.attempt.timestamp;
|
|
const model = selectedModel.trim() || null;
|
|
const thinkingOptionId = selectedThinkingOptionId.trim() || null;
|
|
const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : null;
|
|
return {
|
|
serverId,
|
|
id: tabId,
|
|
provider: selectedProvider,
|
|
status: "running",
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
lastUserMessageAt: now,
|
|
lastActivityAt: now,
|
|
capabilities: DRAFT_CAPABILITIES,
|
|
currentModeId: modeId,
|
|
availableModes: [],
|
|
pendingPermissions: [],
|
|
persistence: null,
|
|
runtimeInfo: { provider: selectedProvider, sessionId: null, model, modeId },
|
|
title: "New agent",
|
|
cwd: workspaceId,
|
|
model,
|
|
thinkingOptionId,
|
|
labels: {},
|
|
};
|
|
}, [
|
|
machine,
|
|
modeOptions.length,
|
|
selectedMode,
|
|
selectedModel,
|
|
selectedProvider,
|
|
selectedThinkingOptionId,
|
|
serverId,
|
|
tabId,
|
|
workspaceId,
|
|
]);
|
|
|
|
const handleCreateFromInput = useCallback(
|
|
async ({ text, images }: { text: string; images?: UserMessageImageAttachment[] }) => {
|
|
if (isSubmitting) {
|
|
throw new Error("Already loading");
|
|
}
|
|
dispatch({ type: "DRAFT_SET_ERROR", message: "" });
|
|
const trimmedPrompt = text.trim();
|
|
if (!trimmedPrompt) {
|
|
dispatch({ type: "DRAFT_SET_ERROR", message: "Initial prompt is required" });
|
|
throw new Error("Initial prompt is required");
|
|
}
|
|
if (providerDefinitions.length === 0) {
|
|
dispatch({
|
|
type: "DRAFT_SET_ERROR",
|
|
message: "No available providers on the selected host",
|
|
});
|
|
throw new Error("No available providers on the selected host");
|
|
}
|
|
if (!client) {
|
|
dispatch({ type: "DRAFT_SET_ERROR", message: "Host is not connected" });
|
|
throw new Error("Host is not connected");
|
|
}
|
|
|
|
const attempt: CreateAttempt = {
|
|
clientMessageId: generateMessageId(),
|
|
text: trimmedPrompt,
|
|
timestamp: new Date(),
|
|
...(images && images.length > 0 ? { images } : {}),
|
|
};
|
|
|
|
setPendingCreateAttempt({
|
|
draftId,
|
|
serverId,
|
|
agentId: null,
|
|
clientMessageId: attempt.clientMessageId,
|
|
text: attempt.text,
|
|
timestamp: attempt.timestamp.getTime(),
|
|
...(attempt.images && attempt.images.length > 0 ? { images: attempt.images } : {}),
|
|
});
|
|
|
|
const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;
|
|
const trimmedModel = selectedModel.trim();
|
|
const trimmedThinkingOptionId = selectedThinkingOptionId.trim();
|
|
const config: AgentSessionConfig = {
|
|
provider: selectedProvider,
|
|
cwd: workspaceId,
|
|
...(modeId ? { modeId } : {}),
|
|
...(trimmedModel ? { model: trimmedModel } : {}),
|
|
...(trimmedThinkingOptionId ? { thinkingOptionId: trimmedThinkingOptionId } : {}),
|
|
};
|
|
|
|
void persistFormPreferences();
|
|
if (Platform.OS === "web") {
|
|
(document.activeElement as HTMLElement | null)?.blur?.();
|
|
}
|
|
Keyboard.dismiss();
|
|
dispatch({ type: "SUBMIT", attempt });
|
|
|
|
try {
|
|
const imagesData = await encodeImages(images);
|
|
const result = await client.createAgent({
|
|
config,
|
|
initialPrompt: trimmedPrompt,
|
|
clientMessageId: attempt.clientMessageId,
|
|
...(imagesData && imagesData.length > 0 ? { images: imagesData } : {}),
|
|
});
|
|
|
|
const agentId = result.id;
|
|
updatePendingAgentId({ draftId, agentId });
|
|
|
|
const normalized = normalizeAgentSnapshot(result, serverId);
|
|
useSessionStore.getState().setAgents(serverId, (prev) => {
|
|
const next = new Map(prev);
|
|
next.set(agentId, normalized);
|
|
return next;
|
|
});
|
|
|
|
onCreated(result);
|
|
return;
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Failed to create agent";
|
|
dispatch({ type: "CREATE_FAILED", message });
|
|
markPendingCreateLifecycle({ draftId, lifecycle: "abandoned" });
|
|
clearPendingCreateAttempt({ draftId });
|
|
throw error;
|
|
}
|
|
},
|
|
[
|
|
clearPendingCreateAttempt,
|
|
client,
|
|
draftId,
|
|
isSubmitting,
|
|
markPendingCreateLifecycle,
|
|
modeOptions.length,
|
|
onCreated,
|
|
persistFormPreferences,
|
|
providerDefinitions.length,
|
|
selectedMode,
|
|
selectedModel,
|
|
selectedProvider,
|
|
selectedThinkingOptionId,
|
|
serverId,
|
|
setPendingCreateAttempt,
|
|
updatePendingAgentId,
|
|
workspaceId,
|
|
]
|
|
);
|
|
|
|
const draftCommandConfig = useMemo(() => {
|
|
return {
|
|
provider: selectedProvider,
|
|
cwd: workspaceId,
|
|
...(modeOptions.length > 0 && selectedMode !== "" ? { modeId: selectedMode } : {}),
|
|
...(selectedModel.trim() ? { model: selectedModel.trim() } : {}),
|
|
...(selectedThinkingOptionId.trim()
|
|
? { thinkingOptionId: selectedThinkingOptionId.trim() }
|
|
: {}),
|
|
};
|
|
}, [
|
|
modeOptions.length,
|
|
selectedMode,
|
|
selectedModel,
|
|
selectedProvider,
|
|
selectedThinkingOptionId,
|
|
workspaceId,
|
|
]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.contentContainer}>
|
|
{machine.tag === "creating" && draftAgent ? (
|
|
<View style={styles.streamContainer}>
|
|
<AgentStreamView
|
|
agentId={tabId}
|
|
serverId={serverId}
|
|
agent={draftAgent}
|
|
streamItems={optimisticStreamItems}
|
|
pendingPermissions={EMPTY_PENDING_PERMISSIONS}
|
|
/>
|
|
</View>
|
|
) : (
|
|
<ScrollView style={styles.scrollView} contentContainerStyle={styles.configScrollContent}>
|
|
<View style={styles.configSection}>
|
|
<AgentConfigRow
|
|
providerDefinitions={providerDefinitions}
|
|
selectedProvider={selectedProvider}
|
|
onSelectProvider={setProviderFromUser}
|
|
modeOptions={modeOptions}
|
|
selectedMode={selectedMode}
|
|
onSelectMode={setModeFromUser}
|
|
models={availableModels}
|
|
selectedModel={selectedModel}
|
|
onSelectModel={setModelFromUser}
|
|
isModelLoading={isModelLoading}
|
|
thinkingOptions={availableThinkingOptions}
|
|
selectedThinkingOptionId={selectedThinkingOptionId}
|
|
onSelectThinkingOption={setThinkingOptionFromUser}
|
|
disabled={isSubmitting}
|
|
/>
|
|
|
|
{formErrorMessage ? (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{formErrorMessage}</Text>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
</ScrollView>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.inputAreaWrapper}>
|
|
<AgentInputArea
|
|
agentId={tabId}
|
|
serverId={serverId}
|
|
onSubmitMessage={handleCreateFromInput}
|
|
isSubmitLoading={isSubmitting}
|
|
blurOnSubmit={true}
|
|
value={promptValue}
|
|
onChangeText={(next) => dispatch({ type: "DRAFT_SET_PROMPT", text: next })}
|
|
autoFocus={machine.tag === "draft"}
|
|
commandDraftConfig={draftCommandConfig}
|
|
draftId={draftId}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
container: {
|
|
flex: 1,
|
|
width: "100%",
|
|
alignSelf: "center",
|
|
maxWidth: MAX_CONTENT_WIDTH,
|
|
},
|
|
contentContainer: {
|
|
flex: 1,
|
|
},
|
|
streamContainer: {
|
|
flex: 1,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
configScrollContent: {
|
|
paddingHorizontal: theme.spacing[4],
|
|
paddingTop: theme.spacing[4],
|
|
paddingBottom: theme.spacing[6],
|
|
},
|
|
configSection: {
|
|
gap: theme.spacing[3],
|
|
},
|
|
inputAreaWrapper: {
|
|
width: "100%",
|
|
},
|
|
errorContainer: {
|
|
marginTop: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[2],
|
|
borderRadius: theme.borderRadius.md,
|
|
backgroundColor: theme.colors.surface2,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.destructive,
|
|
},
|
|
errorText: {
|
|
color: theme.colors.destructive,
|
|
},
|
|
}));
|