ChatTabV2.tsx

import {
  FormEvent,
  useMemo,
  useState,
  useEffect,
  useCallback,
  useRef,
} from "react";
import { ArrowDown } from "lucide-react";
import { useAuth } from "@workos-inc/authkit-react";
import { useConvexAuth } from "convex/react";
import { toast } from "sonner";

import { ModelDefinition } from "@/shared/types";
import { LoggerView } from "./logger-view";
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "./ui/resizable";
import { ElicitationDialog } from "@/components/ElicitationDialog";
import type { DialogElicitation } from "@/components/ToolsTab";
import { ChatInput } from "@/components/chat-v2/chat-input";
import { Thread } from "@/components/chat-v2/thread";
import { ServerWithName } from "@/hooks/use-app-state";
import { MCPJamFreeModelsPrompt } from "@/components/chat-v2/mcpjam-free-models-prompt";
import { usePostHog } from "posthog-js/react";
import { detectEnvironment, detectPlatform } from "@/lib/PosthogUtils";
import { ErrorBox } from "@/components/chat-v2/error";
import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
import { type MCPPromptResult } from "@/components/chat-v2/chat-input/prompts/mcp-prompts-popover";
import type { SkillResult } from "@/components/chat-v2/chat-input/skills/skill-types";
import {
  type FileAttachment,
  attachmentsToFileUIParts,
  revokeFileAttachmentUrls,
} from "@/components/chat-v2/chat-input/attachments/file-utils";
import {
  STARTER_PROMPTS,
  formatErrorMessage,
  buildMcpPromptMessages,
  buildSkillToolMessages,
} from "@/components/chat-v2/shared/chat-helpers";
import { useJsonRpcPanelVisibility } from "@/hooks/use-json-rpc-panel";
import { CollapsedPanelStrip } from "@/components/ui/collapsed-panel-strip";
import { useChatSession } from "@/hooks/use-chat-session";
import { addTokenToUrl, authFetch } from "@/lib/session-token";
import { XRaySnapshotView } from "@/components/xray/xray-snapshot-view";
import { useSharedAppState } from "@/state/app-state-context";
import { useWorkspaceServers } from "@/hooks/useViews";
import { HOSTED_MODE } from "@/lib/config";
import { buildOAuthTokensByServerId } from "@/lib/oauth/oauth-tokens";
import { buildWidgetModelContextMessages } from "@/lib/mcp-ui/model-context-messages";
import {
  useWidgetStateSync,
  type ModelContextItem,
} from "@/hooks/use-widget-state-sync";

interface ChatTabProps {
  connectedOrConnectingServerConfigs: Record<string, ServerWithName>;
  selectedServerNames: string[];
  onHasMessagesChange?: (hasMessages: boolean) => void;
  minimalMode?: boolean;
  hostedWorkspaceIdOverride?: string;
  hostedSelectedServerIdsOverride?: string[];
  hostedOAuthTokensOverride?: Record<string, string>;
  hostedShareToken?: string;
  onOAuthRequired?: (serverUrl?: string) => void;
}

function ScrollToBottomButton() {
  const { isAtBottom, scrollToBottom } = useStickToBottomContext();

  if (isAtBottom) return null;

  return (
    <div className="pointer-events-none absolute inset-x-0 flex bottom-12 justify-center animate-in slide-in-from-bottom fade-in duration-200">
      <button
        type="button"
        className="pointer-events-auto inline-flex items-center gap-2 rounded-full border border-border bg-background/90 px-2 py-2 text-xs font-medium shadow-sm transition hover:bg-accent"
        onClick={() => scrollToBottom({ animation: "smooth" })}
      >
        <ArrowDown className="h-4 w-4" />
      </button>
    </div>
  );
}

export function ChatTabV2({
  connectedOrConnectingServerConfigs,
  selectedServerNames,
  onHasMessagesChange,
  minimalMode = false,
  hostedWorkspaceIdOverride,
  hostedSelectedServerIdsOverride,
  hostedOAuthTokensOverride,
  hostedShareToken,
  onOAuthRequired,
}: ChatTabProps) {
  const { signUp } = useAuth();
  const { isAuthenticated: isConvexAuthenticated } = useConvexAuth();
  const appState = useSharedAppState();
  const { isVisible: isJsonRpcPanelVisible, toggle: toggleJsonRpcPanel } =
    useJsonRpcPanelVisibility();
  const posthog = usePostHog();

  // Local state for ChatTabV2-specific features
  const [input, setInput] = useState("");
  const [mcpPromptResults, setMcpPromptResults] = useState<MCPPromptResult[]>(
    [],
  );
  const [fileAttachments, setFileAttachments] = useState<FileAttachment[]>([]);
  const [skillResults, setSkillResults] = useState<SkillResult[]>([]);
  const resetWidgetSyncRef = useRef<() => void>(() => {});
  const [elicitation, setElicitation] = useState<DialogElicitation | null>(
    null,
  );
  const [elicitationLoading, setElicitationLoading] = useState(false);
  const [isWidgetFullscreen, setIsWidgetFullscreen] = useState(false);

  // X-Ray mode state
  const [xrayMode, setXrayMode] = useState(false);

  // Filter to only connected servers
  const selectedConnectedServerNames = useMemo(
    () =>
      selectedServerNames.filter(
        (name) =>
          connectedOrConnectingServerConfigs[name]?.connectionStatus ===
          "connected",
      ),
    [selectedServerNames, connectedOrConnectingServerConfigs],
  );

  const activeWorkspace = appState.workspaces[appState.activeWorkspaceId];
  const convexWorkspaceId = activeWorkspace?.sharedWorkspaceId ?? null;
  const { serversByName } = useWorkspaceServers({
    isAuthenticated: isConvexAuthenticated,
    workspaceId: convexWorkspaceId,
  });
  const hostedSelectedServerIds = useMemo(
    () =>
      selectedConnectedServerNames
        .map((serverName) => serversByName.get(serverName))
        .filter((serverId): serverId is string => !!serverId),
    [selectedConnectedServerNames, serversByName],
  );
  const hostedOAuthTokens = useMemo(
    () =>
      buildOAuthTokensByServerId(
        selectedConnectedServerNames,
        (name) => serversByName.get(name),
        (name) => appState.servers[name]?.oauthTokens?.access_token,
      ),
    [selectedConnectedServerNames, serversByName, appState.servers],
  );
  const effectiveHostedWorkspaceId =
    hostedWorkspaceIdOverride ?? convexWorkspaceId;
  const effectiveHostedSelectedServerIds =
    hostedSelectedServerIdsOverride ?? hostedSelectedServerIds;
  const effectiveHostedOAuthTokens =
    hostedOAuthTokensOverride ?? hostedOAuthTokens;

  // Use shared chat session hook
  const {
    messages,
    setMessages,
    sendMessage,
    stop,
    status,
    error,
    selectedModel,
    setSelectedModel,
    availableModels,
    isAuthLoading,
    systemPrompt,
    setSystemPrompt,
    temperature,
    setTemperature,
    toolsMetadata,
    toolServerMap,
    tokenUsage,
    mcpToolsTokenCount,
    mcpToolsTokenCountLoading,
    systemPromptTokenCount,
    systemPromptTokenCountLoading,
    resetChat: baseResetChat,
    isStreaming,
    disableForAuthentication,
    submitBlocked: baseSubmitBlocked,
    requireToolApproval,
    setRequireToolApproval,
    addToolApprovalResponse,
  } = useChatSession({
    selectedServers: selectedConnectedServerNames,
    hostedWorkspaceId: effectiveHostedWorkspaceId,
    hostedSelectedServerIds: effectiveHostedSelectedServerIds,
    hostedOAuthTokens: effectiveHostedOAuthTokens,
    hostedShareToken,
    minimalMode,
    onReset: () => {
      setInput("");
      resetWidgetSyncRef.current();
    },
  });

  const {
    enqueueWidgetStateSync,
    setWidgetStateQueue,
    widgetStateSyncRef,
    modelContextQueueRef,
    setModelContextQueue,
    resetWidgetSync,
  } = useWidgetStateSync({ status, setMessages });
  resetWidgetSyncRef.current = resetWidgetSync;

  // Check if thread is empty
  const isThreadEmpty = !messages.some(
    (msg) => msg.role === "user" || msg.role === "assistant",
  );

  // Server instructions
  const selectedServerInstructions = useMemo(() => {
    const instructions: Record<string, string> = {};
    for (const serverName of selectedServerNames) {
      const server = connectedOrConnectingServerConfigs[serverName];
      const instruction = server?.initializationInfo?.instructions;
      if (instruction) {
        instructions[serverName] = instruction;
      }
    }
    return instructions;
  }, [connectedOrConnectingServerConfigs, selectedServerNames]);

  // Keep server instruction system messages in sync with selected servers
  useEffect(() => {
    setMessages((prev) => {
      const filtered = prev.filter(
        (msg) =>
          !(
            msg.role === "system" &&
            (msg as { metadata?: { source?: string } })?.metadata?.source ===
              "server-instruction"
          ),
      );

      const instructionMessages = Object.entries(selectedServerInstructions)
        .sort(([a], [b]) => a.localeCompare(b))
        .map(([serverName, instruction]) => ({
          id: `server-instruction-${serverName}`,
          role: "system" as const,
          parts: [
            {
              type: "text" as const,
              text: `Server ${serverName} instructions: ${instruction}`,
            },
          ],
          metadata: { source: "server-instruction", serverName },
        }));

      return [...instructionMessages, ...filtered];
    });
  }, [selectedServerInstructions, setMessages]);

  // PostHog tracking
  useEffect(() => {
    posthog.capture("chat_tab_viewed", {
      location: "chat_tab",
      platform: detectPlatform(),
      environment: detectEnvironment(),
    });
  }, [posthog]);

  // Notify parent when messages change
  useEffect(() => {
    onHasMessagesChange?.(!isThreadEmpty);
  }, [isThreadEmpty, onHasMessagesChange]);

  const handleWidgetStateChange = useCallback(
    (toolCallId: string, state: unknown) => {
      if (status === "ready") {
        void enqueueWidgetStateSync([{ toolCallId, state }]);
      } else {
        setWidgetStateQueue((prev) => [...prev, { toolCallId, state }]);
      }
    },
    [status, enqueueWidgetStateSync],
  );

  const handleModelContextUpdate = useCallback(
    (toolCallId: string, context: ModelContextItem["context"]) => {
      // Queue model context to be included in next message
      setModelContextQueue((prev) => {
        // Remove any existing context from same widget (overwrite pattern per SEP-1865)
        const filtered = prev.filter((item) => item.toolCallId !== toolCallId);
        return [...filtered, { toolCallId, context }];
      });
    },
    [setModelContextQueue],
  );

  // Elicitation SSE listener
  useEffect(() => {
    if (HOSTED_MODE) {
      return;
    }

    const es = new EventSource(addTokenToUrl("/api/mcp/elicitation/stream"));
    es.onmessage = (ev) => {
      try {
        const data = JSON.parse(ev.data);
        if (data?.type === "elicitation_request") {
          setElicitation({
            requestId: data.requestId,
            message: data.message,
            schema: data.schema,
            timestamp: data.timestamp || new Date().toISOString(),
          });
        } else if (data?.type === "elicitation_complete") {
          setElicitation((prev) =>
            prev?.requestId === data.requestId ? null : prev,
          );
        }
      } catch (error) {
        console.warn("[ChatTabV2] Failed to parse elicitation event:", error);
      }
    };
    es.onerror = () => {
      console.warn(
        "[ChatTabV2] Elicitation SSE connection error, browser will retry",
      );
    };
    return () => es.close();
  }, []);

  const handleElicitationResponse = async (
    action: "accept" | "decline" | "cancel",
    parameters?: Record<string, unknown>,
  ) => {
    if (!elicitation) return;
    setElicitationLoading(true);
    try {
      await authFetch("/api/mcp/elicitation/respond", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          requestId: elicitation.requestId,
          action,
          content: parameters,
        }),
      });
      setElicitation(null);
    } finally {
      setElicitationLoading(false);
    }
  };

  // Submit blocking with server check
  const submitBlocked = baseSubmitBlocked;
  const inputDisabled = status !== "ready" || submitBlocked;

  let placeholder = minimalMode
    ? "Message…"
    : 'Ask something… Use Slash "/" commands for Skills & MCP prompts';
  if (isAuthLoading) {
    placeholder = "Loading...";
  } else if (disableForAuthentication) {
    placeholder = "Sign in to use free chat";
  }

  const shouldShowUpsell = disableForAuthentication && !isAuthLoading;
  const showDisabledCallout = isThreadEmpty && shouldShowUpsell;

  const errorMessage = formatErrorMessage(error);

  // Detect OAuth-required errors and notify parent
  useEffect(() => {
    if (!onOAuthRequired || !error) return;
    const msg = error instanceof Error ? error.message : String(error);

    // Try to parse structured error with oauthRequired flag
    try {
      const parsed = JSON.parse(msg);
      if (parsed?.details?.oauthRequired) {
        onOAuthRequired(parsed.details.serverUrl);
        return;
      }
    } catch {
      // not JSON, check message patterns
    }

    // Match known OAuth error patterns from server
    const isOAuthError =
      msg.includes("requires OAuth authentication") ||
      (msg.includes("Authentication failed") && msg.includes("invalid_token"));
    if (isOAuthError) {
      onOAuthRequired();
    }
  }, [error, onOAuthRequired]);

  const handleSignUp = () => {
    posthog.capture("sign_up_button_clicked", {
      location: "chat_tab",
      platform: detectPlatform(),
      environment: detectEnvironment(),
    });
    signUp();
  };

  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const hasContent =
      input.trim() ||
      mcpPromptResults.length > 0 ||
      skillResults.length > 0 ||
      fileAttachments.length > 0;
    if (hasContent && status === "ready" && !submitBlocked) {
      try {
        // Ensure any async widget-state -> message conversion is complete
        // before submitting the next user turn.
        await widgetStateSyncRef.current;

        posthog.capture("send_message", {
          location: "chat_tab",
          platform: detectPlatform(),
          environment: detectEnvironment(),
          model_id: selectedModel?.id ?? null,
          model_name: selectedModel?.name ?? null,
          model_provider: selectedModel?.provider ?? null,
        });

        // Build messages from MCP prompts
        const promptMessages = buildMcpPromptMessages(mcpPromptResults);
        if (promptMessages.length > 0) {
          setMessages((prev) => [...prev, ...(promptMessages as any[])]);
        }

        // Build messages from skills
        const skillMessages = buildSkillToolMessages(skillResults);
        if (skillMessages.length > 0) {
          setMessages((prev) => [...prev, ...(skillMessages as any[])]);
        }

        // Include any pending model context from widgets (SEP-1865 ui/update-model-context)
        // Sent as hidden user messages; preserve image/audio blocks as file parts.
        const contextMessages = await buildWidgetModelContextMessages(
          modelContextQueueRef.current,
        );

        if (contextMessages.length > 0) {
          setMessages((prev) => [...prev, ...(contextMessages as any[])]);
        }

        // Convert file attachments to FileUIPart[] format for the AI SDK
        const files =
          fileAttachments.length > 0
            ? await attachmentsToFileUIParts(fileAttachments)
            : undefined;

        sendMessage({ text: input, files });
        setInput("");
        setMcpPromptResults([]);
        setSkillResults([]);
        // Revoke object URLs and clear file attachments
        revokeFileAttachmentUrls(fileAttachments);
        setFileAttachments([]);
        setModelContextQueue([]); // Clear after sending
      } catch (err) {
        console.error("[ChatTabV2] Submit failed:", err);
        toast.error(
          err instanceof Error ? err.message : "Failed to send message",
        );
      }
    }
  };

  const handleStarterPrompt = (prompt: string) => {
    if (submitBlocked || inputDisabled) {
      setInput(prompt);
      return;
    }
    posthog.capture("send_message", {
      location: "chat_tab",
      platform: detectPlatform(),
      environment: detectEnvironment(),
      model_id: selectedModel?.id ?? null,
      model_name: selectedModel?.name ?? null,
      model_provider: selectedModel?.provider ?? null,
    });
    sendMessage({ text: prompt });
    setInput("");
    // Clear any pending file attachments
    revokeFileAttachmentUrls(fileAttachments);
    setFileAttachments([]);
  };

  const sharedChatInputProps = {
    value: input,
    onChange: setInput,
    onSubmit,
    stop,
    disabled: inputDisabled,
    isLoading: isStreaming,
    placeholder,
    currentModel: selectedModel,
    availableModels,
    onModelChange: (model: ModelDefinition) => {
      setSelectedModel(model);
      baseResetChat();
    },
    systemPrompt,
    onSystemPromptChange: setSystemPrompt,
    temperature,
    onTemperatureChange: setTemperature,
    onResetChat: baseResetChat,
    submitDisabled: submitBlocked,
    tokenUsage,
    selectedServers: selectedConnectedServerNames,
    mcpToolsTokenCount,
    mcpToolsTokenCountLoading,
    connectedOrConnectingServerConfigs,
    systemPromptTokenCount,
    systemPromptTokenCountLoading,
    mcpPromptResults,
    onChangeMcpPromptResults: setMcpPromptResults,
    fileAttachments,
    onChangeFileAttachments: setFileAttachments,
    skillResults,
    onChangeSkillResults: setSkillResults,
    xrayMode,
    onXrayModeChange: setXrayMode,
    requireToolApproval,
    onRequireToolApprovalChange: setRequireToolApproval,
    minimalMode,
  };

  const showStarterPrompts =
    !showDisabledCallout && isThreadEmpty && !isAuthLoading;

  return (
    <div className="flex flex-1 h-full min-h-0 flex-col overflow-hidden">
      <ResizablePanelGroup
        direction="horizontal"
        className="flex-1 min-h-0 h-full"
      >
        <ResizablePanel
          defaultSize={minimalMode ? 100 : isJsonRpcPanelVisible ? 70 : 100}
          minSize={40}
          className="min-w-0"
        >
          <div
            className="flex flex-col bg-background h-full min-h-0 overflow-hidden"
            style={{
              transform: isWidgetFullscreen ? "none" : "translateZ(0)",
            }}
          >
            {/* X-Ray mode: show raw JSON view of AI payload */}
            {!minimalMode && xrayMode && (
              <StickToBottom
                className="relative flex flex-1 flex-col min-h-0"
                resize="smooth"
                initial="smooth"
              >
                <div className="relative flex-1 min-h-0">
                  <StickToBottom.Content className="flex flex-col min-h-0">
                    <XRaySnapshotView
                      systemPrompt={systemPrompt}
                      messages={messages}
                      selectedServers={selectedConnectedServerNames}
                      onClose={() => setXrayMode(false)}
                    />
                  </StickToBottom.Content>
                  <ScrollToBottomButton />
                </div>

                <div className="bg-background/80 backdrop-blur-sm border-t border-border flex-shrink-0">
                  <div className="max-w-4xl mx-auto p-4">
                    <ChatInput
                      {...sharedChatInputProps}
                      hasMessages={!isThreadEmpty}
                    />
                  </div>
                </div>
              </StickToBottom>
            )}

            {/* Thread: kept mounted (but hidden) during X-Ray to preserve
                MCPAppsRenderer iframes and bridge connections */}
            {!isThreadEmpty && (
              <StickToBottom
                className="relative flex flex-1 flex-col min-h-0 animate-in fade-in duration-300"
                style={xrayMode ? { display: "none" } : undefined}
                resize="smooth"
                initial="smooth"
              >
                <div className="relative flex-1 min-h-0">
                  <StickToBottom.Content className="flex flex-col min-h-0">
                    <Thread
                      messages={messages}
                      sendFollowUpMessage={(text: string) =>
                        sendMessage({ text })
                      }
                      model={selectedModel}
                      isLoading={status === "submitted"}
                      toolsMetadata={toolsMetadata}
                      toolServerMap={toolServerMap}
                      onWidgetStateChange={handleWidgetStateChange}
                      onModelContextUpdate={handleModelContextUpdate}
                      onFullscreenChange={setIsWidgetFullscreen}
                      enableFullscreenChatOverlay
                      fullscreenChatPlaceholder={placeholder}
                      fullscreenChatDisabled={inputDisabled}
                      onToolApprovalResponse={addToolApprovalResponse}
                      minimalMode={minimalMode}
                    />
                  </StickToBottom.Content>
                  <ScrollToBottomButton />
                </div>

                <div className="bg-background/80 backdrop-blur-sm border-t border-border flex-shrink-0">
                  {errorMessage && (
                    <div className="max-w-4xl mx-auto px-4 pt-4">
                      <ErrorBox
                        message={errorMessage.message}
                        errorDetails={errorMessage.details}
                        code={errorMessage.code}
                        statusCode={errorMessage.statusCode}
                        isRetryable={errorMessage.isRetryable}
                        isMCPJamPlatformError={
                          errorMessage.isMCPJamPlatformError
                        }
                        onResetChat={baseResetChat}
                      />
                    </div>
                  )}
                  <div className="max-w-4xl mx-auto p-4">
                    <ChatInput {...sharedChatInputProps} hasMessages />
                  </div>
                  {minimalMode && (
                    <p className="text-center text-xs text-muted-foreground/60 pb-3 -mt-2">
                      AI can make mistakes. Please double-check responses.
                    </p>
                  )}
                </div>
              </StickToBottom>
            )}

            {/* Empty state: only shown when thread is empty and not in X-Ray mode */}
            {(!minimalMode || !xrayMode) &&
              isThreadEmpty &&
              (minimalMode ? (
                <div className="flex-1 flex flex-col min-h-0">
                  {/* Spacer: centers loading/auth content, otherwise just pushes everything down */}
                  <div className="flex-1 flex flex-col items-center justify-center px-4">
                    {isAuthLoading ? (
                      <div className="text-center space-y-4">
                        <div className="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
                        <p className="text-sm text-muted-foreground">
                          Loading...
                        </p>
                      </div>
                    ) : showDisabledCallout ? (
                      <MCPJamFreeModelsPrompt onSignUp={handleSignUp} />
                    ) : null}
                  </div>

                  {/* Starter chips just above the input */}
                  {showStarterPrompts && (
                    <div className="flex flex-wrap justify-center gap-2 px-4 pb-4">
                      {STARTER_PROMPTS.map((prompt) => (
                        <button
                          key={prompt.text}
                          type="button"
                          onClick={() => handleStarterPrompt(prompt.text)}
                          className="rounded-full border border-border/40 bg-transparent px-3 py-1.5 text-xs text-muted-foreground transition hover:border-foreground/40 hover:bg-accent cursor-pointer font-light"
                        >
                          {prompt.label}
                        </button>
                      ))}
                    </div>
                  )}

                  {/* Input bar pinned to bottom */}
                  <div className="bg-background/80 backdrop-blur-sm border-t border-border flex-shrink-0">
                    {!isAuthLoading && (
                      <div className="max-w-4xl mx-auto p-4">
                        <ChatInput
                          {...sharedChatInputProps}
                          hasMessages={false}
                        />
                      </div>
                    )}
                    <p className="text-center text-xs text-muted-foreground/60 pb-3 -mt-2">
                      AI can make mistakes. Please double-check responses.
                    </p>
                  </div>
                </div>
              ) : (
                <div className="flex-1 flex items-center justify-center overflow-y-auto px-4">
                  <div className="w-full max-w-3xl space-y-6 py-8">
                    {isAuthLoading ? (
                      <div className="text-center space-y-4">
                        <div className="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
                        <p className="text-sm text-muted-foreground">
                          Loading...
                        </p>
                      </div>
                    ) : showDisabledCallout ? (
                      <div className="space-y-4">
                        <MCPJamFreeModelsPrompt onSignUp={handleSignUp} />
                      </div>
                    ) : null}

                    <div className="space-y-4">
                      {showStarterPrompts && (
                        <div className="text-center">
                          <p className="text-sm text-muted-foreground mb-3">
                            Try one of these to get started
                          </p>
                          <div className="flex flex-wrap justify-center gap-2">
                            {STARTER_PROMPTS.map((prompt) => (
                              <button
                                key={prompt.text}
                                type="button"
                                onClick={() => handleStarterPrompt(prompt.text)}
                                className="rounded-full border border-border bg-background px-4 py-2 text-sm text-foreground transition hover:border-foreground hover:bg-accent cursor-pointer font-light"
                              >
                                {prompt.label}
                              </button>
                            ))}
                          </div>
                        </div>
                      )}

                      {!isAuthLoading && (
                        <ChatInput
                          {...sharedChatInputProps}
                          hasMessages={false}
                        />
                      )}
                    </div>
                  </div>
                </div>
              ))}

            <ElicitationDialog
              elicitationRequest={elicitation}
              onResponse={handleElicitationResponse}
              loading={elicitationLoading}
            />
          </div>
        </ResizablePanel>

        {!minimalMode && isJsonRpcPanelVisible ? (
          <>
            <ResizableHandle withHandle />
            <ResizablePanel
              defaultSize={30}
              minSize={4}
              maxSize={50}
              collapsible={true}
              collapsedSize={0}
              onCollapse={toggleJsonRpcPanel}
              className="min-h-0 overflow-hidden"
            >
              <div className="h-full min-h-0 overflow-hidden">
                <LoggerView onClose={toggleJsonRpcPanel} />
              </div>
            </ResizablePanel>
          </>
        ) : minimalMode ? null : (
          <CollapsedPanelStrip onOpen={toggleJsonRpcPanel} />
        )}
      </ResizablePanelGroup>
    </div>
  );
}