@memori.ai/memori-react 8.11.0 → 8.13.0

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

@@ -12,6 +12,7 @@ exports[`renders Chat unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -89,7 +90,7 @@ exports[`renders Chat 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"
@@ -108,6 +109,43 @@ exports[`renders Chat 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"
@@ -198,7 +236,7 @@ exports[`renders Chat 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"
@@ -217,6 +255,43 @@ exports[`renders Chat 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"
@@ -304,22 +379,21 @@ exports[`renders Chat unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -327,22 +401,18 @@ exports[`renders Chat unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -383,7 +453,7 @@ exports[`renders Chat 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"
@@ -402,6 +472,43 @@ exports[`renders Chat 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"
@@ -493,69 +600,70 @@ exports[`renders Chat unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -572,6 +680,7 @@ exports[`renders Chat with context vars unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -649,7 +758,7 @@ exports[`renders Chat with context vars 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"
@@ -668,6 +777,43 @@ exports[`renders Chat with context vars 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"
@@ -758,7 +904,7 @@ exports[`renders Chat with context vars 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"
@@ -777,6 +923,43 @@ exports[`renders Chat with context vars 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"
@@ -879,22 +1062,21 @@ exports[`renders Chat with context vars unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -902,22 +1084,18 @@ exports[`renders Chat with context vars unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -958,7 +1136,7 @@ exports[`renders Chat with context vars 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"
@@ -977,25 +1155,62 @@ exports[`renders Chat with context vars unchanged 1`] = `
                 </div>
               </div>
             </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"
+            <div
+              class="memori-chat--bubble-addon"
             >
-              <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
-          class="memori-media-widget"
+              <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
+          class="memori-media-widget"
         />
         <div
           class="memori-chat--bubble-container memori-chat-scroll-item"
@@ -1083,69 +1298,70 @@ exports[`renders Chat with context vars unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -1162,6 +1378,7 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -1239,7 +1456,7 @@ exports[`renders Chat with custom user 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"
@@ -1258,6 +1475,43 @@ exports[`renders Chat with custom user 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"
@@ -1340,7 +1594,7 @@ exports[`renders Chat with custom user 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"
@@ -1359,6 +1613,43 @@ exports[`renders Chat with custom user 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"
@@ -1438,22 +1729,21 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -1461,22 +1751,18 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -1517,7 +1803,7 @@ exports[`renders Chat with custom user 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"
@@ -1536,6 +1822,43 @@ exports[`renders Chat with custom user 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"
@@ -1619,69 +1942,70 @@ exports[`renders Chat with custom user avatar as react element unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -1698,6 +2022,7 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -1775,7 +2100,7 @@ exports[`renders Chat with custom user 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"
@@ -1794,42 +2119,79 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
                 </div>
               </div>
             </div>
-          </div>
-          <picture
-            class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
-          >
-            <img
-              alt="User"
-              class="memori-chat--bubble-avatar-img"
-              src="https://picsum.photos/200"
-            />
-          </picture>
-        </div>
-        <div
-          class="memori-media-widget"
-        />
-        <div
-          class="memori-chat--bubble-container memori-chat-scroll-item"
-        >
-          <picture
-            class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
-            title="Memori"
-          >
-            <img
-              alt="Memori"
-              class="memori-chat--bubble-avatar-img"
-              src="https://aisuru.com/images/aisuru/square_logo.png"
-            />
-          </picture>
-          <div
-            class="memori-chat--bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
-          >
             <div
-              class="memori-chat--bubble-content"
-              dir="auto"
+              class="memori-chat--bubble-addon"
             >
-              <p>
-                Mi dispiace, le mie risposte sono limitate. Devi farmi le domande giuste. C'è altro che vuoi sapere?
+              <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"
+          >
+            <img
+              alt="User"
+              class="memori-chat--bubble-avatar-img"
+              src="https://picsum.photos/200"
+            />
+          </picture>
+        </div>
+        <div
+          class="memori-media-widget"
+        />
+        <div
+          class="memori-chat--bubble-container memori-chat-scroll-item"
+        >
+          <picture
+            class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+            title="Memori"
+          >
+            <img
+              alt="Memori"
+              class="memori-chat--bubble-avatar-img"
+              src="https://aisuru.com/images/aisuru/square_logo.png"
+            />
+          </picture>
+          <div
+            class="memori-chat--bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+          >
+            <div
+              class="memori-chat--bubble-content"
+              dir="auto"
+            >
+              <p>
+                Mi dispiace, le mie risposte sono limitate. Devi farmi le domande giuste. C'è altro che vuoi sapere?
               </p>
             </div>
             <div
@@ -1878,7 +2240,7 @@ exports[`renders Chat with custom user 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"
@@ -1897,6 +2259,43 @@ exports[`renders Chat with custom user 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"
@@ -1978,22 +2377,21 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -2001,22 +2399,18 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -2057,7 +2451,7 @@ exports[`renders Chat with custom user 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"
@@ -2076,6 +2470,43 @@ exports[`renders Chat with custom user 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"
@@ -2161,69 +2592,70 @@ exports[`renders Chat with custom user avatar unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -2240,6 +2672,7 @@ exports[`renders Chat with dates unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -2322,7 +2755,7 @@ exports[`renders Chat with dates 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"
@@ -2341,6 +2774,43 @@ exports[`renders Chat with dates 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"
@@ -2441,7 +2911,7 @@ exports[`renders Chat with dates 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"
@@ -2460,6 +2930,43 @@ exports[`renders Chat with dates 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"
@@ -2557,22 +3064,21 @@ exports[`renders Chat with dates unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -2580,22 +3086,18 @@ exports[`renders Chat with dates unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -2636,7 +3138,7 @@ exports[`renders Chat with dates 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"
@@ -2655,6 +3157,43 @@ exports[`renders Chat with dates 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"
@@ -2756,69 +3295,70 @@ exports[`renders Chat with dates unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -2835,6 +3375,7 @@ exports[`renders Chat with hints unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -2912,7 +3453,7 @@ exports[`renders Chat with hints 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"
@@ -2931,6 +3472,43 @@ exports[`renders Chat with hints 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"
@@ -3021,7 +3599,7 @@ exports[`renders Chat with hints 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"
@@ -3040,6 +3618,43 @@ exports[`renders Chat with hints 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"
@@ -3127,22 +3742,21 @@ exports[`renders Chat with hints unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -3150,22 +3764,18 @@ exports[`renders Chat with hints unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -3206,7 +3816,7 @@ exports[`renders Chat with hints 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"
@@ -3225,6 +3835,43 @@ exports[`renders Chat with hints 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"
@@ -3342,69 +3989,70 @@ exports[`renders Chat with hints unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -3421,6 +4069,7 @@ exports[`renders Chat with media unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -3498,7 +4147,7 @@ exports[`renders Chat with media 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"
@@ -3517,6 +4166,43 @@ exports[`renders Chat with media 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"
@@ -3607,7 +4293,7 @@ exports[`renders Chat with media 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"
@@ -3626,8 +4312,45 @@ exports[`renders Chat with media unchanged 1`] = `
                 </div>
               </div>
             </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
@@ -3723,13 +4446,11 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/300/200?random=0"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  title="Image 0"
+                  href="#"
+                  title="Link Memori Srl"
                 >
                   <div
-                    class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -3737,27 +4458,27 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <picture
-                          class="memori-media-item--figure"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <source
-                            srcset="https://picsum.photos/300/200?random=0"
-                            type="image/png"
-                          />
-                          <img
-                            alt="Image 0"
-                            src="https://picsum.photos/300/200?random=0"
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
                           />
-                          <figcaption
-                            class="memori-media-item--figure-caption"
-                          >
-                            Image 0
-                          </figcaption>
-                        </picture>
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
                       >
+                        <h3
+                          class="memori-card--title"
+                        >
+                          Link Memori Srl
+                        </h3>
                         <div
                           class="memori-card--children"
                         />
@@ -3787,13 +4508,11 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/200/300?random=1"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  title="Image 1"
+                  href="#"
+                  title="Link RawMaterial"
                 >
                   <div
-                    class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -3801,27 +4520,27 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <picture
-                          class="memori-media-item--figure"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <source
-                            srcset="https://picsum.photos/200/300?random=1"
-                            type="image/png"
-                          />
-                          <img
-                            alt="Image 1"
-                            src="https://picsum.photos/200/300?random=1"
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
                           />
-                          <figcaption
-                            class="memori-media-item--figure-caption"
-                          >
-                            Image 1
-                          </figcaption>
-                        </picture>
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
                       >
+                        <h3
+                          class="memori-card--title"
+                        >
+                          Link RawMaterial
+                        </h3>
                         <div
                           class="memori-card--children"
                         />
@@ -3851,13 +4570,11 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/300/300?random=2"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  title="Image 2"
+                  href="#"
+                  title="Introducing Plone Remix | Vimeo"
                 >
                   <div
-                    class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -3865,27 +4582,27 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <picture
-                          class="memori-media-item--figure"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <source
-                            srcset="https://picsum.photos/300/300?random=2"
-                            type="image/png"
-                          />
-                          <img
-                            alt="Image 2"
-                            src="https://picsum.photos/300/300?random=2"
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
                           />
-                          <figcaption
-                            class="memori-media-item--figure-caption"
-                          >
-                            Image 2
-                          </figcaption>
-                        </picture>
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
                       >
+                        <h3
+                          class="memori-card--title"
+                        >
+                          Introducing Plone Remix | Vimeo
+                        </h3>
                         <div
                           class="memori-card--children"
                         />
@@ -3910,25 +4627,16 @@ exports[`renders Chat with media unchanged 1`] = `
                   </div>
                 </a>
               </div>
-            </div>
-          </div>
-          <div
-            class="memori-link-items"
-          >
-            <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
-            >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-300 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai/en"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="A sustainable web: is it possible? - Nicola Zambello | YouTube"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -3936,22 +4644,18 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -3959,7 +4663,7 @@ exports[`renders Chat with media unchanged 1`] = `
                         <h3
                           class="memori-card--title"
                         >
-                          Link Memori Srl
+                          A sustainable web: is it possible? - Nicola Zambello | YouTube
                         </h3>
                         <div
                           class="memori-card--children"
@@ -3986,16 +4690,17 @@ exports[`renders Chat with media unchanged 1`] = `
                 </a>
               </div>
               <div
-                class="memori-link-item ease-out duration-500 delay-100 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-400 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://rawmaterial.it/en"
+                  class="memori-media-item--link"
+                  href="https://picsum.photos/300/200?random=0"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="Image 0"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -4003,31 +4708,27 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <picture
+                          class="memori-media-item--figure"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <source
+                            srcset="https://picsum.photos/300/200?random=0"
+                            type="image/png"
+                          />
+                          <img
+                            alt="Image 0"
+                            src="https://picsum.photos/300/200?random=0"
+                          />
+                          <figcaption
+                            class="memori-media-item--figure-caption"
                           >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                            Image 0
+                          </figcaption>
+                        </picture>
                       </div>
                       <div
                         class="memori-card--content"
                       >
-                        <h3
-                          class="memori-card--title"
-                        >
-                          Link RawMaterial
-                        </h3>
                         <div
                           class="memori-card--children"
                         />
@@ -4053,16 +4754,17 @@ exports[`renders Chat with media unchanged 1`] = `
                 </a>
               </div>
               <div
-                class="memori-link-item ease-out duration-500 delay-200 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-500 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://vimeo.com/766468314"
+                  class="memori-media-item--link"
+                  href="https://picsum.photos/200/300?random=1"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="Image 1"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -4070,31 +4772,27 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <picture
+                          class="memori-media-item--figure"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <source
+                            srcset="https://picsum.photos/200/300?random=1"
+                            type="image/png"
+                          />
+                          <img
+                            alt="Image 1"
+                            src="https://picsum.photos/200/300?random=1"
+                          />
+                          <figcaption
+                            class="memori-media-item--figure-caption"
                           >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                            Image 1
+                          </figcaption>
+                        </picture>
                       </div>
                       <div
                         class="memori-card--content"
                       >
-                        <h3
-                          class="memori-card--title"
-                        >
-                          Introducing Plone Remix | Vimeo
-                        </h3>
                         <div
                           class="memori-card--children"
                         />
@@ -4120,16 +4818,17 @@ exports[`renders Chat with media unchanged 1`] = `
                 </a>
               </div>
               <div
-                class="memori-link-item ease-out duration-500 delay-300 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-600 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://www.youtube.com/watch?v=feH26j3rBz8"
+                  class="memori-media-item--link"
+                  href="https://picsum.photos/300/300?random=2"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="Image 2"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -4137,31 +4836,27 @@ exports[`renders Chat with media unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <picture
+                          class="memori-media-item--figure"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <source
+                            srcset="https://picsum.photos/300/300?random=2"
+                            type="image/png"
+                          />
+                          <img
+                            alt="Image 2"
+                            src="https://picsum.photos/300/300?random=2"
+                          />
+                          <figcaption
+                            class="memori-media-item--figure-caption"
                           >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                            Image 2
+                          </figcaption>
+                        </picture>
                       </div>
                       <div
                         class="memori-card--content"
                       >
-                        <h3
-                          class="memori-card--title"
-                        >
-                          A sustainable web: is it possible? - Nicola Zambello | YouTube
-                        </h3>
                         <div
                           class="memori-card--children"
                         />
@@ -4193,7 +4888,7 @@ exports[`renders Chat with media 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"
@@ -4212,6 +4907,43 @@ exports[`renders Chat with media 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"
@@ -4303,69 +5035,70 @@ exports[`renders Chat with media unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -4382,6 +5115,7 @@ exports[`renders Chat with memori typing unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -4459,7 +5193,7 @@ exports[`renders Chat with memori typing 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"
@@ -4478,6 +5212,43 @@ exports[`renders Chat with memori typing 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"
@@ -4568,7 +5339,7 @@ exports[`renders Chat with memori typing 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"
@@ -4587,6 +5358,43 @@ exports[`renders Chat with memori typing 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"
@@ -4674,22 +5482,21 @@ exports[`renders Chat with memori typing unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -4697,22 +5504,18 @@ exports[`renders Chat with memori typing unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -4753,7 +5556,7 @@ exports[`renders Chat with memori typing 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"
@@ -4772,6 +5575,43 @@ exports[`renders Chat with memori typing 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"
@@ -4884,69 +5724,61 @@ exports[`renders Chat with memori typing unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
               >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
-                  />
-                </svg>
-              </span>
-            </button>
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
+              >
+                <div
+                  class="memori-chat-inputs--send-btn--loading"
+                />
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
@@ -4963,6 +5795,7 @@ exports[`renders Chat with user unchanged 1`] = `
     >
       <div
         class="memori-chat--content"
+        style="padding-bottom: 0px;"
       >
         <div
           class="memori-chat--cover"
@@ -5040,7 +5873,7 @@ exports[`renders Chat with user 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"
@@ -5059,6 +5892,43 @@ exports[`renders Chat with user 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"
@@ -5143,7 +6013,7 @@ exports[`renders Chat with user 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"
@@ -5162,6 +6032,43 @@ exports[`renders Chat with user 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"
@@ -5243,22 +6150,21 @@ exports[`renders Chat with user unchanged 1`] = `
           class="memori-media-widget"
         >
           <div
-            class="memori-link-items"
+            class="memori-media-items"
           >
             <div
-              class="memori-link-items--grid memori-chat-scroll-item memori-link-items--agent"
+              class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
             >
               <div
-                class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
+                class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
               >
                 <a
-                  class="memori-link-item--link"
-                  href="https://memori.ai"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  class="memori-media-item--link"
+                  href="#"
+                  title="Link"
                 >
                   <div
-                    class="memori-card memori-link-item--card memori-card--with-cover memori-card--hoverable"
+                    class="memori-card memori-card--with-cover memori-card--hoverable"
                   >
                     <div
                       class="memori-spin"
@@ -5266,22 +6172,18 @@ exports[`renders Chat with user unchanged 1`] = `
                       <div
                         class="memori-card--cover"
                       >
-                        <div
-                          class="memori-link-item--card-cover-icon"
+                        <svg
+                          aria-hidden="true"
+                          class="memori-media-item--icon"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 1024 1024"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="memori-link-item--icon"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 1024 1024"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
+                          />
+                        </svg>
                       </div>
                       <div
                         class="memori-card--content"
@@ -5322,7 +6224,7 @@ exports[`renders Chat with user 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"
@@ -5341,6 +6243,43 @@ exports[`renders Chat with user 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"
@@ -5426,69 +6365,70 @@ exports[`renders Chat with user unchanged 1`] = `
         />
       </div>
     </div>
-    <fieldset
-      class="memori-chat-inputs"
-      id="chat-fieldset"
+    <div
+      class="memori-chat-inputs-wrapper"
     >
-      <div
-        class="memori-chat-textarea"
-        data-testid="chat-textarea"
+      <fieldset
+        class="memori-chat-inputs"
+        id="chat-fieldset"
       >
         <div
-          class="memori-chat-textarea--inner"
+          class="memori-chat-inputs--container"
         >
-          <textarea
-            class="memori-chat-textarea--input"
-            maxlength="100000"
+          <div
+            class="memori-chat-inputs--leading"
           />
           <div
-            class="memori-chat-textarea--expand"
+            class="memori-chat-inputs--primary"
           >
-            <button
-              class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-              title="expand"
+            <div
+              class="memori-chat-textarea"
+              data-testid="chat-textarea"
             >
-              <span
-                class="memori-button--icon"
+              <div
+                class="memori-chat-textarea--inner"
+                style="height: 36px;"
+              >
+                <textarea
+                  class="memori-chat-textarea--input"
+                  maxlength="100000"
+                  placeholder="placeholder"
+                  style="height: 36px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="memori-chat-inputs--trailing"
+          >
+            <div
+              class="memori-chat-inputs--trailing-inner"
+            >
+              <button
+                aria-label="send"
+                class="memori-chat-inputs--send-btn memori-chat-inputs--send-btn--disabled"
+                disabled=""
+                title="send"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
+                  class="icon"
                   focusable="false"
                   role="img"
                   viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
+                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                   />
                 </svg>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--send"
-        disabled=""
-        title="send"
-      >
-        <span
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-            />
-          </svg>
-        </span>
-      </button>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;