[wip] Prompting QR

[hthillman]

PR Type

Enhancement

---

Description

• Add mobile prompt panel component

• Fetch and display live prompt queue

• Submit prompts via stream API

• New mobile prompt page route

---

Changes walkthrough 📝

Relevant files

Enhancement

MobilePromptPanel.tsx Add mobile prompt panel component                                                apps/app/components/stream/MobilePromptPanel.tsx Introduce MobilePromptPanel component Manage prompt queue, avatars, and throttling Fetch stream data in useEffect Handle prompt submission with toasts +144/-0  page.tsx Add mobile prompt page route                                                          apps/app/mobile-prompt/[streamKey]/page.tsx Create mobile prompt page route Import and render MobilePromptPanel Pass streamKey from route params +16/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pipelines-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2025 11:21pm

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Live updates The prompt queue is only fetched once on mount, so new prompts won’t appear. Consider implementing polling or a WebSocket subscription to keep the queue updated in real time. useEffect(() => { const fetchStreamData = async () => { try { const { data, error } = await getStream(streamKey); if (error) { toast.error("Failed to fetch stream data"); return; } setStreamData(data); } catch (error) { toast.error("Error connecting to stream"); } }; if (streamKey) { fetchStreamData(); } }, [streamKey]); Unused throttling The isThrottled and throttleTimeLeft states are declared but never updated or used, so throttling appears incomplete. Implement or remove this logic. const [isThrottled, setIsThrottled] = useState(false); const [throttleTimeLeft, setThrottleTimeLeft] = useState(0); const [streamData, setStreamData] = useState<any>(null); Data synchronization Maintaining promptQueue, displayedPrompts, promptAvatarSeeds, and userPromptIndices as separate parallel arrays can lead to mismatches. Consider consolidating into a single array of prompt objects. const [promptQueue, setPromptQueue] = useState<PromptItem[]>([]); const [displayedPrompts, setDisplayedPrompts] = useState<string[]>([]); const [promptAvatarSeeds, setPromptAvatarSeeds] = useState<string[]>([]); const [userPromptIndices, setUserPromptIndices] = useState<boolean[]>([]); const [promptValue, setPromptValue] = useState(""); const [isThrottled, setIsThrottled] = useState(false); const [throttleTimeLeft, setThrottleTimeLeft] = useState(0); const [streamData, setStreamData] = useState<any>(null);

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Prevent duplicate form submissions Prevent duplicate submissions by tracking a submission state. Introduce an isSubmitting flag to disable the form while the request is in flight and re-enable it after completion. apps/app/components/stream/MobilePromptPanel.tsx [45-77] +const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); - if (!streamData?.gateway_host || !promptValue.trim()) return; - + if (isSubmitting || !streamData?.gateway_host || !promptValue.trim()) return; + setIsSubmitting(true); try { const response = await updateParams({ body: { prompt: promptValue }, host: streamData.gateway_host, - streamKey: streamKey, + streamKey, }); - if (response.status === 200 || response.status === 201) { - // Add to prompt queue - ... + if (response.ok) { + // Add to prompt queue... } else { toast.error("Failed to send prompt"); } - } catch (error) { + } catch { toast.error("Error sending prompt"); + } finally { + setIsSubmitting(false); } }; Suggestion importance[1-10]: 7 __ Why: The form submission handler can cause duplicate requests; adding an isSubmitting flag properly disables further submits and improves UX.	Medium
General	Prevent state update after unmount Avoid setting state on an unmounted component by tracking a mounted flag. This prevents memory leaks and React warnings if the component unmounts before the fetch completes. apps/app/components/stream/MobilePromptPanel.tsx [26-43] useEffect(() => { + let isMounted = true; const fetchStreamData = async () => { try { const { data, error } = await getStream(streamKey); if (error) { toast.error("Failed to fetch stream data"); return; } - setStreamData(data); - } catch (error) { - toast.error("Error connecting to stream"); + if (isMounted) setStreamData(data); + } catch { + if (isMounted) toast.error("Error connecting to stream"); } }; - - if (streamKey) { - fetchStreamData(); - } + if (streamKey) fetchStreamData(); + return () => { isMounted = false; }; }, [streamKey]); Suggestion importance[1-10]: 6 __ Why: Tracking a mounted flag prevents setting state on unmounted components and avoids potential memory leaks or React warnings, improving robustness.	Low
	Combine prompt states into one array Consolidate these parallel state arrays into a single array of objects so that each prompt’s data stays in sync. This reduces the risk of index mismatches and simplifies updates. apps/app/components/stream/MobilePromptPanel.tsx [16-19] -const [promptQueue, setPromptQueue] = useState<PromptItem[]>([]); -const [displayedPrompts, setDisplayedPrompts] = useState<string[]>([]); -const [promptAvatarSeeds, setPromptAvatarSeeds] = useState<string[]>([]); -const [userPromptIndices, setUserPromptIndices] = useState<boolean[]>([]); +interface PromptEntry { + item: PromptItem; + displayed: boolean; + avatarSeed: string; + isUser: boolean; +} +const [promptEntries, setPromptEntries] = useState<PromptEntry[]>([]); +// Example update: +setPromptEntries(prev => [ + ...prev, + { item: newPrompt, displayed: true, avatarSeed: Math.random().toString(), isUser: true }, +]); Suggestion importance[1-10]: 5 __ Why: Consolidating parallel state arrays into a single array of objects reduces the risk of index mismatches and simplifies updates, but is an optional refactor.	Low
	Use response.ok for checks Simplify the success check by using the response.ok property rather than enumerating status codes. This covers all 2xx ranges and makes the code more concise. apps/app/components/stream/MobilePromptPanel.tsx [56-72] -if (response.status === 200 || response.status === 201) { +if (response.ok) { // Add to prompt queue ... } else { toast.error("Failed to send prompt"); } Suggestion importance[1-10]: 4 __ Why: Using response.ok simplifies the status check and covers all 2xx responses, making the code concise though this change is mostly stylistic.	Low