= ({
+ data,
+ label = "Debug Data",
+ collapsed = true,
+}) => {
+ const [isCollapsed, setIsCollapsed] = useState(collapsed);
+
+ // Only render in development
+ if (process.env.NODE_ENV !== "development") {
+ return null;
+ }
+
+ return (
+
+
setIsCollapsed(!isCollapsed)}
+ >
+ {label}
+ {isCollapsed ? "▶" : "▼"}
+
+
+ {!isCollapsed && (
+
+
+ {JSON.stringify(data, null, 2)}
+
+
+ )}
+
(
+ Component: React.ComponentType
,
+ debugLabel?: string,
+) => {
+ const WrappedComponent = React.forwardRef((props, ref) => {
+ useDebugLog(props, debugLabel || Component.displayName || Component.name);
+ return (
+ = ({
+ flightSearchCriteria,
+ streamData
+}) => {
+ const { widgets } = useItineraryWidget();
+ const formatDate = (dateString: string | null) => {
+ if (!dateString) return "Not specified";
+ return new Date(dateString).toLocaleDateString("en-US", {
+ weekday: "long",
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+ };
+
+ const formatShortDate = (dateString: string | null) => {
+ if (!dateString) return "TBD";
+ return new Date(dateString).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ });
+ };
+
+ const formatTime = (dateString: string | null) => {
+ if (!dateString) return "TBD";
+ return new Date(dateString).toLocaleTimeString("en-US", {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ };
+
+ const getPassengerList = () => {
+ if (!flightSearchCriteria) return "No passengers";
+ const passengers = [];
+ if (flightSearchCriteria.adults > 0) {
+ passengers.push(`${flightSearchCriteria.adults} Adult${flightSearchCriteria.adults > 1 ? 's' : ''}`);
+ }
+ if (flightSearchCriteria.children > 0) {
+ passengers.push(`${flightSearchCriteria.children} Child${flightSearchCriteria.children > 1 ? 'ren' : ''}`);
+ }
+ if (flightSearchCriteria.infants > 0) {
+ passengers.push(`${flightSearchCriteria.infants} Infant${flightSearchCriteria.infants > 1 ? 's' : ''}`);
+ }
+ return passengers.join(', ') || "No passengers";
+ };
+
+ const getDaysBetween = (startDate: string | null, endDate: string | null) => {
+ if (!startDate || !endDate) return 0;
+ const start = new Date(startDate);
+ const end = new Date(endDate);
+ const diffTime = Math.abs(end.getTime() - start.getTime());
+ return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+ };
+
+ // Process stream data for flight details (this can be expanded based on your stream structure)
+ const processFlightData = () => {
+ if (!streamData) return null;
+
+ // Extract flight information from stream data
+ // This is a placeholder - adjust based on your actual stream data structure
+ const flights = streamData.flights || [];
+ const bookingStatus = streamData.bookingStatus || "searching";
+
+ return { flights, bookingStatus };
+ };
+
+ const flightData = processFlightData();
+
+ if (!flightSearchCriteria) {
+ return (
+
+ {/* Dynamic Widgets Section - Show even when no flight criteria */}
+ {widgets.length > 0 && (
+
+
+
+
+
+
+
+
+ {widgets.map((widget) => (
+
+ {widget.component}
+
+ ))}
+
+
+
+ )}
+
+ {/* Dynamic Widgets Section */}
+ {widgets.length > 0 && (
+
+
+
+
+
+
+
+
+ {widgets.map((widget) => (
+
+ {widget.component}
+
+ ))}
+
+
+
+ )}
+
+ {/* Trip Overview */}
+
+
+
+
+
+
+
+ {/* Route Summary */}
+
+
+
+
+ {flightSearchCriteria.originAirport}
+
+
Origin
+
+
+
+
+ {flightSearchCriteria.isRoundTrip && (
+
+ )}
+
+
+
+
+ {flightSearchCriteria.destinationAirport}
+
+
Destination
+
+
+
+
+ {/* Trip Info */}
+
+
+ {getPassengerList()}
+
+
+
+
+ {flightSearchCriteria.class || "Economy"}
+
+
+ {tripDuration && (
+
+ {tripDuration} days
+
+ )}
+
+
+
+
+ {/* Outbound Journey */}
+
+
+
+
+
+
+ {formatShortDate(flightSearchCriteria.departureDate)}
+
+
+
+
+ {/* Flight Route */}
+
+
+
+
+
+ {flightSearchCriteria.originAirport} → {flightSearchCriteria.destinationAirport}
+
+
+ {formatDate(flightSearchCriteria.departureDate)}
+
+
+
+
+
+ {flightData?.bookingStatus === "confirmed" ? "Confirmed" : "Searching..."}
+
+
+
+
+ {/* Flight Details */}
+
+
+
+ Departure:
+ TBD
+
+
+ From:
+ {flightSearchCriteria.originAirport}
+
+
+
+
+ Arrival:
+ TBD
+
+
+ To:
+ {flightSearchCriteria.destinationAirport}
+
+
+
+
+
+
+ {/* Return Journey (if round trip) */}
+ {flightSearchCriteria.isRoundTrip && (
+
+
+
+
+
+
+ {formatShortDate(flightSearchCriteria.returnDate)}
+
+
+
+
+ {/* Flight Route */}
+
+
+
+
+
+ {flightSearchCriteria.destinationAirport} → {flightSearchCriteria.originAirport}
+
+
+ {formatDate(flightSearchCriteria.returnDate)}
+
+
+
+
+
+ {flightData?.bookingStatus === "confirmed" ? "Confirmed" : "Searching..."}
+
+
+
+
+ {/* Flight Details */}
+
+
+
+ Departure:
+ TBD
+
+
+ From:
+ {flightSearchCriteria.destinationAirport}
+
+
+
+
+ Arrival:
+ TBD
+
+
+ To:
+ {flightSearchCriteria.originAirport}
+
+
+
+
+
+ )}
+
+ {/* Passenger Information */}
+
+
+
+
+
+
+
+ {/* Passenger Summary */}
+
+
+
+ {flightSearchCriteria.adults || 0}
+
+
Adults
+
+
+
+ {flightSearchCriteria.children || 0}
+
+
Children
+
+
+
+ {flightSearchCriteria.infants || 0}
+
+
Infants
+
+
+
+ {/* Individual Passengers */}
+ {flightSearchCriteria.passengers && flightSearchCriteria.passengers.length > 0 && (
+
+
+
Passenger Details
+
+ {flightSearchCriteria.passengers.map((passenger, index) => (
+
+
+
+
+
+
+ {passenger.firstName && passenger.lastName
+ ? `${passenger.firstName} ${passenger.lastName}`
+ : `Passenger ${index + 1}`
+ }
+
+ {passenger.dateOfBirth && (
+
+ DOB: {new Date(passenger.dateOfBirth).toLocaleDateString()}
+
+ )}
+
+
+
+
Adult
+ {passenger.nationality && (
+
+ {passenger.nationality}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Travel Essentials */}
+
+
+
+
+
+
+
+
+
Baggage Allowance
+
+
+ Cabin Baggage:
+ 7 kg
+
+
+ Check-in Baggage:
+ 15-25 kg
+
+
+ * Varies by airline and class
+
+
+
+
+
+
Important Notes
+
+
• Check-in opens 2 hours before departure
+
• Arrive at airport 3 hours early for international flights
+
• Valid passport/ID required
+
• Visa requirements may apply
+
+
+
+
+
= ({
+ flightSearchCriteria,
+ streamData
+}) => {
+ const mapContainer = useRef(null);
+ const map = useRef(null);
+ const [mapLoaded, setMapLoaded] = useState(false);
+
+ // Get MapBox token from environment
+ const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ||
+ process.env.NEXT_PUBLIC_MAP_BOX ||
+ "pk.your_mapbox_token";
+
+ useEffect(() => {
+ if (!mapContainer.current || map.current) return;
+
+ // Set MapBox access token
+ mapboxgl.accessToken = mapboxToken;
+
+ // Initialize map
+ map.current = new mapboxgl.Map({
+ container: mapContainer.current,
+ style: "mapbox://styles/mapbox/light-v11",
+ center: [77.1025, 28.5562], // Default to Delhi
+ zoom: 2,
+ projection: "globe" as any,
+ });
+
+ map.current.on("load", () => {
+ setMapLoaded(true);
+
+ // Add atmosphere for 3D globe effect
+ if (map.current) {
+ map.current.setFog({
+ color: "rgb(186, 210, 235)",
+ "high-color": "rgb(36, 92, 223)",
+ "horizon-blend": 0.02,
+ "space-color": "rgb(11, 11, 25)",
+ "star-intensity": 0.6,
+ });
+ }
+ });
+
+ return () => {
+ if (map.current) {
+ map.current.remove();
+ map.current = null;
+ }
+ };
+ }, [mapboxToken]);
+
+ useEffect(() => {
+ if (!map.current || !mapLoaded || !flightSearchCriteria) return;
+
+ const { originAirport, destinationAirport } = flightSearchCriteria;
+
+ if (!originAirport || !destinationAirport) return;
+
+ const originCoords = AIRPORT_COORDINATES[originAirport];
+ const destCoords = AIRPORT_COORDINATES[destinationAirport];
+
+ if (!originCoords || !destCoords) {
+ console.warn(`Coordinates not found for airports: ${originAirport}, ${destinationAirport}`);
+ return;
+ }
+
+ // Clear existing layers and sources
+ if (map.current.getSource("route")) {
+ map.current.removeLayer("route");
+ map.current.removeSource("route");
+ }
+ if (map.current.getSource("airports")) {
+ map.current.removeLayer("airports");
+ map.current.removeSource("airports");
+ }
+
+ // Add flight route line
+ map.current.addSource("route", {
+ type: "geojson",
+ data: {
+ type: "Feature",
+ properties: {},
+ geometry: {
+ type: "LineString",
+ coordinates: [originCoords, destCoords],
+ },
+ },
+ });
+
+ map.current.addLayer({
+ id: "route",
+ type: "line",
+ source: "route",
+ layout: {
+ "line-join": "round",
+ "line-cap": "round",
+ },
+ paint: {
+ "line-color": "#3b82f6",
+ "line-width": 3,
+ "line-dasharray": [2, 2],
+ },
+ });
+
+ // Add airport markers
+ map.current.addSource("airports", {
+ type: "geojson",
+ data: {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ properties: {
+ title: originAirport,
+ type: "origin",
+ },
+ geometry: {
+ type: "Point",
+ coordinates: originCoords,
+ },
+ },
+ {
+ type: "Feature",
+ properties: {
+ title: destinationAirport,
+ type: "destination",
+ },
+ geometry: {
+ type: "Point",
+ coordinates: destCoords,
+ },
+ },
+ ],
+ },
+ });
+
+ map.current.addLayer({
+ id: "airports",
+ type: "circle",
+ source: "airports",
+ paint: {
+ "circle-radius": 8,
+ "circle-color": [
+ "case",
+ ["==", ["get", "type"], "origin"],
+ "#10b981", // Green for origin
+ "#ef4444", // Red for destination
+ ],
+ "circle-stroke-width": 2,
+ "circle-stroke-color": "#ffffff",
+ },
+ });
+
+ // Add labels for airports
+ map.current.addLayer({
+ id: "airport-labels",
+ type: "symbol",
+ source: "airports",
+ layout: {
+ "text-field": ["get", "title"],
+ "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+ "text-offset": [0, 1.25],
+ "text-anchor": "top",
+ "text-size": 12,
+ },
+ paint: {
+ "text-color": "#374151",
+ "text-halo-color": "#ffffff",
+ "text-halo-width": 1,
+ },
+ });
+
+ // Fit map to show both airports
+ const bounds = new mapboxgl.LngLatBounds()
+ .extend(originCoords)
+ .extend(destCoords);
+
+ map.current.fitBounds(bounds, {
+ padding: 100,
+ maxZoom: 8,
+ });
+
+ // Add popup on click
+ map.current.on("click", "airports", (e) => {
+ const feature = e.features![0];
+ const geometry = feature.geometry as any;
+ const coordinates = geometry.coordinates?.slice() || [0, 0];
+ const title = feature.properties!.title;
+ const type = feature.properties!.type;
+
+ new mapboxgl.Popup()
+ .setLngLat(coordinates as [number, number])
+ .setHTML(`
+
+
${title}
+
${type === "origin" ? "Origin" : "Destination"}
+
+
+
+
+
+
+
+ {/* Map Container */}
+
+
+ {/* Flight Information Below Map */}
+ {flightSearchCriteria && (
+
+ {/* Route Summary */}
+
+
+
+ {flightSearchCriteria.originAirport || "---"}
+
+
Origin
+
+
+
+
+
+
+
+ {flightSearchCriteria.isRoundTrip && (
+ <>
+
+
+
+ )}
+
+
+
+
+
+ {flightSearchCriteria.destinationAirport || "---"}
+
+
Destination
+
+
+
+ {/* Flight Details Grid */}
+
+
+
+ Departure:
+ {formatDate(flightSearchCriteria.departureDate)}
+
+
+ {flightSearchCriteria.isRoundTrip && (
+
+ Return:
+ {formatDate(flightSearchCriteria.returnDate)}
+
+ )}
+
+
+ Passengers:
+ {getTotalPassengers()}
+
+
+
+
+
+ Class:
+
+ {flightSearchCriteria.class || "Economy"}
+
+
+
+
+ Trip Type:
+
+ {flightSearchCriteria.isRoundTrip ? "Round Trip" : "One Way"}
+
+
+
+
+
+ {/* Passenger Breakdown */}
+ {getTotalPassengers() > 0 && (
+
+
Passenger Details:
+
+ {flightSearchCriteria.adults > 0 && (
+ Adults: {flightSearchCriteria.adults}
+ )}
+ {flightSearchCriteria.children > 0 && (
+ Children: {flightSearchCriteria.children}
+ )}
+ {flightSearchCriteria.infants > 0 && (
+ Infants: {flightSearchCriteria.infants}
+ )}
+
+
+ )}
+
+
+
+ No Flight Route to Display
+
+
+ Flight search criteria will appear here once available from the conversation.
+
+
+
+
);
diff --git a/src/components/thread/MultimodalPreview.tsx b/src/components/thread/MultimodalPreview.tsx
index 0f55573a..329cf191 100644
--- a/src/components/thread/MultimodalPreview.tsx
+++ b/src/components/thread/MultimodalPreview.tsx
@@ -26,17 +26,17 @@ export const MultimodalPreview: React.FC = ({
block.mime_type.startsWith("image/")
) {
const url = `data:${block.mime_type};base64,${block.data}`;
- let imgClass: string = "rounded-md object-cover h-16 w-16 text-lg";
- if (size === "sm") imgClass = "rounded-md object-cover h-10 w-10 text-base";
- if (size === "lg") imgClass = "rounded-md object-cover h-24 w-24 text-xl";
+ let imgClass: string = "rounded-full object-cover w-12 h-12 max-w-12 max-h-12 text-lg";
+ if (size === "sm") imgClass = "rounded-full object-cover w-8 h-8 max-w-8 max-h-8 text-base";
+ if (size === "lg") imgClass = "rounded-full object-cover w-16 h-16 max-w-16 max-h-16 text-xl";
return (
-
+
{removable && (
{
+ openWidget(widgetData);
+ };
+
+ return (
+
+
+
+
+
+ {/* Hover tooltip */}
+
+
+
+
Complete your booking
+
+
+ Trip ID: {widgetData.tripId}
+
+
+
+
+
+ {threadId &&
+ tabs.map((tab, index) => (
+
+ {tab.name}
+
+ ))}
+
+ {/* Content area */}
+
+ {tabs.map((tab, index) => (
+
+ {tab.component}
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/thread/agent-inbox/hooks/use-interrupted-actions.tsx b/src/components/thread/agent-inbox/hooks/use-interrupted-actions.tsx
index 3cab16a9..8399e1cb 100644
--- a/src/components/thread/agent-inbox/hooks/use-interrupted-actions.tsx
+++ b/src/components/thread/agent-inbox/hooks/use-interrupted-actions.tsx
@@ -13,6 +13,7 @@ import { toast } from "sonner";
import { HumanInterrupt, HumanResponse } from "@langchain/langgraph/prebuilt";
import { END } from "@langchain/langgraph/web";
import { useStreamContext } from "@/providers/Stream";
+import { getJwtToken, GetUserId } from "@/services/authService";
interface UseInterruptedActionsInput {
interrupt: HumanInterrupt;
@@ -82,9 +83,20 @@ export default function useInterruptedActions({
const resumeRun = (response: HumanResponse[]): boolean => {
try {
+ // Get user ID from JWT token
+ const jwtToken = getJwtToken();
+ const userId = jwtToken ? GetUserId(jwtToken) : null;
+
+ // Include userId in the submission data
+ const submissionData: any = {};
+ if (userId) {
+ submissionData.userId = userId;
+ }
+
thread.submit(
- {},
+ submissionData,
{
+ streamSubgraphs: true,
command: {
resume: response,
},
@@ -256,6 +268,7 @@ export default function useInterruptedActions({
thread.submit(
{},
{
+ streamSubgraphs: true,
command: {
goto: END,
},
diff --git a/src/components/thread/chat.tsx b/src/components/thread/chat.tsx
new file mode 100644
index 00000000..4bbd062d
--- /dev/null
+++ b/src/components/thread/chat.tsx
@@ -0,0 +1,595 @@
+import { v4 as uuidv4 } from "uuid";
+import { FormEvent, useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { useStreamContext } from "@/providers/Stream";
+import { Button } from "../ui/button";
+import { Checkpoint, Message } from "@langchain/langgraph-sdk";
+import { AssistantMessage, AssistantMessageLoading } from "./messages/ai";
+import { HumanMessage } from "./messages/human";
+import {
+ DO_NOT_RENDER_ID_PREFIX,
+ ensureToolCallsHaveResponses,
+} from "@/lib/ensure-tool-responses";
+import { FlyoLogoSVG } from "../icons/langgraph";
+import { TooltipIconButton } from "./tooltip-icon-button";
+import {
+ LoaderCircle,
+ PanelRightClose,
+ PanelRightOpen,
+ Plus,
+ SquarePen,
+ XIcon,
+} from "lucide-react";
+import { parseAsBoolean, useQueryState } from "nuqs";
+
+import ThreadHistory from "./history";
+import { toast } from "sonner";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { Label } from "../ui/label";
+import { useFileUpload } from "@/hooks/use-file-upload";
+import { ContentBlocksPreview } from "./ContentBlocksPreview";
+import {
+ ArtifactContent,
+ ArtifactTitle,
+ useArtifactContext,
+ useArtifactOpen,
+} from "./artifact";
+import { LogoutButton } from "@/components/auth";
+import { getJwtToken, GetUserId } from "@/services/authService";
+import { updateThreadWithMessage } from "@/utils/thread-storage";
+import { InterruptManager } from "./messages/interrupt-manager";
+import { PersistentInterruptList } from "./messages/persistent-interrupt";
+import { useInterruptPersistenceContext } from "@/providers/InterruptPersistenceContext";
+import {
+ GenericInterruptView,
+ UIWidgetPreserver,
+} from "./messages/generic-interrupt";
+import { NonAgentFlowReopenButton } from "./NonAgentFlowReopenButton";
+
+// Add this utility function to filter out tool call messages with empty content
+function isDisplayableMessage(m: Message) {
+ if (m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX)) return false;
+ // Hide tool call messages with empty content
+ if (
+ (m.type === "ai" &&
+ (!m.content ||
+ (Array.isArray(m.content) && m.content.length === 0) ||
+ m.content === "") &&
+ m.tool_calls &&
+ m.tool_calls.length > 0) ||
+ m.type === "tool"
+ ) {
+ return false;
+ }
+
+ return true;
+}
+
+export function Thread() {
+ const [artifactContext, setArtifactContext] = useArtifactContext();
+ const interruptPersistence = useInterruptPersistenceContext();
+ const [artifactOpen, closeArtifact] = useArtifactOpen();
+
+ const [threadId, _setThreadId] = useQueryState("threadId");
+ const [assistantId] = useQueryState("assistantId");
+ const [chatHistoryOpen, setChatHistoryOpen] = useQueryState(
+ "chatHistoryOpen",
+ parseAsBoolean.withDefault(false),
+ );
+ const [hideToolCalls, setHideToolCalls] = useQueryState(
+ "hideToolCalls",
+ parseAsBoolean.withDefault(false),
+ );
+ const [input, setInput] = useState("");
+ const {
+ contentBlocks,
+ setContentBlocks,
+ handleFileUpload,
+ dropRef,
+ removeBlock,
+ resetBlocks,
+ dragOver,
+ handlePaste,
+ } = useFileUpload();
+ const [firstTokenReceived, setFirstTokenReceived] = useState(false); //TODO: remove if not needed
+ const isLargeScreen = useMediaQuery("(min-width: 1024px)");
+
+ const stream = useStreamContext();
+ const messages = stream.messages;
+ const isLoading = stream.isLoading;
+
+ // Track the last threadId to reset displayMessages on thread switch
+ const lastThreadId = useRef(threadId);
+ useEffect(() => {
+ lastThreadId.current = threadId;
+ }, [threadId, messages]);
+
+ // Optionally clear input and contentBlocks when threadId changes
+ useEffect(() => {
+ setInput("");
+ setContentBlocks([]);
+ if (threadId === null) {
+ // setDisplayMessages([]); // Remove this line //TODO: come back here
+ }
+ }, [threadId, setContentBlocks]);
+
+ const lastError = useRef(undefined);
+
+ const setThreadId = (id: string | null) => {
+ _setThreadId(id);
+
+ // close artifact and reset artifact context
+ closeArtifact();
+ setArtifactContext({});
+ };
+
+ useEffect(() => {
+ if (!stream.error) {
+ lastError.current = undefined;
+ return;
+ }
+ try {
+ const message = (stream.error as any).message;
+ if (!message || lastError.current === message) {
+ // Message has already been logged. do not modify ref, return early.
+ return;
+ }
+
+ // Message is defined, and it has not been logged yet. Save it, and send the error
+ lastError.current = message;
+ toast.error("An error occurred. Please try again.", {
+ description: (
+
+ Error: {message}
+
+ ),
+ richColors: true,
+ closeButton: true,
+ });
+ } catch {
+ // no-op
+ }
+ }, [stream.error]);
+
+ // TODO: this should be part of the useStream hook
+ const prevMessageLength = useRef(0);
+ useEffect(() => {
+ if (
+ messages.length !== prevMessageLength.current &&
+ messages?.length &&
+ messages[messages.length - 1].type === "ai"
+ ) {
+ setFirstTokenReceived(true);
+ }
+
+ prevMessageLength.current = messages.length;
+ }, [messages]);
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ if ((input.trim().length === 0 && contentBlocks.length === 0) || isLoading)
+ return;
+ setFirstTokenReceived(false);
+
+ // Get user ID from JWT token
+ const jwtToken = getJwtToken();
+ const userId = jwtToken ? GetUserId(jwtToken) : null;
+
+ const newHumanMessage: Message = {
+ id: uuidv4(),
+ type: "human",
+ content: [
+ ...(input.trim().length > 0 ? [{ type: "text", text: input }] : []),
+ ...contentBlocks,
+ ] as Message["content"],
+ };
+
+ const toolMessages = ensureToolCallsHaveResponses(stream.messages);
+
+ const context =
+ Object.keys(artifactContext).length > 0 ? artifactContext : undefined;
+
+ // Include userId in the submission
+ const submissionData: any = {
+ messages: [...toolMessages, newHumanMessage],
+ context,
+ };
+
+ if (userId) {
+ submissionData.userId = userId;
+ }
+
+ // Add metadata to ensure thread is properly saved and searchable
+ const submitOptions: any = {
+ streamMode: ["updates"],
+ streamSubgraphs: true,
+ optimisticValues: (prev: any) => ({
+ ...prev,
+ context,
+ messages: [...(prev.messages ?? []), ...toolMessages, newHumanMessage],
+ ui: prev.ui ?? [], // Preserve UI state
+ }),
+ };
+
+ // Add metadata for thread creation/updating
+ if (!threadId) {
+ // For new threads, add metadata to ensure they're searchable
+ submitOptions.metadata = {
+ assistant_id: assistantId,
+ graph_id: assistantId,
+ created_at: new Date().toISOString(),
+ user_id: userId || "anonymous",
+ };
+ }
+
+ console.log("Submitting with options:", submitOptions);
+
+ // Store thread information locally for fallback
+ const messageText =
+ typeof newHumanMessage.content === "string"
+ ? newHumanMessage.content
+ : Array.isArray(newHumanMessage.content)
+ ? newHumanMessage.content.find((c) => c.type === "text")?.text || ""
+ : "";
+
+ if (messageText && assistantId) {
+ // Update local storage with thread info
+ if (threadId) {
+ updateThreadWithMessage(
+ threadId,
+ messageText,
+ assistantId,
+ userId ? String(userId) : undefined,
+ );
+ } else {
+ // For new threads, we'll update after getting the thread ID from onThreadId callback
+ console.log("Will update local storage after thread ID is assigned");
+ }
+ }
+
+ stream.submit(submissionData, submitOptions);
+
+ setInput("");
+ setContentBlocks([]);
+ };
+
+ const handleRegenerate = (
+ parentCheckpoint: Checkpoint | null | undefined,
+ ) => {
+ // Do this so the loading state is correct
+ prevMessageLength.current = prevMessageLength.current - 1;
+ setFirstTokenReceived(false);
+ stream.submit(undefined, {
+ checkpoint: parentCheckpoint,
+ streamMode: ["updates"],
+ streamSubgraphs: true,
+ optimisticValues: (prev: any) => ({
+ ...prev,
+ ui: prev.ui ?? [], // Preserve UI state
+ }),
+ });
+ };
+
+ const chatStarted = !!threadId || !!messages.length;
+ const hasNoAIOrToolMessages = !messages.find(
+ (m: any) => m.type === "ai" || m.type === "tool",
+ );
+
+ return (
+
+
+
+
+
+
+
+ {!chatStarted ? (
+ // New thread layout - centered content
+
+ {/* Centered Logo */}
+
+
+
+ {/* Centered Chat Input */}
+