MITMediaLabAffectiveComputing · radkinz · Jun 13, 2023 · Jun 13, 2023
diff --git a/README.md b/README.md
@@ -119,7 +119,7 @@ Edit the `WORDS` list located in [wordlist.ts](react/src/constants/wordlist.ts).
 The emotional agent's behavior is defined in [react/src/lib/enhancedfeedback.ts](react/src/lib/enhancedfeedback.ts). The Teddy character comes with several built-in animations, defined in `FeedbackAnimation`. You may modify the `HELPFUL_TEDDY` object to change what Teddy says or the animations he performs on each trigger. Note that you can also define other "personality" objects based off of `HELPFUL_TEDDY` and return different personalities from the `getEmotionalFeedback()` function based off various circumstances such as round number or randomly decided user bucket (in which case, you'll want to copy `getHasEnhancedFeedback()` in [react/src/lib/localStorage.ts](react/src/lib/localStorage.ts) and make a similar function that determines what personality Teddy should use. Be sure to add a call to your new function in `getUserData()`!)
 
 ### Toggling between AI and hard-coded messages
-Depending on the state of the variable `AI_text_status` as defined in [react/src/App.tsx](react/src/App.tsx), the emotional agent will either send messages from ChatGPT-4 or a hard-coded object which is defined in [react/src/lib/enhancedfeedback.ts](react/src/lib/enhancedfeedback.ts). This `HELPFUL_TEDDY` object also contains all the prompts that are sent to the ChatGPT API.  
+Depending on the state of the variable `ChatGPTStatus` as defined in [react/src/App.tsx](react/src/App.tsx), the emotional agent will either send messages from ChatGPT-4 or a hard-coded object which is defined in [react/src/lib/enhancedfeedback.ts](react/src/lib/enhancedfeedback.ts). This `HELPFUL_TEDDY` object also contains all the prompts that are sent to the ChatGPT API.  
 
 ### Changing Pre-game or Post-game survey questions
 

diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -52,11 +52,11 @@ import { PostSurveyEmotionalStateModal } from './components/modals/postsurvey/Po
 
 import {prompt} from './components/FeedbackMessage'
 
-let Mesagee = "Enjoy Wordle - you've got this!"
-let PrevMesage = "Enjoy Wordle - you've got this!"
+let CurrentMessage = "Enjoy Wordle - you've got this!"
+let PreviousMessage = "Enjoy Wordle - you've got this!"
 
 export const onTextChange = () => {
-  PrevMesage = Mesagee
+  PreviousMessage = CurrentMessage
 }
 
 function App() {
@@ -88,13 +88,13 @@ function App() {
 
   //API STATE
   const [isCallingtotheBackend, setisCallingtotheBackend] = useState(false)
-  let TextStatus = true
-  let AI_text_status = true
+  let TextStatus = true //whether to show the text animation or not
+  let ChatGPTStatus = true //wehther to use the hardcoded or chatgptresponses
 
   //handle api return
   const onSuccess = (resp: any) => {
-    PrevMesage = Mesagee
-    Mesagee = resp
+    PreviousMessage = CurrentMessage
+    CurrentMessage = resp
     setisCallingtotheBackend(false)
   }
 
@@ -309,6 +309,12 @@ function App() {
   TextStatus = false
 
   const onEnter = () => {
+    if (getHasEnhancedFeedback()) {
+      ChatGPTStatus = true
+    } else {
+      ChatGPTStatus = false
+    }
+
     if (isGameWon || isGameLost || isCallingtotheBackend) {
       return
     }
@@ -322,7 +328,7 @@ function App() {
 
     if (!isWordInWordList(currentGuess)) {
       setisCallingtotheBackend(true);
-      logGuess(currentGuess, guesses, false, getSolution(), currentSolutionIndex, prompt, AI_text_status, onSuccess)
+      logGuess(currentGuess, guesses, false, getSolution(), currentSolutionIndex, prompt, ChatGPTStatus, onSuccess)
       setInvalidGuessCount(invalidGuessCount + 1)
       setCurrentRowClass('jiggle')
       if (!getHasEnhancedFeedback()) {
@@ -338,7 +344,7 @@ function App() {
     // enforce hard mode - all guesses must contain all previously revealed letters
     if (isHardMode) {
       setisCallingtotheBackend(true);
-      logGuess(currentGuess, guesses, false, getSolution(), currentSolutionIndex, prompt, AI_text_status, onSuccess)
+      logGuess(currentGuess, guesses, false, getSolution(), currentSolutionIndex, prompt, ChatGPTStatus, onSuccess)
       const firstMissingReveal = findFirstUnusedReveal(currentGuess, guesses)
       if (firstMissingReveal) {
         setCurrentRowClass('jiggle')
@@ -364,7 +370,7 @@ function App() {
     ) {
 
       setisCallingtotheBackend(true);
-      logGuess(currentGuess, guesses, true, getSolution(), currentSolutionIndex, prompt, AI_text_status, onSuccess)
+      logGuess(currentGuess, guesses, true, getSolution(), currentSolutionIndex, prompt, ChatGPTStatus, onSuccess)
       setGuesses([...guesses, currentGuess])
       setCurrentGuess('')
 
@@ -393,7 +399,7 @@ function App() {
     }
   }
 
-  if (Mesagee != PrevMesage) {
+  if (CurrentMessage != PreviousMessage) {
     TextStatus = true
   } else {
     TextStatus = false
@@ -415,9 +421,9 @@ function App() {
           }
                            currentRound={currentSolutionIndex}
                            isIdle={isIdle}
-                           Message = {Mesagee}
+                           Message = {CurrentMessage}
                            TextStatus = {TextStatus}
-                           ai_text_status = {AI_text_status}
+                           ChatGPTStatus = {ChatGPTStatus}
                            onFeedback={onFeedback}
           />
           <Grid
@@ -581,7 +587,7 @@ function App() {
           isGameWon={isGameWon}
           numberOfGuessesMade={guesses.length}
           TextStatus={TextStatus}
-          ai_text_status={AI_text_status}
+          ChatGPTStatus={ChatGPTStatus}
         />
         <SettingsModal
           isOpen={isSettingsModalOpen}

diff --git a/react/src/components/FeedbackMessage.tsx b/react/src/components/FeedbackMessage.tsx
@@ -21,7 +21,7 @@ type Props = {
   isIdle: boolean
   Message: string
   TextStatus: boolean
-  ai_text_status: boolean
+  ChatGPTStatus: boolean
   onFeedback: (key: string) => void
 }
 
@@ -35,7 +35,7 @@ const modIndex = function (list: any[], index: number) {
 
 let turnStartTime: number | null = null
 
-export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRound, isIdle, Message, TextStatus, ai_text_status, onFeedback }: Props) => {
+export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRound, isIdle, Message, TextStatus, ChatGPTStatus, onFeedback }: Props) => {
 
   const [message, setMessage] = useState('')
 
@@ -103,20 +103,23 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     const currentIndex = guesses.length
     if (!getHasEnhancedFeedback()) {
-      setMessage('Guess ' + (currentIndex + 1) + ' of 6')
+      prompt = 'Guess ' + (currentIndex + 1) + ' of 6'
+      if (currentIndex + 1 == 6) {
+        prompt = "Enjoy Wordle - you've got this!"
+      }
       onFeedback('default' + currentIndex)
       return
     }
 
     if (!isShown) {
-      setMessage('')
+      prompt = ''
       return
     }
 
     if (guesses.length && getNumberOfRemainingWords(guesses) <= 5 && !shownMessageLog.includes('reallyclose')) {
       setFeedback(getEmotionalFeedback().onReallyClose)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().onReallyClose.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().onReallyClose.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().onReallyClose.text)
       }
@@ -126,8 +129,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     if (turnDuration != null && turnDuration < 4000 && !shownMessageLog.includes('fast')) {
       setFeedback(getEmotionalFeedback().onFastGuess)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().onFastGuess.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().onFastGuess.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().onFastGuess.text)
       }
@@ -137,8 +140,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     if (turnDuration != null && turnDuration > 60000 && !shownMessageLog.includes('slow')) {
       setFeedback(getEmotionalFeedback().onSlowGuess)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().onSlowGuess.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().onSlowGuess.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().onSlowGuess.text)
       }
@@ -148,8 +151,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     if (currentIndex == 0) {
       setFeedback(getEmotionalFeedback().firstGuess)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().firstGuess.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().firstGuess.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().firstGuess.text)
         return
@@ -159,8 +162,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     if (currentIndex == 4) {
       setFeedback(getEmotionalFeedback().fifthGuess)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().fifthGuess.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().fifthGuess.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().fifthGuess.text)
         return
@@ -170,8 +173,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
     }
     if (currentIndex == 5) {
       setFeedback(getEmotionalFeedback().sixthGuess)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().sixthGuess.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().sixthGuess.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().sixthGuess.text)
         return
@@ -182,8 +185,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     if (currentIndex == 6) {
       setFeedback(getEmotionalFeedback().newGame)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().newGame.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().newGame.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().newGame.text)
         return
@@ -192,8 +195,8 @@ export const FeedbackMessage = ({ guesses, invalidGuessCount, isShown, currentRo
 
     if (guesses.length && getNumberOfRemainingWords(guesses) <= 100 && !shownMessageLog.includes('gettingclose')) {
       setFeedback(getEmotionalFeedback().onGettingClose)
-      if (ai_text_status) {
-        prompt = getEmotionalFeedback().onGettingClose.ai_text
+      if (ChatGPTStatus) {
+        prompt = getEmotionalFeedback().onGettingClose.ChatGPTResponse
       } else {
         prompt = get_random(getEmotionalFeedback().onGettingClose.text)
         return

diff --git a/react/src/components/ModalFeedbackMessage.tsx b/react/src/components/ModalFeedbackMessage.tsx
@@ -11,7 +11,7 @@ type Props = {
   isIntro: boolean
   isOpen: boolean
   TextStatus: boolean
-  ai_text_status: boolean
+  ChatGPTStatus: boolean
 }
 
 const get_random = function (list: any[]) {
@@ -21,7 +21,7 @@ const get_random = function (list: any[]) {
 import { onTextChange } from '../App'
 
 export const ModalFeedbackMessage = ({
-                                       numberOfGuessesMade, didWin, isIntro, isOpen, TextStatus, ai_text_status
+                                       numberOfGuessesMade, didWin, isIntro, isOpen, TextStatus, ChatGPTStatus
                                      }: Props) => {
 
   const [message, setMessage] = useState('')
@@ -53,8 +53,8 @@ export const ModalFeedbackMessage = ({
       }
     }
 
-    if (ai_text_status) {
-      setMessage(feedback.ai_text)
+    if (ChatGPTStatus) {
+      setMessage(feedback.ChatGPTResponse)
     } else{
       setMessage(get_random(feedback.text))
     }

diff --git a/react/src/components/modals/GameFinishedModal.tsx b/react/src/components/modals/GameFinishedModal.tsx
@@ -14,7 +14,7 @@ type Props = {
   isGameWon: boolean
   numberOfGuessesMade: number
   TextStatus: boolean
-  ai_text_status: boolean
+  ChatGPTStatus: boolean
 }
 
 export const GameFinishedModal = ({
@@ -24,7 +24,7 @@ export const GameFinishedModal = ({
                                     isGameWon,
                                     numberOfGuessesMade,
                                     TextStatus,
-                                    ai_text_status
+                                    ChatGPTStatus
                                   }: Props) => {
 
   return (
@@ -46,7 +46,7 @@ export const GameFinishedModal = ({
       )}
 
       <ModalFeedbackMessage numberOfGuessesMade={numberOfGuessesMade} didWin={isGameWon} isIntro={false}
-                            isOpen={isOpen} TextStatus={TextStatus} ai_text_status={ai_text_status}/>
+                            isOpen={isOpen} TextStatus={TextStatus} ChatGPTStatus={ChatGPTStatus}/>
       <div className='h1'>
       </div>
       {/*{isGameWon && (*/}

diff --git a/react/src/lib/enhancedfeedback.ts b/react/src/lib/enhancedfeedback.ts
@@ -8,7 +8,7 @@ export enum FeedbackAnimation {
 }
 
 export type FeedbackResponse = {
-  ai_text: string
+  ChatGPTResponse: string
   text: string[]
   animation: FeedbackAnimation
 }
@@ -50,35 +50,35 @@ export const getFeedbackKey = (feedbackResponse: FeedbackResponse): string | nul
 }
 
 const HELPFUL_TEDDY = {
-  onReallyClose: { ai_text: 'Say a new 20 character empathetic message to someone who is close to geussing the right word', text: ["You’re so, so close. You got this!"],animation: FeedbackAnimation.WaveShort },
-  onFastGuess: { ai_text: 'Say a new 20 character empathetic message to someone who guessed a word in wordle really fast', text: ['Wow, you\'re so fast! Incredible!'], animation: FeedbackAnimation.WaveShort },
-  onSlowGuess: { ai_text: 'Say a new 20 character empathetic message to someone who took a long time to guess a word', text: ['Taking your time really paid off!'], animation: FeedbackAnimation.WaveShort },
-  firstGuess: { ai_text: 'Say a new 20 character empathetic message to someone after their first wordle attempt',text: ['Good luck! You got this!','Another round! You can do this!','You\'ve got the hang of this!', 'I know you can get this one!'], animation: FeedbackAnimation.WaveShort },
+  onReallyClose: { ChatGPTResponse: 'Say a new 20 character empathetic message to someone who is close to geussing the right word', text: ["You’re so, so close. You got this!"],animation: FeedbackAnimation.WaveShort },
+  onFastGuess: { ChatGPTResponse: 'Say a new 20 character empathetic message to someone who guessed a word in wordle really fast', text: ['Wow, you\'re so fast! Incredible!'], animation: FeedbackAnimation.WaveShort },
+  onSlowGuess: { ChatGPTResponse: 'Say a new 20 character empathetic message to someone who took a long time to guess a word', text: ['Taking your time really paid off!'], animation: FeedbackAnimation.WaveShort },
+  firstGuess: { ChatGPTResponse: 'Say a new 20 character empathetic message to someone after their first wordle attempt',text: ['Good luck! You got this!','Another round! You can do this!','You\'ve got the hang of this!', 'I know you can get this one!'], animation: FeedbackAnimation.WaveShort },
   fifthGuess: 
-    { ai_text: 'Say a new 20 character empathetic message to someone on their second to last wordle attempt', text: ['Two guesses left, that\'s plenty of time!', 'Last two guesses! Trust yourself, you got this.','This is a tough one, but you\'re close!','This one can be hard, but I believe in you!'], animation: FeedbackAnimation.Idle },
+    { ChatGPTResponse: 'Say a new 20 character empathetic message to someone on their second to last wordle attempt', text: ['Two guesses left, that\'s plenty of time!', 'Last two guesses! Trust yourself, you got this.','This is a tough one, but you\'re close!','This one can be hard, but I believe in you!'], animation: FeedbackAnimation.Idle },
   sixthGuess: 
-    { ai_text: 'Say a new 20 character empathetic message to someone on their last wordle attempt', text: ['Just breathe and think it through. You got this!','Stay calm and use all the facts you uncovered.','Your final chance. You can do it!','Don\'t give up now! Stay calm and breathe.'], animation: FeedbackAnimation.Wave }
+    { ChatGPTResponse: 'Say a new 20 character empathetic message to someone on their last wordle attempt', text: ['Just breathe and think it through. You got this!','Stay calm and use all the facts you uncovered.','Your final chance. You can do it!','Don\'t give up now! Stay calm and breathe.'], animation: FeedbackAnimation.Wave }
   ,
   newGame: 
-    { ai_text: 'Say a new 20 character empathetic message to someone starting a new wordle game and is on their first geussS',text: ["You got this!"],animation: FeedbackAnimation.WaveShort }
+    { ChatGPTResponse: 'Say a new 20 character empathetic message to someone starting a new wordle game and is on their first geussS',text: ["You got this!"],animation: FeedbackAnimation.WaveShort }
   ,
   onGettingClose: 
-    { ai_text: 'Say a new 20 character empathetic message to someone whose close to geussing the right word',text: ['You\'re getting closer!','Oh nice, that really narrowed the field!','Ooh, you\'re getting close now!','That was a really good guess!'],animation: FeedbackAnimation.WaveShort }
+    { ChatGPTResponse: 'Say a new 20 character empathetic message to someone whose close to geussing the right word',text: ['You\'re getting closer!','Oh nice, that really narrowed the field!','Ooh, you\'re getting close now!','That was a really good guess!'],animation: FeedbackAnimation.WaveShort }
   ,
   newHighScore: 
-    { ai_text: 'Say a new 20 character empathetic message to someone who just set a new high score',text: ['Wow! What a great guess!','Ooh nice one! I didn\'t think of that.', 'You learned more information! Nice work!','Great guess!'],animation: FeedbackAnimation.Success }
+    { ChatGPTResponse: 'Say a new 20 character empathetic message to someone who just set a new high score',text: ['Wow! What a great guess!','Ooh nice one! I didn\'t think of that.', 'You learned more information! Nice work!','Great guess!'],animation: FeedbackAnimation.Success }
   ,
   notNewHighScore: 
-    { ai_text: 'Okay! Well now we know what doesn\'t work.',text: ['Okay! Well now we know what doesn\'t work.','Nice! now we know what to avoid.','Aww, I was sure that would be it.', 'Hmm, what could it be?!'],animation: FeedbackAnimation.SlightlyHappy }
+    { ChatGPTResponse: 'Okay! Well now we know what doesn\'t work.',text: ['Okay! Well now we know what doesn\'t work.','Nice! now we know what to avoid.','Aww, I was sure that would be it.', 'Hmm, what could it be?!'],animation: FeedbackAnimation.SlightlyHappy }
   ,
   invalidWord: {
-    ai_text: 'Oops! I don\'t know that word! Give it another try.', text: ['Oops! I don\'t know that word! Give it another try.'],
+    ChatGPTResponse: 'Oops! I don\'t know that word! Give it another try.', text: ['Oops! I don\'t know that word! Give it another try.'],
     animation: FeedbackAnimation.Sadness
   },
-  onWin: { ai_text: 'Say a new 20 character empathetic message to someone who just won wordle',text: ['You did it!'],animation: FeedbackAnimation.Success }
+  onWin: { ChatGPTResponse: 'Say a new 20 character empathetic message to someone who just won wordle',text: ['You did it!'],animation: FeedbackAnimation.Success }
   ,
-  onLoss: { ai_text: 'You almost had it! Let\'s try again.',text: ["You almost had it! Let\'s try again."],animation: FeedbackAnimation.Sadness },
-  onIdle: { ai_text: 'Say a new 20 character empathetic message to someone who is taking a long time to guess a word in wordle',text: ["It\'s good to think it through carefully."],animation: FeedbackAnimation.WaveShort }
+  onLoss: { ChatGPTResponse: 'You almost had it! Let\'s try again.',text: ["You almost had it! Let\'s try again."],animation: FeedbackAnimation.Sadness },
+  onIdle: { ChatGPTResponse: 'Say a new 20 character empathetic message to someone who is taking a long time to guess a word in wordle',text: ["It\'s good to think it through carefully."],animation: FeedbackAnimation.WaveShort }
 
 }