\r\n

✨ Vibe Output

\r\n {result && (\r\n setShowPrompt(!showPrompt)}\r\n className=\"text-xs opacity-70 hover:opacity-100 transition-opacity\"\r\n >\r\n {showPrompt ? \"Hide\" : \"Show\"} Prompt\r\n \r\n )}\r\n

\r\n \r\n {/* Query Input */}\r\n

\r\n

\r\n setQuery(e.target.value)}\r\n onKeyDown={(e) => e.key === \"Enter\" && !generating && handleGenerate()}\r\n placeholder=\"What should the vibe create?\"\r\n className=\"flex-1 px-4 py-2 rounded-lg bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 text-white placeholder-white/50 text-sm\"\r\n />\r\n \r\n {generating ? \"⏳\" : \"🎲\"}\r\n \r\n

\r\n

\r\n \r\n {/* Output Area */}\r\n

\r\n {generating ? (\r\n

\r\n

Synthesizing the vibe...

\r\n

\r\n \r\n \r\n \r\n

\r\n

\r\n ) : result ? (\r\n

\r\n {showPrompt && (\r\n

\r\n

SYSTEM PROMPT:

\r\n

\r\n                  {result.prompt}\r\n

\r\n

\r\n )}\r\n \r\n

\r\n

\r\n RESPONSE:\r\n {result.token_count} tokens\r\n

\r\n

\r\n {result.response}\r\n

\r\n

\r\n \r\n

\r\n {new Date(result.timestamp).toLocaleTimeString()}\r\n

\r\n

\r\n ) : (\r\n

\r\n

🎨

\r\n

No vibe generated yet

\r\n

Stack some cards and hit generate!

\r\n

\r\n )}\r\n

\r\n

\r\n );\r\n}\r\n","deleted","label",[175,156],"frontend","permalink","https://www.val.town/x/jjg/multiplayer-prompting/code/frontend/VibeOutput.tsx","extension","actionData","errors"]