Add AiAssistantNotice component to provide AI assistance link in reports

Author: adamrefaey

frontend/src/pages/Reports/components/AiAnalysisTab.tsx

@@ -4,6 +4,7 @@ import EmergencyAlert from './EmergencyAlert';
 import FlaggedValuesSection from './FlaggedValuesSection';
 import NormalValuesSection from './NormalValuesSection';
 import LowConfidenceNotice from './LowConfidenceNotice';
+import AiAssistantNotice from './AiAssistantNotice';
 
 interface AiAnalysisTabProps {
   reportData: MedicalReport;
@@ -59,6 +60,9 @@ const AiAnalysisTab: React.FC<AiAnalysisTabProps> = ({
         isExpanded={normalValuesExpanded}
         onToggle={toggleNormalValues}
       />
+      
+      {/* AI Assistant Notice */}
+      <AiAssistantNotice />
     </div>
   );
 };

frontend/src/pages/Reports/components/AiAssistantNotice.scss

@@ -0,0 +1,28 @@
+.ai-assistant-notice {
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
+  
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .clarification-text {
+    font-size: 15px;
+    margin-bottom: 8px;
+  }
+  
+  .assistant-link {
+    color: #6177FF;
+    font-size: 15px;
+    cursor: pointer;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

frontend/src/pages/Reports/components/AiAssistantNotice.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { IonText } from '@ionic/react';
+import AIAssistantModal from '../../../common/components/AIAssistant/AIAssistantModal';
+import './AiAssistantNotice.scss';
+
+/**
+ * Component to display an AI Assistant notice with a link to open the AI Chat modal.
+ */
+const AiAssistantNotice: React.FC = () => {
+  const [isAIAssistantOpen, setIsAIAssistantOpen] = useState(false);
+
+  const handleOpenAIAssistant = () => {
+    setIsAIAssistantOpen(true);
+  };
+
+  return (
+    <div className="ai-assistant-notice">
+      <div className="ai-assistant-notice__content">
+        <IonText color="dark" className="clarification-text">
+          Still need further clarifications?
+        </IonText>
+        
+        <div 
+          className="assistant-link"
+          onClick={handleOpenAIAssistant}
+        >
+          Ask our AI Assistant &gt;
+        </div>
+      </div>
+
+      <AIAssistantModal 
+        isOpen={isAIAssistantOpen}
+        setIsOpen={setIsAIAssistantOpen}
+        testid="report-ai-assistant-modal"
+      />
+    </div>
+  );
+};
+
+export default AiAssistantNotice;