-
+
diff --git a/client/web/src/pages/Conversation.jsx b/client/web/src/pages/Conversation.jsx
new file mode 100644
index 000000000..b84bee73a
--- /dev/null
+++ b/client/web/src/pages/Conversation.jsx
@@ -0,0 +1,87 @@
+/**
+ * src/pages/Conversation.jsx
+ *
+ * created by Lynchee on 7/28/23
+ */
+
+import React from 'react';
+import CallView from '../components/CallView';
+import TextView from '../components/TextView';
+import Button from '../components/Common/Button';
+
+
+// TODO: user can access this page only if isConnected.current
+
+const Conversation = ({
+ isConnected,
+ isCallView,
+ isRecording,
+ isPlaying,
+ audioPlayer,
+ handleStopCall,
+ handleContinueCall,
+ audioQueue,
+ setIsPlaying,
+ handleDisconnect,
+ setIsCallView,
+ send,
+ stopAudioPlayback,
+ textAreaValue,
+ setTextAreaValue,
+ messageInput,
+ setMessageInput,
+ useSearch,
+ setUseSearch,
+ callActive,
+ startRecording,
+ stopRecording,
+ preferredLanguage,
+ setPreferredLanguage,
+}) => {
+ return (
+
+ {/* we render both views but only display one. */}
+
+ { isConnected.current && isRecording ?
+ (Recording) : null
+ }
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Conversation;
diff --git a/client/web/src/pages/Home.jsx b/client/web/src/pages/Home.jsx
new file mode 100644
index 000000000..279d0e8aa
--- /dev/null
+++ b/client/web/src/pages/Home.jsx
@@ -0,0 +1,70 @@
+/**
+ * src/pages/Home.jsx
+ *
+ * created by Lynchee on 7/28/23
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import {isIP} from 'is-ip';
+import { useNavigate } from 'react-router-dom';
+
+import MobileWarning from '../components/MobileWarning';
+import Characters from '../components/Characters';
+import Button from '../components/Common/Button';
+
+const Home = ({ selectedCharacter, setSelectedCharacter, isPlaying }) => {
+ const navigate = useNavigate();
+ const isMobile = window.innerWidth <= 768;
+ const [characterGroups, setCharacterGroups] = useState([]);
+ const [characterConfirmed, setCharacterConfirmed] = useState(false);
+
+ // Get characters
+ useEffect(() => {
+ // Get host
+ const scheme = window.location.protocol;
+ var currentHost = window.location.host;
+ var parts = currentHost.split(':');
+ var hostname = parts[0];
+ // Local deployment uses 8000 port by default.
+ var newPort = '8000';
+
+ if (!(hostname === 'localhost' || isIP(hostname))) {
+ hostname = 'api.' + hostname;
+ newPort = window.location.protocol === "https:" ? 443 : 80;
+ }
+ var newHost = hostname + ':' + newPort + '/characters';
+ const url = scheme + '//' + newHost;
+
+ fetch(url)
+ .then(response => response.json())
+ .then(data => setCharacterGroups(data))
+ .catch(err => console.error(err));
+ }, [])
+
+ const handleNextClick = () => {
+ setCharacterConfirmed(true);
+ navigate("/settings");
+ }
+
+ return (
+ isMobile ? (
+
+ ) : (
+
+
Choose Your Partner
+
+
+
+
+ )
+ )
+};
+
+export default Home;
diff --git a/client/web/src/pages/Settings.jsx b/client/web/src/pages/Settings.jsx
new file mode 100644
index 000000000..8f3b43e39
--- /dev/null
+++ b/client/web/src/pages/Settings.jsx
@@ -0,0 +1,84 @@
+/**
+ * src/pages/Settings.jsx
+ *
+ * created by Lynchee on 7/28/23
+ */
+
+// TODO: user can access this page only if isConnected.current and selectedCharacter
+
+import React, { useState } from 'react';
+import Languages from '../components/Languages';
+import MediaDevices from '../components/MediaDevices';
+import Models from '../components/Models';
+import Button from '../components/Common/Button';
+import { useNavigate } from 'react-router-dom';
+import './styles.css';
+
+const Settings = ({ preferredLanguage, setPreferredLanguage, selectedDevice, setSelectedDevice, selectedModel, setSelectedModel, useSearch, setUseSearch, send, connect, setIsCallView, shouldPlayAudio}) => {
+ const navigate = useNavigate();
+ const [commMethod, setCommMethod] = useState("text");
+
+ const handleStartClick = async () => {
+ await connect();
+
+ // TODO(UI): Show loading animation
+
+ const interval = setInterval(() => {
+ // display callview
+ setIsCallView(commMethod === "call");
+ const greeting = {
+ "English": "Hi, my friend, what brings you here today?",
+ "Spanish": "Hola, mi amigo, ¿qué te trae por aquí hoy?"
+ }
+ // TODO(logic): setHeaderText(greeting[preferredLanguage]);
+
+ shouldPlayAudio.current = true;
+ clearInterval(interval);
+
+ // TODO(UI): Hide loading animation
+ }, 500);
+
+ navigate("/conversation");
+ }
+
+ const handleSearchChange = () => {
+ send('[!USE_SEARCH]' + (!useSearch).toString());
+ setUseSearch(!useSearch);
+ };
+
+ const handleCommMethodChange = (event) => {
+ setCommMethod(event.target.value);
+ };
+
+ return (
+
+
Confirm your setting
+
+ Communication method
+
+
+
+
+
+
+
+
+ advanced option
+
+
+
+
+ );
+};
+
+export default Settings;
diff --git a/client/web/src/pages/styles.css b/client/web/src/pages/styles.css
new file mode 100644
index 000000000..17cb53aa4
--- /dev/null
+++ b/client/web/src/pages/styles.css
@@ -0,0 +1,3 @@
+h2, h4, p {
+ color: white
+}