Merge branch 'main' of github.com:UniversityOfHelsinkiCS/gptwrapper

Author: MatiasSinisalo

src/client/components/ChatV2/ChatBox.tsx

@@ -258,14 +258,19 @@ export const ChatBox = ({
             </Tooltip>
           </Box>
 
-          <OutlineButtonBlack
-            sx={{ display: { xs: 'block', lg: 'none' } }}
-            startIcon={<SettingsIcon />}
-            onClick={() => setChatLeftSidePanelOpen(true)}
-            id="settings-button"
+          <Tooltip
+            arrow
+            placement="top"
+            title={
+              <Typography variant="body2" sx={{ p: 1 }}>
+                {t('chat:settings')}
+              </Typography>
+            }
           >
-            {t('chat:settings')}
-          </OutlineButtonBlack>
+            <OutlineButtonBlack sx={{ display: { xs: 'block', lg: 'none' } }} onClick={() => setChatLeftSidePanelOpen(true)} id="settings-button">
+              <SettingsIcon sx={{ color: 'rgba(0, 0, 0, 0.7)' }} />
+            </OutlineButtonBlack>
+          </Tooltip>
           <>
             {!notOptoutSaving && saveChat && (
               <FormControlLabel control={<Switch onChange={() => setSaveConsent(!saveConsent)} checked={saveConsent} />} label={t('chat:allowSave')} />

src/client/components/ChatV2/ChatV2.tsx

@@ -32,6 +32,7 @@ import { useIsEmbedded } from '../../contexts/EmbeddedContext'
 import { enqueueSnackbar } from 'notistack'
 import { useAnalyticsDispatch } from '../../stores/analytics'
 import EmailButton from './EmailButton'
+import { Tune } from '@mui/icons-material'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
   const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -570,7 +571,7 @@ const LeftMenu = ({
             </OutlineButtonBlack>
 
             <EmailButton messages={messages} disabled={!messages?.length} />
-            <OutlineButtonBlack startIcon={<SettingsIcon />} onClick={() => setSettingsModalOpen(true)} id="settings-button">
+            <OutlineButtonBlack startIcon={<Tune />} onClick={() => setSettingsModalOpen(true)} id="settings-button">
               {t('chat:settings')}
             </OutlineButtonBlack>
             <OutlineButtonBlack startIcon={<HelpIcon />} onClick={() => setDisclaimerStatus(true)} id="help-button">

src/client/components/ChatV2/Disclaimer.tsx

@@ -63,19 +63,22 @@ export const DisclaimerModal = ({
           transform: 'translate(-50%, -50%)',
           display: 'flex',
           flexDirection: 'column',
-          minWidth: 600,
-          width: '85vw',
-          maxWidth: 1000,
-          height: 'fit-content',
-          maxHeight: '100vh',
+          width: { xs: '95vw', sm: '85vw' },
+          maxWidth: { xs: '95vw', sm: 1000 },
+          minHeight: '25vh',
+          maxHeight: { xs: '90vh', sm: '90vh' },
           bgcolor: 'background.paper',
           boxShadow: 24,
           borderRadius: '0.3rem',
           overflow: 'auto',
-          padding: '3rem',
+          padding: '2rem',
         }}
       >
-        <IconButton id="close-disclaimer" onClick={() => closeAccepted()} sx={{ position: 'absolute', top: 10, right: 20, color: 'grey.500' }}>
+        <IconButton
+          id="close-disclaimer"
+          onClick={() => closeAccepted()}
+          sx={{ position: 'absolute', top: 10, right: 20, color: 'grey.500', display: termsAccepted ? '' : 'none' }}
+        >
           <Close />
         </IconButton>
 

src/client/components/ChatV2/EmailButton.tsx

@@ -194,7 +194,7 @@ const EmailButton = ({ messages, disabled }: { messages: Message[]; disabled: bo
   }
 
   return (
-    <Tooltip placement="right" title={<Typography variant="body2">{t('chat:email', { email: user.email })}</Typography>}>
+    <Tooltip placement="right" title={t('chat:email', { email: user.email })}>
       <OutlineButtonBlack startIcon={<EmailIcon />} onClick={handleSend}>
         {t('email:save')}
       </OutlineButtonBlack>

src/client/components/ChatV2/SettingsModal.tsx

@@ -200,9 +200,9 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
           <Typography variant="body1">{t('settings:temperatureInstructions')}</Typography>
 
           <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <Box sx={{ padding: '1.5rem 0' }}>
+            <Box sx={{ padding: '1.5rem 0', width: '100%', maxWidth: 600 }}>
               <Slider
-                sx={{ width: 800 }}
+                sx={{ width: '100%' }}
                 min={0.0}
                 max={1.0}
                 step={0.1}
@@ -245,7 +245,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
           >
             {t('settings:resetDefault')}
           </OutlineButtonBlack>{' '}
-          <BlueButton onClick={() => setOpen(false)}>{t('common:close')}</BlueButton>
+          <BlueButton onClick={() => setOpen(false)}>OK</BlueButton>
         </Box>
         <SaveMyPromptModal
           isOpen={myPromptModalOpen}

src/client/components/Feedback.tsx

@@ -48,11 +48,19 @@ export const Feedback: React.FC = () => {
 
   return (
     <>
-      <Tooltip title={t('feedback:giveFeedback')} placement="top">
+      <Tooltip arrow title={t('feedback:giveFeedback')} placement="top">
         <Fab
           color="default"
           aria-label="feedback"
-          sx={(theme) => ({ position: 'absolute', bottom: 80, right: 32, zIndex: theme.zIndex.modal + 1 })}
+          sx={(theme) => ({
+            position: 'fixed',
+            bottom: { xs: 12, sm: 18 },
+            right: { xs: 12, sm: 18 },
+            zIndex: theme.zIndex.modal + 1,
+            opacity: 0.9,
+
+            transition: 'opacity 0.2s',
+          })}
           onClick={() => setModalOpen(true)}
         >
           <FeedbackIcon />

src/client/theme.ts

@@ -63,6 +63,17 @@ const themeOptions: ThemeOptions = {
         },
       },
     },
+
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          fontSize: '0.875rem',
+          fontWeight: 400,
+          lineHeight: 1.43,
+          padding: '8px',
+        },
+      },
+    },
   },
 }