Function SimpleChartRecBox

src/views/SimpleChartRecBox.tsx:119–1796

({ onInputFocus })

};

export const SimpleChartRecBox: FC<{ onInputFocus?: () => void }> = function ({ onInputFocus }) {

    const tables = useSelector((state: DataFormulatorState) => state.tables);
    const focusedId = useSelector((state: DataFormulatorState) => state.focusedId);
    const charts = useSelector(dfSelectors.getAllCharts);
    const conceptShelfItems = useSelector((state: DataFormulatorState) => state.conceptShelfItems);
    const config = useSelector((state: DataFormulatorState) => state.config);
    const activeModel = useSelector(dfSelectors.getActiveModel);
    const draftNodes = useSelector((state: DataFormulatorState) => state.draftNodes);
    const chartThumbnails = useSelector((state: DataFormulatorState) => state.chartThumbnails) || {};

    const theme = useTheme();
    const { t } = useTranslation();
    const dispatch = useDispatch<AppDispatch>();

    const [chatPrompt, setChatPrompt] = useState("");
    // ── Clarification accumulated answers ────────────────────────────
    // When the agent asks one or more clarification questions, clicking an
    // option does NOT submit immediately and does NOT mutate the chat box.
    // We just track the selections here. The agent is invoked when the LAST
    // question is answered via clicks, OR when the user explicitly hits
    // Send / Enter (at which point the selections are formatted into a
    // "Selected answers: ..." prefix and prepended to the typed message).
    const [clarifyAnswers, setClarifyAnswers] = useState<Record<number, ClarificationResponse>>({});
    // Guards against double-submit when the user rapidly clicks the last
    // option twice (state updates are async, so a second click can re-enter
    // handleSelectAnswer with a stale closure before pendingClarification
    // clears). Tracks the draftId we've already auto-submitted for.
    const clarifySubmittedRef = useRef<string | null>(null);
    const [isChatFormulating, setIsChatFormulating] = useState(false);
    const [mentionedTableIds, setMentionedTableIds] = useState<string[]>([]);
    const [mentionDropdownOpen, setMentionDropdownOpen] = useState(false);
    const [mentionHighlightIdx, setMentionHighlightIdx] = useState(0);
    const [selectedAgent, setSelectedAgent] = useState<'explore' | 'report'>('explore');
    const [attachedImages, setAttachedImages] = useState<string[]>([]);
    const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
    const agentAbortRef = useRef<AbortController | null>(null);
    const userChartFocusLockedRef = useRef(false);
    const lastAutoFocusedChartIdRef = useRef<string | null>(null);
    // Whether we've already auto-focused an artifact during the current
    // agent run. We only jump focus once per run (to the FIRST generated
    // chart), so the user isn't yanked around as further charts stream in.
    // Subsequent artifacts rely on the "freshly created" highlight + NEW
    // tag for discoverability instead.
    const firstFocusedThisRunRef = useRef(false);

    useEffect(() => {
        if (!isChatFormulating) {
            userChartFocusLockedRef.current = false;
            lastAutoFocusedChartIdRef.current = null;
            firstFocusedThisRunRef.current = false;
            return;
        }
        if (focusedId?.type === 'chart') {
            if (focusedId.chartId !== lastAutoFocusedChartIdRef.current) {
                userChartFocusLockedRef.current = true;
            }
        } else {