@nextclaw/ui 0.6.10 → 0.6.11

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>
   );
 }