4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T24d3,"use client"; import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react"; import styles from "./ai-state.module.css"; import { safeExternalHref } from "./safeExternalHref"; export type ThinkingVariant = "steps" | "reasoning" | "search" | "coding"; export type ThinkingStatus = "working" | "complete" | "error" | "unavailable"; export interface ThinkingRow { label: string; detail?: string; href?: string; additions?: number; deletions?: number; } export interface ThinkingStateProps { variant?: ThinkingVariant; status?: ThinkingStatus; rows: readonly ThinkingRow[]; query?: string; activeLabel?: string; completeLabel?: string; errorLabel?: string; unavailableLabel?: string; visibleCount?: number; moreCount?: number; defaultExpanded?: boolean; className?: string; } const sourceTones = [ "bg-accent text-accent-foreground", "bg-success text-white", "bg-primary text-primary-foreground", ]; function CheckIcon() { return ( ); } function SearchMark({ index }: { index: number }) { return ( ); } export function ThinkingState({ variant = "steps", status = "working", rows, query, activeLabel = variant === "search" ? "Searching" : variant === "coding" ? "Running tools" : "Thinking", completeLabel = variant === "search" ? "Search complete" : variant === "coding" ? "Tools complete" : "Thought through it", errorLabel = "Unable to continue", unavailableLabel = "Unavailable", visibleCount = rows.length, moreCount = 0, defaultExpanded = true, className = "", }: ThinkingStateProps) { const [expanded, setExpanded] = useState(defaultExpanded); const [selectedTool, setSelectedTool] = useState(null); const [liveStatus, setLiveStatus] = useState(""); const disclosureRef = useRef(null); const contentRef = useRef(null); const previousStatusRef = useRef(status); const contentId = useId(); const working = status === "working"; const statusLabel = status === "working" ? activeLabel : status === "complete" ? completeLabel : status === "error" ? errorLabel : unavailableLabel; const visibleRows = rows.slice(0, Math.max(0, visibleCount)); useEffect(() => { if (previousStatusRef.current !== status) { previousStatusRef.current = status; setLiveStatus(statusLabel); } }, [status, statusLabel]); function toggleExpanded() { if (expanded && contentRef.current?.contains(document.activeElement)) { disclosureRef.current?.focus(); } setExpanded((value) => !value); } function rowContent(row: ThinkingRow, index: number): ReactNode { const currentStep = working && index === visibleRows.length - 1; return ( <> {variant === "search" ? : null} {variant === "steps" ? ( currentStep ? ( ) : ( ) ) : null} {row.label} {row.detail ? ( {row.detail} ) : null} {row.additions !== undefined ? ( +{row.additions}{" "} −{row.deletions ?? 0} ) : null} ); } return (

{query ? (

{query}

) : null} {visibleRows.map((row, index) => { const shared = `flex min-h-8 w-full items-center gap-2 rounded-md px-1.5 py-1 text-start ${styles.fadeUp}`; const animationStyle = { animationDelay: `${index * 90}ms` } as CSSProperties; const href = safeExternalHref(row.href); if (variant === "search" && href) { return ( {rowContent(row, index)} ); } if (variant === "coding") { const selected = selectedTool === row.label; return ( ); } return (

{rowContent(row, index)}

); })} {moreCount > 0 ? ( +{moreCount} more ) : null}

{liveStatus}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/ai-core.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ai/ThinkingState.tsx","content":"$50","type":"registry:component","target":"@components/ai/ThinkingState.tsx"}],"className":"h-[70svh] min-h-80"}]]}]