@nextclaw/ui 0.5.46 → 0.5.47

package/src/components/chat/ChatPage.tsx

@@ -1,17 +1,16 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { SessionEntryView, SessionEventView } from '@/api/types';
-import { sendChatTurnStream } from '@/api/config';
+import type { SessionEntryView } from '@/api/types';
 import { useConfig, useDeleteSession, useSessionHistory, useSessions } from '@/hooks/useConfig';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { PageHeader, PageLayout } from '@/components/layout/page-layout';
-import { ChatThread } from '@/components/chat/ChatThread';
+import { ChatSessionsSidebar } from '@/components/chat/ChatSessionsSidebar';
+import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
+import { useChatStreamController } from '@/components/chat/useChatStreamController';
 import { cn } from '@/lib/utils';
 import { buildFallbackEventsFromMessages } from '@/lib/chat-message';
-import { formatDateTime, t } from '@/lib/i18n';
-import { MessageSquareText, Plus, RefreshCw, Search, Send, Trash2 } from 'lucide-react';
+import { t } from '@/lib/i18n';
+import { Plus, RefreshCw } from 'lucide-react';
 
 const CHAT_SESSION_STORAGE_KEY = 'nextclaw.ui.chat.activeSession';
 const UNKNOWN_CHAT_CHANNEL_KEY = '__unknown_channel__';
@@ -81,32 +80,16 @@ function displayChannelName(channel: string): string {
   return channel;
 }
 
-type PendingChatMessage = {
-  id: number;
-  message: string;
-  sessionKey: string;
-  agentId: string;
-};
-
 export function ChatPage() {
   const [query, setQuery] = useState('');
   const [selectedChannel, setSelectedChannel] = useState('all');
   const [draft, setDraft] = useState('');
   const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(() => readStoredSessionKey());
   const [selectedAgentId, setSelectedAgentId] = useState('main');
-  const [optimisticUserEvent, setOptimisticUserEvent] = useState<SessionEventView | null>(null);
-  const [streamingSessionEvents, setStreamingSessionEvents] = useState<SessionEventView[]>([]);
-  const [streamingAssistantText, setStreamingAssistantText] = useState('');
-  const [streamingAssistantTimestamp, setStreamingAssistantTimestamp] = useState<string | null>(null);
-  const [isSending, setIsSending] = useState(false);
-  const [isAwaitingAssistantOutput, setIsAwaitingAssistantOutput] = useState(false);
-  const [queuedMessages, setQueuedMessages] = useState<PendingChatMessage[]>([]);
 
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const isUserScrollingRef = useRef(false);
-  const streamRunIdRef = useRef(0);
-  const queueIdRef = useRef(0);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
 
   const configQuery = useConfig();
@@ -158,6 +141,26 @@ export function ChatPage() {
     () => historyEvents.reduce((max, event) => (Number.isFinite(event.seq) ? Math.max(max, event.seq) : max), 0) + 1,
     [historyEvents]
   );
+
+  const {
+    optimisticUserEvent,
+    streamingSessionEvents,
+    streamingAssistantText,
+    streamingAssistantTimestamp,
+    isSending,
+    isAwaitingAssistantOutput,
+    queuedCount,
+    sendMessage,
+    resetStreamState
+  } = useChatStreamController({
+    nextOptimisticUserSeq,
+    selectedSessionKeyRef,
+    setSelectedSessionKey,
+    setDraft,
+    refetchSessions: sessionsQuery.refetch,
+    refetchHistory: historyQuery.refetch
+  });
+
   const mergedEvents = useMemo(() => {
     const next = [...historyEvents];
     if (optimisticUserEvent) {
@@ -205,11 +208,9 @@ export function ChatPage() {
 
   useEffect(() => {
     selectedSessionKeyRef.current = selectedSessionKey;
-    // Reset scroll state when switching sessions
     isUserScrollingRef.current = false;
   }, [selectedSessionKey]);
 
-  // Check if user is near bottom (within 50px)
   const isNearBottom = useCallback(() => {
     const element = threadRef.current;
     if (!element) return true;
@@ -217,7 +218,6 @@ export function ChatPage() {
     return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
   }, []);
 
-  // Handle scroll events to detect user scrolling up
   const handleScroll = useCallback(() => {
     if (isNearBottom()) {
       isUserScrollingRef.current = false;
@@ -226,39 +226,21 @@ export function ChatPage() {
     }
   }, [isNearBottom]);
 
-  // Auto-scroll to bottom only if user hasn't scrolled up
   useEffect(() => {
     const element = threadRef.current;
-    if (!element) {
-      return;
-    }
-    // Don't auto-scroll if user has scrolled up
-    if (isUserScrollingRef.current) {
+    if (!element || isUserScrollingRef.current) {
       return;
     }
     element.scrollTop = element.scrollHeight;
   }, [mergedEvents, isSending]);
 
-  useEffect(() => {
-    return () => {
-      streamRunIdRef.current += 1;
-    };
-  }, []);
-
-  const createNewSession = () => {
-    streamRunIdRef.current += 1;
-    setIsSending(false);
-    setQueuedMessages([]);
-    setOptimisticUserEvent(null);
-    setStreamingSessionEvents([]);
-    setStreamingAssistantText('');
-    setStreamingAssistantTimestamp(null);
-    setIsAwaitingAssistantOutput(false);
+  const createNewSession = useCallback(() => {
+    resetStreamState();
     const next = buildNewSessionKey(selectedAgentId);
     setSelectedSessionKey(next);
-  };
+  }, [resetStreamState, selectedAgentId]);
 
-  const handleDeleteSession = async () => {
+  const handleDeleteSession = useCallback(async () => {
     if (!selectedSessionKey) {
       return;
     }
@@ -274,137 +256,15 @@ export function ChatPage() {
       { key: selectedSessionKey },
       {
         onSuccess: async () => {
-          streamRunIdRef.current += 1;
-          setIsSending(false);
-          setQueuedMessages([]);
-          setOptimisticUserEvent(null);
-          setStreamingSessionEvents([]);
-          setStreamingAssistantText('');
-          setStreamingAssistantTimestamp(null);
-          setIsAwaitingAssistantOutput(false);
+          resetStreamState();
           setSelectedSessionKey(null);
           await sessionsQuery.refetch();
         }
       }
     );
-  };
-
-  const runSend = useCallback(async (item: PendingChatMessage, options?: { restoreDraftOnError?: boolean }) => {
-    streamRunIdRef.current += 1;
-    const runId = streamRunIdRef.current;
-
-    setStreamingSessionEvents([]);
-    setStreamingAssistantText('');
-    setStreamingAssistantTimestamp(null);
-    setOptimisticUserEvent({
-      seq: nextOptimisticUserSeq,
-      type: 'message.user.optimistic',
-      timestamp: new Date().toISOString(),
-      message: {
-        role: 'user',
-        content: item.message,
-        timestamp: new Date().toISOString()
-      }
-    });
-    setIsSending(true);
-    setIsAwaitingAssistantOutput(true);
-
-    try {
-      let streamText = '';
-      const streamTimestamp = new Date().toISOString();
-      setStreamingAssistantTimestamp(streamTimestamp);
-
-      const result = await sendChatTurnStream({
-        message: item.message,
-        sessionKey: item.sessionKey,
-        agentId: item.agentId,
-        channel: 'ui',
-        chatId: 'web-ui'
-      }, {
-        onReady: (event) => {
-          if (runId !== streamRunIdRef.current) {
-            return;
-          }
-          if (event.sessionKey) {
-            setSelectedSessionKey((prev) => prev === event.sessionKey ? prev : event.sessionKey);
-          }
-        },
-        onDelta: (event) => {
-          if (runId !== streamRunIdRef.current) {
-            return;
-          }
-          streamText += event.delta;
-          setStreamingAssistantText(streamText);
-          setIsAwaitingAssistantOutput(false);
-        },
-        onSessionEvent: (event) => {
-          if (runId !== streamRunIdRef.current) {
-            return;
-          }
-          if (event.data.message?.role === 'user') {
-            setOptimisticUserEvent(null);
-          }
-          setStreamingSessionEvents((prev) => {
-            const next = [...prev];
-            const hit = next.findIndex((item) => item.seq === event.data.seq);
-            if (hit >= 0) {
-              next[hit] = event.data;
-            } else {
-              next.push(event.data);
-            }
-            return next;
-          });
-          if (event.data.message?.role === 'assistant') {
-            streamText = '';
-            setStreamingAssistantText('');
-            setIsAwaitingAssistantOutput(false);
-          }
-        }
-      });
-      if (runId !== streamRunIdRef.current) {
-        return;
-      }
-      setOptimisticUserEvent(null);
-      if (result.sessionKey !== item.sessionKey) {
-        setSelectedSessionKey(result.sessionKey);
-      }
-      await sessionsQuery.refetch();
-      const activeSessionKey = selectedSessionKeyRef.current;
-      if (!activeSessionKey || activeSessionKey === item.sessionKey || activeSessionKey === result.sessionKey) {
-        await historyQuery.refetch();
-      }
-      setStreamingSessionEvents([]);
-      setStreamingAssistantText('');
-      setStreamingAssistantTimestamp(null);
-      setIsAwaitingAssistantOutput(false);
-      setIsSending(false);
-    } catch {
-      if (runId !== streamRunIdRef.current) {
-        return;
-      }
-      streamRunIdRef.current += 1;
-      setIsSending(false);
-      setOptimisticUserEvent(null);
-      setStreamingSessionEvents([]);
-      setStreamingAssistantText('');
-      setStreamingAssistantTimestamp(null);
-      setIsAwaitingAssistantOutput(false);
-      if (options?.restoreDraftOnError) {
-        setDraft((prev) => prev.trim().length === 0 ? item.message : prev);
-      }
-    }
-  }, [historyQuery, nextOptimisticUserSeq, sessionsQuery]);
+  }, [confirm, deleteSession, resetStreamState, selectedSessionKey, sessionsQuery]);
 
-  useEffect(() => {
-    if (isSending || queuedMessages.length === 0) {
-      return;
-    }
-    const [next, ...rest] = queuedMessages;
-    setQueuedMessages(rest);
-    void runSend(next, { restoreDraftOnError: true });
-  }, [isSending, queuedMessages, runSend]);
-
-  const handleSend = async () => {
+  const handleSend = useCallback(async () => {
     const message = draft.trim();
     if (!message) {
       return;
@@ -415,22 +275,13 @@ export function ChatPage() {
       setSelectedSessionKey(sessionKey);
     }
     setDraft('');
-
-    queueIdRef.current += 1;
-    const item: PendingChatMessage = {
-      id: queueIdRef.current,
+    await sendMessage({
       message,
       sessionKey,
-      agentId: selectedAgentId
-    };
-
-    if (isSending) {
-      setQueuedMessages((prev) => [...prev, item]);
-      return;
-    }
-
-    await runSend(item, { restoreDraftOnError: true });
-  };
+      agentId: selectedAgentId,
+      restoreDraftOnError: true
+    });
+  }, [draft, selectedSessionKey, selectedAgentId, sendMessage]);
 
   return (
     <PageLayout fullHeight>
@@ -452,171 +303,47 @@ export function ChatPage() {
       />
 
       <div className="flex-1 min-h-0 flex gap-4 max-lg:flex-col">
-        <aside className="w-[320px] max-lg:w-full shrink-0 rounded-2xl border border-gray-200 bg-white shadow-card flex flex-col min-h-0">
-          <div className="p-4 border-b border-gray-100 space-y-3">
-            <div className="relative">
-              <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
-              <Input
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder={t('chatSearchSessionPlaceholder')}
-                className="pl-8 h-9 rounded-lg text-xs"
-              />
-            </div>
-            <Select value={selectedChannel} onValueChange={setSelectedChannel}>
-              <SelectTrigger className="h-9 rounded-lg text-xs">
-                <SelectValue placeholder={t('sessionsAllChannels')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t('sessionsAllChannels')}</SelectItem>
-                {channelOptions.map((channel) => (
-                  <SelectItem key={channel} value={channel}>
-                    {displayChannelName(channel)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <div className="grid grid-cols-2 gap-2">
-              <Button variant="outline" size="sm" className="rounded-lg" onClick={() => sessionsQuery.refetch()}>
-                <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', sessionsQuery.isFetching && 'animate-spin')} />
-                {t('chatRefresh')}
-              </Button>
-              <Button variant="subtle" size="sm" className="rounded-lg" onClick={createNewSession}>
-                <Plus className="h-3.5 w-3.5 mr-1.5" />
-                {t('chatNewSession')}
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
-            {sessionsQuery.isLoading ? (
-              <div className="text-sm text-gray-500 p-4">{t('sessionsLoading')}</div>
-            ) : filteredSessions.length === 0 ? (
-              <div className="p-5 m-2 rounded-xl border border-dashed border-gray-200 text-center text-sm text-gray-500">
-                <MessageSquareText className="h-7 w-7 mx-auto mb-2 text-gray-300" />
-                {t('sessionsEmpty')}
-              </div>
-            ) : (
-              <div className="space-y-1">
-                {filteredSessions.map((session) => {
-                  const active = selectedSessionKey === session.key;
-                  return (
-                    <button
-                      key={session.key}
-                      onClick={() => setSelectedSessionKey(session.key)}
-                      className={cn(
-                        'w-full rounded-xl border px-3 py-2.5 text-left transition-all',
-                        active
-                          ? 'border-primary/30 bg-primary/5'
-                          : 'border-transparent hover:border-gray-200 hover:bg-gray-50'
-                      )}
-                    >
-                      <div className="text-sm font-semibold text-gray-900 truncate">{sessionDisplayName(session)}</div>
-                      <div className="mt-1 text-[11px] text-gray-500 truncate">{session.key}</div>
-                      <div className="mt-1 text-[11px] text-gray-400">
-                        {session.messageCount} · {formatDateTime(session.updatedAt)}
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </aside>
-
-        <section className="flex-1 min-h-0 rounded-2xl border border-gray-200 bg-gradient-to-b from-gray-50/60 to-white shadow-card flex flex-col overflow-hidden">
-          <div className="px-5 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm">
-            <div className="grid gap-3 lg:grid-cols-[minmax(220px,300px)_minmax(0,1fr)_auto] items-end">
-              <div className="min-w-0">
-              <div className="text-[11px] text-gray-500 mb-1">{t('chatAgentLabel')}</div>
-              <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
-                <SelectTrigger className="h-9 rounded-lg">
-                  <SelectValue placeholder={t('chatSelectAgent')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {agentOptions.map((agent) => (
-                    <SelectItem key={agent} value={agent}>
-                      {agent}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-              <div className="min-w-0">
-              <div className="text-[11px] text-gray-500 mb-1">{t('chatSessionLabel')}</div>
-              <div className="h-9 rounded-lg border border-gray-200 bg-white px-3 text-xs text-gray-600 flex items-center truncate">
-                {selectedSessionKey ?? t('chatNoSession')}
-              </div>
-            </div>
-
-              <Button
-                variant="outline"
-                className="rounded-lg"
-                onClick={handleDeleteSession}
-                disabled={!selectedSession || deleteSession.isPending}
-              >
-                <Trash2 className="h-3.5 w-3.5 mr-1.5" />
-                {t('chatDeleteSession')}
-              </Button>
-            </div>
-          </div>
-
-          <div ref={threadRef} onScroll={handleScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5">
-            {!selectedSessionKey ? (
-              <div className="h-full flex items-center justify-center">
-                <div className="text-center text-gray-500">
-                  <MessageSquareText className="h-8 w-8 mx-auto mb-2 text-gray-300" />
-                  <div className="text-sm font-medium">{t('chatNoSession')}</div>
-                  <div className="text-xs mt-1">{t('chatNoSessionHint')}</div>
-                </div>
-              </div>
-            ) : historyQuery.isLoading && mergedEvents.length === 0 && !isSending && !isAwaitingAssistantOutput && !streamingAssistantText.trim() ? (
-              <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
-            ) : (
-              <>
-                {mergedEvents.length === 0 ? (
-                  <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
-                ) : (
-                  <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
-                )}
-              </>
-            )}
-          </div>
-
-          <div className="border-t border-gray-200 bg-white p-4">
-            <div className="rounded-xl border border-gray-200 bg-white p-2">
-              <textarea
-                value={draft}
-                onChange={(event) => setDraft(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' && !event.shiftKey) {
-                    event.preventDefault();
-                    void handleSend();
-                  }
-                }}
-                placeholder={t('chatInputPlaceholder')}
-                className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-2 py-1.5 text-gray-800 placeholder:text-gray-400"
-              />
-              <div className="flex items-center justify-between px-2 pb-1">
-                <div className="text-[11px] text-gray-400">
-                  {isSending && queuedMessages.length > 0
-                    ? `${t('chatQueuedHintPrefix')} ${queuedMessages.length} ${t('chatQueuedHintSuffix')}`
-                    : t('chatInputHint')}
-                </div>
-                <Button
-                  size="sm"
-                  className="rounded-lg"
-                  onClick={() => void handleSend()}
-                  disabled={draft.trim().length === 0}
-                >
-                  <Send className="h-3.5 w-3.5 mr-1.5" />
-                  {isSending ? t('chatQueueSend') : t('chatSend')}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </section>
+        <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>

package/src/components/chat/ChatSessionsSidebar.tsx

@@ -0,0 +1,100 @@
+import type { SessionEntryView } from '@/api/types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { formatDateTime, t } from '@/lib/i18n';
+import { MessageSquareText, Plus, RefreshCw, Search } from 'lucide-react';
+
+type ChatSessionsSidebarProps = {
+  query: string;
+  onQueryChange: (value: string) => void;
+  selectedChannel: string;
+  onSelectedChannelChange: (value: string) => void;
+  channelOptions: string[];
+  channelLabel: (channel: string) => string;
+  isLoading: boolean;
+  isRefreshing: boolean;
+  sessions: SessionEntryView[];
+  selectedSessionKey: string | null;
+  onSelectSession: (key: string) => void;
+  sessionTitle: (session: SessionEntryView) => string;
+  onRefresh: () => void;
+  onCreateSession: () => void;
+};
+
+export function ChatSessionsSidebar(props: ChatSessionsSidebarProps) {
+  return (
+    <aside className="w-[320px] max-lg:w-full shrink-0 rounded-2xl border border-gray-200 bg-white shadow-card flex flex-col min-h-0">
+      <div className="p-4 border-b border-gray-100 space-y-3">
+        <div className="relative">
+          <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
+          <Input
+            value={props.query}
+            onChange={(event) => props.onQueryChange(event.target.value)}
+            placeholder={t('chatSearchSessionPlaceholder')}
+            className="pl-8 h-9 rounded-lg text-xs"
+          />
+        </div>
+        <Select value={props.selectedChannel} onValueChange={props.onSelectedChannelChange}>
+          <SelectTrigger className="h-9 rounded-lg text-xs">
+            <SelectValue placeholder={t('sessionsAllChannels')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('sessionsAllChannels')}</SelectItem>
+            {props.channelOptions.map((channel) => (
+              <SelectItem key={channel} value={channel}>
+                {props.channelLabel(channel)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="grid grid-cols-2 gap-2">
+          <Button variant="outline" size="sm" className="rounded-lg" onClick={props.onRefresh}>
+            <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', props.isRefreshing && 'animate-spin')} />
+            {t('chatRefresh')}
+          </Button>
+          <Button variant="subtle" size="sm" className="rounded-lg" onClick={props.onCreateSession}>
+            <Plus className="h-3.5 w-3.5 mr-1.5" />
+            {t('chatNewSession')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
+        {props.isLoading ? (
+          <div className="text-sm text-gray-500 p-4">{t('sessionsLoading')}</div>
+        ) : props.sessions.length === 0 ? (
+          <div className="p-5 m-2 rounded-xl border border-dashed border-gray-200 text-center text-sm text-gray-500">
+            <MessageSquareText className="h-7 w-7 mx-auto mb-2 text-gray-300" />
+            {t('sessionsEmpty')}
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {props.sessions.map((session) => {
+              const active = props.selectedSessionKey === session.key;
+              return (
+                <button
+                  key={session.key}
+                  onClick={() => props.onSelectSession(session.key)}
+                  className={cn(
+                    'w-full rounded-xl border px-3 py-2.5 text-left transition-all',
+                    active
+                      ? 'border-primary/30 bg-primary/5'
+                      : 'border-transparent hover:border-gray-200 hover:bg-gray-50'
+                  )}
+                >
+                  <div className="text-sm font-semibold text-gray-900 truncate">{props.sessionTitle(session)}</div>
+                  <div className="mt-1 text-[11px] text-gray-500 truncate">{session.key}</div>
+                  <div className="mt-1 text-[11px] text-gray-400">
+                    {session.messageCount} · {formatDateTime(session.updatedAt)}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}