@vertesia/ui 0.79.0 → 0.79.2

package/src/core/hooks/useScrollableSearch.tsx

@@ -0,0 +1,193 @@
+import { useIntersectionObserver } from "@vertesia/ui/core";
+import { useEffect, useRef, useState } from "react";
+
+interface SearchResponse<ResultT, PageT> {
+    /**
+     * The search result
+     */
+    result: ResultT[];
+
+    /**
+     * The next page information or null if no more pages are available
+     */
+    nextPage: PageT | null;
+}
+
+/**
+ * The search function signature.
+ * @param payload The search payload
+ * @param page The information for the page to fetch. Use null to fetch the first page
+ * @param pageSize The number of items per page
+ * @returns A promise that resolves to the search response
+ */
+type SearchFn<PayloadT, ResultT, PageT = number> = (payload: PayloadT, page: PageT | null, pageSize: number) => Promise<SearchResponse<ResultT, PageT>>;
+
+
+interface ScrollableSearchOptions<ResultT, PayloadT, PageT = number> {
+    /**
+     * the search function
+     */
+    search: SearchFn<PayloadT, ResultT, PageT>;
+
+    /**
+     * Initial paylload for the first search
+     */
+    payload: PayloadT;
+
+    /**
+     * Which page size to use. Defaults to 50.
+     */
+    pageSize?: number;
+
+    /**
+     * A ref to the element that triggers loading the next page when it enters the viewport
+     */
+    nextPageTrigger: React.RefObject<HTMLElement | null>;
+}
+
+interface ScrollableSearchResult<ResultT, PayloadT, PageT = number> {
+    /**
+     * Initiates a new search with the given payload
+     * @param payload The search payload
+     */
+    search: (payload: PayloadT) => void;
+
+    /**
+     * Refreshes the current search with the last used payload
+     */
+    refresh: () => void;
+
+    /**
+     * Loads the next page of results
+     */
+    searchMore: () => void;
+
+    /**
+     * The current accumulated search result
+     */
+    result: ResultT[];
+
+    /**
+     * The current page information
+     */
+    page: PageT | null;
+
+    /**
+     * Whether there are more pages to load
+     */
+    hasMore: boolean;
+
+    /**
+     * Any error that occurred during the last search
+     */
+    error: Error | null;
+
+    /**
+     * Whether a search is currently in progress
+     */
+    isSearching: boolean;
+}
+
+/**
+ * A hook that provides paginated search functionality with infinite scrolling support.
+ */
+export function useScrollableSearch<ResultT, PayloadT, PageT = number>(opts: ScrollableSearchOptions<ResultT, PayloadT, PageT>, dependencies: any[] = []): ScrollableSearchResult<ResultT, PayloadT, PageT> {
+    const pageSize = opts.pageSize || 50;
+    const [page, setPage] = useState<PageT | null>(null);
+    const [lastPayload, setLastPayload] = useState<PayloadT>(opts.payload);
+    const [error, setError] = useState<Error | null>(null);
+    const [results, setResults] = useState<ResultT[]>([]);
+    const [nextPage, setNextPage] = useState<PageT | null>(null);
+    const [isSearching, setIsSearching] = useState(false);
+
+    // Track current request to prevent stale results
+    const requestIdRef = useRef(0);
+
+    const search = (payload: PayloadT) => {
+        setPage(null);
+        setResults([]);  // Clear old results immediately
+        setNextPage(null);
+        setLastPayload(payload);
+    }
+
+    const searchMore = () => {
+        if (nextPage !== null) {
+            setPage(nextPage);
+        }
+    }
+
+    useEffect(() => {
+        // Increment request ID to mark previous requests as stale
+        requestIdRef.current += 1;
+        const currentRequestId = requestIdRef.current;
+
+        setIsSearching(true);
+        opts.search(lastPayload, page, pageSize).then(r => {
+            // Only update state if this is still the current request
+            if (currentRequestId !== requestIdRef.current) {
+                return; // Stale request, ignore results
+            }
+
+            // If page is null, it's a new search - replace results
+            // Otherwise, it's loading more - append results
+            if (page === null) {
+                setResults(r.result);
+            } else {
+                setResults(prev => [...prev, ...r.result]);
+            }
+            setNextPage(r.nextPage);
+            setError(null);
+        }).catch(error => {
+            // Only update error if this is still the current request
+            if (currentRequestId !== requestIdRef.current) {
+                return; // Stale request, ignore error
+            }
+            setError(error);
+        }).finally(() => {
+            // Only update isSearching if this is still the current request
+            if (currentRequestId === requestIdRef.current) {
+                setIsSearching(false);
+            }
+        });
+    }, [...dependencies, lastPayload, page]);
+
+    // Intersection observer for infinite scrolling
+    useIntersectionObserver(opts.nextPageTrigger, () => {
+        if (!isSearching && nextPage) {
+            searchMore();
+        }
+    }, { threshold: 0.1, deps: [nextPage, isSearching] });
+
+    return {
+        search,
+        refresh: () => search(lastPayload),
+        searchMore,
+        result: results,
+        page,
+        hasMore: nextPage !== null,
+        error,
+        isSearching,
+    }
+}
+
+type DefaultSearchFn<PayloadT, ResultT> = (payload: PayloadT, offset: number, limit: number) => Promise<ResultT[]>;
+
+interface DefaultScrollableSearchOptions<ResultT, PayloadT> extends Omit<ScrollableSearchOptions<ResultT, PayloadT, number>, 'search'> {
+    search: DefaultSearchFn<PayloadT, ResultT>;
+}
+
+export function useDefaultScrollableSearch<ResultT, PayloadT>(opts: DefaultScrollableSearchOptions<ResultT, PayloadT>, dependencies: any[] = []): ScrollableSearchResult<ResultT, PayloadT, number> {
+    const actualOpts: ScrollableSearchOptions<ResultT, PayloadT, number> = {
+        ...opts,
+        async search(payload, page, pageSize) {
+            const currentPage = page ?? 0;
+            const offset = currentPage * pageSize;
+            const result = await opts.search(payload, offset, pageSize);
+            return {
+                result,
+                nextPage: result.length === 0 ? null : currentPage + 1
+            };
+        }
+    };
+    return useScrollableSearch<ResultT, PayloadT, number>(actualOpts, dependencies);
+}

package/src/env/index.ts

@@ -65,7 +65,7 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     }
 
     get isStable() {
-        return this.type === "production" || this.type === "preview" || this.type === "dr";
+        return this.type === "production" || this.type === "preview" || this.type === "disaster-recovery";
     }
 
     get isDev() {

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -1,33 +1,17 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Bot, Cpu, SendIcon, XIcon } from "lucide-react";
+import { useUserSession } from "@vertesia/ui/session";
 import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
-import {
-    AgentMessage,
-    AgentMessageType,
-    Plan,
-    UserInputSignal
-} from "@vertesia/common";
+import { AgentMessage, AgentMessageType, Plan, UserInputSignal } from "@vertesia/common";
 import { Button, MessageBox, Spinner, useToast } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import {
-    Bot,
-    Cpu,
-    SendIcon,
-    XIcon
-} from "lucide-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import {
-    AnimatedThinkingDots,
-    PulsatingCircle
-} from "./AnimatedThinkingDots";
+
+import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
 import Header from "./ModernAgentOutput/Header";
 import MessageInput from "./ModernAgentOutput/MessageInput";
-import PlanPanel from "./ModernAgentOutput/PlanPanel";
-import {
-    getWorkstreamId,
-    insertMessageInTimeline,
-    isInProgress,
-} from "./ModernAgentOutput/utils";
+import { getWorkstreamId, insertMessageInTimeline, isInProgress } from "./ModernAgentOutput/utils";
 import { ThinkingMessages } from "./WaitingMessages";
+import InlineSlidingPlanPanel from "./ModernAgentOutput/InlineSlidingPlanPanel";
 
 type StartWorkflowFn = (
     initialMessage?: string,
@@ -177,7 +161,7 @@ function StartWorkflowView({
             <div className="flex items-center justify-between py-2 px-3 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
                 <div className="flex items-center space-x-2">
                     <div className="p-1">
-                        <Cpu className="h-3.5 w-3.5 text-gray-400 dark:text-gray-500" />
+                        <Cpu className="size-3.5 text-muted" />
                     </div>
                     <span className="font-medium text-sm text-gray-700 dark:text-gray-300">
                         {title}
@@ -193,7 +177,7 @@ function StartWorkflowView({
                         title="Close"
                         className="text-slate-500 hover:text-slate-700"
                     >
-                        <XIcon className="h-4 w-4" />
+                        <XIcon className="size-4" />
                     </Button>
                 )}
             </div>
@@ -239,7 +223,7 @@ function StartWorkflowView({
                         {isSending ? (
                             <Spinner size="sm" className="mr-1.5" />
                         ) : (
-                            <SendIcon className="h-3.5 w-3.5 mr-1.5" />
+                            <SendIcon className="size-3.5 mr-1.5" />
                         )}
                         {startButtonText}
                     </Button>
@@ -269,9 +253,7 @@ function ModernAgentConversationInner({
     const [inputValue, setInputValue] = useState<string>("");
     const [isSending, setIsSending] = useState(false);
     const [viewMode, setViewMode] = useState<"stacked" | "sliding">("sliding");
-    //TODO _setShowPlanPanel state not used
-    const [showPlanPanel, _setShowPlanPanel] = useState<boolean>(false);
-    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(false);
+    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(!isModal);
     // Keep track of multiple plans and their timestamps
     const [plans, setPlans] = useState<Array<{ plan: Plan; timestamp: number }>>(
         [],
@@ -602,103 +584,112 @@ function ModernAgentConversationInner({
     };
 
     return (
-        <div
-            className={`flex flex-col h-full min-h-0 ${isModal ? "rounded-lg overflow-hidden" : ""}`}
-        >
-            <Header
-                title={actualTitle}
-                isCompleted={isCompleted}
-                onClose={onClose}
-                isModal={isModal}
-                run={run}
-                viewMode={viewMode}
-                onViewModeChange={setViewMode}
-                showPlanPanel={showSlidingPanel}
-                hasPlan={plans.length > 0}
-                onTogglePlanPanel={() => {
-                    setShowSlidingPanel(!showSlidingPanel);
-                    // When opening the plan panel, mark that we've shown it
-                    if (!showSlidingPanel) {
-                        sessionStorage.setItem("plan-panel-shown", "true");
-                    }
-                }}
-                onDownload={downloadConversation}
-                onCopyRunId={copyRunId}
-                resetWorkflow={resetWorkflow}
-            />
-
-            {/* Inline Plan Panel - only shown when toggle is clicked */}
-            {showPlanPanel && !showSlidingPanel && plans.length > 0 && (
-                <PlanPanel
-                    plan={getActivePlan.plan}
-                    workstreamStatus={getActivePlan.workstreamStatus}
-                    isVisible={true}
-                />
-            )}
-
-            {messages.length === 0 && !isCompleted ? (
-                <div className="flex-1 flex flex-col items-center justify-center h-full text-center py-6 bg-white dark:bg-gray-900">
-                    <div className="bg-white dark:bg-slate-800 p-5 max-w-md border border-blue-200 dark:border-blue-900/50 rounded-lg shadow-sm">
-                        <div className="flex items-center space-x-3 mb-3">
-                            <PulsatingCircle size="sm" color="blue" />
-                            <div className="text-sm text-slate-600 dark:text-slate-300 font-medium">
-                                {ThinkingMessages[thinkingMessageIndex]}
-                            </div>
-                        </div>
-                        <div className="mt-4 flex justify-center">
-                            <AnimatedThinkingDots color="blue" className="mt-1" />
-                        </div>
-                    </div>
-                </div>
-            ) : (
-                <AllMessagesMixed
-                    messages={messages}
-                    bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
-                    viewMode={viewMode}
+        <div className="flex gap-2 h-full">
+            {/* Conversation Area - responsive width based on panel visibility */}
+            <div className={`flex flex-col h-full min-h-0 border-0 ${
+                showSlidingPanel ? 'lg:w-2/3 flex-1' : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`
+            }`}>
+                <Header
+                    title={actualTitle}
                     isCompleted={isCompleted}
-                    plan={getActivePlan.plan}
-                    workstreamStatus={getActivePlan.workstreamStatus}
+                    onClose={onClose}
+                    isModal={isModal}
+                    run={run}
+                    viewMode={viewMode}
+                    onViewModeChange={setViewMode}
                     showPlanPanel={showSlidingPanel}
+                    hasPlan={plans.length > 0}
                     onTogglePlanPanel={() => {
-                        console.log(
-                            "Toggle plan panel called, current state:",
-                            showSlidingPanel,
-                        );
                         setShowSlidingPanel(!showSlidingPanel);
-                    }}
-                    plans={plans}
-                    activePlanIndex={activePlanIndex}
-                    onChangePlan={(index) => setActivePlanIndex(index)}
-                    taskLabels={getActivePlan.plan.plan?.reduce((acc, task) => {
-                        if (task.id && task.goal) {
-                            acc.set(task.id.toString(), task.goal);
+                        // When opening the plan panel, mark that we've shown it
+                        if (!showSlidingPanel) {
+                            sessionStorage.setItem("plan-panel-shown", "true");
                         }
-                        return acc;
-                    }, new Map<string, string>())}
+                    }}
+                    onDownload={downloadConversation}
+                    onCopyRunId={copyRunId}
+                    resetWorkflow={resetWorkflow}
                 />
-            )}
 
-            {workflowStatus && (
-                workflowStatus !== "RUNNING" ? (
-                    <MessageBox
-                        status={workflowStatus === "COMPLETED" ? 'success' : 'done'}
-                        icon={null}
-                        className="flex-shrink-0 m-2"
-                    >
-                        This Workflow is {workflowStatus}
-                    </MessageBox>
-                ) : showInput && (
-                    <MessageInput
-                        value={inputValue}
-                        onChange={setInputValue}
-                        onSend={handleSendMessage}
-                        disabled={false}
-                        isSending={isSending}
+                {messages.length === 0 && !isCompleted ? (
+                    <div className="flex-1 flex flex-col items-center justify-center h-full text-center py-6">
+                        <div className="p-5 max-w-md border border-info rounded-lg shadow-sm">
+                            <div className="flex items-center space-x-3 mb-3">
+                                <PulsatingCircle size="sm" color="blue" />
+                                <div className="text-sm text-muted font-medium">
+                                    {ThinkingMessages[thinkingMessageIndex]}
+                                </div>
+                            </div>
+                            <div className="mt-4 flex justify-center">
+                                <AnimatedThinkingDots color="blue" className="mt-1" />
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <AllMessagesMixed
+                        messages={messages}
+                        bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
+                        viewMode={viewMode}
                         isCompleted={isCompleted}
-                        activeTaskCount={getActiveTaskCount()}
-                        placeholder={placeholder}
+                        plan={getActivePlan.plan}
+                        workstreamStatus={getActivePlan.workstreamStatus}
+                        showPlanPanel={showSlidingPanel}
+                        onTogglePlanPanel={() => {
+                            console.log(
+                                "Toggle plan panel called, current state:",
+                                showSlidingPanel,
+                            );
+                            setShowSlidingPanel(!showSlidingPanel);
+                        }}
+                        plans={plans}
+                        activePlanIndex={activePlanIndex}
+                        onChangePlan={(index) => setActivePlanIndex(index)}
+                        taskLabels={getActivePlan.plan.plan?.reduce((acc, task) => {
+                            if (task.id && task.goal) {
+                                acc.set(task.id.toString(), task.goal);
+                            }
+                            return acc;
+                        }, new Map<string, string>())}
                     />
-                ))}
+                )}
+
+                {workflowStatus && (
+                    workflowStatus !== "RUNNING" ? (
+                        <MessageBox
+                            status={workflowStatus === "COMPLETED" ? 'success' : 'done'}
+                            icon={null}
+                            className="flex-shrink-0 m-2"
+                        >
+                            This Workflow is {workflowStatus}
+                        </MessageBox>
+                    ) : showInput && (
+                        <MessageInput
+                            value={inputValue}
+                            onChange={setInputValue}
+                            onSend={handleSendMessage}
+                            disabled={false}
+                            isSending={isSending}
+                            isCompleted={isCompleted}
+                            activeTaskCount={getActiveTaskCount()}
+                            placeholder={placeholder}
+                        />
+                    ))}
+            </div>
+
+            {/* Plan Panel Area - only rendered when panel should be shown */}
+            {showSlidingPanel && (
+                <div className="h-full lg:w-1/3 border-l">
+                    <InlineSlidingPlanPanel
+                        plan={getActivePlan.plan}
+                        workstreamStatus={getActivePlan.workstreamStatus}
+                        isOpen={showSlidingPanel}
+                        onClose={() => setShowSlidingPanel(false)}
+                        plans={plans}
+                        activePlanIndex={activePlanIndex}
+                        onChangePlan={setActivePlanIndex}
+                    />
+                </div>
+            )}
         </div>
     );
 }

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -1,6 +1,5 @@
 import { AgentMessage, AgentMessageType, Plan } from "@vertesia/common";
 import React, { useEffect, useMemo, useState } from "react";
-import InlineSlidingPlanPanel from "./InlineSlidingPlanPanel";
 import MessageItem from "./MessageItem";
 import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from "./WorkstreamTabs";
 import { DONE_STATES, getWorkstreamId } from "./utils";
@@ -25,13 +24,6 @@ export default function AllMessagesMixed({
     bottomRef,
     viewMode = 'stacked',
     isCompleted = false,
-    plan = { plan: [] },
-    workstreamStatus = new Map(),
-    showPlanPanel = false,
-    onTogglePlanPanel = () => { },
-    plans = [],
-    activePlanIndex = 0,
-    onChangePlan = () => { },
 }: AllMessagesMixedProps) {
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const [activeWorkstream, setActiveWorkstream] = useState<string>("all");
@@ -129,22 +121,10 @@ export default function AllMessagesMixed({
             ref={containerRef}
             className="flex-1 min-h-0 h-full overflow-y-auto py-2 px-4 sm:px-6 lg:px-8 flex flex-col relative"
             data-testid="all-messages-mixed"
-            style={showPlanPanel ? { paddingRight: "350px" } : {}} // Only make space when panel is showing
         >
-            {/* Plan panel - respect showPlanPanel flag */}
-            <InlineSlidingPlanPanel
-                plan={plan}
-                workstreamStatus={workstreamStatus}
-                isOpen={showPlanPanel}
-                onClose={onTogglePlanPanel}
-                plans={plans}
-                activePlanIndex={activePlanIndex}
-                onChangePlan={onChangePlan}
-            />
-
 
             {/* Workstream tabs with completion indicators */}
-            <div className="sticky top-0 bg-white dark:bg-gray-900 z-10">
+            <div className="sticky top-0 z-10">
                 <WorkstreamTabs
                     workstreams={workstreams}
                     activeWorkstream={activeWorkstream}
@@ -156,7 +136,7 @@ export default function AllMessagesMixed({
 
             {displayMessages.length === 0 ? (
                 <div className="flex items-center justify-center h-full text-center py-8">
-                    <div className="flex items-center px-4 py-3 text-gray-500 dark:text-gray-400">
+                    <div className="flex items-center px-4 py-3 text-muted">
                         {activeWorkstream === "all"
                             ? "Waiting for agent response..."
                             : "No messages in this workstream yet..."}

package/src/features/agent/chat/ModernAgentOutput/Header.tsx

@@ -1,15 +1,7 @@
 import { AsyncExecutionResult } from "@vertesia/client";
 import { Button, Command, CommandGroup, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
-import {
-    Bot,
-    ClipboardList,
-    CopyIcon,
-    DownloadCloudIcon,
-    ExternalLink,
-    MoreVertical,
-    XIcon,
-} from "lucide-react";
+import { Bot, ClipboardList, CopyIcon, DownloadCloudIcon, ExternalLink, MoreVertical, XIcon } from "lucide-react";
 import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
 import { getConversationUrl } from "./utils";