Implement next-web functionalities.

Shaunwei · Sep 18, 2023 · 0ff50eb · 0ff50eb
1 parent 27893c3
commit 0ff50eb
Show file tree

Hide file tree

Showing 18 changed files with 665 additions and 122 deletions.
diff --git a/client/next-web/package-lock.json b/client/next-web/package-lock.json
diff --git a/client/next-web/package.json b/client/next-web/package.json
@@ -16,6 +16,7 @@
     "eslint-config-next": "13.4.18",
     "firebase": "^10.2.0",
     "framer-motion": "^10.16.0",
+    "hark": "^1.2.3",
     "is-ip": "^5.0.1",
     "lz-string": "^1.5.0",
     "next": "^13.4.19",
@@ -26,6 +27,7 @@
     "react-input-emoji": "^5.3.1",
     "swr": "^2.2.1",
     "tailwindcss": "3.3.3",
+    "uuid": "^9.0.1",
     "zustand": "^4.4.1"
   }
 }
diff --git a/client/next-web/src/app/_components/UserDropdown.js b/client/next-web/src/app/_components/UserDropdown.js
@@ -6,8 +6,14 @@ import {
 } from '@nextui-org/dropdown';
 import { Avatar } from '@nextui-org/avatar';
 import signout from '@/firebase/auth/signout';
+import {useAppStore} from "@/lib/store";
+import {useEffect} from "react";
 
 export default function UserDropdown({ user }) {
+  const {setToken} = useAppStore();
+  useEffect(()=> {
+    setToken(user.accessToken);
+  }, []);
   async function handleMenuClick(key) {
     switch(key) {
       case 'profile':

diff --git a/client/next-web/src/app/conversation/_components/Chat.js b/client/next-web/src/app/conversation/_components/Chat.js
@@ -8,7 +8,7 @@ import { useAppStore } from '@/lib/store';
 export default function Chat({
   size
 }) {
-  const { chatContent } = useAppStore();
+  const { chatContent, interimChat } = useAppStore();
 
   let height = '';
   switch (size) {
@@ -23,11 +23,19 @@ export default function Chat({
   return (
     <div className={`flex flex-col gap-5 md:mt-4 overflow-y-scroll ${height}`}>
       {
-        chatContent?.map((line) => {
-          if (line.from === 'character') {
+        [...chatContent, interimChat].sort((a, b) => {
+          if (!a) {
+            return 1;
+          } else if (!b) {
+            return -1;
+          } else {
+            return a.timestamp > b.timestamp ? 1 : -1;
+          }
+        })?.map((line) => {
+          if (line && line.hasOwnProperty('from') && line.from === 'character') {
             return (
               <div
-                key={line.timeStamp}
+                key={line.hasOwnProperty('timestamp') ? line.timestamp: 0}
                 className="flex flex-col md:flex-row self-start items-start md:items-stretch"
               >
                 <p className="w-60 md:w-fit md:text-lg py-2 px-5 font-light flex-none rounded-full md:mr-3 rounded-bl-none bg-real-navy/20">{line.content}</p>
@@ -50,10 +58,10 @@ export default function Chat({
                 </div>
               </div>
             );
-          } else {
+          } else if (line && line.hasOwnProperty('from') && line.from === 'user') {
             return (
               <div
-                key={line.timeStamp}
+                key={line.timestamp}
                 className="self-end"
               >
                 <p className="w-60 md:w-fit md:text-lg py-2 px-5 font-light flex-none rounded-full rounded-br-none bg-real-navy/50">{line.content}</p>

diff --git a/client/next-web/src/app/conversation/_components/InputField.js b/client/next-web/src/app/conversation/_components/InputField.js
@@ -8,14 +8,21 @@ import Image from 'next/image';
 import talkSvg from '@/assets/svgs/talk.svg';
 import micSvg from '@/assets/svgs/microphone.svg';
 import pauseSvg from '@/assets/svgs/pause.svg';
+import {useAppStore} from "@/lib/store";
 
 export default function InputField() {
   const [text, setText] = useState('');
   const [inputMode, setInputMode] = useState('text');
   const [isTalking, setIsTalking] = useState(false);
+  const {sendOverSocket, appendUserChat} = useAppStore();
+  const {stopAudioPlayback} = useAppStore();
 
   function handleOnEnter(text) {
-    // todo
+    if (text) {
+      stopAudioPlayback();
+      appendUserChat(text);
+      sendOverSocket(text);
+    }
   }
 
   function startTalk() {

diff --git a/client/next-web/src/app/conversation/_components/SettingPanel.js b/client/next-web/src/app/conversation/_components/SettingPanel.js
@@ -6,14 +6,7 @@ import AudioPanel from './AudioPanel';
 import LanguagePanel from './LanguagePanel';
 import EnhancePanel from './EnhancePanel';
 
-export default function SettingPanel({
-  microphone,
-  microphoneList,
-  handleMicrophoneSelect,
-  speaker,
-  speakerList,
-  handleSpeakerSelect,
-}) {
+export default function SettingPanel() {
   const [openedPanel, setOpenedPanel] = useState('audio');
 
   return (
@@ -46,14 +39,7 @@ export default function SettingPanel({
       </div>
       <div className="pl-10 w-full">
       {openedPanel === 'audio' && (
-        <AudioPanel
-          microphone={microphone}
-          microphoneList={microphoneList}
-          handleMicrophoneSelect={handleMicrophoneSelect}
-          speaker={speaker}
-          speakerList={speakerList}
-          handleSpeakerSelect={handleSpeakerSelect}
-        />
+        <AudioPanel/>
       )}
       {openedPanel === 'language' && (
         <LanguagePanel/>

diff --git a/client/next-web/src/app/conversation/_components/SettingsButton.js b/client/next-web/src/app/conversation/_components/SettingsButton.js
@@ -10,14 +10,7 @@ import Image from 'next/image';
 import settingsSVG from '@/assets/svgs/settings.svg';
 import SettingPanel from './SettingPanel';
 
-export default function SettingsButton({
-  microphone,
-  microphoneList,
-  handleMicrophoneSelect,
-  speaker,
-  speakerList,
-  handleSpeakerSelect,
-}) {
+export default function SettingsButton() {
   const {isOpen, onOpen, onClose} = useDisclosure();
 
   return (
@@ -49,14 +42,7 @@ export default function SettingsButton({
       <ModalContent>
         <ModalHeader>Settings</ModalHeader>
         <ModalBody>
-          <SettingPanel
-            microphone={microphone}
-            microphoneList={microphoneList}
-            handleMicrophoneSelect={handleMicrophoneSelect}
-            speaker={speaker}
-            speakerList={speakerList}
-            handleSpeakerSelect={handleSpeakerSelect}
-          />
+          <SettingPanel/>
         </ModalBody>
       </ModalContent>
     </Modal>