Step 2 — Define proactive triggers

// useProactiveTriggers.ts
import { useEffect, useRef, useState } from 'react';
import posthog from 'posthog-js';

const POLL_INTERVAL_MS = 20_000;
// Short local suppression bridging the gap between a dismiss POST and the
// next poll observing the updated server state.
const LOCAL_RACE_WINDOW_MS = 30_000;

export function useProactiveTriggers() {
  const [trigger, setTrigger] = useState(null);
  const cooldowns = useRef(new Map());

  useEffect(() => {
    let cancelled = false;
    let timer: number | null = null;

    const poll = async () => {
      const sessionId = posthog.get_session_id?.();
      if (!sessionId) {
        timer = window.setTimeout(poll, POLL_INTERVAL_MS);
        return;
      }
      const conversationId = `proactive:${sessionId}`;
      try {
        const resp = await fetch(
          `${CONNECTOR_URL}/context/${PRODUCT_ID}/${encodeURIComponent(sessionId)}` +
            `?conversation_id=${encodeURIComponent(conversationId)}`,
        );
        if (resp.ok) {
          const json = await resp.json();
          const incoming = json?.proactive_trigger ?? null;
          if (incoming) {
            const suppressedUntil = cooldowns.current.get(incoming.trigger_id) ?? 0;
            if (Date.now() >= suppressedUntil && !cancelled) {
              setTrigger((prev) =>
                prev?.trigger_id === incoming.trigger_id ? prev : incoming,
              );
            }
          } else if (!cancelled) {
            setTrigger(null);
          }
        }
      } catch {/* network blip — retry next tick */}
      if (!cancelled) timer = window.setTimeout(poll, POLL_INTERVAL_MS);
    };

    timer = window.setTimeout(poll, 5_000); // short startup delay
    return () => { cancelled = true; if (timer) window.clearTimeout(timer); };
  }, []);

  const dismiss = () => {
    setTrigger((current) => {
      if (current) {
        cooldowns.current.set(current.trigger_id, Date.now() + LOCAL_RACE_WINDOW_MS);
      }
      return null;
    });
  };

  return { trigger, dismiss };
}

// ProactiveHelpToast.tsx
export function ProactiveHelpToast({ trigger, onAccept, onDismiss }) {
  const acceptLabel  = trigger.reply_option_labels?.[0] ?? 'Show me how';
  const dismissLabel = trigger.reply_option_labels?.[1] ?? 'No thanks';

  return (
    <div className="fixed bottom-24 right-6 w-80 rounded-lg border bg-background p-4 shadow-xl">
      <p className="text-sm">{trigger.body}</p>
      <div className="mt-3 flex justify-end gap-2">
        <button
          className="text-sm text-muted-foreground hover:underline"
          onClick={onDismiss}
        >
          {dismissLabel}
        </button>
        <button
          className="rounded bg-primary px-3 py-1.5 text-sm text-primary-foreground"
          onClick={onAccept}
        >
          {acceptLabel}
        </button>
      </div>
    </div>
  );
}

// proactiveAgentState.ts
export function emitAgentStateEvent(event: string) {
  const sessionId = posthog.get_session_id?.();
  if (!sessionId) return;
  const conversationId = `proactive:${sessionId}`;
  void fetch(
    `${CONNECTOR_URL}/agent_state/${PRODUCT_ID}/${encodeURIComponent(conversationId)}`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ event }),
    },
  ).catch(() => {/* fire-and-forget */});
}

// DifyChatWindow.tsx (relevant excerpt)
useEffect(() => {
  if (!pendingPrefill || !sessionId) return;

  let fullContent = '';
  let assistantMessageId: string | null = null;

  fetch("https://api.dify.ai/v1/chat-messages", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${DIFY_APP_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      inputs: { session_id: sessionId },
      query: pendingPrefill,
      response_mode: "streaming",   // streaming is recommended for chat UX
      conversation_id: null,        // null starts a new conversation
      user: currentUserId,
    }),
  })
  .then(async (res) => {
    const reader = res.body!.getReader();
    const decoder = new TextDecoder();

    // Create a placeholder assistant message to stream into
    assistantMessageId = crypto.randomUUID();
    setMessages((prev) => [
      ...prev,
      { id: assistantMessageId!, role: "assistant", content: "" },
    ]);

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value, { stream: true });
      for (const line of chunk.split('\n')) {
        if (!line.startsWith('data: ')) continue;
        try {
          const event = JSON.parse(line.slice(6));

          // Accumulate text chunks
          if (event.event === 'message' && event.answer) {
            fullContent += event.answer;
            setMessages((prev) =>
              prev.map((m) =>
                m.id === assistantMessageId
                  ? { ...m, content: fullContent }
                  : m,
              ),
            );
          }

          // Stream complete — parse [TOUR:<id>] tag
          if (event.event === 'message_end') {
            const tourMatch = fullContent.match(/\[TOUR:([\w-]+)\]/);
            if (tourMatch) {
              const rawId = tourMatch[1];
              const cleanContent = fullContent
                .replace(/\[TOUR:[\w-]+\]/g, '')
                .trim();
              const tourId = rawId === 'none' ? undefined : rawId;
              setMessages((prev) =>
                prev.map((m) =>
                  m.id === assistantMessageId
                    ? {
                        ...m,
                        content: cleanContent,
                        ...(tourId ? { tourId } : {}),
                      }
                    : m,
                ),
              );
            }
            // Persist conversation_id for follow-up messages
            if (event.conversation_id) {
              setConversationId(event.conversation_id);
            }
          }
        } catch {
          // Malformed SSE line — skip
        }
      }
    }
  });
}, [pendingPrefill, sessionId]);