Merge pull request #19 from mfdavies/patient-convo

Patient convo

.gitignore

@@ -1,4 +1,3 @@
-/venv
 *venv
 *.env
 *.pyc

backend/server/src/conversation/views.py

@@ -44,6 +44,16 @@ def send_message():
         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")
@@ -54,5 +64,19 @@ def send_message():
     os.remove(temp_audio_path)
 
     # Generate a reply using the Conversation object
-    reply = conversation.generate_reply(message)
-    return jsonify({"reply": reply}), 200
+    return jsonify({"user_msg": message}), 200
+
+@conversation_blueprint.route('/end', methods=['POST'])
+def end():
+    if 'conversation_id' not in session:
+        return jsonify({'reply': 'No Conversation to end'}), 200
+    conversation_id = session.pop('conversation_id')
+    practitioner = request.args.get('practitioner')
+    patient = request.args.get('patient')
+
+    user_doc_ref = users_ref.document(practitioner).collection("patients").document(patient)
+
+    # Retrieve the Conversation object based on the conversation ID
+    conversation = Conversation(user_doc_ref, conversaton_id=conversation_id)
+    summary = conversation.end_conversation()
+    return jsonify({'reply': summary}), 200

frontend/.eslintrc.cjs

@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    "react/prop-types": "off"
   },
 }

frontend/package.json

@@ -18,7 +18,8 @@
     "@splinetool/runtime": "^1.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.1"
+    "react-router-dom": "^6.21.1",
+    "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

frontend/src/views/patient/PatientHome.jsx

@@ -4,26 +4,42 @@ import RecordButton from "./components/RecordButton";
 import Conversation from './components/Conversation';
 import Exercises from './components/Exercises';
 import "./styles.css";
+import { useState, useEffect, useCallback } from 'react';
+import VoiceAI from './components/VoiceAI';
+import axios from 'axios';
+import Skeleton from './components/Skeleton';
 
 const PatientHome = () => {
-  const messages = [
-    {
-      sender: 'patient',
-      text: 'Hi there, and I was hoping to try something new today. Can you guide me through a specific exercise from the set you provided?',
-    },
-    {
-      sender: 'ai',
-      text: "Of course! I'm glad to hear you've been keeping up with your exercises. Which one were you thinking of trying, or do you have a specific area you'd like to focus on today?",
-    },
-    {
-      sender: 'patient',
-      text: 'Hi there, and I was hoping to try something new today. Can you guide me through a specific exercise from the set you provided?',
-    },
-    {
-      sender: 'ai',
-      text: "Of course! I'm glad to hear you've been keeping up with your exercises. Which one were you thinking of trying, or do you have a specific area you'd like to focus on today?",
-    },
-  ];
+  const [convo, setConvo] = useState({
+    user: null,
+    gpt: null,
+  });
+
+  const updateUserMessage = useCallback((newMessage) => {
+    setConvo((prevConvo) => ({ ...prevConvo, user: newMessage }));
+  }, []);
+
+  const updateGptResponse = useCallback((newResponse) => {
+    setConvo((prevConvo) => ({ ...prevConvo, gpt: newResponse }));
+  }, []);
+
+  useEffect(() => {
+    const startConversation = async () => {
+      const queryParams = new URLSearchParams({
+        patient: 'demo',
+        practitioner: 'demo',
+      });
+      try {
+        const response = await axios.get(
+          `http://localhost:8080/conversation/start?${queryParams.toString()}`
+        );
+        setConvo((prevConvo) => ({ ...prevConvo, gpt: response.data.reply }));
+      } catch (error) {
+        console.error('Error fetching conversation start:', error);
+      }
+    };
+    startConversation();
+  }, []);
 
   return (
     <div className="flex flex-col h-screen">
@@ -35,28 +51,37 @@ const PatientHome = () => {
               <h1 className="text-4xl font-medium">Welcome Back</h1>
               <div className="text-3xl">John</div>
             </header>
-            <Conversation messages={messages} />
-          <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>
+            {/* <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>
+            <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>
         </div>
       </main>
-      <RecordButton />
       <div className="relative">
-        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
-          {/* <Ai3D /> */}
-        </div>
+        <VoiceAI
+          updateUserMessage={updateUserMessage}
+          updateGptResponse={updateGptResponse}
+        />
       </div>
+      {/* TODO: finish button that calls conversation/end */}
     </div>
   );
 };

frontend/src/views/patient/components/Conversation.jsx

@@ -8,7 +8,7 @@ const Conversation = ({ messages }) => {
   }, [messages]);
 
   return (
-    <div className="h-64 overflow-y-auto pr-24">
+    <div className="h-64 overflow-y-auto pr-32">
       {messages.map((message, index) => (
         <div key={index} className={`h-32 flex items-center justify-center ${message.sender === 'patient' ? 'text-sm text-gray-700' : 'text-sm font-medium text-gray-900'}`}>
           <p className="-center text-lg">{message.text}</p>

frontend/src/views/patient/components/Skeleton.jsx

@@ -0,0 +1,11 @@
+const Skeleton = () => {
+  return (
+    <div className="flex flex-col gap-4 w-52">
+      <div className="skeleton h-4 w-28"></div>
+      <div className="skeleton h-4 w-full"></div>
+      <div className="skeleton h-4 w-full"></div>
+    </div>
+  );
+};
+
+export default Skeleton;