refactor: use typescript in the components

Author: dcoa

frontend/package-lock.json

@@ -31,13 +31,15 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.1.1",
     "@openedx/frontend-build": "14.6.0",
+    "@edx/typescript-config": "^1.0.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@openedx/paragon": "23.14.0",
     "jest": "29.7.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "prop-types": "^15.8.1",
     "react-markdown": "^8.0.0 || ^9.0.0"
   }
 }

frontend/package.json

@@ -1,7 +1,7 @@
 import React, {
   useState, useEffect, useRef, useCallback,
 } from 'react';
-import PropTypes from 'prop-types';
+import { logError } from '@edx/frontend-platform/logging';
 import { Spinner, Alert } from '@openedx/paragon';
 
 // Import services
@@ -22,6 +22,8 @@ import {
   AIEducatorLibraryAssistComponent,
   AIEducatorLibraryResponseComponent,
 } from './components';
+import { PluginConfiguration } from './types';
+import { WORKFLOW_ACTIONS } from './constants';
 
 /**
  * Component Registry
@@ -42,16 +44,23 @@ const COMPONENT_REGISTRY = {
  * AIRequestComponent and AIResponseComponent with configuration.
  * Manages state and orchestrates the AI interaction flow.
  */
+
+interface ConfigurableAIAssistanceProps {
+  fallbackConfig?: PluginConfiguration | null;
+  onConfigLoad?: (config: any) => void;
+  onConfigError?: (error: any) => void;
+};
+
 const ConfigurableAIAssistance = ({
-  fallbackConfig,
+  fallbackConfig = null,
   onConfigLoad,
   onConfigError,
   ...additionalProps
-}) => {
+}: ConfigurableAIAssistanceProps) => {
   // Configuration state
   const [isLoadingConfig, setIsLoadingConfig] = useState(true);
-  const [configError, setConfigError] = useState(null);
-  const [config, setConfig] = useState(null);
+  const [configError, setConfigError] = useState<null | string>(null);
+  const [config, setConfig] = useState<PluginConfiguration | null>(null);
 
   // AI interaction state
   const [isLoading, setIsLoading] = useState(false);
@@ -91,17 +100,20 @@ const ConfigurableAIAssistance = ({
           }
         }
       } catch (err) {
+        // Type guard for error
+        const error = err instanceof Error ? err : new Error(String(err));
+
         // Ignore aborted requests
-        if (err.name === 'AbortError' || err.message?.includes('aborted')) {
+        if (error.name === 'AbortError' || error.message?.includes('aborted')) {
           return;
         }
 
         // Only update state if this is still the latest request
         if (currentRequestId === requestIdRef.current) {
           // eslint-disable-next-line no-console
-          console.error('[ConfigurableAIAssistance] Configuration error:', err);
+          console.error('[ConfigurableAIAssistance] Configuration error:', error);
 
-          setConfigError(err.message);
+          setConfigError(error.message);
 
           if (fallbackConfig) {
             setConfig(fallbackConfig);
@@ -141,17 +153,17 @@ const ConfigurableAIAssistance = ({
         ...additionalProps,
       });
 
-      const requestMessage = config?.config?.customMessage
-        || config?.config?.requestMessage
+      const requestMessage = config?.request.config?.customMessage
+        || config?.request.config?.requestMessage
         || null;
 
       let buffer = '';
       // Make API call
       const data = await callWorkflowService({
         context: contextData,
-        action: 'run',
         userInput: requestMessage,
         payload: {
+          action: WORKFLOW_ACTIONS.RUN,
           requestId: `ai-request-${Date.now()}`,
         },
         onStreamChunk: (chunk) => {
@@ -183,8 +195,7 @@ const ConfigurableAIAssistance = ({
 
       setHasAsked(true);
     } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error('[ConfigurableAIAssistance] AI Assistant Error:', err);
+      logError('[ConfigurableAIAssistance] AI Assistant Error:', err);
       const userFriendlyError = formatErrorMessage(err);
       setError(userFriendlyError);
     } finally {
@@ -331,19 +342,4 @@ const ConfigurableAIAssistance = ({
   return null;
 };
 
-ConfigurableAIAssistance.propTypes = {
-  fallbackConfig: PropTypes.shape({
-    component: PropTypes.string.isRequired,
-    config: PropTypes.shape({}),
-  }),
-  onConfigLoad: PropTypes.func,
-  onConfigError: PropTypes.func,
-};
-
-ConfigurableAIAssistance.defaultProps = {
-  fallbackConfig: null,
-  onConfigLoad: null,
-  onConfigError: null,
-};
-
 export default ConfigurableAIAssistance;

frontend/src/ConfigurableAIAssistance.jsx frontend/src/ConfigurableAIAssistance.tsxfrontend/src/ConfigurableAIAssistance.jsx renamed to frontend/src/ConfigurableAIAssistance.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
 
 // Import service modules
 import {
@@ -13,22 +12,28 @@ import {
   AIRequestComponent,
   AIResponseComponent,
 } from './components';
+import { WORKFLOW_ACTIONS } from './constants';
+
+interface GetAIAssistanceButtonProps {
+  requestMessage?: string;
+  buttonText?: string;
+}
 
 /**
  * Main AI Assistant Plugin Component
  * Orchestrates the AI assistance flow using modular components
  */
 const GetAIAssistanceButton = ({
-  requestMessage,
-  buttonText,
+  requestMessage = 'Need help understanding this content?',
+  buttonText = 'Get AI Assistance',
   ...props
-}) => {
+}: GetAIAssistanceButtonProps) => {
   // Core state management
   const [isLoading, setIsLoading] = useState(false);
   const [response, setResponse] = useState('');
   const [error, setError] = useState('');
   const [hasAsked, setHasAsked] = useState(false);
-  const [requestId, setRequestId] = useState(null);
+  const [requestId, setRequestId] = useState<string | null>(null);
 
   /**
    * Handle AI assistant request
@@ -51,9 +56,9 @@ const GetAIAssistanceButton = ({
       // Make API call with flexible parameters
       const data = await callWorkflowService({
         context: contextData,
-        action: 'simple_button_assistance',
         userInput: requestMessage || 'Provide learning assistance for this content',
         payload: {
+          action: WORKFLOW_ACTIONS.SIMPLE_BUTTON_ASSISTANCE,
           requestId: `ai-request-${Date.now()}`,
         },
         onStreamChunk: (chunk) => {
@@ -141,7 +146,6 @@ const GetAIAssistanceButton = ({
         response={response}
         error={error}
         isLoading={isLoading}
-        onAskAgain={handleAskAI}
         onClear={handleReset}
         onError={handleClearError}
       />
@@ -161,14 +165,4 @@ const GetAIAssistanceButton = ({
   );
 };
 
-GetAIAssistanceButton.propTypes = {
-  requestMessage: PropTypes.string,
-  buttonText: PropTypes.string,
-};
-
-GetAIAssistanceButton.defaultProps = {
-  requestMessage: 'Need help understanding this content?',
-  buttonText: 'Get AI Assistance',
-};
-
 export default GetAIAssistanceButton;

frontend/src/GetAIAssistanceButton.jsx frontend/src/GetAIAssistanceButton.tsxfrontend/src/GetAIAssistanceButton.jsx renamed to frontend/src/GetAIAssistanceButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
 import {
   Button,
   Form,
@@ -11,6 +11,23 @@ import { AutoAwesome, Close } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { callWorkflowService, prepareContextData } from '../services';
+import { WORKFLOW_ACTIONS } from '../constants';
+
+interface AIEducatorLibraryAssistComponentProps {
+  courseId: string;
+  locationId: string;
+  setResponse: (response: string) => void;
+  hasAsked: boolean;
+  setHasAsked: (hasAsked: boolean) => void;
+  libraries?: Array<{ id: string; title: string }>;
+  titleText?: string;
+  buttonText?: string;
+  preloadPreviousSession?: boolean;
+  customMessage?: string;
+  onSuccess?: () => void;
+  onError?: (error: any) => void;
+  debug?: boolean;
+}
 
 /**
  * AI Educator Library Assist Component
@@ -24,14 +41,14 @@ const AIEducatorLibraryAssistComponent = ({
   hasAsked,
   setHasAsked,
   libraries: librariesProp,
-  titleText,
-  buttonText,
-  preloadPreviousSession,
-  customMessage,
+  titleText = 'AI Assistant',
+  buttonText = 'Start',
+  customMessage = 'Use an AI workflow to create multiple answer questions from this unit in a content library',
+  preloadPreviousSession = false,
   onSuccess,
   onError,
-  debug,
-}) => {
+  debug = false,
+}: AIEducatorLibraryAssistComponentProps) => {
   const [showForm, setShowForm] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
@@ -66,8 +83,7 @@ const AIEducatorLibraryAssistComponent = ({
       const endpoint = `${baseUrl}/api/libraries/v2/?pagination=false&order=title`;
 
       if (debug) {
-        // eslint-disable-next-line no-console
-        console.log('Fetching libraries from:', endpoint);
+        logInfo('Fetching libraries from:', endpoint);
       }
 
       const { data } = await getAuthenticatedHttpClient().get(endpoint);
@@ -79,12 +95,10 @@ const AIEducatorLibraryAssistComponent = ({
       setLibrariesFetched(true);
 
       if (debug) {
-        // eslint-disable-next-line no-console
-        console.log('Fetched libraries:', fetchedLibraries);
+        logInfo('Fetched libraries:', fetchedLibraries);
       }
     } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error('Error fetching libraries:', err);
+      logError('Error fetching libraries:', err);
       setError('Failed to load libraries. Please try again.');
     } finally {
       setIsLoadingLibraries(false);
@@ -116,8 +130,8 @@ const AIEducatorLibraryAssistComponent = ({
 
         const data = await callWorkflowService({
           context: contextData,
-          action: 'get_current_session_response',
           payload: {
+            action: WORKFLOW_ACTIONS.GET_CURRENT_SESSION_RESPONSE,
             requestId: `ai-request-${Date.now()}`,
           },
         });
@@ -128,14 +142,12 @@ const AIEducatorLibraryAssistComponent = ({
           setHasAsked(true);
         } else if (debug) {
           // No previous session or empty response - do nothing, show normal component
-          // eslint-disable-next-line no-console
-          console.log('No previous session found or empty response');
+          logInfo('No previous session found or empty response');
         }
       } catch (err) {
         // Silent fail - no previous session is not an error
         if (debug) {
-          // eslint-disable-next-line no-console
-          console.log('Error loading previous session:', err);
+          logInfo('Error loading previous session:', err);
         }
       } finally {
         setIsLoading(false);
@@ -179,13 +191,13 @@ const AIEducatorLibraryAssistComponent = ({
 
       const data = await callWorkflowService({
         context: contextData,
-        action: 'run_async',
         payload: {
+          action: WORKFLOW_ACTIONS.RUN_ASYNC,
           requestId: `ai-request-${Date.now()}`,
-          user_input: {
-            library_id: selectedLibrary,
-            num_questions: numberOfQuestions,
-            extra_instructions: additionalInstructions,
+          userInput: {
+            libraryId: selectedLibrary,
+            numQuestions: numberOfQuestions,
+            extraInstructions: additionalInstructions,
           },
         },
       });
@@ -225,8 +237,11 @@ const AIEducatorLibraryAssistComponent = ({
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error('Error generating library questions:', err);
-      const errorMessage = err.response?.data?.error
-        || err.message
+      
+      // Type guard for error
+      const error = err instanceof Error ? err : new Error(String(err));
+      const errorMessage = (err as any)?.response?.data?.error
+        || error.message
         || 'Failed to generate questions. Please try again.';
       setError(errorMessage);
 
@@ -419,36 +434,4 @@ const AIEducatorLibraryAssistComponent = ({
   );
 };
 
-AIEducatorLibraryAssistComponent.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  locationId: PropTypes.string.isRequired,
-  hasAsked: PropTypes.bool.isRequired,
-  setResponse: PropTypes.func.isRequired,
-  setHasAsked: PropTypes.func.isRequired,
-  libraries: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-    }),
-  ),
-  titleText: PropTypes.string,
-  buttonText: PropTypes.string,
-  preloadPreviousSession: PropTypes.bool,
-  customMessage: PropTypes.string,
-  onSuccess: PropTypes.func,
-  onError: PropTypes.func,
-  debug: PropTypes.bool,
-};
-
-AIEducatorLibraryAssistComponent.defaultProps = {
-  libraries: null,
-  titleText: 'AI Assistant',
-  buttonText: 'Start',
-  customMessage: 'Use an AI workflow to create multiple answer questions from this unit in a content library',
-  preloadPreviousSession: false,
-  onSuccess: null,
-  onError: null,
-  debug: false,
-};
-
 export default AIEducatorLibraryAssistComponent;