04f2109fc7
The main agent had no way to give a specialist a piece of work and keep
track of it. message_bot is a fire-and-forget peer message whose work stays
hidden from the user, and handoff_to_bot ends the main bot's turn and only
works between members of one group. Delegation now runs the specialist's
work where the user follows the main agent and brings the result back so
the main agent can close the task.
- delegate_task({bot, title, brief, deadline?}) is offered to the main bot
only and refused unless the caller leads the main conversation. It
resolves the specialist by id or name across the user's spaces, creates a
DelegatedTask and posts a task card in the main conversation.
- A specialist from the main conversation's space joins it and works there
in a run with the new trigger "delegation", which the peer filters do not
hide, so its progress, asks and approvals appear in the main conversation
with the specialist as sender. A specialist from another space works in
its own chat; its written result is posted into the main conversation as
its message.
- The executor mirrors the run on its task (running, waiting, done, failed,
cancelled) after the run starts and when each attempt ends, and updates
the card in place through thread.message.updated. Done and failed tasks
wake the main bot in the main conversation with the result. The job
reconciler settles tasks whose run ended without the executor (stop,
clear, archive, deletion, crash).
- tasks.list({threadId?, status?}) returns the caller's tasks for the
current space.
- The task card shows who, what and status with Lingui labels; the brief
opens on demand. The message_bot card no longer shows the recipient's
unrelated overall status or hard-coded German copy.
- The scripted runtime understands "delegate to the bot named X: ..." and
the task wake prompt; activity rows name delegation runs by task title.
Tests: unit tests for the prompts, status mapping, card, reducer, tool
selection and scripted runtime; a Postgres suite for same-space, group,
other-space, ask and answer, failure, stop and replay; tasks.list in the
authorization suite; and an end-to-end spec for the whole flow.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u
8021 lines
316 KiB
TypeScript
8021 lines
316 KiB
TypeScript
import {
|
||
closestCenter,
|
||
DndContext,
|
||
DragOverlay,
|
||
MouseSensor,
|
||
TouchSensor,
|
||
useSensor,
|
||
useSensors,
|
||
} from "@dnd-kit/core";
|
||
import {
|
||
SortableContext,
|
||
sortableKeyboardCoordinates,
|
||
verticalListSortingStrategy,
|
||
} from "@dnd-kit/sortable";
|
||
import { CSS as DndCSS } from "@dnd-kit/utilities";
|
||
import { i18n } from "@lingui/core";
|
||
import { t } from "@lingui/core/macro";
|
||
import { Trans, useLingui } from "@lingui/react/macro";
|
||
import { ChatMarkdown } from "@rakazo/chat-ui/web";
|
||
import type {
|
||
AgentSkillCatalogEntry,
|
||
Bot,
|
||
BotSection,
|
||
ComputerMode,
|
||
ComputerReleaseReason,
|
||
ComputerStatus,
|
||
Connection,
|
||
ConnectionCatalogItem,
|
||
Group,
|
||
Me,
|
||
ProductEvent,
|
||
Routine,
|
||
SearchHit,
|
||
Space,
|
||
SpaceMemoryConfig,
|
||
TaughtSkill,
|
||
ThreadMessage,
|
||
ThreadSnapshot,
|
||
VoiceStatus,
|
||
} from "@rakazo/contracts";
|
||
import {
|
||
ATTACHMENT_ALLOWED_MIME_TYPES,
|
||
ATTACHMENT_MAX_BYTES,
|
||
ATTACHMENT_MAX_COUNT,
|
||
canReactToThreadMessage,
|
||
MESSAGE_REACTIONS,
|
||
type MessageReaction,
|
||
normalizeCreateBotProfile,
|
||
} from "@rakazo/contracts";
|
||
import {
|
||
attachmentsForThread,
|
||
buildComposerMentionOptions,
|
||
type ComposerMention,
|
||
clampMentionHighlightIndex,
|
||
cronFromPreset,
|
||
groupBotsForSidebar,
|
||
inferAttachmentMimeType,
|
||
isActive,
|
||
isPeerReceiptBlocks,
|
||
isRunTerminalEvent,
|
||
isToolActivityBlock,
|
||
latestAnswerableAskMessageId,
|
||
matchVoiceByName,
|
||
mentionChipKey,
|
||
parseVoiceChatCommand,
|
||
projectMessageReactions,
|
||
reorderBotTo,
|
||
resolveComposerSendPlan,
|
||
resolveMentionPickerKey,
|
||
runThreadSubscription,
|
||
SLASH_ACTIONS,
|
||
type SlashActionId,
|
||
searchHitThreadTarget,
|
||
serializeComposerPrompt,
|
||
speechFromBlocks,
|
||
truncateSlashDescription,
|
||
userVisibleMessages,
|
||
} from "@rakazo/core";
|
||
import {
|
||
AvatarStyleProvider,
|
||
BotAvatar,
|
||
Button,
|
||
cn,
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
EvooMascot,
|
||
GroupAvatar,
|
||
type GroupAvatarMember,
|
||
InputGroup,
|
||
InputGroupAddon,
|
||
InputGroupInput,
|
||
Popover,
|
||
PopoverContent,
|
||
PopoverTrigger,
|
||
resolvePersonaColorDef,
|
||
Wordmark,
|
||
} from "@rakazo/ui-web";
|
||
import {
|
||
ArrowDown,
|
||
ArrowLeft,
|
||
ArrowUp,
|
||
Bell,
|
||
Box,
|
||
Calendar,
|
||
ChevronDown,
|
||
Clock,
|
||
Copy,
|
||
Folder,
|
||
Gauge,
|
||
GripVertical,
|
||
LayoutGrid,
|
||
Lock,
|
||
LogOut,
|
||
Maximize2,
|
||
Menu,
|
||
Mic,
|
||
MoreHorizontal,
|
||
PanelLeftClose,
|
||
PanelLeftOpen,
|
||
PanelRight,
|
||
Paperclip,
|
||
Pencil,
|
||
Plus,
|
||
Puzzle,
|
||
RefreshCw,
|
||
Reply,
|
||
Search,
|
||
Settings,
|
||
Smile,
|
||
Sparkles,
|
||
Square,
|
||
TextQuote,
|
||
Trash2,
|
||
Volume2,
|
||
X,
|
||
} from "lucide-react";
|
||
import {
|
||
type ClipboardEvent,
|
||
type DragEvent,
|
||
type MutableRefObject,
|
||
memo,
|
||
type RefObject,
|
||
Suspense,
|
||
useCallback,
|
||
useEffect,
|
||
useId,
|
||
useLayoutEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from "react";
|
||
import { createPortal } from "react-dom";
|
||
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||
import { ArtifactFileCard } from "../components/ArtifactFileCard";
|
||
import { AskCard } from "../components/AskCard";
|
||
import { ActiveBotGlyph, CollaborationMarker } from "../components/ai/CollaborationMarker";
|
||
import { DelegatedTaskCard, SentMessageCard } from "../components/ai/DelegatedTaskCard";
|
||
import { ProjectCreatedCard } from "../components/ai/ProjectCreatedCard";
|
||
import { CloudAgentCard } from "../components/CloudAgentCard";
|
||
import { ComputerMaintenanceActions } from "../components/ComputerMaintenanceActions";
|
||
import {
|
||
ComputersUnavailableHint,
|
||
computersAreUnavailable,
|
||
} from "../components/ComputersUnavailableHint";
|
||
import { ComputerUpdateProgress } from "../components/ComputerUpdateProgress";
|
||
import { DataTrustPanel } from "../components/DataTrustPanel";
|
||
import { MessageHoverMetadata } from "../components/MessageHoverMetadata";
|
||
import { OoGroupStage, OoStage } from "../components/stage/OoStage";
|
||
import { TradingModeIndicator } from "../components/TradingModeIndicator";
|
||
import { SkillDraftCard } from "../components/teach/SkillDraftCard";
|
||
import { TeachCaptureOverlay } from "../components/teach/TeachCaptureOverlay";
|
||
import { TeachComputerOverlayControl } from "../components/teach/TeachComputerOverlay";
|
||
import { TeachRecordingChrome, TeachStopButton } from "../components/teach/TeachRecordingChrome";
|
||
import { useSidebarResize } from "../hooks/useSidebarResize";
|
||
import { readActivityMode, writeActivityMode } from "../lib/activity-mode";
|
||
import { needsYouChipLabel, rosterActivitySubtitle, rosterStatusDot } from "../lib/agent-activity";
|
||
import type { ArtifactTarget } from "../lib/artifact-open";
|
||
import { authClient } from "../lib/auth";
|
||
import { takeInitialBootstrap } from "../lib/bootstrap";
|
||
import {
|
||
BOTS_SIDEBAR_EDGE_DRAG_PX,
|
||
readBotsSidebarCollapsed,
|
||
writeBotsSidebarCollapsed,
|
||
} from "../lib/bots-sidebar-pref";
|
||
import {
|
||
deliverBrowserNotification as deliverNativeBrowserNotification,
|
||
requestBrowserNotificationPermission,
|
||
shouldNotifyBrowser,
|
||
} from "../lib/browser-notifications";
|
||
import type { BrowserPreviewCursor } from "../lib/browser-preview-context";
|
||
import { browserPreviewActivity } from "../lib/browser-preview-context";
|
||
import { loadComputerScreen } from "../lib/computer-screen";
|
||
import { desktopBridge } from "../lib/desktop";
|
||
import { scheduleFocusPrompt } from "../lib/focus-prompt";
|
||
import {
|
||
isWorkingRunStatus,
|
||
resolveActiveGroupSpeaker,
|
||
resolveWorkingGroupBots,
|
||
} from "../lib/group-stage";
|
||
import { buildHeuteBrief } from "../lib/heute-brief";
|
||
import { lazyWithRecovery } from "../lib/lazy-recovery";
|
||
import { localTimezone } from "../lib/local-timezone";
|
||
import { copyableMessageText } from "../lib/message-text";
|
||
import { messageProviderLabel } from "../lib/messaging";
|
||
import { wireOoAudioVoiceDucking } from "../lib/oo-audio-voice-wire";
|
||
import { ooSound } from "../lib/oo-sound";
|
||
import { ooVocals } from "../lib/oo-vocals";
|
||
import { ooVoiceMark } from "../lib/oo-voice-mark";
|
||
import {
|
||
isFileDrag,
|
||
isFilePaste,
|
||
revokePendingAttachmentPreviews,
|
||
} from "../lib/pending-attachments";
|
||
import { markAfterPaint, markOnce } from "../lib/performance";
|
||
import { isEmptyProjectSpace } from "../lib/project-empty-state";
|
||
import { readProjectSidebarOrder, writeProjectSidebarOrder } from "../lib/project-sidebar-order";
|
||
import { quoteDraftForSelection } from "../lib/quote-selection";
|
||
import { clearSpaceSelection, rpc, selectedSpaceId, selectSpace } from "../lib/rpc";
|
||
import { readSeenRunErrorIds, rememberSeenRunErrorId } from "../lib/run-error-storage";
|
||
import { sharedInflight } from "../lib/shared-inflight";
|
||
import {
|
||
activeThreadRuns,
|
||
applyThreadSendReceipt,
|
||
clearActiveThreadRuns,
|
||
computerPanelAutoBoot,
|
||
computerPanelAutoUsesBoot,
|
||
computerPanelNeedsMaintenance,
|
||
computerTakeoverBlocked,
|
||
isComputerStatusEvent,
|
||
isThreadSnapshotEvent,
|
||
prependThreadMessagePage,
|
||
reconcileRefreshedThread,
|
||
reduceComputerStatus,
|
||
reduceThreadSnapshot,
|
||
threadRunError,
|
||
userHoldsComputerControl,
|
||
} from "../lib/thread-events";
|
||
import { useTradingBotStatus } from "../lib/trading-bot-status";
|
||
import {
|
||
transcriptCanSnapAfterFrame,
|
||
transcriptIsNearEnd,
|
||
transcriptMovedDown,
|
||
} from "../lib/transcript-scroll";
|
||
import { speaker } from "../lib/tts";
|
||
import { ActivityList } from "./ActivityList";
|
||
import type { ContextMenuPosition } from "./BotContextMenu";
|
||
import { CreateGroupForm, GroupSettings, memberName } from "./GroupPanel";
|
||
import { HeuteBrief } from "./HeuteBrief";
|
||
import { HostComputerPrompt } from "./HostComputerPrompt";
|
||
import { ProjectSessionTimeline } from "./ProjectSessionTimeline";
|
||
import {
|
||
draftFromRoutine,
|
||
emptyRoutineDraft,
|
||
type RoutineDraftState,
|
||
RoutineEditor,
|
||
RoutineListHeader,
|
||
RoutineListRow,
|
||
routineNeedsOneShotArm,
|
||
} from "./RoutineEditor";
|
||
import type { SettingsSection } from "./SettingsOverlay";
|
||
import { SpaceSearchResults } from "./SpaceSearch";
|
||
import { BotSettings, CreateBotForm } from "./shell/bot-panel";
|
||
import { BotCreatePicker, ConversationBotPicker } from "./shell/bot-picker";
|
||
import { CommandPalette, isCommandPaletteHotkey } from "./shell/command-palette";
|
||
import {
|
||
ClearConversationDialog,
|
||
DeleteBotDialog,
|
||
DeleteItemDialog,
|
||
NewBotSectionDialog,
|
||
NewSpaceDialog,
|
||
PickerInfoDialog,
|
||
RenameBotSectionDialog,
|
||
} from "./shell/dialogs";
|
||
import {
|
||
AppConnectCard,
|
||
ArtifactImage,
|
||
ChartBlockView,
|
||
ChoiceCard,
|
||
McpApprovalCard,
|
||
} from "./shell/message-cards";
|
||
import { WindowChrome } from "./WindowChrome";
|
||
|
||
const BotContextMenu = lazyWithRecovery("BotContextMenu", () =>
|
||
import("./BotContextMenu").then((module) => ({ default: module.BotContextMenu })),
|
||
);
|
||
const MessagingSettingsOverlay = lazyWithRecovery("MessagingSettingsOverlay", () =>
|
||
import("./MessagingSettingsOverlay").then((module) => ({
|
||
default: module.MessagingSettingsOverlay,
|
||
})),
|
||
);
|
||
const SettingsOverlay = lazyWithRecovery("SettingsOverlay", () =>
|
||
import("./SettingsOverlay").then((module) => ({ default: module.SettingsOverlay })),
|
||
);
|
||
const PeerMessagesOverlay = lazyWithRecovery("PeerMessagesOverlay", () =>
|
||
import("./PeerMessagesOverlay").then((module) => ({ default: module.PeerMessagesOverlay })),
|
||
);
|
||
const PluginsOverlay = lazyWithRecovery("PluginsOverlay", () =>
|
||
import("./PluginsOverlay").then((module) => ({ default: module.PluginsOverlay })),
|
||
);
|
||
const McpServersOverlay = lazyWithRecovery("McpServersOverlay", () =>
|
||
import("./McpServersOverlay").then((module) => ({ default: module.McpServersOverlay })),
|
||
);
|
||
const CallView = lazyWithRecovery("CallView", () =>
|
||
import("./CallView").then((module) => ({ default: module.CallView })),
|
||
);
|
||
|
||
type Panel =
|
||
| "computer"
|
||
| "settings"
|
||
| "routine"
|
||
| "create"
|
||
| "create-group"
|
||
| "group-settings"
|
||
| "browser"
|
||
| null;
|
||
|
||
type PendingAttachment = {
|
||
id: string;
|
||
threadKey: string;
|
||
file: File;
|
||
previewUrl?: string;
|
||
};
|
||
|
||
type PendingBrowserNotification = {
|
||
event: Pick<ProductEvent, "id" | "type" | "threadId" | "botId" | "payload">;
|
||
botId: string;
|
||
botName: string;
|
||
groupNotification: boolean;
|
||
};
|
||
|
||
const ATTACHMENT_ACCEPT = ATTACHMENT_ALLOWED_MIME_TYPES.join(",");
|
||
/** Identity colour for bots the roster no longer knows about. */
|
||
const FALLBACK_BOT_COLOR = "#85858A";
|
||
const THREAD_SNAPSHOT_TIMEOUT_MS = 2_000;
|
||
/** Bound Settings leave so a hung voice status refresh cannot block dismissal. */
|
||
const VOICE_STATUS_REFRESH_TIMEOUT_MS = 10_000;
|
||
const MOBILE_SIDEBAR_SWIPE_EDGE_PX = 32;
|
||
const MOBILE_SIDEBAR_SWIPE_DISTANCE_PX = 56;
|
||
|
||
function threadSnapshotSignal(parent: AbortSignal): AbortSignal {
|
||
return AbortSignal.any([parent, AbortSignal.timeout(THREAD_SNAPSHOT_TIMEOUT_MS)]);
|
||
}
|
||
|
||
function voiceStatusRefreshTimeout(): Promise<never> {
|
||
return new Promise((_, reject) => {
|
||
AbortSignal.timeout(VOICE_STATUS_REFRESH_TIMEOUT_MS).addEventListener("abort", () => {
|
||
reject(new DOMException("Voice status refresh timed out", "TimeoutError"));
|
||
});
|
||
});
|
||
}
|
||
|
||
function collapsedSidebarSectionsStorageKey(userId: string | null | undefined): string | null {
|
||
if (!userId) return null;
|
||
return `rakazo:collapsed-sidebar-sections:${userId}`;
|
||
}
|
||
|
||
function readCollapsedSidebarSections(userId: string | null | undefined): Set<string> {
|
||
const storageKey = collapsedSidebarSectionsStorageKey(userId);
|
||
if (!storageKey) return new Set();
|
||
try {
|
||
const value = window.localStorage.getItem(storageKey);
|
||
const keys: unknown = value ? JSON.parse(value) : [];
|
||
return new Set(
|
||
Array.isArray(keys) ? keys.filter((key): key is string => typeof key === "string") : [],
|
||
);
|
||
} catch {
|
||
return new Set();
|
||
}
|
||
}
|
||
|
||
function copyBrowserPreviewActivities(
|
||
activities: ReadonlyMap<string, BrowserPreviewCursor>,
|
||
): Map<string, BrowserPreviewCursor> {
|
||
return new Map(activities);
|
||
}
|
||
|
||
function sameBrowserPreviewActivities(
|
||
current: ReadonlyMap<string, BrowserPreviewCursor>,
|
||
next: ReadonlyMap<string, BrowserPreviewCursor>,
|
||
): boolean {
|
||
if (current.size !== next.size) return false;
|
||
for (const [id, cursor] of next) {
|
||
const existing = current.get(id);
|
||
if (
|
||
!existing ||
|
||
existing.x !== cursor.x ||
|
||
existing.y !== cursor.y ||
|
||
existing.label !== cursor.label
|
||
) {
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
export type NavPillar = "heute" | "team" | "projekte";
|
||
|
||
function stripSpaceTitlePrefix(title: string | null, spaceName: string): string | null {
|
||
if (!title) return null;
|
||
const prefix = `${spaceName} · `;
|
||
if (title.startsWith(prefix)) return title.slice(prefix.length);
|
||
if (title === spaceName) return null;
|
||
return title;
|
||
}
|
||
|
||
import { ProjectDragGrip, SortableGroup } from "../components/SortableGroup";
|
||
|
||
export function ShellPage() {
|
||
const { t } = useLingui();
|
||
const { botId, groupId } = useParams();
|
||
const navigate = useNavigate();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const [activeNavPillar, setActiveNavPillar] = useState<NavPillar>(() => {
|
||
if (groupId) return "projekte";
|
||
if (botId) return "team";
|
||
return "heute";
|
||
});
|
||
const tradingStatus = useTradingBotStatus();
|
||
|
||
useEffect(() => {
|
||
if (botId) setActiveNavPillar("team");
|
||
}, [botId]);
|
||
|
||
useEffect(() => {
|
||
if (groupId) setActiveNavPillar("projekte");
|
||
}, [groupId]);
|
||
|
||
// Mirrors searchParams for effects that only need to read it once on run,
|
||
// not re-run on every unrelated query-param change (e.g. the SSE subscribe
|
||
// effect below, which should only restart when the active bot changes).
|
||
const searchParamsRef = useRef(searchParams);
|
||
searchParamsRef.current = searchParams;
|
||
const session = authClient.useSession();
|
||
const userId = session.data?.user.id;
|
||
const [groups, setGroups] = useState<Group[]>([]);
|
||
const [bots, setBots] = useState<Bot[]>([]);
|
||
const botsRef = useRef(bots);
|
||
botsRef.current = bots;
|
||
const botOrderEpochRef = useRef(0);
|
||
const pendingBotOrderRef = useRef<string[] | null>(null);
|
||
const savingBotOrderRef = useRef(false);
|
||
const [botSections, setBotSections] = useState<BotSection[]>([]);
|
||
const [spaces, setSpaces] = useState<Space[]>([]);
|
||
const [archivedBots, setArchivedBots] = useState<Bot[]>([]);
|
||
const [archivedGroups, setArchivedGroups] = useState<Group[]>([]);
|
||
const {
|
||
width: leftSidebarWidth,
|
||
isResizing: isResizingLeft,
|
||
startResizing: startResizingLeft,
|
||
} = useSidebarResize(316, "left", 240, 450);
|
||
const {
|
||
width: rightSidebarWidth,
|
||
isResizing: isResizingRight,
|
||
startResizing: startResizingRight,
|
||
} = useSidebarResize(384, "right", 280, 500);
|
||
|
||
const [heuteActionCount, setHeuteActionCount] = useState(0);
|
||
const [archivedOpen, setArchivedOpen] = useState(false);
|
||
const [expandedTeamGroups, setExpandedTeamGroups] = useState<Record<string, boolean>>({});
|
||
const [collapsedSidebarSections, setCollapsedSidebarSections] = useState(() => new Set<string>());
|
||
|
||
useEffect(() => {
|
||
setCollapsedSidebarSections(readCollapsedSidebarSections(userId));
|
||
}, [userId]);
|
||
useEffect(() => {
|
||
setBotsSidebarCollapsed(readBotsSidebarCollapsed(userId));
|
||
}, [userId]);
|
||
|
||
// ── Browser Preview ──────────────────────────────────────────────
|
||
const bridge = desktopBridge();
|
||
const [isDesktop] = useState(Boolean(bridge?.browserPreview));
|
||
const [panel, setPanel] = useState<Panel>(null);
|
||
const [browserUrl, setBrowserUrl] = useState("http://localhost:5173");
|
||
const [devServerRunning, setDevServerRunning] = useState(false);
|
||
const [browserLoading, setBrowserLoading] = useState(false);
|
||
const [agentActivities, setAgentActivities] = useState<
|
||
Map<string, { x: number; y: number; label: string }>
|
||
>(new Map());
|
||
|
||
const [showCreateBotModal, setShowCreateBotModal] = useState(false);
|
||
|
||
// Persisted project (space) sort order
|
||
const [projectOrder, setProjectOrder] = useState<string[]>(() => readProjectSidebarOrder());
|
||
const handleReorderProjects = useCallback((orderedIds: string[]) => {
|
||
setProjectOrder(orderedIds);
|
||
writeProjectSidebarOrder(orderedIds);
|
||
}, []);
|
||
const [draggedProjectId, setDraggedProjectId] = useState<string | null>(null);
|
||
const sensors = useSensors(
|
||
useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
|
||
useSensor(TouchSensor, { activationConstraint: { distance: 8 } }),
|
||
);
|
||
|
||
// Browser Preview lifecycle
|
||
useEffect(() => {
|
||
const bp = bridge?.browserPreview;
|
||
if (!bp) return;
|
||
const unsubNav = bp.onNavigate((url) => setBrowserUrl(url));
|
||
const unsubLoading = bp.onLoadingProgress((p) => setBrowserLoading(p < 1));
|
||
bp.getState()
|
||
.then((s) => {
|
||
setBrowserUrl(s.url);
|
||
setDevServerRunning(s.devServerRunning);
|
||
})
|
||
.catch(() => {});
|
||
return () => {
|
||
unsubNav();
|
||
unsubLoading();
|
||
};
|
||
}, [bridge]);
|
||
|
||
const startDevServer = useCallback(async () => {
|
||
try {
|
||
await bridge?.browserPreview?.devServer.start();
|
||
setDevServerRunning(true);
|
||
} catch {
|
||
/* */
|
||
}
|
||
}, [bridge]);
|
||
const stopDevServer = useCallback(async () => {
|
||
try {
|
||
await bridge?.browserPreview?.devServer.stop();
|
||
setDevServerRunning(false);
|
||
} catch {
|
||
/* */
|
||
}
|
||
}, [bridge]);
|
||
const navigateBrowser = useCallback(
|
||
(url: string) => {
|
||
bridge?.browserPreview?.navigate(url).catch(() => {});
|
||
},
|
||
[bridge],
|
||
);
|
||
const reloadBrowser = useCallback(() => {
|
||
bridge?.browserPreview?.reload().catch(() => {});
|
||
}, [bridge]);
|
||
|
||
// Agent activity → browser preview cursors
|
||
useEffect(() => {
|
||
const unsub = browserPreviewActivity.subscribe((acts) => {
|
||
setAgentActivities((current) =>
|
||
sameBrowserPreviewActivities(current, acts) ? current : copyBrowserPreviewActivities(acts),
|
||
);
|
||
});
|
||
return unsub;
|
||
}, []);
|
||
|
||
const [query, setQuery] = useState("");
|
||
const [searchHits, setSearchHits] = useState<SearchHit[]>([]);
|
||
const [searchLoading, setSearchLoading] = useState(false);
|
||
const [snapshot, setSnapshot] = useState<ThreadSnapshot | null>(null);
|
||
const snapshotRef = useRef<ThreadSnapshot | null>(null);
|
||
const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
|
||
const [replyTarget, setReplyTarget] = useState<ThreadMessage | null>(null);
|
||
const [replyQuote, setReplyQuote] = useState<string | null>(null);
|
||
const [sending, setSending] = useState(false);
|
||
const sendsInFlight = useRef(0);
|
||
const [sendError, setSendError] = useState<string | null>(null);
|
||
const [attachmentNotice, setAttachmentNotice] = useState<string | null>(null);
|
||
|
||
// Safety watchdog: ensure sending state is never stuck indefinitely if an RPC hangs or errors out
|
||
useEffect(() => {
|
||
if (!sending) return;
|
||
const timer = setTimeout(() => {
|
||
sendsInFlight.current = 0;
|
||
setSending(false);
|
||
}, 10_000);
|
||
return () => clearTimeout(timer);
|
||
}, [sending]);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const [peerConversation, setPeerConversation] = useState<{
|
||
peerBotId: string;
|
||
peerBotName: string;
|
||
} | null>(null);
|
||
const [routines, setRoutines] = useState<Routine[]>([]);
|
||
const [routinesBotId, setRoutinesBotId] = useState<string | null>(null);
|
||
const [taughtSkills, setTaughtSkills] = useState<TaughtSkill[]>([]);
|
||
const [taughtSkillsBotId, setTaughtSkillsBotId] = useState<string | null>(null);
|
||
const [agentSkills, setAgentSkills] = useState<AgentSkillCatalogEntry[]>([]);
|
||
const [mentionRoutines, setMentionRoutines] = useState<Array<Routine & { botName?: string }>>([]);
|
||
const [mentionConnectors, setMentionConnectors] = useState<
|
||
Array<{
|
||
id: string;
|
||
name: string;
|
||
authStatus: "connected" | "needs_auth";
|
||
connectionId?: string;
|
||
}>
|
||
>([]);
|
||
const [teachBusy, setTeachBusy] = useState(false);
|
||
const [computer, setComputer] = useState<ComputerStatus | null>(null);
|
||
const computerRef = useRef<ComputerStatus | null>(null);
|
||
const threadRefreshEpoch = useRef(0);
|
||
const groupRefreshEpoch = useRef(0);
|
||
const botsRefreshEpoch = useRef(0);
|
||
const botsRefreshApplied = useRef(0);
|
||
const archivedBotsRefreshEpoch = useRef(0);
|
||
const botsRefreshInFlight = useRef(0);
|
||
// A very fast run can finish over SSE while its threads.send response is still
|
||
// returning. Do not let that late receipt resurrect terminal work as queued.
|
||
const terminalRunReceipts = useRef(new Set<string>());
|
||
// Last-known computer/screen per bot, so switching back to an already-seen
|
||
// bot paints its computer pane instantly instead of blanking it while the
|
||
// thread + screen RPCs round-trip again (see refreshThread / refreshComputerScreen).
|
||
const computerCacheRef = useRef(
|
||
new Map<string, { computer: ComputerStatus | null; screenUrl: string | null }>(),
|
||
);
|
||
// Caps computerCacheRef so a long session that opens many distinct bots
|
||
// over time doesn't accumulate one entry per bot forever. Re-inserting on
|
||
// every update keeps Map iteration order as least-recently-used first, so
|
||
// eviction drops the bot that's been out of view longest.
|
||
const COMPUTER_CACHE_LIMIT = 20;
|
||
|
||
function cacheComputerFor(
|
||
botId: string,
|
||
patch: Partial<{ computer: ComputerStatus | null; screenUrl: string | null }>,
|
||
) {
|
||
const cache = computerCacheRef.current;
|
||
const prev = cache.get(botId) ?? { computer: null, screenUrl: null };
|
||
cache.delete(botId);
|
||
cache.set(botId, { ...prev, ...patch });
|
||
if (cache.size > COMPUTER_CACHE_LIMIT) {
|
||
const oldest = cache.keys().next().value;
|
||
if (oldest !== undefined) cache.delete(oldest);
|
||
}
|
||
}
|
||
|
||
function commitSnapshot(next: ThreadSnapshot | null) {
|
||
snapshotRef.current = next;
|
||
setSnapshot(next);
|
||
}
|
||
|
||
function commitComputer(next: ComputerStatus | null) {
|
||
computerRef.current = next;
|
||
setComputer(next);
|
||
}
|
||
|
||
function updateSnapshot(update: (prev: ThreadSnapshot | null) => ThreadSnapshot | null) {
|
||
commitSnapshot(update(snapshotRef.current));
|
||
}
|
||
const [pluginsOpen, setPluginsOpen] = useState(false);
|
||
const [mcpOpen, setMcpOpen] = useState(false);
|
||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||
|
||
const [settingsSection, setSettingsSection] = useState<SettingsSection>("general");
|
||
const [messagingSettingsOpen, setMessagingSettingsOpen] = useState(false);
|
||
const [messagingSurfaceEnabled, setMessagingSurfaceEnabled] = useState(false);
|
||
const [messagingProviders, setMessagingProviders] = useState<string[]>([]);
|
||
const [memoryProviderConfig, setMemoryProviderConfig] = useState<
|
||
SpaceMemoryConfig | null | undefined
|
||
>(undefined);
|
||
const memoryProviderConfigRevision = useRef(0);
|
||
const [callOpen, setCallOpen] = useState(false);
|
||
const [voiceStatus, setVoiceStatus] = useState<VoiceStatus | null>(null);
|
||
const [speakingMessageId, setSpeakingMessageId] = useState<string | null>(null);
|
||
const [dismissedRunErrorIds, setDismissedRunErrorIds] =
|
||
useState<ReadonlySet<string>>(readSeenRunErrorIds);
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||
const mobileSidebarSwipeRef = useRef<{ startX: number; startY: number } | null>(null);
|
||
const [draggedBotId, setDraggedBotId] = useState<string | null>(null);
|
||
const [createMenuOpen, setCreateMenuOpen] = useState(false);
|
||
const [conversationPickerOpen, setConversationPickerOpen] = useState(false);
|
||
const [botsSidebarCollapsed, setBotsSidebarCollapsed] = useState(false);
|
||
const focusPromptAbortRef = useRef<AbortController | null>(null);
|
||
const focusPromptBotIdRef = useRef<string | null>(null);
|
||
const botsSidebarEdgeDragRef = useRef<{ startX: number; mode: "expand" | "collapse" } | null>(
|
||
null,
|
||
);
|
||
const [newSpaceOpen, setNewSpaceOpen] = useState(false);
|
||
const [newSpaceDialogVariant, setNewSpaceDialogVariant] = useState<"space" | "project">("space");
|
||
const openNewSpaceDialog = useCallback((variant: "space" | "project") => {
|
||
setNewSpaceDialogVariant(variant);
|
||
setNewSpaceOpen(true);
|
||
}, []);
|
||
const [pickerInfoTopic, setPickerInfoTopic] = useState<"group" | "space" | null>(null);
|
||
const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const desktop = window.matchMedia("(min-width: 768px)");
|
||
function closeMobileSidebar() {
|
||
if (desktop.matches) setMobileSidebarOpen(false);
|
||
}
|
||
closeMobileSidebar();
|
||
desktop.addEventListener("change", closeMobileSidebar);
|
||
return () => desktop.removeEventListener("change", closeMobileSidebar);
|
||
}, []);
|
||
const [activityMode, setActivityMode] = useState(readActivityMode);
|
||
const toggleActivityMode = useCallback(() => {
|
||
setActivityMode((on) => {
|
||
const next = !on;
|
||
writeActivityMode(next);
|
||
return next;
|
||
});
|
||
}, []);
|
||
const [botMenu, setBotMenu] = useState<{
|
||
kind: "bot" | "group";
|
||
id: string;
|
||
position: ContextMenuPosition;
|
||
} | null>(null);
|
||
// The context menu anchors to the pointer, so return focus to the row that opened it.
|
||
const botMenuAnchor = useRef<HTMLElement | null>(null);
|
||
useEffect(() => {
|
||
if (botMenu || !botMenuAnchor.current) return;
|
||
botMenuAnchor.current.focus();
|
||
botMenuAnchor.current = null;
|
||
}, [botMenu]);
|
||
const [deleteTarget, setDeleteTarget] = useState<Bot | null>(null);
|
||
const [deleteGroupTarget, setDeleteGroupTarget] = useState<Group | null>(null);
|
||
const [deleteSpaceTarget, setDeleteSpaceTarget] = useState<Space | null>(null);
|
||
const [spaceMenu, setSpaceMenu] = useState<{
|
||
id: string;
|
||
position: ContextMenuPosition;
|
||
} | null>(null);
|
||
const spaceMenuAnchor = useRef<HTMLElement | null>(null);
|
||
useEffect(() => {
|
||
if (spaceMenu || !spaceMenuAnchor.current) return;
|
||
spaceMenuAnchor.current.focus();
|
||
spaceMenuAnchor.current = null;
|
||
}, [spaceMenu]);
|
||
const closeSpaceMenu = useCallback(() => setSpaceMenu(null), []);
|
||
const [clearTarget, setClearTarget] = useState<
|
||
{ kind: "bot"; chat: Bot } | { kind: "group"; chat: Group } | null
|
||
>(null);
|
||
const [newSectionTarget, setNewSectionTarget] = useState<
|
||
{ kind: "bot"; chat: Bot } | { kind: "group"; chat: Group } | null
|
||
>(null);
|
||
const [renameSectionTarget, setRenameSectionTarget] = useState<{
|
||
section: BotSection;
|
||
spaceId: string;
|
||
} | null>(null);
|
||
const [sectionMenu, setSectionMenu] = useState<{
|
||
section: BotSection;
|
||
spaceId: string;
|
||
position: ContextMenuPosition;
|
||
} | null>(null);
|
||
const sectionMenuAnchor = useRef<HTMLElement | null>(null);
|
||
useEffect(() => {
|
||
if (sectionMenu || !sectionMenuAnchor.current) return;
|
||
sectionMenuAnchor.current.focus();
|
||
sectionMenuAnchor.current = null;
|
||
}, [sectionMenu]);
|
||
const closeSectionMenu = useCallback(() => setSectionMenu(null), []);
|
||
const [booting, setBooting] = useState(false);
|
||
const [loadingOlder, setLoadingOlder] = useState(false);
|
||
const [initialBotsLoaded, setInitialBotsLoaded] = useState(false);
|
||
const [bootstrapMe, setBootstrapMe] = useState<Me | null>();
|
||
const [routineDraft, setRoutineDraft] = useState<RoutineDraftState>(emptyRoutineDraft());
|
||
const [routineWebhookSecret, setRoutineWebhookSecret] = useState<string | null>(null);
|
||
const [editingRoutine, setEditingRoutine] = useState<Routine | null>(null);
|
||
const [deleteRoutineTarget, setDeleteRoutineTarget] = useState<Routine | null>(null);
|
||
const [savingRoutine, setSavingRoutine] = useState(false);
|
||
const [runningRoutine, setRunningRoutine] = useState(false);
|
||
const [routineError, setRoutineError] = useState<string | null>(null);
|
||
const [screenUrl, setScreenUrl] = useState<string | null>(null);
|
||
const [computerOpen, setComputerOpen] = useState(false);
|
||
const [computerViewport, setComputerViewport] = useState<{
|
||
height: number;
|
||
offsetTop: number;
|
||
} | null>(null);
|
||
const [computerError, setComputerError] = useState<string | null>(null);
|
||
// Screen-load failures can sit beside a still-valid embed URL; boot and
|
||
// takeover failures must stay visible even when a URL remains.
|
||
const [computerErrorFromScreen, setComputerErrorFromScreen] = useState(false);
|
||
useEffect(() => {
|
||
if (!computerOpen) {
|
||
setComputerViewport(null);
|
||
return;
|
||
}
|
||
const viewport = window.visualViewport;
|
||
if (!viewport) return;
|
||
const sync = () => {
|
||
const height = Math.round(viewport.height);
|
||
const offsetTop = Math.round(viewport.offsetTop);
|
||
// Desktop scrollbars and sub-pixel viewport events must not rewrite the
|
||
// overlay height: that feedback loop moves the maintenance menu forever.
|
||
const keyboardInset = Math.round(window.innerHeight) - height - offsetTop;
|
||
if (keyboardInset < 80) {
|
||
setComputerViewport((current) => (current === null ? current : null));
|
||
return;
|
||
}
|
||
setComputerViewport((current) => {
|
||
if (current && current.height === height && current.offsetTop === offsetTop) return current;
|
||
return { height, offsetTop };
|
||
});
|
||
};
|
||
sync();
|
||
viewport.addEventListener("resize", sync);
|
||
viewport.addEventListener("scroll", sync);
|
||
return () => {
|
||
viewport.removeEventListener("resize", sync);
|
||
viewport.removeEventListener("scroll", sync);
|
||
};
|
||
}, [computerOpen]);
|
||
useEffect(() => {
|
||
if (!session.data?.user) return;
|
||
let cancelled = false;
|
||
void rpc.messaging
|
||
.status()
|
||
.then((status) => {
|
||
if (!cancelled) {
|
||
setMessagingSurfaceEnabled(status.enabled);
|
||
setMessagingProviders(status.providers);
|
||
}
|
||
})
|
||
.catch(() => undefined);
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [session.data?.user]);
|
||
const [usage, setUsage] = useState<{
|
||
inputTokens: number;
|
||
outputTokens: number;
|
||
runs: number;
|
||
} | null>(null);
|
||
const autoBooted = useRef<string | null>(null);
|
||
const routineSavePending = useRef(false);
|
||
const webhookSecretProvisionRef = useRef(new Map<string, Promise<string>>());
|
||
const ensureWebhookSecret = (botId: string) =>
|
||
sharedInflight(webhookSecretProvisionRef.current, botId, async () => {
|
||
const result = await rpc.bots.rotateWebhookSecret({ botId });
|
||
setRoutineWebhookSecret(result.secret);
|
||
setBots((current) =>
|
||
current.map((bot) => (bot.id === botId ? { ...bot, webhookConfigured: true } : bot)),
|
||
);
|
||
return result.secret;
|
||
});
|
||
const routineSaveRequest = useRef(0);
|
||
const routineRunPending = useRef(false);
|
||
const bootstrappedThread = useRef<ThreadSnapshot | null>(null);
|
||
const expandedHistoryThread = useRef<string | null>(null);
|
||
const historyEpoch = useRef(0);
|
||
const jumpGeneration = useRef(0);
|
||
const initiallyScrolledThread = useRef<string | null>(null);
|
||
const messageScroll = useRef<HTMLDivElement>(null);
|
||
const pinnedAroundRef = useRef<{
|
||
botId?: string;
|
||
groupId?: string;
|
||
messageId: string;
|
||
threadId: string;
|
||
messages: ThreadMessage[];
|
||
olderCursor: number | null;
|
||
} | null>(null);
|
||
const manuallyUnread = useRef(new Set<string>());
|
||
const readVisibleGroups = useRef(new Set<string>());
|
||
const notifiedBrowserEvents = useRef(new Set<string>());
|
||
const pendingBrowserNotifications = useRef(new Map<string, PendingBrowserNotification>());
|
||
const computerVisible = useRef(false);
|
||
computerVisible.current = panel === "computer" || computerOpen;
|
||
const autoSpoken = useRef<string | null>(null);
|
||
const autoSpokenBotId = useRef<string | null>(null);
|
||
|
||
const inGroup = Boolean(groupId);
|
||
const projectSessionKey = searchParams.get("s");
|
||
const voiceEntry = searchParams.get("voice") === "1";
|
||
const currentSpaceId = selectedSpaceId() ?? bootstrapMe?.spaceId;
|
||
const homeSpaceId = spaces.find((space) => space.isDefault)?.id ?? bootstrapMe?.spaceId;
|
||
const emptyProjectSpace = useMemo(
|
||
() => isEmptyProjectSpace(currentSpaceId, spaces, groups, homeSpaceId),
|
||
[currentSpaceId, groups, homeSpaceId, spaces],
|
||
);
|
||
const active = inGroup
|
||
? undefined
|
||
: (bots.find((b) => b.id === botId) ?? (emptyProjectSpace && !botId ? undefined : bots[0]));
|
||
const activeGroup = groups.find((group) => group.id === groupId);
|
||
const activeProjectSection = activeGroup?.sectionId
|
||
? botSections.find((section) => section.id === activeGroup.sectionId)
|
||
: undefined;
|
||
const showProjectTimeline =
|
||
inGroup && activeNavPillar !== "heute" && !projectSessionKey && Boolean(activeGroup?.sectionId);
|
||
const activePendingAttachments = useMemo(
|
||
() => attachmentsForThread(pendingAttachments, inGroup ? groupId : active?.id),
|
||
[active?.id, groupId, inGroup, pendingAttachments],
|
||
);
|
||
const activeRoutines = !inGroup && routinesBotId === active?.id ? routines : [];
|
||
const activeTaughtSkills = taughtSkillsBotId === active?.id ? taughtSkills : [];
|
||
const recordingSkill = activeTaughtSkills.find((skill) => skill.status === "recording") ?? null;
|
||
const routeBotId = useRef<string | undefined>(botId);
|
||
routeBotId.current = botId;
|
||
const routeGroupId = useRef<string | undefined>(groupId);
|
||
routeGroupId.current = groupId;
|
||
const activeBotId = useRef<string | undefined>(inGroup ? undefined : active?.id);
|
||
activeBotId.current = inGroup ? undefined : active?.id;
|
||
const activeGroupId = useRef<string | undefined>(groupId);
|
||
activeGroupId.current = groupId;
|
||
const screenRequest = useRef(0);
|
||
const contextBot =
|
||
botMenu?.kind === "bot" ? bots.find((bot) => bot.id === botMenu.id) : undefined;
|
||
const contextGroup =
|
||
botMenu?.kind === "group" ? groups.find((group) => group.id === botMenu.id) : undefined;
|
||
const contextChat = contextBot ?? contextGroup;
|
||
const closeBotMenu = useCallback(() => setBotMenu(null), []);
|
||
const updateBotUnread = useCallback((id: string, unread: boolean) => {
|
||
setBots((current) => {
|
||
const bot = current.find((candidate) => candidate.id === id);
|
||
if (!bot || bot.unread === unread) return current;
|
||
return current.map((candidate) =>
|
||
candidate.id === id ? { ...candidate, unread } : candidate,
|
||
);
|
||
});
|
||
}, []);
|
||
const markBotRead = useCallback(
|
||
async (id: string) => {
|
||
await rpc.threads.markRead({ botId: id });
|
||
manuallyUnread.current.delete(id);
|
||
updateBotUnread(id, false);
|
||
},
|
||
[updateBotUnread],
|
||
);
|
||
const markBotUnread = useCallback(
|
||
async (id: string) => {
|
||
manuallyUnread.current.add(id);
|
||
try {
|
||
await rpc.threads.markUnread({ botId: id });
|
||
} catch (err) {
|
||
manuallyUnread.current.delete(id);
|
||
throw err;
|
||
}
|
||
updateBotUnread(id, true);
|
||
},
|
||
[updateBotUnread],
|
||
);
|
||
// A bot the user marked unread by hand stays unread until they open it again,
|
||
// otherwise the auto-read below would undo the action on the next window focus.
|
||
const markBotReadIfVisible = useCallback(
|
||
(id: string) => {
|
||
if (manuallyUnread.current.has(id)) return;
|
||
if (document.visibilityState === "visible" && document.hasFocus()) {
|
||
void markBotRead(id).catch(() => undefined);
|
||
}
|
||
},
|
||
[markBotRead],
|
||
);
|
||
const deliverBrowserNotification = useCallback((pending: PendingBrowserNotification): boolean => {
|
||
const currentBot = botsRef.current.find((bot) => bot.id === pending.botId);
|
||
if (!currentBot || typeof Notification === "undefined") return true;
|
||
const result = deliverNativeBrowserNotification(
|
||
pending.event,
|
||
currentBot.name || pending.botName,
|
||
{
|
||
enabled: pending.groupNotification || currentBot.notifyOnFinish,
|
||
pageVisible: document.visibilityState === "visible",
|
||
windowFocused: document.hasFocus(),
|
||
permission: Notification.permission,
|
||
notifiedEventIds: notifiedBrowserEvents.current,
|
||
show: (title, body, tag) => new Notification(title, { body, tag }),
|
||
},
|
||
);
|
||
return result !== "pending";
|
||
}, []);
|
||
const flushPendingBrowserNotifications = useCallback(() => {
|
||
for (const [threadId, pending] of pendingBrowserNotifications.current) {
|
||
if (deliverBrowserNotification(pending)) {
|
||
pendingBrowserNotifications.current.delete(threadId);
|
||
}
|
||
}
|
||
}, [deliverBrowserNotification]);
|
||
const notifyBrowserForEvent = useCallback(
|
||
(
|
||
event: Pick<ProductEvent, "id" | "type" | "threadId" | "seq" | "botId" | "payload">,
|
||
subscribedThreadId: string | undefined,
|
||
initialCursor: number,
|
||
streamReady: boolean,
|
||
botName: string,
|
||
enabled: boolean,
|
||
groupNotification: boolean,
|
||
) => {
|
||
const botId = event.botId;
|
||
if (typeof botId !== "string") return;
|
||
const eligible = shouldNotifyBrowser(event, {
|
||
subscribedThreadId: subscribedThreadId ?? "",
|
||
initialCursor,
|
||
streamReady,
|
||
pageVisible: document.visibilityState === "visible",
|
||
windowFocused: document.hasFocus(),
|
||
permission: "granted",
|
||
notifiedEventIds: notifiedBrowserEvents.current,
|
||
});
|
||
if (!eligible || !enabled) return;
|
||
const pending = {
|
||
event,
|
||
botId,
|
||
botName,
|
||
groupNotification,
|
||
} satisfies PendingBrowserNotification;
|
||
if (typeof Notification === "undefined" || Notification.permission === "denied") return;
|
||
if (Notification.permission === "default") {
|
||
pendingBrowserNotifications.current.set(event.threadId, pending);
|
||
return;
|
||
}
|
||
if (deliverBrowserNotification(pending)) {
|
||
pendingBrowserNotifications.current.delete(event.threadId);
|
||
} else {
|
||
pendingBrowserNotifications.current.set(event.threadId, pending);
|
||
}
|
||
},
|
||
[deliverBrowserNotification],
|
||
);
|
||
|
||
const refreshBots = useCallback(
|
||
async (includeArchived = false, replaceBotOrder = false) => {
|
||
markOnce("rk:renderer:bots-request-start");
|
||
const request = ++botsRefreshEpoch.current;
|
||
const botOrderEpoch = botOrderEpochRef.current;
|
||
const preserveBotOrder = savingBotOrderRef.current || pendingBotOrderRef.current !== null;
|
||
const archivedRequest = includeArchived ? ++archivedBotsRefreshEpoch.current : null;
|
||
botsRefreshInFlight.current += 1;
|
||
try {
|
||
const [navigation, archived, archivedGroupList] = await Promise.all([
|
||
rpc.spaces.list(),
|
||
includeArchived ? rpc.bots.listArchived() : Promise.resolve(null),
|
||
includeArchived ? rpc.groups.listArchived() : Promise.resolve(null),
|
||
]);
|
||
const { bots: list, botSections: sections, groups: groupList } = navigation.current;
|
||
markOnce("rk:renderer:bots-response");
|
||
const botsFresh = request === botsRefreshEpoch.current;
|
||
const archivedFresh =
|
||
archivedRequest != null && archivedRequest === archivedBotsRefreshEpoch.current;
|
||
// A newer non-archived refresh can win the bots epoch while an older
|
||
// includeArchived request still owns archivedBotsRefreshEpoch — apply
|
||
// whichever slices are still current.
|
||
if (!botsFresh && !archivedFresh) return;
|
||
if (archivedFresh && archived) setArchivedBots(archived);
|
||
if (archivedFresh && archivedGroupList) setArchivedGroups(archivedGroupList);
|
||
if (!botsFresh) return;
|
||
if (
|
||
botOrderEpoch === botOrderEpochRef.current &&
|
||
(replaceBotOrder || (!preserveBotOrder && !savingBotOrderRef.current))
|
||
) {
|
||
setBots(list);
|
||
}
|
||
setBotSections(sections);
|
||
setGroups(groupList);
|
||
setSpaces(navigation.spaces);
|
||
setInitialBotsLoaded(true);
|
||
botsRefreshApplied.current = request;
|
||
if (
|
||
includeArchived &&
|
||
list.length === 0 &&
|
||
archived?.length === 0 &&
|
||
groupList.length === 0 &&
|
||
archivedGroupList?.length === 0 &&
|
||
!navigation.spaces.some((space) => space.hasContent)
|
||
) {
|
||
// Only the very first bot everywhere needs onboarding. An empty
|
||
// current space with content elsewhere stays in the app so the
|
||
// space can be switched to or deleted instead of trapping the user.
|
||
navigate("/onboarding", { replace: true });
|
||
return;
|
||
}
|
||
const currentGroupId = routeGroupId.current;
|
||
const currentBotId = routeBotId.current;
|
||
const refreshHomeSpaceId =
|
||
navigation.spaces.find((space) => space.isDefault)?.id ?? selectedSpaceId() ?? undefined;
|
||
const refreshSpaceId = selectedSpaceId() ?? refreshHomeSpaceId;
|
||
const emptyProject = isEmptyProjectSpace(
|
||
refreshSpaceId,
|
||
navigation.spaces,
|
||
groupList,
|
||
refreshHomeSpaceId,
|
||
);
|
||
if (emptyProject) {
|
||
if (currentGroupId || (currentBotId && !list.some((bot) => bot.id === currentBotId))) {
|
||
navigate("/app", { replace: true });
|
||
}
|
||
return;
|
||
}
|
||
if (currentGroupId) {
|
||
if (!groupList.some((group) => group.id === currentGroupId)) {
|
||
navigate(firstThreadRoute(list, groupList), { replace: true });
|
||
}
|
||
return;
|
||
}
|
||
if (!currentBotId || !list.some((bot) => bot.id === currentBotId)) {
|
||
navigate(firstThreadRoute(list, groupList), { replace: true });
|
||
}
|
||
} finally {
|
||
botsRefreshInFlight.current -= 1;
|
||
}
|
||
},
|
||
[navigate],
|
||
);
|
||
|
||
function snapTranscriptToEndAfterFrame() {
|
||
const queuedElement = messageScroll.current;
|
||
if (!queuedElement) return;
|
||
const queuedScrollTop = queuedElement.scrollTop;
|
||
window.requestAnimationFrame(() => {
|
||
const element = messageScroll.current;
|
||
if (transcriptCanSnapAfterFrame(element, queuedElement, queuedScrollTop)) {
|
||
queuedElement.scrollTop = queuedElement.scrollHeight;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function refreshGroupThread(id: string, signal?: AbortSignal) {
|
||
const scrollElement = messageScroll.current;
|
||
const stickToEnd = !scrollElement || transcriptIsNearEnd(scrollElement);
|
||
markOnce("rk:renderer:thread-request-start");
|
||
const request = ++groupRefreshEpoch.current;
|
||
const snap = await rpc.threads.get({ groupId: id }, signal ? { signal } : undefined);
|
||
markOnce("rk:renderer:thread-response");
|
||
if (activeGroupId.current !== id || request !== groupRefreshEpoch.current) return snap;
|
||
const reconciled = reconcileRefreshedThread(
|
||
snapshotRef.current,
|
||
snap,
|
||
computerRef.current,
|
||
expandedHistoryThread.current === snap.threadId,
|
||
);
|
||
commitSnapshot(reconciled.snapshot);
|
||
commitComputer(null);
|
||
setRoutines([]);
|
||
setRoutinesBotId(null);
|
||
// Keep the search-jump viewport; expandedHistoryThread merge still accepts live messages.
|
||
if (
|
||
stickToEnd &&
|
||
(!scrollElement || transcriptIsNearEnd(scrollElement)) &&
|
||
expandedHistoryThread.current !== snap.threadId
|
||
) {
|
||
snapTranscriptToEndAfterFrame();
|
||
}
|
||
return snap;
|
||
}
|
||
|
||
async function refreshThread(id: string, signal?: AbortSignal) {
|
||
const scrollElement = messageScroll.current;
|
||
const stickToEnd = !scrollElement || transcriptIsNearEnd(scrollElement);
|
||
markOnce("rk:renderer:thread-request-start");
|
||
const epoch = historyEpoch.current;
|
||
const request = ++threadRefreshEpoch.current;
|
||
// Apply threads.get as soon as it returns so stop/takeover status is not held behind
|
||
// routines/skills/screen fetches (progress can advance the cursor meanwhile).
|
||
const snap = await rpc.threads.get({ botId: id }, signal ? { signal } : undefined);
|
||
markOnce("rk:renderer:thread-response");
|
||
if (
|
||
activeBotId.current !== id ||
|
||
epoch !== historyEpoch.current ||
|
||
request !== threadRefreshEpoch.current
|
||
) {
|
||
return snap;
|
||
}
|
||
const reconciled = reconcileRefreshedThread(
|
||
snapshotRef.current,
|
||
snap,
|
||
computerRef.current,
|
||
expandedHistoryThread.current === snap.threadId,
|
||
);
|
||
commitSnapshot(reconciled.snapshot);
|
||
commitComputer(reconciled.computer);
|
||
cacheComputerFor(id, { computer: reconciled.computer });
|
||
if (
|
||
stickToEnd &&
|
||
(!scrollElement || transcriptIsNearEnd(scrollElement)) &&
|
||
expandedHistoryThread.current !== snap.threadId
|
||
) {
|
||
snapTranscriptToEndAfterFrame();
|
||
}
|
||
void Promise.all([
|
||
rpc.routines.list({ botId: id }).catch(() => null),
|
||
rpc.skills.list({ botId: id }).catch(() => null),
|
||
refreshComputerScreen(id).catch(() => null),
|
||
]).then(([routines, skills]) => {
|
||
if (
|
||
activeBotId.current !== id ||
|
||
epoch !== historyEpoch.current ||
|
||
request !== threadRefreshEpoch.current
|
||
) {
|
||
return;
|
||
}
|
||
if (routines) {
|
||
setRoutines(routines);
|
||
setRoutinesBotId(id);
|
||
}
|
||
if (skills) {
|
||
setTaughtSkills(skills);
|
||
setTaughtSkillsBotId(id);
|
||
}
|
||
});
|
||
return snap;
|
||
}
|
||
|
||
async function refreshComputerScreen(id: string) {
|
||
if (!computerVisible.current) return null;
|
||
const request = ++screenRequest.current;
|
||
return loadComputerScreen({
|
||
load: () => rpc.computer.screenUrl({ botId: id }),
|
||
isCurrent: () =>
|
||
request === screenRequest.current && activeBotId.current === id && computerVisible.current,
|
||
commit: (screen) => {
|
||
setScreenUrl(screen.url);
|
||
setComputerError(screen.error);
|
||
setComputerErrorFromScreen(Boolean(screen.error));
|
||
cacheComputerFor(id, { screenUrl: screen.url });
|
||
},
|
||
fallbackError: t`Could not connect to the computer screen`,
|
||
});
|
||
}
|
||
|
||
async function loadOlderMessages() {
|
||
const targetBotId = inGroup ? undefined : active?.id;
|
||
const targetGroupId = inGroup ? groupId : undefined;
|
||
const snapshotMatchesTarget = targetGroupId
|
||
? snapshot?.groupId === targetGroupId
|
||
: snapshot?.botId === targetBotId;
|
||
if (
|
||
(!targetBotId && !targetGroupId) ||
|
||
!snapshotMatchesTarget ||
|
||
snapshot?.olderCursor == null ||
|
||
loadingOlder
|
||
)
|
||
return;
|
||
pinnedAroundRef.current = null;
|
||
const scrollElement = messageScroll.current;
|
||
const previousHeight = scrollElement?.scrollHeight ?? 0;
|
||
const epoch = historyEpoch.current;
|
||
const before = snapshot.olderCursor;
|
||
setLoadingOlder(true);
|
||
try {
|
||
const page = await rpc.threads.messages({
|
||
...(targetGroupId ? { groupId: targetGroupId } : { botId: targetBotId! }),
|
||
before,
|
||
});
|
||
if (
|
||
epoch !== historyEpoch.current ||
|
||
activeBotId.current !== targetBotId ||
|
||
activeGroupId.current !== targetGroupId
|
||
)
|
||
return;
|
||
expandedHistoryThread.current = page.threadId;
|
||
updateSnapshot((prev) => prependThreadMessagePage(prev, page));
|
||
window.requestAnimationFrame(() => {
|
||
const element = messageScroll.current;
|
||
if (element) element.scrollTop += element.scrollHeight - previousHeight;
|
||
});
|
||
} finally {
|
||
setLoadingOlder(false);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
const providerConfigRevision = memoryProviderConfigRevision.current;
|
||
void rpc.memory
|
||
.providerConfig()
|
||
.then((providerConfig) => {
|
||
if (!cancelled && memoryProviderConfigRevision.current === providerConfigRevision) {
|
||
setMemoryProviderConfig(providerConfig);
|
||
}
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled && memoryProviderConfigRevision.current === providerConfigRevision) {
|
||
setMemoryProviderConfig(null);
|
||
}
|
||
});
|
||
const appliedAtStart = botsRefreshApplied.current;
|
||
void takeInitialBootstrap(botId)
|
||
.then((bootstrap) => {
|
||
if (cancelled) return;
|
||
const groupList = bootstrap.groups;
|
||
setBootstrapMe(bootstrap.me);
|
||
if (!selectedSpaceId()) {
|
||
selectSpace(bootstrap.me.spaceId);
|
||
}
|
||
// Skip list/route writes only if a later refreshBots() successfully
|
||
// committed (failed refreshes bump epoch but not botsRefreshApplied).
|
||
const applyBotLists = appliedAtStart === botsRefreshApplied.current;
|
||
if (applyBotLists) {
|
||
setBots(bootstrap.bots);
|
||
setBotSections(bootstrap.botSections);
|
||
setArchivedBots(bootstrap.archivedBots);
|
||
setArchivedGroups(bootstrap.archivedGroups);
|
||
setGroups(groupList);
|
||
setSpaces(bootstrap.spaces);
|
||
setInitialBotsLoaded(true);
|
||
}
|
||
if (!groupId && bootstrap.thread) {
|
||
bootstrappedThread.current = bootstrap.thread;
|
||
commitSnapshot(bootstrap.thread);
|
||
commitComputer(bootstrap.thread.computer ?? null);
|
||
setRoutines(bootstrap.routines);
|
||
setRoutinesBotId(bootstrap.thread.botId ?? null);
|
||
markOnce("rk:renderer:bots-response");
|
||
markOnce("rk:renderer:thread-response");
|
||
}
|
||
if (!applyBotLists) return;
|
||
if (
|
||
bootstrap.bots.length === 0 &&
|
||
bootstrap.archivedBots.length === 0 &&
|
||
groupList.length === 0 &&
|
||
bootstrap.archivedGroups.length === 0 &&
|
||
!bootstrap.spaces.some((space) => space.hasContent)
|
||
) {
|
||
navigate("/onboarding", { replace: true });
|
||
return;
|
||
}
|
||
const bootstrapHomeSpaceId =
|
||
bootstrap.spaces.find((space) => space.isDefault)?.id ?? bootstrap.me.spaceId;
|
||
const bootstrapSpaceId = selectedSpaceId() ?? bootstrap.me.spaceId;
|
||
const emptyProject = isEmptyProjectSpace(
|
||
bootstrapSpaceId,
|
||
bootstrap.spaces,
|
||
groupList,
|
||
bootstrapHomeSpaceId,
|
||
);
|
||
if (emptyProject) {
|
||
if (groupId || (botId && !bootstrap.bots.some((bot) => bot.id === botId))) {
|
||
navigate("/app", { replace: true });
|
||
}
|
||
return;
|
||
}
|
||
if (groupId) {
|
||
if (!groupList.some((group) => group.id === groupId)) {
|
||
navigate(firstThreadRoute(bootstrap.bots, groupList), { replace: true });
|
||
}
|
||
return;
|
||
}
|
||
const selectedBotId = bootstrap.thread?.botId ?? bootstrap.bots[0]?.id;
|
||
if (selectedBotId && selectedBotId !== botId) {
|
||
navigate(`/app/${selectedBotId}`, { replace: true });
|
||
}
|
||
})
|
||
.catch(() => {
|
||
if (cancelled) return;
|
||
setBootstrapMe(null);
|
||
void refreshBots(true);
|
||
});
|
||
let refreshTimer: number | undefined;
|
||
const refreshVisibleBots = () => {
|
||
if (document.visibilityState !== "visible") return;
|
||
window.clearTimeout(refreshTimer);
|
||
refreshTimer = window.setTimeout(() => void refreshBots().catch(() => undefined), 50);
|
||
};
|
||
window.addEventListener("focus", refreshVisibleBots);
|
||
document.addEventListener("visibilitychange", refreshVisibleBots);
|
||
// Poll skips while a refresh is in flight; focus/visibility and event-driven
|
||
// callers still bump botsRefreshEpoch so only the latest response applies.
|
||
const poll = window.setInterval(() => {
|
||
if (botsRefreshInFlight.current > 0) return;
|
||
refreshVisibleBots();
|
||
}, 3_000);
|
||
return () => {
|
||
cancelled = true;
|
||
window.clearTimeout(refreshTimer);
|
||
window.clearInterval(poll);
|
||
window.removeEventListener("focus", refreshVisibleBots);
|
||
document.removeEventListener("visibilitychange", refreshVisibleBots);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
void rpc.agentSkills
|
||
.list()
|
||
.then((skills) => {
|
||
if (!cancelled) setAgentSkills(skills);
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setAgentSkills([]);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, []);
|
||
|
||
const refreshAgentSkills = useCallback(() => {
|
||
void rpc.agentSkills
|
||
.list()
|
||
.then(setAgentSkills)
|
||
.catch(() => undefined);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
void rpc.voice
|
||
.status()
|
||
.then(setVoiceStatus)
|
||
.catch(() => undefined);
|
||
const unsubSpeech = speaker.subscribe((state) => {
|
||
setSpeakingMessageId(state.status === "idle" ? null : (state.messageId ?? null));
|
||
});
|
||
return () => {
|
||
unsubSpeech();
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!active || !snapshot || snapshot.botId !== active.id) return;
|
||
const lastBot = [...snapshot.messages].reverse().find((message) => message.role === "bot");
|
||
if (autoSpokenBotId.current !== active.id) {
|
||
autoSpokenBotId.current = active.id;
|
||
autoSpoken.current = lastBot?.id ?? null;
|
||
return;
|
||
}
|
||
if (callOpen || !active.autoSpeak) {
|
||
autoSpoken.current = lastBot?.id ?? null;
|
||
return;
|
||
}
|
||
if (snapshot.run && ["running", "queued", "leased"].includes(snapshot.run.status)) return;
|
||
if (!lastBot || lastBot.id === autoSpoken.current) return;
|
||
const text = speechFromBlocks(lastBot.blocks);
|
||
if (!text) return;
|
||
autoSpoken.current = lastBot.id;
|
||
void speaker.speak(text, { botId: active.id, messageId: lastBot.id });
|
||
}, [
|
||
snapshot?.messages,
|
||
snapshot?.run?.status,
|
||
snapshot?.botId,
|
||
active?.autoSpeak,
|
||
active?.id,
|
||
callOpen,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (!active) return;
|
||
// Opening a bot clears the manual unread flag so it can auto-read again.
|
||
manuallyUnread.current.delete(active.id);
|
||
const markVisibleBotRead = () => {
|
||
markBotReadIfVisible(active.id);
|
||
};
|
||
markVisibleBotRead();
|
||
window.addEventListener("focus", markVisibleBotRead);
|
||
document.addEventListener("visibilitychange", markVisibleBotRead);
|
||
return () => {
|
||
window.removeEventListener("focus", markVisibleBotRead);
|
||
document.removeEventListener("visibilitychange", markVisibleBotRead);
|
||
};
|
||
}, [active?.id, markBotReadIfVisible]);
|
||
|
||
useEffect(() => {
|
||
if (!active) return;
|
||
const pendingJump = searchParamsRef.current.get("m");
|
||
if (!pendingJump) {
|
||
pinnedAroundRef.current = null;
|
||
}
|
||
screenRequest.current += 1;
|
||
setComputerError(null);
|
||
setComputerErrorFromScreen(false);
|
||
const cached = computerCacheRef.current.get(active.id);
|
||
if (cached) {
|
||
// Paint the last-known computer instantly; refreshThread/refreshComputerScreen
|
||
// below still run and reconcile with fresh data in the background.
|
||
setScreenUrl(cached.screenUrl);
|
||
commitComputer(cached.computer);
|
||
} else {
|
||
setScreenUrl(null);
|
||
}
|
||
expandedHistoryThread.current = null;
|
||
historyEpoch.current += 1;
|
||
const abort = new AbortController();
|
||
void runThreadSubscription({
|
||
signal: abort.signal,
|
||
loadInitial: async () => {
|
||
const primed = bootstrappedThread.current;
|
||
bootstrappedThread.current = null;
|
||
// Pending search jumps load the around-page separately; avoid replacing it with latest.
|
||
return primed?.botId === active.id
|
||
? primed
|
||
: pendingJump
|
||
? rpc.threads.get({ botId: active.id }, { signal: threadSnapshotSignal(abort.signal) })
|
||
: refreshThread(active.id, threadSnapshotSignal(abort.signal));
|
||
},
|
||
loadHead: () =>
|
||
rpc.threads.head({ botId: active.id }, { signal: threadSnapshotSignal(abort.signal) }),
|
||
refresh: () => refreshThread(active.id, threadSnapshotSignal(abort.signal)),
|
||
currentSnapshot: () => snapshotRef.current,
|
||
subscribe: (cursor) =>
|
||
rpc.threads.subscribe({ botId: active.id, cursor }, { signal: abort.signal }),
|
||
beforeEvent: (event) => {
|
||
if (isRunTerminalEvent(event) && event.runId) {
|
||
terminalRunReceipts.current.add(event.runId);
|
||
if (terminalRunReceipts.current.size > 100) {
|
||
const oldest = terminalRunReceipts.current.values().next().value;
|
||
if (oldest !== undefined) terminalRunReceipts.current.delete(oldest);
|
||
}
|
||
}
|
||
},
|
||
applyEvent: (event) =>
|
||
applyThreadEvent(event, commitSnapshot, commitComputer, snapshotRef, computerRef),
|
||
onEvent: (event, initial) => {
|
||
const currentBot = botsRef.current.find((bot) => bot.id === active.id);
|
||
notifyBrowserForEvent(
|
||
event,
|
||
initial.threadId,
|
||
initial.cursor,
|
||
true,
|
||
currentBot?.name ?? active.name,
|
||
currentBot?.notifyOnFinish ?? false,
|
||
false,
|
||
);
|
||
if (event.type === "thread.cleared") {
|
||
expandedHistoryThread.current = null;
|
||
pinnedAroundRef.current = null;
|
||
historyEpoch.current += 1;
|
||
}
|
||
if (event.type === "bot.archived") {
|
||
void refreshBots(true).catch(() => undefined);
|
||
} else if (
|
||
event.type === "bot.spawned" ||
|
||
event.type === "bot.deleted" ||
|
||
event.type === "run.started" ||
|
||
isRunTerminalEvent(event) ||
|
||
event.type === "thread.cleared"
|
||
) {
|
||
void refreshBots().catch(() => undefined);
|
||
}
|
||
if (event.type === "group.created") {
|
||
void refreshBots().catch(() => undefined);
|
||
}
|
||
if (event.type === "thread.message.created") {
|
||
const blocks = (event.payload.blocks as Array<{ kind?: string }>) ?? [];
|
||
if (
|
||
blocks.some((block) => block.kind === "child_bot" || block.kind === "project_created")
|
||
) {
|
||
void refreshBots().catch(() => undefined);
|
||
}
|
||
if (event.payload.role === "bot") markBotReadIfVisible(active.id);
|
||
}
|
||
if (event.type === "run.waiting_input" || event.type === "computer.takeover.requested") {
|
||
ooSound.play("need-you");
|
||
ooVocals.reactForEvent("need-you");
|
||
}
|
||
if (
|
||
isRunTerminalEvent(event) ||
|
||
event.type === "run.waiting_input" ||
|
||
event.type === "skill.teaching.stopped"
|
||
) {
|
||
// waiting_input: reconcile ask cards if a stale post-send refresh raced SSE.
|
||
void refreshThread(active.id).catch(() => undefined);
|
||
} else if (isComputerStatusEvent(event)) {
|
||
void refreshComputerScreen(active.id).catch(() => undefined);
|
||
}
|
||
},
|
||
});
|
||
return () => {
|
||
abort.abort();
|
||
};
|
||
}, [active?.id, markBotReadIfVisible, notifyBrowserForEvent]);
|
||
|
||
useEffect(() => {
|
||
if (!groupId || !activeGroup) return;
|
||
manuallyUnread.current.delete(activeGroup.id);
|
||
readVisibleGroups.current.delete(groupId);
|
||
const markVisibleGroupRead = () => {
|
||
if (
|
||
document.visibilityState !== "visible" ||
|
||
!document.hasFocus() ||
|
||
readVisibleGroups.current.has(groupId)
|
||
)
|
||
return;
|
||
readVisibleGroups.current.add(groupId);
|
||
void rpc.threads
|
||
.markRead({ groupId })
|
||
.then(() => {
|
||
setGroups((current) => {
|
||
const group = current.find((candidate) => candidate.id === groupId);
|
||
if (!group?.unread) return current;
|
||
return current.map((candidate) =>
|
||
candidate.id === groupId ? { ...candidate, unread: false } : candidate,
|
||
);
|
||
});
|
||
})
|
||
.catch(() => {
|
||
readVisibleGroups.current.delete(groupId);
|
||
});
|
||
};
|
||
markVisibleGroupRead();
|
||
window.addEventListener("focus", markVisibleGroupRead);
|
||
document.addEventListener("visibilitychange", markVisibleGroupRead);
|
||
const pendingJump = searchParamsRef.current.get("m");
|
||
if (!pendingJump) {
|
||
pinnedAroundRef.current = null;
|
||
expandedHistoryThread.current = null;
|
||
}
|
||
historyEpoch.current += 1;
|
||
const abort = new AbortController();
|
||
void runThreadSubscription({
|
||
signal: abort.signal,
|
||
loadInitial: () =>
|
||
pendingJump
|
||
? rpc.threads.get({ groupId }, { signal: threadSnapshotSignal(abort.signal) })
|
||
: refreshGroupThread(groupId, threadSnapshotSignal(abort.signal)),
|
||
loadHead: () => rpc.threads.head({ groupId }, { signal: threadSnapshotSignal(abort.signal) }),
|
||
refresh: () => refreshGroupThread(groupId, threadSnapshotSignal(abort.signal)),
|
||
currentSnapshot: () => snapshotRef.current,
|
||
subscribe: (cursor) => rpc.threads.subscribe({ groupId, cursor }, { signal: abort.signal }),
|
||
applyEvent: (event) =>
|
||
applyThreadEvent(event, commitSnapshot, commitComputer, snapshotRef, computerRef),
|
||
onEvent: (event, initial) => {
|
||
const eventBot = botsRef.current.find((bot) => bot.id === event.botId);
|
||
notifyBrowserForEvent(
|
||
event,
|
||
initial.threadId,
|
||
initial.cursor,
|
||
true,
|
||
eventBot?.name ?? activeGroup.name,
|
||
true,
|
||
true,
|
||
);
|
||
if (event.type === "thread.message.created" && event.payload.role === "bot") {
|
||
readVisibleGroups.current.delete(groupId);
|
||
markVisibleGroupRead();
|
||
}
|
||
if (event.type === "group.created") {
|
||
void refreshBots().catch(() => undefined);
|
||
}
|
||
if (event.type === "run.started" || isRunTerminalEvent(event)) {
|
||
void refreshBots().catch(() => undefined);
|
||
}
|
||
if (event.type === "thread.message.created") {
|
||
const blocks = (event.payload.blocks as Array<{ kind?: string }>) ?? [];
|
||
if (blocks.some((block) => block.kind === "project_created")) {
|
||
void refreshBots().catch(() => undefined);
|
||
}
|
||
}
|
||
if (event.type === "run.waiting_input" || event.type === "computer.takeover.requested") {
|
||
ooSound.play("need-you");
|
||
ooVocals.reactForEvent("need-you");
|
||
}
|
||
if (isRunTerminalEvent(event) || event.type === "run.waiting_input") {
|
||
// waiting_input: reconcile ask cards if a stale post-send refresh raced SSE.
|
||
void refreshGroupThread(groupId).catch(() => undefined);
|
||
}
|
||
},
|
||
});
|
||
return () => {
|
||
window.removeEventListener("focus", markVisibleGroupRead);
|
||
document.removeEventListener("visibilitychange", markVisibleGroupRead);
|
||
abort.abort();
|
||
};
|
||
}, [activeGroup?.id, groupId, notifyBrowserForEvent]);
|
||
|
||
const sidebarGroups = useMemo(() => {
|
||
const needle = query.toLowerCase();
|
||
const sidebarSpaces =
|
||
spaces.length > 0
|
||
? spaces.map((space) =>
|
||
space.id === bootstrapMe?.spaceId ? { ...space, bots, groups, botSections } : space,
|
||
)
|
||
: bootstrapMe
|
||
? [
|
||
{
|
||
id: bootstrapMe.spaceId,
|
||
name: "Personal",
|
||
isDefault: true,
|
||
hasContent: true,
|
||
canDelete: false,
|
||
bots,
|
||
groups,
|
||
botSections,
|
||
},
|
||
]
|
||
: [];
|
||
const showSpaceNames = sidebarSpaces.length > 1;
|
||
return sidebarSpaces.flatMap((space) => {
|
||
const visibleBots = space.bots.filter((bot) =>
|
||
`${bot.name} ${bot.title ?? ""} ${bot.preview ?? ""}`.toLowerCase().includes(needle),
|
||
);
|
||
const visibleGroups = space.groups.filter((group) =>
|
||
`${group.name} ${group.preview}`.toLowerCase().includes(needle),
|
||
);
|
||
const sections = groupBotsForSidebar(
|
||
[
|
||
...visibleBots.map((chat) => ({ kind: "bot" as const, chat })),
|
||
...visibleGroups.map((chat) => ({ kind: "group" as const, chat })),
|
||
].map((item) => ({ ...item, pinned: item.chat.pinned, sectionId: item.chat.sectionId })),
|
||
space.botSections,
|
||
).map((group, index) => ({
|
||
...group,
|
||
sectionId: group.key.startsWith("section:") ? group.key.slice("section:".length) : null,
|
||
key: showSpaceNames ? `space:${space.id}:${group.key}` : group.key,
|
||
title: showSpaceNames
|
||
? group.title
|
||
? `${space.name} · ${group.title}`
|
||
: space.name
|
||
: group.title,
|
||
showLock: showSpaceNames,
|
||
emptySpaceId: undefined as string | undefined,
|
||
spaceId: space.id,
|
||
spaceName: space.name,
|
||
canDeleteSpace: index === 0 && space.canDelete === true,
|
||
}));
|
||
if (sections.length > 0) return sections;
|
||
// Keep empty spaces selectable; chat clicks are the only switch control.
|
||
if (!showSpaceNames) return [];
|
||
if (needle && (space.bots.length > 0 || space.groups.length > 0)) return [];
|
||
return [
|
||
{
|
||
key: `space:${space.id}:empty`,
|
||
title: space.name,
|
||
bots: [],
|
||
sectionId: null,
|
||
showLock: true,
|
||
emptySpaceId: space.id,
|
||
spaceId: space.id,
|
||
spaceName: space.name,
|
||
canDeleteSpace: space.canDelete === true,
|
||
},
|
||
];
|
||
});
|
||
}, [bootstrapMe, botSections, bots, groups, spaces, query]);
|
||
|
||
const hauptthreadGroup = useMemo(
|
||
() => groups.find((g) => g.name === "Hauptthread" || g.name === "Team Chat"),
|
||
[groups],
|
||
);
|
||
|
||
const homeSpaceBots = useMemo(() => {
|
||
if (!homeSpaceId) return bots;
|
||
const home = spaces.find((space) => space.id === homeSpaceId);
|
||
return home?.bots ?? bots;
|
||
}, [bots, homeSpaceId, spaces]);
|
||
|
||
const conversationSidebarGroups = useMemo(() => {
|
||
if (!homeSpaceId) return [];
|
||
return sidebarGroups
|
||
.filter((group) => group.spaceId === homeSpaceId)
|
||
.map((group) => ({
|
||
...group,
|
||
title: stripSpaceTitlePrefix(group.title, group.spaceName),
|
||
showLock: false,
|
||
bots: group.bots.filter((item) => item.kind === "bot"),
|
||
}))
|
||
.filter((group) => group.bots.length > 0);
|
||
}, [homeSpaceId, sidebarGroups]);
|
||
|
||
const projectSidebarGroups = useMemo(() => {
|
||
if (!homeSpaceId) return [];
|
||
const entries: typeof sidebarGroups = [];
|
||
const seenProjectSpaceIds = new Set<string>();
|
||
const seenProjectGroupChatIds = new Set<string>();
|
||
|
||
const dedupeSidebarBots = (bots: (typeof sidebarGroups)[number]["bots"]) => {
|
||
const seen = new Set<string>();
|
||
return bots.filter((item) => {
|
||
const key = `${item.kind}:${item.chat.id}`;
|
||
if (seen.has(key)) return false;
|
||
seen.add(key);
|
||
return true;
|
||
});
|
||
};
|
||
|
||
for (const space of spaces) {
|
||
if (space.id === homeSpaceId || seenProjectSpaceIds.has(space.id)) continue;
|
||
seenProjectSpaceIds.add(space.id);
|
||
const groupsInSpace = sidebarGroups.flatMap((group) =>
|
||
group.spaceId === space.id
|
||
? group.bots.filter(
|
||
(item) => item.kind === "group" && item.chat.id !== hauptthreadGroup?.id,
|
||
)
|
||
: [],
|
||
);
|
||
const projectBots = dedupeSidebarBots(groupsInSpace);
|
||
entries.push({
|
||
key:
|
||
projectBots.length > 0 ? `project-space:${space.id}` : `project-space:${space.id}:empty`,
|
||
title: space.name,
|
||
bots: projectBots,
|
||
sectionId: null,
|
||
showLock: true,
|
||
emptySpaceId: projectBots.length > 0 ? undefined : space.id,
|
||
spaceId: space.id,
|
||
spaceName: space.name,
|
||
canDeleteSpace: space.canDelete === true,
|
||
});
|
||
}
|
||
|
||
for (const group of sidebarGroups) {
|
||
if (group.spaceId !== homeSpaceId) continue;
|
||
const groupChats = dedupeSidebarBots(
|
||
group.bots.filter((item) => item.kind === "group" && item.chat.id !== hauptthreadGroup?.id),
|
||
).filter((item) => {
|
||
if (seenProjectGroupChatIds.has(item.chat.id)) return false;
|
||
seenProjectGroupChatIds.add(item.chat.id);
|
||
return true;
|
||
});
|
||
if (groupChats.length === 0) continue;
|
||
entries.push({
|
||
...group,
|
||
title: stripSpaceTitlePrefix(group.title, group.spaceName),
|
||
showLock: false,
|
||
emptySpaceId: undefined,
|
||
bots: groupChats,
|
||
});
|
||
}
|
||
|
||
// Apply persisted drag-to-reorder order if present
|
||
if (projectOrder.length > 0) {
|
||
const orderMap = new Map(entries.map((e, i) => [e.spaceId, i]));
|
||
entries.sort((a, b) => {
|
||
const aInOrder = orderMap.has(a.spaceId);
|
||
const bInOrder = orderMap.has(b.spaceId);
|
||
if (aInOrder && bInOrder)
|
||
return (orderMap.get(a.spaceId) ?? 0) - (orderMap.get(b.spaceId) ?? 0);
|
||
if (aInOrder) return -1;
|
||
if (bInOrder) return 1;
|
||
return 0;
|
||
});
|
||
}
|
||
|
||
return entries;
|
||
}, [hauptthreadGroup?.id, homeSpaceId, sidebarGroups, spaces, projectOrder]);
|
||
|
||
// DnD handlers
|
||
const handleProjectDragEnd = useCallback(
|
||
(event: { active: { id: string | number }; over: { id: string | number } | null }) => {
|
||
if (!event.over) return;
|
||
const activeId = String(event.active.id);
|
||
const overId = String(event.over.id);
|
||
if (activeId === overId) return;
|
||
const sorted: any[] = [...projectSidebarGroups];
|
||
const activeIdx = sorted.findIndex((g) => g.spaceId === activeId);
|
||
const overIdx = sorted.findIndex((g) => g.spaceId === overId);
|
||
if (activeIdx === -1 || overIdx === -1) return;
|
||
const [moved] = sorted.splice(activeIdx, 1);
|
||
sorted.splice(overIdx, 0, moved);
|
||
const ids = sorted.map((g: any) => g.spaceId) as string[];
|
||
handleReorderProjects(ids);
|
||
},
|
||
[projectSidebarGroups, handleReorderProjects],
|
||
);
|
||
const handleProjectDragStart = useCallback((event: { active: { id: string | number } }) => {
|
||
setDraggedProjectId(String(event.active.id));
|
||
}, []);
|
||
|
||
const openSpaceChat = useCallback(
|
||
(spaceId: string, path: string) => {
|
||
setMobileSidebarOpen(false);
|
||
const previousSpaceId = selectedSpaceId();
|
||
// Persist the active space (including primary) so voice/RPC headers match the chat.
|
||
const selectionStored = selectSpace(spaceId);
|
||
if (!selectionStored) return;
|
||
const previousEffective = previousSpaceId ?? bootstrapMe?.spaceId;
|
||
const boundaryChanged = previousEffective !== spaceId;
|
||
// Soft-navigate within the same space; reload only when the auth boundary changes
|
||
// so bootstrapped bots/groups match the request header.
|
||
if (boundaryChanged) {
|
||
window.location.assign(path);
|
||
return;
|
||
}
|
||
navigate(path);
|
||
},
|
||
[bootstrapMe?.spaceId, navigate],
|
||
);
|
||
|
||
const openProjectStart = useCallback(
|
||
(spaceId: string, flow: "create" | "group") => {
|
||
setActiveNavPillar("projekte");
|
||
openSpaceChat(spaceId, `/app?project=start&flow=${flow}`);
|
||
},
|
||
[openSpaceChat],
|
||
);
|
||
|
||
const openConversationBot = useCallback(
|
||
(botId: string) => {
|
||
setConversationPickerOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
setActiveNavPillar("team");
|
||
const bot =
|
||
homeSpaceBots.find((item) => item.id === botId) ?? bots.find((item) => item.id === botId);
|
||
if (bot) {
|
||
openSpaceChat(bot.spaceId, `/app/${botId}`);
|
||
return;
|
||
}
|
||
navigate(`/app/${botId}`);
|
||
},
|
||
[bots, homeSpaceBots, navigate, openSpaceChat],
|
||
);
|
||
|
||
const flushBotOrder = useCallback(async () => {
|
||
if (savingBotOrderRef.current) return;
|
||
savingBotOrderRef.current = true;
|
||
try {
|
||
while (pendingBotOrderRef.current) {
|
||
const botIds = pendingBotOrderRef.current;
|
||
pendingBotOrderRef.current = null;
|
||
try {
|
||
await rpc.bots.reorder({ botIds });
|
||
} catch {
|
||
// Keep a newer order queued during this failed save; only roll back
|
||
// when nothing else is pending.
|
||
if (pendingBotOrderRef.current === null) {
|
||
await refreshBots(false, true).catch(() => undefined);
|
||
}
|
||
}
|
||
}
|
||
} finally {
|
||
savingBotOrderRef.current = false;
|
||
// A reorder may have arrived while saving=true and returned early.
|
||
if (pendingBotOrderRef.current) {
|
||
void flushBotOrder();
|
||
}
|
||
}
|
||
}, [refreshBots]);
|
||
const reorderRosterBot = useCallback(
|
||
(sourceId: string, targetId: string, groupBotIds: string[]) => {
|
||
if (!groupBotIds.includes(sourceId) || !groupBotIds.includes(targetId)) return;
|
||
const current = botsRef.current;
|
||
const reordered = reorderBotTo(current, sourceId, targetId);
|
||
if (reordered === current) return;
|
||
const next = [...reordered];
|
||
botOrderEpochRef.current += 1;
|
||
botsRef.current = next;
|
||
setBots(next);
|
||
pendingBotOrderRef.current = next.map((bot) => bot.id);
|
||
void flushBotOrder();
|
||
},
|
||
[flushBotOrder],
|
||
);
|
||
const toggleSidebarSection = useCallback(
|
||
(key: string) => {
|
||
setCollapsedSidebarSections((previous) => {
|
||
const next = new Set(previous);
|
||
if (next.has(key)) next.delete(key);
|
||
else next.add(key);
|
||
const storageKey = collapsedSidebarSectionsStorageKey(userId);
|
||
if (storageKey) {
|
||
try {
|
||
window.localStorage.setItem(storageKey, JSON.stringify([...next]));
|
||
} catch {
|
||
// Keep the UI usable when storage is unavailable.
|
||
}
|
||
}
|
||
return next;
|
||
});
|
||
},
|
||
[userId],
|
||
);
|
||
const spaceQuery = query.trim();
|
||
const showSpaceSearch = spaceQuery.length > 0;
|
||
|
||
useEffect(() => {
|
||
if (!showSpaceSearch) {
|
||
setSearchHits([]);
|
||
setSearchLoading(false);
|
||
return;
|
||
}
|
||
const abort = new AbortController();
|
||
const timer = window.setTimeout(() => {
|
||
setSearchLoading(true);
|
||
void rpc.search
|
||
.query({ q: spaceQuery })
|
||
.then((result) => {
|
||
if (!abort.signal.aborted) setSearchHits(result.hits);
|
||
})
|
||
.catch(() => {
|
||
if (!abort.signal.aborted) setSearchHits([]);
|
||
})
|
||
.finally(() => {
|
||
if (!abort.signal.aborted) setSearchLoading(false);
|
||
});
|
||
}, 200);
|
||
return () => {
|
||
abort.abort();
|
||
window.clearTimeout(timer);
|
||
};
|
||
}, [showSpaceSearch, Calendar, Settings, spaceQuery]);
|
||
|
||
async function jumpToSearchHit(hit: SearchHit) {
|
||
setQuery("");
|
||
setSearchHits([]);
|
||
const params = new URLSearchParams();
|
||
if (hit.messageId) params.set("m", hit.messageId);
|
||
if (hit.routineId) params.set("routine", hit.routineId);
|
||
navigate({
|
||
pathname: hit.groupId ? `/app/g/${hit.groupId}` : `/app/${hit.botId}`,
|
||
search: params.toString() ? `?${params.toString()}` : undefined,
|
||
});
|
||
}
|
||
|
||
async function jumpToMessage(target: { botId?: string; groupId?: string; messageId: string }) {
|
||
const threadTarget = searchHitThreadTarget(target);
|
||
const epoch = historyEpoch.current;
|
||
jumpGeneration.current += 1;
|
||
const jumpId = jumpGeneration.current;
|
||
const [snap, page] = await Promise.all([
|
||
rpc.threads.get(threadTarget),
|
||
rpc.threads.messages({ ...threadTarget, around: { messageId: target.messageId } }),
|
||
]);
|
||
// The epoch check drops a jump that raced a conversation clear (or a bot switch): applying
|
||
// the fetched page would pin deleted messages that every later refresh keeps restoring.
|
||
// jumpId drops an older jump that finished after a newer click.
|
||
if (epoch !== historyEpoch.current || jumpId !== jumpGeneration.current) return;
|
||
if (target.groupId && activeGroupId.current !== target.groupId) return;
|
||
if (target.botId && activeBotId.current !== target.botId) return;
|
||
const targetInPage = userVisibleMessages(page.messages, { includePeerReceipts: true }).some(
|
||
(message) => message.id === target.messageId,
|
||
);
|
||
expandedHistoryThread.current = targetInPage ? page.threadId : null;
|
||
pinnedAroundRef.current = targetInPage
|
||
? {
|
||
...threadTarget,
|
||
messageId: target.messageId,
|
||
threadId: page.threadId,
|
||
messages: page.messages,
|
||
olderCursor: page.olderCursor,
|
||
}
|
||
: null;
|
||
if (targetInPage) initiallyScrolledThread.current = page.threadId;
|
||
commitSnapshot({
|
||
...snap,
|
||
messages: targetInPage ? page.messages : snap.messages,
|
||
olderCursor: targetInPage ? page.olderCursor : snap.olderCursor,
|
||
});
|
||
if (threadTarget.botId) {
|
||
commitComputer(snap.computer ?? null);
|
||
// Don't block parent-scroll on routines metadata; a list failure must not abort the jump.
|
||
void rpc.routines
|
||
.list({ botId: threadTarget.botId })
|
||
.then((routines) => {
|
||
if (epoch !== historyEpoch.current || jumpId !== jumpGeneration.current) return;
|
||
if (activeBotId.current !== threadTarget.botId) return;
|
||
setRoutines(routines);
|
||
setRoutinesBotId(threadTarget.botId);
|
||
})
|
||
.catch(() => undefined);
|
||
} else {
|
||
commitComputer(null);
|
||
setRoutines([]);
|
||
setRoutinesBotId(null);
|
||
}
|
||
window.requestAnimationFrame(() => {
|
||
if (epoch !== historyEpoch.current || jumpId !== jumpGeneration.current) return;
|
||
if (!targetInPage) {
|
||
const element = messageScroll.current;
|
||
if (element) {
|
||
element.scrollTop = element.scrollHeight;
|
||
initiallyScrolledThread.current = page.threadId;
|
||
}
|
||
return;
|
||
}
|
||
document
|
||
.querySelector(`[data-message-id="${target.messageId}"]`)
|
||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
});
|
||
}
|
||
|
||
useEffect(() => {
|
||
const messageId = searchParams.get("m");
|
||
const routineId = searchParams.get("routine");
|
||
if (inGroup && groupId && messageId) {
|
||
void jumpToMessage({ groupId, messageId }).finally(() => {
|
||
// Keep expandedHistoryThread; only strip the jump URL so refresh does not remount.
|
||
const next = new URLSearchParams(searchParams);
|
||
next.delete("m");
|
||
setSearchParams(next, { replace: true });
|
||
});
|
||
return;
|
||
}
|
||
if (!active) return;
|
||
if (routineId && routinesBotId === active.id) {
|
||
const routine = routines.find((item) => item.id === routineId);
|
||
if (routine) {
|
||
setRoutineDraft(draftFromRoutine(routine));
|
||
setRoutineWebhookSecret(null);
|
||
setEditingRoutine(routine);
|
||
setPanel("routine");
|
||
} else {
|
||
setPanel("computer");
|
||
}
|
||
const next = new URLSearchParams(searchParams);
|
||
next.delete("routine");
|
||
setSearchParams(next, { replace: true });
|
||
}
|
||
if (messageId) {
|
||
void jumpToMessage({ botId: active.id, messageId }).finally(() => {
|
||
const next = new URLSearchParams(searchParams);
|
||
next.delete("m");
|
||
setSearchParams(next, { replace: true });
|
||
});
|
||
}
|
||
}, [active?.id, groupId, inGroup, routines, routinesBotId, searchParams, setSearchParams]);
|
||
|
||
useEffect(() => {
|
||
if (!inGroup || !groupId || !projectSessionKey || projectSessionKey === "live") return;
|
||
void jumpToMessage({ groupId, messageId: projectSessionKey });
|
||
}, [groupId, inGroup, projectSessionKey]);
|
||
|
||
useEffect(() => {
|
||
if (!botId && !groupId && emptyProjectSpace && initialBotsLoaded) {
|
||
setActiveNavPillar("projekte");
|
||
}
|
||
}, [botId, emptyProjectSpace, groupId, initialBotsLoaded]);
|
||
|
||
useEffect(() => {
|
||
if (searchParams.get("project") !== "start" || !emptyProjectSpace || !initialBotsLoaded) {
|
||
return;
|
||
}
|
||
setActiveNavPillar("projekte");
|
||
const flow = searchParams.get("flow");
|
||
setPanel(
|
||
flow === "create"
|
||
? "create"
|
||
: flow === "group" && homeSpaceBots.length > 0
|
||
? "create-group"
|
||
: flow === "group"
|
||
? "create"
|
||
: bots.length === 0
|
||
? "create"
|
||
: "create-group",
|
||
);
|
||
const next = new URLSearchParams(searchParams);
|
||
next.delete("project");
|
||
next.delete("flow");
|
||
setSearchParams(next, { replace: true });
|
||
}, [
|
||
bots.length,
|
||
emptyProjectSpace,
|
||
homeSpaceBots.length,
|
||
initialBotsLoaded,
|
||
searchParams,
|
||
setSearchParams,
|
||
]);
|
||
|
||
const activeSnapshot = inGroup
|
||
? snapshot?.groupId === groupId
|
||
? snapshot
|
||
: null
|
||
: snapshot?.botId === active?.id
|
||
? snapshot
|
||
: null;
|
||
const activeReplyTarget =
|
||
replyTarget && activeSnapshot?.messages.some((message) => message.id === replyTarget.id)
|
||
? replyTarget
|
||
: null;
|
||
const activeReplyQuote = activeReplyTarget ? replyQuote : null;
|
||
const clearReply = useCallback(() => {
|
||
setReplyTarget(null);
|
||
setReplyQuote(null);
|
||
}, []);
|
||
const currentRuns = useMemo(() => activeThreadRuns(activeSnapshot), [activeSnapshot]);
|
||
const answerableAskMessageId = latestAnswerableAskMessageId(activeSnapshot);
|
||
const workingRuns = useMemo(
|
||
() => currentRuns.filter((run) => isWorkingRunStatus(run.status)),
|
||
[currentRuns],
|
||
);
|
||
const transcriptRunning = workingRuns.length > 0;
|
||
const composerRunning = currentRuns.some((run) => isActive(run.status));
|
||
const runError = threadRunError(activeSnapshot, dismissedRunErrorIds);
|
||
const displayedRunError = !sendError ? runError : null;
|
||
const displayedRunErrorId = displayedRunError ? (activeSnapshot?.run?.id ?? null) : null;
|
||
const handleRunErrorPresented = useCallback((runId: string) => {
|
||
rememberSeenRunErrorId(runId);
|
||
}, []);
|
||
const transcriptMessages = useMemo(
|
||
() => userVisibleMessages(activeSnapshot?.messages ?? [], { includePeerReceipts: true }),
|
||
[activeSnapshot?.messages],
|
||
);
|
||
const transcriptArtifactTarget = useMemo<ArtifactTarget>(
|
||
() => (inGroup ? { groupId: groupId ?? "" } : { botId: active?.id ?? "" }),
|
||
[active?.id, groupId, inGroup],
|
||
);
|
||
const transcriptMembers = activeSnapshot?.members ?? activeGroup?.members;
|
||
const resolveTranscriptBot = useCallback(
|
||
(botId: string) => {
|
||
const bot = bots.find((candidate) => candidate.id === botId);
|
||
if (bot) return bot;
|
||
return transcriptMembers?.find((member) => member.botId === botId);
|
||
},
|
||
[bots, transcriptMembers],
|
||
);
|
||
const enrichStageMember = useCallback(
|
||
(botId: string) => {
|
||
const bot = resolveTranscriptBot(botId);
|
||
if (!bot || !("title" in bot)) return undefined;
|
||
return {
|
||
title: bot.title,
|
||
description: bot.description,
|
||
};
|
||
},
|
||
[resolveTranscriptBot],
|
||
);
|
||
const workingBots: GroupAvatarMember[] = useMemo(() => {
|
||
if (!inGroup) {
|
||
return workingRuns.map((run) => {
|
||
const bot = resolveTranscriptBot(run.botId);
|
||
return {
|
||
botId: run.botId,
|
||
color: bot?.color ?? FALLBACK_BOT_COLOR,
|
||
name: bot?.name,
|
||
status: run.status,
|
||
};
|
||
});
|
||
}
|
||
return resolveWorkingGroupBots(activeSnapshot, enrichStageMember).map((member) => ({
|
||
botId: member.botId,
|
||
color: member.color,
|
||
name: member.name,
|
||
status: member.status,
|
||
}));
|
||
}, [activeSnapshot, enrichStageMember, inGroup, resolveTranscriptBot, workingRuns]);
|
||
|
||
// Working bots → browser preview activity cursors
|
||
useEffect(() => {
|
||
if (workingBots.length === 0) return;
|
||
for (const bot of workingBots) {
|
||
if (!bot.botId) continue;
|
||
const label = bot.name ?? bot.botId.slice(0, 8);
|
||
browserPreviewActivity.set(bot.botId, 50, 40, label);
|
||
}
|
||
const activeBotIds = new Set(workingBots.map((b) => b.botId).filter(Boolean));
|
||
for (const id of browserPreviewActivity.snapshot().keys()) {
|
||
if (!activeBotIds.has(id)) browserPreviewActivity.clear(id);
|
||
}
|
||
}, [workingBots]);
|
||
|
||
const encounterMode = Boolean((active || activeGroup) && !showProjectTimeline && !callOpen);
|
||
const voiceEncounterActive = encounterMode || callOpen || voiceEntry;
|
||
const voiceCallBot = useMemo(() => {
|
||
if (active) return active;
|
||
if (!inGroup || !activeSnapshot) return undefined;
|
||
const speaker = resolveActiveGroupSpeaker(
|
||
activeSnapshot,
|
||
resolveWorkingGroupBots(activeSnapshot, enrichStageMember),
|
||
enrichStageMember,
|
||
);
|
||
if (!speaker) return undefined;
|
||
const bot = resolveTranscriptBot(speaker.botId);
|
||
if (!bot) return undefined;
|
||
const title = "title" in bot ? bot.title : (speaker.title ?? "");
|
||
const description = "description" in bot ? bot.description : (speaker.description ?? "");
|
||
return {
|
||
id: speaker.botId,
|
||
name: speaker.name,
|
||
title,
|
||
description,
|
||
color: speaker.color,
|
||
status: speaker.status ?? ("status" in bot ? bot.status : undefined),
|
||
};
|
||
}, [active, activeSnapshot, enrichStageMember, inGroup, resolveTranscriptBot]);
|
||
|
||
const voiceSetupPrompted = useRef(false);
|
||
useEffect(() => {
|
||
if (!voiceEntry || showProjectTimeline || callOpen) return;
|
||
if (!voiceCallBot) return;
|
||
if (voiceStatus?.ready) {
|
||
voiceSetupPrompted.current = false;
|
||
setCallOpen(true);
|
||
return;
|
||
}
|
||
if (voiceSetupPrompted.current) return;
|
||
voiceSetupPrompted.current = true;
|
||
openSettings("voice");
|
||
}, [voiceEntry, showProjectTimeline, callOpen, voiceCallBot, voiceStatus?.ready]);
|
||
|
||
const prevTranscriptRunning = useRef(false);
|
||
const prevRunErrorId = useRef<string | null>(null);
|
||
const seenHandoffKeys = useRef(new Set<string>());
|
||
const appSoundStarted = useRef(false);
|
||
const prevBotStatuses = useRef(new Map<string, string>());
|
||
|
||
useEffect(() => wireOoAudioVoiceDucking(), []);
|
||
|
||
useEffect(() => {
|
||
if (appSoundStarted.current) return;
|
||
appSoundStarted.current = true;
|
||
ooSound.play("app-start");
|
||
window.setTimeout(() => ooVoiceMark.maybePlayColdOpen(), 280);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
let timer: number | undefined;
|
||
|
||
const tick = async () => {
|
||
try {
|
||
const [active, recent] = await Promise.all([
|
||
rpc.runs.list({ filter: "active" }),
|
||
rpc.runs.list({ filter: "recent" }),
|
||
]);
|
||
if (cancelled) return;
|
||
const brief = buildHeuteBrief({
|
||
bots: botsRef.current,
|
||
groups,
|
||
activeRuns: active.runs,
|
||
recentRuns: recent.runs,
|
||
});
|
||
setHeuteActionCount(brief.actionCount);
|
||
} catch {
|
||
if (cancelled) return;
|
||
} finally {
|
||
if (!cancelled) {
|
||
timer = window.setTimeout(() => void tick(), 15_000);
|
||
}
|
||
}
|
||
};
|
||
|
||
void tick();
|
||
return () => {
|
||
cancelled = true;
|
||
if (timer !== undefined) window.clearTimeout(timer);
|
||
};
|
||
}, [groups]);
|
||
|
||
useEffect(() => {
|
||
for (const bot of bots) {
|
||
const prev = prevBotStatuses.current.get(bot.id);
|
||
if (
|
||
prev !== bot.status &&
|
||
(bot.status === "waiting_input" || bot.status === "waiting_takeover")
|
||
) {
|
||
ooSound.play("need-you");
|
||
ooVocals.reactForEvent("need-you");
|
||
}
|
||
prevBotStatuses.current.set(bot.id, bot.status);
|
||
}
|
||
}, [bots]);
|
||
|
||
useEffect(() => {
|
||
if (prevTranscriptRunning.current && !transcriptRunning && !callOpen) {
|
||
ooSound.play("success-resolve");
|
||
ooVocals.reactForEvent("success");
|
||
}
|
||
prevTranscriptRunning.current = transcriptRunning;
|
||
}, [transcriptRunning, callOpen]);
|
||
|
||
useEffect(() => {
|
||
const runId = displayedRunErrorId;
|
||
if (runId && runId !== prevRunErrorId.current) {
|
||
ooSound.play("attention");
|
||
}
|
||
prevRunErrorId.current = runId;
|
||
}, [displayedRunErrorId]);
|
||
|
||
const seenGroupSparkKeys = useRef(new Set<string>());
|
||
|
||
useEffect(() => {
|
||
for (const message of activeSnapshot?.messages ?? []) {
|
||
for (const block of message.blocks) {
|
||
if (block.kind === "handoff") {
|
||
const key = `${message.id}:handoff:${block.toBotId}`;
|
||
if (seenHandoffKeys.current.has(key)) continue;
|
||
seenHandoffKeys.current.add(key);
|
||
if (seenHandoffKeys.current.size > 80) {
|
||
const oldest = seenHandoffKeys.current.values().next().value;
|
||
if (oldest !== undefined) seenHandoffKeys.current.delete(oldest);
|
||
}
|
||
ooSound.play("handoff");
|
||
continue;
|
||
}
|
||
if (inGroup && block.kind === "bot_message_received") {
|
||
const key = `${message.id}:peer:${block.fromBotId}`;
|
||
if (seenGroupSparkKeys.current.has(key)) continue;
|
||
seenGroupSparkKeys.current.add(key);
|
||
if (seenGroupSparkKeys.current.size > 80) {
|
||
const oldest = seenGroupSparkKeys.current.values().next().value;
|
||
if (oldest !== undefined) seenGroupSparkKeys.current.delete(oldest);
|
||
}
|
||
ooSound.play("group-spark");
|
||
}
|
||
}
|
||
}
|
||
}, [activeSnapshot?.messages, inGroup]);
|
||
|
||
const resolveTranscriptMemberName = useCallback(
|
||
(botId: string | undefined) => memberName(transcriptMembers, botId),
|
||
[transcriptMembers],
|
||
);
|
||
const replyTargetName = activeReplyTarget
|
||
? activeReplyTarget.role === "user"
|
||
? t`You`
|
||
: (resolveTranscriptMemberName(activeReplyTarget.botId) ?? active?.name ?? t`Bot`)
|
||
: undefined;
|
||
const composerMentionTargets = useMemo(() => {
|
||
const mentionBots = new Map(
|
||
bots.map((bot) => [bot.id, { id: bot.id, name: bot.name, color: bot.color }]),
|
||
);
|
||
// Group members stay mentionable when the sidebar bot list is still catching up
|
||
// after creating the group and remounting the shell.
|
||
if (inGroup) {
|
||
for (const member of [...(activeGroup?.members ?? []), ...(activeSnapshot?.members ?? [])]) {
|
||
if (!mentionBots.has(member.botId)) {
|
||
mentionBots.set(member.botId, {
|
||
id: member.botId,
|
||
name: member.name,
|
||
color: member.color,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
return buildComposerMentionOptions({
|
||
query: "",
|
||
includeEveryone: inGroup,
|
||
currentGroupId: groupId,
|
||
bots: [...mentionBots.values()],
|
||
groups: groups.map((group) => ({ id: group.id, name: group.name })),
|
||
routines: mentionRoutines.map((routine) => ({
|
||
id: routine.id,
|
||
name: routine.name,
|
||
crons: routine.crons,
|
||
botId: routine.botId,
|
||
botName: routine.botName,
|
||
})),
|
||
connectors: mentionConnectors,
|
||
});
|
||
}, [
|
||
activeGroup?.members,
|
||
activeSnapshot?.members,
|
||
bots,
|
||
groupId,
|
||
groups,
|
||
inGroup,
|
||
mentionConnectors,
|
||
mentionRoutines,
|
||
]);
|
||
const shellReady =
|
||
initialBotsLoaded &&
|
||
(inGroup
|
||
? Boolean(activeGroup && activeSnapshot)
|
||
: bots.length === 0 || Boolean(active && activeSnapshot));
|
||
const refreshThreadRef = useRef(refreshThread);
|
||
refreshThreadRef.current = refreshThread;
|
||
const refreshGroupThreadRef = useRef(refreshGroupThread);
|
||
refreshGroupThreadRef.current = refreshGroupThread;
|
||
const loadOlderMessagesRef = useRef(loadOlderMessages);
|
||
loadOlderMessagesRef.current = loadOlderMessages;
|
||
const jumpToMessageRef = useRef(jumpToMessage);
|
||
jumpToMessageRef.current = jumpToMessage;
|
||
|
||
const mentionBotsKey = useMemo(
|
||
() => bots.map((bot) => `${bot.id}:${bot.name}`).join(","),
|
||
[bots],
|
||
);
|
||
const botsForMentionsRef = useRef(bots);
|
||
botsForMentionsRef.current = bots;
|
||
|
||
useEffect(() => {
|
||
const bots = botsForMentionsRef.current;
|
||
if (!initialBotsLoaded || bots.length === 0) {
|
||
setMentionRoutines([]);
|
||
setMentionConnectors([]);
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
const botNameById = new Map(bots.map((bot) => [bot.id, bot.name]));
|
||
void Promise.all(
|
||
bots.map((bot) =>
|
||
rpc.routines
|
||
.list({ botId: bot.id })
|
||
.then((rows) =>
|
||
rows.map((routine) => ({
|
||
...routine,
|
||
botName: botNameById.get(bot.id) ?? bot.name,
|
||
})),
|
||
)
|
||
.catch(() => [] as Array<Routine & { botName?: string }>),
|
||
),
|
||
).then((lists) => {
|
||
if (!cancelled) setMentionRoutines(lists.flat());
|
||
});
|
||
void Promise.all([
|
||
rpc.connections.list().catch(() => [] as Connection[]),
|
||
rpc.connections.catalog({}).catch(() => [] as ConnectionCatalogItem[]),
|
||
]).then(([connections, catalog]) => {
|
||
if (cancelled) return;
|
||
const connected = connections.filter((row) => row.status === "connected");
|
||
const options: Array<{
|
||
id: string;
|
||
name: string;
|
||
authStatus: "connected" | "needs_auth";
|
||
connectionId?: string;
|
||
}> = connected.map((row) => ({
|
||
id: row.id,
|
||
name: row.displayName,
|
||
authStatus: "connected" as const,
|
||
connectionId: row.id,
|
||
}));
|
||
for (const item of catalog) {
|
||
if (item.connected || item.noAuth) continue;
|
||
if (
|
||
connected.some(
|
||
(row) =>
|
||
row.provider.toLowerCase() === item.slug.toLowerCase() ||
|
||
row.displayName.toLowerCase() === item.name.toLowerCase(),
|
||
)
|
||
) {
|
||
continue;
|
||
}
|
||
options.push({
|
||
id: `catalog:${item.connectorId}:${item.slug}`,
|
||
name: item.name,
|
||
authStatus: "needs_auth",
|
||
});
|
||
}
|
||
setMentionConnectors(options);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [initialBotsLoaded, mentionBotsKey]);
|
||
|
||
useLayoutEffect(() => {
|
||
if (initialBotsLoaded) {
|
||
markOnce("rk:renderer:bots-committed");
|
||
markAfterPaint("rk:renderer:bots-painted");
|
||
}
|
||
if (active && snapshot?.botId === active.id) {
|
||
markOnce("rk:renderer:thread-committed");
|
||
markAfterPaint("rk:renderer:thread-painted");
|
||
}
|
||
if (shellReady) {
|
||
markOnce("rk:renderer:shell-ready");
|
||
markAfterPaint("rk:renderer:shell-painted");
|
||
}
|
||
}, [active, initialBotsLoaded, shellReady, snapshot?.botId]);
|
||
|
||
useLayoutEffect(() => {
|
||
const pin = pinnedAroundRef.current;
|
||
if (inGroup) {
|
||
if (!groupId || !snapshot || snapshot.groupId !== groupId) return;
|
||
if (initiallyScrolledThread.current === snapshot.threadId) return;
|
||
if (expandedHistoryThread.current === snapshot.threadId) return;
|
||
if (pin?.groupId === groupId) return;
|
||
} else {
|
||
if (!active || !snapshot || snapshot.botId !== active.id) return;
|
||
if (initiallyScrolledThread.current === snapshot.threadId) return;
|
||
if (expandedHistoryThread.current === snapshot.threadId) return;
|
||
if (pin?.botId === active.id) return;
|
||
}
|
||
const element = messageScroll.current;
|
||
if (!element) return;
|
||
element.scrollTop = element.scrollHeight;
|
||
initiallyScrolledThread.current = snapshot.threadId;
|
||
}, [active, groupId, inGroup, snapshot?.botId, snapshot?.groupId, snapshot?.threadId]);
|
||
|
||
const openBot = useCallback((id: string) => navigate(`/app/${id}`), [navigate]);
|
||
const openGroup = useCallback(
|
||
(id: string) => {
|
||
setActiveNavPillar("projekte");
|
||
navigate(`/app/g/${id}`);
|
||
},
|
||
[navigate],
|
||
);
|
||
const openProjectSession = useCallback(
|
||
(sourceMessageId: string) => {
|
||
const next = new URLSearchParams(searchParams);
|
||
next.set("s", sourceMessageId);
|
||
setSearchParams(next, { replace: true });
|
||
},
|
||
[searchParams, setSearchParams],
|
||
);
|
||
const openProjectChat = useCallback(() => {
|
||
const next = new URLSearchParams(searchParams);
|
||
next.set("s", "live");
|
||
setSearchParams(next, { replace: true });
|
||
}, [searchParams, setSearchParams]);
|
||
const openProjectGroupChat = useCallback(
|
||
(targetGroupId: string) => {
|
||
if (targetGroupId === groupId) {
|
||
openProjectChat();
|
||
return;
|
||
}
|
||
navigate(`/app/g/${targetGroupId}?s=live`);
|
||
},
|
||
[groupId, navigate, openProjectChat],
|
||
);
|
||
const clearVoiceEntryParam = useCallback(() => {
|
||
if (searchParams.get("voice") !== "1") return;
|
||
const next = new URLSearchParams(searchParams);
|
||
next.delete("voice");
|
||
setSearchParams(next, { replace: true });
|
||
}, [searchParams, setSearchParams]);
|
||
const openProjectVoiceFirst = useCallback(
|
||
(targetGroupId?: string) => {
|
||
const id = targetGroupId ?? groupId;
|
||
if (!id) return;
|
||
if (id === groupId) {
|
||
const next = new URLSearchParams(searchParams);
|
||
next.set("s", "live");
|
||
next.set("voice", "1");
|
||
setSearchParams(next, { replace: true });
|
||
return;
|
||
}
|
||
navigate(`/app/g/${id}?s=live&voice=1`);
|
||
},
|
||
[groupId, navigate, searchParams, setSearchParams],
|
||
);
|
||
const startVoiceEncounter = useCallback(() => {
|
||
if (voiceStatus?.ready) {
|
||
setCallOpen(true);
|
||
return;
|
||
}
|
||
openSettings("voice");
|
||
}, [voiceStatus?.ready]);
|
||
|
||
const closeProjectSession = useCallback(() => {
|
||
const next = new URLSearchParams(searchParams);
|
||
next.delete("s");
|
||
next.delete("voice");
|
||
setSearchParams(next, { replace: true });
|
||
}, [searchParams, setSearchParams]);
|
||
const closeVoiceStage = useCallback(() => {
|
||
setCallOpen(false);
|
||
clearVoiceEntryParam();
|
||
}, [clearVoiceEntryParam]);
|
||
const loadOlder = useCallback(() => loadOlderMessagesRef.current(), []);
|
||
const jumpToReplyMessage = useCallback((messageId: string) => {
|
||
const existing = document.querySelector(
|
||
`[data-message-id="${messageId.replace(/[^\w-]/g, (c) => `\\${c}`)}"]`,
|
||
);
|
||
if (existing) {
|
||
// Cancel any in-flight around-fetch so it cannot overwrite this scroll.
|
||
jumpGeneration.current += 1;
|
||
existing.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
return;
|
||
}
|
||
const groupId = activeGroupId.current;
|
||
if (groupId) {
|
||
void jumpToMessageRef.current({ groupId, messageId });
|
||
return;
|
||
}
|
||
const botId = activeBotId.current;
|
||
if (botId) void jumpToMessageRef.current({ botId, messageId });
|
||
}, []);
|
||
const answerMessage = useCallback(async (message: ThreadMessage, text: string) => {
|
||
const botId = activeBotId.current;
|
||
const groupId = activeGroupId.current;
|
||
if (!botId && !groupId) return;
|
||
await rpc.threads.answer({
|
||
...(groupId ? { groupId } : { botId: botId! }),
|
||
runId: message.runId ?? "",
|
||
messageId: message.id,
|
||
answer: text,
|
||
});
|
||
if (groupId && activeGroupId.current === groupId) {
|
||
await refreshGroupThreadRef.current(groupId);
|
||
} else if (botId && activeBotId.current === botId) {
|
||
await refreshThreadRef.current(botId);
|
||
}
|
||
}, []);
|
||
const reactToMessage = useCallback(
|
||
async (message: ThreadMessage, reaction: MessageReaction) => {
|
||
const botId = activeBotId.current;
|
||
const groupId = activeGroupId.current;
|
||
if (!botId && !groupId) return;
|
||
try {
|
||
await rpc.threads.react({
|
||
...(groupId ? { groupId } : { botId: botId! }),
|
||
messageId: message.id,
|
||
reaction,
|
||
clientNonce: newClientNonce(),
|
||
});
|
||
} catch (error) {
|
||
const stillHere = groupId
|
||
? activeGroupId.current === groupId
|
||
: activeBotId.current === botId;
|
||
if (!stillHere) return;
|
||
setSendError(error instanceof Error ? error.message : t`Could not update reaction`);
|
||
}
|
||
},
|
||
[t],
|
||
);
|
||
const onAttachmentPick = useCallback(
|
||
async (files: FileList | null) => {
|
||
const threadKey = activeGroupId.current ?? activeBotId.current;
|
||
if (!threadKey || !files?.length) return;
|
||
const existing = attachmentsForThread(pendingAttachments, threadKey);
|
||
const next: PendingAttachment[] = [];
|
||
const skipped: string[] = [];
|
||
for (const file of Array.from(files)) {
|
||
if (existing.length + next.length >= ATTACHMENT_MAX_COUNT) {
|
||
skipped.push(t`${file.name} (max ${ATTACHMENT_MAX_COUNT} attachments)`);
|
||
continue;
|
||
}
|
||
if (file.size > ATTACHMENT_MAX_BYTES) {
|
||
skipped.push(t`${file.name} (over 10 MiB)`);
|
||
continue;
|
||
}
|
||
const mimeType = inferAttachmentMimeType(file.name, file.type);
|
||
if (!mimeType) {
|
||
skipped.push(file.name);
|
||
continue;
|
||
}
|
||
next.push({
|
||
id: `${file.name}-${file.size}-${file.lastModified}-${next.length}`,
|
||
threadKey,
|
||
file,
|
||
previewUrl: mimeType.startsWith("image/") ? URL.createObjectURL(file) : undefined,
|
||
});
|
||
}
|
||
if (next.length) setPendingAttachments((current) => [...current, ...next]);
|
||
setAttachmentNotice(skipped.length ? t`Skipped ${skipped.join(", ")}` : null);
|
||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||
},
|
||
[pendingAttachments, t],
|
||
);
|
||
const removeAttachment = useCallback((attachment: PendingAttachment) => {
|
||
revokePendingAttachmentPreviews([attachment]);
|
||
setPendingAttachments((current) => current.filter((item) => item.id !== attachment.id));
|
||
}, []);
|
||
const sendMessage = useCallback(
|
||
async (text: string, mentions: ComposerMention[] = []) => {
|
||
const initialBotTarget = activeBotId.current;
|
||
const initialGroupTarget = activeGroupId.current;
|
||
if (!initialBotTarget && !initialGroupTarget) return;
|
||
const originThreadKey = initialGroupTarget ?? initialBotTarget;
|
||
const attachments = attachmentsForThread(pendingAttachments, originThreadKey);
|
||
const plan = resolveComposerSendPlan({
|
||
text,
|
||
mentions,
|
||
hasAttachments: attachments.length > 0,
|
||
});
|
||
if (plan.isNoOp) return;
|
||
const reroutedToGroup = Boolean(
|
||
plan.rerouteGroupId && plan.rerouteGroupId !== initialGroupTarget,
|
||
);
|
||
const groupTarget = plan.rerouteGroupId ?? initialGroupTarget;
|
||
const botTarget = reroutedToGroup ? undefined : initialBotTarget;
|
||
if (
|
||
plan.shouldSend &&
|
||
(groupTarget || botsRef.current.find((bot) => bot.id === botTarget)?.notifyOnFinish)
|
||
) {
|
||
const permissionRequest = requestBrowserNotificationPermission();
|
||
if (permissionRequest) void permissionRequest.then(flushPendingBrowserNotifications);
|
||
}
|
||
const trimmed = plan.trimmed;
|
||
if (botTarget && !groupTarget && plan.shouldSend && attachments.length === 0) {
|
||
const voiceCmd = parseVoiceChatCommand(trimmed);
|
||
if (voiceCmd) {
|
||
setSendError(null);
|
||
setAttachmentNotice(null);
|
||
try {
|
||
const localVoiceToken = "local-kokoro";
|
||
if (voiceCmd.kind === "speak_off") {
|
||
await rpc.bots.update({ botId: botTarget, autoSpeak: false });
|
||
await refreshBots();
|
||
setAttachmentNotice(t`Speaking is off.`);
|
||
return;
|
||
}
|
||
if (voiceCmd.kind === "speak_on") {
|
||
await rpc.voice
|
||
.connect({ provider: "kokoro", apiKey: localVoiceToken })
|
||
.catch(() => undefined);
|
||
await rpc.bots.update({ botId: botTarget, autoSpeak: true });
|
||
await refreshBots();
|
||
void rpc.voice
|
||
.status()
|
||
.then(setVoiceStatus)
|
||
.catch(() => undefined);
|
||
setAttachmentNotice(t`Speaking is on.`);
|
||
return;
|
||
}
|
||
const voices = await rpc.voice.voices({});
|
||
const match = matchVoiceByName(voices, voiceCmd.voiceName);
|
||
if (!match) {
|
||
setSendError(t`Voice "${voiceCmd.voiceName}" not found.`);
|
||
return;
|
||
}
|
||
await rpc.voice
|
||
.connect({ provider: "kokoro", apiKey: localVoiceToken })
|
||
.catch(() => undefined);
|
||
await rpc.voice.setVoice({ voiceId: match.id, provider: "kokoro" });
|
||
await rpc.bots.update({ botId: botTarget, voiceId: match.id, autoSpeak: true });
|
||
await refreshBots();
|
||
void rpc.voice
|
||
.status()
|
||
.then(setVoiceStatus)
|
||
.catch(() => undefined);
|
||
setAttachmentNotice(t`Voice set to ${match.label}.`);
|
||
return;
|
||
} catch (error) {
|
||
setSendError(error instanceof Error ? error.message : t`Could not update voice`);
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
sendsInFlight.current += 1;
|
||
setSending(true);
|
||
setSendError(null);
|
||
const dropDelayedSetup = () => {
|
||
// Only after successful engagement so a failed upload/send keeps the setup card.
|
||
if (initialBotTarget && focusPromptBotIdRef.current === initialBotTarget) {
|
||
cancelFocusPrompt();
|
||
}
|
||
};
|
||
try {
|
||
if (plan.shouldRunRoutines) {
|
||
const sendNonce = newClientNonce();
|
||
await Promise.all(
|
||
plan.routineIds.map((routineId) =>
|
||
rpc.routines.testRun({
|
||
routineId,
|
||
clientNonce: `routine-mention:${sendNonce}:${routineId}`,
|
||
}),
|
||
),
|
||
);
|
||
}
|
||
if (!plan.shouldSend) {
|
||
dropDelayedSetup();
|
||
clearReply();
|
||
revokePendingAttachmentPreviews(attachments);
|
||
setPendingAttachments((current) =>
|
||
current.filter((attachment) => attachment.threadKey !== originThreadKey),
|
||
);
|
||
setAttachmentNotice(null);
|
||
if (reroutedToGroup && groupTarget) {
|
||
navigate(`/app/g/${groupTarget}`);
|
||
return;
|
||
}
|
||
if (groupTarget && activeGroupId.current === groupTarget) {
|
||
await refreshGroupThreadRef.current(groupTarget);
|
||
} else if (botTarget && activeBotId.current === botTarget) {
|
||
await refreshThreadRef.current(botTarget);
|
||
}
|
||
return;
|
||
}
|
||
const artifactIds: string[] = [];
|
||
for (const pending of attachments) {
|
||
const mimeType = inferAttachmentMimeType(pending.file.name, pending.file.type);
|
||
if (!mimeType) {
|
||
throw new Error(t`Unsupported file type: ${pending.file.name}`);
|
||
}
|
||
const contentBase64 = await readFileAsBase64(pending.file);
|
||
const artifact = await rpc.artifacts.create(
|
||
groupTarget
|
||
? { groupId: groupTarget, name: pending.file.name, mimeType, contentBase64 }
|
||
: { botId: botTarget!, name: pending.file.name, mimeType, contentBase64 },
|
||
);
|
||
artifactIds.push(artifact.id);
|
||
}
|
||
const clientNonce = newClientNonce();
|
||
if (groupTarget) {
|
||
await rpc.threads.send({
|
||
groupId: groupTarget,
|
||
clientNonce,
|
||
text: trimmed || undefined,
|
||
mentions: plan.mentionPayload.length ? plan.mentionPayload : undefined,
|
||
artifactIds: artifactIds.length ? artifactIds : undefined,
|
||
replyToMessageId: reroutedToGroup ? undefined : activeReplyTarget?.id,
|
||
replyQuote: reroutedToGroup ? undefined : (activeReplyQuote ?? undefined),
|
||
});
|
||
} else if (botTarget) {
|
||
const sent = await rpc.threads.send({
|
||
botId: botTarget,
|
||
clientNonce,
|
||
text: trimmed || undefined,
|
||
mentions: plan.mentionPayload.length ? plan.mentionPayload : undefined,
|
||
artifactIds: artifactIds.length ? artifactIds : undefined,
|
||
replyToMessageId: activeReplyTarget?.id,
|
||
replyQuote: activeReplyQuote ?? undefined,
|
||
});
|
||
if (activeBotId.current === botTarget) {
|
||
updateSnapshot((current) =>
|
||
applyThreadSendReceipt(
|
||
current,
|
||
{
|
||
botId: botTarget,
|
||
runId: sent.runId,
|
||
taskId: sent.taskId,
|
||
},
|
||
terminalRunReceipts.current,
|
||
),
|
||
);
|
||
}
|
||
}
|
||
ooSound.play("message-sent");
|
||
dropDelayedSetup();
|
||
clearReply();
|
||
revokePendingAttachmentPreviews(attachments);
|
||
setPendingAttachments((current) =>
|
||
current.filter((attachment) => attachment.threadKey !== originThreadKey),
|
||
);
|
||
// Refresh sidebar status even when a bot→group reroute navigates away below.
|
||
void refreshBots().catch(() => undefined);
|
||
if (reroutedToGroup && groupTarget) {
|
||
navigate(`/app/g/${groupTarget}`);
|
||
return;
|
||
}
|
||
if (groupTarget && activeGroupId.current === groupTarget) setAttachmentNotice(null);
|
||
if (botTarget && activeBotId.current === botTarget) setAttachmentNotice(null);
|
||
if (groupTarget) await refreshGroupThreadRef.current(groupTarget);
|
||
else if (botTarget) await refreshThreadRef.current(botTarget);
|
||
} catch (error) {
|
||
if (reroutedToGroup && groupTarget) {
|
||
setSendError(error instanceof Error ? error.message : t`Failed to send message`);
|
||
} else if (groupTarget && activeGroupId.current === groupTarget) {
|
||
setSendError(error instanceof Error ? error.message : t`Failed to send message`);
|
||
} else if (botTarget && activeBotId.current === botTarget) {
|
||
setSendError(error instanceof Error ? error.message : t`Failed to send message`);
|
||
}
|
||
} finally {
|
||
sendsInFlight.current = Math.max(0, sendsInFlight.current - 1);
|
||
if (sendsInFlight.current === 0) setSending(false);
|
||
}
|
||
},
|
||
[
|
||
activeReplyTarget?.id,
|
||
activeReplyQuote,
|
||
clearReply,
|
||
flushPendingBrowserNotifications,
|
||
navigate,
|
||
pendingAttachments,
|
||
refreshBots,
|
||
t,
|
||
],
|
||
);
|
||
const followUpMessage = useCallback(async (text: string) => {
|
||
const groupTarget = activeGroupId.current;
|
||
if (groupTarget) {
|
||
await rpc.threads.followUp({ groupId: groupTarget, text });
|
||
await refreshGroupThreadRef.current(groupTarget);
|
||
return;
|
||
}
|
||
const id = activeBotId.current;
|
||
if (!id) return;
|
||
await rpc.threads.followUp({ botId: id, text });
|
||
await refreshThreadRef.current(id);
|
||
}, []);
|
||
const stopRun = useCallback(async () => {
|
||
if (sending) return;
|
||
setSending(true);
|
||
try {
|
||
const botTarget = activeBotId.current;
|
||
const groupTarget = activeGroupId.current;
|
||
if (groupTarget) {
|
||
setSendError(null);
|
||
try {
|
||
await rpc.threads.stop({ groupId: groupTarget });
|
||
} catch (error) {
|
||
if (activeGroupId.current === groupTarget) {
|
||
setSendError(error instanceof Error ? error.message : t`Failed to stop`);
|
||
}
|
||
return;
|
||
}
|
||
// Stop has no terminal event; clear run UI before refresh races with in-flight gets.
|
||
if (activeGroupId.current === groupTarget) {
|
||
updateSnapshot((prev) =>
|
||
prev && prev.groupId === groupTarget ? clearActiveThreadRuns(prev) : prev,
|
||
);
|
||
}
|
||
await refreshGroupThreadRef.current(groupTarget).catch(() => undefined);
|
||
return;
|
||
}
|
||
if (!botTarget) return;
|
||
setSendError(null);
|
||
try {
|
||
await rpc.threads.stop({ botId: botTarget });
|
||
} catch (error) {
|
||
if (activeBotId.current === botTarget) {
|
||
setSendError(error instanceof Error ? error.message : t`Failed to stop`);
|
||
}
|
||
return;
|
||
}
|
||
// Stop does not emit a terminal thread event. Clear local run/busy immediately so a
|
||
// superseded in-flight refresh (older cursor) cannot leave Stop enabled / Take control
|
||
// blocked while the API is already idle.
|
||
if (activeBotId.current === botTarget) {
|
||
updateSnapshot((prev) =>
|
||
!prev || (prev.botId !== botTarget && prev.botId) ? prev : clearActiveThreadRuns(prev),
|
||
);
|
||
const currentComputer = computerRef.current;
|
||
if (currentComputer?.busyBotName) {
|
||
commitComputer({ ...currentComputer, busyBotName: null });
|
||
}
|
||
}
|
||
await refreshThreadRef.current(botTarget).catch(() => undefined);
|
||
} finally {
|
||
setSending(false);
|
||
}
|
||
}, [sending, t]);
|
||
const stopTeaching = useCallback(async () => {
|
||
const id = activeBotId.current;
|
||
if (!id || teachBusy) return;
|
||
const recording = taughtSkills.find(
|
||
(skill) => skill.status === "recording" && taughtSkillsBotId === id,
|
||
);
|
||
if (!recording) return;
|
||
setTeachBusy(true);
|
||
try {
|
||
await rpc.skills.stop({ skillId: recording.id });
|
||
await refreshThreadRef.current(id);
|
||
setComputerOpen(false);
|
||
} finally {
|
||
setTeachBusy(false);
|
||
}
|
||
}, [teachBusy, taughtSkills, taughtSkillsBotId]);
|
||
// Transcript and MessageView are memoized; these must stay referentially stable or every
|
||
// Shell state change re-renders the whole transcript.
|
||
const refreshActiveThread = useCallback(async () => {
|
||
const groupId = activeGroupId.current;
|
||
if (groupId) {
|
||
await refreshGroupThreadRef.current(groupId);
|
||
return;
|
||
}
|
||
const id = activeBotId.current;
|
||
if (!id) return;
|
||
await refreshThreadRef.current(id);
|
||
}, []);
|
||
// Teach chrome needs skills applied before this resolves — refreshThread only
|
||
// kicks skills.list off in the background, so Stop teaching would never mount
|
||
// if that background call failed or lagged behind local recovery.
|
||
const refreshActiveTeaching = useCallback(async () => {
|
||
const id = activeBotId.current;
|
||
if (!id) return;
|
||
await refreshThreadRef.current(id);
|
||
const skills = await rpc.skills.list({ botId: id });
|
||
if (activeBotId.current !== id) return;
|
||
setTaughtSkills(skills);
|
||
setTaughtSkillsBotId(id);
|
||
}, []);
|
||
const addSkillRoutine = useCallback((name: string, prompt: string) => {
|
||
setRoutineDraft({ ...emptyRoutineDraft(), name, prompt });
|
||
setRoutineWebhookSecret(null);
|
||
setEditingRoutine(null);
|
||
setPanel("routine");
|
||
}, []);
|
||
const speakingMessageIdRef = useRef(speakingMessageId);
|
||
speakingMessageIdRef.current = speakingMessageId;
|
||
const speakMessage = useCallback((message: ThreadMessage) => {
|
||
if (speakingMessageIdRef.current === message.id) {
|
||
speaker.stop();
|
||
return;
|
||
}
|
||
const text = speechFromBlocks(message.blocks);
|
||
const id = message.botId ?? activeBotId.current;
|
||
if (text && id) void speaker.speak(text, { botId: id, messageId: message.id });
|
||
}, []);
|
||
|
||
async function createGroup(input: { name: string; botIds: string[] }) {
|
||
const group = await rpc.groups.create(input);
|
||
setGroups((current) =>
|
||
current.some((item) => item.id === group.id) ? current : [group, ...current],
|
||
);
|
||
navigate(`/app/g/${group.id}`);
|
||
setPanel(null);
|
||
await refreshBots().catch(() => undefined);
|
||
}
|
||
|
||
function cancelFocusPrompt() {
|
||
focusPromptAbortRef.current?.abort();
|
||
focusPromptAbortRef.current = null;
|
||
focusPromptBotIdRef.current = null;
|
||
}
|
||
|
||
function setBotsSidebarCollapsedPref(collapsed: boolean) {
|
||
setBotsSidebarCollapsed(collapsed);
|
||
writeBotsSidebarCollapsed(userId, collapsed);
|
||
}
|
||
|
||
function openSettings(section: SettingsSection = "general") {
|
||
setSettingsSection(section);
|
||
setSettingsOpen(true);
|
||
}
|
||
|
||
async function createBot(input: {
|
||
name: string;
|
||
title: string;
|
||
description: string;
|
||
computerMode: ComputerMode;
|
||
}) {
|
||
const isFirstBot = botsRef.current.length === 0;
|
||
const bot = await rpc.bots.create({
|
||
...normalizeCreateBotProfile(input),
|
||
notifyOnFinish: true,
|
||
computerMode: input.computerMode,
|
||
});
|
||
setBots((current) =>
|
||
current.some((item) => item.id === bot.id) ? current : [bot, ...current],
|
||
);
|
||
navigate(`/app/${bot.id}`);
|
||
setPanel(null);
|
||
// Register cancellation before awaiting start so leaving the bot during
|
||
// startup cannot miss the abort and still schedule a late focus card.
|
||
cancelFocusPrompt();
|
||
const controller = new AbortController();
|
||
focusPromptAbortRef.current = controller;
|
||
focusPromptBotIdRef.current = bot.id;
|
||
const started = await rpc.onboarding
|
||
.start({ botId: bot.id })
|
||
.then(() => true)
|
||
.catch(() => false);
|
||
if (!started || controller.signal.aborted || focusPromptBotIdRef.current !== bot.id) {
|
||
if (focusPromptAbortRef.current === controller) {
|
||
focusPromptAbortRef.current = null;
|
||
focusPromptBotIdRef.current = null;
|
||
}
|
||
await refreshBots().catch(() => undefined);
|
||
return;
|
||
}
|
||
void scheduleFocusPrompt({
|
||
immediate: isFirstBot,
|
||
signal: controller.signal,
|
||
prompt: async () => {
|
||
if (focusPromptBotIdRef.current !== bot.id || activeBotId.current !== bot.id) return;
|
||
await rpc.onboarding.promptFocus({ botId: bot.id }).catch(() => undefined);
|
||
},
|
||
}).finally(() => {
|
||
if (focusPromptAbortRef.current === controller) {
|
||
focusPromptAbortRef.current = null;
|
||
focusPromptBotIdRef.current = null;
|
||
}
|
||
});
|
||
await refreshBots().catch(() => undefined);
|
||
}
|
||
|
||
async function bootComputer({
|
||
takeControl,
|
||
overlay,
|
||
force = false,
|
||
}: {
|
||
takeControl: boolean;
|
||
overlay: boolean;
|
||
force?: boolean;
|
||
}) {
|
||
if (!active) return;
|
||
const needsBoot = force || computer?.state !== "running" || !screenUrl;
|
||
if (overlay && needsBoot) setBooting(true);
|
||
setComputerError(null);
|
||
setComputerErrorFromScreen(false);
|
||
try {
|
||
if (needsBoot) await rpc.computer.boot({ botId: active.id });
|
||
if (takeControl) await rpc.computer.takeover({ botId: active.id });
|
||
await refreshThread(active.id);
|
||
} catch (error) {
|
||
setComputerError(error instanceof Error ? error.message : t`Could not take control`);
|
||
setComputerErrorFromScreen(false);
|
||
throw error;
|
||
} finally {
|
||
setBooting(false);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (panel !== "computer") {
|
||
autoBooted.current = null;
|
||
return;
|
||
}
|
||
if (!active) return;
|
||
const botId = active.id;
|
||
let cancelled = false;
|
||
void (async () => {
|
||
// Refresh from the server first. A stale SSE "booting" snapshot used to
|
||
// skip this effect, so an RPC takeover never showed "You have control".
|
||
const snap = await refreshThread(botId).catch(() => null);
|
||
if (cancelled || activeBotId.current !== botId) return;
|
||
const state = snap?.computer?.state;
|
||
const screen = state === "running" ? await refreshComputerScreen(botId) : null;
|
||
if (cancelled || activeBotId.current !== botId) return;
|
||
const action = computerPanelAutoBoot(state, screen);
|
||
if (action === "wait") {
|
||
if (state === "running") autoBooted.current = botId;
|
||
return;
|
||
}
|
||
if (action === "boot" && autoBooted.current === botId) return;
|
||
autoBooted.current = botId;
|
||
if (!computerPanelAutoUsesBoot(action)) return;
|
||
await bootComputer({
|
||
takeControl: false,
|
||
overlay: action === "boot",
|
||
force: true,
|
||
}).catch(() => undefined);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [panel, active?.id]);
|
||
|
||
useEffect(() => {
|
||
setComputerOpen(false);
|
||
setComputerError(null);
|
||
setComputerErrorFromScreen(false);
|
||
}, [active?.id]);
|
||
|
||
useEffect(() => {
|
||
if (focusPromptBotIdRef.current && focusPromptBotIdRef.current !== active?.id) {
|
||
cancelFocusPrompt();
|
||
}
|
||
}, [active?.id]);
|
||
|
||
useEffect(() => () => cancelFocusPrompt(), []);
|
||
|
||
useEffect(() => {
|
||
if (!computer?.busyBotName) {
|
||
setComputerError(null);
|
||
setComputerErrorFromScreen(false);
|
||
}
|
||
}, [computer?.busyBotName]);
|
||
|
||
useEffect(() => {
|
||
if (panel !== "routine") {
|
||
routineSaveRequest.current += 1;
|
||
setRoutineError(null);
|
||
}
|
||
}, [panel]);
|
||
|
||
// The routine panel copies a routine's data into local draft state at click time
|
||
// rather than deriving it from `active`, so it goes stale across a bot switch —
|
||
// without this, Save on bot B could silently update bot A's routine.
|
||
useEffect(() => {
|
||
setEditingRoutine(null);
|
||
setDeleteRoutineTarget(null);
|
||
setPanel((current) => (current === "routine" ? null : current));
|
||
}, [active?.id]);
|
||
|
||
useEffect(() => {
|
||
const threadKey = inGroup ? groupId : active?.id;
|
||
setPendingAttachments((current) => {
|
||
const stale = current.filter((attachment) => attachment.threadKey !== threadKey);
|
||
revokePendingAttachmentPreviews(stale);
|
||
return attachmentsForThread(current, threadKey);
|
||
});
|
||
clearReply();
|
||
setAttachmentNotice(null);
|
||
setSendError(null);
|
||
}, [active?.id, clearReply, groupId, inGroup]);
|
||
|
||
useEffect(() => {
|
||
if (!computerOpen) return;
|
||
function onKey(event: KeyboardEvent) {
|
||
if (event.key === "Escape") setComputerOpen(false);
|
||
}
|
||
window.addEventListener("keydown", onKey);
|
||
return () => window.removeEventListener("keydown", onKey);
|
||
}, [computerOpen]);
|
||
|
||
useEffect(() => {
|
||
function onKey(event: KeyboardEvent) {
|
||
if (!isCommandPaletteHotkey(event)) return;
|
||
event.preventDefault();
|
||
setCommandPaletteOpen((open) => !open);
|
||
}
|
||
window.addEventListener("keydown", onKey);
|
||
return () => window.removeEventListener("keydown", onKey);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if ((panel !== "computer" && !computerOpen) || !active || computer?.state !== "running") return;
|
||
const ping = () => void rpc.computer.heartbeat({ botId: active.id }).catch(() => undefined);
|
||
ping();
|
||
const timer = window.setInterval(ping, 60_000);
|
||
return () => window.clearInterval(timer);
|
||
}, [panel, computerOpen, active?.id, computer?.state]);
|
||
|
||
async function openComputer() {
|
||
if (!active) return;
|
||
const needsTakeover = !userHoldsComputerControl(computer, active.id);
|
||
const blocked = computerTakeoverBlocked(computer, snapshot?.run?.status);
|
||
try {
|
||
await bootComputer({
|
||
takeControl: needsTakeover && !blocked,
|
||
overlay: (needsTakeover && !blocked) || computer?.state !== "running",
|
||
force: computer?.state !== "running",
|
||
});
|
||
setComputerOpen(true);
|
||
} catch {
|
||
// computerError already set in bootComputer
|
||
}
|
||
}
|
||
|
||
const releaseComputer = useCallback(
|
||
async (reason?: ComputerReleaseReason) => {
|
||
const botId = activeBotId.current;
|
||
if (!botId) return;
|
||
try {
|
||
await rpc.computer.release({ botId, reason });
|
||
if (activeBotId.current !== botId) return;
|
||
setComputerOpen(false);
|
||
await refreshThreadRef.current(botId).catch(() => undefined);
|
||
} catch {
|
||
if (activeBotId.current !== botId) return;
|
||
setComputerError(t`Could not continue`);
|
||
setComputerErrorFromScreen(false);
|
||
}
|
||
},
|
||
[t],
|
||
);
|
||
|
||
function dismissComposerError() {
|
||
// The strip shows one message at a time, so only dismiss the run failure when it is the
|
||
// one on screen; otherwise a live run would be silenced before it has even failed.
|
||
const failedRunId = displayedRunErrorId;
|
||
setSendError(null);
|
||
if (failedRunId) {
|
||
rememberSeenRunErrorId(failedRunId);
|
||
setDismissedRunErrorIds((current) => new Set(current).add(failedRunId));
|
||
}
|
||
}
|
||
|
||
const embeddedScreenUrl = embeddableScreenUrl(screenUrl);
|
||
const hasControl = userHoldsComputerControl(computer, active?.id);
|
||
const hideScreenLoadError = computerErrorFromScreen && Boolean(embeddedScreenUrl);
|
||
const computerScreenError =
|
||
computerError && !hideScreenLoadError ? (
|
||
<div role="alert" className="flex flex-col items-center gap-3 px-6 text-center text-sm">
|
||
<p className="text-destructive">{computerError}</p>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => active && void refreshComputerScreen(active.id)}
|
||
>
|
||
<Trans>Retry screen</Trans>
|
||
</Button>
|
||
</div>
|
||
) : null;
|
||
|
||
useEffect(() => {
|
||
if (!active && !activeGroup && initialBotsLoaded && !emptyProjectSpace) {
|
||
const hauptthread = groups.find((g) => g.name === "Hauptthread" || g.name === "Team Chat");
|
||
if (hauptthread) {
|
||
navigate(`/app/g/${hauptthread.id}`);
|
||
} else if (bots.length > 0) {
|
||
rpc.groups
|
||
.create({ name: "Hauptthread", botIds: bots.map((b) => b.id) })
|
||
.then((group) => {
|
||
setGroups((curr) => [group, ...curr]);
|
||
navigate(`/app/g/${group.id}`);
|
||
})
|
||
.catch(console.error);
|
||
}
|
||
}
|
||
}, [active, activeGroup, emptyProjectSpace, initialBotsLoaded, groups, bots, navigate]);
|
||
|
||
const userName = session.data?.user.name ?? t`You`;
|
||
const initials = userName
|
||
.split(" ")
|
||
.map((p) => p[0])
|
||
.join("")
|
||
.slice(0, 2)
|
||
.toUpperCase();
|
||
|
||
const shell = (
|
||
<div
|
||
data-testid="shell-root"
|
||
data-ready={shellReady}
|
||
className="relative flex h-full min-w-0 overflow-hidden bg-black bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-zinc-900 via-black to-black text-foreground/90 p-0 md:p-3 gap-0 md:gap-3"
|
||
onTouchStartCapture={(event) => {
|
||
if (
|
||
mobileSidebarOpen ||
|
||
event.touches.length !== 1 ||
|
||
window.matchMedia("(min-width: 768px)").matches
|
||
) {
|
||
mobileSidebarSwipeRef.current = null;
|
||
return;
|
||
}
|
||
const touch = event.touches[0];
|
||
if (!touch) return;
|
||
const rtl = document.documentElement.getAttribute("dir") === "rtl";
|
||
const startsAtEdge = rtl
|
||
? touch.clientX >= window.innerWidth - MOBILE_SIDEBAR_SWIPE_EDGE_PX
|
||
: touch.clientX <= MOBILE_SIDEBAR_SWIPE_EDGE_PX;
|
||
mobileSidebarSwipeRef.current = startsAtEdge
|
||
? { startX: touch.clientX, startY: touch.clientY }
|
||
: null;
|
||
}}
|
||
onTouchEndCapture={(event) => {
|
||
const swipe = mobileSidebarSwipeRef.current;
|
||
mobileSidebarSwipeRef.current = null;
|
||
const touch = event.changedTouches[0];
|
||
if (
|
||
!swipe ||
|
||
!touch ||
|
||
mobileSidebarOpen ||
|
||
window.matchMedia("(min-width: 768px)").matches
|
||
) {
|
||
return;
|
||
}
|
||
const rtl = document.documentElement.getAttribute("dir") === "rtl";
|
||
const horizontal = rtl ? swipe.startX - touch.clientX : touch.clientX - swipe.startX;
|
||
const vertical = Math.abs(touch.clientY - swipe.startY);
|
||
if (horizontal >= MOBILE_SIDEBAR_SWIPE_DISTANCE_PX && horizontal > vertical * 1.25) {
|
||
setMobileSidebarOpen(true);
|
||
}
|
||
}}
|
||
onTouchCancelCapture={() => {
|
||
mobileSidebarSwipeRef.current = null;
|
||
}}
|
||
>
|
||
<ComputerUpdateProgress
|
||
onCompleted={() => {
|
||
if (active) void refreshThread(active.id);
|
||
}}
|
||
/>
|
||
{bootstrapMe !== undefined ? (
|
||
<HostComputerPrompt initialMe={bootstrapMe ?? undefined} />
|
||
) : null}
|
||
{mobileSidebarOpen ? (
|
||
<button
|
||
type="button"
|
||
aria-label={t`Close navigation`}
|
||
onClick={() => setMobileSidebarOpen(false)}
|
||
className="absolute inset-y-0 end-0 start-[min(calc(100%-48px),316px)] z-30 bg-overlay md:hidden"
|
||
/>
|
||
) : null}
|
||
{!mobileSidebarOpen ? (
|
||
<div
|
||
data-testid="mobile-sidebar-swipe-edge"
|
||
aria-hidden="true"
|
||
className="absolute bottom-20 start-0 top-16 z-20 w-8 touch-none md:hidden"
|
||
/>
|
||
) : null}
|
||
<aside
|
||
data-testid="bots-sidebar"
|
||
data-collapsed={botsSidebarCollapsed ? "true" : "false"}
|
||
inert={botsSidebarCollapsed && !mobileSidebarOpen ? true : undefined}
|
||
style={{
|
||
width: mobileSidebarOpen ? undefined : botsSidebarCollapsed ? 0 : leftSidebarWidth,
|
||
maxWidth: mobileSidebarOpen ? 316 : undefined,
|
||
}}
|
||
className={`absolute inset-y-0 start-0 z-40 flex w-[calc(100%-48px)] shrink-0 flex-col md:rounded-2xl md:border md:border-white/10 md:bg-[#0A0A0C] md:shadow-2xl bg-sidebar md:static md:z-auto md:translate-x-0 ${
|
||
mobileSidebarOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full"
|
||
} ${
|
||
botsSidebarCollapsed
|
||
? "md:w-0 md:max-w-0 md:overflow-hidden md:border-e-0 md:opacity-0 md:pointer-events-none"
|
||
: ""
|
||
} ${!isResizingLeft ? "transition-[transform,width,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]" : ""}`}
|
||
>
|
||
<div
|
||
onPointerDown={startResizingLeft}
|
||
className="absolute -right-2 top-0 bottom-0 w-4 cursor-col-resize z-50 hidden md:block"
|
||
/>
|
||
<div className="app-drag flex items-center justify-between px-4 lg:px-6 2xl:px-8 pb-3 pt-4">
|
||
<WindowChrome />
|
||
<div className="flex-1 px-1">
|
||
<Wordmark />
|
||
</div>
|
||
<div className="relative flex items-center gap-2.5">
|
||
<button
|
||
type="button"
|
||
aria-label={t`Activity`}
|
||
aria-pressed={activityMode}
|
||
title={t`Activity`}
|
||
data-activity-mode={activityMode ? "on" : "off"}
|
||
onClick={toggleActivityMode}
|
||
className={`app-no-drag flex size-control-sm items-center justify-center rounded-full ${
|
||
activityMode
|
||
? "bg-primary text-primary-foreground"
|
||
: "text-muted-foreground/70 hover:text-foreground/75"
|
||
}`}
|
||
>
|
||
<Bell
|
||
strokeWidth={1.8}
|
||
fill={activityMode ? "currentColor" : "none"}
|
||
aria-hidden="true"
|
||
className="size-icon-md"
|
||
/>
|
||
</button>
|
||
|
||
<Popover open={createMenuOpen} onOpenChange={setCreateMenuOpen}>
|
||
<PopoverTrigger
|
||
className="app-no-drag text-[21px] text-muted-foreground/70 hover:text-foreground/75"
|
||
title={t`Create`}
|
||
data-testid="create-menu-trigger"
|
||
>
|
||
+
|
||
</PopoverTrigger>
|
||
{/* Unmount with the state change so the panel it opens never coexists with the menu. */}
|
||
{createMenuOpen ? (
|
||
<PopoverContent
|
||
align="end"
|
||
className="app-no-drag w-auto gap-0 overflow-hidden p-0 data-closed:animate-none"
|
||
>
|
||
<BotCreatePicker
|
||
bots={bots}
|
||
onCreateBot={() => {
|
||
setCreateMenuOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
setPanel("create");
|
||
}}
|
||
onOpenBot={(id) => {
|
||
setCreateMenuOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
navigate(`/app/${id}`);
|
||
}}
|
||
onCreateGroup={() => {
|
||
setCreateMenuOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
setPanel("create-group");
|
||
}}
|
||
onCreateSpace={() => {
|
||
setCreateMenuOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
openNewSpaceDialog("space");
|
||
}}
|
||
onShowGroupInfo={() => {
|
||
setCreateMenuOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
setPickerInfoTopic("group");
|
||
}}
|
||
onShowSpaceInfo={() => {
|
||
setCreateMenuOpen(false);
|
||
setMobileSidebarOpen(false);
|
||
setPickerInfoTopic("space");
|
||
}}
|
||
/>
|
||
</PopoverContent>
|
||
) : null}
|
||
</Popover>
|
||
</div>
|
||
</div>
|
||
|
||
<InputGroup
|
||
data-testid="sidebar-search"
|
||
className="mx-3 lg:mx-5 2xl:mx-7 mb-3 w-auto rounded-xl bg-card dark:bg-input border border-border text-muted-foreground focus-within:border-ring"
|
||
>
|
||
<InputGroupAddon>
|
||
<Search strokeWidth={1.8} aria-hidden="true" className="size-icon-md" />
|
||
</InputGroupAddon>
|
||
<InputGroupInput
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder={t`Search`}
|
||
autoComplete="off"
|
||
name="sidebar-search"
|
||
/>
|
||
</InputGroup>
|
||
<div className="rk-scroll flex flex-1 flex-col gap-0.5 overflow-y-auto px-3 lg:px-5 2xl:px-7 pb-2.5">
|
||
{showSpaceSearch ? (
|
||
<SpaceSearchResults
|
||
hits={searchHits}
|
||
loading={searchLoading}
|
||
onSelect={(hit) => void jumpToSearchHit(hit)}
|
||
/>
|
||
) : (
|
||
<>
|
||
{activityMode ? (
|
||
<ActivityList
|
||
onOpenRun={(run) => {
|
||
setMobileSidebarOpen(false);
|
||
if (run.groupId) navigate(`/app/g/${run.groupId}`);
|
||
else navigate(`/app/${run.botId}`);
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
<div className="mb-3">
|
||
<button
|
||
type="button"
|
||
aria-label={
|
||
heuteActionCount > 0 ? t`Heute, ${heuteActionCount} need you` : t`Heute`
|
||
}
|
||
onClick={() => {
|
||
ooSound.play("interact");
|
||
setActiveNavPillar("heute");
|
||
setMobileSidebarOpen(false);
|
||
}}
|
||
className={`flex w-full items-center gap-3 rounded-2xl px-3 py-3 text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
|
||
activeNavPillar === "heute"
|
||
? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
|
||
: "hover:bg-white/[0.04]"
|
||
}`}
|
||
>
|
||
<div className="relative grid size-control-lg shrink-0 place-items-center rounded-full bg-emerald-500/10 text-emerald-400">
|
||
<Calendar strokeWidth={2.2} className="size-icon-md" />
|
||
{heuteActionCount > 0 ? (
|
||
<span
|
||
aria-hidden="true"
|
||
className="absolute -right-0.5 -top-0.5 grid min-w-[18px] place-items-center rounded-full bg-warning px-1 text-ui-label font-bold leading-none text-background"
|
||
>
|
||
{heuteActionCount > 9 ? "9+" : heuteActionCount}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<div className="font-semibold text-foreground/90 tracking-tight text-ui-body">
|
||
Heute
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div className="sidebar-unterhaltungen">
|
||
<div className="flex items-center justify-between pt-4 pb-2 px-2.5">
|
||
<div className="rk-shell-section-label">{t`Sprich mit deinen Oo's`}</div>
|
||
<div className="flex items-center">
|
||
<Popover open={conversationPickerOpen} onOpenChange={setConversationPickerOpen}>
|
||
<PopoverTrigger
|
||
type="button"
|
||
aria-label={t`Neue Unterhaltung`}
|
||
data-testid="conversation-picker-trigger"
|
||
className="text-muted-foreground/60 hover:text-foreground/90 transition-colors"
|
||
>
|
||
<Plus strokeWidth={2.5} className="size-icon-md" />
|
||
</PopoverTrigger>
|
||
{conversationPickerOpen ? (
|
||
<PopoverContent
|
||
align="end"
|
||
className="w-auto gap-0 overflow-hidden p-0 data-closed:animate-none"
|
||
>
|
||
<ConversationBotPicker
|
||
bots={bots}
|
||
onCreateBot={() => {
|
||
setConversationPickerOpen(false);
|
||
setPanel("create");
|
||
}}
|
||
onOpenBot={openConversationBot}
|
||
/>
|
||
</PopoverContent>
|
||
) : null}
|
||
</Popover>
|
||
</div>
|
||
</div>
|
||
{conversationSidebarGroups.length === 0 ? (
|
||
<div className="p-4 text-center text-ui-label text-muted-foreground">
|
||
<p>{t`Noch keine Unterhaltung.`}</p>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="mt-2 text-ui-label"
|
||
onClick={() => setConversationPickerOpen(true)}
|
||
>
|
||
<Plus className="mr-1 size-icon-sm" />
|
||
{t`Neue Unterhaltung`}
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
{conversationSidebarGroups.map((group) => {
|
||
const collapsed = Boolean(group.title) && collapsedSidebarSections.has(group.key);
|
||
const groupBotIds = group.bots.flatMap((item) =>
|
||
item.kind === "bot" ? [item.chat.id] : [],
|
||
);
|
||
return (
|
||
<div key={group.key} data-sidebar-group={group.key}>
|
||
{group.title ? (
|
||
<div className="flex items-center pt-3 pb-0.5">
|
||
<button
|
||
type="button"
|
||
className="flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg px-2.5 py-1 text-ui-label font-semibold tracking-wider uppercase text-muted-foreground/60 hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
|
||
onClick={() => {
|
||
if (group.emptySpaceId) {
|
||
openSpaceChat(group.emptySpaceId, "/onboarding");
|
||
return;
|
||
}
|
||
toggleSidebarSection(group.key);
|
||
}}
|
||
onContextMenu={
|
||
group.sectionId
|
||
? (event) => {
|
||
event.preventDefault();
|
||
// Prefer section rename over delete-space when both apply;
|
||
// the dedicated space-actions button still opens the space menu.
|
||
const sections =
|
||
group.spaceId === bootstrapMe?.spaceId
|
||
? botSections
|
||
: (spaces.find((space) => space.id === group.spaceId)
|
||
?.botSections ?? []);
|
||
const section = sections.find(
|
||
(item) => item.id === group.sectionId,
|
||
);
|
||
if (!section) return;
|
||
sectionMenuAnchor.current = event.currentTarget;
|
||
setSectionMenu({
|
||
section,
|
||
spaceId: group.spaceId,
|
||
position: { x: event.clientX, y: event.clientY },
|
||
});
|
||
}
|
||
: group.canDeleteSpace
|
||
? (event) => {
|
||
event.preventDefault();
|
||
spaceMenuAnchor.current = event.currentTarget;
|
||
setSpaceMenu({
|
||
id: group.spaceId,
|
||
position: { x: event.clientX, y: event.clientY },
|
||
});
|
||
}
|
||
: undefined
|
||
}
|
||
aria-expanded={group.emptySpaceId ? undefined : !collapsed}
|
||
aria-label={
|
||
group.emptySpaceId
|
||
? t`Open ${group.title}`
|
||
: collapsed
|
||
? t`Expand ${group.title}`
|
||
: t`Collapse ${group.title}`
|
||
}
|
||
>
|
||
<span className="flex min-w-0 items-center gap-1.5 truncate">
|
||
<Folder strokeWidth={2} aria-hidden="true" className="size-icon-sm" />
|
||
<span className="truncate">{group.title}</span>
|
||
</span>
|
||
{group.emptySpaceId ? null : (
|
||
<ChevronDown
|
||
strokeWidth={1.8}
|
||
className={`size-icon-md ${collapsed ? "-rotate-90 transition-transform" : "transition-transform"}`}
|
||
aria-hidden="true"
|
||
/>
|
||
)}
|
||
</button>
|
||
{group.canDeleteSpace ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
aria-label={t`Actions for ${group.spaceName}`}
|
||
onClick={(event) => {
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
spaceMenuAnchor.current = event.currentTarget;
|
||
setSpaceMenu({
|
||
id: group.spaceId,
|
||
position: { x: rect.left, y: rect.bottom },
|
||
});
|
||
}}
|
||
>
|
||
<MoreHorizontal aria-hidden="true" className="size-icon-md" />
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
{!collapsed &&
|
||
group.bots
|
||
.slice(0, expandedTeamGroups[group.key] ? undefined : 4)
|
||
.map((item) => (
|
||
<button
|
||
key={`${item.kind}:${item.chat.id}`}
|
||
type="button"
|
||
draggable={item.kind === "bot"}
|
||
data-roster-bot-id={item.kind === "bot" ? item.chat.id : undefined}
|
||
aria-keyshortcuts={
|
||
item.kind === "bot" ? "Alt+ArrowUp Alt+ArrowDown" : undefined
|
||
}
|
||
onDragStart={(event) => {
|
||
if (item.kind !== "bot") return;
|
||
setDraggedBotId(item.chat.id);
|
||
event.dataTransfer.effectAllowed = "move";
|
||
event.dataTransfer.setData("text/plain", item.chat.id);
|
||
}}
|
||
onDragOver={(event) => {
|
||
if (
|
||
item.kind === "bot" &&
|
||
draggedBotId &&
|
||
groupBotIds.includes(draggedBotId)
|
||
) {
|
||
event.preventDefault();
|
||
event.dataTransfer.dropEffect = "move";
|
||
}
|
||
}}
|
||
onDrop={(event) => {
|
||
if (item.kind !== "bot" || !draggedBotId) return;
|
||
event.preventDefault();
|
||
reorderRosterBot(draggedBotId, item.chat.id, groupBotIds);
|
||
setDraggedBotId(null);
|
||
}}
|
||
onDragEnd={() => setDraggedBotId(null)}
|
||
onKeyDown={(event) => {
|
||
if (
|
||
item.kind !== "bot" ||
|
||
!event.altKey ||
|
||
(event.key !== "ArrowUp" && event.key !== "ArrowDown")
|
||
)
|
||
return;
|
||
const index = groupBotIds.indexOf(item.chat.id);
|
||
const target =
|
||
groupBotIds[index + (event.key === "ArrowUp" ? -1 : 1)];
|
||
if (!target) return;
|
||
event.preventDefault();
|
||
reorderRosterBot(item.chat.id, target, groupBotIds);
|
||
}}
|
||
aria-label={
|
||
item.kind === "bot"
|
||
? t`${item.chat.name}, 1:1 conversation`
|
||
: t`${item.chat.name}, group conversation`
|
||
}
|
||
onClick={() => {
|
||
setActiveNavPillar("team");
|
||
openSpaceChat(item.chat.spaceId, `/app/${item.chat.id}`);
|
||
}}
|
||
onContextMenu={(event) => {
|
||
if (item.chat.spaceId !== bootstrapMe?.spaceId) return;
|
||
event.preventDefault();
|
||
botMenuAnchor.current = event.currentTarget;
|
||
setBotMenu({
|
||
kind: item.kind,
|
||
id: item.chat.id,
|
||
position: { x: event.clientX, y: event.clientY },
|
||
});
|
||
}}
|
||
className={`flex w-full items-center gap-3 rounded-2xl px-3 py-3 mb-[2px] text-start transition-all duration-150 cursor-pointer min-h-[52px] cursor-grab active:cursor-grabbing ${
|
||
!inGroup && active?.id === item.chat.id
|
||
? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
|
||
: "hover:bg-white/[0.05] border border-transparent"
|
||
}`}
|
||
style={{
|
||
opacity: draggedBotId === item.chat.id ? 0.55 : 1,
|
||
}}
|
||
>
|
||
<div className="relative shrink-0">
|
||
<BotAvatar
|
||
color={item.chat.color}
|
||
identity={item.chat.id}
|
||
size={40}
|
||
status={item.chat.status}
|
||
/>
|
||
<span
|
||
className={`absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-[#0b0c10] ${
|
||
rosterStatusDot(item.chat.status) === "needs-you"
|
||
? "bg-warning animate-pulse"
|
||
: rosterStatusDot(item.chat.status) === "working"
|
||
? "bg-amber-400 animate-pulse"
|
||
: "bg-emerald-400"
|
||
}`}
|
||
/>
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center justify-between gap-1.5">
|
||
<div className="flex min-w-0 items-center gap-2 overflow-hidden">
|
||
<span
|
||
dir="auto"
|
||
data-roster-bot-name=""
|
||
className={`shrink-0 max-w-[170px] truncate text-ui-body tracking-tight ${
|
||
item.chat.unread
|
||
? "font-bold text-white"
|
||
: "font-semibold text-white/95"
|
||
}`}
|
||
>
|
||
{item.chat.name}
|
||
</span>
|
||
{needsYouChipLabel(item.chat.status) ? (
|
||
<span className="shrink-0 rounded-full border border-warning/30 bg-warning/10 px-2 py-0.5 text-ui-label font-medium text-warning">
|
||
{needsYouChipLabel(item.chat.status)}
|
||
</span>
|
||
) : item.chat.title ? (
|
||
<span className="min-w-0 truncate rounded-full border border-emerald-500/25 bg-emerald-500/10 px-2 py-0.5 text-ui-label font-medium text-emerald-400">
|
||
{item.chat.title}
|
||
</span>
|
||
) : null}
|
||
{item.chat.unread ? (
|
||
<span className="sr-only">
|
||
<Trans> (unread)</Trans>
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<div className="flex shrink-0 items-center gap-1.5">
|
||
<span className="text-ui-body-sm text-zinc-400 tabular-nums font-medium">
|
||
{formatRosterTime(item.chat.updatedAt)}
|
||
</span>
|
||
{item.chat.unread ? (
|
||
<span
|
||
aria-hidden="true"
|
||
className="inline-block h-2 w-2 rounded-full bg-emerald-400"
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div
|
||
dir="auto"
|
||
className={`mt-0.5 truncate text-ui-body leading-snug ${
|
||
item.chat.unread ? "font-medium text-white" : "text-zinc-300"
|
||
}`}
|
||
>
|
||
{rosterActivitySubtitle(
|
||
item.chat.status,
|
||
cleanRosterPreview(item.chat.preview),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
{!collapsed && group.bots.length > 4 && (
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setExpandedTeamGroups((prev) => ({
|
||
...prev,
|
||
[group.key]: !prev[group.key],
|
||
}))
|
||
}
|
||
className="mt-1 w-full flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-ui-label font-medium text-muted-foreground hover:bg-sidebar-accent hover:text-foreground transition-colors"
|
||
>
|
||
{expandedTeamGroups[group.key]
|
||
? "Weniger anzeigen"
|
||
: `Alle ${group.bots.length} anzeigen...`}
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
<div className="sidebar-projekte">
|
||
{/* PROJEKTE SECTION */}
|
||
<div className="flex items-center justify-between pt-4 pb-1 mt-3 border-t border-white/5 px-2.5">
|
||
<div>
|
||
<div className="rk-shell-section-label">{t`Projekte`}</div>
|
||
<p className="mt-0.5 px-0.5 text-ui-caption text-muted-foreground/70">
|
||
{t`Threads by topic · folders`}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<button
|
||
type="button"
|
||
aria-label={t`Create a project`}
|
||
data-testid="create-project-trigger"
|
||
onClick={() => openNewSpaceDialog("project")}
|
||
className="text-muted-foreground/60 hover:text-foreground/90 transition-colors"
|
||
>
|
||
<Plus strokeWidth={2.5} className="size-icon-md" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{projectSidebarGroups.length === 0 ? (
|
||
<div className="p-4 text-center text-ui-label text-muted-foreground">
|
||
<p>{t`No projects yet.`}</p>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="mt-2 text-ui-label"
|
||
onClick={() => openNewSpaceDialog("project")}
|
||
>
|
||
<Plus className="mr-1 size-icon-sm" />
|
||
{t`Create a project`}
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
<DndContext
|
||
sensors={sensors}
|
||
collisionDetection={closestCenter}
|
||
onDragEnd={handleProjectDragEnd}
|
||
onDragStart={handleProjectDragStart}
|
||
onDragCancel={() => setDraggedProjectId(null)}
|
||
>
|
||
<SortableContext
|
||
items={projectSidebarGroups.filter((g) => g.title).map((g) => g.spaceId)}
|
||
strategy={verticalListSortingStrategy}
|
||
>
|
||
{projectSidebarGroups.map((group) => {
|
||
const collapsed =
|
||
Boolean(group.title) && collapsedSidebarSections.has(group.key);
|
||
return (
|
||
<SortableGroup key={`proj-${group.key}`} group={group}>
|
||
<div data-sidebar-group={group.key}>
|
||
{group.title ? (
|
||
<div className="flex items-center pt-3 pb-0.5 relative">
|
||
{/* Drag grip — positioned to the left of the title text */}
|
||
<ProjectDragGrip className="absolute left-1 top-1/2 -translate-y-1/2 w-6 h-6 rounded flex items-center justify-center text-muted-foreground/30 hover:text-muted-foreground/70 active:text-muted-foreground transition-colors cursor-grab active:cursor-grabbing">
|
||
<GripVertical className="size-icon-sm" strokeWidth={2} />
|
||
</ProjectDragGrip>
|
||
<button
|
||
type="button"
|
||
className="flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg pl-8 py-1 text-ui-label font-semibold tracking-wider uppercase text-muted-foreground/60 hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
|
||
onClick={() => {
|
||
if (group.emptySpaceId) {
|
||
openSpaceChat(group.emptySpaceId, "/app");
|
||
return;
|
||
}
|
||
toggleSidebarSection(group.key);
|
||
}}
|
||
onContextMenu={
|
||
group.sectionId
|
||
? (event) => {
|
||
event.preventDefault();
|
||
const sections =
|
||
group.spaceId === bootstrapMe?.spaceId
|
||
? botSections
|
||
: (spaces.find(
|
||
(space) => space.id === group.spaceId,
|
||
)?.botSections ?? []);
|
||
const section = sections.find(
|
||
(item) => item.id === group.sectionId,
|
||
);
|
||
if (!section) return;
|
||
sectionMenuAnchor.current = event.currentTarget;
|
||
setSectionMenu({
|
||
section,
|
||
spaceId: group.spaceId,
|
||
position: { x: event.clientX, y: event.clientY },
|
||
});
|
||
}
|
||
: group.canDeleteSpace
|
||
? (event) => {
|
||
event.preventDefault();
|
||
spaceMenuAnchor.current = event.currentTarget;
|
||
setSpaceMenu({
|
||
id: group.spaceId,
|
||
position: { x: event.clientX, y: event.clientY },
|
||
});
|
||
}
|
||
: undefined
|
||
}
|
||
aria-expanded={group.emptySpaceId ? undefined : !collapsed}
|
||
aria-label={
|
||
group.emptySpaceId
|
||
? t`Select ${group.title}`
|
||
: collapsed
|
||
? t`Expand ${group.title}`
|
||
: t`Collapse ${group.title}`
|
||
}
|
||
>
|
||
<span className="flex min-w-0 items-center gap-1.5 truncate">
|
||
{group.showLock ? (
|
||
<Lock
|
||
strokeWidth={2}
|
||
aria-hidden="true"
|
||
className="size-icon-sm"
|
||
/>
|
||
) : null}
|
||
<span className="truncate">{group.title}</span>
|
||
</span>
|
||
{group.emptySpaceId ? null : (
|
||
<ChevronDown
|
||
strokeWidth={1.8}
|
||
className={`size-icon-md ${collapsed ? "-rotate-90 transition-transform" : "transition-transform"}`}
|
||
aria-hidden="true"
|
||
/>
|
||
)}
|
||
</button>
|
||
{group.canDeleteSpace ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
aria-label={t`Actions for ${group.spaceName}`}
|
||
onClick={(event) => {
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
spaceMenuAnchor.current = event.currentTarget;
|
||
setSpaceMenu({
|
||
id: group.spaceId,
|
||
position: { x: rect.left, y: rect.bottom },
|
||
});
|
||
}}
|
||
>
|
||
<MoreHorizontal aria-hidden="true" className="size-icon-md" />
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
{!collapsed && group.emptySpaceId ? (
|
||
<div className="px-3 pb-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="w-full text-ui-label"
|
||
data-testid={`project-start-${group.spaceId}`}
|
||
onClick={() => openProjectStart(group.spaceId, "group")}
|
||
>
|
||
<Plus className="mr-1 size-icon-sm" />
|
||
{t`Starten`}
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
{!collapsed &&
|
||
group.bots.map((item) => (
|
||
<button
|
||
key={`${item.kind}:${item.chat.id}`}
|
||
type="button"
|
||
aria-label={
|
||
item.kind === "bot"
|
||
? t`${item.chat.name}, 1:1 conversation`
|
||
: t`${item.chat.name}, group conversation`
|
||
}
|
||
onClick={() => {
|
||
setActiveNavPillar("projekte");
|
||
openSpaceChat(
|
||
item.chat.spaceId,
|
||
item.kind === "bot"
|
||
? `/app/${item.chat.id}`
|
||
: `/app/g/${item.chat.id}`,
|
||
);
|
||
}}
|
||
onContextMenu={(event) => {
|
||
if (item.chat.spaceId !== bootstrapMe?.spaceId) return;
|
||
event.preventDefault();
|
||
botMenuAnchor.current = event.currentTarget;
|
||
setBotMenu({
|
||
kind: item.kind,
|
||
id: item.chat.id,
|
||
position: { x: event.clientX, y: event.clientY },
|
||
});
|
||
}}
|
||
className={`flex w-full items-center gap-3 rounded-2xl px-3 py-3 mb-[2px] text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
|
||
item.kind === "bot" && !inGroup && active?.id === item.chat.id
|
||
? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
|
||
: item.kind === "group" &&
|
||
inGroup &&
|
||
activeGroup?.id === item.chat.id
|
||
? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
|
||
: "hover:bg-white/[0.05] border border-transparent"
|
||
}`}
|
||
>
|
||
{item.kind === "bot" ? (
|
||
<BotAvatar
|
||
color={item.chat.color}
|
||
identity={item.chat.id}
|
||
size={40}
|
||
status={item.chat.status}
|
||
/>
|
||
) : (
|
||
<GroupAvatar members={(item.chat as any).members} size={40} />
|
||
)}
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center justify-between gap-1.5">
|
||
<div className="flex min-w-0 items-center gap-2 overflow-hidden">
|
||
<span
|
||
dir="auto"
|
||
className={`shrink-0 max-w-[170px] truncate text-ui-body tracking-tight ${
|
||
item.chat.unread
|
||
? "font-bold text-white"
|
||
: "font-semibold text-white/95"
|
||
}`}
|
||
>
|
||
{item.chat.name}
|
||
</span>
|
||
</div>
|
||
<div className="flex shrink-0 items-center gap-1.5">
|
||
<span className="text-ui-body-sm text-zinc-400 tabular-nums font-medium">
|
||
{formatRosterTime(item.chat.updatedAt)}
|
||
</span>
|
||
{item.chat.unread ? (
|
||
<span
|
||
aria-hidden="true"
|
||
className="inline-block h-2 w-2 rounded-full bg-emerald-400"
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div
|
||
dir="auto"
|
||
className={`mt-0.5 truncate text-ui-body leading-snug ${
|
||
item.chat.unread
|
||
? "font-medium text-white"
|
||
: "text-zinc-300"
|
||
}`}
|
||
>
|
||
{cleanRosterPreview(item.chat.preview)}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</SortableGroup>
|
||
);
|
||
})}
|
||
</SortableContext>
|
||
</DndContext>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
{archivedBots.length + archivedGroups.length > 0 && !showSpaceSearch ? (
|
||
<div className="mt-2 border-t border-border pt-2">
|
||
<button
|
||
type="button"
|
||
aria-expanded={archivedOpen}
|
||
onClick={() => setArchivedOpen((open) => !open)}
|
||
className="flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-ui-body text-muted-foreground hover:bg-sidebar-accent"
|
||
>
|
||
<span>
|
||
<Trans>Archived</Trans>
|
||
</span>
|
||
<span>{archivedBots.length + archivedGroups.length}</span>
|
||
</button>
|
||
{archivedOpen ? (
|
||
<>
|
||
{archivedBots.map((bot) => (
|
||
<div key={bot.id} className="flex items-center gap-2 rounded-lg px-2.5 py-2">
|
||
<BotAvatar
|
||
color={bot.color}
|
||
identity={bot.id}
|
||
size={28}
|
||
status={bot.status}
|
||
/>
|
||
<span
|
||
className="min-w-0 flex-1 truncate text-ui-body text-foreground/75"
|
||
dir="auto"
|
||
>
|
||
{bot.name}
|
||
</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="xs"
|
||
onClick={() =>
|
||
void rpc.bots.restore({ botId: bot.id }).then(() => refreshBots(true))
|
||
}
|
||
>
|
||
<Trans>Restore</Trans>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="xs"
|
||
className="text-destructive hover:text-destructive"
|
||
aria-label={t`Delete ${bot.name}`}
|
||
onClick={() => setDeleteTarget(bot)}
|
||
>
|
||
<Trans>Delete</Trans>
|
||
</Button>
|
||
</div>
|
||
))}
|
||
{archivedGroups.map((group) => (
|
||
<div key={group.id} className="flex items-center gap-2 rounded-lg px-2.5 py-2">
|
||
<GroupAvatar members={group.members} size={28} />
|
||
<span
|
||
className="min-w-0 flex-1 truncate text-ui-body text-foreground/75"
|
||
dir="auto"
|
||
>
|
||
{group.name}
|
||
</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="xs"
|
||
onClick={() =>
|
||
void rpc.groups
|
||
.restore({ groupId: group.id })
|
||
.then(() => refreshBots(true))
|
||
}
|
||
>
|
||
<Trans>Restore</Trans>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="xs"
|
||
className="text-destructive hover:text-destructive"
|
||
aria-label={t`Delete ${group.name}`}
|
||
onClick={() => setDeleteGroupTarget(group)}
|
||
>
|
||
<Trans>Delete</Trans>
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<TradingModeIndicator snapshot={tradingStatus} className="mx-3 mb-1 lg:mx-5 2xl:mx-7" />
|
||
<DataTrustPanel />
|
||
<Popover open={menuOpen} onOpenChange={setMenuOpen}>
|
||
<PopoverTrigger
|
||
data-testid="user-menu-trigger"
|
||
className="flex items-center gap-[11px] px-[18px] py-3.5"
|
||
>
|
||
<span className="grid size-control-lg place-items-center rounded-full bg-accent text-ui-body-sm text-foreground/75">
|
||
{initials}
|
||
</span>
|
||
<span className="text-[14.5px] text-foreground/90">{userName}</span>
|
||
</PopoverTrigger>
|
||
{menuOpen ? (
|
||
<PopoverContent
|
||
side="top"
|
||
align="start"
|
||
className="w-[calc(316px-1.5rem)] max-w-[calc(100vw-3rem)] gap-0 p-1 data-closed:animate-none"
|
||
>
|
||
<Button
|
||
variant="ghost"
|
||
className="w-full justify-start font-normal"
|
||
aria-label={t`Settings`}
|
||
onClick={() => {
|
||
setMenuOpen(false);
|
||
openSettings("general");
|
||
}}
|
||
>
|
||
<Settings className="text-muted-foreground" strokeWidth={1.75} />
|
||
<Trans>Settings</Trans>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="w-full justify-start font-normal"
|
||
aria-label={t`Usage`}
|
||
onClick={() => {
|
||
setMenuOpen(false);
|
||
void rpc.usage
|
||
.summary()
|
||
.then(setUsage)
|
||
.catch(() => undefined);
|
||
openSettings("usage");
|
||
}}
|
||
>
|
||
<Gauge className="text-muted-foreground" strokeWidth={1.75} />
|
||
<Trans>Usage</Trans>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="w-full justify-start font-normal"
|
||
onClick={() =>
|
||
void authClient.signOut().then(() => {
|
||
clearSpaceSelection();
|
||
navigate("/");
|
||
})
|
||
}
|
||
>
|
||
<LogOut className="text-muted-foreground" strokeWidth={1.75} />
|
||
<Trans>Log out</Trans>
|
||
</Button>
|
||
</PopoverContent>
|
||
) : null}
|
||
</Popover>
|
||
</aside>
|
||
|
||
<button
|
||
type="button"
|
||
data-testid="bots-sidebar-edge"
|
||
aria-label={botsSidebarCollapsed ? t`Show bots` : t`Hide bots`}
|
||
aria-pressed={!botsSidebarCollapsed}
|
||
className={`absolute inset-y-0 z-50 hidden w-2 cursor-ew-resize touch-none border-0 bg-transparent p-0 md:block ${
|
||
botsSidebarCollapsed ? "start-0" : "start-[308px]"
|
||
}`}
|
||
onPointerDown={(event) => {
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
botsSidebarEdgeDragRef.current = {
|
||
startX: event.clientX,
|
||
mode: botsSidebarCollapsed ? "expand" : "collapse",
|
||
};
|
||
}}
|
||
onPointerMove={(event) => {
|
||
const drag = botsSidebarEdgeDragRef.current;
|
||
if (!drag) return;
|
||
const rtl =
|
||
typeof document !== "undefined" &&
|
||
document.documentElement.getAttribute("dir") === "rtl";
|
||
const delta = rtl ? drag.startX - event.clientX : event.clientX - drag.startX;
|
||
if (drag.mode === "expand" && delta >= BOTS_SIDEBAR_EDGE_DRAG_PX) {
|
||
botsSidebarEdgeDragRef.current = null;
|
||
setBotsSidebarCollapsedPref(false);
|
||
} else if (drag.mode === "collapse" && delta <= -BOTS_SIDEBAR_EDGE_DRAG_PX) {
|
||
botsSidebarEdgeDragRef.current = null;
|
||
setBotsSidebarCollapsedPref(true);
|
||
}
|
||
}}
|
||
onPointerUp={(event) => {
|
||
const drag = botsSidebarEdgeDragRef.current;
|
||
botsSidebarEdgeDragRef.current = null;
|
||
if (!drag) return;
|
||
if (Math.abs(event.clientX - drag.startX) < BOTS_SIDEBAR_EDGE_DRAG_PX) {
|
||
setBotsSidebarCollapsedPref(!botsSidebarCollapsed);
|
||
}
|
||
}}
|
||
onPointerCancel={() => {
|
||
botsSidebarEdgeDragRef.current = null;
|
||
}}
|
||
/>
|
||
|
||
<main
|
||
aria-hidden={mobileSidebarOpen || undefined}
|
||
inert={mobileSidebarOpen}
|
||
className="flex min-w-0 flex-1 flex-col bg-background md:rounded-2xl md:border md:border-white/10 md:bg-[#0A0A0C] md:shadow-2xl overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]"
|
||
>
|
||
{activeNavPillar === "heute" ? (
|
||
<div className="flex h-full flex-1 flex-col overflow-hidden">
|
||
<div className="app-drag flex items-center border-b border-sidebar-border px-3 py-[17px] md:px-[22px] lg:px-8 2xl:px-12">
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
{botsSidebarCollapsed && desktopBridge() ? <WindowChrome /> : null}
|
||
<button
|
||
type="button"
|
||
aria-label={t`Open navigation`}
|
||
onClick={() => setMobileSidebarOpen(true)}
|
||
className="app-no-drag grid size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent md:hidden"
|
||
>
|
||
<Menu strokeWidth={1.7} className="size-icon-lg" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-testid="toggle-bots-sidebar"
|
||
aria-label={botsSidebarCollapsed ? t`Show bots` : t`Minimize bots`}
|
||
title={botsSidebarCollapsed ? t`Show bots` : t`Minimize bots`}
|
||
onClick={() => setBotsSidebarCollapsedPref(!botsSidebarCollapsed)}
|
||
className="app-no-drag hidden size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent md:grid"
|
||
>
|
||
{botsSidebarCollapsed ? (
|
||
<PanelLeftOpen strokeWidth={1.7} aria-hidden="true" className="size-icon-lg" />
|
||
) : (
|
||
<PanelLeftClose strokeWidth={1.7} aria-hidden="true" className="size-icon-lg" />
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<HeuteBrief
|
||
bots={bots}
|
||
groups={groups}
|
||
onOpenBot={(botId, spaceId) => {
|
||
setActiveNavPillar("team");
|
||
openSpaceChat(spaceId, `/app/${botId}`);
|
||
}}
|
||
onOpenGroup={(groupId, spaceId) => {
|
||
setActiveNavPillar("projekte");
|
||
openSpaceChat(spaceId, `/app/g/${groupId}`);
|
||
}}
|
||
onOpenRun={(run) => {
|
||
if (run.groupId) {
|
||
setActiveNavPillar("projekte");
|
||
navigate(`/app/g/${run.groupId}`);
|
||
} else {
|
||
setActiveNavPillar("team");
|
||
navigate(`/app/${run.botId}`);
|
||
}
|
||
}}
|
||
onStartChat={() => {
|
||
const first = bots[0];
|
||
if (first) {
|
||
setActiveNavPillar("team");
|
||
openSpaceChat(first.spaceId, `/app/${first.id}`);
|
||
return;
|
||
}
|
||
setCreateMenuOpen(true);
|
||
}}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="app-drag flex items-center justify-between border-b border-sidebar-border px-3.5 py-2 md:px-6 md:py-3 lg:px-8 lg:py-4 2xl:px-12 2xl:py-6 bg-background/80 backdrop-blur-md">
|
||
<div className="flex min-w-0 items-center gap-2.5">
|
||
{/* Collapsed bots sidebar: this header is the leading edge for window chrome. */}
|
||
{botsSidebarCollapsed && desktopBridge() ? <WindowChrome /> : null}
|
||
<button
|
||
type="button"
|
||
aria-label={t`Open navigation`}
|
||
onClick={() => setMobileSidebarOpen(true)}
|
||
className="app-no-drag grid size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent md:hidden"
|
||
>
|
||
<Menu strokeWidth={1.7} className="size-icon-lg" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-testid="toggle-bots-sidebar"
|
||
aria-label={botsSidebarCollapsed ? t`Show bots` : t`Minimize bots`}
|
||
title={botsSidebarCollapsed ? t`Show bots` : t`Minimize bots`}
|
||
onClick={() => setBotsSidebarCollapsedPref(!botsSidebarCollapsed)}
|
||
className="app-no-drag hidden size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent md:grid"
|
||
>
|
||
{botsSidebarCollapsed ? (
|
||
<PanelLeftOpen strokeWidth={1.7} aria-hidden="true" className="size-icon-lg" />
|
||
) : (
|
||
<PanelLeftClose strokeWidth={1.7} aria-hidden="true" className="size-icon-lg" />
|
||
)}
|
||
</button>
|
||
{inGroup && projectSessionKey ? (
|
||
<button
|
||
type="button"
|
||
aria-label={t`Back to timeline`}
|
||
onClick={closeProjectSession}
|
||
className="app-no-drag grid size-control-lg shrink-0 place-items-center rounded-lg text-foreground/75 hover:bg-accent"
|
||
>
|
||
<ArrowLeft strokeWidth={1.8} aria-hidden="true" className="size-icon-lg" />
|
||
</button>
|
||
) : null}
|
||
<button
|
||
type="button"
|
||
data-testid="bot-settings-trigger"
|
||
onClick={() => setPanel(inGroup ? "group-settings" : "settings")}
|
||
className="app-no-drag flex min-w-0 items-center gap-3"
|
||
>
|
||
{!inGroup && active ? (
|
||
<BotAvatar
|
||
color={active.color}
|
||
identity={active.id}
|
||
size={36}
|
||
status={active.status}
|
||
className="shrink-0"
|
||
/>
|
||
) : inGroup ? (
|
||
<GroupAvatar
|
||
members={activeGroup?.members ?? activeSnapshot?.members ?? []}
|
||
size={36}
|
||
className="shrink-0"
|
||
/>
|
||
) : null}
|
||
<div className="min-w-0 text-start flex flex-col justify-center">
|
||
<span
|
||
className="block truncate text-ui-body font-semibold text-foreground tracking-tight leading-snug"
|
||
dir="auto"
|
||
>
|
||
{inGroup
|
||
? (activeGroup?.name ?? activeSnapshot?.groupName ?? t`Group`)
|
||
: (active?.name ?? t`Unterhaltung wählen`)}
|
||
</span>
|
||
{!inGroup && active && (composerRunning || active.status !== "idle") ? (
|
||
<span className="block truncate text-ui-body-sm font-medium text-muted-foreground/80 leading-snug">
|
||
{composerRunning || active.status === "running"
|
||
? t`Beschäftigt`
|
||
: active.status}
|
||
</span>
|
||
) : inGroup && projectSessionKey ? (
|
||
<span className="block truncate text-ui-body-sm font-medium text-muted-foreground/80 leading-snug">
|
||
{t`Gruppenunterhaltung`}
|
||
</span>
|
||
) : inGroup ? (
|
||
<span className="block truncate text-ui-body-sm font-medium text-muted-foreground/80 leading-snug">
|
||
{t`Projekt · Sessions & Ordner`}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{!inGroup && active ? (
|
||
<button
|
||
type="button"
|
||
title={t`Agent computer`}
|
||
onClick={() => {
|
||
const next = panel === "computer" ? null : "computer";
|
||
setPanel(next);
|
||
if (next === "computer" && active) {
|
||
// Refresh run/computer so Take control isn't stuck on a stale busyBotName.
|
||
void refreshThread(active.id).catch(() => undefined);
|
||
}
|
||
}}
|
||
data-active={panel === "computer" ? "" : undefined}
|
||
className="app-no-drag grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
|
||
>
|
||
<PanelRight strokeWidth={1.7} className="text-foreground/75 size-icon-lg" />
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
{!active && !activeGroup && emptyProjectSpace && initialBotsLoaded ? (
|
||
<div className="grid flex-1 place-items-center">
|
||
<Button
|
||
data-testid="project-start-main"
|
||
onClick={() => currentSpaceId && openProjectStart(currentSpaceId, "create")}
|
||
>
|
||
<Plus aria-hidden="true" className="size-icon-md" />
|
||
{t`Starten`}
|
||
</Button>
|
||
</div>
|
||
) : !active && !activeGroup && initialBotsLoaded ? (
|
||
<div className="grid flex-1 place-items-center">
|
||
<Button onClick={() => setShowCreateBotModal(true)}>
|
||
<Plus aria-hidden="true" className="size-icon-md" />
|
||
<Trans>Create new Bot</Trans>
|
||
</Button>
|
||
</div>
|
||
) : showProjectTimeline && bots.length > 0 ? (
|
||
<ProjectSessionTimeline
|
||
sectionId={activeGroup!.sectionId!}
|
||
sectionName={activeProjectSection?.name ?? activeGroup?.name ?? t`Projekt`}
|
||
groupId={groupId!}
|
||
groupName={activeGroup?.name ?? activeSnapshot?.groupName ?? t`Group`}
|
||
onOpenSession={openProjectSession}
|
||
onStartSession={openProjectChat}
|
||
onOpenGroupChat={openProjectGroupChat}
|
||
onStartVoiceFirst={(goalGroupId) => openProjectVoiceFirst(goalGroupId)}
|
||
/>
|
||
) : showProjectTimeline && bots.length === 0 ? (
|
||
<div className="flex flex-1 flex-col items-center justify-center gap-4 py-12">
|
||
<p className="text-ui-body text-muted-foreground">
|
||
<Trans>Erstelle zuerst einen Bot, um Projekte starten zu können.</Trans>
|
||
</p>
|
||
<Button onClick={() => setShowCreateBotModal(true)}>
|
||
<Plus aria-hidden="true" className="size-icon-md" />
|
||
<Trans>Create new Bot</Trans>
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{!callOpen && active && !inGroup ? (
|
||
<OoStage
|
||
botId={active.id}
|
||
botName={active.name}
|
||
botTitle={active.title}
|
||
botDescription={active.description}
|
||
botColor={active.color}
|
||
botStatus={active.status}
|
||
snapshot={activeSnapshot}
|
||
running={transcriptRunning}
|
||
hasMessages={transcriptMessages.length > 0}
|
||
voiceReady={Boolean(voiceStatus?.ready)}
|
||
onStartVoice={startVoiceEncounter}
|
||
/>
|
||
) : null}
|
||
{!callOpen && inGroup ? (
|
||
<OoGroupStage
|
||
groupName={activeGroup?.name ?? activeSnapshot?.groupName}
|
||
snapshot={activeSnapshot}
|
||
enrichMember={enrichStageMember}
|
||
voiceReady={Boolean(voiceStatus?.ready)}
|
||
onStartVoice={startVoiceEncounter}
|
||
/>
|
||
) : null}
|
||
<Transcript
|
||
key={activeSnapshot?.threadId}
|
||
encounterMode={encounterMode}
|
||
voiceEncounterActive={voiceEncounterActive}
|
||
activeName={
|
||
inGroup ? (activeGroup?.name ?? activeSnapshot?.groupName) : active?.name
|
||
}
|
||
onPromptSelect={(prompt) => {
|
||
void sendMessage(prompt);
|
||
}}
|
||
scrollRef={messageScroll}
|
||
artifactTarget={transcriptArtifactTarget}
|
||
messages={transcriptMessages}
|
||
olderCursor={activeSnapshot?.olderCursor ?? null}
|
||
loadingOlder={loadingOlder}
|
||
answerableAskMessageId={answerableAskMessageId}
|
||
running={transcriptRunning}
|
||
workingBots={workingBots}
|
||
onLoadOlder={loadOlder}
|
||
onOpenBot={openBot}
|
||
onOpenGroup={openGroup}
|
||
onAnswer={answerMessage}
|
||
onReply={(message) => {
|
||
setReplyTarget(message);
|
||
setReplyQuote(null);
|
||
}}
|
||
onQuote={(message, quote) => {
|
||
setReplyTarget(message);
|
||
setReplyQuote(quote);
|
||
}}
|
||
onReact={reactToMessage}
|
||
onJumpToMessage={jumpToReplyMessage}
|
||
onOpenPeerMessages={(peer) => {
|
||
setPeerConversation(peer);
|
||
}}
|
||
memberName={resolveTranscriptMemberName}
|
||
peerBot={resolveTranscriptBot}
|
||
onRefresh={refreshActiveThread}
|
||
onBotChanged={refreshBots}
|
||
onAddRoutine={addSkillRoutine}
|
||
voiceReady={Boolean(voiceStatus?.ready)}
|
||
speakingMessageId={speakingMessageId}
|
||
onSpeak={speakMessage}
|
||
/>
|
||
</>
|
||
)}
|
||
{recordingSkill ? (
|
||
<div className="px-6 pb-2 text-center text-ui-body-sm text-destructive">
|
||
<Trans>Teaching in progress. Stop teaching before sending a new message.</Trans>
|
||
</div>
|
||
) : null}
|
||
{(active || activeGroup) && !showProjectTimeline ? (
|
||
<Composer
|
||
key={inGroup ? `group:${groupId}` : `bot:${active?.id}`}
|
||
activeName={
|
||
inGroup ? (activeGroup?.name ?? activeSnapshot?.groupName) : active?.name
|
||
}
|
||
running={composerRunning}
|
||
disabled={Boolean(recordingSkill)}
|
||
pendingAttachments={activePendingAttachments}
|
||
attachmentNotice={attachmentNotice}
|
||
sendError={sendError}
|
||
runError={displayedRunError}
|
||
runErrorId={displayedRunErrorId}
|
||
onRunErrorPresented={handleRunErrorPresented}
|
||
onDismissError={dismissComposerError}
|
||
sending={sending}
|
||
fileInputRef={fileInputRef}
|
||
onAttachmentPick={onAttachmentPick}
|
||
onRemoveAttachment={removeAttachment}
|
||
onSend={sendMessage}
|
||
onStop={stopRun}
|
||
onVoice={
|
||
active || inGroup
|
||
? () => {
|
||
startVoiceEncounter();
|
||
}
|
||
: undefined
|
||
}
|
||
voiceReady={Boolean(voiceStatus?.ready)}
|
||
replyTarget={activeReplyTarget}
|
||
replyQuote={activeReplyQuote}
|
||
replyTargetName={replyTargetName}
|
||
onClearReply={clearReply}
|
||
mentionTargets={composerMentionTargets}
|
||
agentSkills={agentSkills}
|
||
onSlashOpen={refreshAgentSkills}
|
||
onSlashAction={(action) => {
|
||
if (action === "chat-settings") {
|
||
setPanel(inGroup ? "group-settings" : "settings");
|
||
return;
|
||
}
|
||
if (action === "settings-general") {
|
||
openSettings("general");
|
||
return;
|
||
}
|
||
if (action === "settings-usage") {
|
||
void rpc.usage
|
||
.summary()
|
||
.then(setUsage)
|
||
.catch(() => undefined);
|
||
openSettings("usage");
|
||
}
|
||
}}
|
||
/>
|
||
) : null}
|
||
</>
|
||
)}
|
||
</main>
|
||
|
||
<aside
|
||
data-testid="side-panel"
|
||
data-panel={panel ?? "closed"}
|
||
style={{
|
||
width:
|
||
panel &&
|
||
(active ||
|
||
activeGroup ||
|
||
panel === "create" ||
|
||
panel === "create-group" ||
|
||
panel === "browser")
|
||
? rightSidebarWidth
|
||
: 0,
|
||
}}
|
||
className={`absolute inset-y-0 end-0 z-20 flex min-h-0 shrink-0 flex-col overflow-hidden bg-background md:rounded-2xl md:border md:border-white/10 md:bg-[#0A0A0C] md:shadow-2xl md:relative ${
|
||
panel &&
|
||
(
|
||
active ||
|
||
activeGroup ||
|
||
panel === "create" ||
|
||
panel === "create-group" ||
|
||
panel === "browser"
|
||
)
|
||
? "max-w-[384px] md:max-w-none opacity-100"
|
||
: "pointer-events-none w-0 opacity-0 md:opacity-0 md:w-0"
|
||
} ${!isResizingRight ? "transition-[width,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]" : ""}`}
|
||
>
|
||
<div
|
||
onPointerDown={startResizingRight}
|
||
className="absolute -left-2 top-0 bottom-0 w-4 cursor-col-resize z-50 hidden md:block"
|
||
/>
|
||
{panel && (active || activeGroup || panel === "create" || panel === "create-group") ? (
|
||
<div className="rk-scroll h-full w-full overflow-y-auto px-5 lg:px-7 2xl:px-9 py-[17px]">
|
||
{panel !== "routine" &&
|
||
panel !== "create" &&
|
||
panel !== "create-group" &&
|
||
panel !== "group-settings" ? (
|
||
<div className="mb-4 flex items-center justify-between">
|
||
<span className="text-ui-body text-muted-foreground">
|
||
{panel === "settings" ? (
|
||
<Trans>Settings</Trans>
|
||
) : active ? (
|
||
(computer?.state ?? active.status)
|
||
) : (
|
||
<Trans>Group</Trans>
|
||
)}
|
||
</span>
|
||
<div className="flex gap-1">
|
||
{active &&
|
||
panel === "computer" &&
|
||
!computerOpen &&
|
||
computerPanelNeedsMaintenance(computer?.state, booting) ? (
|
||
<ComputerMaintenanceActions
|
||
botId={active.id}
|
||
computer={computer}
|
||
onChanged={async () => {
|
||
await refreshThread(active.id);
|
||
}}
|
||
/>
|
||
) : null}
|
||
{active ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
aria-label={panel === "settings" ? t`Show computer` : t`Show settings`}
|
||
onClick={() => setPanel(panel === "settings" ? "computer" : "settings")}
|
||
className={panel === "settings" ? "text-foreground" : "text-muted-foreground"}
|
||
>
|
||
<Settings strokeWidth={1.7} className="size-icon-md" />
|
||
</Button>
|
||
) : null}
|
||
{!panel && active ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
aria-label={t`Browser preview`}
|
||
onClick={() => setPanel("browser")}
|
||
className="text-muted-foreground"
|
||
>
|
||
<PanelRight strokeWidth={1.7} className="size-icon-md" />
|
||
</Button>
|
||
) : null}
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
aria-label={t`Close panel`}
|
||
onClick={() => setPanel(null)}
|
||
>
|
||
<X strokeWidth={1.8} className="size-icon-md" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{panel === "browser" ? (
|
||
<div className="flex h-full flex-col">
|
||
<div className="flex items-center gap-1.5 border-b px-3 py-2">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
onClick={reloadBrowser}
|
||
aria-label={t`Reload`}
|
||
className="size-icon-sm text-muted-foreground"
|
||
>
|
||
<RefreshCw strokeWidth={1.7} className="size-4" />
|
||
</Button>
|
||
<input
|
||
type="url"
|
||
value={browserUrl}
|
||
onChange={(e) => setBrowserUrl(e.target.value)}
|
||
onBlur={() => navigateBrowser(browserUrl)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") navigateBrowser(browserUrl);
|
||
}}
|
||
placeholder="http://localhost:5173"
|
||
className="flex-1 rounded-md bg-muted/60 px-2.5 py-1 text-xs text-foreground placeholder:text-muted-foreground/60 outline-none focus:ring-1 focus:ring-ring/50"
|
||
/>
|
||
{isDesktop ? (
|
||
devServerRunning ? (
|
||
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-ui-label font-medium text-emerald-400">
|
||
<span className="size-1.5 rounded-full bg-emerald-400" />
|
||
<Trans>Dev</Trans>
|
||
</span>
|
||
) : (
|
||
<Button
|
||
variant="ghost"
|
||
size="xs"
|
||
onClick={startDevServer}
|
||
className="text-ui-label text-muted-foreground hover:text-foreground"
|
||
>
|
||
<Trans>Start Dev</Trans>
|
||
</Button>
|
||
)
|
||
) : null}
|
||
{browserLoading && (
|
||
<div className="h-0.5 w-full rounded-full bg-muted/30">
|
||
<div className="h-full w-2/3 animate-pulse rounded-full bg-primary/60" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="relative flex-1 overflow-hidden bg-background">
|
||
<div className="relative h-full w-full" data-testid="browser-preview">
|
||
{agentActivities.size > 0 && (
|
||
<div className="pointer-events-none absolute inset-0">
|
||
{Array.from(agentActivities.entries()).map(([agentId, activity]) => {
|
||
const cx = Math.min(100, Math.max(0, activity.x)) + "%";
|
||
const cy = Math.min(100, Math.max(0, activity.y)) + "%";
|
||
return (
|
||
<div
|
||
key={agentId}
|
||
className="absolute transition-[left,top] duration-300 ease-out"
|
||
style={{ left: cx, top: cy }}
|
||
>
|
||
<div className="relative">
|
||
<div className="size-3 rounded-full bg-primary/60 ring-2 ring-primary" />
|
||
<div className="absolute -right-1 -top-4 whitespace-nowrap rounded bg-overlay px-1.5 py-0.5 text-ui-label text-foreground shadow-sm">
|
||
{activity.label}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{panel === "computer" && active ? (
|
||
<div>
|
||
<div
|
||
data-testid="computer-preview"
|
||
className="group relative aspect-[16/10] overflow-hidden rounded-[14px] bg-background"
|
||
>
|
||
{computerOpen ? (
|
||
<div className="grid h-full place-items-center text-sm text-muted-foreground/80">
|
||
<Trans>Open in full window</Trans>
|
||
</div>
|
||
) : computer?.kind === "desktop" ? (
|
||
<DesktopKindEmptyState className="grid h-full place-items-center px-6 text-center text-sm text-muted-foreground/80" />
|
||
) : computer?.state === "running" && embeddedScreenUrl && !computerScreenError ? (
|
||
<iframe
|
||
title={t`Bot screen preview`}
|
||
src={embeddedScreenUrl}
|
||
sandbox={screenIframeSandbox(embeddedScreenUrl)}
|
||
className="h-full w-full border-0 bg-black"
|
||
allow="clipboard-read; clipboard-write"
|
||
style={{ pointerEvents: "none" }}
|
||
/>
|
||
) : (
|
||
<div className="grid h-full place-items-center px-6 text-center text-sm text-muted-foreground/80">
|
||
{computerScreenError ??
|
||
(computersAreUnavailable(bootstrapMe?.sandboxProvider) ? (
|
||
<ComputersUnavailableHint />
|
||
) : (
|
||
computerPlaceholder(
|
||
computer?.state,
|
||
booting,
|
||
computerLabel(computer?.mode, active.name),
|
||
)
|
||
))}
|
||
</div>
|
||
)}
|
||
{!computerScreenError ? (
|
||
<button
|
||
type="button"
|
||
data-testid="computer-preview-open"
|
||
className="absolute inset-0 flex cursor-pointer items-center justify-center bg-overlay/40 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
|
||
aria-label={t`Open`}
|
||
onClick={() => void openComputer()}
|
||
>
|
||
<span className="inline-flex items-center gap-2 rounded-full bg-overlay px-3.5 py-2 text-ui-body text-foreground shadow-md">
|
||
<Maximize2 strokeWidth={1.9} aria-hidden className="size-icon-md" />
|
||
<Trans>Open</Trans>
|
||
</span>
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
<p className="mt-2 truncate text-ui-body text-muted-foreground" dir="auto">
|
||
{t`${active.name}'s screen`}
|
||
</p>
|
||
<RoutineListHeader
|
||
onCreate={() => {
|
||
setRoutineDraft(emptyRoutineDraft());
|
||
setRoutineWebhookSecret(null);
|
||
setEditingRoutine(null);
|
||
setRoutineError(null);
|
||
setPanel("routine");
|
||
}}
|
||
/>
|
||
{activeRoutines.map((routine) => {
|
||
const routineRunning =
|
||
snapshot?.run?.routineId === routine.id && isActive(snapshot.run.status);
|
||
return (
|
||
<RoutineListRow
|
||
key={routine.id}
|
||
routine={routine}
|
||
running={routineRunning}
|
||
onOpen={() => {
|
||
setRoutineDraft(draftFromRoutine(routine));
|
||
setRoutineWebhookSecret(null);
|
||
setEditingRoutine(routine);
|
||
setRoutineError(null);
|
||
setPanel("routine");
|
||
}}
|
||
onStop={() => void stopRun()}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
{panel === "create-group" ? (
|
||
<CreateGroupForm
|
||
bots={emptyProjectSpace ? (homeSpaceBots as Bot[]) : bots}
|
||
onCancel={() => setPanel(null)}
|
||
onCreate={(input) => createGroup(input)}
|
||
/>
|
||
) : null}
|
||
{panel === "group-settings" && activeGroup ? (
|
||
<GroupSettings
|
||
key={activeGroup.id}
|
||
group={activeGroup}
|
||
bots={bots}
|
||
onSave={async (input) => {
|
||
const updated = await rpc.groups.update({ groupId: activeGroup.id, ...input });
|
||
setGroups((current) =>
|
||
current.map((group) => (group.id === updated.id ? updated : group)),
|
||
);
|
||
setPanel(null);
|
||
await Promise.all([refreshBots(), refreshGroupThread(activeGroup.id)]).catch(
|
||
() => undefined,
|
||
);
|
||
}}
|
||
onRemove={async () => {
|
||
await rpc.groups.remove({ groupId: activeGroup.id });
|
||
const remainingGroups = groups.filter((group) => group.id !== activeGroup.id);
|
||
setGroups(remainingGroups);
|
||
setPanel(null);
|
||
navigate(firstThreadRoute(bots, remainingGroups), { replace: true });
|
||
await refreshBots().catch(() => undefined);
|
||
}}
|
||
/>
|
||
) : null}
|
||
{panel === "create" ? (
|
||
<CreateBotForm
|
||
onCancel={() => setPanel(null)}
|
||
onCreate={(input) => createBot(input)}
|
||
/>
|
||
) : null}
|
||
{/* Centered Create Bot Modal */}
|
||
{showCreateBotModal &&
|
||
createPortal(
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||
<button
|
||
type="button"
|
||
className="absolute inset-0 bg-black/60"
|
||
aria-label={t`Close`}
|
||
onClick={() => setShowCreateBotModal(false)}
|
||
/>
|
||
<div className="relative z-10 max-h-[90vh] w-[480px] overflow-y-auto rounded-2xl border border-white/10 bg-[#0A0A0C] p-6 shadow-2xl">
|
||
<div className="mb-4 flex items-center justify-between">
|
||
<h2 className="text-lg font-semibold text-foreground">
|
||
<Trans>Create new Bot</Trans>
|
||
</h2>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowCreateBotModal(false)}
|
||
className="text-muted-foreground hover:text-foreground"
|
||
aria-label={t`Close`}
|
||
>
|
||
<X strokeWidth={1.8} className="size-icon-md" />
|
||
</button>
|
||
</div>
|
||
<CreateBotForm
|
||
onCancel={() => setShowCreateBotModal(false)}
|
||
onCreate={async (input) => {
|
||
await createBot(input);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>,
|
||
document.body,
|
||
)}
|
||
{panel === "settings" && active ? (
|
||
<BotSettings
|
||
key={active.id}
|
||
bot={active}
|
||
memoryProviderConfigured={memoryProviderConfig != null}
|
||
onSkillsChange={setAgentSkills}
|
||
onSave={async ({ computerMode, ...patch }) => {
|
||
if (computerMode !== active.computerMode) {
|
||
await rpc.bots.setComputer({
|
||
botId: active.id,
|
||
mode: computerMode,
|
||
});
|
||
}
|
||
await rpc.bots.update({ botId: active.id, ...patch });
|
||
await refreshBots();
|
||
}}
|
||
onExport={async () => {
|
||
const manifest = await rpc.export.bot({ botId: active.id });
|
||
const blob = new Blob([JSON.stringify(manifest, null, 2)], {
|
||
type: "application/json",
|
||
});
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = `${active.name.toLowerCase().replace(/\s+/g, "-")}-export.json`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
}}
|
||
onClear={() => setClearTarget({ kind: "bot", chat: active })}
|
||
/>
|
||
) : null}
|
||
{panel === "routine" && active ? (
|
||
<RoutineEditor
|
||
draft={routineDraft}
|
||
onChange={setRoutineDraft}
|
||
editing={editingRoutine}
|
||
timezone={editingRoutine?.timezone ?? localTimezone()}
|
||
webhook={{
|
||
path:
|
||
typeof window !== "undefined"
|
||
? `${window.location.origin}/api/v1/bots/${active.id}/webhook`
|
||
: `/api/v1/bots/${active.id}/webhook`,
|
||
secret: routineWebhookSecret,
|
||
configured: active.webhookConfigured || Boolean(routineWebhookSecret),
|
||
}}
|
||
githubPath={
|
||
typeof window !== "undefined"
|
||
? `${window.location.origin}/api/v1/bots/${active.id}/github`
|
||
: `/api/v1/bots/${active.id}/github`
|
||
}
|
||
messageProviders={messagingProviders}
|
||
saving={savingRoutine}
|
||
running={runningRoutine}
|
||
error={routineError}
|
||
onBack={() => setPanel("computer")}
|
||
onClose={() => setPanel(null)}
|
||
onEnsureWebhook={async () => {
|
||
await ensureWebhookSecret(active.id);
|
||
}}
|
||
onSave={async () => {
|
||
if (routineSavePending.current) return;
|
||
const targetBotId = active.id;
|
||
const targetRoutine = editingRoutine;
|
||
if (targetRoutine && targetRoutine.botId !== targetBotId) return;
|
||
if (
|
||
!routineDraft.schedules.length &&
|
||
!routineDraft.webhookEnabled &&
|
||
!routineDraft.githubEnabled &&
|
||
!routineDraft.messageProvider
|
||
) {
|
||
setRoutineError(t`Add a schedule, webhook, GitHub, or message trigger`);
|
||
return;
|
||
}
|
||
const saveRequest = ++routineSaveRequest.current;
|
||
routineSavePending.current = true;
|
||
setSavingRoutine(true);
|
||
setRoutineError(null);
|
||
try {
|
||
if (
|
||
(routineDraft.webhookEnabled || routineDraft.githubEnabled) &&
|
||
!active.webhookConfigured &&
|
||
!routineWebhookSecret
|
||
) {
|
||
await ensureWebhookSecret(targetBotId);
|
||
}
|
||
const crons = routineDraft.schedules.map(cronFromPreset);
|
||
let saved: Routine;
|
||
if (targetRoutine) {
|
||
const armOneShot = routineNeedsOneShotArm(targetRoutine, crons);
|
||
let runAt: string | undefined;
|
||
if (armOneShot) {
|
||
if (!routineDraft.runAtLocal) {
|
||
setRoutineError(t`Add a run time for this one-shot.`);
|
||
return;
|
||
}
|
||
const parsed = new Date(routineDraft.runAtLocal);
|
||
if (!Number.isFinite(parsed.getTime()) || parsed.getTime() <= Date.now()) {
|
||
setRoutineError(t`Run time must be in the future.`);
|
||
return;
|
||
}
|
||
runAt = parsed.toISOString();
|
||
}
|
||
saved = await rpc.routines.update({
|
||
routineId: targetRoutine.id,
|
||
name: routineDraft.name || t`Routine`,
|
||
prompt: routineDraft.prompt || t`Check in.`,
|
||
crons,
|
||
active: armOneShot ? true : routineDraft.active,
|
||
webhookEnabled: routineDraft.webhookEnabled,
|
||
githubEnabled: routineDraft.githubEnabled,
|
||
messageProvider: routineDraft.messageProvider,
|
||
...(runAt ? { runAt } : {}),
|
||
});
|
||
} else {
|
||
saved = await rpc.routines.create({
|
||
botId: targetBotId,
|
||
name: routineDraft.name || t`Routine`,
|
||
prompt: routineDraft.prompt || t`Check in.`,
|
||
crons,
|
||
timezone: localTimezone(),
|
||
active: routineDraft.active,
|
||
notify: true,
|
||
webhookEnabled: routineDraft.webhookEnabled,
|
||
githubEnabled: routineDraft.githubEnabled,
|
||
messageProvider: routineDraft.messageProvider,
|
||
});
|
||
}
|
||
if (
|
||
routineSaveRequest.current === saveRequest &&
|
||
activeBotId.current === targetBotId
|
||
) {
|
||
setEditingRoutine(saved);
|
||
setRoutineDraft(draftFromRoutine(saved));
|
||
}
|
||
} catch (error) {
|
||
if (
|
||
routineSaveRequest.current !== saveRequest ||
|
||
activeBotId.current !== targetBotId
|
||
) {
|
||
return;
|
||
}
|
||
setRoutineError(
|
||
error instanceof Error ? error.message : t`Could not save routine`,
|
||
);
|
||
return;
|
||
} finally {
|
||
routineSavePending.current = false;
|
||
setSavingRoutine(false);
|
||
}
|
||
if (
|
||
routineSaveRequest.current !== saveRequest ||
|
||
activeBotId.current !== targetBotId
|
||
) {
|
||
return;
|
||
}
|
||
await refreshThread(targetBotId).catch(() => undefined);
|
||
}}
|
||
onTestRun={async () => {
|
||
if (routineRunPending.current) return;
|
||
const targetBotId = active.id;
|
||
const targetRoutine = editingRoutine;
|
||
if (!targetRoutine) return;
|
||
routineRunPending.current = true;
|
||
setRunningRoutine(true);
|
||
setRoutineError(null);
|
||
try {
|
||
await rpc.routines.testRun({ routineId: targetRoutine.id });
|
||
await refreshThread(targetBotId);
|
||
} catch (error) {
|
||
if (activeBotId.current === targetBotId) {
|
||
setRoutineError(
|
||
error instanceof Error ? error.message : t`Could not run routine`,
|
||
);
|
||
}
|
||
} finally {
|
||
routineRunPending.current = false;
|
||
setRunningRoutine(false);
|
||
}
|
||
}}
|
||
onDelete={() => {
|
||
if (editingRoutine) {
|
||
setDeleteRoutineTarget(editingRoutine);
|
||
return;
|
||
}
|
||
setPanel("computer");
|
||
}}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</aside>
|
||
|
||
<Suspense fallback={null}>
|
||
{contextChat && botMenu ? (
|
||
<BotContextMenu
|
||
bot={contextChat}
|
||
position={botMenu.position}
|
||
onClose={closeBotMenu}
|
||
sections={botSections}
|
||
onTogglePinned={() => {
|
||
setBotMenu(null);
|
||
const request = contextBot
|
||
? rpc.bots.update({ botId: contextBot.id, pinned: !contextBot.pinned })
|
||
: rpc.groups.update({
|
||
groupId: contextGroup!.id,
|
||
pinned: !contextGroup!.pinned,
|
||
});
|
||
void request.then(() => refreshBots());
|
||
}}
|
||
onToggleUnread={() => {
|
||
const unread = !contextChat.unread;
|
||
setBotMenu(null);
|
||
if (contextBot) {
|
||
const request = unread ? markBotUnread(contextBot.id) : markBotRead(contextBot.id);
|
||
void request.catch(() => undefined);
|
||
} else {
|
||
const request = unread
|
||
? rpc.threads.markUnread({ groupId: contextGroup!.id })
|
||
: rpc.threads.markRead({ groupId: contextGroup!.id });
|
||
void request
|
||
.then(() =>
|
||
setGroups((current) =>
|
||
current.map((group) =>
|
||
group.id === contextGroup!.id ? { ...group, unread } : group,
|
||
),
|
||
),
|
||
)
|
||
.catch(() => undefined);
|
||
}
|
||
}}
|
||
onMoveToSection={(sectionId) => {
|
||
setBotMenu(null);
|
||
if (sectionId === contextChat.sectionId) return;
|
||
const request = contextBot
|
||
? rpc.bots.update({ botId: contextBot.id, sectionId })
|
||
: rpc.groups.update({ groupId: contextGroup!.id, sectionId });
|
||
void request.then(() => refreshBots());
|
||
}}
|
||
onCreateSection={() => {
|
||
setNewSectionTarget(
|
||
contextBot
|
||
? { kind: "bot", chat: contextBot }
|
||
: { kind: "group", chat: contextGroup! },
|
||
);
|
||
setBotMenu(null);
|
||
}}
|
||
onRenameSection={(sectionId) => {
|
||
const section = botSections.find((item) => item.id === sectionId);
|
||
const spaceId = bootstrapMe?.spaceId;
|
||
if (section && spaceId) setRenameSectionTarget({ section, spaceId });
|
||
setBotMenu(null);
|
||
}}
|
||
onEdit={() => {
|
||
navigate(contextBot ? `/app/${contextBot.id}` : `/app/g/${contextGroup!.id}`);
|
||
setPanel(contextBot ? "settings" : "group-settings");
|
||
setBotMenu(null);
|
||
}}
|
||
onDuplicate={() => {
|
||
setBotMenu(null);
|
||
const request = contextBot
|
||
? rpc.bots.duplicate({ botId: contextBot.id })
|
||
: rpc.groups.duplicate({ groupId: contextGroup!.id });
|
||
void request.then(async (chat) => {
|
||
await refreshBots();
|
||
navigate(contextBot ? `/app/${chat.id}` : `/app/g/${chat.id}`);
|
||
});
|
||
}}
|
||
onClear={() => {
|
||
setClearTarget(
|
||
contextBot
|
||
? { kind: "bot", chat: contextBot }
|
||
: { kind: "group", chat: contextGroup! },
|
||
);
|
||
setBotMenu(null);
|
||
}}
|
||
onArchive={() => {
|
||
setBotMenu(null);
|
||
const request = contextBot
|
||
? rpc.bots.archive({ botId: contextBot.id })
|
||
: rpc.groups.archive({ groupId: contextGroup!.id });
|
||
void request.then(() => refreshBots(true));
|
||
}}
|
||
onDelete={() => {
|
||
if (contextBot) setDeleteTarget(contextBot);
|
||
else setDeleteGroupTarget(contextGroup!);
|
||
setBotMenu(null);
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{spaceMenu ? (
|
||
<DropdownMenu
|
||
open
|
||
onOpenChange={(open) => {
|
||
if (!open) closeSpaceMenu();
|
||
}}
|
||
>
|
||
{/* Invisible anchor at the pointer position, mirroring the bot menu. */}
|
||
<DropdownMenuTrigger
|
||
render={
|
||
<button
|
||
type="button"
|
||
tabIndex={-1}
|
||
aria-hidden
|
||
className="fixed size-0 p-0 opacity-0"
|
||
style={{ left: spaceMenu.position.x, top: spaceMenu.position.y }}
|
||
/>
|
||
}
|
||
/>
|
||
<DropdownMenuContent
|
||
aria-label={t`Actions for space`}
|
||
align="start"
|
||
sideOffset={0}
|
||
className="w-[220px]"
|
||
>
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
onClick={() => {
|
||
const target = spaces.find((space) => space.id === spaceMenu.id);
|
||
if (target) setDeleteSpaceTarget(target);
|
||
setSpaceMenu(null);
|
||
}}
|
||
>
|
||
<Trash2 />
|
||
{t`Delete space`}
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
) : null}
|
||
|
||
{deleteTarget ? (
|
||
<DeleteBotDialog
|
||
bot={deleteTarget}
|
||
onCancel={() => setDeleteTarget(null)}
|
||
onConfirm={async (deleteMemories) => {
|
||
await rpc.bots.remove({ botId: deleteTarget.id, deleteMemories });
|
||
setDeleteTarget(null);
|
||
setPanel(null);
|
||
await refreshBots(true);
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{deleteGroupTarget ? (
|
||
<DeleteItemDialog
|
||
item={deleteGroupTarget}
|
||
noun="group"
|
||
onCancel={() => setDeleteGroupTarget(null)}
|
||
onConfirm={async () => {
|
||
await rpc.groups.remove({ groupId: deleteGroupTarget.id });
|
||
setDeleteGroupTarget(null);
|
||
setPanel(null);
|
||
await refreshBots(true);
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{deleteSpaceTarget ? (
|
||
<DeleteItemDialog
|
||
item={deleteSpaceTarget}
|
||
noun="space"
|
||
description={
|
||
<Trans>Only empty spaces can be deleted. Delete its bots and groups first.</Trans>
|
||
}
|
||
onCancel={() => setDeleteSpaceTarget(null)}
|
||
onConfirm={async () => {
|
||
const targetId = deleteSpaceTarget.id;
|
||
const result = await rpc.spaces.remove({ spaceId: targetId });
|
||
setDeleteSpaceTarget(null);
|
||
setPanel(null);
|
||
const effectiveSpaceId = selectedSpaceId() ?? bootstrapMe?.spaceId;
|
||
if (effectiveSpaceId === targetId) {
|
||
// The auth boundary changed, so reload like a space switch.
|
||
if (selectSpace(result.activeSpaceId)) {
|
||
window.location.assign("/app");
|
||
return;
|
||
}
|
||
}
|
||
await refreshBots(true);
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{newSectionTarget ? (
|
||
<NewBotSectionDialog
|
||
bot={newSectionTarget.chat}
|
||
onCancel={() => setNewSectionTarget(null)}
|
||
onConfirm={async (name) => {
|
||
await rpc.botSections.create(
|
||
newSectionTarget.kind === "bot"
|
||
? { botId: newSectionTarget.chat.id, name }
|
||
: { groupId: newSectionTarget.chat.id, name },
|
||
);
|
||
setNewSectionTarget(null);
|
||
await refreshBots();
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{renameSectionTarget ? (
|
||
<RenameBotSectionDialog
|
||
section={renameSectionTarget.section}
|
||
onCancel={() => setRenameSectionTarget(null)}
|
||
onConfirm={async (name) => {
|
||
await rpc.botSections.update(
|
||
{
|
||
sectionId: renameSectionTarget.section.id,
|
||
name,
|
||
},
|
||
{ context: { spaceId: renameSectionTarget.spaceId } },
|
||
);
|
||
setRenameSectionTarget(null);
|
||
await refreshBots();
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{sectionMenu ? (
|
||
<DropdownMenu
|
||
open
|
||
onOpenChange={(open) => {
|
||
if (!open) closeSectionMenu();
|
||
}}
|
||
>
|
||
<DropdownMenuTrigger
|
||
render={
|
||
<button
|
||
type="button"
|
||
tabIndex={-1}
|
||
aria-hidden
|
||
className="fixed size-0 p-0 opacity-0"
|
||
style={{ left: sectionMenu.position.x, top: sectionMenu.position.y }}
|
||
/>
|
||
}
|
||
/>
|
||
<DropdownMenuContent
|
||
aria-label={t`Actions for ${sectionMenu.section.name}`}
|
||
align="start"
|
||
sideOffset={0}
|
||
className="w-[220px]"
|
||
>
|
||
<DropdownMenuItem
|
||
onClick={() => {
|
||
setRenameSectionTarget({
|
||
section: sectionMenu.section,
|
||
spaceId: sectionMenu.spaceId,
|
||
});
|
||
setSectionMenu(null);
|
||
}}
|
||
>
|
||
<Pencil />
|
||
{t`Rename section`}
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
) : null}
|
||
|
||
<CommandPalette
|
||
open={commandPaletteOpen}
|
||
onOpenChange={setCommandPaletteOpen}
|
||
bots={bots}
|
||
onSelectBot={(id) => {
|
||
setMobileSidebarOpen(false);
|
||
navigate(`/app/${id}`);
|
||
}}
|
||
/>
|
||
|
||
{newSpaceOpen ? (
|
||
<NewSpaceDialog
|
||
variant={newSpaceDialogVariant}
|
||
onCancel={() => setNewSpaceOpen(false)}
|
||
onConfirm={async ({ name, workspacePath }) => {
|
||
const space = await rpc.spaces.create({
|
||
name,
|
||
...(workspacePath ? { workspacePath } : {}),
|
||
});
|
||
setNewSpaceOpen(false);
|
||
if (!selectSpace(space.id)) {
|
||
await refreshBots();
|
||
return;
|
||
}
|
||
window.location.assign(newSpaceDialogVariant === "project" ? "/app" : "/onboarding");
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{pickerInfoTopic ? (
|
||
<PickerInfoDialog topic={pickerInfoTopic} onClose={() => setPickerInfoTopic(null)} />
|
||
) : null}
|
||
|
||
{clearTarget ? (
|
||
<ClearConversationDialog
|
||
bot={clearTarget.chat}
|
||
onCancel={() => setClearTarget(null)}
|
||
onConfirm={async () => {
|
||
await rpc.threads.clear(
|
||
clearTarget.kind === "bot"
|
||
? { botId: clearTarget.chat.id }
|
||
: { groupId: clearTarget.chat.id },
|
||
);
|
||
if (
|
||
(clearTarget.kind === "bot" && active?.id === clearTarget.chat.id) ||
|
||
(clearTarget.kind === "group" && activeGroup?.id === clearTarget.chat.id)
|
||
) {
|
||
expandedHistoryThread.current = null;
|
||
pinnedAroundRef.current = null;
|
||
historyEpoch.current += 1;
|
||
updateSnapshot((current) =>
|
||
current ? { ...current, messages: [], olderCursor: null, run: null } : current,
|
||
);
|
||
}
|
||
setClearTarget(null);
|
||
await refreshBots();
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{deleteRoutineTarget ? (
|
||
<DeleteItemDialog
|
||
item={deleteRoutineTarget}
|
||
noun="routine"
|
||
onCancel={() => setDeleteRoutineTarget(null)}
|
||
onConfirm={async () => {
|
||
const target = deleteRoutineTarget;
|
||
await rpc.routines.remove({ routineId: target.id });
|
||
setDeleteRoutineTarget(null);
|
||
setEditingRoutine((current) => (current?.id === target.id ? null : current));
|
||
if (activeBotId.current !== target.botId) return;
|
||
await refreshThread(target.botId);
|
||
if (activeBotId.current === target.botId) setPanel("computer");
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{pluginsOpen ? (
|
||
<PluginsOverlay
|
||
activeBotId={activeBotId.current}
|
||
onClose={() => setPluginsOpen(false)}
|
||
onOpenMcp={() => {
|
||
setPluginsOpen(false);
|
||
setMcpOpen(true);
|
||
}}
|
||
/>
|
||
) : null}
|
||
{mcpOpen ? <McpServersOverlay onClose={() => setMcpOpen(false)} /> : null}
|
||
{messagingSettingsOpen ? (
|
||
<MessagingSettingsOverlay onClose={() => setMessagingSettingsOpen(false)} />
|
||
) : null}
|
||
</Suspense>
|
||
|
||
<Suspense fallback={null}>
|
||
{settingsOpen ? (
|
||
<SettingsOverlay
|
||
name={userName}
|
||
email={session.data?.user.email}
|
||
usage={usage}
|
||
initialSection={settingsSection}
|
||
avatarStyle={bootstrapMe?.avatarStyle ?? "robot"}
|
||
isDeploymentOwner={bootstrapMe?.isDeploymentOwner === true}
|
||
sandboxProvider={bootstrapMe?.sandboxProvider}
|
||
messagingEnabled={messagingSurfaceEnabled}
|
||
onOpenMessaging={() => {
|
||
setSettingsOpen(false);
|
||
setMessagingSettingsOpen(true);
|
||
}}
|
||
tradingStatus={tradingStatus}
|
||
onAvatarStyleChange={async (avatarStyle) => {
|
||
const nextMe = await rpc.preferences.update({ avatarStyle });
|
||
setBootstrapMe(nextMe);
|
||
}}
|
||
memoryConfig={memoryProviderConfig}
|
||
onMemoryConfigChange={(config) => {
|
||
memoryProviderConfigRevision.current += 1;
|
||
setMemoryProviderConfig(config);
|
||
}}
|
||
onVoiceStatusMaybeChanged={async () => {
|
||
try {
|
||
setVoiceStatus(
|
||
await Promise.race([rpc.voice.status(), voiceStatusRefreshTimeout()]),
|
||
);
|
||
} catch {
|
||
// Prefer reopening Voice settings over CallView with stale readiness.
|
||
setVoiceStatus(null);
|
||
}
|
||
}}
|
||
activeBotId={activeBotId.current}
|
||
onOpenMcp={() => {
|
||
setSettingsOpen(false);
|
||
setMcpOpen(true);
|
||
}}
|
||
onClose={() => {
|
||
setSettingsOpen(false);
|
||
setSettingsSection("general");
|
||
}}
|
||
/>
|
||
) : null}
|
||
{peerConversation && active ? (
|
||
<PeerMessagesOverlay
|
||
botId={active.id}
|
||
botName={active.name}
|
||
botColor={active.color}
|
||
peerBotId={peerConversation.peerBotId}
|
||
peerBotName={peerConversation.peerBotName}
|
||
peerBotColor={
|
||
resolveTranscriptBot(peerConversation.peerBotId)?.color ?? FALLBACK_BOT_COLOR
|
||
}
|
||
onClose={() => setPeerConversation(null)}
|
||
/>
|
||
) : null}
|
||
{callOpen && voiceCallBot ? (
|
||
<CallView
|
||
botId={voiceCallBot.id}
|
||
botName={voiceCallBot.name}
|
||
botTitle={voiceCallBot.title}
|
||
botDescription={voiceCallBot.description}
|
||
botColor={voiceCallBot.color}
|
||
botStatus={voiceCallBot.status}
|
||
transcribe={Boolean(voiceStatus?.transcribe)}
|
||
snapshot={activeSnapshot}
|
||
onSend={sendMessage}
|
||
onFollowUp={followUpMessage}
|
||
onAnswer={answerMessage}
|
||
onClose={closeVoiceStage}
|
||
/>
|
||
) : null}
|
||
</Suspense>
|
||
|
||
{booting ? (
|
||
<div className="absolute inset-0 z-30 flex flex-col items-center justify-center gap-[22px] bg-background/95">
|
||
<div className="text-[19px] font-medium text-foreground">
|
||
<Trans>Booting up {active?.name}’s computer</Trans>
|
||
</div>
|
||
<div className="h-[5px] w-[min(420px,70%)] overflow-hidden rounded-full bg-accent">
|
||
<div className="h-full w-2/3 rounded-full bg-primary" />
|
||
</div>
|
||
</div>
|
||
) : computerOpen && active ? (
|
||
<div className="fixed inset-0 z-30 bg-background">
|
||
<div
|
||
data-testid="computer-viewport"
|
||
className="fixed inset-x-0 top-0 flex flex-col bg-background"
|
||
style={{
|
||
height: computerViewport ? `${computerViewport.height}px` : "100dvh",
|
||
top: computerViewport ? `${computerViewport.offsetTop}px` : undefined,
|
||
}}
|
||
>
|
||
<div
|
||
data-testid="computer-chrome"
|
||
className="flex items-center justify-between gap-4 border-b border-sidebar-border px-[18px] py-3.5"
|
||
>
|
||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||
<BotAvatar
|
||
color={active.color}
|
||
identity={active.id}
|
||
size={28}
|
||
status={active.status}
|
||
/>
|
||
{recordingSkill ? (
|
||
<TeachRecordingChrome
|
||
recording={recordingSkill}
|
||
busy={teachBusy}
|
||
onStop={stopTeaching}
|
||
variant="overlay"
|
||
/>
|
||
) : (
|
||
<span className="truncate text-ui-body font-medium text-foreground" dir="auto">
|
||
{computerLabel(computer?.mode, active.name)}
|
||
</span>
|
||
)}
|
||
{!recordingSkill && hasControl ? (
|
||
computer?.takeoverRequested ? (
|
||
<span className="rounded-full bg-warning/15 px-[11px] py-1 text-ui-body-sm text-warning">
|
||
<Trans>Needs you</Trans>
|
||
</span>
|
||
) : (
|
||
<span className="rounded-full bg-success/15 px-[11px] py-1 text-ui-body-sm text-success">
|
||
<Trans>You have control</Trans>
|
||
</span>
|
||
)
|
||
) : null}
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{composerRunning ? (
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
aria-label={t`Stop`}
|
||
data-testid="computer-overlay-stop"
|
||
onClick={() => void stopRun()}
|
||
disabled={sending}
|
||
>
|
||
<Trans>Stop</Trans>
|
||
</Button>
|
||
) : null}
|
||
{recordingSkill ? (
|
||
<TeachStopButton busy={teachBusy} onStop={stopTeaching} />
|
||
) : hasControl ? (
|
||
<ComputerReleaseActions
|
||
takeoverRequested={Boolean(computer?.takeoverRequested)}
|
||
onRelease={releaseComputer}
|
||
/>
|
||
) : null}
|
||
{active && !recordingSkill ? (
|
||
<TeachComputerOverlayControl
|
||
key={active.id}
|
||
botId={active.id}
|
||
computer={computer}
|
||
busy={teachBusy}
|
||
onRefresh={refreshActiveTeaching}
|
||
/>
|
||
) : null}
|
||
{active && !recordingSkill ? (
|
||
<ComputerMaintenanceActions
|
||
botId={active.id}
|
||
computer={computer}
|
||
onChanged={async () => {
|
||
await refreshThread(active.id);
|
||
}}
|
||
/>
|
||
) : null}
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
className="text-muted-foreground"
|
||
aria-label={t`Close computer`}
|
||
onClick={() => setComputerOpen(false)}
|
||
>
|
||
<X strokeWidth={1.8} className="size-icon-md" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{sendError ? (
|
||
<div
|
||
role="alert"
|
||
className="border-b border-destructive/40 bg-destructive/10 px-[18px] py-2 text-ui-body-sm text-destructive"
|
||
>
|
||
{sendError}
|
||
</div>
|
||
) : null}
|
||
<div className="relative min-h-0 flex-1 bg-background">
|
||
{computer?.kind === "desktop" ? (
|
||
<DesktopKindEmptyState className="grid h-full place-items-center px-8 text-center text-sm text-muted-foreground/80" />
|
||
) : computer?.state === "running" && embeddedScreenUrl && !computerScreenError ? (
|
||
<>
|
||
<iframe
|
||
title={t`Bot screen`}
|
||
src={embeddedScreenUrl}
|
||
sandbox={screenIframeSandbox(embeddedScreenUrl)}
|
||
className="h-full w-full border-0 bg-black"
|
||
allow="clipboard-read; clipboard-write; fullscreen"
|
||
style={{
|
||
pointerEvents: recordingSkill || !hasControl ? "none" : "auto",
|
||
}}
|
||
/>
|
||
{active ? (
|
||
<TeachCaptureOverlay
|
||
botId={active.id}
|
||
skill={recordingSkill}
|
||
enabled={Boolean(recordingSkill)}
|
||
screenWidth={computer?.screenWidth}
|
||
screenHeight={computer?.screenHeight}
|
||
/>
|
||
) : null}
|
||
</>
|
||
) : (
|
||
<div className="grid h-full place-items-center text-sm text-muted-foreground/80">
|
||
{computerScreenError ??
|
||
(computer?.state === "suspended"
|
||
? t`Computer is asleep`
|
||
: computerLabel(computer?.mode, active.name))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
|
||
return <AvatarStyleProvider value="organic">{shell}</AvatarStyleProvider>;
|
||
}
|
||
|
||
const Transcript = memo(function Transcript({
|
||
scrollRef,
|
||
artifactTarget,
|
||
messages,
|
||
olderCursor,
|
||
loadingOlder,
|
||
answerableAskMessageId,
|
||
running,
|
||
workingBots,
|
||
onLoadOlder,
|
||
onOpenBot,
|
||
onOpenGroup,
|
||
onAnswer,
|
||
onReply,
|
||
onQuote,
|
||
onReact,
|
||
onJumpToMessage,
|
||
onOpenPeerMessages,
|
||
memberName,
|
||
peerBot,
|
||
onRefresh,
|
||
onBotChanged,
|
||
onAddRoutine,
|
||
voiceReady,
|
||
speakingMessageId,
|
||
onSpeak,
|
||
activeName,
|
||
onPromptSelect,
|
||
encounterMode = false,
|
||
voiceEncounterActive = false,
|
||
}: {
|
||
scrollRef: RefObject<HTMLDivElement | null>;
|
||
artifactTarget: ArtifactTarget;
|
||
messages: ThreadMessage[];
|
||
olderCursor: number | null;
|
||
loadingOlder: boolean;
|
||
answerableAskMessageId: string | null;
|
||
running: boolean;
|
||
workingBots: GroupAvatarMember[];
|
||
onLoadOlder: () => void | Promise<void>;
|
||
onOpenBot: (botId: string) => void;
|
||
onOpenGroup: (groupId: string) => void;
|
||
onAnswer: (message: ThreadMessage, text: string) => Promise<void>;
|
||
onReply: (message: ThreadMessage) => void;
|
||
onQuote: (message: ThreadMessage, quote: string) => void;
|
||
onReact: (message: ThreadMessage, reaction: MessageReaction) => Promise<void>;
|
||
onJumpToMessage: (messageId: string) => void;
|
||
onOpenPeerMessages: (peer: { peerBotId: string; peerBotName: string }) => void;
|
||
memberName?: (botId: string | undefined) => string | undefined;
|
||
peerBot: (botId: string) => { color: string; status?: string } | undefined;
|
||
onRefresh: () => Promise<void>;
|
||
onBotChanged: () => Promise<void>;
|
||
onAddRoutine: (name: string, prompt: string) => void;
|
||
voiceReady: boolean;
|
||
speakingMessageId: string | null;
|
||
onSpeak: (message: ThreadMessage) => void;
|
||
activeName?: string;
|
||
onPromptSelect?: (prompt: string) => void;
|
||
encounterMode?: boolean;
|
||
voiceEncounterActive?: boolean;
|
||
}) {
|
||
const { t } = useLingui();
|
||
const [atEnd, setAtEnd] = useState(true);
|
||
const following = useRef(true);
|
||
const autoScrolling = useRef(false);
|
||
const lastScrollTop = useRef<number | null>(null);
|
||
const autoScrollTimer = useRef<number | undefined>(undefined);
|
||
const jumpButtonRef = useRef<HTMLButtonElement>(null);
|
||
const messageById = useMemo(
|
||
() => new Map(messages.map((message) => [message.id, message])),
|
||
[messages],
|
||
);
|
||
const reactionView = useMemo(() => projectMessageReactions(messages), [messages]);
|
||
const transcriptSubordinate = encounterMode && voiceEncounterActive;
|
||
const workingBotName = workingBots.length === 1 ? workingBots[0]?.name : undefined;
|
||
const workingLabel =
|
||
workingBotName != null && workingBotName !== ""
|
||
? t`${workingBotName} is working`
|
||
: t`Bots are working`;
|
||
const [quoteDraft, setQuoteDraft] = useState<{
|
||
message: ThreadMessage;
|
||
text: string;
|
||
range: Range;
|
||
} | null>(null);
|
||
const selectingWithMouse = useRef(false);
|
||
|
||
const evaluateSelection = useCallback(() => {
|
||
const selection = window.getSelection();
|
||
if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
|
||
setQuoteDraft(null);
|
||
return;
|
||
}
|
||
const range = selection.getRangeAt(0);
|
||
const rowOf = (node: Node) =>
|
||
(node instanceof Element ? node : node.parentElement)?.closest<HTMLElement>(
|
||
"[data-message-id]",
|
||
) ?? null;
|
||
const draft = quoteDraftForSelection(
|
||
{
|
||
startRow: rowOf(range.startContainer),
|
||
endRow: rowOf(range.endContainer),
|
||
text: selection.toString(),
|
||
},
|
||
messageById,
|
||
);
|
||
setQuoteDraft(draft ? { ...draft, range } : null);
|
||
}, [messageById]);
|
||
|
||
// Keyboard and assistive-tech selections never reach a mouseup, so the pill
|
||
// lifecycle listens on selectionchange; the mouse flag keeps it hidden while
|
||
// a drag is still in flight.
|
||
useEffect(() => {
|
||
const onMouseDown = (event: MouseEvent) => {
|
||
selectingWithMouse.current = true;
|
||
if ((event.target as Element | null)?.closest?.("[data-quote-selection]")) return;
|
||
setQuoteDraft(null);
|
||
};
|
||
const onMouseUp = () => {
|
||
selectingWithMouse.current = false;
|
||
evaluateSelection();
|
||
};
|
||
const onSelectionChange = () => {
|
||
if (!selectingWithMouse.current) evaluateSelection();
|
||
};
|
||
const onKey = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape") setQuoteDraft(null);
|
||
};
|
||
document.addEventListener("mousedown", onMouseDown, true);
|
||
document.addEventListener("mouseup", onMouseUp, true);
|
||
document.addEventListener("selectionchange", onSelectionChange);
|
||
document.addEventListener("keydown", onKey);
|
||
return () => {
|
||
document.removeEventListener("mousedown", onMouseDown, true);
|
||
document.removeEventListener("mouseup", onMouseUp, true);
|
||
document.removeEventListener("selectionchange", onSelectionChange);
|
||
document.removeEventListener("keydown", onKey);
|
||
};
|
||
}, [evaluateSelection]);
|
||
const snapToEnd = useCallback(() => {
|
||
const element = scrollRef.current;
|
||
if (!element) return;
|
||
following.current = true;
|
||
autoScrolling.current = false;
|
||
setAtEnd(true);
|
||
element.scrollTo({ top: element.scrollHeight, behavior: "auto" });
|
||
}, [scrollRef]);
|
||
|
||
const jumpToLatest = useCallback(() => {
|
||
const element = scrollRef.current;
|
||
if (!element) return;
|
||
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||
following.current = true;
|
||
autoScrolling.current = !reducedMotion;
|
||
setAtEnd(true);
|
||
element.scrollTo({
|
||
top: element.scrollHeight,
|
||
behavior: reducedMotion ? "auto" : "smooth",
|
||
});
|
||
window.clearTimeout(autoScrollTimer.current);
|
||
// Fallback only: onScroll clears autoScrolling once near-end is reached.
|
||
autoScrollTimer.current = window.setTimeout(
|
||
() => {
|
||
autoScrolling.current = false;
|
||
},
|
||
reducedMotion ? 0 : 2_000,
|
||
);
|
||
}, [scrollRef]);
|
||
|
||
useLayoutEffect(() => {
|
||
if (following.current) snapToEnd();
|
||
}, [messages, running, snapToEnd]);
|
||
|
||
useLayoutEffect(() => {
|
||
const button = jumpButtonRef.current;
|
||
if (atEnd && button && document.activeElement === button) {
|
||
button.blur();
|
||
}
|
||
}, [atEnd]);
|
||
|
||
const loadOlder = useCallback(() => {
|
||
const wasFollowing = following.current;
|
||
// Prepend must not race the messages-driven snap-to-end follow path.
|
||
following.current = false;
|
||
autoScrolling.current = false;
|
||
const pending = onLoadOlder();
|
||
if (!pending) return;
|
||
return Promise.resolve(pending).catch((error) => {
|
||
const element = scrollRef.current;
|
||
if (wasFollowing && element && transcriptIsNearEnd(element)) {
|
||
following.current = true;
|
||
setAtEnd(true);
|
||
}
|
||
throw error;
|
||
});
|
||
}, [onLoadOlder, scrollRef]);
|
||
|
||
useEffect(
|
||
() => () => {
|
||
window.clearTimeout(autoScrollTimer.current);
|
||
},
|
||
[],
|
||
);
|
||
|
||
return (
|
||
<div className="relative flex min-h-0 flex-1">
|
||
<div
|
||
ref={scrollRef}
|
||
data-testid="transcript"
|
||
onPointerDown={(event) => {
|
||
lastScrollTop.current = event.currentTarget.scrollTop;
|
||
autoScrolling.current = false;
|
||
following.current = false;
|
||
}}
|
||
onTouchStart={(event) => {
|
||
lastScrollTop.current = event.currentTarget.scrollTop;
|
||
autoScrolling.current = false;
|
||
following.current = false;
|
||
}}
|
||
onWheel={(event) => {
|
||
if (event.deltaY < 0) {
|
||
lastScrollTop.current = event.currentTarget.scrollTop;
|
||
autoScrolling.current = false;
|
||
following.current = false;
|
||
}
|
||
}}
|
||
onScroll={(event) => {
|
||
const scrolledDown = transcriptMovedDown(
|
||
lastScrollTop.current,
|
||
event.currentTarget.scrollTop,
|
||
);
|
||
lastScrollTop.current = event.currentTarget.scrollTop;
|
||
const nearEnd = transcriptIsNearEnd(event.currentTarget);
|
||
setAtEnd(nearEnd);
|
||
if (nearEnd) {
|
||
if (scrolledDown) following.current = true;
|
||
if (autoScrolling.current) {
|
||
autoScrolling.current = false;
|
||
window.clearTimeout(autoScrollTimer.current);
|
||
}
|
||
} else if (!autoScrolling.current) {
|
||
following.current = false;
|
||
}
|
||
}}
|
||
className={`rk-scroll flex min-h-0 flex-1 flex-col overflow-y-auto transition-opacity duration-300 ${
|
||
encounterMode ? "gap-2 px-3 py-3 md:px-6 md:py-4" : "gap-3.5 px-3.5 py-4 md:px-8 md:py-6"
|
||
} ${transcriptSubordinate ? "opacity-75" : ""}`}
|
||
>
|
||
{encounterMode ? (
|
||
<p className="mx-auto w-full max-w-2xl px-1 text-ui-label font-medium uppercase tracking-wider text-muted-foreground/80">
|
||
{voiceEncounterActive ? (
|
||
<Trans>Transkript — sekundär zur Stimme</Trans>
|
||
) : (
|
||
<Trans>Conversation record</Trans>
|
||
)}
|
||
</p>
|
||
) : null}
|
||
{olderCursor != null ? (
|
||
<button
|
||
type="button"
|
||
disabled={loadingOlder}
|
||
onClick={() => void loadOlder()}
|
||
className="self-center rounded-lg px-3 py-1.5 text-ui-body-sm text-muted-foreground hover:bg-muted hover:text-foreground/75 disabled:opacity-50"
|
||
>
|
||
{loadingOlder ? t`Loading…` : t`Load earlier messages`}
|
||
</button>
|
||
) : null}
|
||
<div
|
||
className={`mx-auto flex w-full flex-1 flex-col pb-6 ${
|
||
encounterMode ? "max-w-2xl gap-3" : "max-w-4xl gap-6 pb-8"
|
||
}`}
|
||
>
|
||
{reactionView.visibleMessages.length === 0 && encounterMode ? (
|
||
<div className="flex flex-col gap-2 py-2">
|
||
<p className="text-ui-body-sm text-muted-foreground">
|
||
{activeName
|
||
? t`Start the conversation — ${activeName} is on stage above.`
|
||
: t`Start the conversation.`}
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{[t`Portfolio-Check`, t`Alpha-Signale`, t`Architektur-Audit`].map((label) => (
|
||
<button
|
||
key={label}
|
||
type="button"
|
||
onClick={() => onPromptSelect?.(label)}
|
||
className="rounded-full border border-border bg-muted/40 px-3 py-1 text-ui-body-sm text-foreground/85 hover:bg-accent"
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{reactionView.visibleMessages.length === 0 && !encounterMode ? (
|
||
<div className="flex flex-1 flex-col items-center justify-center py-16 text-center select-none animate-in fade-in duration-500">
|
||
<div className="relative mb-5 flex items-center justify-center p-3">
|
||
<EvooMascot size={76} pose="greeting" interactive trackPointer="hover" />
|
||
</div>
|
||
<h2 className="text-3xl font-bold tracking-tight text-white mb-2">
|
||
{t`Guten Tag.`} <span className="text-emerald-400">evOo</span> {t`ist bereit.`}
|
||
</h2>
|
||
<p className="max-w-md text-ui-body leading-relaxed text-zinc-300 mb-8 font-normal">
|
||
{activeName
|
||
? t`Frag ${activeName} nach Marktchancen, autonomen Tasks oder Architektur-Reviews.`
|
||
: t`Wähle einen autonomen Agenten aus deinem Team oder starte direkt einen Prompt.`}
|
||
</p>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5 w-full max-w-2xl px-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onPromptSelect?.(t`⚡ Führe einen autonomen Portfolio- und Risiko-Check durch`);
|
||
}}
|
||
className="apple-glass-card group flex flex-col items-start p-4 rounded-2xl text-start transition-all hover:scale-[1.02] hover:border-emerald-500/40 cursor-pointer"
|
||
>
|
||
<span className="text-xl mb-2">⚡</span>
|
||
<span className="text-[14.5px] font-semibold text-white group-hover:text-emerald-400 transition-colors">
|
||
{t`Portfolio-Check`}
|
||
</span>
|
||
<span className="text-ui-body-sm text-zinc-400 mt-1 leading-snug">
|
||
{t`Echtzeit-Risiko & Drawdown-Analyse`}
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onPromptSelect?.(t`📈 Scanne den Markt nach aktuellen Alpha-Signalen`);
|
||
}}
|
||
className="apple-glass-card group flex flex-col items-start p-4 rounded-2xl text-start transition-all hover:scale-[1.02] hover:border-sky-500/40 cursor-pointer"
|
||
>
|
||
<span className="text-xl mb-2">📈</span>
|
||
<span className="text-[14.5px] font-semibold text-white group-hover:text-sky-400 transition-colors">
|
||
{t`Alpha-Signale`}
|
||
</span>
|
||
<span className="text-ui-body-sm text-zinc-400 mt-1 leading-snug">
|
||
{t`Volatilität & Orderbuch-Liquidität`}
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onPromptSelect?.(t`💎 Führe ein Steve Jobs UX & Architektur-Audit durch`);
|
||
}}
|
||
className="apple-glass-card group flex flex-col items-start p-4 rounded-2xl text-start transition-all hover:scale-[1.02] hover:border-purple-500/40 cursor-pointer"
|
||
>
|
||
<span className="text-xl mb-2">💎</span>
|
||
<span className="text-[14.5px] font-semibold text-white group-hover:text-purple-400 transition-colors">
|
||
{t`Steve Jobs Audit`}
|
||
</span>
|
||
<span className="text-ui-body-sm text-zinc-400 mt-1 leading-snug">
|
||
{t`Schlichtheit, Eleganz & Detailtiefe`}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{reactionView.visibleMessages.map((message) => {
|
||
if (!message.blocks.some((block) => !isToolActivityBlock(block))) return null;
|
||
const peerReceipt = isPeerReceiptBlocks(message.blocks);
|
||
const messageReactions = reactionView.reactions.get(message.id);
|
||
return (
|
||
<div
|
||
key={message.id}
|
||
data-message-id={message.id}
|
||
// Only persisted messages can be reply targets; synthetic rows
|
||
// (progress:, subagent:) carry a `prefix:` id.
|
||
data-quotable={message.id.includes(":") ? undefined : ""}
|
||
className={peerReceipt ? "relative py-0.5" : "group/message relative hover:z-20"}
|
||
>
|
||
{!peerReceipt && !message.id.startsWith("progress:") ? (
|
||
<time
|
||
dateTime={message.createdAt}
|
||
data-testid="message-hover-time"
|
||
className={cn(
|
||
"pointer-events-none absolute top-1 z-10 text-ui-label tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover/message:opacity-100 group-focus-within/message:opacity-100 group-has-[[aria-expanded=true]]/message:opacity-100",
|
||
message.role === "user" ? "start-0" : "end-0",
|
||
)}
|
||
>
|
||
{new Date(message.createdAt).toLocaleTimeString(i18n.locale || "en", {
|
||
hour: "numeric",
|
||
minute: "2-digit",
|
||
})}
|
||
</time>
|
||
) : null}
|
||
<div
|
||
className={
|
||
peerReceipt
|
||
? undefined
|
||
: `relative flex ${message.role === "user" ? "justify-end" : "justify-start"}`
|
||
}
|
||
>
|
||
<div
|
||
data-testid={peerReceipt ? undefined : "message-bubble-frame"}
|
||
className={
|
||
peerReceipt
|
||
? undefined
|
||
: `relative min-w-0 ${
|
||
message.role === "user"
|
||
? encounterMode
|
||
? "w-fit max-w-[92%] md:max-w-[min(78%,calc(100%_-_3rem))]"
|
||
: "w-fit max-w-[88%] md:max-w-[min(72%,calc(100%_-_5rem))]"
|
||
: "w-full max-w-full"
|
||
}`
|
||
}
|
||
>
|
||
{peerReceipt ? null : (
|
||
<MessageHoverActions
|
||
message={message}
|
||
side={message.role === "user" ? "start" : "end"}
|
||
onReply={onReply}
|
||
onReact={onReact}
|
||
/>
|
||
)}
|
||
<MessageView
|
||
artifactTarget={artifactTarget}
|
||
message={message}
|
||
canAnswer={message.id === answerableAskMessageId}
|
||
onOpenBot={onOpenBot}
|
||
onOpenGroup={onOpenGroup}
|
||
onOpenPeerMessages={onOpenPeerMessages}
|
||
onAnswer={onAnswer}
|
||
encounterMode={encounterMode}
|
||
speakerName={
|
||
peerReceipt
|
||
? undefined
|
||
: message.role === "bot"
|
||
? memberName?.(message.botId)
|
||
: undefined
|
||
}
|
||
memberName={memberName}
|
||
peerBot={peerBot}
|
||
replyPreview={
|
||
message.replyToMessageId
|
||
? messageById.get(message.replyToMessageId)
|
||
: undefined
|
||
}
|
||
replyToMessageId={message.replyToMessageId}
|
||
onJumpToMessage={onJumpToMessage}
|
||
onRefresh={onRefresh}
|
||
onBotChanged={onBotChanged}
|
||
onAddRoutine={onAddRoutine}
|
||
voiceReady={voiceReady}
|
||
speaking={speakingMessageId === message.id}
|
||
onSpeak={() => onSpeak(message)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{!peerReceipt && messageReactions ? (
|
||
<div
|
||
data-testid="message-reactions"
|
||
className={cn(
|
||
"mt-1 flex flex-wrap gap-1",
|
||
message.role === "user" && "justify-end",
|
||
)}
|
||
>
|
||
{[...messageReactions].map(([emoji, count]) => (
|
||
<span
|
||
key={emoji}
|
||
className="rounded-full border border-border bg-muted px-2 py-0.5 text-ui-label"
|
||
>
|
||
{emoji}
|
||
{count > 1 ? ` ${count}` : ""}
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
{running &&
|
||
!encounterMode &&
|
||
!messages.some(
|
||
(message) =>
|
||
message.id.startsWith("progress:") &&
|
||
message.blocks.some(
|
||
(block) =>
|
||
block.kind === "progress" && !isToolActivityBlock(block) && Boolean(block.text),
|
||
),
|
||
) ? (
|
||
<ActiveBotGlyph bots={workingBots} label={workingLabel} />
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
{quoteDraft ? (
|
||
<QuoteSelectionButton
|
||
range={quoteDraft.range}
|
||
onQuote={() => {
|
||
onQuote(quoteDraft.message, quoteDraft.text);
|
||
window.getSelection()?.removeAllRanges();
|
||
setQuoteDraft(null);
|
||
}}
|
||
/>
|
||
) : null}
|
||
<button
|
||
ref={jumpButtonRef}
|
||
type="button"
|
||
aria-label={t`Jump to latest`}
|
||
aria-hidden={atEnd}
|
||
tabIndex={atEnd ? -1 : 0}
|
||
onClick={jumpToLatest}
|
||
className={`absolute bottom-4 left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border motion-reduce:transition-none ${
|
||
atEnd ? "pointer-events-none translate-y-2 opacity-0" : "translate-y-0 opacity-100"
|
||
}`}
|
||
>
|
||
<ArrowDown size={17} strokeWidth={1.8} />
|
||
</button>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
/**
|
||
* Floating Quote action anchored to the selection's bounding rect. Measures
|
||
* itself after mount so it can flip below the selection when there is no room
|
||
* above and stay clamped inside the viewport; re-anchors on scroll/resize.
|
||
*/
|
||
const QuoteSelectionButton = memo(function QuoteSelectionButton({
|
||
range,
|
||
onQuote,
|
||
}: {
|
||
range: Range;
|
||
onQuote: () => void;
|
||
}) {
|
||
const { t } = useLingui();
|
||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||
const [placement, setPlacement] = useState<{
|
||
top: number;
|
||
left: number;
|
||
above: boolean;
|
||
} | null>(null);
|
||
|
||
useLayoutEffect(() => {
|
||
const update = () => {
|
||
if (range.collapsed || !document.contains(range.commonAncestorContainer)) {
|
||
setPlacement(null);
|
||
return;
|
||
}
|
||
const rect = range.getBoundingClientRect();
|
||
const width = buttonRef.current?.offsetWidth ?? 0;
|
||
const height = buttonRef.current?.offsetHeight ?? 0;
|
||
const above = rect.top >= height + 8;
|
||
setPlacement({
|
||
top: above ? rect.top - 8 : rect.bottom + 8,
|
||
left: Math.min(
|
||
Math.max(rect.left + rect.width / 2, width / 2 + 8),
|
||
window.innerWidth - width / 2 - 8,
|
||
),
|
||
above,
|
||
});
|
||
};
|
||
update();
|
||
window.addEventListener("resize", update);
|
||
// Scroll doesn't bubble — listen on the capture phase to catch any scroller.
|
||
window.addEventListener("scroll", update, { capture: true, passive: true });
|
||
return () => {
|
||
window.removeEventListener("resize", update);
|
||
window.removeEventListener("scroll", update, true);
|
||
};
|
||
}, [range]);
|
||
|
||
return createPortal(
|
||
<button
|
||
ref={buttonRef}
|
||
type="button"
|
||
data-quote-selection
|
||
data-testid="quote-selection"
|
||
onMouseDown={(event) => {
|
||
// Keep the highlight alive until the click commits the quote.
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}}
|
||
onClick={onQuote}
|
||
style={placement ? { top: placement.top, left: placement.left } : { visibility: "hidden" }}
|
||
className={cn(
|
||
"fixed z-50 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-background px-3 py-1.5 text-ui-body-sm font-medium text-foreground shadow-md hover:bg-muted",
|
||
placement?.above === false ? "translate-y-0" : "-translate-y-full",
|
||
)}
|
||
>
|
||
<TextQuote strokeWidth={2} className="size-icon-sm" />
|
||
{t`Quote`}
|
||
</button>,
|
||
document.body,
|
||
);
|
||
});
|
||
|
||
const Composer = memo(function Composer({
|
||
activeName,
|
||
running,
|
||
disabled,
|
||
pendingAttachments,
|
||
attachmentNotice,
|
||
sendError,
|
||
runError,
|
||
runErrorId,
|
||
onRunErrorPresented,
|
||
onDismissError,
|
||
sending,
|
||
fileInputRef,
|
||
onAttachmentPick,
|
||
onRemoveAttachment,
|
||
onSend,
|
||
onStop,
|
||
onVoice,
|
||
voiceReady = false,
|
||
replyTarget,
|
||
replyQuote,
|
||
replyTargetName,
|
||
onClearReply,
|
||
mentionTargets,
|
||
agentSkills,
|
||
onSlashOpen,
|
||
onSlashAction,
|
||
}: {
|
||
activeName?: string;
|
||
running: boolean;
|
||
disabled?: boolean;
|
||
pendingAttachments: PendingAttachment[];
|
||
attachmentNotice: string | null;
|
||
sendError: string | null;
|
||
runError: string | null;
|
||
runErrorId: string | null;
|
||
onRunErrorPresented: (runId: string) => void;
|
||
onDismissError: () => void;
|
||
sending: boolean;
|
||
fileInputRef: RefObject<HTMLInputElement | null>;
|
||
onAttachmentPick: (files: FileList | null) => void | Promise<void>;
|
||
onRemoveAttachment: (attachment: PendingAttachment) => void;
|
||
onSend: (text: string, mentions?: ComposerMention[]) => Promise<void>;
|
||
onStop: () => Promise<void>;
|
||
onVoice?: () => void;
|
||
voiceReady?: boolean;
|
||
replyTarget?: ThreadMessage | null;
|
||
replyQuote?: string | null;
|
||
replyTargetName?: string;
|
||
onClearReply?: () => void;
|
||
mentionTargets?: ComposerMention[];
|
||
agentSkills?: AgentSkillCatalogEntry[];
|
||
onSlashOpen?: () => void;
|
||
onSlashAction?: (action: SlashActionId) => void;
|
||
}) {
|
||
const { t } = useLingui();
|
||
const [draft, setDraft] = useState("");
|
||
const [mentionQuery, setMentionQuery] = useState<string | null>(null);
|
||
const [mentionHighlightIndex, setMentionHighlightIndex] = useState(0);
|
||
const [slashQuery, setSlashQuery] = useState<string | null>(null);
|
||
const [selectedSkill, setSelectedSkill] = useState<AgentSkillCatalogEntry | null>(null);
|
||
const [selectedMentions, setSelectedMentions] = useState<ComposerMention[]>([]);
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
const runErrorRef = useRef<HTMLDivElement>(null);
|
||
const submitFingerprint = useRef<string | null>(null);
|
||
useEffect(() => {
|
||
if (!sendError && !runError) return;
|
||
const timer = setTimeout(() => {
|
||
onDismissError();
|
||
}, 8000);
|
||
return () => clearTimeout(timer);
|
||
}, [sendError, runError, onDismissError]);
|
||
|
||
const presentedRunErrorIdRef = useRef<string | null>(null);
|
||
const mentionListboxId = useId();
|
||
const dragDepth = useRef(0);
|
||
const [draggingFiles, setDraggingFiles] = useState(false);
|
||
const canSend =
|
||
draft.trim().length > 0 ||
|
||
selectedSkill !== null ||
|
||
selectedMentions.length > 0 ||
|
||
pendingAttachments.length > 0;
|
||
|
||
useEffect(() => {
|
||
if (!runError || !runErrorId) return;
|
||
const currentRunErrorId = runErrorId;
|
||
let frame = 0;
|
||
function recordIfPresented() {
|
||
cancelAnimationFrame(frame);
|
||
frame = requestAnimationFrame(() => {
|
||
const element = runErrorRef.current;
|
||
if (!element || document.visibilityState !== "visible") return;
|
||
const rect = element.getBoundingClientRect();
|
||
const topElement = document.elementFromPoint(
|
||
rect.left + rect.width / 2,
|
||
rect.top + rect.height / 2,
|
||
);
|
||
if (topElement && (topElement === element || element.contains(topElement))) {
|
||
if (presentedRunErrorIdRef.current === currentRunErrorId) return;
|
||
presentedRunErrorIdRef.current = currentRunErrorId;
|
||
onRunErrorPresented(currentRunErrorId);
|
||
}
|
||
});
|
||
}
|
||
recordIfPresented();
|
||
const observer = new MutationObserver(recordIfPresented);
|
||
observer.observe(document.body, { childList: true, subtree: true });
|
||
document.addEventListener("transitionend", recordIfPresented);
|
||
document.addEventListener("visibilitychange", recordIfPresented);
|
||
return () => {
|
||
cancelAnimationFrame(frame);
|
||
observer.disconnect();
|
||
document.removeEventListener("transitionend", recordIfPresented);
|
||
document.removeEventListener("visibilitychange", recordIfPresented);
|
||
};
|
||
}, [onRunErrorPresented, runError, runErrorId]);
|
||
|
||
useLayoutEffect(() => {
|
||
const el = textareaRef.current;
|
||
if (!el) return;
|
||
|
||
function syncHeight() {
|
||
const textarea = textareaRef.current;
|
||
if (!textarea) return;
|
||
textarea.style.height = "0px";
|
||
textarea.style.height = `${textarea.scrollHeight}px`;
|
||
}
|
||
|
||
syncHeight();
|
||
let lastWidth = el.getBoundingClientRect().width;
|
||
const observer = new ResizeObserver(() => {
|
||
const textarea = textareaRef.current;
|
||
if (!textarea) return;
|
||
const width = textarea.getBoundingClientRect().width;
|
||
if (width === lastWidth) return;
|
||
lastWidth = width;
|
||
syncHeight();
|
||
});
|
||
observer.observe(el);
|
||
return () => observer.disconnect();
|
||
}, [draft]);
|
||
|
||
function updateDraft(value: string) {
|
||
submitFingerprint.current = null;
|
||
setDraft(value);
|
||
const mentionMatch = /(?:^|\s)@([\w-]*)$/.exec(value);
|
||
setMentionQuery(mentionMatch ? (mentionMatch[1] ?? "") : null);
|
||
// `/` only at the start of the draft so forced skills expand (`Use skill:` / `/Name` prefix).
|
||
const slashMatch = selectedSkill === null ? /^\/([^\n]*)$/.exec(value) : null;
|
||
const nextSlash = slashMatch ? (slashMatch[1] ?? "") : null;
|
||
if (nextSlash !== null && slashQuery === null) onSlashOpen?.();
|
||
setSlashQuery(nextSlash);
|
||
}
|
||
|
||
function focusComposer() {
|
||
textareaRef.current?.focus();
|
||
}
|
||
|
||
function insertMention(mention: ComposerMention) {
|
||
setDraft((current) => current.replace(/@([\w-]*)$/, ""));
|
||
setMentionQuery(null);
|
||
setMentionHighlightIndex(0);
|
||
setSelectedMentions((current) =>
|
||
current.some((selected) => mentionChipKey(selected) === mentionChipKey(mention))
|
||
? current
|
||
: [...current, mention],
|
||
);
|
||
focusComposer();
|
||
}
|
||
|
||
function insertSkill(skill: AgentSkillCatalogEntry) {
|
||
setSelectedSkill(skill);
|
||
setDraft("");
|
||
setSlashQuery(null);
|
||
}
|
||
|
||
function runSlashAction(action: SlashActionId) {
|
||
setDraft("");
|
||
setSlashQuery(null);
|
||
onSlashAction?.(action);
|
||
}
|
||
|
||
function removeLastChip() {
|
||
if (selectedMentions.length > 0) {
|
||
setSelectedMentions((current) => current.slice(0, -1));
|
||
return;
|
||
}
|
||
if (selectedSkill) setSelectedSkill(null);
|
||
}
|
||
|
||
const mentionOptions = useMemo(() => {
|
||
if (mentionQuery === null || !mentionTargets?.length) return [];
|
||
const query = mentionQuery.trim().toLowerCase();
|
||
return mentionTargets
|
||
.filter((target) => !query || target.name.toLowerCase().startsWith(query))
|
||
.slice(0, 10);
|
||
}, [mentionQuery, mentionTargets]);
|
||
|
||
useEffect(() => {
|
||
setMentionHighlightIndex(0);
|
||
}, [mentionQuery]);
|
||
|
||
const activeMentionIndex = clampMentionHighlightIndex(
|
||
mentionHighlightIndex,
|
||
mentionOptions.length,
|
||
);
|
||
const mentionPickerOpen = mentionOptions.length > 0;
|
||
const activeMentionOptionId = mentionPickerOpen
|
||
? `${mentionListboxId}-option-${activeMentionIndex}`
|
||
: undefined;
|
||
|
||
const slashSkillOptions = useMemo(() => {
|
||
if (slashQuery === null) return [];
|
||
const query = slashQuery.trim().toLowerCase();
|
||
const skills = agentSkills ?? [];
|
||
return skills
|
||
.filter((skill) => {
|
||
if (!query) return true;
|
||
return (
|
||
skill.name.toLowerCase().includes(query) ||
|
||
skill.description.toLowerCase().includes(query)
|
||
);
|
||
})
|
||
.slice(0, 8);
|
||
}, [agentSkills, slashQuery]);
|
||
|
||
const slashActionOptions = useMemo(() => {
|
||
if (slashQuery === null) return [];
|
||
const query = slashQuery.trim().toLowerCase();
|
||
return SLASH_ACTIONS.filter((action) => !query || action.label.toLowerCase().includes(query));
|
||
}, [slashQuery]);
|
||
|
||
const showSlashPicker =
|
||
slashQuery !== null &&
|
||
mentionQuery === null &&
|
||
(slashSkillOptions.length > 0 || slashActionOptions.length > 0);
|
||
|
||
function send() {
|
||
if (!canSend || disabled) return;
|
||
const text = serializeComposerPrompt(draft, selectedSkill, selectedMentions);
|
||
const fingerprint = [text, ...selectedMentions.map((mention) => mentionChipKey(mention))].join(
|
||
"\n",
|
||
);
|
||
if (submitFingerprint.current === fingerprint) return;
|
||
submitFingerprint.current = fingerprint;
|
||
setDraft("");
|
||
setMentionQuery(null);
|
||
setMentionHighlightIndex(0);
|
||
setSlashQuery(null);
|
||
setSelectedSkill(null);
|
||
const mentions = selectedMentions;
|
||
setSelectedMentions([]);
|
||
void onSend(text, mentions);
|
||
}
|
||
|
||
function handleDragEnter(event: DragEvent<HTMLFieldSetElement>) {
|
||
const dataTransfer = event.dataTransfer;
|
||
if (!isFileDrag(dataTransfer)) return;
|
||
event.preventDefault();
|
||
if (disabled) {
|
||
dragDepth.current = 0;
|
||
setDraggingFiles(false);
|
||
return;
|
||
}
|
||
dragDepth.current += 1;
|
||
setDraggingFiles(true);
|
||
}
|
||
|
||
function handleDragOver(event: DragEvent<HTMLFieldSetElement>) {
|
||
const dataTransfer = event.dataTransfer;
|
||
if (!isFileDrag(dataTransfer)) return;
|
||
event.preventDefault();
|
||
dataTransfer.dropEffect = disabled ? "none" : "copy";
|
||
if (disabled) {
|
||
dragDepth.current = 0;
|
||
setDraggingFiles(false);
|
||
return;
|
||
}
|
||
setDraggingFiles(true);
|
||
}
|
||
|
||
function handleDragLeave(event: DragEvent<HTMLFieldSetElement>) {
|
||
if (!isFileDrag(event.dataTransfer)) return;
|
||
if (disabled) {
|
||
dragDepth.current = 0;
|
||
setDraggingFiles(false);
|
||
return;
|
||
}
|
||
dragDepth.current = Math.max(0, dragDepth.current - 1);
|
||
if (dragDepth.current === 0) setDraggingFiles(false);
|
||
}
|
||
|
||
function handleDrop(event: DragEvent<HTMLFieldSetElement>) {
|
||
const dataTransfer = event.dataTransfer;
|
||
if (!isFileDrag(dataTransfer)) return;
|
||
event.preventDefault();
|
||
dragDepth.current = 0;
|
||
setDraggingFiles(false);
|
||
if (!disabled) void onAttachmentPick(dataTransfer.files);
|
||
}
|
||
|
||
function handlePaste(event: ClipboardEvent<HTMLTextAreaElement>) {
|
||
const clipboardData = event.clipboardData;
|
||
// Only intercept real FileList pastes; leave text-only / empty-files native.
|
||
if (disabled || !clipboardData || !isFilePaste(clipboardData)) return;
|
||
event.preventDefault();
|
||
void onAttachmentPick(clipboardData.files);
|
||
const text = clipboardData.getData("text/plain");
|
||
if (!text) return;
|
||
const textarea = event.currentTarget;
|
||
const start = textarea.selectionStart;
|
||
const end = textarea.selectionEnd;
|
||
updateDraft(`${draft.slice(0, start)}${text}${draft.slice(end)}`);
|
||
const caret = start + text.length;
|
||
window.requestAnimationFrame(() => {
|
||
textareaRef.current?.setSelectionRange(caret, caret);
|
||
});
|
||
}
|
||
|
||
const showComposerPlaceholder =
|
||
draft.length === 0 && selectedSkill === null && selectedMentions.length === 0;
|
||
const replyName = replyTarget ? (replyTargetName ?? previewMessageText(replyTarget)) : "";
|
||
|
||
return (
|
||
<fieldset
|
||
aria-label={t`Message composer`}
|
||
data-dragging={draggingFiles ? "files" : undefined}
|
||
onDragEnter={handleDragEnter}
|
||
onDragOver={handleDragOver}
|
||
onDragLeave={handleDragLeave}
|
||
onDrop={handleDrop}
|
||
className={`relative z-30 m-0 min-w-0 border-0 px-3 pb-4 pt-3 md:px-6 md:pb-6 ${
|
||
draggingFiles ? "rounded-[14px] ring-2 ring-inset ring-ring" : ""
|
||
}`}
|
||
>
|
||
<div className="mx-auto w-full max-w-4xl">
|
||
{/* Quick Action Prompt Chips */}
|
||
{showComposerPlaceholder ? (
|
||
<div className="mb-3 flex items-center gap-2 overflow-x-auto no-scrollbar py-1">
|
||
<span className="flex items-center gap-1.5 text-ui-label font-semibold uppercase tracking-wider text-emerald-400 shrink-0 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 me-1 shadow-xs">
|
||
<Sparkles className="text-amber-400 size-icon-sm" />
|
||
Quick
|
||
</span>
|
||
{quickPromptsForBot(activeName).map((promptText) => (
|
||
<button
|
||
key={promptText}
|
||
type="button"
|
||
onClick={() => {
|
||
updateDraft(promptText);
|
||
focusComposer();
|
||
}}
|
||
className="shrink-0 rounded-full border border-white/[0.1] bg-white/[0.05] px-3.5 py-1.5 text-ui-body-sm font-medium text-zinc-200 hover:border-emerald-500/40 hover:bg-white/[0.1] hover:text-white transition-all shadow-sm active:scale-95 cursor-pointer"
|
||
>
|
||
{promptText}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
{sendError || runError ? (
|
||
<div
|
||
ref={runErrorRef}
|
||
role="alert"
|
||
data-testid="composer-error"
|
||
className="mb-3 flex items-center gap-2 rounded-[14px] border border-destructive/40 bg-destructive/10 px-4 py-2 text-ui-body-sm text-destructive"
|
||
>
|
||
<span className="min-w-0 flex-1">{sendError ?? runError}</span>
|
||
<button
|
||
type="button"
|
||
aria-label={t`Dismiss error`}
|
||
data-testid="composer-error-dismiss"
|
||
onClick={() => {
|
||
onDismissError();
|
||
window.requestAnimationFrame(() => textareaRef.current?.focus());
|
||
}}
|
||
className="shrink-0 text-destructive hover:text-foreground"
|
||
>
|
||
<X strokeWidth={2} className="size-icon-sm" />
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
{replyTarget ? (
|
||
<div
|
||
data-testid="reply-chip"
|
||
className="mb-2 flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1.5 text-ui-body-sm text-foreground/75"
|
||
>
|
||
<span className="min-w-0 flex-1 truncate text-muted-foreground">
|
||
{replyQuote
|
||
? t`Replying to ${replyName}: “${replyQuote}”`
|
||
: t`Replying to ${replyName}`}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label={t`Cancel reply`}
|
||
onClick={onClearReply}
|
||
className="shrink-0 text-muted-foreground hover:text-foreground"
|
||
>
|
||
<X strokeWidth={2} className="size-icon-sm" />
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
{attachmentNotice ? (
|
||
<div className="mb-3 rounded-[14px] border border-warning/40 bg-warning/10 px-4 py-2 text-ui-body-sm text-warning">
|
||
{attachmentNotice}
|
||
</div>
|
||
) : null}
|
||
{pendingAttachments.length ? (
|
||
<div className="mb-3 flex flex-wrap gap-2">
|
||
{pendingAttachments.map((attachment) => (
|
||
<div
|
||
key={attachment.id}
|
||
className="flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1.5 text-ui-body-sm text-foreground/75"
|
||
>
|
||
{attachment.previewUrl ? (
|
||
<img
|
||
src={attachment.previewUrl}
|
||
alt={attachment.file.name}
|
||
className="size-control-md rounded object-cover"
|
||
/>
|
||
) : (
|
||
<Paperclip strokeWidth={1.8} className="size-icon-md" />
|
||
)}
|
||
<span className="max-w-[180px] truncate" dir="auto">
|
||
{attachment.file.name}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label={t`Remove ${attachment.file.name}`}
|
||
onClick={() => onRemoveAttachment(attachment)}
|
||
className="text-muted-foreground hover:text-foreground"
|
||
>
|
||
<X strokeWidth={2} className="size-icon-sm" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
{mentionPickerOpen ? (
|
||
<div
|
||
id={mentionListboxId}
|
||
role="listbox"
|
||
aria-label={t`Mentions`}
|
||
data-testid="mention-picker"
|
||
className="mb-2 max-h-64 overflow-y-auto rounded-[14px] border border-border bg-muted"
|
||
>
|
||
{mentionOptions.map((mention, index) => {
|
||
const optionId = `${mentionListboxId}-option-${index}`;
|
||
const highlighted = index === activeMentionIndex;
|
||
return (
|
||
<button
|
||
id={optionId}
|
||
key={mentionChipKey(mention)}
|
||
type="button"
|
||
role="option"
|
||
aria-selected={highlighted}
|
||
aria-label={`@${mention.name}`}
|
||
data-mention-name={mention.name}
|
||
onMouseDown={(event) => event.preventDefault()}
|
||
onClick={() => insertMention(mention)}
|
||
onMouseEnter={() => setMentionHighlightIndex(index)}
|
||
className={`flex w-full items-start gap-3 px-4 py-2.5 text-start hover:bg-accent ${
|
||
highlighted ? "bg-accent" : ""
|
||
}`}
|
||
>
|
||
<span aria-hidden="true">
|
||
<MentionOptionIcon mention={mention} />
|
||
</span>
|
||
<span className="min-w-0">
|
||
<span dir="auto" className="block text-ui-body text-foreground">
|
||
@{mention.name}
|
||
</span>
|
||
{mention.subtitle ? (
|
||
<span
|
||
dir="auto"
|
||
aria-hidden="true"
|
||
className="block truncate text-ui-body-sm text-muted-foreground"
|
||
>
|
||
{mention.subtitle}
|
||
</span>
|
||
) : null}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
{showSlashPicker ? (
|
||
<div
|
||
data-testid="slash-picker"
|
||
className="mb-2 overflow-hidden rounded-[14px] border border-border bg-muted"
|
||
>
|
||
{slashSkillOptions.map((skill) => (
|
||
<button
|
||
key={skill.id}
|
||
type="button"
|
||
aria-label={t`Skill ${skill.name}`}
|
||
onClick={() => insertSkill(skill)}
|
||
className="flex w-full items-start gap-3 px-4 py-2.5 text-start hover:bg-accent"
|
||
>
|
||
<Box
|
||
strokeWidth={1.7}
|
||
className="mt-0.5 shrink-0 text-muted-foreground size-icon-md"
|
||
/>
|
||
<span className="min-w-0">
|
||
<span dir="auto" className="block text-ui-body text-foreground">
|
||
{skill.name}
|
||
</span>
|
||
<span dir="auto" className="block truncate text-ui-body-sm text-muted-foreground">
|
||
{truncateSlashDescription(skill.description)}
|
||
</span>
|
||
</span>
|
||
</button>
|
||
))}
|
||
{slashActionOptions.map((action) => {
|
||
const label = slashActionLabel(action.id);
|
||
return (
|
||
<button
|
||
key={action.id}
|
||
type="button"
|
||
aria-label={label}
|
||
onClick={() => runSlashAction(action.id)}
|
||
className="flex w-full items-center gap-3 px-4 py-2.5 text-start hover:bg-accent"
|
||
>
|
||
<Settings
|
||
strokeWidth={1.7}
|
||
className="shrink-0 text-muted-foreground size-icon-md"
|
||
/>
|
||
<span className="text-ui-body text-foreground">{label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
<div
|
||
data-testid="composer-bar"
|
||
className="apple-island relative flex items-center gap-3.5 rounded-[30px] py-3 pe-3.5 ps-4 transition-all duration-200 focus-within:border-emerald-500/40 focus-within:shadow-[0_20px_50px_-10px_rgba(0,0,0,0.85),inset_0_1px_0_rgba(255,255,255,0.22),0_0_0_1px_rgba(16,185,129,0.35)] shadow-[0_16px_40px_-8px_rgba(0,0,0,0.7),inset_0_1px_0_rgba(255,255,255,0.14)]"
|
||
>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
multiple
|
||
accept={ATTACHMENT_ACCEPT}
|
||
className="hidden"
|
||
onChange={(event) => void onAttachmentPick(event.target.files)}
|
||
/>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
aria-label={t`Attach file`}
|
||
disabled={disabled}
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="tactile-press size-10 shrink-0 rounded-full border border-white/10 bg-white/[0.06] text-foreground/80 transition-all hover:bg-white/[0.12] hover:text-white flex items-center justify-center cursor-pointer"
|
||
>
|
||
<Plus strokeWidth={2.2} className="size-icon-lg" />
|
||
</Button>
|
||
<div className="flex min-w-0 flex-1 flex-wrap items-end gap-1.5">
|
||
{selectedSkill ? (
|
||
<span
|
||
data-testid="skill-chip"
|
||
className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.08] px-3 py-1 text-ui-body font-medium text-foreground backdrop-blur-md"
|
||
>
|
||
<Box strokeWidth={1.8} className="shrink-0 text-blue-400 size-icon-md" />
|
||
<span dir="auto" className="truncate">
|
||
{selectedSkill.name}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label={t`Remove skill ${selectedSkill.name}`}
|
||
onClick={() => setSelectedSkill(null)}
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
<X strokeWidth={2} className="size-icon-sm" />
|
||
</button>
|
||
</span>
|
||
) : null}
|
||
{selectedMentions.map((mention) => (
|
||
<span
|
||
key={mentionChipKey(mention)}
|
||
data-testid="mention-chip"
|
||
data-mention-kind={mention.kind}
|
||
className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.08] px-3 py-1 text-ui-body font-medium text-foreground backdrop-blur-md"
|
||
>
|
||
<MentionChipIcon mention={mention} />
|
||
<span dir="auto" className="truncate">
|
||
{mention.name}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label={t`Remove mention ${mention.name}`}
|
||
onClick={() =>
|
||
setSelectedMentions((current) =>
|
||
current.filter(
|
||
(selected) => mentionChipKey(selected) !== mentionChipKey(mention),
|
||
),
|
||
)
|
||
}
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
<X strokeWidth={2} className="size-icon-sm" />
|
||
</button>
|
||
</span>
|
||
))}
|
||
<textarea
|
||
ref={textareaRef}
|
||
value={draft}
|
||
onChange={(event) => updateDraft(event.target.value)}
|
||
onPaste={handlePaste}
|
||
onKeyDown={(event) => {
|
||
if (
|
||
event.key === "Backspace" &&
|
||
draft.length === 0 &&
|
||
(selectedSkill !== null || selectedMentions.length > 0)
|
||
) {
|
||
event.preventDefault();
|
||
removeLastChip();
|
||
return;
|
||
}
|
||
const action = resolveMentionPickerKey({
|
||
key: event.key,
|
||
shiftKey: event.shiftKey,
|
||
isComposing: event.nativeEvent.isComposing || event.keyCode === 229,
|
||
optionCount: mentionOptions.length,
|
||
highlightedIndex: activeMentionIndex,
|
||
});
|
||
if (action.type === "complete") {
|
||
const mention = mentionOptions[action.index];
|
||
if (!mention) return;
|
||
event.preventDefault();
|
||
insertMention(mention);
|
||
return;
|
||
}
|
||
if (action.type === "move") {
|
||
event.preventDefault();
|
||
setMentionHighlightIndex(action.index);
|
||
return;
|
||
}
|
||
if (action.type === "dismiss") {
|
||
event.preventDefault();
|
||
setMentionQuery(null);
|
||
setMentionHighlightIndex(0);
|
||
return;
|
||
}
|
||
if (action.type === "send") {
|
||
event.preventDefault();
|
||
send();
|
||
}
|
||
}}
|
||
disabled={disabled}
|
||
placeholder={showComposerPlaceholder ? t`Message…` : undefined}
|
||
aria-label={t`Message`}
|
||
role="combobox"
|
||
aria-autocomplete="list"
|
||
aria-haspopup="listbox"
|
||
aria-expanded={mentionPickerOpen ? "true" : "false"}
|
||
aria-controls={mentionPickerOpen ? mentionListboxId : undefined}
|
||
aria-activedescendant={activeMentionOptionId}
|
||
name="chat-message"
|
||
autoComplete="off"
|
||
dir="auto"
|
||
rows={1}
|
||
className="max-h-36 min-h-[28px] min-w-[8rem] flex-1 resize-none overflow-y-auto bg-transparent py-1 text-[16.5px] leading-[1.55] text-foreground outline-none placeholder:text-muted-foreground/75 disabled:opacity-40 font-normal selection:bg-emerald-500/30"
|
||
/>
|
||
</div>
|
||
{onVoice ? (
|
||
<Button
|
||
variant="outline"
|
||
aria-label={t`Voice`}
|
||
title={voiceReady ? t`Start voice conversation` : t`Set up voice`}
|
||
disabled={disabled}
|
||
onClick={onVoice}
|
||
data-testid="composer-voice-primary"
|
||
className={`tactile-press h-control-lg shrink-0 gap-2 rounded-full px-4 sm:px-5 flex items-center justify-center cursor-pointer transition-all ${
|
||
voiceReady
|
||
? "border-cyan-400/35 bg-gradient-to-b from-cyan-500/20 to-cyan-950/40 text-cyan-50 shadow-[0_0_28px_rgba(34,211,238,0.22),inset_0_1px_0_rgba(255,255,255,0.16)] hover:border-cyan-300/50 hover:from-cyan-400/28 hover:to-cyan-950/50 voice-primary-ready"
|
||
: "border-amber-400/25 bg-white/[0.06] text-foreground/85 hover:bg-white/[0.12] hover:text-white"
|
||
}`}
|
||
>
|
||
<Mic strokeWidth={1.9} className="size-icon-lg shrink-0" />
|
||
<span className="hidden text-ui-body font-semibold sm:inline">
|
||
<Trans>Voice</Trans>
|
||
</span>
|
||
</Button>
|
||
) : null}
|
||
{running ? (
|
||
<div className="flex items-center gap-2 shrink-0">
|
||
<Button
|
||
size="icon"
|
||
aria-label={t`Send`}
|
||
disabled={!canSend || disabled}
|
||
onClick={send}
|
||
className="tactile-press size-10 rounded-full bg-emerald-400 text-slate-950 hover:bg-emerald-300 shadow-[0_0_16px_rgba(16,185,129,0.35)] transition-transform active:scale-90 flex items-center justify-center cursor-pointer"
|
||
>
|
||
<ArrowUp strokeWidth={2.6} className="size-icon-lg" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
aria-label={t`Stop`}
|
||
disabled={sending}
|
||
onClick={() => void onStop()}
|
||
className="tactile-press size-10 rounded-full border border-white/15 bg-white/[0.08] text-foreground/90 shadow-sm transition-colors hover:bg-white/[0.15] hover:text-white flex items-center justify-center cursor-pointer"
|
||
>
|
||
<Square strokeWidth={0} fill="currentColor" className="size-icon-sm" />
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<Button
|
||
size="icon"
|
||
aria-label={t`Send`}
|
||
disabled={!canSend || disabled}
|
||
onClick={send}
|
||
className="tactile-press size-10 shrink-0 rounded-full bg-emerald-400 text-slate-950 hover:bg-emerald-300 shadow-[0_0_16px_rgba(16,185,129,0.35)] transition-all active:scale-90 disabled:bg-white/[0.08] disabled:text-white/20 disabled:shadow-none flex items-center justify-center cursor-pointer"
|
||
>
|
||
<ArrowUp strokeWidth={2.6} className="size-icon-lg" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
);
|
||
});
|
||
|
||
function slashActionLabel(id: SlashActionId) {
|
||
switch (id) {
|
||
case "chat-settings":
|
||
return t`Chat Settings`;
|
||
case "settings-general":
|
||
return t`Settings: General`;
|
||
case "settings-usage":
|
||
return t`Settings: Usage`;
|
||
}
|
||
}
|
||
|
||
function MentionOptionIcon({ mention }: { mention: ComposerMention }) {
|
||
if (mention.kind === "routine") {
|
||
return (
|
||
<Clock strokeWidth={1.7} className="mt-0.5 shrink-0 text-muted-foreground size-icon-md" />
|
||
);
|
||
}
|
||
if (mention.kind === "connector") {
|
||
return (
|
||
<Puzzle strokeWidth={1.7} className="mt-0.5 shrink-0 text-muted-foreground size-icon-md" />
|
||
);
|
||
}
|
||
if (mention.kind === "group") {
|
||
return (
|
||
<span className="mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full bg-accent text-ui-caption text-foreground/75">
|
||
G
|
||
</span>
|
||
);
|
||
}
|
||
if (mention.kind === "everyone") {
|
||
return (
|
||
<span className="mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full bg-accent text-ui-caption text-foreground/75">
|
||
@
|
||
</span>
|
||
);
|
||
}
|
||
return (
|
||
<BotAvatar
|
||
color={mention.color ?? FALLBACK_BOT_COLOR}
|
||
identity={mention.id}
|
||
className="size-icon-md"
|
||
/>
|
||
);
|
||
}
|
||
|
||
function MentionChipIcon({ mention }: { mention: ComposerMention }) {
|
||
if (mention.kind === "routine") {
|
||
return <Clock strokeWidth={1.7} className="shrink-0 text-muted-foreground/70 size-icon-sm" />;
|
||
}
|
||
if (mention.kind === "connector") {
|
||
return <Puzzle strokeWidth={1.7} className="shrink-0 text-muted-foreground/70 size-icon-sm" />;
|
||
}
|
||
if (mention.kind === "group" || mention.kind === "everyone") {
|
||
return (
|
||
<span className="grid h-4 w-4 shrink-0 place-items-center rounded-full bg-accent text-ui-caption text-foreground/75">
|
||
{mention.kind === "group" ? "G" : "@"}
|
||
</span>
|
||
);
|
||
}
|
||
return (
|
||
<BotAvatar
|
||
color={mention.color ?? FALLBACK_BOT_COLOR}
|
||
identity={mention.id}
|
||
className="size-icon-md"
|
||
/>
|
||
);
|
||
}
|
||
|
||
function previewMessageText(message: ThreadMessage): string {
|
||
const text = message.blocks
|
||
.map((block) => (block.kind === "text" || block.kind === "channel_message" ? block.text : ""))
|
||
.filter(Boolean)
|
||
.join(" ")
|
||
.trim();
|
||
if (text) return text;
|
||
if (message.blocks.some((block) => block.kind === "image" || block.kind === "file")) {
|
||
return t`Attachment`;
|
||
}
|
||
return t`Message`;
|
||
}
|
||
|
||
function formatRosterTime(isoDate?: string | null): string {
|
||
if (!isoDate) return "";
|
||
try {
|
||
const d = new Date(isoDate);
|
||
if (Number.isNaN(d.getTime())) return "";
|
||
const locale = i18n.locale || "en";
|
||
const now = new Date();
|
||
const isToday =
|
||
d.getDate() === now.getDate() &&
|
||
d.getMonth() === now.getMonth() &&
|
||
d.getFullYear() === now.getFullYear();
|
||
if (isToday) {
|
||
return d.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
|
||
}
|
||
const yesterday = new Date(now);
|
||
yesterday.setDate(now.getDate() - 1);
|
||
const isYesterday =
|
||
d.getDate() === yesterday.getDate() &&
|
||
d.getMonth() === yesterday.getMonth() &&
|
||
d.getFullYear() === yesterday.getFullYear();
|
||
if (isYesterday) return t`Yesterday`;
|
||
const diffDays = Math.floor((now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24));
|
||
if (diffDays < 7) {
|
||
return d.toLocaleDateString(locale, { weekday: "short" });
|
||
}
|
||
return d.toLocaleDateString(locale, { month: "short", day: "numeric" });
|
||
} catch {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function cleanRosterPreview(raw?: string | null): string {
|
||
if (!raw) return "";
|
||
let text = raw;
|
||
// Strip markdown headings
|
||
text = text.replace(/^#{1,6}\s+/gm, "");
|
||
// Strip routing tokens [to ...] and system protocols [RECOVERY PROTOCOL], [PO ...]
|
||
text = text.replace(/\[(?:to|RECOVERY PROTOCOL|PO)[^\]]*\]/gi, "");
|
||
// Strip bold/italic/code markers
|
||
text = text.replace(/[*_`#]/g, "");
|
||
// Strip escape backslashes
|
||
text = text.replace(/\\/g, "");
|
||
// Collapse whitespace
|
||
text = text.replace(/\s+/g, " ").trim();
|
||
return text;
|
||
}
|
||
|
||
function quickPromptsForBot(botName?: string): string[] {
|
||
const lower = (botName ?? "").toLowerCase();
|
||
if (lower.includes("chief")) {
|
||
return [
|
||
"⚡ Portfolio Health Check",
|
||
"📊 Risk & Drawdown Exposure",
|
||
"🔄 Team-Status synchronisieren",
|
||
"🎯 Tagesziel prüfen",
|
||
];
|
||
}
|
||
if (lower.includes("steve")) {
|
||
return [
|
||
"✨ UX & Design Audit",
|
||
"🚀 Product Architecture",
|
||
"💎 Schlichtheit & Eleganz",
|
||
"🔍 Konkurrenzanalyse",
|
||
];
|
||
}
|
||
if (lower.includes("apex") || lower.includes("quant") || lower.includes("trad")) {
|
||
return [
|
||
"📈 Alpha-Signale scannen",
|
||
"📉 Volatilitäts-Stresstest",
|
||
"💰 Live vs. Paper PnL",
|
||
"⚡ Orderbuch Liquidität",
|
||
];
|
||
}
|
||
if (
|
||
lower.includes("dev") ||
|
||
lower.includes("sec") ||
|
||
lower.includes("infra") ||
|
||
lower.includes("code")
|
||
) {
|
||
return [
|
||
"🛡️ Security & Vault Check",
|
||
"💻 Latenz- & Cluster-Status",
|
||
"🔍 Code Review & Refactor",
|
||
"🚨 Health & Error Logs",
|
||
];
|
||
}
|
||
return ["💡 Prioritäten für heute?", "⚡ Schneller Statusbericht", "📊 Performance-Metriken"];
|
||
}
|
||
|
||
function MessageHoverActions({
|
||
message,
|
||
side,
|
||
onReply,
|
||
onReact,
|
||
}: {
|
||
message: ThreadMessage;
|
||
side: "start" | "end";
|
||
onReply: (message: ThreadMessage) => void;
|
||
onReact: (message: ThreadMessage, reaction: MessageReaction) => Promise<void>;
|
||
}) {
|
||
const { t } = useLingui();
|
||
const [moreOpen, setMoreOpen] = useState(false);
|
||
const [reactionsOpen, setReactionsOpen] = useState(false);
|
||
|
||
// Streaming progress bubbles keep hover free for selection / stop clicks.
|
||
if (message.id.startsWith("progress:")) return null;
|
||
|
||
function copyMessage() {
|
||
const text = copyableMessageText(message);
|
||
if (!text || !navigator.clipboard) return;
|
||
void navigator.clipboard.writeText(text).catch(() => undefined);
|
||
}
|
||
|
||
const iconButtonClass =
|
||
"grid size-control-sm place-items-center text-muted-foreground transition-colors hover:text-foreground";
|
||
|
||
return (
|
||
<MessageHoverMetadata pinned={moreOpen || reactionsOpen} side={side}>
|
||
<div data-testid="message-hover-actions" className="flex items-center gap-0.5">
|
||
{canReactToThreadMessage(message) ? (
|
||
<Popover open={reactionsOpen} onOpenChange={setReactionsOpen}>
|
||
<PopoverTrigger
|
||
aria-label={t`React`}
|
||
className={cn(
|
||
iconButtonClass,
|
||
"h-11 w-11 [@media(hover:hover)_and_(pointer:fine)]:h-7 [@media(hover:hover)_and_(pointer:fine)]:w-7",
|
||
)}
|
||
>
|
||
<Smile strokeWidth={1.7} className="size-icon-md" />
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
align={side === "end" ? "start" : "end"}
|
||
className="w-auto flex-row gap-0 rounded-2xl p-1.5"
|
||
aria-label={t`Reactions`}
|
||
>
|
||
{MESSAGE_REACTIONS.map((emoji) => (
|
||
<button
|
||
key={emoji}
|
||
type="button"
|
||
aria-label={emoji}
|
||
className="grid h-11 w-11 place-items-center rounded-xl text-2xl hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring"
|
||
onClick={() => {
|
||
setReactionsOpen(false);
|
||
void onReact(message, emoji);
|
||
}}
|
||
>
|
||
{emoji}
|
||
</button>
|
||
))}
|
||
</PopoverContent>
|
||
</Popover>
|
||
) : null}
|
||
<button
|
||
type="button"
|
||
aria-label={t`Reply`}
|
||
onClick={() => onReply(message)}
|
||
className={`${iconButtonClass} hidden [@media(hover:hover)_and_(pointer:fine)]:grid`}
|
||
>
|
||
<Reply strokeWidth={1.7} className="size-icon-md" />
|
||
</button>
|
||
<DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
|
||
<DropdownMenuTrigger
|
||
aria-label={t`More`}
|
||
className={cn(
|
||
iconButtonClass,
|
||
"h-11 w-11 [@media(hover:hover)_and_(pointer:fine)]:h-7 [@media(hover:hover)_and_(pointer:fine)]:w-7",
|
||
)}
|
||
>
|
||
<MoreHorizontal strokeWidth={1.7} className="size-icon-md" />
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align={side === "end" ? "start" : "end"}>
|
||
<DropdownMenuItem
|
||
className="[@media(hover:hover)_and_(pointer:fine)]:hidden"
|
||
onClick={() => onReply(message)}
|
||
>
|
||
<Reply className="size-icon-md" />
|
||
<Trans>Reply</Trans>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={copyMessage}>
|
||
<Copy strokeWidth={1.7} className="size-icon-md" />
|
||
<Trans>Copy</Trans>
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</MessageHoverMetadata>
|
||
);
|
||
}
|
||
|
||
function firstThreadRoute(
|
||
bots: readonly Pick<Bot, "id">[],
|
||
groups: readonly Pick<Group, "id">[],
|
||
): string {
|
||
if (bots[0]) return `/app/${bots[0].id}`;
|
||
if (groups[0]) return `/app/g/${groups[0].id}`;
|
||
return "/app";
|
||
}
|
||
|
||
function applyThreadEvent(
|
||
event: ProductEvent,
|
||
commitSnapshot: (next: ThreadSnapshot | null) => void,
|
||
commitComputer: (next: ComputerStatus | null) => void,
|
||
snapshotRef: MutableRefObject<ThreadSnapshot | null>,
|
||
computerRef: MutableRefObject<ComputerStatus | null>,
|
||
) {
|
||
if (isThreadSnapshotEvent(event)) {
|
||
const next = reduceThreadSnapshot(snapshotRef.current, event);
|
||
commitSnapshot(next);
|
||
}
|
||
if (isComputerStatusEvent(event)) {
|
||
const next = reduceComputerStatus(computerRef.current, event);
|
||
commitComputer(next);
|
||
}
|
||
}
|
||
|
||
function ComputerReleaseActions({
|
||
takeoverRequested,
|
||
onRelease,
|
||
}: {
|
||
takeoverRequested: boolean;
|
||
onRelease: (reason?: ComputerReleaseReason) => Promise<void>;
|
||
}) {
|
||
if (!takeoverRequested) {
|
||
return (
|
||
<Button type="button" variant="outline" size="sm" onClick={() => void onRelease()}>
|
||
<Trans>Release</Trans>
|
||
</Button>
|
||
);
|
||
}
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
<Button type="button" variant="outline" size="sm" onClick={() => void onRelease("skipped")}>
|
||
<Trans>Skip</Trans>
|
||
</Button>
|
||
<Button type="button" size="sm" onClick={() => void onRelease("done")}>
|
||
<Trans>I’m done</Trans>
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const MessageView = memo(function MessageView({
|
||
artifactTarget,
|
||
canAnswer,
|
||
message,
|
||
onAnswer,
|
||
onOpenBot,
|
||
onOpenGroup,
|
||
onOpenPeerMessages,
|
||
speakerName,
|
||
memberName,
|
||
peerBot,
|
||
replyPreview,
|
||
replyToMessageId,
|
||
onJumpToMessage,
|
||
onRefresh,
|
||
onBotChanged,
|
||
onAddRoutine,
|
||
voiceReady,
|
||
speaking,
|
||
onSpeak,
|
||
encounterMode = false,
|
||
}: {
|
||
artifactTarget: ArtifactTarget;
|
||
canAnswer: boolean;
|
||
message: ThreadMessage;
|
||
onAnswer: (message: ThreadMessage, text: string) => Promise<void>;
|
||
onOpenBot: (botId: string) => void;
|
||
onOpenGroup: (groupId: string) => void;
|
||
onOpenPeerMessages: (peer: { peerBotId: string; peerBotName: string }) => void;
|
||
speakerName?: string;
|
||
memberName?: (botId: string | undefined) => string | undefined;
|
||
peerBot: (botId: string) => { color: string; status?: string } | undefined;
|
||
replyPreview?: ThreadMessage;
|
||
replyToMessageId?: string;
|
||
onJumpToMessage?: (messageId: string) => void;
|
||
onRefresh: () => Promise<void>;
|
||
onBotChanged: () => Promise<void>;
|
||
onAddRoutine: (name: string, prompt: string) => void;
|
||
voiceReady: boolean;
|
||
speaking: boolean;
|
||
onSpeak: () => void;
|
||
encounterMode?: boolean;
|
||
}) {
|
||
const { t } = useLingui();
|
||
const isNarration =
|
||
message.role === "bot" &&
|
||
message.blocks.length > 0 &&
|
||
message.blocks.every(
|
||
(block) => block.kind === "text" || block.kind === "progress" || block.kind === "steps",
|
||
);
|
||
const isLive = message.id.startsWith("progress:");
|
||
const visibleNarrationBlocks = message.blocks.filter((block) => !isToolActivityBlock(block));
|
||
const parentJumpId = replyPreview?.id ?? replyToMessageId;
|
||
const speakerBot = message.botId ? peerBot?.(message.botId) : undefined;
|
||
const speakerColorDef = useMemo(
|
||
() => resolvePersonaColorDef(message.botId ?? "bot", speakerBot?.color),
|
||
[message.botId, speakerBot?.color],
|
||
);
|
||
const effectiveSpeakerName = speakerName || (message.role === "bot" ? "evOo" : null);
|
||
const messageContext = (
|
||
<>
|
||
{effectiveSpeakerName && message.role === "bot" && !encounterMode ? (
|
||
<div className="mb-2 flex items-center justify-between">
|
||
<div className="flex items-center gap-2.5">
|
||
<div className="relative flex items-center justify-center size-7 rounded-xl bg-white/[0.08] border border-white/[0.12] shadow-xs">
|
||
<EvooMascot size={22} interactive={false} pose={isLive ? "working" : "idle"} />
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[14.5px] font-semibold text-white tracking-tight" dir="auto">
|
||
{effectiveSpeakerName}
|
||
</span>
|
||
<span className="rounded-full bg-emerald-500/15 border border-emerald-500/25 px-2 py-0.5 text-ui-label font-medium text-emerald-400">
|
||
Oo
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span className="text-ui-label font-mono text-zinc-400 tabular-nums">
|
||
{new Date(message.createdAt).toLocaleTimeString([], {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
})}
|
||
</span>
|
||
</div>
|
||
) : effectiveSpeakerName && message.role === "bot" && encounterMode ? (
|
||
<div className="mb-1 flex items-center gap-2 text-ui-label font-medium uppercase tracking-wide text-muted-foreground">
|
||
<span dir="auto">{effectiveSpeakerName}</span>
|
||
<span aria-hidden>·</span>
|
||
<time dateTime={message.createdAt} className="font-mono tabular-nums normal-case">
|
||
{new Date(message.createdAt).toLocaleTimeString([], {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
})}
|
||
</time>
|
||
</div>
|
||
) : speakerName ? (
|
||
<div
|
||
className="mb-1.5 flex items-center gap-2 text-ui-body-sm font-semibold tracking-tight"
|
||
dir="auto"
|
||
style={{ color: speakerColorDef.light }}
|
||
>
|
||
<BotAvatar
|
||
color={speakerBot?.color ?? FALLBACK_BOT_COLOR}
|
||
identity={message.botId}
|
||
size={22}
|
||
/>
|
||
{speakerName}
|
||
</div>
|
||
) : null}
|
||
{parentJumpId ? (
|
||
<button
|
||
type="button"
|
||
data-testid="reply-parent-preview"
|
||
aria-label={t`Jump to replied message`}
|
||
onClick={() => onJumpToMessage?.(parentJumpId)}
|
||
className="mb-2 block max-w-[74%] truncate rounded-[14px] border border-border bg-background px-3 py-2 text-start text-ui-body-sm text-muted-foreground hover:border-border hover:text-foreground/75"
|
||
dir="auto"
|
||
>
|
||
{message.replyQuote
|
||
? `“${message.replyQuote}”`
|
||
: replyPreview
|
||
? previewMessageText(replyPreview)
|
||
: t`Earlier message`}
|
||
</button>
|
||
) : null}
|
||
</>
|
||
);
|
||
if (isNarration) {
|
||
if (visibleNarrationBlocks.length === 0) return null;
|
||
return (
|
||
<>
|
||
{messageContext}
|
||
<div className="flex w-fit max-w-full justify-start">
|
||
<div
|
||
data-testid="message-bot-bubble"
|
||
className={
|
||
encounterMode
|
||
? "max-w-full space-y-2 border-s-2 border-emerald-500/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90"
|
||
: "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95"
|
||
}
|
||
dir="auto"
|
||
>
|
||
{visibleNarrationBlocks.map((block, i) => {
|
||
if (block.kind === "text" || block.kind === "progress") {
|
||
return (
|
||
<div key={i}>
|
||
<ChatMarkdown streaming={block.kind === "progress"}>{block.text}</ChatMarkdown>
|
||
</div>
|
||
);
|
||
}
|
||
return null;
|
||
})}
|
||
{!isLive && voiceReady && message.blocks.some((block) => block.kind === "text") ? (
|
||
<button
|
||
type="button"
|
||
aria-label={speaking ? t`Stop speaking` : t`Speak this reply`}
|
||
onClick={onSpeak}
|
||
className="mt-1 text-ui-body-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
{speaking ? <Trans>Stop</Trans> : <Trans>Speak</Trans>}
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
return (
|
||
<>
|
||
{messageContext}
|
||
{message.blocks.map((block, i) => {
|
||
if (isToolActivityBlock(block)) return null;
|
||
if (block.kind === "handoff") {
|
||
const from = memberName?.(block.fromBotId) ?? t`bot`;
|
||
const to = memberName?.(block.toBotId) ?? t`bot`;
|
||
return (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-center gap-2 py-1 text-ui-body text-muted-foreground"
|
||
>
|
||
<span>
|
||
↪ {to} ← {from}
|
||
</span>
|
||
<span>{block.text}</span>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "bot_message_sent") {
|
||
const peer = block.toBotName;
|
||
const peerBotId = block.toBotId;
|
||
return (
|
||
<SentMessageCard
|
||
key={i}
|
||
botId={peerBotId}
|
||
botName={peer}
|
||
color={peerBot(peerBotId)?.color ?? FALLBACK_BOT_COLOR}
|
||
text={block.text}
|
||
onClick={() => onOpenPeerMessages({ peerBotId, peerBotName: peer })}
|
||
/>
|
||
);
|
||
}
|
||
if (block.kind === "task") {
|
||
return (
|
||
<DelegatedTaskCard
|
||
key={i}
|
||
botId={block.assigneeBotId}
|
||
botName={block.assigneeBotName}
|
||
color={peerBot(block.assigneeBotId)?.color ?? FALLBACK_BOT_COLOR}
|
||
title={block.title}
|
||
text={block.text}
|
||
status={block.status}
|
||
/>
|
||
);
|
||
}
|
||
if (block.kind === "bot_message_received") {
|
||
const peer = block.fromBotName;
|
||
const peerBotId = block.fromBotId;
|
||
const label = t`Message from ${peer}`;
|
||
return (
|
||
<CollaborationMarker
|
||
key={i}
|
||
ariaLabel={label}
|
||
color={peerBot(peerBotId)?.color ?? FALLBACK_BOT_COLOR}
|
||
identity={peerBotId}
|
||
label={label}
|
||
onClick={() => onOpenPeerMessages({ peerBotId, peerBotName: peer })}
|
||
/>
|
||
);
|
||
}
|
||
if (block.kind === "channel_message") {
|
||
return (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-center gap-2 py-1 text-ui-body text-muted-foreground"
|
||
>
|
||
<span>
|
||
{messageProviderLabel(block.provider, block.transport)} · {block.fromLabel}:{" "}
|
||
{block.text}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "meta") {
|
||
return (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-center gap-2 py-1 text-ui-body text-muted-foreground"
|
||
>
|
||
<span className="text-warning">◷</span>
|
||
<span>{block.text}</span>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "progress") {
|
||
return (
|
||
<div key={i} className="flex w-fit max-w-full justify-start">
|
||
<div
|
||
data-testid="message-bot-bubble"
|
||
className="chat-bubble-bot max-w-full rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95"
|
||
dir="auto"
|
||
>
|
||
<ChatMarkdown streaming>{block.text}</ChatMarkdown>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "subagent") {
|
||
const running = block.status === "running";
|
||
const failed = block.status === "failed";
|
||
return (
|
||
<div
|
||
key={i}
|
||
className="apple-glass-card w-[min(460px,95%)] rounded-[22px] px-5 py-4 transition-all"
|
||
>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="flex items-center gap-2.5 min-w-0">
|
||
<div
|
||
className={`relative flex h-2.5 w-2.5 shrink-0 ${running ? "animate-pulse" : ""}`}
|
||
>
|
||
<span
|
||
className={`relative inline-flex rounded-full h-2.5 w-2.5 ${failed ? "bg-red-500" : running ? "bg-amber-400" : "bg-emerald-400"}`}
|
||
></span>
|
||
</div>
|
||
<span className="text-ui-body font-semibold text-foreground truncate" dir="auto">
|
||
{block.name}
|
||
</span>
|
||
</div>
|
||
<span
|
||
className={`rounded-full px-3 py-0.5 text-ui-body-sm font-medium border ${
|
||
failed
|
||
? "border-destructive/30 bg-destructive/15 text-destructive"
|
||
: running
|
||
? "border-warning/30 bg-warning/15 text-warning"
|
||
: "border-success/30 bg-success/15 text-success"
|
||
}`}
|
||
style={{
|
||
animation: running ? "rkPulse 1.2s ease-in-out infinite" : undefined,
|
||
}}
|
||
>
|
||
{running ? t`subagent` : block.status}
|
||
</span>
|
||
</div>
|
||
<div className="mt-2 text-ui-body text-muted-foreground">{block.task}</div>
|
||
{block.progress || block.result ? (
|
||
<div className="mt-2.5 text-[14.5px] leading-[1.5] text-foreground/75">
|
||
<ChatMarkdown streaming={running}>
|
||
{block.result || block.progress || ""}
|
||
</ChatMarkdown>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "project_created") {
|
||
return (
|
||
<ProjectCreatedCard
|
||
key={i}
|
||
name={block.name}
|
||
memberCount={block.memberCount}
|
||
onClick={() => onOpenGroup(block.groupId)}
|
||
/>
|
||
);
|
||
}
|
||
if (block.kind === "child_bot") {
|
||
const removed = block.status === "deleted" || block.status === "archived";
|
||
return (
|
||
<button
|
||
key={i}
|
||
type="button"
|
||
disabled={removed}
|
||
onClick={() => onOpenBot(block.botId)}
|
||
className="w-[min(340px,90%)] rounded-[18px] border border-border bg-muted px-[18px] py-4 text-start disabled:opacity-60"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-ui-body font-medium text-foreground" dir="auto">
|
||
{block.name}
|
||
</span>
|
||
<span
|
||
className={`rounded-full px-[11px] py-1 text-ui-body-sm ${
|
||
removed ? "bg-destructive/15 text-destructive" : "bg-success/15 text-success"
|
||
}`}
|
||
>
|
||
{block.status === "archived" ? (
|
||
<Trans>archived</Trans>
|
||
) : block.status === "deleted" ? (
|
||
<Trans>deleted</Trans>
|
||
) : (
|
||
<Trans>bot</Trans>
|
||
)}
|
||
</span>
|
||
</div>
|
||
<div className="mt-2 text-[14.5px] leading-[1.5] text-foreground/75" dir="auto">
|
||
{removed
|
||
? block.status === "archived"
|
||
? t`Archived. Chat, memory, and files kept.`
|
||
: t`Removed with chat, computer, and memory.`
|
||
: block.title || t`Opened its thread.`}
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
if (block.kind === "choice") {
|
||
const botId = "botId" in artifactTarget ? artifactTarget.botId : message.botId;
|
||
if (!botId) return null;
|
||
return <ChoiceCard key={i} botId={botId} block={block} onBotChanged={onBotChanged} />;
|
||
}
|
||
if (block.kind === "app_connect") {
|
||
const botId = "botId" in artifactTarget ? artifactTarget.botId : message.botId;
|
||
if (!botId) return null;
|
||
return (
|
||
<div key={i} className="flex justify-start py-1">
|
||
<AppConnectCard botId={botId} block={block} />
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "chart") {
|
||
return (
|
||
<div key={i} className="flex justify-start">
|
||
<ChartBlockView name={block.name} spec={block.spec} data={block.data} />
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "mcp_approval") {
|
||
return (
|
||
<div key={i} className="flex justify-start">
|
||
<McpApprovalCard
|
||
botId={"botId" in artifactTarget ? artifactTarget.botId : message.botId}
|
||
name={block.name}
|
||
serverId={block.serverId}
|
||
transport={block.transport}
|
||
endpoint={block.endpoint}
|
||
needsOAuth={block.needsOAuth}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "image") {
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
|
||
>
|
||
<ArtifactImage
|
||
target={artifactTarget}
|
||
artifactId={block.artifactId}
|
||
name={block.name}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "file") {
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
|
||
>
|
||
<ArtifactFileCard
|
||
target={artifactTarget}
|
||
artifactId={block.artifactId}
|
||
name={block.name}
|
||
mimeType={block.mimeType}
|
||
size={block.size}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "text" && message.role === "user") {
|
||
return (
|
||
<div key={i} className="flex w-fit max-w-full justify-end">
|
||
<div
|
||
data-testid="message-user-bubble"
|
||
className={
|
||
encounterMode
|
||
? "max-w-full whitespace-pre-wrap wrap-anywhere rounded-2xl border border-white/10 bg-white/[0.06] px-3.5 py-2 text-ui-body-sm leading-relaxed text-foreground/95"
|
||
: "chat-bubble-user max-w-full whitespace-pre-wrap wrap-anywhere rounded-[24px] px-6 py-4 text-[17px] leading-[1.62] text-[#FAFAFA] shadow-md"
|
||
}
|
||
dir="auto"
|
||
>
|
||
{block.text}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "text") {
|
||
return (
|
||
<div key={i} className="flex w-fit max-w-full justify-start">
|
||
<div
|
||
data-testid="message-bot-bubble"
|
||
className={
|
||
encounterMode
|
||
? "max-w-full space-y-2 border-s-2 border-emerald-500/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90"
|
||
: "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-6 py-4 text-[17.5px] leading-[1.85] text-foreground/95"
|
||
}
|
||
dir="auto"
|
||
>
|
||
<ChatMarkdown>{block.text}</ChatMarkdown>
|
||
<div className="mt-3 pt-2.5 flex items-center justify-between border-t border-white/[0.08] text-ui-label text-muted-foreground/75">
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(block.text);
|
||
}
|
||
}}
|
||
className="inline-flex items-center gap-1.5 hover:text-white transition-colors cursor-pointer text-ui-body-sm font-medium"
|
||
title={t`Antwort kopieren`}
|
||
>
|
||
<Copy size={13.5} />
|
||
<span>{t`Kopieren`}</span>
|
||
</button>
|
||
{voiceReady ? (
|
||
<button
|
||
type="button"
|
||
aria-label={speaking ? t`Stop speaking` : t`Speak this reply`}
|
||
onClick={onSpeak}
|
||
className="inline-flex items-center gap-1.5 hover:text-white transition-colors cursor-pointer text-ui-body-sm font-medium"
|
||
>
|
||
<Volume2 size={13.5} />
|
||
<span>{speaking ? t`Stop` : t`Vorlesen`}</span>
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
<span className="tabular-nums font-mono text-ui-label text-zinc-400">
|
||
{new Date(message.createdAt).toLocaleTimeString([], {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
})}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "card") {
|
||
return (
|
||
<div key={i} className="flex justify-start">
|
||
<div className="flex flex-col gap-2 rounded-[20px] bg-muted px-5 py-4">
|
||
{block.lines.map((line) => (
|
||
<div key={line.k} className="flex items-baseline gap-2.5 text-ui-body">
|
||
<span className="text-success">✓</span>
|
||
<span className="font-semibold text-white">{line.k}</span>
|
||
<span className="text-muted-foreground">→</span>
|
||
<span>{line.v}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "ask") {
|
||
return (
|
||
<AskCard
|
||
key={i}
|
||
block={block}
|
||
canAnswer={canAnswer}
|
||
onAnswer={(text) => onAnswer(message, text)}
|
||
/>
|
||
);
|
||
}
|
||
if (block.kind === "cloud_agent") return <CloudAgentCard key={i} block={block} />;
|
||
if (block.kind === "skill_draft") {
|
||
return (
|
||
<div key={i} className="flex justify-start">
|
||
<SkillDraftCard block={block} onRefresh={onRefresh} onAddRoutine={onAddRoutine} />
|
||
</div>
|
||
);
|
||
}
|
||
if (block.kind === "computer") {
|
||
return (
|
||
<div
|
||
key={i}
|
||
className="w-[340px] rounded-[18px] border border-border bg-muted px-[18px] py-4"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-ui-body font-medium text-foreground">
|
||
<Trans>Computer</Trans>
|
||
</span>
|
||
<span
|
||
className={
|
||
block.state === "Needs you"
|
||
? "rounded-full bg-warning/15 px-[11px] py-1 text-ui-body-sm text-warning"
|
||
: "rounded-full bg-success/15 px-[11px] py-1 text-ui-body-sm text-success"
|
||
}
|
||
>
|
||
{block.state}
|
||
</span>
|
||
</div>
|
||
<div className="my-2.5 text-[14.5px] leading-[1.5] text-foreground/75">
|
||
<ChatMarkdown>{block.text}</ChatMarkdown>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return null;
|
||
})}
|
||
</>
|
||
);
|
||
});
|
||
|
||
function embeddableScreenUrl(url: string | null): string | null {
|
||
if (!url) return null;
|
||
try {
|
||
const parsed = new URL(url, window.location.href);
|
||
const page = new URL(window.location.href);
|
||
const local = parsed.hostname === "127.0.0.1" || parsed.hostname === "localhost";
|
||
const pagePort = page.port || (page.protocol === "https:" ? "443" : "80");
|
||
if (local && parsed.port && parsed.port !== pagePort) {
|
||
return null;
|
||
}
|
||
return parsed.toString();
|
||
} catch {
|
||
return url;
|
||
}
|
||
}
|
||
|
||
function screenIframeSandbox(url: string | null) {
|
||
if (!url) return undefined;
|
||
try {
|
||
return new URL(url, window.location.href).pathname.startsWith("/novnc/")
|
||
? "allow-scripts allow-pointer-lock"
|
||
: undefined;
|
||
} catch {
|
||
return undefined;
|
||
}
|
||
}
|
||
|
||
function DesktopKindEmptyState({ className }: { className?: string }) {
|
||
return (
|
||
<div className={className}>
|
||
<Trans>
|
||
This bot runs on this computer, not a Linux desktop. Shell and files use your home folder.
|
||
</Trans>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function computerPlaceholder(
|
||
state: ComputerStatus["state"] | undefined,
|
||
booting: boolean,
|
||
label: string,
|
||
) {
|
||
if (state === "booting" || booting) return t`Booting live desktop…`;
|
||
if (state === "running") return label;
|
||
if (state === "suspended") return t`Computer is asleep. Open it to wake.`;
|
||
if (state === "error") return t`Computer failed to boot`;
|
||
return t`Computer is stopped`;
|
||
}
|
||
|
||
function computerLabel(mode: ComputerStatus["mode"] | undefined, botName: string) {
|
||
return mode === "dedicated" ? t`${botName}’s computer` : t`Team Computer`;
|
||
}
|
||
|
||
function newClientNonce(): string {
|
||
const webCrypto = globalThis.crypto;
|
||
if (webCrypto && typeof webCrypto.randomUUID === "function") {
|
||
return webCrypto.randomUUID();
|
||
}
|
||
return `m-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
|
||
}
|
||
|
||
function readFileAsBase64(file: File): Promise<string> {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
const result = typeof reader.result === "string" ? reader.result : "";
|
||
const base64 = result.includes(",") ? (result.split(",")[1] ?? "") : result;
|
||
resolve(base64);
|
||
};
|
||
reader.onerror = () => reject(reader.error ?? new Error("Failed to read file"));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|