897 lines
29 KiB
TypeScript
897 lines
29 KiB
TypeScript
"use client"
|
||
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||
import { useTranslations } from "next-intl"
|
||
import { MessageInput } from "@/components/chat/message-input"
|
||
import type { AgentType, PromptDraft, SessionStats } from "@/lib/types"
|
||
import { useFolderContext } from "@/contexts/folder-context"
|
||
import { useTabContext } from "@/contexts/tab-context"
|
||
import { useSessionStats } from "@/contexts/session-stats-context"
|
||
import { useAcpActions } from "@/contexts/acp-connections-context"
|
||
import { useConnectionLifecycle } from "@/hooks/use-connection-lifecycle"
|
||
import type { AdaptedMessage } from "@/lib/adapters/ai-elements-adapter"
|
||
import {
|
||
adaptLiveMessageFromAcp,
|
||
adaptMessageTurns,
|
||
} from "@/lib/adapters/ai-elements-adapter"
|
||
import {
|
||
buildUserMessageTextPartsFromDraft,
|
||
extractUserImagesFromDraft,
|
||
extractUserResourcesFromDraft,
|
||
getPromptDraftDisplayText,
|
||
} from "@/lib/prompt-draft"
|
||
import {
|
||
buildPlanKey,
|
||
extractLatestPlanEntriesFromMessages,
|
||
} from "@/lib/agent-plan"
|
||
import {
|
||
buildConversationDraftStorageKey,
|
||
buildNewConversationDraftStorageKey,
|
||
moveMessageInputDraft,
|
||
} from "@/lib/message-input-draft"
|
||
import {
|
||
createConversation,
|
||
getFolderConversation,
|
||
openSettingsWindow,
|
||
updateConversationStatus,
|
||
updateConversationExternalId,
|
||
} from "@/lib/tauri"
|
||
import { disposeTauriListener } from "@/lib/tauri-listener"
|
||
import { AgentSelector } from "@/components/chat/agent-selector"
|
||
import { LiveMessageBlock } from "@/components/chat/live-message-block"
|
||
import { AgentPlanOverlay } from "@/components/chat/agent-plan-overlay"
|
||
import { LiveTurnStats } from "@/components/message/live-turn-stats"
|
||
import { TurnStats } from "@/components/message/turn-stats"
|
||
import { UserResourceLinks } from "@/components/message/user-resource-links"
|
||
import { UserImageAttachments } from "@/components/message/user-image-attachments"
|
||
import { ConversationShell } from "@/components/chat/conversation-shell"
|
||
import {
|
||
MessageThread,
|
||
MessageThreadContent,
|
||
} from "@/components/ai-elements/message-thread"
|
||
import { Message, MessageContent } from "@/components/ai-elements/message"
|
||
import { ContentPartsRenderer } from "@/components/message/content-parts-renderer"
|
||
|
||
const ACP_AGENTS_UPDATED_EVENT = "app://acp-agents-updated"
|
||
|
||
interface WelcomeInputPanelProps {
|
||
defaultAgentType?: AgentType
|
||
workingDir?: string
|
||
tabId?: string
|
||
isActive?: boolean
|
||
}
|
||
|
||
interface AgentsUpdatedEventPayload {
|
||
reason?: string
|
||
agent_type?: AgentType | null
|
||
}
|
||
|
||
function normalizeErrorMessage(error: unknown): string {
|
||
if (error instanceof Error) return error.message
|
||
return String(error)
|
||
}
|
||
|
||
function isExpectedAutoLinkError(error: unknown): boolean {
|
||
if (!error || typeof error !== "object") return false
|
||
return (error as { alerted?: unknown }).alerted === true
|
||
}
|
||
|
||
function buildInlineAutoConnectErrorMessage(
|
||
raw: string,
|
||
options: {
|
||
fallback: string
|
||
append: (message: string) => string
|
||
alreadyContainsPath: (message: string) => boolean
|
||
}
|
||
): string {
|
||
const normalized = raw.trim().replace(/[。.!?，,；;：:]+$/u, "")
|
||
if (!normalized) return options.fallback
|
||
if (options.alreadyContainsPath(normalized)) return normalized
|
||
return options.append(normalized)
|
||
}
|
||
|
||
export function WelcomeInputPanel({
|
||
defaultAgentType,
|
||
workingDir,
|
||
tabId,
|
||
isActive = true,
|
||
}: WelcomeInputPanelProps) {
|
||
const t = useTranslations("Folder.chat.welcomeInputPanel")
|
||
const tabT = useTranslations("Folder.tabContext")
|
||
const sharedT = useTranslations("Folder.chat.shared")
|
||
const fallbackContextId = useMemo(() => crypto.randomUUID(), [])
|
||
const contextKey = tabId ?? `new-${fallbackContextId}`
|
||
|
||
const { folderId, refreshConversations } = useFolderContext()
|
||
const { promoteNewConversationTab, linkTabConversation } = useTabContext()
|
||
const { setSessionStats } = useSessionStats()
|
||
const { migrateContextKey } = useAcpActions()
|
||
const latestSessionStatsRef = useRef<SessionStats | null>(null)
|
||
const isActiveRef = useRef(isActive)
|
||
const statsRefreshSeqRef = useRef(0)
|
||
|
||
useEffect(() => {
|
||
isActiveRef.current = isActive
|
||
}, [isActive])
|
||
|
||
// Reset or restore token stats when tab becomes active
|
||
useEffect(() => {
|
||
if (isActive) {
|
||
setSessionStats(latestSessionStatsRef.current)
|
||
}
|
||
}, [isActive, setSessionStats])
|
||
|
||
const applySessionStats = useCallback(
|
||
(stats: SessionStats | null) => {
|
||
latestSessionStatsRef.current = stats
|
||
if (isActiveRef.current) {
|
||
setSessionStats(stats)
|
||
}
|
||
},
|
||
[setSessionStats]
|
||
)
|
||
|
||
const hasTokenStats = useCallback((stats: SessionStats | null): boolean => {
|
||
if (!stats) return false
|
||
return (
|
||
stats.total_usage !== null ||
|
||
stats.total_tokens != null ||
|
||
stats.context_window_used_tokens != null ||
|
||
stats.context_window_max_tokens != null
|
||
)
|
||
}, [])
|
||
|
||
const hasAssistantUsage = useCallback(
|
||
(messages: AdaptedMessage[]): boolean => {
|
||
for (let i = messages.length - 1; i >= 0; i -= 1) {
|
||
const message = messages[i]
|
||
if (message.role !== "assistant") continue
|
||
return message.usage != null
|
||
}
|
||
return false
|
||
},
|
||
[]
|
||
)
|
||
|
||
const refreshConversationFromDb = useCallback(
|
||
async (expectedTurnCount?: number) => {
|
||
const conversationId = dbConvIdRef.current
|
||
if (!conversationId) return
|
||
|
||
const refreshSeq = ++statsRefreshSeqRef.current
|
||
const maxAttempts = 10
|
||
const retryDelayMs = 400
|
||
let latestMessages: AdaptedMessage[] | null = null
|
||
let latestStats: SessionStats | null = null
|
||
|
||
for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
|
||
if (refreshSeq !== statsRefreshSeqRef.current) return
|
||
|
||
try {
|
||
const detail = await getFolderConversation(conversationId)
|
||
if (refreshSeq !== statsRefreshSeqRef.current) return
|
||
|
||
const messages = adaptMessageTurns(detail.turns, {
|
||
attachedResources: sharedT("attachedResources"),
|
||
toolCallFailed: sharedT("toolCallFailed"),
|
||
})
|
||
const stats = detail.session_stats ?? null
|
||
latestMessages = messages
|
||
latestStats = stats
|
||
|
||
const hasExpectedTurns =
|
||
expectedTurnCount == null ||
|
||
detail.turns.length >= expectedTurnCount
|
||
const canShowTurnTokenStats = hasAssistantUsage(messages)
|
||
const canShowSessionTokenStats = hasTokenStats(stats)
|
||
if (
|
||
hasExpectedTurns &&
|
||
(canShowTurnTokenStats || canShowSessionTokenStats)
|
||
) {
|
||
setHistory(messages)
|
||
if (canShowSessionTokenStats) {
|
||
applySessionStats(stats)
|
||
}
|
||
return
|
||
}
|
||
} catch {
|
||
// Ignore transient read failures while session file is syncing.
|
||
}
|
||
|
||
if (attempt < maxAttempts - 1) {
|
||
await new Promise((resolve) => setTimeout(resolve, retryDelayMs))
|
||
}
|
||
}
|
||
|
||
if (refreshSeq !== statsRefreshSeqRef.current) return
|
||
if (latestMessages) {
|
||
setHistory(latestMessages)
|
||
}
|
||
if (latestStats && hasTokenStats(latestStats)) {
|
||
applySessionStats(latestStats)
|
||
}
|
||
},
|
||
[applySessionStats, hasAssistantUsage, hasTokenStats, sharedT]
|
||
)
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
statsRefreshSeqRef.current += 1
|
||
}
|
||
}, [])
|
||
|
||
const [phase, setPhase] = useState<"welcome" | "conversation">("welcome")
|
||
const [selectedAgent, setSelectedAgent] = useState<AgentType>(
|
||
defaultAgentType ?? "codex"
|
||
)
|
||
const [history, setHistory] = useState<AdaptedMessage[]>([])
|
||
const historyRef = useRef<AdaptedMessage[]>([])
|
||
useEffect(() => {
|
||
historyRef.current = history
|
||
}, [history])
|
||
const historicalPlanEntries = useMemo(
|
||
() => extractLatestPlanEntriesFromMessages(history),
|
||
[history]
|
||
)
|
||
const historicalPlanKey = useMemo(
|
||
() => buildPlanKey(historicalPlanEntries),
|
||
[historicalPlanEntries]
|
||
)
|
||
const [modeId, setModeId] = useState<string | null>(null)
|
||
const [dbConversationId, setDbConversationId] = useState<number | null>(null)
|
||
const [agentsLoaded, setAgentsLoaded] = useState(false)
|
||
const [usableAgentCount, setUsableAgentCount] = useState(0)
|
||
const [agentConnectError, setAgentConnectError] = useState<string | null>(
|
||
null
|
||
)
|
||
const canAutoConnect = agentsLoaded && usableAgentCount > 0
|
||
const pendingPromptRef = useRef<{
|
||
draft: PromptDraft
|
||
modeId: string | null
|
||
} | null>(null)
|
||
const newConversationDraftStorageKey = useMemo(
|
||
() =>
|
||
buildNewConversationDraftStorageKey({
|
||
folderId,
|
||
}),
|
||
[folderId]
|
||
)
|
||
const activeDraftStorageKey = useMemo(() => {
|
||
if (dbConversationId != null) {
|
||
return buildConversationDraftStorageKey(selectedAgent, dbConversationId)
|
||
}
|
||
return newConversationDraftStorageKey
|
||
}, [dbConversationId, newConversationDraftStorageKey, selectedAgent])
|
||
|
||
// DB persistence state
|
||
const dbConvIdRef = useRef<number | null>(null)
|
||
const statusUpdatedRef = useRef(false)
|
||
const tabPromotedRef = useRef(false)
|
||
const tabIdRef = useRef(tabId)
|
||
const selectedAgentRef = useRef(selectedAgent)
|
||
const convTitleRef = useRef<string | null>(null)
|
||
useEffect(() => {
|
||
tabIdRef.current = tabId
|
||
}, [tabId])
|
||
useEffect(() => {
|
||
selectedAgentRef.current = selectedAgent
|
||
}, [selectedAgent])
|
||
|
||
const {
|
||
conn,
|
||
modeLoading,
|
||
configOptionsLoading,
|
||
autoConnectError,
|
||
handleFocus,
|
||
handleSend: lifecycleSend,
|
||
handleSetConfigOption,
|
||
handleCancel,
|
||
handleRespondPermission,
|
||
} = useConnectionLifecycle({
|
||
contextKey,
|
||
agentType: selectedAgent,
|
||
isActive: isActive && canAutoConnect,
|
||
workingDir,
|
||
})
|
||
|
||
// Destructure stable callback + volatile status separately.
|
||
// conn.connect is stable (depends only on actions + contextKey).
|
||
// conn.status changes on state transitions (~5/turn), NOT on every
|
||
// streaming delta (hundreds/sec) — much cheaper than depending on `conn`.
|
||
const {
|
||
status: connStatus,
|
||
connect: connConnect,
|
||
disconnect: connDisconnect,
|
||
sessionId: connSessionId,
|
||
} = conn
|
||
const isConnecting =
|
||
connStatus === "connecting" || connStatus === "downloading"
|
||
const connectionModes = useMemo(
|
||
() => conn.modes?.available_modes ?? [],
|
||
[conn.modes?.available_modes]
|
||
)
|
||
const connectionConfigOptions = useMemo(
|
||
() => conn.configOptions ?? [],
|
||
[conn.configOptions]
|
||
)
|
||
const connectionCommands = useMemo(
|
||
() => conn.availableCommands ?? [],
|
||
[conn.availableCommands]
|
||
)
|
||
const selectedModeId = useMemo(() => {
|
||
if (connectionModes.length === 0) return null
|
||
if (modeId && connectionModes.some((mode) => mode.id === modeId)) {
|
||
return modeId
|
||
}
|
||
return conn.modes?.current_mode_id ?? connectionModes[0]?.id ?? null
|
||
}, [conn.modes?.current_mode_id, connectionModes, modeId])
|
||
|
||
// Persist the agent-assigned session ID as external_id once both
|
||
// the DB conversation ID and the ACP session ID are available.
|
||
const externalIdSavedRef = useRef(false)
|
||
const sessionIdRef = useRef<string | null>(null)
|
||
const refreshingCurrentAgentRef = useRef(false)
|
||
const agentStatusRefreshTimerRef = useRef<ReturnType<
|
||
typeof setTimeout
|
||
> | null>(null)
|
||
const phaseRef = useRef(phase)
|
||
const workingDirRef = useRef(workingDir)
|
||
const connStatusRef = useRef(connStatus)
|
||
const isConnectingRef = useRef(false)
|
||
const connConnectRef = useRef(connConnect)
|
||
const connDisconnectRef = useRef(connDisconnect)
|
||
useEffect(() => {
|
||
if (connSessionId) {
|
||
sessionIdRef.current = connSessionId
|
||
}
|
||
}, [connSessionId])
|
||
useEffect(() => {
|
||
phaseRef.current = phase
|
||
}, [phase])
|
||
useEffect(() => {
|
||
workingDirRef.current = workingDir
|
||
}, [workingDir])
|
||
useEffect(() => {
|
||
connStatusRef.current = connStatus
|
||
}, [connStatus])
|
||
useEffect(() => {
|
||
isConnectingRef.current = isConnecting
|
||
}, [isConnecting])
|
||
useEffect(() => {
|
||
connConnectRef.current = connConnect
|
||
}, [connConnect])
|
||
useEffect(() => {
|
||
connDisconnectRef.current = connDisconnect
|
||
}, [connDisconnect])
|
||
|
||
const trySaveExternalId = useCallback(() => {
|
||
if (
|
||
externalIdSavedRef.current ||
|
||
!dbConvIdRef.current ||
|
||
!sessionIdRef.current
|
||
)
|
||
return
|
||
externalIdSavedRef.current = true
|
||
updateConversationExternalId(
|
||
dbConvIdRef.current,
|
||
sessionIdRef.current
|
||
).catch((e: unknown) =>
|
||
console.error("[WelcomePanel] update external_id:", e)
|
||
)
|
||
}, [])
|
||
|
||
// Trigger when session ID arrives from ACP
|
||
useEffect(() => {
|
||
if (connSessionId) trySaveExternalId()
|
||
}, [connSessionId, trySaveExternalId])
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
let unlisten: (() => void) | null = null
|
||
|
||
const syncCurrentAgentStatus = async () => {
|
||
if (cancelled) return
|
||
if (phaseRef.current !== "welcome") return
|
||
const currentWorkingDir = workingDirRef.current
|
||
if (!currentWorkingDir) return
|
||
if (refreshingCurrentAgentRef.current) return
|
||
const currentConnStatus = connStatusRef.current
|
||
if (currentConnStatus === "prompting" || isConnectingRef.current) return
|
||
|
||
refreshingCurrentAgentRef.current = true
|
||
try {
|
||
setAgentConnectError(null)
|
||
if (currentConnStatus === "connected") {
|
||
await connDisconnectRef.current()
|
||
}
|
||
await connConnectRef.current(
|
||
selectedAgentRef.current,
|
||
currentWorkingDir,
|
||
undefined,
|
||
{
|
||
source: "auto_link",
|
||
}
|
||
)
|
||
if (!cancelled) {
|
||
setAgentConnectError(null)
|
||
}
|
||
} catch (error) {
|
||
if (!cancelled) {
|
||
setAgentConnectError(normalizeErrorMessage(error))
|
||
}
|
||
if (!isExpectedAutoLinkError(error)) {
|
||
console.error("[WelcomePanel] refresh current agent status:", error)
|
||
}
|
||
} finally {
|
||
refreshingCurrentAgentRef.current = false
|
||
}
|
||
}
|
||
|
||
void import("@tauri-apps/api/event")
|
||
.then(({ listen }) =>
|
||
listen<AgentsUpdatedEventPayload>(ACP_AGENTS_UPDATED_EVENT, (event) => {
|
||
if (cancelled) return
|
||
if (event.payload?.reason === "agent_reordered") return
|
||
const changedAgentType = event.payload?.agent_type
|
||
if (
|
||
changedAgentType &&
|
||
changedAgentType !== selectedAgentRef.current
|
||
) {
|
||
return
|
||
}
|
||
if (agentStatusRefreshTimerRef.current) {
|
||
clearTimeout(agentStatusRefreshTimerRef.current)
|
||
}
|
||
agentStatusRefreshTimerRef.current = setTimeout(() => {
|
||
void syncCurrentAgentStatus()
|
||
}, 120)
|
||
})
|
||
)
|
||
.then((dispose) => {
|
||
if (cancelled) {
|
||
disposeTauriListener(dispose, "WelcomeInputPanel.agentsUpdated")
|
||
return
|
||
}
|
||
unlisten = dispose
|
||
})
|
||
.catch(() => {
|
||
// Ignore when non-tauri runtime.
|
||
})
|
||
|
||
return () => {
|
||
cancelled = true
|
||
if (agentStatusRefreshTimerRef.current) {
|
||
clearTimeout(agentStatusRefreshTimerRef.current)
|
||
agentStatusRefreshTimerRef.current = null
|
||
}
|
||
disposeTauriListener(unlisten, "WelcomeInputPanel.agentsUpdated")
|
||
}
|
||
}, [])
|
||
|
||
const prevStatusRef = useRef(connStatus)
|
||
|
||
// Accumulate history when prompting completes
|
||
useEffect(() => {
|
||
const prev = prevStatusRef.current
|
||
prevStatusRef.current = connStatus
|
||
|
||
if (prev === "prompting" && connStatus !== "prompting") {
|
||
if (conn.liveMessage && conn.liveMessage.content.length > 0) {
|
||
const adapted = adaptLiveMessageFromAcp(conn.liveMessage, {
|
||
isLiveStreaming: false,
|
||
toolCallFailedText: sharedT("toolCallFailed"),
|
||
planUpdatedText: sharedT("planUpdated"),
|
||
})
|
||
|
||
setHistory((h) => [...h, adapted])
|
||
}
|
||
// Agent turn ended — mark as pending_review unless it's a terminal state
|
||
if (
|
||
dbConvIdRef.current &&
|
||
connStatus !== "disconnected" &&
|
||
connStatus !== "error"
|
||
) {
|
||
updateConversationStatus(dbConvIdRef.current, "pending_review")
|
||
.then(() => refreshConversations())
|
||
.catch((e: unknown) =>
|
||
console.error("[WelcomePanel] update status:", e)
|
||
)
|
||
}
|
||
|
||
void refreshConversationFromDb(
|
||
historyRef.current.length + (conn.liveMessage ? 1 : 0)
|
||
)
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps -- conn.liveMessage, lifecycleSend intentionally omitted: effect only fires on status transitions
|
||
}, [connStatus, refreshConversations, refreshConversationFromDb, sharedT])
|
||
|
||
// When connection becomes "connected" and we have a pending prompt, send it
|
||
useEffect(() => {
|
||
if (connStatus === "connected" && pendingPromptRef.current) {
|
||
const pending = pendingPromptRef.current
|
||
pendingPromptRef.current = null
|
||
lifecycleSend(pending.draft, pending.modeId)
|
||
}
|
||
}, [connStatus, lifecycleSend])
|
||
|
||
// Promote tab helper — call once when conversation ends or component unmounts
|
||
const promoteTab = useCallback(() => {
|
||
if (tabPromotedRef.current || !dbConvIdRef.current) return
|
||
tabPromotedRef.current = true
|
||
const tid = tabIdRef.current
|
||
const convId = dbConvIdRef.current
|
||
const agent = selectedAgentRef.current
|
||
const title = convTitleRef.current || tabT("untitledConversation")
|
||
const canonicalContextKey = `conv-${agent}-${convId}`
|
||
|
||
// Keep in-flight stream/state attached when this new-conversation view
|
||
// is closed and later reopened as a canonical conversation tab.
|
||
migrateContextKey(contextKey, canonicalContextKey)
|
||
|
||
if (tid) {
|
||
promoteNewConversationTab(tid, convId, agent, title)
|
||
}
|
||
refreshConversations()
|
||
}, [
|
||
promoteNewConversationTab,
|
||
refreshConversations,
|
||
migrateContextKey,
|
||
contextKey,
|
||
tabT,
|
||
])
|
||
|
||
// Update conversation status on disconnect/error + promote tab
|
||
useEffect(() => {
|
||
if (!dbConvIdRef.current || statusUpdatedRef.current) return
|
||
if (connStatus === "disconnected") {
|
||
statusUpdatedRef.current = true
|
||
updateConversationStatus(dbConvIdRef.current, "completed").catch((e) =>
|
||
console.error("[WelcomePanel] update status:", e)
|
||
)
|
||
promoteTab()
|
||
} else if (connStatus === "error") {
|
||
statusUpdatedRef.current = true
|
||
updateConversationStatus(dbConvIdRef.current, "cancelled").catch((e) =>
|
||
console.error("[WelcomePanel] update status:", e)
|
||
)
|
||
promoteTab()
|
||
}
|
||
}, [connStatus, promoteTab])
|
||
|
||
// Promote tab on unmount if not yet promoted (e.g. user closes tab)
|
||
useEffect(() => {
|
||
return () => {
|
||
promoteTab()
|
||
}
|
||
}, [promoteTab])
|
||
|
||
const handleAgentSelect = useCallback(
|
||
(agentType: AgentType) => {
|
||
if (agentType === selectedAgent) return
|
||
setSelectedAgent(agentType)
|
||
setModeId(null)
|
||
setAgentConnectError(null)
|
||
connDisconnect()
|
||
.catch((e) => console.error("[WelcomePanel] disconnect old agent:", e))
|
||
.finally(() => {
|
||
connConnect(agentType, workingDir, undefined, {
|
||
source: "auto_link",
|
||
})
|
||
.then(() => {
|
||
setAgentConnectError(null)
|
||
})
|
||
.catch((e) => {
|
||
setAgentConnectError(normalizeErrorMessage(e))
|
||
if (!isExpectedAutoLinkError(e)) {
|
||
console.error("[WelcomePanel] switch agent:", e)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
[selectedAgent, connConnect, connDisconnect, workingDir]
|
||
)
|
||
|
||
// Welcome phase: submit first message.
|
||
const handleWelcomeSend = useCallback(
|
||
(draft: PromptDraft, selectedModeId?: string | null) => {
|
||
const displayText = getPromptDraftDisplayText(
|
||
draft,
|
||
sharedT("attachedResources")
|
||
)
|
||
const userMsg: AdaptedMessage = {
|
||
id: crypto.randomUUID(),
|
||
role: "user",
|
||
content: buildUserMessageTextPartsFromDraft(
|
||
draft,
|
||
sharedT("attachedResources")
|
||
),
|
||
userImages: extractUserImagesFromDraft(draft),
|
||
userResources: extractUserResourcesFromDraft(draft),
|
||
timestamp: new Date().toISOString(),
|
||
}
|
||
setHistory([userMsg])
|
||
setPhase("conversation")
|
||
applySessionStats(null)
|
||
statsRefreshSeqRef.current += 1
|
||
|
||
// If already connected, send directly; otherwise queue for when connected
|
||
if (connStatus === "connected") {
|
||
lifecycleSend(draft, selectedModeId)
|
||
} else {
|
||
pendingPromptRef.current = {
|
||
draft,
|
||
modeId: selectedModeId ?? null,
|
||
}
|
||
// Ensure connection is being established
|
||
if (
|
||
!connStatus ||
|
||
connStatus === "disconnected" ||
|
||
connStatus === "error"
|
||
) {
|
||
connConnect(selectedAgent, workingDir, undefined, {
|
||
source: "auto_link",
|
||
}).catch((e) => {
|
||
setAgentConnectError(normalizeErrorMessage(e))
|
||
})
|
||
}
|
||
}
|
||
|
||
// DB persistence: create conversation
|
||
const title = displayText.slice(0, 80)
|
||
convTitleRef.current = title
|
||
createConversation(folderId, selectedAgent, title)
|
||
.then((convId) => {
|
||
dbConvIdRef.current = convId
|
||
setDbConversationId(convId)
|
||
moveMessageInputDraft(
|
||
newConversationDraftStorageKey,
|
||
buildConversationDraftStorageKey(selectedAgent, convId)
|
||
)
|
||
// Link tab to DB conversation so status dot updates and tab is persisted
|
||
if (tabIdRef.current) {
|
||
linkTabConversation(tabIdRef.current, convId, selectedAgent, title)
|
||
}
|
||
// If ACP session ID already arrived, save external_id now
|
||
trySaveExternalId()
|
||
refreshConversations()
|
||
})
|
||
.catch((e: unknown) =>
|
||
console.error("[WelcomePanel] create conversation:", e)
|
||
)
|
||
},
|
||
[
|
||
selectedAgent,
|
||
workingDir,
|
||
connStatus,
|
||
connConnect,
|
||
lifecycleSend,
|
||
folderId,
|
||
refreshConversations,
|
||
linkTabConversation,
|
||
trySaveExternalId,
|
||
applySessionStats,
|
||
newConversationDraftStorageKey,
|
||
sharedT,
|
||
]
|
||
)
|
||
|
||
// Conversation phase: prepend user message to history before sending
|
||
const handleSendWithHistory = useCallback(
|
||
(draft: PromptDraft, selectedModeId?: string | null) => {
|
||
const userMsg: AdaptedMessage = {
|
||
id: crypto.randomUUID(),
|
||
role: "user",
|
||
content: buildUserMessageTextPartsFromDraft(
|
||
draft,
|
||
sharedT("attachedResources")
|
||
),
|
||
userImages: extractUserImagesFromDraft(draft),
|
||
userResources: extractUserResourcesFromDraft(draft),
|
||
timestamp: new Date().toISOString(),
|
||
}
|
||
setHistory((h) => [...h, userMsg])
|
||
lifecycleSend(draft, selectedModeId)
|
||
|
||
// Update status
|
||
if (dbConvIdRef.current) {
|
||
updateConversationStatus(dbConvIdRef.current, "in_progress")
|
||
.then(() => refreshConversations())
|
||
.catch((e: unknown) =>
|
||
console.error("[WelcomePanel] update status:", e)
|
||
)
|
||
statusUpdatedRef.current = false
|
||
}
|
||
},
|
||
[lifecycleSend, refreshConversations, sharedT]
|
||
)
|
||
|
||
const handleOpenAgentsSettings = useCallback(() => {
|
||
openSettingsWindow("agents", { agentType: selectedAgent }).catch((err) => {
|
||
console.error("[WelcomePanel] failed to open settings window:", err)
|
||
})
|
||
}, [selectedAgent])
|
||
|
||
const buildAutoConnectErrorMessage = useCallback(
|
||
(raw: string) =>
|
||
buildInlineAutoConnectErrorMessage(raw, {
|
||
fallback: t("autoConnectFallback"),
|
||
append: (message) =>
|
||
t("autoConnectAppend", {
|
||
message,
|
||
path: t("agentsSettingsPath"),
|
||
}),
|
||
alreadyContainsPath: (message) =>
|
||
[t("agentsSettingsPath"), "Settings > Agents"].some((path) =>
|
||
message.includes(path)
|
||
),
|
||
}),
|
||
[t]
|
||
)
|
||
|
||
// Track live message visibility across turn completion.
|
||
// Hooks must be called before any conditional returns.
|
||
const prevConnStatusForLiveRef = useRef(connStatus)
|
||
const showLiveTransitionRef = useRef(false)
|
||
const prevHistoryLenRef = useRef(history.length)
|
||
|
||
if (connStatus === "prompting") {
|
||
showLiveTransitionRef.current = false
|
||
} else if (prevConnStatusForLiveRef.current === "prompting") {
|
||
showLiveTransitionRef.current = true
|
||
}
|
||
prevConnStatusForLiveRef.current = connStatus
|
||
|
||
// Once the effect adds the adapted message to history, hide the live block.
|
||
if (
|
||
history.length > prevHistoryLenRef.current &&
|
||
showLiveTransitionRef.current
|
||
) {
|
||
showLiveTransitionRef.current = false
|
||
}
|
||
prevHistoryLenRef.current = history.length
|
||
|
||
// ── Welcome phase ──
|
||
if (phase === "welcome") {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center h-full px-4">
|
||
<div className="w-full max-w-2xl space-y-6">
|
||
<AgentSelector
|
||
defaultAgentType={selectedAgent}
|
||
onSelect={handleAgentSelect}
|
||
onAgentsLoaded={(agents) => {
|
||
setAgentsLoaded(true)
|
||
setUsableAgentCount(
|
||
agents.filter((agent) => agent.enabled && agent.available)
|
||
.length
|
||
)
|
||
}}
|
||
onOpenAgentsSettings={handleOpenAgentsSettings}
|
||
disabled={isConnecting}
|
||
/>
|
||
|
||
{autoConnectError || agentConnectError ? (
|
||
<button
|
||
type="button"
|
||
onClick={handleOpenAgentsSettings}
|
||
className="w-full cursor-pointer rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-center text-xs text-destructive transition-colors hover:bg-destructive/10"
|
||
>
|
||
{(() => {
|
||
const inlineMessage = buildAutoConnectErrorMessage(
|
||
autoConnectError ?? agentConnectError ?? ""
|
||
)
|
||
return (
|
||
<div
|
||
className="overflow-hidden text-ellipsis whitespace-nowrap text-center"
|
||
title={inlineMessage}
|
||
>
|
||
{inlineMessage}
|
||
</div>
|
||
)
|
||
})()}
|
||
</button>
|
||
) : null}
|
||
|
||
<MessageInput
|
||
key={newConversationDraftStorageKey}
|
||
onSend={handleWelcomeSend}
|
||
promptCapabilities={conn.promptCapabilities}
|
||
defaultPath={workingDir}
|
||
placeholder={
|
||
agentsLoaded && usableAgentCount === 0
|
||
? t("enableAgentFirstPlaceholder")
|
||
: t("askAnythingPlaceholder")
|
||
}
|
||
autoFocus
|
||
attachmentTabId={tabId ?? null}
|
||
modes={connectionModes}
|
||
configOptions={connectionConfigOptions}
|
||
modeLoading={modeLoading}
|
||
configOptionsLoading={configOptionsLoading}
|
||
selectedModeId={selectedModeId}
|
||
onModeChange={setModeId}
|
||
onConfigOptionChange={handleSetConfigOption}
|
||
availableCommands={connectionCommands}
|
||
disabled={!canAutoConnect || isConnecting}
|
||
className="min-h-28 max-h-60"
|
||
draftStorageKey={newConversationDraftStorageKey}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Conversation phase ──
|
||
|
||
const showLive = Boolean(
|
||
conn.liveMessage &&
|
||
(connStatus === "prompting" ||
|
||
(conn.liveMessage.content.length > 0 && showLiveTransitionRef.current))
|
||
)
|
||
|
||
return (
|
||
<ConversationShell
|
||
status={connStatus}
|
||
promptCapabilities={conn.promptCapabilities}
|
||
defaultPath={workingDir}
|
||
error={conn.error}
|
||
pendingPermission={conn.pendingPermission}
|
||
onFocus={handleFocus}
|
||
onSend={handleSendWithHistory}
|
||
onCancel={handleCancel}
|
||
onRespondPermission={handleRespondPermission}
|
||
modes={connectionModes}
|
||
configOptions={connectionConfigOptions}
|
||
modeLoading={modeLoading}
|
||
configOptionsLoading={configOptionsLoading}
|
||
selectedModeId={selectedModeId}
|
||
onModeChange={setModeId}
|
||
onConfigOptionChange={handleSetConfigOption}
|
||
availableCommands={connectionCommands}
|
||
attachmentTabId={tabId ?? null}
|
||
draftStorageKey={activeDraftStorageKey}
|
||
>
|
||
<div className="relative flex flex-col h-full">
|
||
<MessageThread className="flex-1 min-h-0">
|
||
<MessageThreadContent className="p-4 max-w-3xl mx-auto">
|
||
{history.map((msg) => (
|
||
<div key={msg.id}>
|
||
<Message from={msg.role === "tool" ? "assistant" : msg.role}>
|
||
<MessageContent>
|
||
<ContentPartsRenderer parts={msg.content} role={msg.role} />
|
||
</MessageContent>
|
||
{msg.role === "user" && msg.userImages?.length ? (
|
||
<UserImageAttachments
|
||
images={msg.userImages}
|
||
className="self-end"
|
||
/>
|
||
) : null}
|
||
{msg.role === "user" && msg.userResources?.length ? (
|
||
<UserResourceLinks
|
||
resources={msg.userResources}
|
||
className="self-end"
|
||
/>
|
||
) : null}
|
||
</Message>
|
||
{msg.role === "assistant" && (
|
||
<TurnStats
|
||
usage={msg.usage}
|
||
duration_ms={msg.duration_ms}
|
||
model={msg.model}
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
{showLive && <LiveMessageBlock message={conn.liveMessage!} />}
|
||
</MessageThreadContent>
|
||
</MessageThread>
|
||
{showLive && <LiveTurnStats message={conn.liveMessage!} />}
|
||
<AgentPlanOverlay
|
||
message={conn.liveMessage}
|
||
entries={historicalPlanEntries}
|
||
planKey={historicalPlanKey}
|
||
/>
|
||
</div>
|
||
</ConversationShell>
|
||
)
|
||
}
|