@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/Chat/__snapshots__/Chat.test.tsx.snap

@@ -23,12 +23,12 @@ exports[`renders Chat on X2a state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -78,12 +78,12 @@ exports[`renders Chat on X2a state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -133,12 +133,12 @@ exports[`renders Chat on X2a state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -279,12 +279,12 @@ exports[`renders Chat on X2a state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -430,12 +430,12 @@ exports[`renders Chat on X3 state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -485,12 +485,12 @@ exports[`renders Chat on X3 state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -540,12 +540,12 @@ exports[`renders Chat on X3 state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -686,12 +686,12 @@ exports[`renders Chat on X3 state unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -870,12 +870,12 @@ exports[`renders Chat unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -925,12 +925,12 @@ exports[`renders Chat unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -980,12 +980,12 @@ exports[`renders Chat unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1111,12 +1111,12 @@ exports[`renders Chat unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1246,12 +1246,12 @@ exports[`renders Chat with context vars unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1301,12 +1301,12 @@ exports[`renders Chat with context vars unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1356,12 +1356,12 @@ exports[`renders Chat with context vars unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1502,12 +1502,12 @@ exports[`renders Chat with context vars unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1652,12 +1652,12 @@ exports[`renders Chat with dates unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1717,12 +1717,12 @@ exports[`renders Chat with dates unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1782,12 +1782,12 @@ exports[`renders Chat with dates unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -1923,12 +1923,12 @@ exports[`renders Chat with dates unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2063,12 +2063,12 @@ exports[`renders Chat with hints unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2118,12 +2118,12 @@ exports[`renders Chat with hints unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2173,12 +2173,12 @@ exports[`renders Chat with hints unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2304,12 +2304,12 @@ exports[`renders Chat with hints unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2465,12 +2465,12 @@ exports[`renders Chat with media unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2520,12 +2520,12 @@ exports[`renders Chat with media unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2575,12 +2575,12 @@ exports[`renders Chat with media unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -2605,7 +2605,7 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/300/200?random=0"
+                  href="https://picsum.photos/300/200?random=0/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
                   rel="noopener noreferrer"
                   target="_blank"
                   title="Image 0"
@@ -2669,7 +2669,7 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/200/300?random=1"
+                  href="https://picsum.photos/200/300?random=1/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
                   rel="noopener noreferrer"
                   target="_blank"
                   title="Image 1"
@@ -2733,7 +2733,7 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/300/300?random=2"
+                  href="https://picsum.photos/300/300?random=2/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
                   rel="noopener noreferrer"
                   target="_blank"
                   title="Image 2"
@@ -3107,12 +3107,12 @@ exports[`renders Chat with media unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -3242,12 +3242,12 @@ exports[`renders Chat with memori typing unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -3297,12 +3297,12 @@ exports[`renders Chat with memori typing unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -3352,12 +3352,12 @@ exports[`renders Chat with memori typing unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div
@@ -3483,12 +3483,12 @@ exports[`renders Chat with memori typing unchanged 1`] = `
             class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
           >
             <source
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
             <img
               alt="Memori"
               class="memori-chat--bubble-avatar-img"
-              src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+              src="https://app.twincreator.com/images/twincreator/square_logo.png"
             />
           </picture>
           <div

package/src/components/ChatBubble/ChatBubble.css

@@ -47,7 +47,7 @@
     height: 8px;
     border-radius: 50%;
     margin-right: 3px;
-    animation: 'wave' 1.5s linear infinite;
+    animation: wave 1.5s linear infinite;
     background: var(--memori-primary);
 }
 
@@ -215,7 +215,6 @@
 }
 
 @keyframes wave {
-
     0%,
     60%,
     100% {

package/src/components/ChatBubble/__snapshots__/ChatBubble.test.tsx.snap

@@ -9,12 +9,12 @@ exports[`renders ChatBubble unchanged 1`] = `
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
     >
       <source
-        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
       />
       <img
         alt="Memori"
         class="memori-chat--bubble-avatar-img"
-        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
       />
     </picture>
     <div
@@ -40,12 +40,12 @@ exports[`renders ChatBubble with initial msg unchanged 1`] = `
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
     >
       <source
-        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
       />
       <img
         alt="Memori"
         class="memori-chat--bubble-avatar-img"
-        src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
       />
     </picture>
     <div

package/src/components/ChatInputs/ChatInputs.css

@@ -17,7 +17,7 @@
 
 .memori-chat-inputs .memori--conversation-button {
     background: #fff;
-    color: var(--memori-text-color, #000);
+    color: #000;
 }
 
 .memori-chat-inputs--mic {
@@ -26,6 +26,7 @@
 }
 
 .memori-chat-inputs--mic svg {
+    color: var(--memori-primary-text, #fff);
     font-size: 1em;
 }
 
@@ -33,18 +34,28 @@
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
     border-color: var(--memori-primary) !important;
+    color: var(--memori-primary-text, #fff);
 }
 
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
     box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
+}
+
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
     color: var(--memori-primary) !important;
 }
 
 .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-    color: red;
+    color: red !important;
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active,
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
+    border-color: red !important;
 }
 
 .memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
-    color: red;
+    color: red !important;
 }

package/src/components/ChatInputs/ChatInputs.tsx

@@ -88,6 +88,7 @@ const ChatInputs: React.FC<Props> = ({
         className="memori-chat-inputs--send"
         onClick={() => {
           sendMessage(userMessage);
+          stopAudio();
           speechSynthesis.speak(new SpeechSynthesisUtterance(''));
         }}
         title={t('send') || 'Send'}
@@ -95,6 +96,7 @@ const ChatInputs: React.FC<Props> = ({
       />
       {showMicrophone && (
         <Button
+          primary
           className={cx('memori-chat-inputs--mic', {
             'memori-chat-inputs--mic--listening': listening,
           })}