Phase 5 - Implement theme management and suggested prompts

- Added `ThemeProvider` and `useTheme` hook for managing light, dark, and system themes.
- Integrated `ThemeToggle` component in `ChatHeader` for user theme selection.
- Updated styles across components to utilize CSS variables for theming.
- Introduced `SuggestedPrompts` component to provide quick question suggestions in the chat.
- Enhanced `AIChat` to display suggested prompts for improved user interaction.
- Refactored `AIChat.scss` and other stylesheets to support new theme variables.
- Created `ShareModal` for sharing chat responses via link or email.

Author: jkestering-modus

frontend/src/App.tsx

@@ -16,7 +16,9 @@ import ScrollProvider from 'common/providers/ScrollProvider';
 import { AIChatProvider } from 'common/providers/AIChatProvider';
 import Toasts from 'common/components/Toast/Toasts';
 import AppRouter from 'common/components/Router/AppRouter';
+import ThemeProvider from 'pages/Chat/context/ThemeContext';
 
+import 'pages/Chat/styles/theme-variables.scss';
 import './theme/main.css';
 
 setupIonicReact({
@@ -59,11 +61,13 @@ const App = (): JSX.Element => {
               <AxiosProvider>
                 <ToastProvider>
                   <ScrollProvider>
-                    <AIChatProvider>
-                      <AppRouter />
-                      <Toasts />
-                      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
-                    </AIChatProvider>
+                    <ThemeProvider>
+                      <AIChatProvider>
+                        <AppRouter />
+                        <Toasts />
+                        <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+                      </AIChatProvider>
+                    </ThemeProvider>
                   </ScrollProvider>
                 </ToastProvider>
               </AxiosProvider>

frontend/src/pages/Chat/components/AIChat/AIChat.scss

@@ -3,9 +3,9 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: #ffffff;
+  background-color: var(--chat-bg-color);
   border-radius: 1.25rem 1.25rem 0 0;
-  box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -0.25rem 1rem var(--chat-shadow-color);
   overflow: hidden;
   transition: height 0.3s ease-in-out;
   position: relative;
@@ -20,6 +20,7 @@
     flex: 1;
     overflow-y: auto;
     padding: 1rem;
+    --background: var(--chat-bg-color);
   }
 
   &__messages {
@@ -31,17 +32,16 @@
 
   &__empty-state {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
-    text-align: center;
-    color: #666;
-    padding: 2rem;
+    padding: 1.5rem;
 
     p {
       font-size: 1rem;
-      max-width: 20rem;
-      margin: 0 auto;
+      color: var(--chat-secondary-text);
+      text-align: center;
+      margin-bottom: 1.5rem;
     }
   }
 
@@ -81,12 +81,12 @@
     justify-content: center;
     margin: 1rem 0;
     padding: 0.75rem 1rem;
-    background-color: rgba(255, 0, 0, 0.1);
+    background-color: var(--chat-error-bg);
     border-radius: 0.5rem;
-    border-left: 0.25rem solid #f44336;
+    border-left: 0.25rem solid var(--chat-error-border);
 
     p {
-      color: #d32f2f;
+      color: var(--chat-error-text);
       margin: 0;
       font-size: 0.875rem;
     }

frontend/src/pages/Chat/components/AIChat/AIChat.tsx

@@ -4,6 +4,7 @@ import ChatHeader from '../ChatHeader/ChatHeader';
 import ChatInput from '../ChatInput/ChatInput';
 import ChatMessage from '../ChatMessage/ChatMessage';
 import TypingIndicator from '../ChatMessage/TypingIndicator';
+import SuggestedPrompts from '../SuggestedPrompts/SuggestedPrompts';
 import { useChatContext } from '../../hooks/useChatContext';
 import { ChatSessionStatus } from 'common/models/chat';
 import './AIChat.scss';
@@ -33,6 +34,11 @@ const AIChat: React.FC<AIChatProps> = ({
     await sendMessage(text);
   };
 
+  // Handle suggested prompt selection
+  const handleSelectPrompt = (prompt: string) => {
+    handleSendMessage(prompt);
+  };
+  
   // Scroll to bottom when messages change or when typing
   useEffect(() => {
     if (contentRef.current) {
@@ -53,6 +59,7 @@ const AIChat: React.FC<AIChatProps> = ({
           {messages.length === 0 ? (
             <div className="ai-chat__empty-state">
               <p>Ask me anything about your medical reports or health questions.</p>
+              <SuggestedPrompts onSelectPrompt={handleSelectPrompt} />
             </div>
           ) : (
             messages.map(message => (

frontend/src/pages/Chat/components/ChatHeader/ChatHeader.scss

@@ -1,6 +1,6 @@
 .chat-header {
   &__toolbar {
-    --background: #f7f7f7;
+    --background: var(--chat-header-bg);
     --border-color: transparent;
     padding: 0.75rem 1rem;
     display: flex;
@@ -11,7 +11,7 @@
   &__title {
     font-size: 1.125rem;
     font-weight: 600;
-    color: #333;
+    color: var(--chat-text-color);
   }
 
   &__actions {
@@ -41,19 +41,32 @@
     }
 
     &--clear {
-      color: #ff6b6b;
+      color: var(--chat-icon-danger);
     }
 
     &--expand {
-      color: #4765ff;
+      color: var(--chat-icon-primary);
     }
 
     &--close {
-      color: #888;
+      color: var(--chat-icon-secondary);
     }
   }
 
   &__icon {
     font-size: 1.25rem;
   }
+}
+
+// Dark theme adjustments
+.dark-theme .chat-header {
+  &__button {
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    &:active {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+  }
 } 

frontend/src/pages/Chat/components/ChatHeader/ChatHeader.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { IonHeader, IonIcon, IonToolbar, IonAlert } from '@ionic/react';
 import { close, expandOutline, contractOutline, trashOutline } from 'ionicons/icons';
 import { useChatContext } from '../../hooks/useChatContext';
+import ThemeToggle from '../ThemeToggle/ThemeToggle';
 import './ChatHeader.scss';
 
 interface ChatHeaderProps {
@@ -37,6 +38,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           AI Assistant
         </div>
         <div className="chat-header__actions">
+          <ThemeToggle />
           <button 
             className="chat-header__button chat-header__button--clear" 
             onClick={handleClearClick}

frontend/src/pages/Chat/components/ChatMessage/ChatMessage.scss

@@ -20,8 +20,8 @@
     }
 
     .chat-message__bubble {
-      background-color: #4765ff;
-      color: white;
+      background-color: var(--chat-user-bubble-bg);
+      color: var(--chat-user-bubble-color);
       border-radius: 1.25rem 0 1.25rem 1.25rem;
 
       .chat-message__time {
@@ -34,25 +34,26 @@
     align-items: flex-start;
 
     .chat-message__bubble {
-      background-color: #f0f0f0;
-      color: #333;
+      background-color: var(--chat-ai-bubble-bg);
+      color: var(--chat-ai-bubble-color);
       border-radius: 0 1.25rem 1.25rem 1.25rem;
+      border: 1px solid var(--chat-ai-bubble-border);
     }
   }
 
   &__avatar {
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
-    background-color: #4765ff;
+    background-color: var(--chat-icon-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
 
   &__avatar-icon {
-    color: white;
+    color: var(--chat-user-bubble-color);
     font-size: 0.875rem;
     font-weight: 600;
   }
@@ -103,7 +104,7 @@
 
   &__time {
     font-size: 0.75rem;
-    color: #999;
+    color: var(--chat-secondary-text);
     margin-top: 0.25rem;
     text-align: right;
     opacity: 0;

frontend/src/pages/Chat/components/ChatMessage/ChatMessage.tsx

@@ -3,6 +3,7 @@ import { format } from 'date-fns';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
 import { ChatMessage as ChatMessageType } from 'common/models/chat';
+import MessageActions from './MessageActions';
 import './ChatMessage.scss';
 
 interface ChatMessageProps {
@@ -53,6 +54,8 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
           <div className={`chat-message__time ${showTime ? 'chat-message__time--visible' : ''}`}>
             {formattedTime}
           </div>
+          
+          {isAI && <MessageActions text={text} />}
         </div>
       </div>
     </div>

frontend/src/pages/Chat/components/ChatMessage/MessageActions.scss

@@ -0,0 +1,50 @@
+.message-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  
+  &__button {
+    background: transparent;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    padding: 0;
+    cursor: pointer;
+    color: #777;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      color: #444;
+    }
+    
+    &--active {
+      color: #4765ff;
+    }
+    
+    &--positive {
+      color: #2ecc71;
+    }
+    
+    &--negative {
+      color: #e74c3c;
+    }
+  }
+  
+  &__feedback {
+    display: flex;
+    gap: 0.25rem;
+  }
+}
+
+// Make actions visible when the message bubble is hovered
+.chat-message__bubble:hover .message-actions {
+  opacity: 1;
+}