Merge pull request #23 from mfdavies/patient-home-polish

Patient home polish
mfdavies · Jan 7, 2024 · 23ead67 · 23ead67
2 parents aa80a15 + 47ada2a
commit 23ead67
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 110 deletions.
diff --git a/backend/server/src/conversation/views.py b/backend/server/src/conversation/views.py
@@ -28,7 +28,6 @@ def start():
 
     return jsonify({"reply": greeting}), 200
 
-
 @conversation_blueprint.route("/send_message", methods=["POST"])
 def send_message():
     practitioner = request.args.get("practitioner")
@@ -38,33 +37,22 @@ def send_message():
     )
     if "conversation_id" not in session:
         return jsonify({"reply": "Please start a conversation first"}), 400
-
     conversation_id = session["conversation_id"]
     conversation = Conversation(
         user_doc_ref=user_doc_ref, conversaton_id=conversation_id
     )
 
-    # Store audio in a temp file
-    message = request.json.get("message")
-
-    # Generate a reply using the Conversation object
-    reply = conversation.generate_reply(message)
-    return jsonify({"reply": reply}), 200
-
-@conversation_blueprint.route("/transcribe", methods=["POST"])
-def transcribe():
-
     # Store audio in a temp file
     audio = request.files["audioFile"]
     temp_audio_path = os.path.join(tempfile.gettempdir(), "received_audio.wav")
     audio.save(temp_audio_path)
-
     # Transcribe the audio
     message = Conversation.transcribe(str(temp_audio_path))
     os.remove(temp_audio_path)
 
     # Generate a reply using the Conversation object
-    return jsonify({"user_msg": message}), 200
+    reply = conversation.generate_reply(message)
+    return jsonify({"reply": reply}), 200
 
 @conversation_blueprint.route('/end', methods=['POST'])
 def end():

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,11 +11,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.19",
     "axios": "^1.6.5",
     "firebase": "^10.7.1",
+    "gsap": "^3.12.4",
     "lucide-react": "^0.307.0",
-    "@splinetool/react-spline": "^2.2.6",
-    "@splinetool/runtime": "^1.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",

diff --git a/frontend/src/views/patient/PatientHome.jsx b/frontend/src/views/patient/PatientHome.jsx
@@ -1,15 +1,15 @@
-import Navbar from "./components/Navbar";
-import RecordButton from "./components/RecordButton";
-// import Ai3D from './components/Ai3D';
-import Conversation from './components/Conversation';
+import Navbar from './components/Navbar';
 import Exercises from './components/Exercises';
-import "./styles.css";
+import './styles.css';
 import { useState, useEffect, useCallback } from 'react';
 import VoiceAI from './components/VoiceAI';
 import axios from 'axios';
 import Skeleton from './components/Skeleton';
+import { LogOut } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 
 const PatientHome = () => {
+  const navigate = useNavigate();
   const [convo, setConvo] = useState({
     user: null,
     gpt: null,
@@ -33,55 +33,82 @@ const PatientHome = () => {
         const response = await axios.get(
           `http://localhost:8080/conversation/start?${queryParams.toString()}`
         );
-        setConvo((prevConvo) => ({ ...prevConvo, gpt: response.data.reply }));
+        setConvo((prevConvo) => {
+          if (prevConvo.gpt === null) {
+            return { ...prevConvo, gpt: response.data.reply };
+          }
+          return prevConvo;
+        });
       } catch (error) {
         console.error('Error fetching conversation start:', error);
       }
     };
     startConversation();
   }, []);
 
+  const handleEndSession = async () => {
+    try {
+      await axios.post('http://localhost:8080/conversation/end', {}, {
+        // TODO: what are thooooose
+        params: new URLSearchParams({
+          patient: 'demo',
+          practitioner: 'demo',
+        }) 
+      });
+      navigate('/')
+    } catch (error) {
+      console.error('Error ending conversation:', error);
+    }
+  };
+
   return (
-    <div className="flex flex-col h-screen">
-      <Navbar />
-      <main className="flex-grow pl-6 overflow-hidden">
-        <div className="flex h-full">
-          <div className="w-2/3 flex flex-col justify-between h-full left-column">
-            <header>
-              <h1 className="text-4xl font-medium">Welcome Back</h1>
-              <div className="text-3xl">John</div>
-            </header>
-            {/* <Conversation messages={messages} /> */}
-            <div className="flex flex-col gap-4">
-              <p className="text-base">{convo.user}</p>
-              <p className="text-xl font-medium transition-opacity">
-                {convo.gpt !== null
-                  ? convo.gpt
-                  : <Skeleton />}
-              </p>
+    <div className="outer-frame text-dark-teal  ">
+      <div className="inner-frame flex flex-col h-full p-6">
+        {/* <Navbar /> */}
+        <main className="flex-grow p-6 overflow-hidden">
+          <div className="flex h-full gap-12">
+            <div className="w-2/3 flex flex-col justify-between h-full left-column">
+              <header className="flex justify-between items-center">
+                <div>
+                  <h1 className="text-4xl font-medium">Welcome Back</h1>
+                  <div className="text-3xl">John</div>
+                </div>
+                <button
+                  onClick={handleEndSession}
+                  className='flex items-center gap-2 btn btn-active btn-glass'>
+                  Done for the day?
+                  <LogOut size={18} />
+                </button>
+              </header>
+              {/* <Conversation messages={messages} /> */}
+              <div className="flex flex-col gap-4 w-3/4">
+                <p className="text-base">{convo.user}</p>
+                <div className="text-xl font-medium">
+                  {convo.gpt !== null ? convo.gpt : <Skeleton />}
+                </div>
+              </div>
+              <form className="flex items-center">
+                <input
+                  type="text"
+                  placeholder="You can type here..."
+                  className="input input-bordered w-full max-w-xs mr-2"
+                />
+                <button className="btn btn-neutral">Prompt</button>
+              </form>
+            </div>
+            <div className="w-1/3 right-column border-l-[1px]">
+              <Exercises />
             </div>
-            <form className="flex items-center">
-              <input
-                type="text"
-                placeholder="You can type here..."
-                className="input input-bordered w-full max-w-xs mr-2"
-              />
-              <button className="btn btn-neutral">Prompt</button>
-            </form>
-          </div>
-          <div className="w-px mt-40 mb-40 bg-gray-200"></div>
-          <div className="w-1/3 right-column">
-            <Exercises />
           </div>
+        </main>
+        <div className="relative">
+          <VoiceAI
+            updateUserMessage={updateUserMessage}
+            updateGptResponse={updateGptResponse}
+          />
         </div>
-      </main>
-      <div className="relative">
-        <VoiceAI
-          updateUserMessage={updateUserMessage}
-          updateGptResponse={updateGptResponse}
-        />
+        {/* TODO: finish button that calls conversation/end */}
       </div>
-      {/* TODO: finish button that calls conversation/end */}
     </div>
   );
 };

diff --git a/frontend/src/views/patient/components/Exercises.jsx b/frontend/src/views/patient/components/Exercises.jsx
@@ -49,15 +49,15 @@ const Exercises = () => {
     instructions: ["Step 1 for Card 5", "Step 2 for Card 5", "Step 3 for Card 5"] 
   },
   { 
-    id: 5, 
-    title: "Card 5", 
+    id: 6, 
+    title: "Card 6", 
     description: "Description for Card 5", 
     imageUrl: glutesImage, // Placeholder image
     instructions: ["Step 1 for Card 5", "Step 2 for Card 5", "Step 3 for Card 5"] 
   },
   { 
-    id: 5, 
-    title: "Card 5", 
+    id: 7, 
+    title: "Card 7", 
     description: "Description for Card 5", 
     imageUrl: glutesImage, // Placeholder image
     instructions: ["Step 1 for Card 5", "Step 2 for Card 5", "Step 3 for Card 5"] 

diff --git a/frontend/src/views/patient/components/Skeleton.jsx b/frontend/src/views/patient/components/Skeleton.jsx
@@ -1,9 +1,9 @@
 const Skeleton = () => {
   return (
-    <div className="flex flex-col gap-4 w-52">
-      <div className="skeleton h-4 w-28"></div>
+    <div className="flex flex-col gap-4 w-full">
       <div className="skeleton h-4 w-full"></div>
       <div className="skeleton h-4 w-full"></div>
+      <div className="skeleton h-4 w-1/2"></div>
     </div>
   );
 };