@memori.ai/memori-react 8.10.1 → 8.12.0

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

@@ -6,7 +6,7 @@ exports[`renders ChatBubble from user with avatar as react element unchanged 1`]
     class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
-      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+      class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
     >
       <div
         class="memori-expandable memori-chat--bubble-content"
@@ -25,6 +25,43 @@ exports[`renders ChatBubble from user with avatar as react element unchanged 1`]
           </div>
         </div>
       </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
@@ -43,7 +80,7 @@ exports[`renders ChatBubble from user with avatar unchanged 1`] = `
     class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
-      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+      class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
     >
       <div
         class="memori-expandable memori-chat--bubble-content"
@@ -62,6 +99,43 @@ exports[`renders ChatBubble from user with avatar unchanged 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
@@ -82,7 +156,7 @@ exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
     class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
-      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+      class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
     >
       <div
         class="memori-expandable memori-chat--bubble-content"
@@ -101,6 +175,43 @@ exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
@@ -6756,7 +6867,7 @@ exports[`renders ChatBubble with debug button unchanged 1`] = `
           </span>
         </button>
         <div
-          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -7662,8 +7773,41 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
       <div
         class="memori-chat--bubble-addon"
       >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
         <div
-          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -7756,8 +7900,41 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
       <div
         class="memori-chat--bubble-addon"
       >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
         <div
-          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -8392,7 +8569,7 @@ exports[`renders ChatBubble with translation and original unchanged 1`] = `
           </span>
         </button>
         <div
-          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -8432,7 +8609,7 @@ exports[`renders ChatBubble with user msg unchanged 1`] = `
     class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
-      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+      class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
     >
       <div
         class="memori-expandable memori-chat--bubble-content"
@@ -8451,6 +8628,125 @@ exports[`renders ChatBubble with user msg unchanged 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`shows copy button for user messages 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
+  >
+    <div
+      class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+    >
+      <div
+        class="memori-expandable memori-chat--bubble-content"
+      >
+        <div
+          class="memori-expandable--inner"
+          style="max-height: 9999px;"
+        >
+          <div
+            class="memori-chat--bubble-content"
+            dir="auto"
+          >
+            <p>
+              Mostra i pulsanti copia sul messaggio utente.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon memori-chat--bubble-action-icon--from-user"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"

package/src/components/ChatHistoryDrawer/ChatHistory.css

@@ -1,3 +1,7 @@
+.memori-drawer.memori-chat-history-drawer {
+    z-index: 10000;
+}
+
 .memori-chat-history-drawer--card {
     max-height: 60vh;
     border: 1px solid var(--memori-border);
@@ -411,4 +415,4 @@
     color: var(--memori-primary);
     font-size: 0.875rem;
     font-weight: 500;
-}
+}

package/src/components/ChatInputs/ChatInputs.tsx

@@ -31,6 +31,7 @@ export interface Props {
   microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   authToken?: string;
   showUpload?: boolean;
+  isTyping?: boolean;
   sessionID?: string;
   memoriID?: string;
   client?: ReturnType<typeof memoriApiClient>;
@@ -52,6 +53,7 @@ const ChatInputs: React.FC<Props> = ({
   startListening,
   stopListening,
   showUpload = false,
+  isTyping = false,
   sessionID,
   authToken,
   memoriID,
@@ -95,6 +97,8 @@ const ChatInputs: React.FC<Props> = ({
       url?: string;
     }[]
   ) => {
+    if (isTyping) return;
+    
     const mediaWithIds = files.map((file, index) => {
       const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
       return {
@@ -119,7 +123,15 @@ const ChatInputs: React.FC<Props> = ({
   /**
    * Handles enter key press in textarea
    */
-  const onTextareaPressEnter = () => {
+  const onTextareaPressEnter = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    // Prevent default newline on Enter to keep behavior consistent
+    e.preventDefault();
+
+    // While the agent is typing, ignore Enter (no send, no newline)
+    if (isTyping) return;
+
     if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
       stopListening();
       const mediaWithIds = documentPreviewFiles.map((file, index) => {
@@ -217,6 +229,7 @@ const ChatInputs: React.FC<Props> = ({
       <Button
         shape="circle"
         primary={!!userMessage?.length}
+        loading={isTyping}
         disabled={!userMessage || userMessage.length === 0}
         className="memori-chat-inputs--send"
         onClick={() => {