20 | An example prompt would look like this 21 |
22 |27 | I might say something like this in response 28 |
29 |37 | Prompts can be extremely open-ended or as specific as you’d 38 | like. 39 |
40 | {!isPromptViewOpen && ( 41 |30 | {line} 31 |
32 | ) 33 | }) 34 | 35 | // activates an active state for OpenResponse Logo if the user has stopped tying for 6 seconds. 36 | // useEffect captures the state of the input and debounces the timer when the user enters a key within 6 seconds of the last one 37 | // return statement destroys the setTimeout function 38 | useEffect(() => { 39 | if (!!userInput) { 40 | setIsUserTyping(true); 41 | const delayedUnshowLogoSuggestion = setTimeout(() => { 42 | setIsUserTyping(false); 43 | }, 6000); 44 | 45 | return () => {clearTimeout(delayedUnshowLogoSuggestion)} 46 | } else { 47 | setIsUserTyping(false); 48 | } 49 | }, [userInput]); 50 | 51 | // simulate first typing event - no explanation needed? 52 | // first, initialize the search prompt we want answered. 53 | // in order to loop through each character of the string, we need to manually iterate through the string using an index. 54 | // If the index is less than or equal to the length of the prompt, then we setUserInput to a substring - from index 0 to indexChar. 55 | // after that, increment indexChar. 56 | // If indexChar exceeds the length of initialPrompt (meaning it would be accessing garbage data), we need to clear the interval to prevent infinite function calls. 57 | useEffect(() => { 58 | let initialPrompt = "What does it mean to be conscious? Are you conscious?" 59 | let indexChar = 0; 60 | const typingInterval = setInterval(setInitialUserInputTextPerChar, 70); 61 | 62 | function setInitialUserInputTextPerChar() { 63 | if (indexChar <= initialPrompt.length) { 64 | setUserInput(initialPrompt.slice(0, indexChar)); 65 | indexChar++; 66 | } else { 67 | clearInterval(typingInterval); 68 | } 69 | } 70 | }, []); 71 | 72 | // animation mount. once component mounts, change the transform rotateX value to 0 degress. 73 | // achievable by setting a custom id target, #loaded 74 | useEffect(() => { 75 | setTimeout(() => { 76 | setIsLoaded(true); 77 | }, dialogueLoadedTimeoutOffset); 78 | }, []); 79 | 80 | function userInputChangeHandler(e) { 81 | setUserInput(e.target.value); 82 | } 83 | 84 | // since elements don't have an "enter to submit", we must create our own event listener that handles a submit whenever an Enter key is pressed while focused in the text area 85 | // attaching onKeyPress as an attribute passes an event, e 86 | // e has key values that we can use to check to see if an Enter key is pressed 87 | // namely e.key 88 | // since we need to check that shiftKey is also not pressed - e.shiftKey return a boolean, whether or not the shiftKey was pressed when the event was fired 89 | function enterHandler(e) { 90 | if (e.key === "Enter" && !e.shiftKey) { 91 | inputSubmissionHandler(e); 92 | } 93 | } 94 | 95 | async function inputSubmissionHandler(e) { 96 | e.preventDefault(); 97 | setIsFetchingResponse(true); 98 | const response = await fetch("/api/server", { 99 | method: "POST", 100 | headers: { 101 | "Content-Type": "application/json", 102 | }, 103 | body: JSON.stringify({ prompt: userInput }), 104 | }); 105 | if (response.ok) { 106 | const data = await response.json(); 107 | setIsFetchingResponse(false); 108 | setResponse(data.result); 109 | 110 | // dialogue history is a feature planned for future release - conversation-like UI is intended 111 | // setDialogueHistory(prevDialogueHistory => [ 112 | // ...prevDialogueHistory, 113 | // { 114 | // userInput: userInput, 115 | // response: data.result 116 | // } 117 | // ] 118 | // ); 119 | // console.log(dialogueHistory); 120 | } 121 | } 122 | 123 | return ( 124 |