Merge branch 'develop' of https://github.com/FYP-2024-IQMA/fyp2024 in…

…to SCRUM-106-Create-Frontend-for-Self-Reflection-and-Integrate-with-backend-chat-history-endpoint
FYP-2024-IQMA · Sep 14, 2024 · aedff76 · aedff76
2 parents 257c04b + fbdb858
commit aedff76
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx b/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx
@@ -26,7 +26,10 @@ export default function SelfReflection() {
     const [sectionName, setSectionName] = useState<string>('');
     const [unitName, setUnitName] = useState<string>('');
     const [unitNumber, setUnitNumber] = useState<string>('');
-
+    const [chatHistoryLength, setChatHistoryLength] = useState<number>(0);
+    const handleChatHistoryUpdate = (length: number) => {
+        setChatHistoryLength(length);
+    };
     useLayoutEffect(() => {
         navigation.setOptions({
             headerTitle: () => (
@@ -86,7 +89,7 @@ export default function SelfReflection() {
                     Use a few words to share your thoughts on the following
                     question.
                 </Text>
-                <MiniChatbot />
+                <MiniChatbot onChatHistoryUpdate={handleChatHistoryUpdate} />
             </ScrollView>
             <View
                 style={{
@@ -98,6 +101,7 @@ export default function SelfReflection() {
                     label="continue"
                     backgroundColor="white"
                     onPressHandler={handlePress}
+                    disabled={chatHistoryLength < 3}
                 />
             </View>
         </View>

diff --git a/frontend/iQMA-Skills-Builder/components/CustomButton.tsx b/frontend/iQMA-Skills-Builder/components/CustomButton.tsx
@@ -1,5 +1,6 @@
+import {Dimensions, Pressable, StyleSheet, Text, View} from 'react-native';
+
 import React from 'react';
-import {View, Text, Pressable, StyleSheet, Dimensions} from 'react-native';
 
 const screenWidth = Dimensions.get('window').width;
 
@@ -10,6 +11,7 @@ export const CustomButton = ({
     borderColor = '#7654F2',
     onPressHandler = () => {},
     capitalise = true,
+    disabled = false,
 }) => {
     const textStyle = capitalise ? 'uppercase' : 'none';
 
@@ -21,17 +23,21 @@ export const CustomButton = ({
                     styles.rounded,
                     styles.shadow,
                     {
-                        backgroundColor: backgroundColor,
+                        backgroundColor: disabled ? '#D1D5DB' : backgroundColor,
                         borderColor: borderColor,
                     },
                 ]}
                 onPress={onPressHandler}
+                disabled={disabled}
             >
                 <View>
                     <Text
                         style={[
                             styles.buttonText,
-                            {color: labelColor, textTransform: textStyle},
+                            {
+                                color: disabled ? '#A0A0A0' : labelColor,
+                                textTransform: textStyle,
+                            },
                         ]}
                     >
                         {label}