user provided feedback

helixml · Jan 31, 2024 · 6beec83 · 6beec83
1 parent c159f88
commit 6beec83
Showing 1 changed file with 70 additions and 20 deletions.
diff --git a/frontend/src/pages/Session.tsx b/frontend/src/pages/Session.tsx
@@ -6,6 +6,10 @@ import Container from '@mui/material/Container'
 import Box from '@mui/material/Box'
 
 import SendIcon from '@mui/icons-material/Send'
+import ThumbUpIcon from '@mui/icons-material/ThumbUp'
+import ThumbDownIcon from '@mui/icons-material/ThumbDown'
+import ThumbUpOffIcon from '@mui/icons-material/ThumbUpOffAlt'
+import ThumbDownOffIcon from '@mui/icons-material/ThumbDownOffAlt'
 import ShareIcon from '@mui/icons-material/Share'
 
 import InteractionLiveStream from '../components/session/InteractionLiveStream'
@@ -65,11 +69,16 @@ const Session: FC = () => {
   const [restartWindowOpen, setRestartWindowOpen] = useState(false)
   const [shareInstructions, setShareInstructions] = useState<IShareSessionInstructions>()
   const [inputValue, setInputValue] = useState('')
+  const [feedbackValue, setFeedbackValue] = useState(session.data?.config.eval_user_reason)
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value)
   }
 
+  const handleFeedbackChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFeedbackValue(event.target.value)
+  }
+
   const loading = useMemo(() => {
     if(!session.data || !session.data?.interactions || session.data?.interactions.length === 0) return false
     const interaction = session.data?.interactions[session.data?.interactions.length - 1]
@@ -478,28 +487,69 @@ const Session: FC = () => {
               </>    
             )
           }
-        </Container>
-      </Box>
-      <Box
-        sx={{
-          width: '100%',
-          flexGrow: 0,
-          p: 2,
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Button
-          onClick={ () => {
-            onUpdateSessionConfig({
-              eval_user_score: '1.0',
-            }, `Thank you for your feedback`)
+        <Box
+          sx={{
+            width: '100%',
+            flexGrow: 0,
+            p: 2,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
           }}
         >
-          Approve
-        </Button>
+          <Button
+            onClick={ () => {
+              onUpdateSessionConfig({
+                eval_user_score: session.data?.config.eval_user_score == "" ? '1.0' : "",
+              }, `Thank you for your feedback!`)
+            }}
+          >
+            { session.data?.config.eval_user_score == "1.0" ? <ThumbUpIcon /> : <ThumbUpOffIcon /> }
+          </Button>
+          <Button
+            onClick={ () => {
+              onUpdateSessionConfig({
+                eval_user_score: session.data?.config.eval_user_score == "" ? '0.0' : "",
+              }, `Sorry! We will use your feedback to improve`)
+            }}
+          >
+            { session.data?.config.eval_user_score == "0.0" ? <ThumbDownIcon /> : <ThumbDownOffIcon /> }
+          </Button>
+        </Box>
+        { session.data?.config.eval_user_score != "" && ( 
+          <Box
+            sx={{
+              width: '100%',
+              flexGrow: 0,
+              p: 2,
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <TextField
+              id="feedback"
+              label="Please explain why"
+              value={feedbackValue}
+              onChange={handleFeedbackChange}
+              name="ai_feedback"
+            />
+            <Button
+              variant='contained'
+              disabled={loading}
+              onClick={ () => onUpdateSessionConfig({
+                  eval_user_reason: feedbackValue,
+                }, `Thanks, you are awesome`)
+              }
+              sx={{ ml: 2 }}
+            >
+              Save
+            </Button>
+          </Box>
+        ) }
+        </Container>
       </Box>
       <Box
         sx={{