Phase 2 - Add chat context and models for AI Chat feature

- Created new TypeScript models for chat messages, API requests, and responses in `chat.ts`.
- Implemented `ChatContext` and `ChatProvider` to manage chat state and interactions.
- Updated `AIChat` component to utilize context for message handling and error display.
- Enhanced styling for error messages in `AIChat.scss`.
- Integrated local storage for message persistence and improved user experience.

Author: jkestering-modus

frontend/src/common/models/chat.ts

@@ -0,0 +1,63 @@
+/**
+ * Types for the AI Chat feature
+ */
+
+/**
+ * Represents a single chat message in the UI
+ */
+export interface ChatMessage {
+  id: string;
+  text: string;
+  sender: 'user' | 'ai';
+  timestamp: Date;
+}
+
+/**
+ * API message format for Bedrock
+ */
+export interface BedrockMessage {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+/**
+ * Request payload for chat completion
+ */
+export interface ChatCompletionRequest {
+  messages: BedrockMessage[];
+  temperature?: number;
+  maxTokens?: number;
+  model?: string;
+}
+
+/**
+ * Response from the chat completion API
+ */
+export interface ChatCompletionResponse {
+  message: BedrockMessage;
+  usage: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+  model: string;
+}
+
+/**
+ * Status of a chat session
+ */
+export enum ChatSessionStatus {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  ERROR = 'error'
+}
+
+/**
+ * Chat session configuration
+ */
+export interface ChatSessionConfig {
+  maxHistoryLength?: number;
+  persistHistory?: boolean;
+  defaultGreeting?: string;
+  model?: string;
+} 

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

@@ -74,6 +74,23 @@
       }
     }
   }
+  
+  &__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem 0;
+    padding: 0.75rem 1rem;
+    background-color: rgba(255, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    border-left: 0.25rem solid #f44336;
+    
+    p {
+      color: #d32f2f;
+      margin: 0;
+      font-size: 0.875rem;
+    }
+  }
 }
 
 @keyframes bounce {

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

@@ -1,18 +1,12 @@
-import React, { useState } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { IonContent } from '@ionic/react';
 import ChatHeader from '../ChatHeader/ChatHeader';
 import ChatInput from '../ChatInput/ChatInput';
 import ChatMessage from '../ChatMessage/ChatMessage';
+import { useChatContext } from '../../hooks/useChatContext';
+import { ChatSessionStatus } from 'common/models/chat';
 import './AIChat.scss';
 
-// Mock data structure for a chat message
-export interface ChatMessageType {
-  id: string;
-  text: string;
-  sender: 'user' | 'ai';
-  timestamp: Date;
-}
-
 interface AIChatProps {
   isExpanded: boolean;
   onClose: () => void;
@@ -27,40 +21,23 @@ const AIChat: React.FC<AIChatProps> = ({
   onClose, 
   onToggleExpand 
 }) => {
-  const [messages, setMessages] = useState<ChatMessageType[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
+  const { state, sendMessage } = useChatContext();
+  const { messages, status, error } = state;
+  const contentRef = useRef<HTMLIonContentElement>(null);
+  const isLoading = status === ChatSessionStatus.LOADING;
+  
   // Function to handle sending a new message
-  const handleSendMessage = (text: string) => {
+  const handleSendMessage = async (text: string) => {
     if (!text.trim()) return;
-    
-    // Create a new user message
-    const newUserMessage: ChatMessageType = {
-      id: Date.now().toString(),
-      text,
-      sender: 'user',
-      timestamp: new Date()
-    };
-    
-    // Add the user message to the chat
-    setMessages(prevMessages => [...prevMessages, newUserMessage]);
-    
-    // Simulate AI response with loading state
-    setIsLoading(true);
-    
-    // Mock AI response after a delay
-    setTimeout(() => {
-      const aiResponse: ChatMessageType = {
-        id: (Date.now() + 1).toString(),
-        text: `This is a mock response to: "${text}"`,
-        sender: 'ai',
-        timestamp: new Date()
-      };
-      
-      setMessages(prevMessages => [...prevMessages, aiResponse]);
-      setIsLoading(false);
-    }, 1000);
+    await sendMessage(text);
   };
+  
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollToBottom(300);
+    }
+  }, [messages]);
 
   return (
     <div className={`ai-chat ${isExpanded ? 'ai-chat--expanded' : ''}`}>
@@ -70,7 +47,7 @@ const AIChat: React.FC<AIChatProps> = ({
         isExpanded={isExpanded}
       />
 
-      <IonContent className="ai-chat__content">
+      <IonContent className="ai-chat__content" ref={contentRef}>
         <div className="ai-chat__messages">
           {messages.length === 0 ? (
             <div className="ai-chat__empty-state">
@@ -94,6 +71,12 @@ const AIChat: React.FC<AIChatProps> = ({
               </div>
             </div>
           )}
+          
+          {error && status === ChatSessionStatus.ERROR && (
+            <div className="ai-chat__error">
+              <p>{error}</p>
+            </div>
+          )}
         </div>
       </IonContent>
 

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import AIChat from '../AIChat/AIChat';
+import { ChatProvider } from '../../context/ChatContext';
 import './AIChatContainer.scss';
 
 /**
@@ -42,7 +43,7 @@ const AIChatContainer: React.FC = () => {
   }, [isVisible]);
 
   return (
-    <>
+    <ChatProvider>
       {/* AI Chat toggle button for bottom nav */}
       <div className="ai-chat-container__toggle">
         <button 
@@ -64,7 +65,7 @@ const AIChatContainer: React.FC = () => {
           />
         </div>
       )}
-    </>
+    </ChatProvider>
   );
 };
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { format } from 'date-fns';
-import { ChatMessageType } from '../AIChat/AIChat';
+import { ChatMessage as ChatMessageType } from 'common/models/chat';
 import './ChatMessage.scss';
 
 interface ChatMessageProps {