@nextclaw/ui 0.5.48 → 0.6.0

package/src/components/chat/ChatPage.tsx

@@ -1,59 +1,85 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { SessionEntryView } from '@/api/types';
-import { useConfig, useDeleteSession, useSessionHistory, useSessions } from '@/hooks/useConfig';
+import type { ComponentProps, Dispatch, MutableRefObject, SetStateAction } from 'react';
+import type { SessionEntryView, SessionEventView } from '@/api/types';
+import {
+  useChatCapabilities,
+  useConfig,
+  useConfigMeta,
+  useDeleteSession,
+  useSessionHistory,
+  useSessions
+} from '@/hooks/useConfig';
+import { useMarketplaceInstalled } from '@/hooks/useMarketplace';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
-import { Button } from '@/components/ui/button';
-import { PageHeader, PageLayout } from '@/components/layout/page-layout';
-import { ChatSessionsSidebar } from '@/components/chat/ChatSessionsSidebar';
+import type { ChatModelOption } from '@/components/chat/ChatInputBar';
+import { ChatSidebar } from '@/components/chat/ChatSidebar';
 import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
+import { CronConfig } from '@/components/config/CronConfig';
+import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
 import { useChatStreamController } from '@/components/chat/useChatStreamController';
-import { cn } from '@/lib/utils';
 import { buildFallbackEventsFromMessages } from '@/lib/chat-message';
+import { buildProviderModelCatalog, composeProviderModel } from '@/lib/provider-models';
 import { t } from '@/lib/i18n';
-import { Plus, RefreshCw } from 'lucide-react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
-const CHAT_SESSION_STORAGE_KEY = 'nextclaw.ui.chat.activeSession';
-const UNKNOWN_CHAT_CHANNEL_KEY = '__unknown_channel__';
+const SESSION_ROUTE_PREFIX = 'sid_';
 
-function readStoredSessionKey(): string | null {
-  if (typeof window === 'undefined') {
+function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
+  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
+  if (!match) {
     return null;
   }
-  try {
-    const value = window.localStorage.getItem(CHAT_SESSION_STORAGE_KEY);
-    return value && value.trim().length > 0 ? value : null;
-  } catch {
-    return null;
+  const value = match[1]?.trim();
+  return value ? value : null;
+}
+
+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}`;
+}
+
+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}`;
 }
 
-function writeStoredSessionKey(value: string | null): void {
-  if (typeof window === 'undefined') {
-    return;
+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 {
-    if (!value) {
-      window.localStorage.removeItem(CHAT_SESSION_STORAGE_KEY);
-      return;
-    }
-    window.localStorage.setItem(CHAT_SESSION_STORAGE_KEY, value);
+    const binary = atob(encoded + padding);
+    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
   } catch {
-    // ignore storage errors
+    return null;
   }
 }
 
-function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
-  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
-  if (!match) {
+function parseSessionKeyFromRoute(routeValue?: string): string | null {
+  if (!routeValue) {
     return null;
   }
-  const value = match[1]?.trim();
-  return value ? value : null;
+  const decodedToken = decodeSessionRouteId(routeValue);
+  if (decodedToken) {
+    return decodedToken;
+  }
+  try {
+    return decodeURIComponent(routeValue);
+  } catch {
+    return routeValue;
+  }
 }
 
-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}`;
+function buildSessionPath(sessionKey: string): string {
+  return `/chat/${encodeSessionRouteId(sessionKey)}`;
 }
 
 function sessionDisplayName(session: SessionEntryView): string {
@@ -64,73 +90,227 @@ function sessionDisplayName(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
-function resolveChannelFromSessionKey(key: string): string {
-  const separator = key.indexOf(':');
-  if (separator <= 0) {
-    return UNKNOWN_CHAT_CHANNEL_KEY;
-  }
-  const channel = key.slice(0, separator).trim();
-  return channel || UNKNOWN_CHAT_CHANNEL_KEY;
+type MainPanelView = 'chat' | 'cron' | 'skills';
+
+type ChatPageProps = {
+  view: MainPanelView;
+};
+
+type UseSessionSyncParams = {
+  view: MainPanelView;
+  routeSessionKey: string | null;
+  selectedSessionKey: string | null;
+  selectedAgentId: string;
+  setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
+  setSelectedAgentId: Dispatch<SetStateAction<string>>;
+  selectedSessionKeyRef: MutableRefObject<string | null>;
+  isUserScrollingRef: MutableRefObject<boolean>;
+  resetStreamState: () => void;
+};
+
+function useChatSessionSync(params: UseSessionSyncParams): void {
+  const {
+    view,
+    routeSessionKey,
+    selectedSessionKey,
+    selectedAgentId,
+    setSelectedSessionKey,
+    setSelectedAgentId,
+    selectedSessionKeyRef,
+    isUserScrollingRef,
+    resetStreamState
+  } = params;
+
+  useEffect(() => {
+    if (view !== 'chat') {
+      return;
+    }
+    if (routeSessionKey) {
+      if (selectedSessionKey !== routeSessionKey) {
+        setSelectedSessionKey(routeSessionKey);
+      }
+      return;
+    }
+    if (selectedSessionKey !== null) {
+      setSelectedSessionKey(null);
+      resetStreamState();
+    }
+  }, [resetStreamState, routeSessionKey, selectedSessionKey, setSelectedSessionKey, view]);
+
+  useEffect(() => {
+    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
+    if (!inferred) {
+      return;
+    }
+    if (selectedAgentId !== inferred) {
+      setSelectedAgentId(inferred);
+    }
+  }, [selectedAgentId, selectedSessionKey, setSelectedAgentId]);
+
+  useEffect(() => {
+    selectedSessionKeyRef.current = selectedSessionKey;
+    isUserScrollingRef.current = false;
+  }, [isUserScrollingRef, selectedSessionKey, selectedSessionKeyRef]);
 }
 
-function displayChannelName(channel: string): string {
-  if (channel === UNKNOWN_CHAT_CHANNEL_KEY) {
-    return t('sessionsUnknownChannel');
-  }
-  return channel;
+type UseThreadScrollParams = {
+  threadRef: MutableRefObject<HTMLDivElement | null>;
+  isUserScrollingRef: MutableRefObject<boolean>;
+  mergedEvents: SessionEventView[];
+  isSending: boolean;
+};
+
+function useChatThreadScroll(params: UseThreadScrollParams): { handleScroll: () => void } {
+  const { threadRef, isUserScrollingRef, mergedEvents, isSending } = params;
+
+  const isNearBottom = useCallback(() => {
+    const element = threadRef.current;
+    if (!element) {
+      return true;
+    }
+    const threshold = 50;
+    return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
+  }, [threadRef]);
+
+  const handleScroll = useCallback(() => {
+    if (isNearBottom()) {
+      isUserScrollingRef.current = false;
+    } else {
+      isUserScrollingRef.current = true;
+    }
+  }, [isNearBottom, isUserScrollingRef]);
+
+  useEffect(() => {
+    const element = threadRef.current;
+    if (!element || isUserScrollingRef.current) {
+      return;
+    }
+    element.scrollTop = element.scrollHeight;
+  }, [isSending, isUserScrollingRef, mergedEvents, threadRef]);
+
+  return { handleScroll };
+}
+
+type ChatPageLayoutProps = {
+  view: MainPanelView;
+  sidebarProps: ComponentProps<typeof ChatSidebar>;
+  conversationProps: ComponentProps<typeof ChatConversationPanel>;
+  confirmDialog: JSX.Element;
+};
+
+function ChatPageLayout({ view, sidebarProps, conversationProps, confirmDialog }: ChatPageLayoutProps) {
+  return (
+    <div className="h-full flex">
+      <ChatSidebar {...sidebarProps} />
+
+      {view === 'chat' ? (
+        <ChatConversationPanel {...conversationProps} />
+      ) : (
+        <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+          <div className="h-full overflow-auto custom-scrollbar">
+            <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+              {view === 'cron' ? <CronConfig /> : <MarketplacePage forcedType="skills" />}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {confirmDialog}
+    </div>
+  );
 }
 
-export function ChatPage() {
+export function ChatPage({ view }: ChatPageProps) {
   const [query, setQuery] = useState('');
-  const [selectedChannel, setSelectedChannel] = useState('all');
   const [draft, setDraft] = useState('');
-  const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(() => readStoredSessionKey());
+  const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(null);
   const [selectedAgentId, setSelectedAgentId] = useState('main');
+  const [selectedModel, setSelectedModel] = useState('');
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
 
   const { confirm, ConfirmDialog } = useConfirmDialog();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const isUserScrollingRef = useRef(false);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
+  const routeSessionKey = useMemo(
+    () => parseSessionKeyFromRoute(routeSessionIdParam),
+    [routeSessionIdParam]
+  );
 
   const configQuery = useConfig();
+  const configMetaQuery = useConfigMeta();
   const sessionsQuery = useSessions({ q: query.trim() || undefined, limit: 120, activeMinutes: 0 });
+  const installedSkillsQuery = useMarketplaceInstalled('skill');
+  const chatCapabilitiesQuery = useChatCapabilities({
+    sessionKey: selectedSessionKey,
+    agentId: selectedAgentId
+  });
   const historyQuery = useSessionHistory(selectedSessionKey, 300);
   const deleteSession = useDeleteSession();
 
-  const agentOptions = useMemo(() => {
-    const list = configQuery.data?.agents.list ?? [];
-    const unique = new Set<string>(['main']);
-    for (const item of list) {
-      if (typeof item.id === 'string' && item.id.trim().length > 0) {
-        unique.add(item.id.trim().toLowerCase());
+  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 Array.from(unique);
-  }, [configQuery.data?.agents.list]);
+    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 channelOptions = useMemo(() => {
-    const unique = new Set<string>();
-    for (const session of sessions) {
-      unique.add(resolveChannelFromSessionKey(session.key));
-    }
-    return Array.from(unique).sort((a, b) => {
-      if (a === UNKNOWN_CHAT_CHANNEL_KEY) return 1;
-      if (b === UNKNOWN_CHAT_CHANNEL_KEY) return -1;
-      return a.localeCompare(b);
-    });
-  }, [sessions]);
-  const filteredSessions = useMemo(() => {
-    if (selectedChannel === 'all') {
-      return sessions;
-    }
-    return sessions.filter((session) => resolveChannelFromSessionKey(session.key) === selectedChannel);
-  }, [selectedChannel, sessions]);
+  const skillRecords = useMemo(() => installedSkillsQuery.data?.records ?? [], [installedSkillsQuery.data?.records]);
+
   const selectedSession = useMemo(
     () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
     [selectedSessionKey, sessions]
   );
 
+  useEffect(() => {
+    if (modelOptions.length === 0) {
+      setSelectedModel('');
+      return;
+    }
+    setSelectedModel((prev) => {
+      if (modelOptions.some((option) => option.value === prev)) {
+        return prev;
+      }
+      const sessionPreferred = selectedSession?.preferredModel?.trim();
+      if (sessionPreferred && modelOptions.some((option) => option.value === sessionPreferred)) {
+        return sessionPreferred;
+      }
+      const fallback = configQuery.data?.agents.defaults.model?.trim();
+      if (fallback && modelOptions.some((option) => option.value === fallback)) {
+        return fallback;
+      }
+      return modelOptions[0]?.value ?? '';
+    });
+  }, [configQuery.data?.agents.defaults.model, modelOptions, selectedSession?.preferredModel]);
+
   const historyData = historyQuery.data;
   const historyMessages = historyData?.messages ?? [];
   const historyEvents =
@@ -150,7 +330,11 @@ export function ChatPage() {
     isSending,
     isAwaitingAssistantOutput,
     queuedCount,
+    canStopCurrentRun,
+    stopDisabledReason,
+    lastSendError,
     sendMessage,
+    stopCurrentRun,
     resetStreamState
   } = useChatStreamController({
     nextOptimisticUserSeq,
@@ -186,59 +370,32 @@ export function ChatPage() {
     return next;
   }, [historyEvents, optimisticUserEvent, streamingAssistantText, streamingAssistantTimestamp, streamingSessionEvents]);
 
-  useEffect(() => {
-    if (!selectedSessionKey && filteredSessions.length > 0) {
-      setSelectedSessionKey(filteredSessions[0].key);
-    }
-  }, [filteredSessions, selectedSessionKey]);
-
-  useEffect(() => {
-    writeStoredSessionKey(selectedSessionKey);
-  }, [selectedSessionKey]);
-
-  useEffect(() => {
-    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
-    if (!inferred) {
-      return;
-    }
-    if (selectedAgentId !== inferred) {
-      setSelectedAgentId(inferred);
-    }
-  }, [selectedAgentId, selectedSessionKey]);
-
-  useEffect(() => {
-    selectedSessionKeyRef.current = selectedSessionKey;
-    isUserScrollingRef.current = false;
-  }, [selectedSessionKey]);
-
-  const isNearBottom = useCallback(() => {
-    const element = threadRef.current;
-    if (!element) return true;
-    const threshold = 50;
-    return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
-  }, []);
-
-  const handleScroll = useCallback(() => {
-    if (isNearBottom()) {
-      isUserScrollingRef.current = false;
-    } else {
-      isUserScrollingRef.current = true;
-    }
-  }, [isNearBottom]);
+  useChatSessionSync({
+    view,
+    routeSessionKey,
+    selectedSessionKey,
+    selectedAgentId,
+    setSelectedSessionKey,
+    setSelectedAgentId,
+    selectedSessionKeyRef,
+    isUserScrollingRef,
+    resetStreamState
+  });
 
-  useEffect(() => {
-    const element = threadRef.current;
-    if (!element || isUserScrollingRef.current) {
-      return;
-    }
-    element.scrollTop = element.scrollHeight;
-  }, [mergedEvents, isSending]);
+  const { handleScroll } = useChatThreadScroll({
+    threadRef,
+    isUserScrollingRef,
+    mergedEvents,
+    isSending
+  });
 
   const createNewSession = useCallback(() => {
     resetStreamState();
-    const next = buildNewSessionKey(selectedAgentId);
-    setSelectedSessionKey(next);
-  }, [resetStreamState, selectedAgentId]);
+    setSelectedSessionKey(null);
+    if (location.pathname !== '/chat') {
+      navigate('/chat');
+    }
+  }, [location.pathname, navigate, resetStreamState]);
 
   const handleDeleteSession = useCallback(async () => {
     if (!selectedSessionKey) {
@@ -258,94 +415,108 @@ export function ChatPage() {
         onSuccess: async () => {
           resetStreamState();
           setSelectedSessionKey(null);
+          navigate('/chat', { replace: true });
           await sessionsQuery.refetch();
         }
       }
     );
-  }, [confirm, deleteSession, resetStreamState, selectedSessionKey, sessionsQuery]);
+  }, [confirm, deleteSession, navigate, resetStreamState, selectedSessionKey, sessionsQuery]);
 
   const handleSend = useCallback(async () => {
     const message = draft.trim();
     if (!message) {
       return;
     }
+    const requestedSkills = selectedSkills;
 
     const sessionKey = selectedSessionKey ?? buildNewSessionKey(selectedAgentId);
     if (!selectedSessionKey) {
-      setSelectedSessionKey(sessionKey);
+      navigate(buildSessionPath(sessionKey), { replace: true });
     }
     setDraft('');
+    setSelectedSkills([]);
     await sendMessage({
       message,
       sessionKey,
       agentId: selectedAgentId,
+      model: selectedModel || undefined,
+      stopSupported: chatCapabilitiesQuery.data?.stopSupported ?? false,
+      stopReason: chatCapabilitiesQuery.data?.stopReason,
+      requestedSkills,
       restoreDraftOnError: true
     });
-  }, [draft, selectedSessionKey, selectedAgentId, sendMessage]);
+  }, [
+    chatCapabilitiesQuery.data?.stopReason,
+    chatCapabilitiesQuery.data?.stopSupported,
+    draft,
+    selectedAgentId,
+    selectedModel,
+    navigate,
+    selectedSessionKey,
+    selectedSkills,
+    sendMessage
+  ]);
+
+  const currentSessionDisplayName = selectedSession ? sessionDisplayName(selectedSession) : undefined;
+  const handleSelectSession = useCallback((nextSessionKey: string) => {
+    const target = buildSessionPath(nextSessionKey);
+    if (location.pathname !== target) {
+      navigate(target);
+    }
+  }, [location.pathname, navigate]);
+
+  const sidebarProps: ComponentProps<typeof ChatSidebar> = {
+    sessions,
+    selectedSessionKey,
+    onSelectSession: handleSelectSession,
+    onCreateSession: createNewSession,
+    sessionTitle: sessionDisplayName,
+    isLoading: sessionsQuery.isLoading,
+    query,
+    onQueryChange: setQuery
+  };
+
+  const conversationProps: ComponentProps<typeof ChatConversationPanel> = {
+    modelOptions,
+    selectedModel,
+    onSelectedModelChange: setSelectedModel,
+    skillRecords,
+    isSkillsLoading: installedSkillsQuery.isLoading,
+    selectedSkills,
+    onSelectedSkillsChange: setSelectedSkills,
+    selectedSessionKey,
+    sessionDisplayName: currentSessionDisplayName,
+    canDeleteSession: Boolean(selectedSession),
+    isDeletePending: deleteSession.isPending,
+    onDeleteSession: () => {
+      void handleDeleteSession();
+    },
+    onCreateSession: createNewSession,
+    threadRef,
+    onThreadScroll: handleScroll,
+    isHistoryLoading: historyQuery.isLoading,
+    mergedEvents,
+    isSending,
+    isAwaitingAssistantOutput,
+    streamingAssistantText,
+    draft,
+    onDraftChange: setDraft,
+    onSend: handleSend,
+    onStop: () => {
+      void stopCurrentRun();
+    },
+    canStopGeneration: canStopCurrentRun,
+    stopDisabledReason,
+    sendError: lastSendError,
+    queuedCount
+  };
 
   return (
-    <PageLayout fullHeight>
-      <PageHeader
-        title={t('chatPageTitle')}
-        description={t('chatPageDescription')}
-        actions={
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => historyQuery.refetch()} className="rounded-lg">
-              <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', historyQuery.isFetching && 'animate-spin')} />
-              {t('chatRefresh')}
-            </Button>
-            <Button variant="primary" size="sm" onClick={createNewSession} className="rounded-lg">
-              <Plus className="h-3.5 w-3.5 mr-1.5" />
-              {t('chatNewSession')}
-            </Button>
-          </div>
-        }
-      />
-
-      <div className="flex-1 min-h-0 flex gap-4 max-lg:flex-col">
-        <ChatSessionsSidebar
-          query={query}
-          onQueryChange={setQuery}
-          selectedChannel={selectedChannel}
-          onSelectedChannelChange={setSelectedChannel}
-          channelOptions={channelOptions}
-          channelLabel={displayChannelName}
-          isLoading={sessionsQuery.isLoading}
-          isRefreshing={sessionsQuery.isFetching}
-          sessions={filteredSessions}
-          selectedSessionKey={selectedSessionKey}
-          onSelectSession={setSelectedSessionKey}
-          sessionTitle={sessionDisplayName}
-          onRefresh={() => {
-            void sessionsQuery.refetch();
-          }}
-          onCreateSession={createNewSession}
-        />
-
-        <ChatConversationPanel
-          agentOptions={agentOptions}
-          selectedAgentId={selectedAgentId}
-          onSelectedAgentIdChange={setSelectedAgentId}
-          selectedSessionKey={selectedSessionKey}
-          canDeleteSession={Boolean(selectedSession)}
-          isDeletePending={deleteSession.isPending}
-          onDeleteSession={() => {
-            void handleDeleteSession();
-          }}
-          threadRef={threadRef}
-          onThreadScroll={handleScroll}
-          isHistoryLoading={historyQuery.isLoading}
-          mergedEvents={mergedEvents}
-          isSending={isSending}
-          isAwaitingAssistantOutput={isAwaitingAssistantOutput}
-          streamingAssistantText={streamingAssistantText}
-          draft={draft}
-          onDraftChange={setDraft}
-          onSend={handleSend}
-          queuedCount={queuedCount}
-        />
-      </div>
-      <ConfirmDialog />
-    </PageLayout>
+    <ChatPageLayout
+      view={view}
+      sidebarProps={sidebarProps}
+      conversationProps={conversationProps}
+      confirmDialog={<ConfirmDialog />}
+    />
   );
 }