@agent-native/core 0.95.1 → 0.96.0

package/corpus/core/src/client/MultiTabAssistantChat.tsx

@@ -2,7 +2,6 @@ import {
   IconX,
   IconPlus,
   IconHistory,
-  IconSearch,
   IconLink,
   IconLinkOff,
   IconCheck,
@@ -47,6 +46,11 @@ import {
   buildChatModelGroups,
   type EngineModelGroup,
 } from "./chat-model-groups.js";
+import {
+  ChatHistoryList,
+  type ChatHistoryItem,
+  type ChatHistorySection,
+} from "./chat/ChatHistoryList.js";
 import {
   Popover,
   PopoverAnchor,
@@ -444,6 +448,8 @@ function HistoryPopover({
   onClose,
   onLoadMore,
   onSearch,
+  onTogglePin,
+  onRename,
 }: {
   threads: ChatThreadSummary[];
   openTabIds: Set<string>;
@@ -456,6 +462,11 @@ function HistoryPopover({
   onClose: () => void;
   onLoadMore?: () => void;
   onSearch?: (query: string) => Promise<ChatThreadSummary[]>;
+  /** Presence enables the pin/unpin row action. Receives the thread's
+   * current pinned state so the caller can flip it. */
+  onTogglePin?: (id: string, pinned: boolean) => void;
+  /** Presence enables the inline rename row action. */
+  onRename?: (id: string, nextTitle: string) => void;
 }) {
   const [search, setSearch] = useState("");
   const [searchResults, setSearchResults] = useState<
@@ -512,18 +523,26 @@ function HistoryPopover({
       )
     : visibleThreads;
 
-  // When scope is set we split history into two sections so the user can
-  // see "this deck's chats" first without losing access to general /
+  // Pinned threads always float to the top of `threads` already (see
+  // `sortThreadSummaries` in use-chat-threads.ts and the matching server
+  // ORDER BY), but pulling them into their own labeled section — instead of
+  // just relying on sort order within "All chats" — makes the pin affordance
+  // visible at a glance, matching common chat-history UX.
+  const pinnedThreads = filtered.filter((t) => t.pinnedAt != null);
+  const unpinnedThreads = filtered.filter((t) => t.pinnedAt == null);
+
+  // When scope is set we split (unpinned) history into two sections so the
+  // user can see "this deck's chats" first without losing access to general /
   // other-deck chats. Section labels intentionally use the current
   // resource type (deck/design/dashboard) instead of a generic phrase.
   const sectionedThreads = currentScope
     ? {
-        scoped: filtered.filter(
+        scoped: unpinnedThreads.filter(
           (t) =>
             t.scope?.type === currentScope.type &&
             t.scope?.id === currentScope.id,
         ),
-        other: filtered.filter(
+        other: unpinnedThreads.filter(
           (t) =>
             !t.scope ||
             t.scope.type !== currentScope.type ||
@@ -532,6 +551,53 @@ function HistoryPopover({
       }
     : null;
 
+  const toHistoryItem = (thread: ChatThreadSummary): ChatHistoryItem => {
+    const isActive = thread.id === activeThreadId;
+    const title = thread.title || thread.preview || "Chat";
+    return {
+      id: thread.id,
+      title,
+      titleText: title,
+      subtitle:
+        thread.preview && thread.title !== thread.preview
+          ? thread.preview
+          : undefined,
+      detail: thread.scope?.label || undefined,
+      timestamp: isActive
+        ? "Active"
+        : openTabIds.has(thread.id)
+          ? "Open"
+          : formatThreadTime(thread.updatedAt),
+      pinned: thread.pinnedAt != null,
+    };
+  };
+
+  const historySections: ChatHistorySection[] = [
+    ...(pinnedThreads.length > 0
+      ? [
+          {
+            id: "pinned",
+            label: "Pinned",
+            items: pinnedThreads.map(toHistoryItem),
+          },
+        ]
+      : []),
+    ...(sectionedThreads
+      ? [
+          {
+            id: "scoped",
+            label: `This ${currentScope!.type}`,
+            items: sectionedThreads.scoped.map(toHistoryItem),
+          },
+          {
+            id: "other",
+            label: "All chats",
+            items: sectionedThreads.other.map(toHistoryItem),
+          },
+        ]
+      : [{ id: "all", items: unpinnedThreads.map(toHistoryItem) }]),
+  ];
+
   return (
     <Popover open onOpenChange={(open) => !open && onClose()}>
       <PopoverAnchor asChild>
@@ -547,90 +613,45 @@ function HistoryPopover({
         }}
         className="w-72 rounded-lg p-0"
       >
-        <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
-          <IconSearch size={13} />
-          <input
-            ref={inputRef}
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search chats..."
-            className="flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground outline-none"
-          />
-        </div>
-        <div className="max-h-64 overflow-y-auto py-1">
-          {loadError && !search.trim() ? (
-            <div className="px-3 py-4 text-xs text-amber-500 text-center">
-              {loadError}
-            </div>
-          ) : isSearching ? (
-            <div className="px-3 py-4 text-xs text-muted-foreground text-center">
-              Searching...
-            </div>
-          ) : filtered.length === 0 ? (
-            <div className="px-3 py-4 text-xs text-muted-foreground text-center">
-              {search ? "No matching chats" : "No chats yet"}
-            </div>
-          ) : sectionedThreads ? (
-            <>
-              {sectionedThreads.scoped.length > 0 && (
-                <>
-                  <div className="px-3 pt-1.5 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground/70">
-                    This {currentScope!.type}
-                  </div>
-                  {sectionedThreads.scoped.map((thread) =>
-                    renderThreadRow(
-                      thread,
-                      activeThreadId,
-                      openTabIds,
-                      formatThreadTime,
-                      onSelect,
-                      onClose,
-                    ),
-                  )}
-                </>
-              )}
-              {sectionedThreads.other.length > 0 && (
-                <>
-                  <div className="px-3 pt-2 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground/70">
-                    All chats
-                  </div>
-                  {sectionedThreads.other.map((thread) =>
-                    renderThreadRow(
-                      thread,
-                      activeThreadId,
-                      openTabIds,
-                      formatThreadTime,
-                      onSelect,
-                      onClose,
-                    ),
-                  )}
-                </>
-              )}
-            </>
-          ) : (
-            filtered.map((thread) =>
-              renderThreadRow(
-                thread,
-                activeThreadId,
-                openTabIds,
-                formatThreadTime,
-                onSelect,
-                onClose,
-              ),
-            )
-          )}
-          {!search.trim() && hasMoreThreads && (
-            <button
-              type="button"
-              onClick={() => onLoadMore?.()}
-              disabled={isLoadingMoreThreads}
-              className="mx-1 mt-1 flex w-[calc(100%-0.5rem)] items-center justify-center rounded-md px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-60"
-            >
-              {isLoadingMoreThreads ? "Loading..." : "Load older chats"}
-            </button>
-          )}
-        </div>
+        <ChatHistoryList
+          sections={historySections}
+          activeId={activeThreadId}
+          onSelect={(id) => {
+            onSelect(id);
+            onClose();
+          }}
+          onTogglePin={
+            onTogglePin
+              ? (id) => {
+                  const isPinned =
+                    threads.find((t) => t.id === id)?.pinnedAt != null;
+                  onTogglePin(id, !isPinned);
+                }
+              : undefined
+          }
+          onRename={onRename}
+          searchValue={search}
+          onSearchChange={setSearch}
+          searchPlaceholder="Search chats..."
+          searchInputRef={inputRef}
+          loading={isSearching}
+          loadingLabel="Searching..."
+          error={loadError && !search.trim() ? loadError : undefined}
+          emptyLabel="No chats yet"
+          emptySearchLabel="No matching chats"
+          footer={
+            !search.trim() && hasMoreThreads ? (
+              <button
+                type="button"
+                onClick={() => onLoadMore?.()}
+                disabled={isLoadingMoreThreads}
+                className="mx-1 mt-1 flex w-[calc(100%-0.5rem)] items-center justify-center rounded-md px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-60"
+              >
+                {isLoadingMoreThreads ? "Loading..." : "Load older chats"}
+              </button>
+            ) : undefined
+          }
+        />
       </PopoverContent>
     </Popover>
   );
@@ -1074,6 +1095,8 @@ export function MultiTabAssistantChat({
     isLoadingMoreThreads,
     threadsLoadError,
     isNewThread,
+    pinThread,
+    renameThread,
   } = useChatThreads(apiUrl, storageKey, scope, {
     restoreActiveThread,
     routeThreadId: threadUrlSyncEnabled ? urlThreadId : undefined,
@@ -1105,8 +1128,28 @@ export function MultiTabAssistantChat({
   );
   const [runningThreads, setRunningThreads] = useState<Set<string>>(new Set());
   const [showHistory, setShowHistory] = useState(false);
+  const [pageOverlayScrolled, setPageOverlayScrolled] = useState(false);
   const newThreadIds = useRef<Set<string>>(new Set());
 
+  useEffect(() => {
+    setPageOverlayScrolled(false);
+  }, [activeThreadId]);
+
+  const handlePageOverlayScroll = useCallback(
+    (event: React.UIEvent<HTMLDivElement>) => {
+      const target = event.target;
+      if (
+        !renderOverlay ||
+        !(target instanceof HTMLElement) ||
+        !target.closest(".agent-chat-scroll")
+      ) {
+        return;
+      }
+      setPageOverlayScrolled(target.scrollTop > 1);
+    },
+    [renderOverlay],
+  );
+
   // ─── Model state ─────────────────────────────────────────────────────────
   const [availableModels, setAvailableModels] = useState<EngineModelGroup[]>(
     [],
@@ -2653,7 +2696,13 @@ export function MultiTabAssistantChat({
           : null}
 
       {/* Chat content with optional overlay */}
-      <div className="relative flex-1 flex flex-col min-h-0">
+      <div
+        className="relative flex-1 flex flex-col min-h-0"
+        data-agent-page-chat-scrolled={
+          renderOverlay && pageOverlayScrolled ? "" : undefined
+        }
+        onScrollCapture={renderOverlay ? handlePageOverlayScroll : undefined}
+      >
         {renderOverlay ? renderOverlay(headerProps) : null}
 
         {/* History popover — rendered inside relative container so positioning works */}
@@ -2670,6 +2719,8 @@ export function MultiTabAssistantChat({
             onClose={() => setShowHistory(false)}
             onLoadMore={loadMoreThreads}
             onSearch={searchThreads}
+            onTogglePin={pinThread}
+            onRename={renameThread}
           />
         )}