@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -12,10 +12,10 @@ exports[`renders StartPanel for board of experts unchanged 1`] = `
         class="memori--board-of-experts"
       >
         <span
-          class="styles-module__root___-ALla"
+          class="memori-tooltip"
         >
           <span
-            class="styles-module__trigger___V2aIF"
+            class="memori-tooltip__trigger"
             id="base-ui-:rm:"
           >
             <button
@@ -194,10 +194,10 @@ exports[`renders StartPanel for board of experts unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:ro:"
                   >
                     <button
@@ -257,11 +257,6 @@ exports[`renders StartPanel for board of experts unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -409,10 +404,10 @@ exports[`renders StartPanel on instruct unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r1q:"
                   >
                     <button
@@ -472,11 +467,6 @@ exports[`renders StartPanel on instruct unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageInstructExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -624,10 +614,10 @@ exports[`renders StartPanel unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r1:"
                   >
                     <button
@@ -687,11 +677,6 @@ exports[`renders StartPanel unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -743,10 +728,10 @@ exports[`renders StartPanel with completion provider down unchanged 1`] = `
           </div>
         </div>
         <span
-          class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+          class="memori-tooltip memori--completion-provider-status--tooltip"
         >
           <span
-            class="styles-module__trigger___V2aIF"
+            class="memori-tooltip__trigger"
             id="base-ui-:r2s:"
           >
             <svg
@@ -834,10 +819,10 @@ exports[`renders StartPanel with completion provider down unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r2u:"
                   >
                     <button
@@ -897,11 +882,6 @@ exports[`renders StartPanel with completion provider down unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -1049,10 +1029,10 @@ exports[`renders StartPanel with completions enabled unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:rf:"
                   >
                     <button
@@ -1112,11 +1092,6 @@ exports[`renders StartPanel with completions enabled unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -1281,10 +1256,10 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
                     </span>
                   </button>
                   <span
-                    class="styles-module__root___-ALla"
+                    class="memori-tooltip"
                   >
                     <span
-                      class="styles-module__trigger___V2aIF"
+                      class="memori-tooltip__trigger"
                       id="base-ui-:r18:"
                     >
                       <button
@@ -1374,10 +1349,10 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r1a:"
                   >
                     <button
@@ -1437,11 +1412,6 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -1593,10 +1563,10 @@ exports[`renders StartPanel with deep thought enabled but without permission fla
                   class="memori--settings-section__actions-right"
                 >
                   <span
-                    class="styles-module__root___-ALla"
+                    class="memori-tooltip"
                   >
                     <span
-                      class="styles-module__trigger___V2aIF"
+                      class="memori-tooltip__trigger"
                       id="base-ui-:r1h:"
                     >
                       <button
@@ -1686,10 +1656,10 @@ exports[`renders StartPanel with deep thought enabled but without permission fla
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r1j:"
                   >
                     <button
@@ -1749,11 +1719,6 @@ exports[`renders StartPanel with deep thought enabled but without permission fla
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -1905,10 +1870,10 @@ exports[`renders StartPanel with deep thought enabled unchanged 1`] = `
                   class="memori--settings-section__actions-right"
                 >
                   <span
-                    class="styles-module__root___-ALla"
+                    class="memori-tooltip"
                   >
                     <span
-                      class="styles-module__trigger___V2aIF"
+                      class="memori-tooltip__trigger"
                       id="base-ui-:rv:"
                     >
                       <button
@@ -1998,10 +1963,10 @@ exports[`renders StartPanel with deep thought enabled unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r11:"
                   >
                     <button
@@ -2061,11 +2026,6 @@ exports[`renders StartPanel with deep thought enabled unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -2213,10 +2173,10 @@ exports[`renders StartPanel with existing sessionunchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r8:"
                   >
                     <button
@@ -2276,11 +2236,6 @@ exports[`renders StartPanel with existing sessionunchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -2428,10 +2383,10 @@ exports[`renders StartPanel with integrationConfig unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r2b:"
                   >
                     <button
@@ -2491,11 +2446,6 @@ exports[`renders StartPanel with integrationConfig unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
-        >
-          write_and_speak.pageTryMeExplanation
-        </p>
       </div>
     </div>
   </div>
@@ -2833,10 +2783,10 @@ exports[`renders StartPanel with multilangual unchanged 1`] = `
                   </p>
                 </div>
                 <span
-                  class="styles-module__root___-ALla"
+                  class="memori-tooltip"
                 >
                   <span
-                    class="styles-module__trigger___V2aIF"
+                    class="memori-tooltip__trigger"
                     id="base-ui-:r2l:"
                   >
                     <button
@@ -2896,11 +2846,262 @@ exports[`renders StartPanel with multilangual unchanged 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="memori--start-description"
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders StartPanel with not enough credits unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    />
+    <div
+      class="memori--start-panel__body"
+    >
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
         >
-          write_and_speak.pageTryMeExplanation
-        </p>
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
+        <div
+          class="memori--title-container__content"
+        >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
+          <div
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
+          >
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
+          </div>
+        </div>
+        <div
+          class="memori--completion-provider-status--loading"
+        >
+          <div
+            class="memori-spin memori-spin--spinning"
+          >
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
+            >
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="memori--description"
+      >
+        <section
+          class="memori--start-panel__mobile-info"
+        >
+          <div
+            class="memori--start-panel__mobile-info-content"
+          >
+            <section
+              class="memori--settings-section"
+            >
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="memori-tooltip"
+                >
+                  <span
+                    class="memori-tooltip__trigger"
+                    id="base-ui-:r35:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
+          </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori-button--disabled memori--start-actions__start"
+            data-disabled=""
+            disabled=""
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
+        </div>
+        <span
+          class="memori-tooltip blocked-memori-badge--tooltip"
+        >
+          <span
+            class="memori-tooltip__trigger"
+            id="base-ui-:r37:"
+          >
+            <div
+              class="blocked-memori-badge--wrapper"
+            >
+              <div
+                class="blocked-memori-badge  margin-left"
+              >
+                <svg
+                  class="lucide lucide-triangle-alert blocked-memori-badge--icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+                  />
+                  <path
+                    d="M12 9v4"
+                  />
+                  <path
+                    d="M12 17h.01"
+                  />
+                </svg>
+              </div>
+              <span
+                class="blocked-memori-badge--title"
+              >
+                memoriBlockedTitle
+              </span>
+            </div>
+          </span>
+        </span>
       </div>
     </div>
   </div>

package/src/components/UploadButton/UploadButton.css

@@ -64,29 +64,11 @@
     display: inline-flex;
 }
 
-/* Main Upload Button */
-.memori--unified-upload-button {
+/* Main Upload Button — chrome from IconButton */
+.memori--unified-upload-button.memori-icon-button {
     position: relative;
-    display: flex;
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #e0e0e0;
-    border-radius: 50%;
-    background-color: #f5f5f5;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.memori--unified-upload-button:hover {
-    background-color: #efefef;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transform: translateY(-1px);
 }
 
-/* Document Button */
 .memori--document-upload-button {
     position: relative;
     display: flex;
@@ -250,7 +232,7 @@
     width: 20px;
     height: 20px;
     flex-shrink: 0;
-    fill: var(--memori-primary, #4dabf7);
+    fill: #fff;
 }
 
 /* Preview Thumbnail */
@@ -453,25 +435,6 @@
     background-color: #fa5252;
 }
 
-/* Document count indicator */
-.memori--document-count {
-    position: absolute;
-    z-index: 5;
-    top: -20px;
-    right: -10px;
-    padding: calc(var(--memori-spacing-xs) / 4) calc(var(--memori-spacing-xs) + 2px);
-    border-radius: var(--memori-radius-box);
-    background-color: #51cf66;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    color: var(--memori-text-color);
-    font-size: 11px;
-    font-weight: bold;
-}
-
-.memori--document-count-full {
-    background-color: #fa5252;
-}
-
 /* Styled upload slots info */
 .memori--upload-slots-info {
     margin-left: var(--memori-spacing-xs);

package/src/components/UploadButton/UploadButton.stories.tsx

@@ -152,7 +152,7 @@ A unified upload button that supports both images and documents with the followi
 ## Limits
 
 - **Images**: Maximum 5 images, 15MB per file, formats: .jpg, .jpeg, .png
-- **Documents**: Maximum 5 documents, 15MB per file, formats: .pdf, .txt, .json, .xlsx, .csv, .md
+- **Documents**: Maximum 5 documents, 25MB per file; PDF, Office, OpenDocument, HTML, structured text, and plain-text formats
 - **Content**: Document content is limited to 300,000 characters per document (truncated if exceeded)
         `,
       },
@@ -299,8 +299,8 @@ const Template: Story<UploadButtonProps> = args => {
                 </kbd>
               </li>
               <li>
-                Upload both images (.jpg, .jpeg, .png) and documents (.pdf,
-                .txt, .json, .xlsx, .csv, .md)
+                Upload images and supported PDF, Office, OpenDocument, HTML, or
+                text documents
               </li>
             </ul>
           </div>