1254 lines
43 KiB
TypeScript
1254 lines
43 KiB
TypeScript
import { View, Pressable, Text, ActivityIndicator, Image } from "react-native";
|
|
import { useState, useEffect, useRef, useCallback, useMemo, memo } from "react";
|
|
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
import { useIsCompactFormFactor } from "@/constants/layout";
|
|
import { useShallow } from "zustand/shallow";
|
|
import {
|
|
ArrowUp,
|
|
Square,
|
|
Pencil,
|
|
AudioLines,
|
|
CircleDot,
|
|
GitPullRequest,
|
|
Github,
|
|
Paperclip,
|
|
} from "lucide-react-native";
|
|
import Animated from "react-native-reanimated";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
|
|
import { generateMessageId, type StreamItem } from "@/types/stream";
|
|
import {
|
|
AgentStatusBar,
|
|
DraftAgentStatusBar,
|
|
type DraftAgentStatusBarProps,
|
|
} from "./agent-status-bar";
|
|
import { ContextWindowMeter } from "./context-window-meter";
|
|
import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
|
|
import { useSessionStore } from "@/stores/session-store";
|
|
import {
|
|
MessageInput,
|
|
type MessagePayload,
|
|
type ImageAttachment,
|
|
type MessageInputRef,
|
|
type AttachmentMenuItem,
|
|
} from "./message-input";
|
|
import type { Theme } from "@/styles/theme";
|
|
import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
|
|
import { encodeImages } from "@/utils/encode-images";
|
|
import { focusWithRetries } from "@/utils/web-focus";
|
|
import { useVoiceOptional } from "@/contexts/voice-context";
|
|
import { useToast } from "@/contexts/toast-context";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { Shortcut } from "@/components/ui/shortcut";
|
|
import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
|
|
import { Autocomplete } from "@/components/ui/autocomplete";
|
|
import { useAgentAutocomplete } from "@/hooks/use-agent-autocomplete";
|
|
import {
|
|
useHostRuntimeAgentDirectoryStatus,
|
|
useHostRuntimeClient,
|
|
useHostRuntimeIsConnected,
|
|
} from "@/runtime/host-runtime";
|
|
import {
|
|
deleteAttachments,
|
|
persistAttachmentFromBlob,
|
|
persistAttachmentFromFileUri,
|
|
} from "@/attachments/service";
|
|
import { resolveStatusControlMode } from "@/components/composer.status-controls";
|
|
import { markScrollInvestigationRender } from "@/utils/scroll-jank";
|
|
import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
|
|
import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
|
|
import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
|
|
import { submitAgentInput } from "@/components/agent-input-submit";
|
|
import { useAppSettings } from "@/hooks/use-settings";
|
|
import { isWeb, isNative } from "@/constants/platform";
|
|
import type { GitHubSearchItem } from "@server/shared/messages";
|
|
import type { AttachmentMetadata, ComposerAttachment } from "@/attachments/types";
|
|
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
|
|
import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
|
|
import { splitComposerAttachmentsForSubmit } from "@/components/composer-attachments";
|
|
import { AttachmentPill } from "@/components/attachment-pill";
|
|
import { AttachmentLightbox } from "@/components/attachment-lightbox";
|
|
import { openExternalUrl } from "@/utils/open-external-url";
|
|
import { useIsDictationReady } from "@/hooks/use-is-dictation-ready";
|
|
|
|
type QueuedMessage = {
|
|
id: string;
|
|
text: string;
|
|
attachments: ComposerAttachment[];
|
|
};
|
|
|
|
type AttachmentListUpdater =
|
|
| ComposerAttachment[]
|
|
| ((prev: ComposerAttachment[]) => ComposerAttachment[]);
|
|
|
|
function ImageAttachmentThumbnail({ image }: { image: ImageAttachment }) {
|
|
const uri = useAttachmentPreviewUrl(image);
|
|
if (!uri) {
|
|
return <View style={styles.imageThumbnailPlaceholder} />;
|
|
}
|
|
return <Image source={{ uri }} style={styles.imageThumbnail} />;
|
|
}
|
|
|
|
interface ComposerProps {
|
|
agentId: string;
|
|
serverId: string;
|
|
isPaneFocused: boolean;
|
|
onSubmitMessage?: (payload: MessagePayload) => Promise<void>;
|
|
/** When true, the submit button is enabled even without text or images (e.g. external attachment selected). */
|
|
hasExternalContent?: boolean;
|
|
/** When true, the composer can submit even with no text or attachments. */
|
|
allowEmptySubmit?: boolean;
|
|
/** Optional accessibility label for the primary submit button. */
|
|
submitButtonAccessibilityLabel?: string;
|
|
submitIcon?: "arrow" | "return";
|
|
/** Externally controlled loading state. When true, disables the submit button. */
|
|
isSubmitLoading?: boolean;
|
|
submitBehavior?: "clear" | "preserve-and-lock";
|
|
/** When true, blurs the input immediately when submitting. */
|
|
blurOnSubmit?: boolean;
|
|
value: string;
|
|
onChangeText: (text: string) => void;
|
|
attachments: ComposerAttachment[];
|
|
onChangeAttachments: (updater: AttachmentListUpdater) => void;
|
|
cwd: string;
|
|
clearDraft: (lifecycle: "sent" | "abandoned") => void;
|
|
/** When true, auto-focuses the text input on web. */
|
|
autoFocus?: boolean;
|
|
/** Callback to expose the addImages function to parent components */
|
|
onAddImages?: (addImages: (images: ImageAttachment[]) => void) => void;
|
|
/** Callback to expose a focus function to parent components (desktop only). */
|
|
onFocusInput?: (focus: () => void) => void;
|
|
/** Optional draft context for listing commands before an agent exists. */
|
|
commandDraftConfig?: DraftCommandConfig;
|
|
/** Called when a message is about to be sent (any path: keyboard, dictation, queued). */
|
|
onMessageSent?: () => void;
|
|
onComposerHeightChange?: (height: number) => void;
|
|
onAttentionInputFocus?: () => void;
|
|
onAttentionPromptSend?: () => void;
|
|
/** Controlled status controls rendered in input area (draft flows). */
|
|
statusControls?: DraftAgentStatusBarProps;
|
|
/** Extra styles merged onto the message input wrapper (e.g. elevated background). */
|
|
inputWrapperStyle?: import("react-native").ViewStyle;
|
|
}
|
|
|
|
const EMPTY_ARRAY: readonly QueuedMessage[] = [];
|
|
const DESKTOP_MESSAGE_PLACEHOLDER = "Message the agent, tag @files, or use /commands and /skills";
|
|
const MOBILE_MESSAGE_PLACEHOLDER = "Message, @files, /commands";
|
|
const StableMessageInput = memo(MessageInput);
|
|
|
|
export function Composer({
|
|
agentId,
|
|
serverId,
|
|
isPaneFocused,
|
|
onSubmitMessage,
|
|
hasExternalContent = false,
|
|
allowEmptySubmit = false,
|
|
submitButtonAccessibilityLabel,
|
|
submitIcon = "arrow",
|
|
isSubmitLoading = false,
|
|
submitBehavior = "clear",
|
|
blurOnSubmit = false,
|
|
value,
|
|
onChangeText,
|
|
attachments,
|
|
onChangeAttachments,
|
|
cwd,
|
|
clearDraft,
|
|
autoFocus = false,
|
|
onAddImages,
|
|
onFocusInput,
|
|
commandDraftConfig,
|
|
onMessageSent,
|
|
onComposerHeightChange,
|
|
onAttentionInputFocus,
|
|
onAttentionPromptSend,
|
|
statusControls,
|
|
inputWrapperStyle,
|
|
}: ComposerProps) {
|
|
markScrollInvestigationRender(`Composer:${serverId}:${agentId}`);
|
|
const { theme } = useUnistyles();
|
|
const buttonIconSize = isWeb ? theme.iconSize.md : theme.iconSize.lg;
|
|
const client = useHostRuntimeClient(serverId);
|
|
const isConnected = useHostRuntimeIsConnected(serverId);
|
|
const agentDirectoryStatus = useHostRuntimeAgentDirectoryStatus(serverId);
|
|
const toast = useToast();
|
|
const toastErrorRef = useRef(toast.error);
|
|
toastErrorRef.current = toast.error;
|
|
const voice = useVoiceOptional();
|
|
const voiceToggleKeys = useShortcutKeys("voice-toggle");
|
|
const agentInterruptKeys = useShortcutKeys("agent-interrupt");
|
|
const isDictationReady = useIsDictationReady({
|
|
serverId,
|
|
isConnected,
|
|
agentDirectoryStatus,
|
|
});
|
|
|
|
const { settings: appSettings } = useAppSettings();
|
|
|
|
const agentState = useSessionStore(
|
|
useShallow((state) => {
|
|
const agent = state.sessions[serverId]?.agents?.get(agentId) ?? null;
|
|
return {
|
|
status: agent?.status ?? null,
|
|
contextWindowMaxTokens: agent?.lastUsage?.contextWindowMaxTokens ?? null,
|
|
contextWindowUsedTokens: agent?.lastUsage?.contextWindowUsedTokens ?? null,
|
|
};
|
|
}),
|
|
);
|
|
|
|
const queuedMessagesRaw = useSessionStore((state) =>
|
|
state.sessions[serverId]?.queuedMessages?.get(agentId),
|
|
);
|
|
const queuedMessages = queuedMessagesRaw ?? EMPTY_ARRAY;
|
|
|
|
const setQueuedMessages = useSessionStore((state) => state.setQueuedMessages);
|
|
const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail);
|
|
const setAgentStreamHead = useSessionStore((state) => state.setAgentStreamHead);
|
|
|
|
const isMobile = useIsCompactFormFactor();
|
|
const isDesktopWebBreakpoint = isWeb && !isMobile;
|
|
const messagePlaceholder = isDesktopWebBreakpoint
|
|
? DESKTOP_MESSAGE_PLACEHOLDER
|
|
: MOBILE_MESSAGE_PLACEHOLDER;
|
|
const userInput = value;
|
|
const setUserInput = onChangeText;
|
|
const selectedAttachments = attachments;
|
|
const setSelectedAttachments = onChangeAttachments;
|
|
const [cursorIndex, setCursorIndex] = useState(0);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [isCancellingAgent, setIsCancellingAgent] = useState(false);
|
|
const [sendError, setSendError] = useState<string | null>(null);
|
|
const [isMessageInputFocused, setIsMessageInputFocused] = useState(false);
|
|
const [isGithubPickerOpen, setIsGithubPickerOpen] = useState(false);
|
|
const [githubSearchQuery, setGithubSearchQuery] = useState("");
|
|
const [lightboxMetadata, setLightboxMetadata] = useState<AttachmentMetadata | null>(null);
|
|
const attachButtonRef = useRef<View | null>(null);
|
|
const messageInputRef = useRef<MessageInputRef>(null);
|
|
const isComposerLocked = submitBehavior === "preserve-and-lock" && isSubmitLoading;
|
|
const keyboardHandlerIdRef = useRef(
|
|
`message-input:${serverId}:${agentId}:${Math.random().toString(36).slice(2)}`,
|
|
);
|
|
|
|
const autocomplete = useAgentAutocomplete({
|
|
userInput,
|
|
cursorIndex,
|
|
setUserInput,
|
|
serverId,
|
|
agentId,
|
|
draftConfig: commandDraftConfig,
|
|
onAutocompleteApplied: () => {
|
|
messageInputRef.current?.focus();
|
|
},
|
|
});
|
|
const autocompleteOnKeyPressRef = useRef(autocomplete.onKeyPress);
|
|
autocompleteOnKeyPressRef.current = autocomplete.onKeyPress;
|
|
|
|
// Clear send error when user edits the input
|
|
useEffect(() => {
|
|
if (sendError && userInput) {
|
|
setSendError(null);
|
|
}
|
|
}, [userInput, sendError]);
|
|
|
|
useEffect(() => {
|
|
setCursorIndex((current) => Math.min(current, userInput.length));
|
|
}, [userInput.length]);
|
|
|
|
const { pickImages } = useImageAttachmentPicker();
|
|
const agentIdRef = useRef(agentId);
|
|
const sendAgentMessageRef = useRef<
|
|
((agentId: string, text: string, attachments: ComposerAttachment[]) => Promise<void>) | null
|
|
>(null);
|
|
const onSubmitMessageRef = useRef(onSubmitMessage);
|
|
|
|
// Expose addImages function to parent for drag-and-drop support
|
|
const addImages = useCallback(
|
|
(images: ImageAttachment[]) => {
|
|
setSelectedAttachments((prev) => [
|
|
...prev,
|
|
...images.map((metadata) => ({ kind: "image" as const, metadata })),
|
|
]);
|
|
},
|
|
[setSelectedAttachments],
|
|
);
|
|
|
|
useEffect(() => {
|
|
onAddImages?.(addImages);
|
|
}, [addImages, onAddImages]);
|
|
|
|
const focusInput = useCallback(() => {
|
|
if (isNative) return;
|
|
focusWithRetries({
|
|
focus: () => messageInputRef.current?.focus(),
|
|
isFocused: () => {
|
|
const el = messageInputRef.current?.getNativeElement?.() ?? null;
|
|
return el != null && document.activeElement === el;
|
|
},
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
onFocusInput?.(focusInput);
|
|
}, [focusInput, onFocusInput]);
|
|
|
|
const submitMessage = useCallback(
|
|
async (text: string, attachments: ComposerAttachment[]) => {
|
|
onMessageSent?.();
|
|
if (onSubmitMessageRef.current) {
|
|
await onSubmitMessageRef.current({ text, attachments, cwd });
|
|
return;
|
|
}
|
|
if (!sendAgentMessageRef.current) {
|
|
throw new Error("Host is not connected");
|
|
}
|
|
await sendAgentMessageRef.current(agentIdRef.current, text, attachments);
|
|
},
|
|
[cwd, onMessageSent],
|
|
);
|
|
|
|
useEffect(() => {
|
|
agentIdRef.current = agentId;
|
|
}, [agentId]);
|
|
|
|
useEffect(() => {
|
|
sendAgentMessageRef.current = async (
|
|
agentId: string,
|
|
text: string,
|
|
attachments: ComposerAttachment[],
|
|
) => {
|
|
if (!client) {
|
|
throw new Error("Host is not connected");
|
|
}
|
|
|
|
const wirePayload = splitComposerAttachmentsForSubmit(attachments);
|
|
const clientMessageId = generateMessageId();
|
|
const userMessage: StreamItem = {
|
|
kind: "user_message",
|
|
id: clientMessageId,
|
|
text,
|
|
timestamp: new Date(),
|
|
...(wirePayload.images.length > 0 ? { images: wirePayload.images } : {}),
|
|
};
|
|
|
|
// Append to head if streaming (keeps the user message with the current
|
|
// turn so late text_deltas still find the existing assistant_message).
|
|
// Otherwise append to tail.
|
|
const currentHead = useSessionStore
|
|
.getState()
|
|
.sessions[serverId]?.agentStreamHead?.get(agentId);
|
|
if (currentHead && currentHead.length > 0) {
|
|
setAgentStreamHead(serverId, (prev) => {
|
|
const head = prev.get(agentId) || [];
|
|
const updated = new Map(prev);
|
|
updated.set(agentId, [...head, userMessage]);
|
|
return updated;
|
|
});
|
|
} else {
|
|
setAgentStreamTail(serverId, (prev) => {
|
|
const currentStream = prev.get(agentId) || [];
|
|
const updated = new Map(prev);
|
|
updated.set(agentId, [...currentStream, userMessage]);
|
|
return updated;
|
|
});
|
|
}
|
|
const imagesData = await encodeImages(wirePayload.images);
|
|
await client.sendAgentMessage(agentId, text, {
|
|
messageId: clientMessageId,
|
|
images: imagesData ?? [],
|
|
attachments: wirePayload.attachments,
|
|
});
|
|
onAttentionPromptSend?.();
|
|
};
|
|
}, [client, onAttentionPromptSend, serverId, setAgentStreamTail, setAgentStreamHead]);
|
|
|
|
useEffect(() => {
|
|
onSubmitMessageRef.current = onSubmitMessage;
|
|
}, [onSubmitMessage]);
|
|
|
|
const isAgentRunning = agentState.status === "running";
|
|
const hasAgent = agentState.status !== null;
|
|
|
|
const updateQueue = useCallback(
|
|
(updater: (current: QueuedMessage[]) => QueuedMessage[]) => {
|
|
setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
|
|
const next = new Map(prev);
|
|
next.set(agentId, updater(prev.get(agentId) ?? []));
|
|
return next;
|
|
});
|
|
},
|
|
[agentId, serverId, setQueuedMessages],
|
|
);
|
|
|
|
const queueMessage = useCallback(
|
|
(message: string, attachments: ComposerAttachment[]) => {
|
|
const trimmedMessage = message.trim();
|
|
if (!trimmedMessage && attachments.length === 0) return;
|
|
|
|
const newItem = {
|
|
id: generateMessageId(),
|
|
text: trimmedMessage,
|
|
attachments,
|
|
};
|
|
|
|
setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
|
|
const next = new Map(prev);
|
|
next.set(agentId, [...(prev.get(agentId) ?? []), newItem]);
|
|
return next;
|
|
});
|
|
|
|
setUserInput("");
|
|
setSelectedAttachments([]);
|
|
},
|
|
[agentId, serverId, setQueuedMessages, setSelectedAttachments, setUserInput],
|
|
);
|
|
|
|
const sendMessageWithContent = useCallback(
|
|
async (message: string, attachments: ComposerAttachment[], forceSend?: boolean) => {
|
|
await submitAgentInput({
|
|
message,
|
|
attachments,
|
|
hasExternalContent,
|
|
allowEmptySubmit,
|
|
forceSend,
|
|
submitBehavior,
|
|
isAgentRunning,
|
|
// Parent-managed submits are still valid submit paths even when the
|
|
// transport is disconnected, because the parent decides the failure mode.
|
|
canSubmit: Boolean(sendAgentMessageRef.current || onSubmitMessageRef.current),
|
|
queueMessage: ({ message, attachments }) => {
|
|
queueMessage(message, attachments);
|
|
},
|
|
submitMessage: async ({ message, attachments }) => {
|
|
await submitMessage(message, attachments);
|
|
},
|
|
clearDraft,
|
|
setUserInput,
|
|
setAttachments: (nextAttachments) => {
|
|
setSelectedAttachments(nextAttachments);
|
|
},
|
|
setSendError,
|
|
setIsProcessing,
|
|
onSubmitError: (error) => {
|
|
console.error("[AgentInput] Failed to send message:", error);
|
|
},
|
|
});
|
|
},
|
|
[
|
|
allowEmptySubmit,
|
|
clearDraft,
|
|
hasExternalContent,
|
|
isAgentRunning,
|
|
queueMessage,
|
|
setSelectedAttachments,
|
|
setUserInput,
|
|
submitBehavior,
|
|
submitMessage,
|
|
],
|
|
);
|
|
|
|
const handleSubmit = useCallback(
|
|
(payload: MessagePayload) => {
|
|
if (blurOnSubmit) {
|
|
messageInputRef.current?.blur();
|
|
}
|
|
void sendMessageWithContent(payload.text, payload.attachments, payload.forceSend);
|
|
},
|
|
[blurOnSubmit, sendMessageWithContent],
|
|
);
|
|
|
|
const handlePickImage = useCallback(async () => {
|
|
const result = await pickImages();
|
|
if (!result?.length) {
|
|
return;
|
|
}
|
|
|
|
const newImages = await Promise.all(
|
|
result.map(async (pickedImage) => {
|
|
if (pickedImage.source.kind === "blob") {
|
|
return await persistAttachmentFromBlob({
|
|
blob: pickedImage.source.blob,
|
|
mimeType: pickedImage.mimeType || "image/jpeg",
|
|
fileName: pickedImage.fileName ?? null,
|
|
});
|
|
}
|
|
|
|
return await persistAttachmentFromFileUri({
|
|
uri: pickedImage.source.uri,
|
|
mimeType: pickedImage.mimeType || "image/jpeg",
|
|
fileName: pickedImage.fileName ?? null,
|
|
});
|
|
}),
|
|
);
|
|
addImages(newImages);
|
|
}, [addImages, pickImages]);
|
|
|
|
function handleRemoveAttachment(index: number) {
|
|
setSelectedAttachments((prev) => {
|
|
const removed = prev[index];
|
|
if (removed?.kind === "image") {
|
|
void deleteAttachments([removed.metadata]);
|
|
}
|
|
return prev.filter((_, i) => i !== index);
|
|
});
|
|
}
|
|
|
|
function handleOpenAttachment(attachment: ComposerAttachment) {
|
|
if (attachment.kind === "image") {
|
|
setLightboxMetadata(attachment.metadata);
|
|
return;
|
|
}
|
|
void openExternalUrl(attachment.item.url);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isAgentRunning || !isConnected) {
|
|
setIsCancellingAgent(false);
|
|
}
|
|
}, [isAgentRunning, isConnected]);
|
|
|
|
const handleCancelAgent = useCallback(() => {
|
|
if (!isAgentRunning || isCancellingAgent) {
|
|
return;
|
|
}
|
|
if (!isConnected || !client) {
|
|
return;
|
|
}
|
|
setIsCancellingAgent(true);
|
|
void client.cancelAgent(agentIdRef.current);
|
|
messageInputRef.current?.focus();
|
|
}, [client, isAgentRunning, isCancellingAgent, isConnected]);
|
|
|
|
const handleKeyboardAction = useCallback(
|
|
(action: KeyboardActionDefinition): boolean => {
|
|
if (!isPaneFocused) {
|
|
return false;
|
|
}
|
|
|
|
switch (action.id) {
|
|
case "agent.interrupt":
|
|
if (messageInputRef.current?.runKeyboardAction("dictation-cancel")) {
|
|
return true;
|
|
}
|
|
if (!isAgentRunning || isCancellingAgent || !isConnected) {
|
|
return false;
|
|
}
|
|
handleCancelAgent();
|
|
return true;
|
|
case "message-input.send":
|
|
return messageInputRef.current?.runKeyboardAction("send") ?? false;
|
|
case "message-input.dictation-confirm":
|
|
return messageInputRef.current?.runKeyboardAction("dictation-confirm") ?? false;
|
|
case "message-input.focus":
|
|
if (isNative) {
|
|
messageInputRef.current?.focus();
|
|
return true;
|
|
}
|
|
|
|
focusWithRetries({
|
|
focus: () => messageInputRef.current?.focus(),
|
|
isFocused: () => {
|
|
const el = messageInputRef.current?.getNativeElement?.() ?? null;
|
|
const active = typeof document !== "undefined" ? document.activeElement : null;
|
|
return Boolean(el) && active === el;
|
|
},
|
|
});
|
|
return true;
|
|
case "message-input.dictation-toggle":
|
|
messageInputRef.current?.runKeyboardAction("dictation-toggle");
|
|
return true;
|
|
case "message-input.dictation-cancel":
|
|
messageInputRef.current?.runKeyboardAction("dictation-cancel");
|
|
return true;
|
|
case "message-input.voice-toggle":
|
|
messageInputRef.current?.runKeyboardAction("voice-toggle");
|
|
return true;
|
|
case "message-input.voice-mute-toggle":
|
|
messageInputRef.current?.runKeyboardAction("voice-mute-toggle");
|
|
return true;
|
|
default:
|
|
return false;
|
|
}
|
|
},
|
|
[handleCancelAgent, isAgentRunning, isCancellingAgent, isConnected, isPaneFocused],
|
|
);
|
|
|
|
useKeyboardActionHandler({
|
|
handlerId: keyboardHandlerIdRef.current,
|
|
actions: [
|
|
"agent.interrupt",
|
|
"message-input.focus",
|
|
"message-input.send",
|
|
"message-input.dictation-toggle",
|
|
"message-input.dictation-cancel",
|
|
"message-input.dictation-confirm",
|
|
"message-input.voice-toggle",
|
|
"message-input.voice-mute-toggle",
|
|
],
|
|
enabled: isPaneFocused,
|
|
priority: isMessageInputFocused ? 200 : 100,
|
|
isActive: () => isPaneFocused,
|
|
handle: handleKeyboardAction,
|
|
});
|
|
|
|
const { style: keyboardAnimatedStyle } = useKeyboardShiftStyle({
|
|
mode: "translate",
|
|
});
|
|
|
|
const isVoiceModeForAgent = voice?.isVoiceModeForAgent(serverId, agentId) ?? false;
|
|
|
|
const handleToggleRealtimeVoice = useCallback(() => {
|
|
if (!voice || !isConnected || !hasAgent) {
|
|
return;
|
|
}
|
|
if (voice.isVoiceSwitching) {
|
|
return;
|
|
}
|
|
if (voice.isVoiceModeForAgent(serverId, agentId)) {
|
|
return;
|
|
}
|
|
void voice.startVoice(serverId, agentId).catch((error) => {
|
|
console.error("[Composer] Failed to start voice mode", error);
|
|
const message =
|
|
error instanceof Error ? error.message : typeof error === "string" ? error : null;
|
|
if (message && message.trim().length > 0) {
|
|
toastErrorRef.current(message);
|
|
}
|
|
});
|
|
}, [agentId, hasAgent, isConnected, serverId, voice]);
|
|
|
|
function handleEditQueuedMessage(id: string) {
|
|
const item = queuedMessages.find((q) => q.id === id);
|
|
if (!item) return;
|
|
|
|
updateQueue((current) => current.filter((q) => q.id !== id));
|
|
setUserInput(item.text);
|
|
setSelectedAttachments(item.attachments);
|
|
}
|
|
|
|
async function handleSendQueuedNow(id: string) {
|
|
const item = queuedMessages.find((q) => q.id === id);
|
|
if (!item) return;
|
|
if (!sendAgentMessageRef.current && !onSubmitMessageRef.current) return;
|
|
|
|
updateQueue((current) => current.filter((q) => q.id !== id));
|
|
|
|
// Reuse the regular send path; server-side send atomically interrupts any active run.
|
|
try {
|
|
await submitMessage(item.text, item.attachments);
|
|
} catch (error) {
|
|
updateQueue((current) => [item, ...current]);
|
|
setSendError(error instanceof Error ? error.message : "Failed to send message");
|
|
}
|
|
}
|
|
|
|
const handleQueue = useCallback(
|
|
(payload: MessagePayload) => {
|
|
queueMessage(payload.text, payload.attachments);
|
|
},
|
|
[queueMessage],
|
|
);
|
|
|
|
const hasSendableContent = userInput.trim().length > 0 || selectedAttachments.length > 0;
|
|
|
|
// Handle keyboard navigation for command autocomplete.
|
|
const handleCommandKeyPress = useCallback(
|
|
(event: { key: string; preventDefault: () => void }) => {
|
|
return autocompleteOnKeyPressRef.current(event);
|
|
},
|
|
[],
|
|
);
|
|
|
|
const cancelButton = useMemo(
|
|
() =>
|
|
isAgentRunning && !hasSendableContent && !isProcessing ? (
|
|
<Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
|
|
<TooltipTrigger
|
|
onPress={handleCancelAgent}
|
|
disabled={!isConnected || isCancellingAgent}
|
|
accessibilityLabel={isCancellingAgent ? "Canceling agent" : "Stop agent"}
|
|
accessibilityRole="button"
|
|
style={[
|
|
styles.cancelButton as any,
|
|
(!isConnected || isCancellingAgent ? styles.buttonDisabled : undefined) as any,
|
|
]}
|
|
>
|
|
{isCancellingAgent ? (
|
|
<ActivityIndicator size="small" color="white" />
|
|
) : (
|
|
<Square size={buttonIconSize} color="white" fill="white" />
|
|
)}
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" align="center" offset={8}>
|
|
<View style={styles.tooltipRow}>
|
|
<Text style={styles.tooltipText}>Interrupt</Text>
|
|
{agentInterruptKeys ? (
|
|
<Shortcut chord={agentInterruptKeys} style={styles.tooltipShortcut} />
|
|
) : null}
|
|
</View>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null,
|
|
[
|
|
agentInterruptKeys,
|
|
buttonIconSize,
|
|
handleCancelAgent,
|
|
hasSendableContent,
|
|
isAgentRunning,
|
|
isCancellingAgent,
|
|
isConnected,
|
|
isProcessing,
|
|
],
|
|
);
|
|
|
|
const showVoiceModeButton = !isVoiceModeForAgent && hasAgent;
|
|
const rightContent = useMemo(
|
|
() =>
|
|
showVoiceModeButton || cancelButton ? (
|
|
<View style={styles.rightControls}>
|
|
{showVoiceModeButton ? (
|
|
<Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
|
|
<TooltipTrigger
|
|
onPress={handleToggleRealtimeVoice}
|
|
disabled={!isConnected || voice?.isVoiceSwitching}
|
|
accessibilityLabel="Enable Voice mode"
|
|
accessibilityRole="button"
|
|
style={({ hovered }) => [
|
|
styles.realtimeVoiceButton as any,
|
|
(hovered ? styles.iconButtonHovered : undefined) as any,
|
|
(!isConnected || voice?.isVoiceSwitching
|
|
? styles.buttonDisabled
|
|
: undefined) as any,
|
|
]}
|
|
>
|
|
{({ hovered }) =>
|
|
voice?.isVoiceSwitching ? (
|
|
<ActivityIndicator size="small" color="white" />
|
|
) : (
|
|
<AudioLines
|
|
size={buttonIconSize}
|
|
color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
|
|
/>
|
|
)
|
|
}
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" align="center" offset={8}>
|
|
<View style={styles.tooltipRow}>
|
|
<Text style={styles.tooltipText}>Voice mode</Text>
|
|
{voiceToggleKeys ? (
|
|
<Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
|
|
) : null}
|
|
</View>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
{cancelButton}
|
|
</View>
|
|
) : null,
|
|
[
|
|
buttonIconSize,
|
|
cancelButton,
|
|
handleToggleRealtimeVoice,
|
|
isConnected,
|
|
showVoiceModeButton,
|
|
theme.colors.foreground,
|
|
theme.colors.foregroundMuted,
|
|
voice,
|
|
voiceToggleKeys,
|
|
],
|
|
);
|
|
|
|
const hasContextWindowMeter =
|
|
typeof agentState.contextWindowMaxTokens === "number" &&
|
|
typeof agentState.contextWindowUsedTokens === "number";
|
|
const contextWindowMaxTokens = hasContextWindowMeter ? agentState.contextWindowMaxTokens : null;
|
|
const contextWindowUsedTokens = hasContextWindowMeter ? agentState.contextWindowUsedTokens : null;
|
|
|
|
const beforeVoiceContent = useMemo(
|
|
() => (
|
|
<View style={styles.contextWindowMeterSlot}>
|
|
{contextWindowMaxTokens !== null && contextWindowUsedTokens !== null ? (
|
|
<ContextWindowMeter
|
|
maxTokens={contextWindowMaxTokens}
|
|
usedTokens={contextWindowUsedTokens}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
),
|
|
[contextWindowMaxTokens, contextWindowUsedTokens],
|
|
);
|
|
|
|
const githubSearchQueryTrimmed = githubSearchQuery.trim();
|
|
const githubSearchResultsQuery = useQuery({
|
|
queryKey: ["composer-github-search", serverId, cwd, githubSearchQueryTrimmed],
|
|
queryFn: async () => {
|
|
if (!client) {
|
|
throw new Error("Host is not connected");
|
|
}
|
|
return client.searchGitHub({
|
|
cwd,
|
|
query: githubSearchQueryTrimmed,
|
|
limit: 20,
|
|
});
|
|
},
|
|
enabled: isConnected && !!client && cwd.trim().length > 0,
|
|
staleTime: 30_000,
|
|
});
|
|
|
|
const githubSearchItems = githubSearchResultsQuery.data?.items ?? [];
|
|
const githubSearchOptions: ComboboxOption[] = useMemo(
|
|
() =>
|
|
githubSearchItems.map((item) => ({
|
|
id: `${item.kind}:${item.number}`,
|
|
label: `#${item.number} ${item.title}`,
|
|
description: githubSearchQueryTrimmed,
|
|
})),
|
|
[githubSearchItems, githubSearchQueryTrimmed],
|
|
);
|
|
|
|
const attachmentMenuItems = useMemo<AttachmentMenuItem[]>(
|
|
() => [
|
|
{
|
|
id: "image",
|
|
label: "Add image",
|
|
icon: <Paperclip size={theme.iconSize.md} color={theme.colors.foregroundMuted} />,
|
|
onSelect: () => {
|
|
void handlePickImage();
|
|
},
|
|
},
|
|
{
|
|
id: "github",
|
|
label: "Add issue or PR",
|
|
icon: <Github size={theme.iconSize.md} color={theme.colors.foregroundMuted} />,
|
|
onSelect: () => {
|
|
setIsGithubPickerOpen(true);
|
|
},
|
|
},
|
|
],
|
|
[handlePickImage, theme.colors.foregroundMuted, theme.iconSize.md],
|
|
);
|
|
|
|
const handleToggleGithubItem = useCallback(
|
|
(item: GitHubSearchItem) => {
|
|
setSelectedAttachments((current) => {
|
|
const matches = (attachment: ComposerAttachment) =>
|
|
attachment.kind !== "image" &&
|
|
attachment.item.kind === item.kind &&
|
|
attachment.item.number === item.number;
|
|
|
|
if (current.some(matches)) {
|
|
return current.filter((attachment) => !matches(attachment));
|
|
}
|
|
|
|
const nextAttachment: ComposerAttachment =
|
|
item.kind === "pr" ? { kind: "github_pr", item } : { kind: "github_issue", item };
|
|
return [...current, nextAttachment];
|
|
});
|
|
setIsGithubPickerOpen(false);
|
|
setGithubSearchQuery("");
|
|
},
|
|
[setSelectedAttachments, setGithubSearchQuery, setIsGithubPickerOpen],
|
|
);
|
|
|
|
const leftContent = useMemo(
|
|
() =>
|
|
resolveStatusControlMode(statusControls) === "draft" && statusControls ? (
|
|
<DraftAgentStatusBar {...statusControls} />
|
|
) : (
|
|
<AgentStatusBar agentId={agentId} serverId={serverId} onDropdownClose={focusInput} />
|
|
),
|
|
[agentId, focusInput, serverId, statusControls],
|
|
);
|
|
|
|
const handleAttachButtonRef = useCallback((node: View | null) => {
|
|
attachButtonRef.current = node;
|
|
}, []);
|
|
|
|
const handleSelectionChange = useCallback((selection: { start: number; end: number }) => {
|
|
setCursorIndex(selection.start);
|
|
}, []);
|
|
|
|
const handleFocusChange = useCallback(
|
|
(focused: boolean) => {
|
|
setIsMessageInputFocused(focused);
|
|
if (focused) {
|
|
onAttentionInputFocus?.();
|
|
}
|
|
},
|
|
[onAttentionInputFocus],
|
|
);
|
|
|
|
return (
|
|
<Animated.View style={[styles.container, keyboardAnimatedStyle]}>
|
|
<AttachmentLightbox metadata={lightboxMetadata} onClose={() => setLightboxMetadata(null)} />
|
|
{/* Input area */}
|
|
<View style={[styles.inputAreaContainer, isComposerLocked && styles.inputAreaLocked]}>
|
|
<View style={styles.inputAreaContent}>
|
|
{/* Queue list */}
|
|
{queuedMessages.length > 0 && (
|
|
<View style={styles.queueContainer}>
|
|
{queuedMessages.map((item) => (
|
|
<View key={item.id} style={styles.queueItem}>
|
|
<Text style={styles.queueText} numberOfLines={2} ellipsizeMode="tail">
|
|
{item.text}
|
|
</Text>
|
|
<View style={styles.queueActions}>
|
|
<Pressable
|
|
onPress={() => handleEditQueuedMessage(item.id)}
|
|
style={styles.queueActionButton}
|
|
>
|
|
<Pencil size={theme.iconSize.sm} color={theme.colors.foreground} />
|
|
</Pressable>
|
|
<Pressable
|
|
onPress={() => handleSendQueuedNow(item.id)}
|
|
style={[styles.queueActionButton, styles.queueSendButton]}
|
|
>
|
|
<ArrowUp size={theme.iconSize.sm} color="white" />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{sendError && <Text style={styles.sendErrorText}>{sendError}</Text>}
|
|
|
|
<View style={styles.messageInputContainer}>
|
|
{/* Command + file mention autocomplete rendered as a true popover */}
|
|
{autocomplete.isVisible && (
|
|
<View style={styles.autocompletePopover} pointerEvents="box-none">
|
|
<Autocomplete
|
|
options={autocomplete.options}
|
|
selectedIndex={autocomplete.selectedIndex}
|
|
isLoading={autocomplete.isLoading}
|
|
errorMessage={autocomplete.errorMessage}
|
|
loadingText={autocomplete.loadingText}
|
|
emptyText={autocomplete.emptyText}
|
|
onSelect={autocomplete.onSelectOption}
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
{selectedAttachments.length > 0 ? (
|
|
<View style={styles.attachmentPreviewContainer} testID="composer-attachment-pills">
|
|
{selectedAttachments.map((attachment, index) => {
|
|
if (attachment.kind === "image") {
|
|
return (
|
|
<AttachmentPill
|
|
key={`${attachment.metadata.id}-${index}`}
|
|
testID="composer-image-attachment-pill"
|
|
onOpen={() => handleOpenAttachment(attachment)}
|
|
onRemove={() => handleRemoveAttachment(index)}
|
|
openAccessibilityLabel="Open image attachment"
|
|
removeAccessibilityLabel="Remove image attachment"
|
|
disabled={isComposerLocked}
|
|
>
|
|
<ImageAttachmentThumbnail image={attachment.metadata} />
|
|
</AttachmentPill>
|
|
);
|
|
}
|
|
|
|
const item = attachment.item;
|
|
const kindLabel = item.kind === "pr" ? "PR" : "issue";
|
|
return (
|
|
<AttachmentPill
|
|
key={`${item.kind}:${item.number}`}
|
|
testID="composer-github-attachment-pill"
|
|
onOpen={() => handleOpenAttachment(attachment)}
|
|
onRemove={() => handleRemoveAttachment(index)}
|
|
openAccessibilityLabel={`Open ${kindLabel} #${item.number}`}
|
|
removeAccessibilityLabel={`Remove ${kindLabel} #${item.number}`}
|
|
disabled={isComposerLocked}
|
|
>
|
|
<View style={styles.githubPillBody}>
|
|
<View style={styles.githubPillIcon}>
|
|
{item.kind === "pr" ? (
|
|
<GitPullRequest
|
|
size={theme.iconSize.sm}
|
|
color={theme.colors.foregroundMuted}
|
|
/>
|
|
) : (
|
|
<CircleDot
|
|
size={theme.iconSize.sm}
|
|
color={theme.colors.foregroundMuted}
|
|
/>
|
|
)}
|
|
</View>
|
|
<Text style={styles.githubPillText} numberOfLines={1}>
|
|
#{item.number} {item.title}
|
|
</Text>
|
|
</View>
|
|
</AttachmentPill>
|
|
);
|
|
})}
|
|
</View>
|
|
) : null}
|
|
|
|
{/* MessageInput handles everything: text, dictation, attachments, all buttons */}
|
|
<StableMessageInput
|
|
ref={messageInputRef}
|
|
value={userInput}
|
|
onChangeText={setUserInput}
|
|
onSubmit={handleSubmit}
|
|
hasExternalContent={hasExternalContent}
|
|
allowEmptySubmit={allowEmptySubmit}
|
|
submitButtonAccessibilityLabel={submitButtonAccessibilityLabel}
|
|
submitIcon={submitIcon}
|
|
isSubmitDisabled={isProcessing || isSubmitLoading}
|
|
isSubmitLoading={isProcessing || isSubmitLoading}
|
|
attachments={selectedAttachments}
|
|
cwd={cwd}
|
|
attachmentMenuItems={attachmentMenuItems}
|
|
onAttachButtonRef={handleAttachButtonRef}
|
|
onAddImages={addImages}
|
|
client={client}
|
|
isReadyForDictation={isDictationReady}
|
|
placeholder={messagePlaceholder}
|
|
autoFocus={autoFocus && isDesktopWebBreakpoint}
|
|
autoFocusKey={`${serverId}:${agentId}`}
|
|
disabled={isSubmitLoading}
|
|
isPaneFocused={isPaneFocused}
|
|
leftContent={leftContent}
|
|
beforeVoiceContent={beforeVoiceContent}
|
|
rightContent={rightContent}
|
|
voiceServerId={serverId}
|
|
voiceAgentId={agentId}
|
|
isAgentRunning={isAgentRunning}
|
|
defaultSendBehavior={appSettings.sendBehavior}
|
|
onQueue={handleQueue}
|
|
onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
|
|
onKeyPress={handleCommandKeyPress}
|
|
onSelectionChange={handleSelectionChange}
|
|
onFocusChange={handleFocusChange}
|
|
onHeightChange={onComposerHeightChange}
|
|
inputWrapperStyle={inputWrapperStyle}
|
|
/>
|
|
<Combobox
|
|
options={githubSearchOptions}
|
|
value=""
|
|
onSelect={() => {}}
|
|
keepOpenOnSelect
|
|
searchable
|
|
searchPlaceholder="Search issues and PRs..."
|
|
title="Attach issue or PR"
|
|
open={isGithubPickerOpen}
|
|
onOpenChange={(open) => {
|
|
setIsGithubPickerOpen(open);
|
|
if (!open) {
|
|
setGithubSearchQuery("");
|
|
}
|
|
}}
|
|
onSearchQueryChange={setGithubSearchQuery}
|
|
desktopPlacement="top-start"
|
|
anchorRef={attachButtonRef}
|
|
emptyText={githubSearchResultsQuery.isFetching ? "Searching..." : "No results found."}
|
|
renderOption={({ option, active }) => {
|
|
const item = githubSearchItems.find((candidate) => {
|
|
return `${candidate.kind}:${candidate.number}` === option.id;
|
|
});
|
|
if (!item) {
|
|
return <View key={option.id} />;
|
|
}
|
|
const selected = selectedAttachments.some(
|
|
(attachment) =>
|
|
attachment.kind !== "image" &&
|
|
attachment.item.kind === item.kind &&
|
|
attachment.item.number === item.number,
|
|
);
|
|
return (
|
|
<ComboboxItem
|
|
key={option.id}
|
|
testID={`composer-github-option-${option.id}`}
|
|
label={option.label}
|
|
selected={selected}
|
|
active={active}
|
|
onPress={() => handleToggleGithubItem(item)}
|
|
leadingSlot={
|
|
item.kind === "pr" ? (
|
|
<GitPullRequest
|
|
size={theme.iconSize.sm}
|
|
color={theme.colors.foregroundMuted}
|
|
/>
|
|
) : (
|
|
<CircleDot size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Animated.View>
|
|
);
|
|
}
|
|
|
|
const BUTTON_SIZE = 40;
|
|
|
|
const styles = StyleSheet.create(((theme: Theme) => ({
|
|
container: {
|
|
flexDirection: "column",
|
|
position: "relative",
|
|
},
|
|
borderSeparator: {
|
|
height: theme.borderWidth[1],
|
|
backgroundColor: theme.colors.border,
|
|
},
|
|
inputAreaContainer: {
|
|
position: "relative",
|
|
minHeight: FOOTER_HEIGHT,
|
|
marginHorizontal: "auto",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
overflow: "visible",
|
|
padding: theme.spacing[4],
|
|
},
|
|
inputAreaLocked: {
|
|
opacity: 0.6,
|
|
},
|
|
inputAreaContent: {
|
|
width: "100%",
|
|
maxWidth: MAX_CONTENT_WIDTH,
|
|
gap: theme.spacing[3],
|
|
},
|
|
messageInputContainer: {
|
|
position: "relative",
|
|
width: "100%",
|
|
gap: theme.spacing[3],
|
|
},
|
|
autocompletePopover: {
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: "100%",
|
|
marginBottom: theme.spacing[3],
|
|
zIndex: 30,
|
|
},
|
|
cancelButton: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: theme.borderRadius.full,
|
|
backgroundColor: theme.colors.palette.red[600],
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginLeft: theme.spacing[1],
|
|
},
|
|
rightControls: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[1],
|
|
},
|
|
contextWindowMeterSlot: {
|
|
width: 28,
|
|
height: 28,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
realtimeVoiceButton: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: theme.borderRadius.full,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
realtimeVoiceButtonActive: {
|
|
backgroundColor: theme.colors.palette.green[600],
|
|
borderColor: theme.colors.palette.green[800],
|
|
},
|
|
iconButtonHovered: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
attachmentPreviewContainer: {
|
|
flexDirection: "row",
|
|
gap: theme.spacing[2],
|
|
flexWrap: "wrap",
|
|
},
|
|
imageThumbnail: {
|
|
width: 48,
|
|
height: 48,
|
|
},
|
|
imageThumbnailPlaceholder: {
|
|
width: 48,
|
|
height: 48,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
githubPillBody: {
|
|
minHeight: 48,
|
|
maxWidth: 260,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[2],
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
githubPillIcon: {
|
|
width: 18,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
githubPillText: {
|
|
minWidth: 0,
|
|
flexShrink: 1,
|
|
color: theme.colors.foreground,
|
|
fontSize: theme.fontSize.sm,
|
|
},
|
|
tooltipRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
},
|
|
tooltipText: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.popoverForeground,
|
|
},
|
|
tooltipShortcut: {
|
|
backgroundColor: theme.colors.surface3,
|
|
borderColor: theme.colors.borderAccent,
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.5,
|
|
},
|
|
queueContainer: {
|
|
flexDirection: "column",
|
|
gap: theme.spacing[2],
|
|
},
|
|
queueItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[2],
|
|
backgroundColor: theme.colors.surface1,
|
|
borderRadius: theme.borderRadius.lg,
|
|
borderWidth: theme.borderWidth[1],
|
|
borderColor: theme.colors.border,
|
|
gap: theme.spacing[2],
|
|
},
|
|
queueText: {
|
|
flex: 1,
|
|
color: theme.colors.foreground,
|
|
fontSize: theme.fontSize.base,
|
|
},
|
|
queueActions: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
},
|
|
queueActionButton: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: theme.borderRadius.full,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
queueSendButton: {
|
|
backgroundColor: theme.colors.accent,
|
|
},
|
|
sendErrorText: {
|
|
color: theme.colors.palette.red[500],
|
|
fontSize: theme.fontSize.sm,
|
|
},
|
|
})) as any) as Record<string, any>;
|