@nextclaw/ui 0.6.9 → 0.6.11

package/src/api/types.ts

@@ -77,6 +77,7 @@ export type ProviderConnectionTestResult = {
 export type ProviderAuthStartResult = {
   provider: string;
   kind: "device_code";
+  methodId?: string;
   sessionId: string;
   verificationUri: string;
   userCode: string;
@@ -85,6 +86,10 @@ export type ProviderAuthStartResult = {
   note?: string;
 };
 
+export type ProviderAuthStartRequest = {
+  methodId?: string;
+};
+
 export type ProviderAuthPollRequest = {
   sessionId: string;
 };
@@ -141,6 +146,8 @@ export type SessionEntryView = {
   updatedAt: string;
   label?: string;
   preferredModel?: string;
+  sessionType: string;
+  sessionTypeMutable: boolean;
   messageCount: number;
   lastRole?: string;
   lastTimestamp?: string;
@@ -172,6 +179,8 @@ export type SessionHistoryView = {
   key: string;
   totalMessages: number;
   totalEvents: number;
+  sessionType: string;
+  sessionTypeMutable: boolean;
   metadata: Record<string, unknown>;
   messages: SessionMessageView[];
   events: SessionEventView[];
@@ -180,6 +189,7 @@ export type SessionHistoryView = {
 export type SessionPatchUpdate = {
   label?: string | null;
   preferredModel?: string | null;
+  sessionType?: string | null;
   clearHistory?: boolean;
 };
 
@@ -203,11 +213,42 @@ export type ChatTurnView = {
   durationMs: number;
 };
 
+export type ChatTurnStreamReadyEvent = {
+  sessionKey: string;
+  requestedAt?: string;
+  runId?: string;
+  stopSupported?: boolean;
+  stopReason?: string;
+};
+
+export type ChatTurnStreamDeltaEvent = {
+  delta: string;
+};
+
+export type ChatTurnStreamSessionEvent = {
+  data: SessionEventView;
+};
+
+export type ChatTurnStreamErrorEvent = {
+  code?: string;
+  message?: string;
+};
+
 export type ChatCapabilitiesView = {
   stopSupported: boolean;
   stopReason?: string;
 };
 
+export type ChatSessionTypeOptionView = {
+  value: string;
+  label: string;
+};
+
+export type ChatSessionTypesView = {
+  defaultType: string;
+  options: ChatSessionTypeOptionView[];
+};
+
 export type ChatCommandOptionView = {
   name: string;
   description: string;
@@ -262,30 +303,6 @@ export type ChatRunListView = {
   total: number;
 };
 
-export type ChatTurnStreamReadyEvent = {
-  event: "ready";
-  sessionKey: string;
-  requestedAt: string;
-  runId?: string;
-  stopSupported?: boolean;
-  stopReason?: string;
-};
-
-export type ChatTurnStreamDeltaEvent = {
-  event: "delta";
-  delta: string;
-};
-
-export type ChatTurnStreamSessionEvent = {
-  event: "session_event";
-  data: SessionEventView;
-};
-
-export type ChatTurnStreamFinalEvent = {
-  event: "final";
-  data: ChatTurnView;
-};
-
 export type CronScheduleView =
   | { kind: "at"; atMs?: number | null }
   | { kind: "every"; everyMs?: number | null }
@@ -458,6 +475,18 @@ export type ProviderSpecView = {
       en?: string;
       zh?: string;
     };
+    methods?: Array<{
+      id: string;
+      label?: {
+        en?: string;
+        zh?: string;
+      };
+      hint?: {
+        en?: string;
+        zh?: string;
+      };
+    }>;
+    defaultMethodId?: string;
     supportsCliImport?: boolean;
   };
   defaultModels?: string[];
@@ -559,6 +588,7 @@ export type ConfigActionExecuteResult = {
 export type WsEvent =
   | { type: 'config.updated'; payload: { path: string } }
   | { type: 'run.updated'; payload: { run: ChatRunView } }
+  | { type: 'session.updated'; payload: { sessionKey: string } }
   | { type: 'config.reload.started'; payload?: Record<string, unknown> }
   | { type: 'config.reload.finished'; payload?: Record<string, unknown> }
   | { type: 'error'; payload: { message: string; code?: string } }

package/src/components/chat/ChatConversationPanel.tsx

@@ -1,44 +1,15 @@
-import type { MutableRefObject } from 'react';
-import type { MarketplaceInstalledRecord, SessionEventView } from '@/api/types';
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { ChatThread } from '@/components/chat/ChatThread';
-import { ChatInputBar, type ChatModelOption } from '@/components/chat/ChatInputBar';
 import { ChatWelcome } from '@/components/chat/ChatWelcome';
+import { ChatInputBarView } from '@/components/chat/chat-input/ChatInputBarView';
+import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
 import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
 import { Trash2 } from 'lucide-react';
 
-type ChatConversationPanelProps = {
-  isProviderStateResolved: boolean;
-  modelOptions: ChatModelOption[];
-  selectedModel: string;
-  onSelectedModelChange: (value: string) => void;
-  onGoToProviders: () => void;
-  skillRecords: MarketplaceInstalledRecord[];
-  isSkillsLoading?: boolean;
-  selectedSkills: string[];
-  onSelectedSkillsChange: (next: string[]) => void;
-  selectedSessionKey: string | null;
-  sessionDisplayName?: string;
-  canDeleteSession: boolean;
-  isDeletePending: boolean;
-  onDeleteSession: () => void;
-  onCreateSession: () => void;
-  threadRef: MutableRefObject<HTMLDivElement | null>;
-  onThreadScroll: () => void;
-  isHistoryLoading: boolean;
-  mergedEvents: SessionEventView[];
-  isSending: boolean;
-  isAwaitingAssistantOutput: boolean;
-  streamingAssistantText: string;
-  draft: string;
-  onDraftChange: (value: string) => void;
-  onSend: () => Promise<void> | void;
-  onStop: () => Promise<void> | void;
-  canStopGeneration: boolean;
-  stopDisabledReason?: string | null;
-  sendError?: string | null;
-  queuedCount: number;
-};
+const STICKY_BOTTOM_THRESHOLD_PX = 10;
 
 function ChatConversationSkeleton() {
   return (
@@ -68,80 +39,101 @@ function ChatConversationSkeleton() {
   );
 }
 
-export function ChatConversationPanel({
-  isProviderStateResolved,
-  modelOptions,
-  selectedModel,
-  onSelectedModelChange,
-  onGoToProviders,
-  skillRecords,
-  isSkillsLoading = false,
-  selectedSkills,
-  onSelectedSkillsChange,
-  selectedSessionKey,
-  sessionDisplayName,
-  canDeleteSession,
-  isDeletePending,
-  onDeleteSession,
-  onCreateSession,
-  threadRef,
-  onThreadScroll,
-  isHistoryLoading,
-  mergedEvents,
-  isSending,
-  isAwaitingAssistantOutput,
-  streamingAssistantText,
-  draft,
-  onDraftChange,
-  onSend,
-  onStop,
-  canStopGeneration,
-  stopDisabledReason,
-  sendError,
-  queuedCount,
-}: ChatConversationPanelProps) {
-  const showWelcome = !selectedSessionKey && mergedEvents.length === 0;
-  const hasConfiguredModel = modelOptions.length > 0;
-  const shouldShowProviderHint = isProviderStateResolved && !hasConfiguredModel;
+export function ChatConversationPanel() {
+  const presenter = usePresenter();
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
+  const threadRef = snapshot.threadRef ?? fallbackThreadRef;
+
+  // --- Sticky-to-bottom scroll state ---
+  const isStickyRef = useRef(true);
+  const isProgrammaticScrollRef = useRef(false);
+  const previousSessionKeyRef = useRef<string | null>(null);
+  const pendingInitialScrollRef = useRef(false);
+
+  const showWelcome = !snapshot.selectedSessionKey && snapshot.uiMessages.length === 0 && !snapshot.isSending;
+  const hasConfiguredModel = snapshot.modelOptions.length > 0;
+  const shouldShowProviderHint = snapshot.isProviderStateResolved && !hasConfiguredModel;
   const hideEmptyHint =
-    isHistoryLoading &&
-    mergedEvents.length === 0 &&
-    !isSending &&
-    !isAwaitingAssistantOutput &&
-    !streamingAssistantText.trim();
+    snapshot.isHistoryLoading &&
+    snapshot.uiMessages.length === 0 &&
+    !snapshot.isSending &&
+    !snapshot.isAwaitingAssistantOutput;
+
+  const scrollToBottom = useCallback(() => {
+    const el = threadRef.current;
+    if (!el) return;
+    isProgrammaticScrollRef.current = true;
+    el.scrollTop = el.scrollHeight;
+  }, [threadRef]);
+
+  const handleScroll = useCallback(() => {
+    // Skip sticky check for programmatic scrolls
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    const el = threadRef.current;
+    if (!el) return;
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    isStickyRef.current = distanceFromBottom <= STICKY_BOTTOM_THRESHOLD_PX;
+  }, [threadRef]);
+
+  // Session change → force sticky + schedule initial scroll
+  useEffect(() => {
+    if (previousSessionKeyRef.current === snapshot.selectedSessionKey) return;
+    previousSessionKeyRef.current = snapshot.selectedSessionKey;
+    isStickyRef.current = true;
+    pendingInitialScrollRef.current = true;
+  }, [snapshot.selectedSessionKey]);
+
+  // Initial scroll after history loads for a new session
+  useLayoutEffect(() => {
+    if (!pendingInitialScrollRef.current) return;
+    if (snapshot.isHistoryLoading || snapshot.uiMessages.length === 0) return;
+    pendingInitialScrollRef.current = false;
+    scrollToBottom();
+  }, [scrollToBottom, snapshot.isHistoryLoading, snapshot.uiMessages]);
+
+  // Streaming updates: keep bottom visible while still sticky.
+  useLayoutEffect(() => {
+    if (!isStickyRef.current) return;
+    if (snapshot.uiMessages.length === 0) return;
+    scrollToBottom();
+  }, [scrollToBottom, snapshot.uiMessages]);
 
-  if (!isProviderStateResolved) {
+  if (!snapshot.isProviderStateResolved) {
     return <ChatConversationSkeleton />;
   }
 
   return (
     <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
-      {/* Minimal top bar - only shown when session is active */}
-      {selectedSessionKey && (
-        <div className="px-5 py-3 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0">
-          <div className="min-w-0 flex-1">
-            <span className="text-sm font-medium text-gray-700 truncate">
-              {sessionDisplayName || selectedSessionKey}
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
-            onClick={onDeleteSession}
-            disabled={!canDeleteSession || isDeletePending}
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
+      <div className={cn(
+        "px-5 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-all duration-200",
+        snapshot.selectedSessionKey ? "py-3 opacity-100" : "h-0 py-0 opacity-0 border-b-0"
+      )}>
+        <div className="min-w-0 flex-1">
+          <span className="text-sm font-medium text-gray-700 truncate">
+            {snapshot.sessionDisplayName || snapshot.selectedSessionKey}
+          </span>
         </div>
-      )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
+          onClick={presenter.chatThreadManager.deleteSession}
+          disabled={!snapshot.canDeleteSession || snapshot.isDeletePending}
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
 
       {shouldShowProviderHint && (
         <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0">
           <span className="text-xs text-amber-800">{t('chatModelNoOptions')}</span>
           <button
             type="button"
-            onClick={onGoToProviders}
+            onClick={presenter.chatThreadManager.goToProviders}
             className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
           >
             {t('chatGoConfigureProvider')}
@@ -149,42 +141,31 @@ export function ChatConversationPanel({
         </div>
       )}
 
-      {/* Message thread or welcome */}
-      <div ref={threadRef} onScroll={onThreadScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+      {snapshot.sessionTypeUnavailable && snapshot.sessionTypeUnavailableMessage?.trim() && (
+        <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0">
+          <span className="text-xs text-amber-800">{snapshot.sessionTypeUnavailableMessage}</span>
+        </div>
+      )}
+
+      <div
+        ref={threadRef}
+        onScroll={handleScroll}
+        className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
+      >
         {showWelcome ? (
-          <ChatWelcome onCreateSession={onCreateSession} />
+          <ChatWelcome onCreateSession={presenter.chatThreadManager.createSession} />
         ) : hideEmptyHint ? (
           <div className="h-full" />
-        ) : mergedEvents.length === 0 ? (
+        ) : snapshot.uiMessages.length === 0 ? (
           <div className="px-5 py-5 text-sm text-gray-500">{t('chatNoMessages')}</div>
         ) : (
           <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-            <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
+            <ChatThread uiMessages={snapshot.uiMessages} isSending={snapshot.isSending && snapshot.isAwaitingAssistantOutput} />
           </div>
         )}
       </div>
 
-      {/* Enhanced input bar */}
-      <ChatInputBar
-        isProviderStateResolved={isProviderStateResolved}
-        draft={draft}
-        onDraftChange={onDraftChange}
-        onSend={onSend}
-        onStop={onStop}
-        onGoToProviders={onGoToProviders}
-        canStopGeneration={canStopGeneration}
-        stopDisabledReason={stopDisabledReason}
-        sendError={sendError}
-        isSending={isSending}
-        queuedCount={queuedCount}
-        modelOptions={modelOptions}
-        selectedModel={selectedModel}
-        onSelectedModelChange={onSelectedModelChange}
-        skillRecords={skillRecords}
-        isSkillsLoading={isSkillsLoading}
-        selectedSkills={selectedSkills}
-        onSelectedSkillsChange={onSelectedSkillsChange}
-      />
+      <ChatInputBarView />
     </section>
   );
 }