+ Session ID: {sessionId}
+
+ π‘ The AI will generate responses in this format:
+ [CharacterName] Response text here.
+ Each response is automatically parsed and sent privately
+ to the respective character.
+
Private character-storyteller interactions
+ {/* Demo Session Quick Access */} ++ Jump right into a pre-configured adventure with two characters already created! +
+Start a new game as the storyteller
diff --git a/frontend/src/components/StorytellerView.js b/frontend/src/components/StorytellerView.js index 6e93fef..d7b4ef5 100644 --- a/frontend/src/components/StorytellerView.js +++ b/frontend/src/components/StorytellerView.js @@ -12,6 +12,16 @@ function StorytellerView({ sessionId }) { const [currentScene, setCurrentScene] = useState(''); const [isConnected, setIsConnected] = useState(false); const [isGeneratingSuggestion, setIsGeneratingSuggestion] = useState(false); + + // Context-aware response state + const [selectedCharacterIds, setSelectedCharacterIds] = useState([]); + const [contextualResponseType, setContextualResponseType] = useState('scene'); + const [contextualAdditionalContext, setContextualAdditionalContext] = useState(''); + const [contextualModel, setContextualModel] = useState('gpt-4o'); + const [isGeneratingContextual, setIsGeneratingContextual] = useState(false); + const [generatedContextualResponse, setGeneratedContextualResponse] = useState(''); + const [showContextualGenerator, setShowContextualGenerator] = useState(false); + const wsRef = useRef(null); useEffect(() => { @@ -137,6 +147,108 @@ function StorytellerView({ sessionId }) { } }; + // Toggle character selection for contextual response + const toggleCharacterSelection = (charId) => { + setSelectedCharacterIds(prev => + prev.includes(charId) + ? prev.filter(id => id !== charId) + : [...prev, charId] + ); + }; + + // Select all characters with pending messages + const selectAllPending = () => { + const pendingIds = Object.entries(characters) + .filter(([_, char]) => char.pending_response) + .map(([id, _]) => id); + setSelectedCharacterIds(pendingIds); + }; + + // Generate contextual response + const generateContextualResponse = async () => { + if (selectedCharacterIds.length === 0 || isGeneratingContextual) return; + + setIsGeneratingContextual(true); + setGeneratedContextualResponse(''); + + try { + const response = await fetch( + `${API_URL}/sessions/${sessionId}/generate_contextual_response`, + { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + character_ids: selectedCharacterIds, + response_type: contextualResponseType, + model: contextualModel, + additional_context: contextualAdditionalContext || null + }) + } + ); + + if (!response.ok) { + throw new Error('Failed to generate contextual response'); + } + + const data = await response.json(); + + // If individual responses were sent, show confirmation + if (data.response_type === 'individual' && data.individual_responses_sent) { + const sentCount = Object.keys(data.individual_responses_sent).length; + const sentNames = Object.keys(data.individual_responses_sent).join(', '); + + if (sentCount > 0) { + alert(`β Individual responses sent to ${sentCount} character(s): ${sentNames}\n\nThe responses have been delivered privately to each character.`); + + // Clear selections after successful send + setSelectedCharacterIds([]); + setContextualAdditionalContext(''); + + // Update character states to reflect no pending responses + setCharacters(prev => { + const updated = { ...prev }; + Object.keys(data.individual_responses_sent).forEach(charName => { + const charEntry = Object.entries(updated).find(([_, char]) => char.name === charName); + if (charEntry) { + const [charId, char] = charEntry; + updated[charId] = { ...char, pending_response: false }; + } + }); + return updated; + }); + } + + // Still show the full generated response for reference + setGeneratedContextualResponse(data.response); + } else { + // Scene description - just show the response + setGeneratedContextualResponse(data.response); + } + } catch (error) { + console.error('Error generating contextual response:', error); + alert('Failed to generate contextual response. Please try again.'); + } finally { + setIsGeneratingContextual(false); + } + }; + + // Use generated response as scene + const useAsScene = () => { + if (!generatedContextualResponse) return; + setSceneText(generatedContextualResponse); + setShowContextualGenerator(false); + }; + + // Copy session ID to clipboard + const copySessionId = () => { + navigator.clipboard.writeText(sessionId).then(() => { + alert('β Session ID copied to clipboard!'); + }).catch(err => { + console.error('Failed to copy:', err); + alert('Failed to copy session ID. Please copy it manually.'); + }); + }; + const selectedChar = selectedCharacter ? characters[selectedCharacter] : null; const pendingCount = Object.values(characters).filter(c => c.pending_response).length; @@ -145,7 +257,14 @@ function StorytellerView({ sessionId }) {Session ID: {sessionId}
+ Session ID: {sessionId}
+
{isConnected ? 'β Connected' : 'β Disconnected'} @@ -197,6 +316,136 @@ function StorytellerView({ sessionId }) { )}
+ Generate a response that takes into account multiple characters' actions and messages. + Perfect for creating scenes or responses that incorporate everyone's contributions. +
+ + {/* Character Selection */} +
+ π‘ The AI will generate responses in this format: [CharacterName] Response text here. Each response is automatically parsed and sent privately to the respective character.
+