Added modal with Disclaimer

examples/voice_agent_webrtc_langgraph/ui/src/App.tsx

@@ -20,6 +20,8 @@ function App() {
   const [selectedAssistant, setSelectedAssistant] = useState<string | null>(null);
   const [selectedAssistantName, setSelectedAssistantName] = useState<string>("Speech to Speech Demo");
   const [rtcConfig, setRtcConfig] = useState<ConstructorParameters<typeof RTCPeerConnection>[0]>({});
+  const [showDisclaimer, setShowDisclaimer] = useState<boolean>(true);
+  const [disclaimerAgreed, setDisclaimerAgreed] = useState<boolean>(false);
   
   const webRTC = usePipecatWebRTC({
     url: RTC_OFFER_URL,
@@ -107,8 +109,67 @@ function App() {
     }
   }, [webRTC.status]); // Triggers immediately when status becomes "connected"
 
+  const handleDisclaimerContinue = () => {
+    if (disclaimerAgreed) {
+      setShowDisclaimer(false);
+    }
+  };
+
   return (
     <div className="h-screen flex flex-col">
+      {/* Disclaimer Modal */}
+      {showDisclaimer && (
+        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="p-6 md:p-8">
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                Healthcare Agent – Demo & Disclaimer
+              </h2>
+              <div className="text-gray-700 space-y-4 mb-6">
+                <p>
+                  This is a <strong>demo for educational purposes only</strong>. It is not medical advice, 
+                  a diagnosis, or a treatment tool, and it is not a medical device. The agent's responses 
+                  are generated by AI and may be incorrect, incomplete, harmful, or offensive. Do not share 
+                  personal or protected health information. No patient–provider relationship is created.
+                </p>
+                <p>
+                  You are responsible for how you use the demo. We make no warranties and accept no liability 
+                  for actions taken based on the agent's responses. For medical concerns, consult a qualified 
+                  clinician. In an emergency, call 911 (or your local equivalent).
+                </p>
+                <p>
+                  By continuing, you confirm you are 18+ and agree to our Terms and this Disclaimer.
+                </p>
+              </div>
+              <div className="mb-6">
+                <label className="flex items-start cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={disclaimerAgreed}
+                    onChange={(e) => setDisclaimerAgreed(e.target.checked)}
+                    className="mt-1 mr-3 h-5 w-5 text-nvidia border-gray-300 rounded focus:ring-nvidia"
+                  />
+                  <span className="text-gray-900 font-medium">
+                    I understand and agree
+                  </span>
+                </label>
+              </div>
+              <button
+                onClick={handleDisclaimerContinue}
+                disabled={!disclaimerAgreed}
+                className={`w-full py-3 px-6 rounded-lg font-semibold transition-colors ${
+                  disclaimerAgreed
+                    ? "bg-nvidia text-black hover:bg-nvidia/90 cursor-pointer"
+                    : "bg-gray-300 text-gray-500 cursor-not-allowed"
+                }`}
+              >
+                Continue
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      
       <header className="bg-black p-6 flex items-center">
         <img src="logo_mm.png" alt="NVIDIA ACE Logo" className="h-16 mr-8" />
         <div className="flex-1 flex justify-center">