@nextclaw/ui 0.6.10 → 0.6.11

package/src/components/chat/chat-page-data.ts

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
+import { useChatSessionTypeState } from '@/components/chat/useChatSessionTypeState';
+import { useSyncSelectedModel } from '@/components/chat/chat-page-runtime';
+import {
+  useChatCapabilities,
+  useChatSessionTypes,
+  useConfig,
+  useConfigMeta,
+  useSessionHistory,
+  useSessions,
+} from '@/hooks/useConfig';
+import { useMarketplaceInstalled } from '@/hooks/useMarketplace';
+import { buildProviderModelCatalog, composeProviderModel } from '@/lib/provider-models';
+
+type UseChatPageDataParams = {
+  query: string;
+  selectedSessionKey: string | null;
+  selectedAgentId: string;
+  pendingSessionType: string;
+  setPendingSessionType: Dispatch<SetStateAction<string>>;
+  setSelectedModel: Dispatch<SetStateAction<string>>;
+};
+
+export function useChatPageData(params: UseChatPageDataParams) {
+  const configQuery = useConfig();
+  const configMetaQuery = useConfigMeta();
+  const sessionsQuery = useSessions({ q: params.query.trim() || undefined, limit: 120, activeMinutes: 0 });
+  const installedSkillsQuery = useMarketplaceInstalled('skill');
+  const chatCapabilitiesQuery = useChatCapabilities({
+    sessionKey: params.selectedSessionKey,
+    agentId: params.selectedAgentId
+  });
+  const historyQuery = useSessionHistory(params.selectedSessionKey, 300);
+  const sessionTypesQuery = useChatSessionTypes();
+  const isProviderStateResolved =
+    (configQuery.isFetched || configQuery.isSuccess) &&
+    (configMetaQuery.isFetched || configMetaQuery.isSuccess);
+
+  const modelOptions = useMemo<ChatModelOption[]>(() => {
+    const providers = buildProviderModelCatalog({
+      meta: configMetaQuery.data,
+      config: configQuery.data,
+      onlyConfigured: true
+    });
+    const seen = new Set<string>();
+    const options: ChatModelOption[] = [];
+    for (const provider of providers) {
+      for (const localModel of provider.models) {
+        const value = composeProviderModel(provider.prefix, localModel);
+        if (!value || seen.has(value)) {
+          continue;
+        }
+        seen.add(value);
+        options.push({
+          value,
+          modelLabel: localModel,
+          providerLabel: provider.displayName
+        });
+      }
+    }
+    return options.sort((left, right) => {
+      const providerCompare = left.providerLabel.localeCompare(right.providerLabel);
+      if (providerCompare !== 0) {
+        return providerCompare;
+      }
+      return left.modelLabel.localeCompare(right.modelLabel);
+    });
+  }, [configMetaQuery.data, configQuery.data]);
+
+  const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
+  const skillRecords = useMemo(() => installedSkillsQuery.data?.records ?? [], [installedSkillsQuery.data?.records]);
+  const selectedSession = useMemo(
+    () => sessions.find((session) => session.key === params.selectedSessionKey) ?? null,
+    [params.selectedSessionKey, sessions]
+  );
+
+  const sessionTypeState = useChatSessionTypeState({
+    selectedSession,
+    selectedSessionKey: params.selectedSessionKey,
+    pendingSessionType: params.pendingSessionType,
+    setPendingSessionType: params.setPendingSessionType,
+    sessionTypesData: sessionTypesQuery.data
+  });
+
+  useSyncSelectedModel({
+    modelOptions,
+    selectedSessionPreferredModel: selectedSession?.preferredModel,
+    defaultModel: configQuery.data?.agents.defaults.model,
+    setSelectedModel: params.setSelectedModel
+  });
+
+  const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
+
+  return {
+    configQuery,
+    configMetaQuery,
+    sessionsQuery,
+    installedSkillsQuery,
+    chatCapabilitiesQuery,
+    historyQuery,
+    sessionTypesQuery,
+    isProviderStateResolved,
+    modelOptions,
+    sessions,
+    skillRecords,
+    selectedSession,
+    historyMessages,
+    ...sessionTypeState
+  };
+}
+
+export function sessionDisplayName(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(':');
+  return chunks[chunks.length - 1] || session.key;
+}

package/src/components/chat/chat-page-runtime.ts

@@ -0,0 +1,221 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { ChatRunView } from '@/api/types';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
+import { useChatRuns } from '@/hooks/useConfig';
+import { buildActiveRunBySessionKey, buildSessionRunStatusByKey } from '@/lib/session-run-status';
+
+export type ChatMainPanelView = 'chat' | 'cron' | 'skills';
+
+export function useSyncSelectedModel(params: {
+  modelOptions: ChatModelOption[];
+  selectedSessionPreferredModel?: string;
+  defaultModel?: string;
+  setSelectedModel: Dispatch<SetStateAction<string>>;
+}) {
+  const { modelOptions, selectedSessionPreferredModel, defaultModel, setSelectedModel } = params;
+  useEffect(() => {
+    if (modelOptions.length === 0) {
+      setSelectedModel('');
+      return;
+    }
+    setSelectedModel((prev) => {
+      if (modelOptions.some((option) => option.value === prev)) {
+        return prev;
+      }
+      const sessionPreferred = selectedSessionPreferredModel?.trim();
+      if (sessionPreferred && modelOptions.some((option) => option.value === sessionPreferred)) {
+        return sessionPreferred;
+      }
+      const fallback = defaultModel?.trim();
+      if (fallback && modelOptions.some((option) => option.value === fallback)) {
+        return fallback;
+      }
+      return modelOptions[0]?.value ?? '';
+    });
+  }, [defaultModel, modelOptions, selectedSessionPreferredModel, setSelectedModel]);
+}
+
+export function useSessionRunStatus(params: {
+  view: ChatMainPanelView;
+  selectedSessionKey: string | null;
+  activeBackendRunId: string | null;
+  isLocallyRunning: boolean;
+  resumeRun: (run: ChatRunView) => Promise<void>;
+}) {
+  const { view, selectedSessionKey, activeBackendRunId, isLocallyRunning, resumeRun } = params;
+  const [suppressedSessionState, setSuppressedSessionState] = useState<{
+    sessionKey: string;
+    runId?: string;
+  } | null>(null);
+  const wasLocallyRunningRef = useRef(false);
+  const resumedRunBySessionRef = useRef(new Map<string, string>());
+  const completedRunBySessionRef = useRef(new Map<string, string>());
+  const locallySettledAtBySessionRef = useRef(new Map<string, number>());
+  const latestBackendRunIdRef = useRef<string | null>(activeBackendRunId);
+  const autoResumeEligibleSessionsRef = useRef(new Set<string>());
+
+  useEffect(() => {
+    if (!selectedSessionKey) {
+      return;
+    }
+    autoResumeEligibleSessionsRef.current.add(selectedSessionKey);
+  }, [selectedSessionKey]);
+
+  useEffect(() => {
+    if (!selectedSessionKey) {
+      return;
+    }
+    if (isLocallyRunning) {
+      autoResumeEligibleSessionsRef.current.delete(selectedSessionKey);
+    }
+  }, [isLocallyRunning, selectedSessionKey]);
+
+  const sessionStatusRunsQuery = useChatRuns(
+    view === 'chat'
+      ? {
+          states: ['queued', 'running'],
+          limit: 200,
+          syncActiveStates: true,
+          isLocallyRunning
+        }
+      : undefined
+  );
+  const activeRunBySessionKey = useMemo(
+    () => buildActiveRunBySessionKey(sessionStatusRunsQuery.data?.runs ?? []),
+    [sessionStatusRunsQuery.data?.runs]
+  );
+  const sessionRunStatusByKey = useMemo(() => {
+    const next = buildSessionRunStatusByKey(activeRunBySessionKey);
+    if (suppressedSessionState) {
+      const activeRun = activeRunBySessionKey.get(suppressedSessionState.sessionKey) ?? null;
+      if (activeRun && (!suppressedSessionState.runId || activeRun.runId === suppressedSessionState.runId)) {
+        next.delete(suppressedSessionState.sessionKey);
+      }
+    }
+    return next;
+  }, [activeRunBySessionKey, suppressedSessionState]);
+  const activeRun = useMemo(() => {
+    if (!selectedSessionKey) {
+      return null;
+    }
+    const run = activeRunBySessionKey.get(selectedSessionKey) ?? null;
+    const shouldSuppress = (() => {
+      if (!run || !suppressedSessionState) {
+        return false;
+      }
+      if (suppressedSessionState.sessionKey !== selectedSessionKey) {
+        return false;
+      }
+      return !suppressedSessionState.runId || run.runId === suppressedSessionState.runId;
+    })();
+    if (shouldSuppress) {
+      return null;
+    }
+    return run;
+  }, [activeRunBySessionKey, selectedSessionKey, suppressedSessionState]);
+
+  useEffect(() => {
+    if (!activeBackendRunId) {
+      return;
+    }
+    latestBackendRunIdRef.current = activeBackendRunId;
+  }, [activeBackendRunId]);
+
+  useEffect(() => {
+    if (view !== 'chat' || !selectedSessionKey || !activeRun) {
+      return;
+    }
+    if (!autoResumeEligibleSessionsRef.current.has(selectedSessionKey)) {
+      return;
+    }
+    if (isLocallyRunning) {
+      return;
+    }
+    if (activeBackendRunId === activeRun.runId) {
+      return;
+    }
+    const resumedRunId = resumedRunBySessionRef.current.get(selectedSessionKey);
+    if (resumedRunId === activeRun.runId) {
+      return;
+    }
+    const completedRunId = completedRunBySessionRef.current.get(selectedSessionKey);
+    if (completedRunId && completedRunId === activeRun.runId) {
+      return;
+    }
+    const locallySettledAt = locallySettledAtBySessionRef.current.get(selectedSessionKey);
+    if (typeof locallySettledAt === 'number') {
+      const requestedAt = Date.parse(activeRun.requestedAt ?? '');
+      if (Number.isFinite(requestedAt)) {
+        if (requestedAt <= locallySettledAt + 2_000) {
+          return;
+        }
+      } else if (Date.now() - locallySettledAt <= 8_000) {
+        return;
+      }
+    }
+    resumedRunBySessionRef.current.set(selectedSessionKey, activeRun.runId);
+    autoResumeEligibleSessionsRef.current.delete(selectedSessionKey);
+    void resumeRun(activeRun);
+  }, [activeBackendRunId, activeRun, isLocallyRunning, resumeRun, selectedSessionKey, view]);
+
+  useEffect(() => {
+    if (!selectedSessionKey) {
+      resumedRunBySessionRef.current.clear();
+      completedRunBySessionRef.current.clear();
+      locallySettledAtBySessionRef.current.clear();
+      autoResumeEligibleSessionsRef.current.clear();
+      return;
+    }
+    if (!activeRunBySessionKey.has(selectedSessionKey)) {
+      resumedRunBySessionRef.current.delete(selectedSessionKey);
+      completedRunBySessionRef.current.delete(selectedSessionKey);
+      locallySettledAtBySessionRef.current.delete(selectedSessionKey);
+    }
+  }, [activeRunBySessionKey, selectedSessionKey]);
+
+  useEffect(() => {
+    const wasRunning = wasLocallyRunningRef.current;
+    wasLocallyRunningRef.current = isLocallyRunning;
+    if (isLocallyRunning) {
+      return;
+    }
+    if (wasRunning && selectedSessionKey) {
+      const completedRunId = latestBackendRunIdRef.current?.trim() || activeRunBySessionKey.get(selectedSessionKey)?.runId?.trim();
+      if (completedRunId) {
+        completedRunBySessionRef.current.set(selectedSessionKey, completedRunId);
+      }
+      locallySettledAtBySessionRef.current.set(selectedSessionKey, Date.now());
+      setSuppressedSessionState({
+        sessionKey: selectedSessionKey,
+        ...(completedRunId ? { runId: completedRunId } : {})
+      });
+      void sessionStatusRunsQuery.refetch();
+    }
+  }, [activeRunBySessionKey, isLocallyRunning, selectedSessionKey, sessionStatusRunsQuery]);
+
+  useEffect(() => {
+    if (!suppressedSessionState) {
+      return;
+    }
+    const activeRun = activeRunBySessionKey.get(suppressedSessionState.sessionKey) ?? null;
+    if (!activeRun) {
+      setSuppressedSessionState(null);
+      return;
+    }
+    if (suppressedSessionState.runId && activeRun.runId !== suppressedSessionState.runId) {
+      setSuppressedSessionState(null);
+    }
+  }, [activeRunBySessionKey, suppressedSessionState]);
+
+  useEffect(() => {
+    if (!isLocallyRunning) {
+      return;
+    }
+    if (suppressedSessionState?.sessionKey === selectedSessionKey) {
+      setSuppressedSessionState(null);
+    }
+  }, [isLocallyRunning, selectedSessionKey, suppressedSessionState]);
+
+  return { sessionRunStatusByKey };
+}

package/src/components/chat/chat-session-route.ts

@@ -0,0 +1,59 @@
+const SESSION_ROUTE_PREFIX = 'sid_';
+
+export function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
+  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
+  if (!match) {
+    return null;
+  }
+  const value = match[1]?.trim();
+  return value ? value : null;
+}
+
+export function buildNewSessionKey(agentId: string): string {
+  const slug = Math.random().toString(36).slice(2, 8);
+  return `agent:${agentId}:ui:direct:web-${Date.now().toString(36)}${slug}`;
+}
+
+export function encodeSessionRouteId(sessionKey: string): string {
+  const bytes = new TextEncoder().encode(sessionKey);
+  let binary = '';
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  const base64 = btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+  return `${SESSION_ROUTE_PREFIX}${base64}`;
+}
+
+export function decodeSessionRouteId(routeValue: string): string | null {
+  if (!routeValue.startsWith(SESSION_ROUTE_PREFIX)) {
+    return null;
+  }
+  const encoded = routeValue.slice(SESSION_ROUTE_PREFIX.length).replace(/-/g, '+').replace(/_/g, '/');
+  const padding = encoded.length % 4 === 0 ? '' : '='.repeat(4 - (encoded.length % 4));
+  try {
+    const binary = atob(encoded + padding);
+    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+  } catch {
+    return null;
+  }
+}
+
+export function parseSessionKeyFromRoute(routeValue?: string): string | null {
+  if (!routeValue) {
+    return null;
+  }
+  const decodedToken = decodeSessionRouteId(routeValue);
+  if (decodedToken) {
+    return decodedToken;
+  }
+  try {
+    return decodeURIComponent(routeValue);
+  } catch {
+    return routeValue;
+  }
+}
+
+export function buildSessionPath(sessionKey: string): string {
+  return `/chat/${encodeSessionRouteId(sessionKey)}`;
+}

package/src/components/chat/chat-stream/nextbot-parsers.ts

@@ -0,0 +1,52 @@
+import type { RunMetadataParsers } from '@nextclaw/agent-chat';
+import type { ChatRunView } from '@/api/types';
+import type { NextbotAgentRunMetadata, SendMessageParams } from '@/components/chat/chat-stream/types';
+
+export const nextbotParsers: RunMetadataParsers = {
+  parseReady: (metadata) => {
+    if (metadata.driver !== 'nextbot-stream' || metadata.kind !== 'ready') {
+      return null;
+    }
+    return {
+      remoteRunId: typeof metadata.backendRunId === 'string' ? metadata.backendRunId : undefined,
+      sessionId: typeof metadata.sessionKey === 'string' ? metadata.sessionKey : undefined,
+      stopCapable: typeof metadata.stopSupported === 'boolean' ? metadata.stopSupported : undefined,
+      stopReason: typeof metadata.stopReason === 'string' ? metadata.stopReason : undefined
+    };
+  },
+  parseFinal: (metadata) => {
+    if (metadata.driver !== 'nextbot-stream' || metadata.kind !== 'final') {
+      return null;
+    }
+    return {
+      sessionId: typeof metadata.sessionKey === 'string' ? metadata.sessionKey : undefined,
+      hasOutput: Boolean(metadata.hasAssistantSessionEvent)
+    };
+  }
+};
+
+export function buildSendMetadata(payload: SendMessageParams, requestedSkills: string[]): NextbotAgentRunMetadata {
+  return {
+    driver: 'nextbot-stream',
+    mode: 'send',
+    payload,
+    requestedSkills
+  };
+}
+
+export function buildResumeMetadata(run: ChatRunView): NextbotAgentRunMetadata {
+  const fromEventIndex =
+    Number.isFinite(run.eventCount) && run.eventCount > 0
+      ? Math.max(0, Math.trunc(run.eventCount))
+      : undefined;
+  return {
+    driver: 'nextbot-stream',
+    mode: 'resume',
+    runId: run.runId!,
+    ...(typeof fromEventIndex === 'number' ? { fromEventIndex } : {}),
+    sessionKey: run.sessionKey,
+    ...(run.agentId ? { agentId: run.agentId } : {}),
+    stopSupported: run.stopSupported,
+    ...(run.stopReason ? { stopReason: run.stopReason } : {})
+  };
+}