From 9dfb863eabab815e6167319b4d1221a0e646c313 Mon Sep 17 00:00:00 2001
From: emperorbj <cwaku96@gmail.com>
Date: Sat, 9 Aug 2025 16:29:18 +0100
Subject: [PATCH 1/3] refactor: move TypeScript types to dedicated 'types'
 folder

---
 frontend/src/components/Chat.tsx    | 12 ++----------
 frontend/src/components/Sidebar.tsx | 14 ++------------
 frontend/types/DataTypes.ts         | 24 ++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 22 deletions(-)
 create mode 100644 frontend/types/DataTypes.ts

diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index 66c92b9..863821e 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -1,21 +1,13 @@
 import { FiMenu, FiSend } from 'react-icons/fi';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-
 import ReactMarkdown from 'react-markdown';
 import TypingIndicator from './TypingIndicator';
 import remarkGfm from 'remark-gfm';
 import styles from './Chat.module.css';
+import type { Message,ChatProps } from '../../types/DataTypes'
+
 
-interface Message {
-  text: string;
-  sender: 'user' | 'bot';
-  timestamp: string;
-}
 
-interface ChatProps {
-  onMenuClick: () => void;
-  resetSignal?: number;
-}
 
 const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
   const [messages, setMessages] = useState<Message[]>([]);
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 7feb23d..bccbae2 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,20 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import styles from './Sidebar.module.css';
 import { FiPlus, FiX } from 'react-icons/fi';
+import type {HistoryItem,SidebarProps} from '../../types/DataTypes'
+
 
-interface HistoryItem {
-  sessionId: string;
-  timestamp: string;
-  preview: string;
-}
 
-interface SidebarProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onNewChat: () => void;
-  onRestoreSession: (sessionId: string) => void;
-  activeSessionId: string | null;
-}
 
 const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, onNewChat, onRestoreSession, activeSessionId }) => {
   const [history, setHistory] = useState<HistoryItem[]>([]);
diff --git a/frontend/types/DataTypes.ts b/frontend/types/DataTypes.ts
new file mode 100644
index 0000000..84eafd4
--- /dev/null
+++ b/frontend/types/DataTypes.ts
@@ -0,0 +1,24 @@
+export interface Message {
+  text: string;
+  sender: 'user' | 'bot';
+  timestamp: string;
+}
+
+export interface ChatProps {
+  onMenuClick: () => void;
+  resetSignal?: number;
+}
+
+export interface HistoryItem {
+  sessionId: string;
+  timestamp: string;
+  preview: string;
+}
+
+export interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onNewChat: () => void;
+  onRestoreSession: (sessionId: string) => void;
+  activeSessionId: string | null;
+}
\ No newline at end of file

From be8752520acae148e2db5745b88f652ea0431d7c Mon Sep 17 00:00:00 2001
From: emperorbj <cwaku96@gmail.com>
Date: Sat, 9 Aug 2025 17:06:52 +0100
Subject: [PATCH 2/3] separated header and welcome suggestions into their
 components separately

---
 frontend/src/components/Chat.tsx              | 32 ++++---------------
 .../src/components/sub-components/Header.tsx  | 17 ++++++++++
 .../WelcomePromptSuggestions.tsx              | 27 ++++++++++++++++
 frontend/types/DataTypes.ts                   | 12 +++++++
 4 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/sub-components/Header.tsx
 create mode 100644 frontend/src/components/sub-components/WelcomePromptSuggestions.tsx

diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index 863821e..5ce3db1 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -4,9 +4,9 @@ import ReactMarkdown from 'react-markdown';
 import TypingIndicator from './TypingIndicator';
 import remarkGfm from 'remark-gfm';
 import styles from './Chat.module.css';
-import type { Message,ChatProps } from '../../types/DataTypes'
-
-
+import type { Message,ChatProps,HandleSendType } from '../../types/DataTypes'
+import Header from './sub-components/Header';
+import WelcomePromptSuggestions from './sub-components/WelcomePromptSuggestions';
 
 
 const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
@@ -28,7 +28,7 @@ const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
   const userId = getOrCreateId('apiconf_user_id');
   const sessionId = getOrCreateId('apiconf_session_id');
 
-  const handleSend = useCallback(async (messageToSend: string) => {
+  const handleSend:HandleSendType = useCallback(async (messageToSend: string) => {
     if (!messageToSend.trim()) return;
 
     // Save the first user message as the preview for the history
@@ -161,30 +161,12 @@ const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
 
   return (
     <div className={styles.chat}>
-      <div className={styles.chatHeader}>
-        <button className={styles.menuButton} onClick={onMenuClick}>
-          <FiMenu />
-        </button>
-        Chat with Ndu
-      </div>
+      {/* header */}
+      <Header onMenuClick={onMenuClick}/>
       <div className={styles.content}>
         <div className={styles.messages}>
           {messages.length === 0 ? (
-            <div className={styles.welcome}>
-              <h1>Welcome!</h1>
-              <p>Your friendly assistant for the API Conference 2025 in Lagos. Ask me about speakers, schedules, and more!</p>
-              <div className={styles.promptSuggestions}>
-                <button className={styles.promptButton} onClick={() => handleSend('Who are the main speakers?')}>
-                  Who are the main speakers?
-                </button>
-                <button className={styles.promptButton} onClick={() => handleSend('What is the conference schedule?')}>
-                  What is the conference schedule?
-                </button>
-                <button className={styles.promptButton} onClick={() => handleSend('How do I get to the venue?')}>
-                  How do I get to the venue?
-                </button>
-              </div>
-            </div>
+           <WelcomePromptSuggestions handleSend={handleSend}/>
           ) : (
             messages.map((msg, index) => (
               <div
diff --git a/frontend/src/components/sub-components/Header.tsx b/frontend/src/components/sub-components/Header.tsx
new file mode 100644
index 0000000..192d726
--- /dev/null
+++ b/frontend/src/components/sub-components/Header.tsx
@@ -0,0 +1,17 @@
+
+import styles from '../Chat.module.css';
+import { FiMenu} from 'react-icons/fi';
+import type { HeaderType} from '../../../types/DataTypes';
+
+const Header = ({onMenuClick}:HeaderType) => {
+  return (
+    <div className={styles.chatHeader}>
+        <button className={styles.menuButton} onClick={onMenuClick}>
+          <FiMenu />
+        </button>
+        Chat with Ndu
+      </div>
+  )
+}
+
+export default Header
\ No newline at end of file
diff --git a/frontend/src/components/sub-components/WelcomePromptSuggestions.tsx b/frontend/src/components/sub-components/WelcomePromptSuggestions.tsx
new file mode 100644
index 0000000..bf98bd9
--- /dev/null
+++ b/frontend/src/components/sub-components/WelcomePromptSuggestions.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import styles from '../Chat.module.css';
+import type { WelcomePromptSuggestionsProps } from '../../../types/DataTypes';
+
+
+const WelcomePromptSuggestions = ({handleSend}:WelcomePromptSuggestionsProps) => {
+
+  return (
+     <div className={styles.welcome}>
+              <h1>Welcome!</h1>
+              <p>Your friendly assistant for the API Conference 2025 in Lagos. Ask me about speakers, schedules, and more!</p>
+              <div className={styles.promptSuggestions}>
+                <button className={styles.promptButton} onClick={() => handleSend('Who are the main speakers?')}>
+                  Who are the main speakers?
+                </button>
+                <button className={styles.promptButton} onClick={() => handleSend('What is the conference schedule?')}>
+                  What is the conference schedule?
+                </button>
+                <button className={styles.promptButton} onClick={() => handleSend('How do I get to the venue?')}>
+                  How do I get to the venue?
+                </button>
+              </div>
+            </div>
+  )
+}
+
+export default WelcomePromptSuggestions
\ No newline at end of file
diff --git a/frontend/types/DataTypes.ts b/frontend/types/DataTypes.ts
index 84eafd4..070a564 100644
--- a/frontend/types/DataTypes.ts
+++ b/frontend/types/DataTypes.ts
@@ -4,6 +4,18 @@ export interface Message {
   timestamp: string;
 }
 
+export interface HandleSendType {
+  (messageToSend: string): Promise<void>;
+}
+
+export interface WelcomePromptSuggestionsProps {
+  handleSend: HandleSendType;
+}
+
+export interface HeaderType {
+  onMenuClick: ()=> void
+}
+
 export interface ChatProps {
   onMenuClick: () => void;
   resetSignal?: number;

From b7fa2976ed61ceb7aa55764c7798f1b2a5d4e619 Mon Sep 17 00:00:00 2001
From: emperorbj <cwaku96@gmail.com>
Date: Sat, 9 Aug 2025 17:18:39 +0100
Subject: [PATCH 3/3] refactored: separated chat Input area into its own
 component

---
 frontend/src/components/Chat.tsx              | 18 +++----------
 .../components/sub-components/InputArea.tsx   | 26 +++++++++++++++++++
 frontend/types/DataTypes.ts                   |  6 +++++
 3 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/sub-components/InputArea.tsx

diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index 5ce3db1..f0d1ec4 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -1,4 +1,4 @@
-import { FiMenu, FiSend } from 'react-icons/fi';
+
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import TypingIndicator from './TypingIndicator';
@@ -7,6 +7,7 @@ import styles from './Chat.module.css';
 import type { Message,ChatProps,HandleSendType } from '../../types/DataTypes'
 import Header from './sub-components/Header';
 import WelcomePromptSuggestions from './sub-components/WelcomePromptSuggestions';
+import InputArea from './sub-components/InputArea';
 
 
 const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
@@ -198,20 +199,7 @@ const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
           <div ref={messagesEndRef} />
         </div>
       </div>
-      <div className={styles.inputArea}>
-        <form onSubmit={handleSubmit} className={styles.inputForm}>
-          <input
-            type="text"
-            className={styles.inputField}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Ask something..."
-          />
-          <button type="submit" className={styles.sendButton}>
-            <FiSend />
-          </button>
-        </form>
-      </div>
+      <InputArea input={input} setInput={setInput} handleSubmit={handleSubmit}/>
     </div>
   );
 };
diff --git a/frontend/src/components/sub-components/InputArea.tsx b/frontend/src/components/sub-components/InputArea.tsx
new file mode 100644
index 0000000..33e0df6
--- /dev/null
+++ b/frontend/src/components/sub-components/InputArea.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import type { InputAreaProps } from '../../../types/DataTypes'
+import styles from '../Chat.module.css';
+import { FiSend } from 'react-icons/fi';
+
+
+const InputArea: React.FC <InputAreaProps> = ({input,setInput,handleSubmit}) => {
+  return (
+    <div className={styles.inputArea}>
+        <form onSubmit={handleSubmit} className={styles.inputForm}>
+          <input
+            type="text"
+            className={styles.inputField}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Ask something..."
+          />
+          <button type="submit" className={styles.sendButton}>
+            <FiSend />
+          </button>
+        </form>
+      </div>
+  )
+}
+
+export default InputArea
\ No newline at end of file
diff --git a/frontend/types/DataTypes.ts b/frontend/types/DataTypes.ts
index 070a564..e960ed3 100644
--- a/frontend/types/DataTypes.ts
+++ b/frontend/types/DataTypes.ts
@@ -4,6 +4,12 @@ export interface Message {
   timestamp: string;
 }
 
+export interface InputAreaProps {
+  input: string;
+  setInput: React.Dispatch<React.SetStateAction<string>>;
+  handleSubmit: (e: React.FormEvent) => void;
+}
+
 export interface HandleSendType {
   (messageToSend: string): Promise<void>;
 }