+
{/* ---- Apps page view ---- */}
{sidebarView === "apps" ? (
@@ -517,6 +920,7 @@ const ChatPage: React.FC = ({ accessToken, userRole, userId, user
onChange={setSelectedMCPServers}
/>
+
) : showBlankState ? (
/* ---- Blank state ---- */
= ({ accessToken, userRole, userId, user
letterSpacing: "-0.01em",
textAlign: "center",
}}>
- {greeting}
+ {isComparisonMode
+ ? `Compare ${selectedModels.length} models`
+ : greeting}
+ {isComparisonMode && (
+
+ Send a message to see responses side-by-side
+
+ )}
+
{/* Input card */}
-
) : (
- /* ---- Active conversation ---- */
-
+ /* ---- Active conversation (single-model or comparison) ---- */
+
= 3 ? 1200 : 960) : 760,
+ margin: "0 auto", width: "100%", padding: "0 24px", position: "relative",
+ }}>
-
+ {isComparisonMode ? (
+ /* Comparison: multi-turn exchanges, each with user bubble + side-by-side response cards */
+
+ {comparisonExchanges.map((exchange, exchangeIdx) => {
+ const isLastExchange = exchangeIdx === comparisonExchanges.length - 1;
+ return (
+
+ {/* User message bubble */}
+
+
+ {exchange.userMessage}
+
+
+
+ {/* Response cards side-by-side */}
+
+ {selectedModels.map((model, idx) => {
+ const provider = getProviderFromModelName(model);
+ const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
+ const responseText = exchange.responses[model] ?? "";
+ const isModelStreaming = isLastExchange && comparisonStreamingSet.has(model);
+ return (
+
+ {/* Card header — only show on first exchange */}
+ {exchangeIdx === 0 && (
+
+ {logo ? (
+

{ (e.currentTarget as HTMLImageElement).style.display = "none"; }}
+ />
+ ) : (
+
+ )}
+
+ Response {idx + 1}
+
+
+ {model}
+
+
+ )}
+ {/* Card body */}
+
+ {isModelStreaming && (
+
●
+ )}
+ {responseText ? (
+
{children}
,
+ code: ({ className, children }) => {
+ const isBlock = /language-(\w+)/.exec(className || "");
+ if (isBlock) {
+ return (
+
+ {children}
+
+ );
+ }
+ return {children};
+ },
+ }}
+ >
+ {responseText}
+
+ ) : isModelStreaming ? (
+
Generating…
+ ) : (
+
—
+ )}
+
+
+ );
+ })}
+
+
+ );
+ })}
+
+ ) : (
+
+ )}
{showScrollButton && (
)}