diff --git a/apps/amakrushi/src/assets/icons/speaker.svg b/apps/amakrushi/src/assets/icons/speaker.svg
new file mode 100644
index 00000000..ab6d8da2
--- /dev/null
+++ b/apps/amakrushi/src/assets/icons/speaker.svg
@@ -0,0 +1,10 @@
+
diff --git a/apps/amakrushi/src/components/HomePage/index.module.css b/apps/amakrushi/src/components/HomePage/index.module.css
index 30236568..170b6df8 100644
--- a/apps/amakrushi/src/components/HomePage/index.module.css
+++ b/apps/amakrushi/src/components/HomePage/index.module.css
@@ -66,6 +66,7 @@
text-align: left;
font-size: 14px;
font-weight: bold;
+ margin-top: 2px;
}
.keyboard{
diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
index 36717665..3622af45 100644
--- a/apps/amakrushi/src/components/HomePage/index.tsx
+++ b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -4,6 +4,7 @@ import React, {
useContext,
useEffect,
useMemo,
+ useRef,
useState,
} from 'react';
import { NextPage } from 'next';
@@ -46,6 +47,9 @@ const HomePage: NextPage = () => {
const [inputMsg, setInputMsg] = useState('');
const [showExampleMessages, setShowExampleMessages] = useState(false);
const [showChatBox, setShowChatBox] = useState(false);
+ const voiceRecorderRef = useRef(null);
+ const exampleMessagesRef = useRef(null);
+ const chatBoxButton = useRef(null);
// Show chatbox when audio recorder sends input message
useEffect(() => {
@@ -97,14 +101,39 @@ const HomePage: NextPage = () => {
setShowExampleMessages(inputValue.length === 0);
};
+ const handleDocumentClick = useCallback((event: any) => {
+ const target = event.target;
+
+ // Check if clicked outside voiceRecorder and exampleMessages
+ if (
+ //@ts-ignore
+ !voiceRecorderRef.current?.contains(target) &&
+ //@ts-ignore
+ !chatBoxButton.current?.contains(target) &&
+ //@ts-ignore
+ !exampleMessagesRef.current?.contains(target)
+ ) {
+ setShowExampleMessages(false);
+ // setShowChatBox(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ document.addEventListener('click', handleDocumentClick);
+
+ return () => {
+ document.removeEventListener('click', handleDocumentClick);
+ };
+ }, [handleDocumentClick]);
+
if (context?.isDown) {
return