refactor(components): enhance FindBlocksTool and MorphingTextAnimation

- Updated the `FindBlocksTool` to utilize the new `MorphingTextAnimation` for improved visual feedback.
- Refactored `MorphingTextAnimation` to accept a `text` prop, simplifying its usage and enhancing flexibility.
- Improved the rendering logic in `ChatMessagesContainer` to ensure proper key assignment for dynamic elements.

These changes aim to enhance the user experience by providing better visual transitions and cleaner component interactions.

.gitignore

@@ -179,4 +179,3 @@ autogpt_platform/backend/settings.py
 .test-contents
 .claude/settings.local.json
 /autogpt_platform/backend/logs
-.next

autogpt_platform/backend/backend/api/features/chat/response_model.py

@@ -113,7 +113,7 @@ class StreamToolOutputAvailable(StreamBaseResponse):
     type: ResponseType = ResponseType.TOOL_OUTPUT_AVAILABLE
     toolCallId: str = Field(..., description="Tool call ID this responds to")
     output: str | dict[str, Any] = Field(..., description="Tool execution output")
-    # Additional fields for internal use (not part of AI SDK spec but useful)
+    # Keep these for internal backend use
     toolName: str | None = Field(
         default=None, description="Name of the tool that was executed"
     )
@@ -121,6 +121,15 @@ class StreamToolOutputAvailable(StreamBaseResponse):
         default=True, description="Whether the tool execution succeeded"
     )
 
+    def to_sse(self) -> str:
+        """Convert to SSE format, excluding non-spec fields."""
+        import json
+        data = {
+            "type": self.type.value,
+            "toolCallId": self.toolCallId,
+            "output": self.output,
+        }
+        return f"data: {json.dumps(data)}\n\n"
 
 # ========== Other ==========
 

autogpt_platform/backend/backend/api/features/chat/service.py

@@ -330,6 +330,7 @@ async def stream_chat_completion(
     retry_count: int = 0,
     session: ChatSession | None = None,
     context: dict[str, str] | None = None,  # {url: str, content: str}
+    _continuation_message_id: str | None = None,  # Internal: reuse message ID for tool call continuations
 ) -> AsyncGenerator[StreamBaseResponse, None]:
     """Main entry point for streaming chat completions with database handling.
 
@@ -458,11 +459,15 @@ async def stream_chat_completion(
     # Generate unique IDs for AI SDK protocol
     import uuid as uuid_module
 
-    message_id = str(uuid_module.uuid4())
+    # Reuse message ID for continuations (tool call follow-ups) to avoid duplicate messages
+    is_continuation = _continuation_message_id is not None
+    message_id = _continuation_message_id or str(uuid_module.uuid4())
     text_block_id = str(uuid_module.uuid4())
 
-    # Yield message start
-    yield StreamStart(messageId=message_id)
+    # Only yield message start for the initial call, not for continuations
+    # This prevents the AI SDK from creating duplicate message objects
+    if not is_continuation:
+        yield StreamStart(messageId=message_id)
 
     try:
         async for chunk in _stream_chat_chunks(
@@ -690,6 +695,7 @@ async def stream_chat_completion(
             retry_count=retry_count + 1,
             session=session,
             context=context,
+            _continuation_message_id=message_id,  # Reuse message ID since start was already sent
         ):
             yield chunk
         return  # Exit after retry to avoid double-saving in finally block
@@ -759,6 +765,7 @@ async def stream_chat_completion(
             session=session,  # Pass session object to avoid Redis refetch
             context=context,
             tool_call_response=str(tool_response_messages),
+            _continuation_message_id=message_id,  # Reuse message ID to avoid duplicates
         ):
             yield chunk
 
@@ -1184,14 +1191,11 @@ async def _stream_chat_chunks(
                                     else recent_messages
                                 )
                                 # Ensure tool pairs stay intact in the reduced slice
-                                # Note: Search in messages_dict (full conversation) not recent_messages
-                                # (already sliced), so we can find assistants outside the current slice.
-                                # Calculate where reduced_recent starts in messages_dict
-                                reduced_start_in_dict = slice_start + max(
+                                reduced_slice_start = max(
                                     0, len(recent_messages) - keep_count
                                 )
                                 reduced_recent = _ensure_tool_pairs_intact(
-                                    reduced_recent, messages_dict, reduced_start_in_dict
+                                    reduced_recent, recent_messages, reduced_slice_start
                                 )
                                 if has_system_prompt:
                                     messages = [

autogpt_platform/backend/backend/api/features/chat/tools/agent_search.py

@@ -1,13 +1,10 @@
 """Shared agent search functionality for find_agent and find_library_agent tools."""
 
-import asyncio
 import logging
 from typing import Literal
 
 from backend.api.features.library import db as library_db
 from backend.api.features.store import db as store_db
-from backend.data import graph as graph_db
-from backend.data.graph import GraphModel
 from backend.util.exceptions import DatabaseError, NotFoundError
 
 from .models import (
@@ -17,7 +14,6 @@ from .models import (
     NoResultsResponse,
     ToolResponseBase,
 )
-from .utils import fetch_graph_from_store_slug
 
 logger = logging.getLogger(__name__)
 
@@ -58,28 +54,7 @@ async def search_agents(
         if source == "marketplace":
             logger.info(f"Searching marketplace for: {query}")
             results = await store_db.get_store_agents(search_query=query, page_size=5)
-
-            # Fetch all graphs in parallel for better performance
-            async def fetch_marketplace_graph(
-                creator: str, slug: str
-            ) -> GraphModel | None:
-                try:
-                    graph, _ = await fetch_graph_from_store_slug(creator, slug)
-                    return graph
-                except Exception as e:
-                    logger.warning(
-                        f"Failed to fetch input schema for {creator}/{slug}: {e}"
-                    )
-                    return None
-
-            graphs = await asyncio.gather(
-                *(
-                    fetch_marketplace_graph(agent.creator, agent.slug)
-                    for agent in results.agents
-                )
-            )
-
-            for agent, graph in zip(results.agents, graphs):
+            for agent in results.agents:
                 agents.append(
                     AgentInfo(
                         id=f"{agent.creator}/{agent.slug}",
@@ -92,7 +67,6 @@ async def search_agents(
                         rating=agent.rating,
                         runs=agent.runs,
                         is_featured=False,
-                        inputs=graph.input_schema if graph else None,
                     )
                 )
         else:  # library
@@ -102,32 +76,7 @@ async def search_agents(
                 search_term=query,
                 page_size=10,
             )
-
-            # Fetch all graphs in parallel for better performance
-            # (list_library_agents doesn't include nodes for performance)
-            async def fetch_library_graph(
-                graph_id: str, graph_version: int
-            ) -> GraphModel | None:
-                try:
-                    return await graph_db.get_graph(
-                        graph_id=graph_id,
-                        version=graph_version,
-                        user_id=user_id,
-                    )
-                except Exception as e:
-                    logger.warning(
-                        f"Failed to fetch input schema for graph {graph_id}: {e}"
-                    )
-                    return None
-
-            graphs = await asyncio.gather(
-                *(
-                    fetch_library_graph(agent.graph_id, agent.graph_version)
-                    for agent in results.agents
-                )
-            )
-
-            for agent, graph in zip(results.agents, graphs):
+            for agent in results.agents:
                 agents.append(
                     AgentInfo(
                         id=agent.id,
@@ -141,7 +90,6 @@ async def search_agents(
                         has_external_trigger=agent.has_external_trigger,
                         new_output=agent.new_output,
                         graph_id=agent.graph_id,
-                        inputs=graph.input_schema if graph else None,
                     )
                 )
         logger.info(f"Found {len(agents)} agents in {source}")

autogpt_platform/backend/backend/api/features/chat/tools/models.py

@@ -32,8 +32,6 @@ class ResponseType(str, Enum):
     OPERATION_STARTED = "operation_started"
     OPERATION_PENDING = "operation_pending"
     OPERATION_IN_PROGRESS = "operation_in_progress"
-    # Input validation
-    INPUT_VALIDATION_ERROR = "input_validation_error"
 
 
 # Base response model
@@ -64,10 +62,6 @@ class AgentInfo(BaseModel):
     has_external_trigger: bool | None = None
     new_output: bool | None = None
     graph_id: str | None = None
-    inputs: dict[str, Any] | None = Field(
-        default=None,
-        description="Input schema for the agent, including field names, types, and defaults",
-    )
 
 
 class AgentsFoundResponse(ToolResponseBase):
@@ -194,20 +188,6 @@ class ErrorResponse(ToolResponseBase):
     details: dict[str, Any] | None = None
 
 
-class InputValidationErrorResponse(ToolResponseBase):
-    """Response when run_agent receives unknown input fields."""
-
-    type: ResponseType = ResponseType.INPUT_VALIDATION_ERROR
-    unrecognized_fields: list[str] = Field(
-        description="List of input field names that were not recognized"
-    )
-    inputs: dict[str, Any] = Field(
-        description="The agent's valid input schema for reference"
-    )
-    graph_id: str | None = None
-    graph_version: int | None = None
-
-
 # Agent output models
 class ExecutionOutputInfo(BaseModel):
     """Summary of a single execution's outputs."""

autogpt_platform/backend/backend/api/features/chat/tools/run_agent.py

@@ -30,7 +30,6 @@ from .models import (
     ErrorResponse,
     ExecutionOptions,
     ExecutionStartedResponse,
-    InputValidationErrorResponse,
     SetupInfo,
     SetupRequirementsResponse,
     ToolResponseBase,
@@ -274,22 +273,6 @@ class RunAgentTool(BaseTool):
             input_properties = graph.input_schema.get("properties", {})
             required_fields = set(graph.input_schema.get("required", []))
             provided_inputs = set(params.inputs.keys())
-            valid_fields = set(input_properties.keys())
-
-            # Check for unknown input fields
-            unrecognized_fields = provided_inputs - valid_fields
-            if unrecognized_fields:
-                return InputValidationErrorResponse(
-                    message=(
-                        f"Unknown input field(s) provided: {', '.join(sorted(unrecognized_fields))}. "
-                        f"Agent was not executed. Please use the correct field names from the schema."
-                    ),
-                    session_id=session_id,
-                    unrecognized_fields=sorted(unrecognized_fields),
-                    inputs=graph.input_schema,
-                    graph_id=graph.id,
-                    graph_version=graph.version,
-                )
 
             # If agent has inputs but none were provided AND use_defaults is not set,
             # always show what's available first so user can decide

autogpt_platform/backend/backend/api/features/chat/tools/run_agent_test.py

@@ -402,42 +402,3 @@ async def test_run_agent_schedule_without_name(setup_test_data):
     # Should return error about missing schedule_name
     assert result_data.get("type") == "error"
     assert "schedule_name" in result_data["message"].lower()
-
-
-@pytest.mark.asyncio(loop_scope="session")
-async def test_run_agent_rejects_unknown_input_fields(setup_test_data):
-    """Test that run_agent returns input_validation_error for unknown input fields."""
-    user = setup_test_data["user"]
-    store_submission = setup_test_data["store_submission"]
-
-    tool = RunAgentTool()
-    agent_marketplace_id = f"{user.email.split('@')[0]}/{store_submission.slug}"
-    session = make_session(user_id=user.id)
-
-    # Execute with unknown input field names
-    response = await tool.execute(
-        user_id=user.id,
-        session_id=str(uuid.uuid4()),
-        tool_call_id=str(uuid.uuid4()),
-        username_agent_slug=agent_marketplace_id,
-        inputs={
-            "unknown_field": "some value",
-            "another_unknown": "another value",
-        },
-        session=session,
-    )
-
-    assert response is not None
-    assert hasattr(response, "output")
-    assert isinstance(response.output, str)
-    result_data = orjson.loads(response.output)
-
-    # Should return input_validation_error type with unrecognized fields
-    assert result_data.get("type") == "input_validation_error"
-    assert "unrecognized_fields" in result_data
-    assert set(result_data["unrecognized_fields"]) == {
-        "another_unknown",
-        "unknown_field",
-    }
-    assert "inputs" in result_data  # Contains the valid schema
-    assert "Agent was not executed" in result_data["message"]

autogpt_platform/backend/backend/api/features/chat/tools/run_block.py

@@ -4,8 +4,6 @@ import logging
 from collections import defaultdict
 from typing import Any
 
-from pydantic_core import PydanticUndefined
-
 from backend.api.features.chat.model import ChatSession
 from backend.data.block import get_block
 from backend.data.execution import ExecutionContext
@@ -75,22 +73,15 @@ class RunBlockTool(BaseTool):
         self,
         user_id: str,
         block: Any,
-        input_data: dict[str, Any] | None = None,
     ) -> tuple[dict[str, CredentialsMetaInput], list[CredentialsMetaInput]]:
         """
         Check if user has required credentials for a block.
 
-        Args:
-            user_id: User ID
-            block: Block to check credentials for
-            input_data: Input data for the block (used to determine provider via discriminator)
-
         Returns:
             tuple[matched_credentials, missing_credentials]
         """
         matched_credentials: dict[str, CredentialsMetaInput] = {}
         missing_credentials: list[CredentialsMetaInput] = []
-        input_data = input_data or {}
 
         # Get credential field info from block's input schema
         credentials_fields_info = block.input_schema.get_credentials_fields_info()
@@ -103,33 +94,14 @@ class RunBlockTool(BaseTool):
         available_creds = await creds_manager.store.get_all_creds(user_id)
 
         for field_name, field_info in credentials_fields_info.items():
-            effective_field_info = field_info
-            if field_info.discriminator and field_info.discriminator_mapping:
-                # Get discriminator from input, falling back to schema default
-                discriminator_value = input_data.get(field_info.discriminator)
-                if discriminator_value is None:
-                    field = block.input_schema.model_fields.get(
-                        field_info.discriminator
-                    )
-                    if field and field.default is not PydanticUndefined:
-                        discriminator_value = field.default
-
-                if (
-                    discriminator_value
-                    and discriminator_value in field_info.discriminator_mapping
-                ):
-                    effective_field_info = field_info.discriminate(discriminator_value)
-                    logger.debug(
-                        f"Discriminated provider for {field_name}: "
-                        f"{discriminator_value} -> {effective_field_info.provider}"
-                    )
-
+            # field_info.provider is a frozenset of acceptable providers
+            # field_info.supported_types is a frozenset of acceptable types
             matching_cred = next(
                 (
                     cred
                     for cred in available_creds
-                    if cred.provider in effective_field_info.provider
-                    and cred.type in effective_field_info.supported_types
+                    if cred.provider in field_info.provider
+                    and cred.type in field_info.supported_types
                 ),
                 None,
             )
@@ -143,8 +115,8 @@ class RunBlockTool(BaseTool):
                 )
             else:
                 # Create a placeholder for the missing credential
-                provider = next(iter(effective_field_info.provider), "unknown")
-                cred_type = next(iter(effective_field_info.supported_types), "api_key")
+                provider = next(iter(field_info.provider), "unknown")
+                cred_type = next(iter(field_info.supported_types), "api_key")
                 missing_credentials.append(
                     CredentialsMetaInput(
                         id=field_name,
@@ -212,9 +184,10 @@ class RunBlockTool(BaseTool):
 
         logger.info(f"Executing block {block.name} ({block_id}) for user {user_id}")
 
+        # Check credentials
         creds_manager = IntegrationCredentialsManager()
         matched_credentials, missing_credentials = await self._check_block_credentials(
-            user_id, block, input_data
+            user_id, block
         )
 
         if missing_credentials:

autogpt_platform/frontend/package.json

@@ -30,6 +30,7 @@
     "defaults"
   ],
   "dependencies": {
+    "@ai-sdk/react": "3.0.61",
     "@faker-js/faker": "10.0.0",
     "@hookform/resolvers": "5.2.2",
     "@next/third-parties": "15.4.6",
@@ -60,6 +61,10 @@
     "@rjsf/utils": "6.1.2",
     "@rjsf/validator-ajv8": "6.1.2",
     "@sentry/nextjs": "10.27.0",
+    "@streamdown/cjk": "1.0.1",
+    "@streamdown/code": "1.0.1",
+    "@streamdown/math": "1.0.1",
+    "@streamdown/mermaid": "1.0.1",
     "@supabase/ssr": "0.7.0",
     "@supabase/supabase-js": "2.78.0",
     "@tanstack/react-query": "5.90.6",
@@ -68,6 +73,7 @@
     "@vercel/analytics": "1.5.0",
     "@vercel/speed-insights": "1.2.0",
     "@xyflow/react": "12.9.2",
+    "ai": "6.0.59",
     "boring-avatars": "1.11.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -112,9 +118,11 @@
     "remark-math": "6.0.0",
     "shepherd.js": "14.5.1",
     "sonner": "2.0.7",
+    "streamdown": "2.1.0",
     "tailwind-merge": "2.6.0",
     "tailwind-scrollbar": "3.1.0",
     "tailwindcss-animate": "1.0.7",
+    "use-stick-to-bottom": "1.1.2",
     "uuid": "11.1.0",
     "vaul": "1.1.2",
     "zod": "3.25.76",

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/page.tsx

@@ -1,9 +1,10 @@
 "use client";
-import { getV1OnboardingState } from "@/app/api/__generated__/endpoints/onboarding/onboarding";
-import { getOnboardingStatus, resolveResponse } from "@/app/api/helpers";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { resolveResponse, getOnboardingStatus } from "@/app/api/helpers";
+import { getV1OnboardingState } from "@/app/api/__generated__/endpoints/onboarding/onboarding";
+import { getHomepageRoute } from "@/lib/constants";
 
 export default function OnboardingPage() {
   const router = useRouter();
@@ -12,10 +13,12 @@ export default function OnboardingPage() {
     async function redirectToStep() {
       try {
         // Check if onboarding is enabled (also gets chat flag for redirect)
-        const { shouldShowOnboarding } = await getOnboardingStatus();
+        const { shouldShowOnboarding, isChatEnabled } =
+          await getOnboardingStatus();
+        const homepageRoute = getHomepageRoute(isChatEnabled);
 
         if (!shouldShowOnboarding) {
-          router.replace("/");
+          router.replace(homepageRoute);
           return;
         }
 
@@ -23,7 +26,7 @@ export default function OnboardingPage() {
 
         // Handle completed onboarding
         if (onboarding.completedSteps.includes("GET_RESULTS")) {
-          router.replace("/");
+          router.replace(homepageRoute);
           return;
         }
 

autogpt_platform/frontend/src/app/(platform)/auth/callback/route.ts

@@ -1,8 +1,9 @@
-import { getOnboardingStatus } from "@/app/api/helpers";
-import BackendAPI from "@/lib/autogpt-server-api";
 import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
-import { revalidatePath } from "next/cache";
+import { getHomepageRoute } from "@/lib/constants";
+import BackendAPI from "@/lib/autogpt-server-api";
 import { NextResponse } from "next/server";
+import { revalidatePath } from "next/cache";
+import { getOnboardingStatus } from "@/app/api/helpers";
 
 // Handle the callback to complete the user session login
 export async function GET(request: Request) {
@@ -26,12 +27,13 @@ export async function GET(request: Request) {
         await api.createUser();
 
         // Get onboarding status from backend (includes chat flag evaluated for this user)
-        const { shouldShowOnboarding } = await getOnboardingStatus();
+        const { shouldShowOnboarding, isChatEnabled } =
+          await getOnboardingStatus();
         if (shouldShowOnboarding) {
           next = "/onboarding";
           revalidatePath("/onboarding", "layout");
         } else {
-          next = "/";
+          next = getHomepageRoute(isChatEnabled);
           revalidatePath(next, "layout");
         }
       } catch (createUserError) {

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -0,0 +1,106 @@
+import {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import { MessageSquareIcon } from "lucide-react";
+import { UIMessage, UIDataTypes, UITools, ToolUIPart } from "ai";
+import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
+
+interface ChatMessagesContainerProps {
+  messages: UIMessage<unknown, UIDataTypes, UITools>[];
+  status: string;
+  error: Error | undefined;
+  handleSubmit: (e: React.FormEvent) => void;
+  input: string;
+  setInput: (input: string) => void;
+}
+
+export const ChatMessagesContainer = ({
+  messages,
+  status,
+  error,
+  handleSubmit,
+  input,
+  setInput,
+}: ChatMessagesContainerProps) => {
+  return (
+    <div className="flex h-full flex-1 flex-col">
+      <Conversation className="flex-1">
+        <ConversationContent>
+          {messages.length === 0 ? (
+            <ConversationEmptyState
+              icon={<MessageSquareIcon className="size-12" />}
+              title="Start a conversation"
+              description="Type a message below to begin chatting"
+            />
+          ) : (
+            messages.map((message) => (
+              <Message from={message.role} key={message.id}>
+                <MessageContent>
+                  {message.parts.map((part, i) => {
+                    switch (part.type) {
+                      case "text":
+                        return (
+                          <MessageResponse key={`${message.id}-${i}`}>
+                            {part.text}
+                          </MessageResponse>
+                        );
+                      case "tool-find_block":
+                        return (
+                          <FindBlocksTool
+                            key={`${message.id}-${i}`}
+                            part={part as ToolUIPart}
+                          />
+                        );
+                      default:
+                        return null;
+                    }
+                  })}
+                </MessageContent>
+              </Message>
+            ))
+          )}
+          {status === "submitted" && (
+            <Message from="assistant">
+              <MessageContent>
+                <p className="text-zinc-500">Thinking...</p>
+              </MessageContent>
+            </Message>
+          )}
+          {error && (
+            <div className="rounded-lg bg-red-50 p-3 text-red-600">
+              Error: {error.message}
+            </div>
+          )}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+
+      <form onSubmit={handleSubmit} className="border-t p-4">
+        <div className="mx-auto flex max-w-2xl gap-2">
+          <input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            disabled={status !== "ready"}
+            placeholder="Say something..."
+            className="flex-1 rounded-md border border-zinc-300 px-4 py-2 focus:border-zinc-500 focus:outline-none"
+          />
+          <button
+            type="submit"
+            disabled={status !== "ready" || !input.trim()}
+            className="rounded-md bg-zinc-900 px-4 py-2 text-white transition-colors hover:bg-zinc-800 disabled:opacity-50"
+          >
+            Send
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatSidebar/ChatSidebar.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { postV2CreateSession } from "@/app/api/__generated__/endpoints/chat/chat";
+import { parseAsString, useQueryState } from "nuqs";
+
+export const ChatSidebar = ({
+  isCreating,
+  setIsCreating,
+}: {
+  isCreating: boolean;
+  setIsCreating: (isCreating: boolean) => void;
+}) => {
+  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+
+  async function createSession(): Promise<string | null> {
+    setIsCreating(true);
+    try {
+      const response = await postV2CreateSession({
+        body: JSON.stringify({}),
+      });
+      if (response.status === 200 && response.data?.id) {
+        return response.data.id;
+      }
+      return null;
+    } catch (error) {
+      return null;
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  async function handleNewSession() {
+    const newSessionId = await createSession();
+    if (newSessionId) {
+      setSessionId(newSessionId);
+    }
+  }
+
+  return (
+    <div className="flex w-64 flex-col border-r border-zinc-200 bg-zinc-50 p-4">
+      <button
+        onClick={handleNewSession}
+        disabled={isCreating}
+        className="rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+      >
+        {isCreating ? "Creating..." : "New Session"}
+      </button>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/EmptySession/EmptySession.tsx

@@ -0,0 +1,23 @@
+interface Props {
+  isCreating: boolean;
+  onCreateSession: (e: React.FormEvent) => void;
+}
+
+export function EmptySession({ isCreating, onCreateSession }: Props) {
+  return (
+    <div className="flex h-full flex-1 flex-col items-center justify-center bg-zinc-100 p-4">
+      <h2 className="mb-4 text-xl font-semibold text-zinc-700">
+        Start a new conversation
+      </h2>
+      <form onSubmit={onCreateSession} className="w-full max-w-md">
+        <button
+          type="submit"
+          disabled={isCreating}
+          className="w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+        >
+          {isCreating ? "Creating..." : "Start New Chat"}
+        </button>
+      </form>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MorphingTextAnimation/MorphingTextAnimation.tsx

@@ -0,0 +1,52 @@
+import { AnimatePresence, motion } from "framer-motion";
+
+interface Props {
+  text: string;
+}
+
+export function MorphingTextAnimation({ text }: Props) {
+  const letters = text.split("");
+
+  return (
+    <div>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <motion.div key={text} className="whitespace-nowrap">
+          <motion.span className="inline-flex overflow-hidden">
+            {letters.map((char, index) => (
+              <motion.span
+                key={`${text}-${index}`}
+                initial={{
+                  opacity: 0,
+                  y: 8,
+                  rotateX: "80deg",
+                  filter: "blur(6px)",
+                }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  rotateX: "0deg",
+                  filter: "blur(0px)",
+                }}
+                exit={{
+                  opacity: 0,
+                  y: -8,
+                  rotateX: "-80deg",
+                  filter: "blur(6px)",
+                }}
+                style={{ willChange: "transform" }}
+                transition={{
+                  delay: 0.015 * index,
+                  type: "spring",
+                  bounce: 0.5,
+                }}
+                className="inline-block"
+              >
+                {char === " " ? "\u00A0" : char}
+              </motion.span>
+            ))}
+          </motion.span>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState, useMemo } from "react";
+import { parseAsString, useQueryState } from "nuqs";
+import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
+import { EmptySession } from "./components/EmptySession/EmptySession";
+import { ChatMessagesContainer } from "./components/ChatMessagesContainer/ChatMessagesContainer";
+import { postV2CreateSession } from "@/app/api/__generated__/endpoints/chat/chat";
+
+export default function Page() {
+  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+  const [isCreating, setIsCreating] = useState(false);
+  const [input, setInput] = useState("");
+
+  const transport = useMemo(() => {
+    if (!sessionId) return null;
+    return new DefaultChatTransport({
+      api: `/api/chat/sessions/${sessionId}/stream`,
+      prepareSendMessagesRequest: ({ messages }) => {
+        const last = messages[messages.length - 1];
+        return {
+          body: {
+            message: last.parts
+              ?.map((p) => (p.type === "text" ? p.text : ""))
+              .join(""),
+            is_user_message: last.role === "user",
+            context: null,
+          },
+        };
+      },
+    });
+  }, [sessionId]);
+
+  const { messages, sendMessage, status, error } = useChat({
+    id: sessionId ?? undefined,
+    transport: transport ?? undefined,
+  });
+
+  async function createSession(e: React.FormEvent) {
+    e.preventDefault();
+    if (isCreating) return;
+    setIsCreating(true);
+    try {
+      const response = await postV2CreateSession({
+        body: JSON.stringify({}),
+      });
+      if (response.status === 200 && response.data?.id) {
+        setSessionId(response.data.id);
+      }
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  function handleMessageSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!input.trim() || !sessionId) return;
+
+    sendMessage({ text: input });
+    setInput("");
+  }
+
+  return (
+    <div className="flex h-full">
+      <ChatSidebar isCreating={isCreating} setIsCreating={setIsCreating} />
+
+      {sessionId ? (
+        <ChatMessagesContainer
+          messages={messages}
+          status={status}
+          error={error}
+          handleSubmit={handleMessageSubmit}
+          input={input}
+          setInput={setInput}
+        />
+      ) : (
+        <EmptySession isCreating={isCreating} onCreateSession={createSession} />
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/FindBlocks.tsx

@@ -0,0 +1,43 @@
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { BlockInfo } from "@/app/api/__generated__/models/blockInfo";
+import { ToolUIPart } from "ai";
+import { getAnimationText, StateIcon } from "./helpers";
+
+export interface FindBlockInput {
+  query: string;
+}
+
+export interface FindBlockOutput {
+  type: "block_list";
+  message: string;
+  session_id: string;
+  blocks: BlockInfo[];
+  count: number;
+  query: string;
+  usage_hint: string;
+}
+
+export interface FindBlockToolPart {
+  type: string;
+  toolName?: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: FindBlockInput | unknown;
+  output?: string | FindBlockOutput | unknown;
+  title?: string;
+}
+
+interface Props {
+  part: FindBlockToolPart;
+}
+
+export function FindBlocksTool({ part }: Props) {
+  const text = getAnimationText(part);
+
+  return (
+    <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
+      <StateIcon state={part.state} />
+      <MorphingTextAnimation text={text} />
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindBlocks/helpers.tsx

@@ -0,0 +1,57 @@
+import { ToolUIPart } from "ai";
+import { FindBlockInput, FindBlockOutput, FindBlockToolPart } from "./FindBlocks";
+import { CheckCircleIcon, CircleNotchIcon, XCircleIcon } from "@phosphor-icons/react";
+
+export const getAnimationText = (part: FindBlockToolPart): string => {
+    switch (part.state) {
+      case "input-streaming":
+        return "Searching blocks for you";
+  
+      case "input-available": {
+        const query = (part.input as FindBlockInput).query;
+        return `Finding "${query}" blocks`;
+      }
+  
+      case "output-available": {
+        const parsed = JSON.parse(part.output as string) as FindBlockOutput;
+        if (parsed) {
+          return `Found ${parsed.count} "${(part.input as FindBlockInput).query}" blocks`;
+        }
+        return "Found blocks";
+      }
+  
+      case "output-error":
+        return "Error finding blocks";
+  
+      default:
+        return "Processing";
+    }
+  }
+  
+  export const StateIcon = ({ state }: { state: ToolUIPart["state"] }) => {
+    switch (state) {
+      case "input-streaming":
+      case "input-available":
+        return (
+          <CircleNotchIcon
+            className="h-4 w-4 animate-spin text-muted-foreground"
+            weight="bold"
+          />
+        );
+      case "output-available":
+        return (
+          <CheckCircleIcon
+            className="h-4 w-4 text-green-500"
+          />
+        );
+      case "output-error":
+        return (
+          <XCircleIcon
+            className="h-4 w-4 text-red-500"
+          />
+        );
+      default:
+        return null;
+    }
+  }
+  

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/SessionsList/useSessionsPagination.ts

@@ -73,9 +73,9 @@ export function useSessionsPagination({ enabled }: UseSessionsPaginationArgs) {
   };
 
   const reset = () => {
-    // Only reset the offset - keep existing sessions visible during refetch
-    // The effect will replace sessions when new data arrives at offset 0
     setOffset(0);
+    setAccumulatedSessions([]);
+    setTotalCount(null);
   };
 
   return {

autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx

@@ -1,13 +1,6 @@
-"use client";
-import { FeatureFlagPage } from "@/services/feature-flags/FeatureFlagPage";
-import { Flag } from "@/services/feature-flags/use-get-flag";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { CopilotShell } from "./components/CopilotShell/CopilotShell";
 
 export default function CopilotLayout({ children }: { children: ReactNode }) {
-  return (
-    <FeatureFlagPage flag={Flag.CHAT} whenDisabled="/library">
-      <CopilotShell>{children}</CopilotShell>
-    </FeatureFlagPage>
-  );
+  return <CopilotShell>{children}</CopilotShell>;
 }

autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx

@@ -14,8 +14,14 @@ export default function CopilotPage() {
   const isInterruptModalOpen = useCopilotStore((s) => s.isInterruptModalOpen);
   const confirmInterrupt = useCopilotStore((s) => s.confirmInterrupt);
   const cancelInterrupt = useCopilotStore((s) => s.cancelInterrupt);
-  const { greetingName, quickActions, isLoading, hasSession, initialPrompt } =
-    state;
+  const {
+    greetingName,
+    quickActions,
+    isLoading,
+    hasSession,
+    initialPrompt,
+    isReady,
+  } = state;
   const {
     handleQuickAction,
     startChatWithPrompt,
@@ -23,6 +29,8 @@ export default function CopilotPage() {
     handleStreamingChange,
   } = handlers;
 
+  if (!isReady) return null;
+
   if (hasSession) {
     return (
       <div className="flex h-full flex-col">

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts

@@ -3,11 +3,18 @@ import {
   postV2CreateSession,
 } from "@/app/api/__generated__/endpoints/chat/chat";
 import { useToast } from "@/components/molecules/Toast/use-toast";
+import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
+import {
+  Flag,
+  type FlagValues,
+  useGetFlag,
+} from "@/services/feature-flags/use-get-flag";
 import { SessionKey, sessionStorage } from "@/services/storage/session-storage";
 import * as Sentry from "@sentry/nextjs";
 import { useQueryClient } from "@tanstack/react-query";
+import { useFlags } from "launchdarkly-react-client-sdk";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useCopilotStore } from "./copilot-page-store";
@@ -26,6 +33,22 @@ export function useCopilotPage() {
   const isCreating = useCopilotStore((s) => s.isCreatingSession);
   const setIsCreating = useCopilotStore((s) => s.setIsCreatingSession);
 
+  // Complete VISIT_COPILOT onboarding step to grant $5 welcome bonus
+  useEffect(() => {
+    if (isLoggedIn) {
+      completeStep("VISIT_COPILOT");
+    }
+  }, [completeStep, isLoggedIn]);
+
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const flags = useFlags<FlagValues>();
+  const homepageRoute = getHomepageRoute(isChatEnabled);
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+  const isFlagReady =
+    !isLaunchDarklyConfigured || flags[Flag.CHAT] !== undefined;
+
   const greetingName = getGreetingName(user);
   const quickActions = getQuickActions();
 
@@ -35,8 +58,11 @@ export function useCopilotPage() {
     : undefined;
 
   useEffect(() => {
-    if (isLoggedIn) completeStep("VISIT_COPILOT");
-  }, [completeStep, isLoggedIn]);
+    if (!isFlagReady) return;
+    if (isChatEnabled === false) {
+      router.replace(homepageRoute);
+    }
+  }, [homepageRoute, isChatEnabled, isFlagReady, router]);
 
   async function startChatWithPrompt(prompt: string) {
     if (!prompt?.trim()) return;
@@ -90,6 +116,7 @@ export function useCopilotPage() {
       isLoading: isUserLoading,
       hasSession,
       initialPrompt,
+      isReady: isFlagReady && isChatEnabled !== false && isLoggedIn,
     },
     handlers: {
       handleQuickAction,

autogpt_platform/frontend/src/app/(platform)/error/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { getHomepageRoute } from "@/lib/constants";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { useSearchParams } from "next/navigation";
 import { Suspense } from "react";
 import { getErrorDetails } from "./helpers";
@@ -9,6 +11,8 @@ function ErrorPageContent() {
   const searchParams = useSearchParams();
   const errorMessage = searchParams.get("message");
   const errorDetails = getErrorDetails(errorMessage);
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   function handleRetry() {
     // Auth-related errors should redirect to login
@@ -26,7 +30,7 @@ function ErrorPageContent() {
       }, 2000);
     } else {
       // For server/network errors, go to home
-      window.location.href = "/";
+      window.location.href = homepageRoute;
     }
   }
 

autogpt_platform/frontend/src/app/(platform)/login/actions.ts

@@ -1,5 +1,6 @@
 "use server";
 
+import { getHomepageRoute } from "@/lib/constants";
 import BackendAPI from "@/lib/autogpt-server-api";
 import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
 import { loginFormSchema } from "@/types/auth";
@@ -37,8 +38,10 @@ export async function login(email: string, password: string) {
     await api.createUser();
 
     // Get onboarding status from backend (includes chat flag evaluated for this user)
-    const { shouldShowOnboarding } = await getOnboardingStatus();
-    const next = shouldShowOnboarding ? "/onboarding" : "/";
+    const { shouldShowOnboarding, isChatEnabled } = await getOnboardingStatus();
+    const next = shouldShowOnboarding
+      ? "/onboarding"
+      : getHomepageRoute(isChatEnabled);
 
     return {
       success: true,

autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts

@@ -1,6 +1,8 @@
 import { useToast } from "@/components/molecules/Toast/use-toast";
+import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { environment } from "@/services/environment";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { loginFormSchema, LoginProvider } from "@/types/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -20,15 +22,17 @@ export function useLoginPage() {
   const [isGoogleLoading, setIsGoogleLoading] = useState(false);
   const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
   const isCloudEnv = environment.isCloud();
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   // Get redirect destination from 'next' query parameter
   const nextUrl = searchParams.get("next");
 
   useEffect(() => {
     if (isLoggedIn && !isLoggingIn) {
-      router.push(nextUrl || "/");
+      router.push(nextUrl || homepageRoute);
     }
-  }, [isLoggedIn, isLoggingIn, nextUrl, router]);
+  }, [homepageRoute, isLoggedIn, isLoggingIn, nextUrl, router]);
 
   const form = useForm<z.infer<typeof loginFormSchema>>({
     resolver: zodResolver(loginFormSchema),
@@ -94,7 +98,7 @@ export function useLoginPage() {
       }
 
       // Prefer URL's next parameter, then use backend-determined route
-      router.replace(nextUrl || result.next || "/");
+      router.replace(nextUrl || result.next || homepageRoute);
     } catch (error) {
       toast({
         title:

autogpt_platform/frontend/src/app/(platform)/signup/actions.ts

@@ -1,5 +1,6 @@
 "use server";
 
+import { getHomepageRoute } from "@/lib/constants";
 import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
 import { signupFormSchema } from "@/types/auth";
 import * as Sentry from "@sentry/nextjs";
@@ -58,8 +59,10 @@ export async function signup(
     }
 
     // Get onboarding status from backend (includes chat flag evaluated for this user)
-    const { shouldShowOnboarding } = await getOnboardingStatus();
-    const next = shouldShowOnboarding ? "/onboarding" : "/";
+    const { shouldShowOnboarding, isChatEnabled } = await getOnboardingStatus();
+    const next = shouldShowOnboarding
+      ? "/onboarding"
+      : getHomepageRoute(isChatEnabled);
 
     return { success: true, next };
   } catch (err) {

autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts

@@ -1,6 +1,8 @@
 import { useToast } from "@/components/molecules/Toast/use-toast";
+import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { environment } from "@/services/environment";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { LoginProvider, signupFormSchema } from "@/types/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -20,15 +22,17 @@ export function useSignupPage() {
   const [isGoogleLoading, setIsGoogleLoading] = useState(false);
   const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
   const isCloudEnv = environment.isCloud();
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   // Get redirect destination from 'next' query parameter
   const nextUrl = searchParams.get("next");
 
   useEffect(() => {
     if (isLoggedIn && !isSigningUp) {
-      router.push(nextUrl || "/");
+      router.push(nextUrl || homepageRoute);
     }
-  }, [isLoggedIn, isSigningUp, nextUrl, router]);
+  }, [homepageRoute, isLoggedIn, isSigningUp, nextUrl, router]);
 
   const form = useForm<z.infer<typeof signupFormSchema>>({
     resolver: zodResolver(signupFormSchema),
@@ -129,7 +133,7 @@ export function useSignupPage() {
       }
 
       // Prefer the URL's next parameter, then result.next (for onboarding), then default
-      const redirectTo = nextUrl || result.next || "/";
+      const redirectTo = nextUrl || result.next || homepageRoute;
       router.replace(redirectTo);
     } catch (error) {
       setIsLoading(false);

autogpt_platform/frontend/src/app/api/helpers.ts

@@ -181,5 +181,6 @@ export async function getOnboardingStatus() {
   const isCompleted = onboarding.completedSteps.includes("CONGRATS");
   return {
     shouldShowOnboarding: status.is_onboarding_enabled && !isCompleted,
+    isChatEnabled: status.is_chat_enabled,
   };
 }

autogpt_platform/frontend/src/app/globals.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@source "../node_modules/streamdown/dist/*.js";
 
 @layer base {
   :root {

autogpt_platform/frontend/src/app/page.tsx

@@ -1,15 +1,27 @@
 "use client";
 
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { getHomepageRoute } from "@/lib/constants";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export default function Page() {
+  const isChatEnabled = useGetFlag(Flag.CHAT);
   const router = useRouter();
+  const homepageRoute = getHomepageRoute(isChatEnabled);
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+  const isFlagReady =
+    !isLaunchDarklyConfigured || typeof isChatEnabled === "boolean";
 
-  useEffect(() => {
-    router.replace("/copilot");
-  }, [router]);
+  useEffect(
+    function redirectToHomepage() {
+      if (!isFlagReady) return;
+      router.replace(homepageRoute);
+    },
+    [homepageRoute, isFlagReady, router],
+  );
 
-  return <LoadingSpinner size="large" cover />;
+  return null;
 }

autogpt_platform/frontend/src/components/ai-elements/conversation.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ArrowDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn("relative flex-1 overflow-y-hidden", className)}
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<
+  typeof StickToBottom.Content
+>;
+
+export const ConversationContent = ({
+  className,
+  ...props
+}: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn("flex flex-col gap-8 p-4", className)}
+    {...props}
+  />
+);
+
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+};
+
+export const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className={cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && (
+          <div className="text-neutral-500 dark:text-neutral-400">{icon}</div>
+        )}
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium">{title}</h3>
+          {description && (
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              {description}
+            </p>
+          )}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return (
+    !isAtBottom && (
+      <Button
+        className={cn(
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-white dark:dark:bg-neutral-950 dark:dark:hover:bg-neutral-800 dark:hover:bg-neutral-100",
+          className,
+        )}
+        onClick={handleScrollToBottom}
+        size="icon"
+        type="button"
+        variant="outline"
+        {...props}
+      >
+        <ArrowDownIcon className="size-4" />
+      </Button>
+    )
+  );
+};

autogpt_platform/frontend/src/components/ai-elements/message.tsx

@@ -0,0 +1,334 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import type { UIMessage } from "ai";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageContent = ({
+  children,
+  className,
+  ...props
+}: MessageContentProps) => (
+  <div
+    className={cn(
+      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-neutral-100 group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-neutral-950 dark:group-[.is-user]:bg-neutral-800 dark:group-[.is-user]:text-neutral-50",
+      "group-[.is-assistant]:text-neutral-950 dark:group-[.is-assistant]:text-neutral-50",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({
+  className,
+  children,
+  ...props
+}: MessageActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type MessageActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+};
+
+export const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}: MessageActionProps) => {
+  const button = (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+interface MessageBranchContextType {
+  currentBranch: number;
+  totalBranches: number;
+  goToPrevious: () => void;
+  goToNext: () => void;
+  branches: ReactElement[];
+  setBranches: (branches: ReactElement[]) => void;
+}
+
+const MessageBranchContext = createContext<MessageBranchContextType | null>(
+  null,
+);
+
+const useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+
+  if (!context) {
+    throw new Error("MessageBranch components must be used within");
+  }
+
+  return context;
+};
+
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+  defaultBranch?: number;
+  onBranchChange?: (branchIndex: number) => void;
+};
+
+export const MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}: MessageBranchProps) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
+
+  const handleBranchChange = (newBranch: number) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+
+  const goToPrevious = () => {
+    const newBranch =
+      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+
+  const goToNext = () => {
+    const newBranch =
+      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+
+  const contextValue: MessageBranchContextType = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches,
+  };
+
+  return (
+    <MessageBranchContext.Provider value={contextValue}>
+      <div
+        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
+        {...props}
+      />
+    </MessageBranchContext.Provider>
+  );
+};
+
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageBranchContent = ({
+  children,
+  ...props
+}: MessageBranchContentProps) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+
+  // Use useEffect to update branches when they change
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+
+  return childrenArray.map((branch, index) => (
+    <div
+      className={cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden",
+      )}
+      key={branch.key}
+      {...props}
+    >
+      {branch}
+    </div>
+  ));
+};
+
+export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+
+export const MessageBranchSelector = ({
+  className,
+  from,
+  ...props
+}: MessageBranchSelectorProps) => {
+  const { totalBranches } = useMessageBranch();
+
+  // Don't render if there's only one branch
+  if (totalBranches <= 1) {
+    return null;
+  }
+
+  return (
+    <ButtonGroup
+      className="[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md"
+      orientation="horizontal"
+      {...props}
+    />
+  );
+};
+
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+
+export const MessageBranchPrevious = ({
+  children,
+  ...props
+}: MessageBranchPreviousProps) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Previous branch"
+      disabled={totalBranches <= 1}
+      onClick={goToPrevious}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronLeftIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+
+export const MessageBranchNext = ({
+  children,
+  ...props
+}: MessageBranchNextProps) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Next branch"
+      disabled={totalBranches <= 1}
+      onClick={goToNext}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+
+export const MessageBranchPage = ({
+  className,
+  ...props
+}: MessageBranchPageProps) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+
+  return (
+    <ButtonGroupText
+      className={cn(
+        "border-none bg-transparent text-neutral-500 shadow-none dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    >
+      {currentBranch + 1} of {totalBranches}
+    </ButtonGroupText>
+  );
+};
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className,
+      )}
+      plugins={{ code, mermaid, math, cjk }}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({
+  className,
+  children,
+  ...props
+}: MessageToolbarProps) => (
+  <div
+    className={cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);

autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarLink.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { IconLaptop } from "@/components/__legacy__/ui/icons";
+import { getHomepageRoute } from "@/lib/constants";
 import { cn } from "@/lib/utils";
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import { ListChecksIcon } from "@phosphor-icons/react/dist/ssr";
@@ -23,11 +24,11 @@ interface Props {
 export function NavbarLink({ name, href }: Props) {
   const pathname = usePathname();
   const isChatEnabled = useGetFlag(Flag.CHAT);
-  const expectedHomeRoute = isChatEnabled ? "/copilot" : "/library";
+  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   const isActive =
-    href === expectedHomeRoute
-      ? pathname === "/" || pathname.startsWith(expectedHomeRoute)
+    href === homepageRoute
+      ? pathname === "/" || pathname.startsWith(homepageRoute)
       : pathname.includes(href);
 
   return (

autogpt_platform/frontend/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "shadow-xs flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium dark:border-neutral-800 dark:bg-neutral-800 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

autogpt_platform/frontend/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
+        destructive:
+          "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        secondary:
+          "bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+        ghost:
+          "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

autogpt_platform/frontend/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-neutral-200 dark:bg-neutral-800",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

autogpt_platform/frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-neutral-50 dark:text-neutral-900",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

autogpt_platform/frontend/src/hooks/useAgentGraph.tsx

@@ -66,7 +66,7 @@ export default function useAgentGraph(
   >(null);
   const [xyNodes, setXYNodes] = useState<CustomNode[]>([]);
   const [xyEdges, setXYEdges] = useState<CustomEdge[]>([]);
-  const betaBlocks = useGetFlag(Flag.BETA_BLOCKS) as string[];
+  const betaBlocks = useGetFlag(Flag.BETA_BLOCKS);
 
   // Filter blocks based on beta flags
   const availableBlocks = useMemo(() => {

autogpt_platform/frontend/src/lib/constants.ts

@@ -11,3 +11,10 @@ export const API_KEY_HEADER_NAME = "X-API-Key";
 
 // Layout
 export const NAVBAR_HEIGHT_PX = 60;
+
+// Routes
+export function getHomepageRoute(isChatEnabled?: boolean | null): string {
+  if (isChatEnabled === true) return "/copilot";
+  if (isChatEnabled === false) return "/library";
+  return "/";
+}

autogpt_platform/frontend/src/lib/supabase/helpers.ts

@@ -1,3 +1,4 @@
+import { getHomepageRoute } from "@/lib/constants";
 import { environment } from "@/services/environment";
 import { Key, storage } from "@/services/storage/local-storage";
 import { type CookieOptions } from "@supabase/ssr";
@@ -70,7 +71,7 @@ export function getRedirectPath(
   }
 
   if (isAdminPage(path) && userRole !== "admin") {
-    return "/";
+    return getHomepageRoute();
   }
 
   return null;

autogpt_platform/frontend/src/lib/supabase/middleware.ts

@@ -1,3 +1,4 @@
+import { getHomepageRoute } from "@/lib/constants";
 import { environment } from "@/services/environment";
 import { createServerClient } from "@supabase/ssr";
 import { NextResponse, type NextRequest } from "next/server";
@@ -66,7 +67,7 @@ export async function updateSession(request: NextRequest) {
 
     // 2. Check if user is authenticated but lacks admin role when accessing admin pages
     if (user && userRole !== "admin" && isAdminPage(pathname)) {
-      url.pathname = "/";
+      url.pathname = getHomepageRoute();
       return NextResponse.redirect(url);
     }
 

autogpt_platform/frontend/src/providers/onboarding/onboarding-provider.tsx

@@ -23,7 +23,9 @@ import {
   WebSocketNotification,
 } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { getHomepageRoute } from "@/lib/constants";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
@@ -102,6 +104,8 @@ export default function OnboardingProvider({
   const pathname = usePathname();
   const router = useRouter();
   const { isLoggedIn } = useSupabase();
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const homepageRoute = getHomepageRoute(isChatEnabled);
 
   useOnboardingTimezoneDetection();
 
@@ -146,7 +150,7 @@ export default function OnboardingProvider({
         if (isOnOnboardingRoute) {
           const enabled = await resolveResponse(getV1IsOnboardingEnabled());
           if (!enabled) {
-            router.push("/");
+            router.push(homepageRoute);
             return;
           }
         }
@@ -158,7 +162,7 @@ export default function OnboardingProvider({
           isOnOnboardingRoute &&
           shouldRedirectFromOnboarding(onboarding.completedSteps, pathname)
         ) {
-          router.push("/");
+          router.push(homepageRoute);
         }
       } catch (error) {
         console.error("Failed to initialize onboarding:", error);
@@ -173,7 +177,7 @@ export default function OnboardingProvider({
     }
 
     initializeOnboarding();
-  }, [api, isOnOnboardingRoute, router, isLoggedIn, pathname]);
+  }, [api, homepageRoute, isOnOnboardingRoute, router, isLoggedIn, pathname]);
 
   const handleOnboardingNotification = useCallback(
     (notification: WebSocketNotification) => {

autogpt_platform/frontend/src/services/environment/index.ts

@@ -83,10 +83,6 @@ function getPostHogCredentials() {
   };
 }
 
-function getLaunchDarklyClientId() {
-  return process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
-}
-
 function isProductionBuild() {
   return process.env.NODE_ENV === "production";
 }
@@ -124,10 +120,7 @@ function isVercelPreview() {
 }
 
 function areFeatureFlagsEnabled() {
-  return (
-    process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true" &&
-    Boolean(process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID)
-  );
+  return process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "enabled";
 }
 
 function isPostHogEnabled() {
@@ -150,7 +143,6 @@ export const environment = {
   getSupabaseAnonKey,
   getPreviewStealingDev,
   getPostHogCredentials,
-  getLaunchDarklyClientId,
   // Assertions
   isServerSide,
   isClientSide,

autogpt_platform/frontend/src/services/feature-flags/FeatureFlagPage.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { useLDClient } from "launchdarkly-react-client-sdk";
-import { useRouter } from "next/navigation";
-import { ReactNode, useEffect, useState } from "react";
-import { environment } from "../environment";
-import { Flag, useGetFlag } from "./use-get-flag";
-
-interface FeatureFlagRedirectProps {
-  flag: Flag;
-  whenDisabled: string;
-  children: ReactNode;
-}
-
-export function FeatureFlagPage({
-  flag,
-  whenDisabled,
-  children,
-}: FeatureFlagRedirectProps) {
-  const [isLoading, setIsLoading] = useState(true);
-  const router = useRouter();
-  const flagValue = useGetFlag(flag);
-  const ldClient = useLDClient();
-  const ldEnabled = environment.areFeatureFlagsEnabled();
-  const ldReady = Boolean(ldClient);
-  const flagEnabled = Boolean(flagValue);
-
-  useEffect(() => {
-    const initialize = async () => {
-      if (!ldEnabled) {
-        router.replace(whenDisabled);
-        setIsLoading(false);
-        return;
-      }
-
-      // Wait for LaunchDarkly to initialize when enabled to prevent race conditions
-      if (ldEnabled && !ldReady) return;
-
-      try {
-        await ldClient?.waitForInitialization();
-        if (!flagEnabled) router.replace(whenDisabled);
-      } catch (error) {
-        console.error(error);
-        router.replace(whenDisabled);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    initialize();
-  }, [ldReady, flagEnabled]);
-
-  return isLoading || !flagEnabled ? (
-    <LoadingSpinner size="large" cover />
-  ) : (
-    <>{children}</>
-  );
-}

autogpt_platform/frontend/src/services/feature-flags/FeatureFlagRedirect.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { useLDClient } from "launchdarkly-react-client-sdk";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { environment } from "../environment";
-import { Flag, useGetFlag } from "./use-get-flag";
-
-interface FeatureFlagRedirectProps {
-  flag: Flag;
-  whenEnabled: string;
-  whenDisabled: string;
-}
-
-export function FeatureFlagRedirect({
-  flag,
-  whenEnabled,
-  whenDisabled,
-}: FeatureFlagRedirectProps) {
-  const router = useRouter();
-  const flagValue = useGetFlag(flag);
-  const ldEnabled = environment.areFeatureFlagsEnabled();
-  const ldClient = useLDClient();
-  const ldReady = Boolean(ldClient);
-  const flagEnabled = Boolean(flagValue);
-
-  useEffect(() => {
-    const initialize = async () => {
-      if (!ldEnabled) {
-        router.replace(whenDisabled);
-        return;
-      }
-
-      // Wait for LaunchDarkly to initialize when enabled to prevent race conditions
-      if (ldEnabled && !ldReady) return;
-
-      try {
-        await ldClient?.waitForInitialization();
-        router.replace(flagEnabled ? whenEnabled : whenDisabled);
-      } catch (error) {
-        console.error(error);
-        router.replace(whenDisabled);
-      }
-    };
-
-    initialize();
-  }, [ldReady, flagEnabled]);
-
-  return <LoadingSpinner size="large" cover />;
-}

autogpt_platform/frontend/src/services/feature-flags/feature-flag-provider.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import * as Sentry from "@sentry/nextjs";
 import { LDProvider } from "launchdarkly-react-client-sdk";
@@ -8,17 +7,17 @@ import type { ReactNode } from "react";
 import { useMemo } from "react";
 import { environment } from "../environment";
 
+const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
 const LAUNCHDARKLY_INIT_TIMEOUT_MS = 5000;
 
 export function LaunchDarklyProvider({ children }: { children: ReactNode }) {
   const { user, isUserLoading } = useSupabase();
-  const envEnabled = environment.areFeatureFlagsEnabled();
-  const clientId = environment.getLaunchDarklyClientId();
+  const isCloud = environment.isCloud();
+  const isLaunchDarklyConfigured = isCloud && envEnabled && clientId;
 
   const context = useMemo(() => {
-    if (isUserLoading) return;
-
-    if (!user) {
+    if (isUserLoading || !user) {
       return {
         kind: "user" as const,
         key: "anonymous",
@@ -37,17 +36,15 @@ export function LaunchDarklyProvider({ children }: { children: ReactNode }) {
     };
   }, [user, isUserLoading]);
 
-  if (!envEnabled) {
+  if (!isLaunchDarklyConfigured) {
     return <>{children}</>;
   }
 
-  if (isUserLoading) {
-    return <LoadingSpinner size="large" cover />;
-  }
-
   return (
     <LDProvider
-      clientSideID={clientId ?? ""}
+      // Add this key prop. It will be 'anonymous' when logged out,
+      key={context.key}
+      clientSideID={clientId}
       context={context}
       timeout={LAUNCHDARKLY_INIT_TIMEOUT_MS}
       reactOptions={{ useCamelCaseFlagKeys: false }}

autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts

@@ -1,7 +1,6 @@
 "use client";
 
 import { DEFAULT_SEARCH_TERMS } from "@/app/(platform)/marketplace/components/HeroSection/helpers";
-import { environment } from "@/services/environment";
 import { useFlags } from "launchdarkly-react-client-sdk";
 
 export enum Flag {
@@ -19,9 +18,24 @@ export enum Flag {
   CHAT = "chat",
 }
 
+export type FlagValues = {
+  [Flag.BETA_BLOCKS]: string[];
+  [Flag.NEW_BLOCK_MENU]: boolean;
+  [Flag.NEW_AGENT_RUNS]: boolean;
+  [Flag.GRAPH_SEARCH]: boolean;
+  [Flag.ENABLE_ENHANCED_OUTPUT_HANDLING]: boolean;
+  [Flag.NEW_FLOW_EDITOR]: boolean;
+  [Flag.BUILDER_VIEW_SWITCH]: boolean;
+  [Flag.SHARE_EXECUTION_RESULTS]: boolean;
+  [Flag.AGENT_FAVORITING]: boolean;
+  [Flag.MARKETPLACE_SEARCH_TERMS]: string[];
+  [Flag.ENABLE_PLATFORM_PAYMENT]: boolean;
+  [Flag.CHAT]: boolean;
+};
+
 const isPwMockEnabled = process.env.NEXT_PUBLIC_PW_TEST === "true";
 
-const defaultFlags = {
+const mockFlags = {
   [Flag.BETA_BLOCKS]: [],
   [Flag.NEW_BLOCK_MENU]: false,
   [Flag.NEW_AGENT_RUNS]: false,
@@ -33,19 +47,20 @@ const defaultFlags = {
   [Flag.AGENT_FAVORITING]: false,
   [Flag.MARKETPLACE_SEARCH_TERMS]: DEFAULT_SEARCH_TERMS,
   [Flag.ENABLE_PLATFORM_PAYMENT]: false,
-  [Flag.CHAT]: false,
+  [Flag.CHAT]: true,
 };
 
-type FlagValues = typeof defaultFlags;
-
-export function useGetFlag<T extends Flag>(flag: T): FlagValues[T] {
+export function useGetFlag<T extends Flag>(flag: T): FlagValues[T] | null {
   const currentFlags = useFlags<FlagValues>();
   const flagValue = currentFlags[flag];
-  const areFlagsEnabled = environment.areFeatureFlagsEnabled();
 
-  if (!areFlagsEnabled || isPwMockEnabled) {
-    return defaultFlags[flag];
+  const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
+  const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
+  const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
+
+  if (!isLaunchDarklyConfigured || isPwMockEnabled) {
+    return mockFlags[flag];
   }
 
-  return flagValue ?? defaultFlags[flag];
+  return flagValue ?? mockFlags[flag];
 }

classic/frontend/.gitignore

@@ -8,7 +8,6 @@
 .buildlog/
 .history
 .svn/
-.next/
 migrate_working_dir/
 
 # IntelliJ related