Updating Amica to 1.2 (New Version) (To be streamlined for speed)

package.json

@@ -25,6 +25,7 @@
     "@pixiv/three-vrm": "^2.0.7",
     "@ricky0123/vad-react": "^0.0.17",
     "@supabase/supabase-js": "^2.39.0",
+    "@tabler/icons-react": "^3.11.0",
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@xenova/transformers": "^2.7.0",

src/components/assistantText.tsx

@@ -7,6 +7,9 @@ export const AssistantText = ({ message }: { message: string }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [unlimited, setUnlimited] = useState(false)
 
+  // Replace all of the emotion tag in message with ""
+  message = message.replace(/\[(.*?)\]/g, "");
+
   useEffect(() => {
     scrollRef.current?.scrollIntoView({
       behavior: "smooth",
@@ -45,3 +48,4 @@ export const AssistantText = ({ message }: { message: string }) => {
     </div>
   );
 };
+

src/components/chatLog.tsx

@@ -22,7 +22,7 @@ export const ChatLog = ({
 
   const handleResumeButtonClick = (num: number, newMessage: string) => {
     bot.setMessageList(messages.slice(0, num));
-    bot.receiveMessageFromUser(newMessage);
+    bot.receiveMessageFromUser(newMessage,false);
   };
 
   const txtFileInputRef = useRef<HTMLInputElement>(null);
@@ -56,7 +56,7 @@ export const ChatLog = ({
             bot.setMessageList(parsedChat.slice(0, parsedChat.length - 1));
 
             if (lastMessage.role === "user") {
-              bot.receiveMessageFromUser(lastMessage.content);
+              bot.receiveMessageFromUser(lastMessage.content,false);
             } else {
               bot.bubbleMessage(lastMessage.role, lastMessage.content);
             }
@@ -132,7 +132,7 @@ export const ChatLog = ({
               <div key={i} ref={messages.length - 1 === i ? chatScrollRef : null}>
                 <Chat
                   role={msg.role}
-                  message={msg.content}
+                  message={msg.content.replace(/\[(.*?)\]/g, "")}
                   num={i}
                   onClickResumeButton={handleResumeButtonClick}
                 />
@@ -165,10 +165,10 @@ function Chat({
   onClickResumeButton: (num: number, message: string) => void;
 }) {
   const { t } = useTranslation();
-  const [textAreaValue, setTextAreaValue] = useState(message);
+  // const [textAreaValue, setTextAreaValue] = useState(message);
 
   const onClickButton = () => {
-    const newMessage = textAreaValue
+    const newMessage = message
     onClickResumeButton(num, newMessage);
   };
 
@@ -203,11 +203,11 @@ function Chat({
       <div className="px-4 py-2 bg-white/80 backdrop-blur-lg rounded-b-lg shadow-sm">
         <div className='typography-16 font-M_PLUS_2 font-bold text-gray-800'>
           {role === "assistant" ? (
-            <div>{textAreaValue}</div>
+            <div>{message}</div>
           ) : (
             <FlexTextarea
-              value={textAreaValue}
-              onChange={setTextAreaValue}
+              value={message}
+              // onChange={setTextAreaValue}
             />
           )}
         </div>

src/components/chatModeText.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
+import { config } from "@/utils/config";
+import { IconButton } from "./iconButton";
+import { useTranslation } from "react-i18next";
+import { Message } from "@/features/chat/messages";
+
+export const ChatModeText = ({ messages }: { messages: Message[] }) => {
+    const chatScrollRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        chatScrollRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+        });
+    }, [messages]);
+
+    return (
+        <div className="fixed bottom-0 w-full h-[90%] mb-20 flex flex-col justify-end">
+            <div className="w-full h-full overflow-y-auto flex flex-col-reverse">
+
+                <div className="w-full max-w-full mx-auto px-4 md:px-16 flex flex-col">
+                    {messages.map((msg, i) => {
+                        return (
+                            <div key={i} ref={messages.length - 1 === i ? chatScrollRef : null}>
+                                <Chat
+                                    role={msg.role}
+                                    message={msg.content.replace(/\[(.*?)\]/g, "")}
+                                    num={i}
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+
+    );
+};
+
+function Chat({
+    role,
+    message,
+    num,
+}: {
+    role: string;
+    message: string;
+    num: number;
+}) {
+    const { t } = useTranslation();
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const [unlimited, setUnlimited] = useState(false);
+
+    // useEffect(() => {
+    //     scrollRef.current?.scrollIntoView({
+    //         behavior: "smooth",
+    //         block: "center",
+    //     });
+    // });
+
+    return (
+        <div className={clsx(
+            'mx-auto max-w-4xl my-2',
+            role === "assistant" ? "pr-10 sm:pr-20" : "pl-10 sm:pl-20",
+        )}>
+            <div className="backdrop-blur-lg rounded-lg">
+                <div className="shadow-lg backdrop-blur-lg rounded-lg bg-white/70">
+
+                    <div className={clsx(
+                        'pr-1 py-3 bg-rose/90 rounded-t-lg text-white font-bold tracking-wider',
+                        role === "assistant" ? "px-8" : "px-8",
+                    )}>
+                        <span className={clsx(
+                            "p-4 rounded-lg rounded-tl-none rounded-tr-none shadow-sm",
+                            role === "assistant" ? "bg-pink-600/80" : "bg-cyan-600/80",
+                        )}>
+                            {role === "assistant" && config('name').toUpperCase()}
+                            {role === "user" && t("YOU")}
+                        </span>
+
+                        {role === "assistant" && (
+                            <IconButton
+                                iconName="24/FrameSize"
+                                className="bg-transparent hover:bg-transparent active:bg-transparent disabled:bg-transparent float-right"
+                                isProcessing={false}
+                                onClick={() => setUnlimited(!unlimited)}
+                            />
+
+                        )}
+                    </div>
+                    {role === "assistant" && (
+                        <div className={clsx(
+                            "px-8 py-4 overflow-y-auto",
+                            unlimited ? 'max-h-32' : 'max-h-[calc(75vh)]',
+                        )}>
+                            <div className="min-h-8 max-h-full typography-16 font-bold text-gray-600">
+                                {message.replace(/\[([a-zA-Z]*?)\]/g, "")}
+                                <div ref={scrollRef} />
+                            </div>
+                        </div>
+                    )}
+                    {role === "user" && (
+                        <div className="px-8 py-4 max-h-32 overflow-y-auto">
+                            <div className="min-h-8 max-h-full typography-16 font-bold text-gray-600">
+                                {message.replace(/\[([a-zA-Z]*?)\]/g, "")}
+                                <div ref={scrollRef} />
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+
+        </div>
+
+    );
+}

src/components/embeddedWebcam.tsx

@@ -51,6 +51,7 @@ export function EmbeddedWebcam({
         await bot.getVisionResponse(fixedImageData);
         setCameraDisabled(false);
         setImageData("");
+        setWebcamEnabled(false);
       }
     };
 

src/components/messageInput.tsx

@@ -12,6 +12,7 @@ import { openaiWhisper  } from "@/features/openaiWhisper/openaiWhisper";
 import { whispercpp  } from "@/features/whispercpp/whispercpp";
 import { config } from "@/utils/config";
 import { WaveFile } from "wavefile";
+import { AmicaLifeContext } from "@/features/amicaLife/amicaLifeContext";
 
 export default function MessageInput({
   userMessage,
@@ -32,6 +33,7 @@ export default function MessageInput({
   const [whisperCppOutput, setWhisperCppOutput] = useState<any | null>(null);
   const { chat: bot } = useContext(ChatContext);
   const { alert } = useContext(AlertContext);
+  const { amicaLife } = useContext(AmicaLifeContext);
 
   const vad = useMicVAD({
     startOnLoad: false,
@@ -119,25 +121,54 @@ export default function MessageInput({
     const textStartsWithWakeWord = wakeWordEnabled && cleanFromPunctuation(cleanText).startsWith(cleanFromPunctuation(config("wake_word")));
     const text = wakeWordEnabled && textStartsWithWakeWord ? cleanFromWakeWord(cleanText, config("wake_word")) : cleanText;
 
-    if (textStartsWithWakeWord) {
-      bot.updateAwake();
+    if (wakeWordEnabled) {
+      // Text start with wake word
+      if (textStartsWithWakeWord) {
+        // Pause amicaLife and update bot's awake status when speaking
+        if (config("amica_life_enabled") === "true") {
+          amicaLife.pause();
+        }
+        bot.updateAwake();
+      // Case text doesn't start with wake word and not receive trigger message in amica life
+      } else {
+        if (config("amica_life_enabled") === "true" && amicaLife.triggerMessage !== true && !bot.isAwake()) {
+          bot.updateAwake();
+        }
+      }
+    } else {
+      // If wake word off, update bot's awake when speaking
+      if (config("amica_life_enabled") === "true") {
+        amicaLife.pause();
+        bot.updateAwake();
+      }
     }
 
+
     if (text === "") {
       return;
     }
 
 
     if (config("autosend_from_mic") === 'true') {
-        if (!wakeWordEnabled || bot.isAwake()) {
-        bot.receiveMessageFromUser(text);
-      }
+      if (!wakeWordEnabled || bot.isAwake()) {
+        bot.receiveMessageFromUser(text,false);
+      } 
     } else {
       setUserMessage(text);
     }
     console.timeEnd('performance_transcribe');
   }
 
+  function handleInputChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    onChangeUserMessage(event); 
+
+    // Pause amicaLife and update bot's awake status when typing
+    if (config("amica_life_enabled") === "true") {
+      amicaLife.pause();
+      bot.updateAwake();
+    }
+  }
+
   // for whisper_browser
   useEffect(() => {
     if (transcriber.output && ! transcriber.isBusy) {
@@ -163,7 +194,7 @@ export default function MessageInput({
   }, [whisperCppOutput]);
 
   function clickedSendButton() {
-    bot.receiveMessageFromUser(userMessage);
+    bot.receiveMessageFromUser(userMessage,false);
     // only if we are using non-VAD mode should we focus on the input
     if (! vad.listening) {
       inputRef.current?.focus();
@@ -189,7 +220,7 @@ export default function MessageInput({
             type="text"
             ref={inputRef}
             placeholder="Write message here..."
-            onChange={onChangeUserMessage}
+            onChange={handleInputChange}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
                 if (userMessage === "") {

src/components/numberInput.tsx

@@ -20,3 +20,5 @@ export const NumberInput = ({
     />
   );
 };
+
+