Skip to content

Commit 2055e01

Browse files
taichan03taichan03
authored
Merge pull request #239 from StubberG3/listOfMed
feat: #237 - Add feedback button to patient results
2 parents dcc1d57 + 14fd61d commit 2055e01

File tree

6 files changed

+310
-250
lines changed

6 files changed

+310
-250
lines changed

‎frontend/src/components/Header/Chat.tsx‎

Lines changed: 39 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ErrorMessage from "../ErrorMessage";
77
import ConversationList from "./ConversationList";
88
import { extractContentFromDOM } from "../../services/domExtraction";
99
import axios from "axios";
10-
import { FaPlus, FaMinus, FaTimes, FaComment, FaComments, FaPills, FaLightbulb, FaArrowCircleDown } from "react-icons/fa";
10+
import { FaPlus, FaMinus, FaTimes, FaComment, FaComments, FaPills, FaLightbulb, FaArrowCircleDown, FaExpandAlt, FaExpandArrowsAlt } from "react-icons/fa";
1111
import {
1212
fetchConversations,
1313
continueConversation,
@@ -72,13 +72,6 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
7272
setPageContent(extractedContent);
7373
}, []);
7474

75-
// useEffect(() => {
76-
// if (chatContainerRef.current) {
77-
// const chatContainer = chatContainerRef.current;
78-
// chatContainer.scrollTop = chatContainer.scrollHeight;
79-
// }
80-
// }, [chatLog]);
81-
8275
const [bottom, setBottom] = useState(false);
8376

8477
const handleScroll = (event: React.UIEvent<HTMLElement>) => {
@@ -87,6 +80,8 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
8780
setBottom(bottom)
8881
};
8982

83+
const [expandChat, setExpandChat] = useState(false);
84+
9085
useEffect(() => {
9186
if (chatContainerRef.current && activeConversation) {
9287
const chatContainer = chatContainerRef.current;
@@ -204,52 +199,6 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
204199
}
205200
};
206201

207-
// const systemMessage = {
208-
// role: "system",
209-
// content: "You are a bot please keep conversation going.",
210-
// };
211-
// const sendMessage = (message: ChatLogItem[]) => {
212-
// const baseUrl = import.meta.env.VITE_API_BASE_URL;
213-
// const url = `${baseUrl}/chatgpt/chat`;
214-
215-
// const apiMessages = message.map((messageObject) => {
216-
// let role = "";
217-
// if (messageObject.is_user) {
218-
// role = "user";
219-
// } else {
220-
// role = "assistant";
221-
// }
222-
// return { role: role, content: messageObject.content };
223-
// });
224-
225-
// systemMessage.content += `If applicable, please use the following content to ask questions. If not applicable,
226-
// please answer to the best of your ability: ${pageContent}`;
227-
228-
// const apiRequestBody = {
229-
// prompt: [systemMessage, ...apiMessages],
230-
// };
231-
232-
// setIsLoading(true);
233-
234-
// axios
235-
// .post(url, apiRequestBody)
236-
// .then((response) => {
237-
// console.log(response);
238-
// setChatLog((prevChatLog) => [
239-
// ...prevChatLog,
240-
// {
241-
// is_user: false,
242-
// content: response.data.message.choices[0].message.content,
243-
// },
244-
// ]);
245-
// setIsLoading(false);
246-
// })
247-
// .catch((error) => {
248-
// setIsLoading(false);
249-
// console.log(error);
250-
// });
251-
// };
252-
253202
const handleSelectConversation = (id: Conversation["id"]) => {
254203
const selectedConversation = conversations.find(
255204
(conversation: any) => conversation.id === id,
@@ -267,13 +216,25 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
267216
};
268217

269218
useEffect(() => {
270-
if (showChat) loadConversations();
219+
if (showChat) {
220+
loadConversations();
221+
222+
const resizeObserver = new ResizeObserver(() => {
223+
const target = chatContainerRef.current;
224+
if (target) {
225+
const bottom = target.scrollHeight - Math.round(target.scrollTop) === target.clientHeight;
226+
setBottom(bottom);
227+
}
228+
});
229+
resizeObserver.observe(chatContainerRef.current);
230+
return () => resizeObserver.disconnect(); // clean up
231+
}
271232
}, [showChat]);
272233

273234
return (
274235
<>
275236
{showChat ? (
276-
<div className="show_chat ring-slate-1000/10 shadow">
237+
<div className={`show_chat ring-slate-1000/10 shadow ${expandChat ? 'full-screen' : 'windowed'}`}>
277238
<div
278239
id="chat_container"
279240
className=" mx-auto flex h-full flex-col overflow-auto rounded "
@@ -311,12 +272,28 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
311272
<br />
312273
</div>
313274

314-
<button
315-
className="delete flex items-center justify-center"
316-
onClick={() => setShowChat(false)}
317-
>
318-
<FaTimes className="chat_icon" />
319-
</button>
275+
<div className="flex space-x-2">
276+
<button
277+
onClick={() =>
278+
setExpandChat((prevState) => !prevState)
279+
}
280+
className="flex items-center justify-center"
281+
>
282+
{expandChat ? (
283+
// Icon for "Shrink"
284+
<FaExpandAlt className="chat_icon" />
285+
) : (
286+
// Icon for "expand"
287+
<FaExpandArrowsAlt className="chat_icon" />
288+
)}
289+
</button>
290+
<button
291+
className="delete flex items-center justify-center"
292+
onClick={() => setShowChat(false)}
293+
>
294+
<FaTimes className="chat_icon" />
295+
</button>
296+
</div>
320297
</div>
321298
<div id="inside_chat" onScroll={handleScroll} className="inside_chat" style={{scrollbarWidth: "thin", scrollBehavior: "smooth"}} ref={chatContainerRef}>
322299
<button id="scroll_down" className="scroll_down animate-bounce" onClick={handleScrollDown} style={{ visibility: bottom ? 'hidden' : 'visible' }}>

‎frontend/src/components/Header/chat.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@
33
}
44

55
.show_chat {
6-
@apply fixed bottom-6 left-4 rounded h-[50%] w-[320px] rounded-lg bg-white border shadow-xl dark:bg-slate-800 dark:text-slate-300;
6+
@apply fixed bottom-6 left-4 rounded rounded-lg bg-white border shadow-xl dark:bg-slate-800 dark:text-slate-300;
7+
}
8+
9+
.show_chat.windowed {
10+
@apply h-[50%] w-[320px];
11+
}
12+
13+
.show_chat.full-screen {
14+
@apply w-[95%] h-[95%];
715
}
816

917
.circle {

‎frontend/src/components/Modal/Modal.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ReactNode } from "react";
2+
import { FaTimes } from "react-icons/fa";
3+
4+
interface ModalProps {
5+
isOpen: boolean;
6+
onClose: React.MouseEventHandler<SVGElement>;
7+
children: ReactNode;
8+
}
9+
10+
function Modal ({ isOpen, onClose, children }: ModalProps) {
11+
return (
12+
<div className={`${isOpen ? 'fixed' : 'hidden'} inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50`}>
13+
<div className="relative top-20 mx-auto p-5 border w-[90%] shadow-lg rounded-md bg-white">
14+
<div className="flex justify-end hover:text-blue-500">
15+
<FaTimes onClick={onClose} />
16+
</div>
17+
<div className="mt-3">
18+
{children}
19+
</div>
20+
</div>
21+
</div>
22+
);
23+
}
24+
25+
export default Modal;

‎frontend/src/pages/Feedback/FeedbackForm.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export interface FormValues {
1313
image: string;
1414
}
1515

16+
interface FormProps {
17+
id?: string;
18+
}
19+
1620
// Error Message interface and validation
1721
interface ErrorMessages {
1822
[key: string]: string[];
@@ -27,7 +31,7 @@ const isValidErrorMessages = (data: unknown): data is ErrorMessages => {
2731
);
2832
};
2933

30-
const FeedbackForm = () => {
34+
function FeedbackForm ({ id }: FormProps) {
3135
const [feedback, setFeedback] = useState("");
3236
const [errorMessages, setErrorMessages] = useState<ErrorMessages>({});
3337
const [isPressed, setIsPressed] = useState(false);
@@ -194,10 +198,11 @@ const FeedbackForm = () => {
194198

195199
return (
196200
<>
197-
<div className="flex w-[100%] justify-between">
201+
<div className="flex flex-col w-[100%] justify-between">
198202
<h2 className="header_logo cursor-pointer font-satoshi text-xl font-bold text-gray-600 hover:text-blue-600 ">
199-
Leave Us Feedback!
203+
{ !id ? 'Leave Us Feedback!' : 'Report an Issue' }
200204
</h2>
205+
{ id && <h6 className="text-gray-500">Patient ID: <span className="font-light">{id}</span></h6> }
201206
</div>
202207
<section className="mx-auto w-full">
203208
<form onSubmit={handleSubmit} className="mt-2">
@@ -421,7 +426,7 @@ const FeedbackForm = () => {
421426
className="btnGray mr-5"
422427
onClick={handleCancel}
423428
>
424-
Cancel
429+
Clear
425430
</button>
426431
</div>
427432
<button

0 commit comments

Comments
 (0)