Phase 4 - Enhance AI Chat functionality and styling

- Added `react-markdown` and `rehype-sanitize` for improved message formatting.
- Updated `ChatMessage` component to render messages with Markdown support.
- Introduced `TypingIndicator` component to show when AI is typing.
- Modified `ChatContext` to manage typing state.
- Enhanced `AIChat` and `ChatHeader` components for better user experience.
- Added new styles for typing indicator and message animations.
- Updated `ChatInput` to auto-resize based on content.
- Improved overall chat UI with new animations and styles.

Author: jkestering-modus

frontend/package-lock.json

@@ -66,8 +66,10 @@
     "react-dom": "18.3.1",
     "react-error-boundary": "5.0.0",
     "react-i18next": "15.4.0",
+    "react-markdown": "^10.1.0",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
+    "rehype-sanitize": "^6.0.0",
     "uuid": "11.0.4",
     "yup": "1.6.1"
   },

frontend/package.json

@@ -10,13 +10,14 @@ export interface ChatMessage {
   text: string;
   sender: 'user' | 'ai';
   timestamp: Date;
+  isRead?: boolean;
 }
 
 /**
  * API message format for Bedrock
  */
 export interface BedrockMessage {
-  role: 'user' | 'assistant';
+  role: 'user' | 'assistant' | 'system';
   content: string;
 }
 
@@ -27,20 +28,19 @@ export interface ChatCompletionRequest {
   messages: BedrockMessage[];
   temperature?: number;
   maxTokens?: number;
-  model?: string;
+  stream?: boolean;
 }
 
 /**
  * Response from the chat completion API
  */
 export interface ChatCompletionResponse {
   message: BedrockMessage;
-  usage: {
+  usage?: {
     promptTokens: number;
     completionTokens: number;
     totalTokens: number;
   };
-  model: string;
 }
 
 /**

frontend/src/common/models/chat.ts

@@ -91,6 +91,13 @@
       font-size: 0.875rem;
     }
   }
+  
+  &__typing-container {
+    display: flex;
+    justify-content: flex-start;
+    margin: 0.5rem 1rem;
+    animation: fadeIn 0.3s ease-in-out;
+  }
 }
 
 @keyframes bounce {
@@ -100,4 +107,13 @@
   40% {
     transform: scale(1);
   }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 } 

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

@@ -3,6 +3,7 @@ import { IonContent } from '@ionic/react';
 import ChatHeader from '../ChatHeader/ChatHeader';
 import ChatInput from '../ChatInput/ChatInput';
 import ChatMessage from '../ChatMessage/ChatMessage';
+import TypingIndicator from '../ChatMessage/TypingIndicator';
 import { useChatContext } from '../../hooks/useChatContext';
 import { ChatSessionStatus } from 'common/models/chat';
 import './AIChat.scss';
@@ -22,7 +23,7 @@ const AIChat: React.FC<AIChatProps> = ({
   onToggleExpand 
 }) => {
   const { state, sendMessage } = useChatContext();
-  const { messages, status, error } = state;
+  const { messages, status, error, isTyping } = state;
   const contentRef = useRef<HTMLIonContentElement>(null);
   const isLoading = status === ChatSessionStatus.LOADING;
 
@@ -32,12 +33,12 @@ const AIChat: React.FC<AIChatProps> = ({
     await sendMessage(text);
   };
 
-  // Scroll to bottom when messages change
+  // Scroll to bottom when messages change or when typing
   useEffect(() => {
     if (contentRef.current) {
       contentRef.current.scrollToBottom(300);
     }
-  }, [messages]);
+  }, [messages, isTyping]);
 
   return (
     <div className={`ai-chat ${isExpanded ? 'ai-chat--expanded' : ''}`}>
@@ -62,13 +63,9 @@ const AIChat: React.FC<AIChatProps> = ({
             ))
           )}
 
-          {isLoading && (
-            <div className="ai-chat__loading">
-              <div className="ai-chat__loading-dots">
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
+          {isTyping && (
+            <div className="ai-chat__typing-container">
+              <TypingIndicator />
             </div>
           )}
 

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

@@ -40,6 +40,10 @@
       background-color: rgba(0, 0, 0, 0.1);
     }
 
+    &--clear {
+      color: #ff6b6b;
+    }
+    
     &--expand {
       color: #4765ff;
     }

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

@@ -1,6 +1,7 @@
-import React from 'react';
-import { IonHeader, IonIcon, IonToolbar } from '@ionic/react';
-import { close, expandOutline, contractOutline } from 'ionicons/icons';
+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 './ChatHeader.scss';
 
 interface ChatHeaderProps {
@@ -10,23 +11,46 @@ interface ChatHeaderProps {
 }
 
 /**
- * ChatHeader component displays the title, close button, and expand toggle
+ * ChatHeader component displays the title, clear chat button, expand toggle, and close button
  */
 const ChatHeader: React.FC<ChatHeaderProps> = ({ 
   isExpanded, 
   onClose, 
   onToggleExpand 
 }) => {
+  const { clearMessages } = useChatContext();
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+  
+  const handleClearClick = () => {
+    setShowClearConfirm(true);
+  };
+  
+  const handleClearConfirm = () => {
+    clearMessages();
+    setShowClearConfirm(false);
+  };
+  
   return (
     <IonHeader className="chat-header">
       <IonToolbar className="chat-header__toolbar">
         <div className="chat-header__title">
           AI Assistant
         </div>
         <div className="chat-header__actions">
+          <button 
+            className="chat-header__button chat-header__button--clear" 
+            onClick={handleClearClick}
+            aria-label="Clear chat"
+          >
+            <IonIcon 
+              icon={trashOutline} 
+              className="chat-header__icon"
+            />
+          </button>
           <button 
             className="chat-header__button chat-header__button--expand" 
             onClick={onToggleExpand}
+            aria-label={isExpanded ? "Collapse" : "Expand"}
           >
             <IonIcon 
               icon={isExpanded ? contractOutline : expandOutline} 
@@ -36,6 +60,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           <button 
             className="chat-header__button chat-header__button--close" 
             onClick={onClose}
+            aria-label="Close"
           >
             <IonIcon 
               icon={close} 
@@ -44,6 +69,24 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           </button>
         </div>
       </IonToolbar>
+      
+      <IonAlert
+        isOpen={showClearConfirm}
+        onDidDismiss={() => setShowClearConfirm(false)}
+        header="Clear Chat History"
+        message="Are you sure you want to clear all messages? This action cannot be undone."
+        buttons={[
+          {
+            text: 'Cancel',
+            role: 'cancel',
+          },
+          {
+            text: 'Clear',
+            role: 'destructive',
+            handler: handleClearConfirm
+          }
+        ]}
+      />
     </IonHeader>
   );
 };

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

@@ -1,6 +1,6 @@
 .chat-input {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   padding: 0.75rem 1rem;
   background-color: white;
   border-top: 1px solid #efefef;
@@ -13,6 +13,11 @@
     font-size: 0.9375rem;
     outline: none;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    resize: none;
+    max-height: 6.25rem;
+    overflow-y: auto;
+    line-height: 1.4;
+    font-family: inherit;
 
     &:focus {
       border-color: #4765ff;
@@ -42,6 +47,7 @@
     color: white;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.2s ease;
+    flex-shrink: 0;
 
     &:hover {
       background-color: #3b52cc;

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

@@ -1,4 +1,4 @@
-import React, { useState, KeyboardEvent } from 'react';
+import React, { useState, KeyboardEvent, useRef, useEffect } from 'react';
 import { IonIcon } from '@ionic/react';
 import { send } from 'ionicons/icons';
 import './ChatInput.scss';
@@ -16,6 +16,15 @@ const ChatInput: React.FC<ChatInputProps> = ({
   disabled = false 
 }) => {
   const [inputValue, setInputValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize the textarea based on content
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [inputValue]);
 
   const handleSend = () => {
     if (inputValue.trim() && !disabled) {
@@ -24,7 +33,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
     }
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
@@ -33,19 +42,22 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div className="chat-input">
-      <input
-        type="text"
+      <textarea
+        ref={textareaRef}
         className="chat-input__field"
         placeholder="Type your question..."
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         onKeyDown={handleKeyDown}
         disabled={disabled}
+        rows={1}
+        maxLength={1000}
       />
       <button 
         className={`chat-input__button ${disabled || !inputValue.trim() ? 'chat-input__button--disabled' : ''}`}
         onClick={handleSend}
         disabled={disabled || !inputValue.trim()}
+        aria-label="Send message"
       >
         <IonIcon icon={send} className="chat-input__send-icon" />
       </button>

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

@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   max-width: 100%;
+  margin: 0.5rem 0;
+  animation: fadeIn 0.3s ease-in-out;
+  cursor: pointer;
 
   &__content {
     display: flex;
@@ -58,18 +61,70 @@
     padding: 0.75rem 1rem;
     max-width: 80%;
     word-wrap: break-word;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      filter: brightness(0.98);
+    }
   }
 
   &__text {
     font-size: 0.9375rem;
     line-height: 1.4;
     white-space: pre-wrap;
+    
+    // Markdown styles
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+    
+    code {
+      background-color: rgba(0, 0, 0, 0.1);
+      padding: 0.125rem 0.25rem;
+      border-radius: 0.25rem;
+      font-family: monospace;
+      font-size: 0.875rem;
+    }
+    
+    ul, ol {
+      padding-left: 1.5rem;
+      margin: 0.5rem 0;
+    }
+    
+    strong {
+      font-weight: 600;
+    }
+    
+    em {
+      font-style: italic;
+    }
   }
 
   &__time {
     font-size: 0.75rem;
     color: #999;
     margin-top: 0.25rem;
     text-align: right;
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    
+    &--visible {
+      opacity: 1;
+      height: auto;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }