@memori.ai/memori-react 8.45.5 → 8.45.6

package/esm/components/PositionPopover/PositionPopover.css

@@ -0,0 +1,218 @@
+.memori-position-popover__positioner {
+    z-index: 1300;
+}
+
+.memori-position-popover__popup {
+    display: flex;
+    width: min(22rem, calc(100vw - 2rem));
+    max-width: 22rem;
+    flex-direction: column;
+    padding: 0.45rem;
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-secondary-background);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--memori-border-color, rgba(0, 0, 0, 0.08));
+    font-size: var(--memori-text-size-md);
+}
+
+.memori-position-popover__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--memori-spacing-md);
+}
+
+.memori-position-popover__switch-row {
+    min-height: 3rem;
+    padding: 0;
+}
+
+.memori-position-popover__switch-meta {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    padding: 0.5rem;
+    gap: var(--memori-spacing-sm);
+}
+
+.memori-position-popover__switch-icon {
+    flex-shrink: 0;
+    color: var(--memori-neutral, rgba(255, 255, 255, 0.75));
+}
+
+.memori-position-popover__switch-label {
+    display: inline-flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.1rem;
+}
+
+.memori-position-popover__switch-label-title {
+    color: var(--memori-text-color, #fff);
+    font-size: 0.95rem;
+    font-weight: 500;
+    line-height: var(--memori-text-line-normal);
+}
+
+.memori-position-popover__switch-label-subtitle {
+    color: var(--memori-neutral, rgba(255, 255, 255, 0.65));
+    font-size: 0.75rem;
+    line-height: 1.2;
+}
+
+.memori-position-popover__switch {
+    position: relative;
+    width: 2rem;
+    height: 1.15rem;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.28);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.memori-position-popover__switch:focus-visible {
+    outline: 2px solid var(--memori-primary, #3182ce);
+    outline-offset: 2px;
+}
+
+.memori-position-popover__switch--on {
+    background: var(--memori-primary, #8b5cf6);
+}
+
+.memori-position-popover__switch-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(1.15rem - 4px);
+    height: calc(1.15rem - 4px);
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: transform 0.15s ease;
+}
+
+.memori-position-popover__switch--on .memori-position-popover__switch-thumb {
+    transform: translateX(0.85rem);
+}
+
+.memori-position-popover__tag-block {
+    margin-top: var(--memori-spacing-sm);
+    margin-bottom: var(--memori-spacing-sm);
+}
+
+.memori-position-popover__tag {
+    display: flex;
+    max-width: 100%;
+    align-items: center;
+    padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
+    border-radius: 999px;
+    background: var(--memori-main-background);
+    gap: var(--memori-spacing-xs);
+}
+
+.memori-autocomplete__portal,
+.memori-autocomplete__positioner {
+    z-index: 1301;
+}
+
+.memori-position-popover__tag--loading {
+    min-height: 2rem;
+}
+
+.memori-position-popover__tag-text {
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
+    font-size: 0.875rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-position-popover__tag-edit {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    border-radius: var(--memori-radius-control);
+    background: transparent;
+    color: var(--memori-text-color);
+    cursor: pointer;
+}
+
+.memori-position-popover__tag-edit:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.memori-position-popover__tag-edit:focus-visible {
+    outline: 2px solid var(--memori-primary, #3182ce);
+    outline-offset: 2px;
+}
+
+.memori-position-popover__tag-skeleton {
+    height: 0.65rem;
+    flex: 1 1 auto;
+    border-radius: 4px;
+    animation: memori-position-popover-shimmer 1.2s ease-in-out infinite;
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%);
+    background-size: 400% 100%;
+    margin-inline: var(--memori-spacing-xs);
+}
+
+.memori-position-popover__spinner {
+    display: inline-block;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex-shrink: 0;
+    border: 2px solid var(--memori-border-color, #cbd5e0);
+    border-radius: 50%;
+    border-top-color: var(--memori-primary, #3182ce);
+    animation: memori-position-popover-spin 0.7s linear infinite;
+}
+
+.memori-position-popover__autocomplete-wrap {
+    width: 100%;
+    min-width: 0;
+}
+
+.memori-position-popover__error {
+    margin: 0 0 var(--memori-spacing-sm);
+    color: var(--memori-error, #c53030);
+    font-size: 0.875rem;
+    line-height: var(--memori-text-line-normal);
+}
+
+.memori-position-popover__map {
+    margin-top: var(--memori-spacing-sm);
+}
+
+.memori-position-popover__map .memori--venue-widget__map-container {
+    min-height: 140px;
+}
+
+.memori-position-popover__map .memori--venue-widget__map {
+    height: 160px;
+}
+
+@keyframes memori-position-popover-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes memori-position-popover-shimmer {
+    0% {
+        background-position: 100% 0;
+    }
+
+    100% {
+        background-position: 0 0;
+    }
+}
+
+.memori-position-popover__positioner--website-assistant {
+    z-index: calc(var(--memori-z-index-base, 0) + 1300);
+}

package/esm/components/ReasoningBlock/ReasoningBlock.css

@@ -0,0 +1,156 @@
+.memori-reasoning {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 0;
+}
+
+.memori-reasoning__trigger {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 4px 2px 0;
+    border: 0;
+    border-radius: 6px;
+    margin: 0;
+    background: transparent;
+    color: color-mix(in oklch, var(--memori-text-color) 52%, transparent);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    gap: 4px;
+    letter-spacing: -0.01em;
+    line-height: 1.4;
+    transition: color 0.16s ease;
+}
+
+.memori-reasoning__trigger:hover,
+.memori-reasoning__trigger:focus-visible {
+    color: color-mix(in oklch, var(--memori-text-color) 82%, transparent);
+}
+
+.memori-reasoning__trigger:focus-visible {
+    outline: 2px solid var(--memori-primary, currentColor);
+    outline-offset: 2px;
+}
+
+.memori-reasoning__chevron {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    opacity: 0.85;
+    transform: rotate(0deg);
+    transform-origin: 50% 50%;
+    transition: transform 0.2s ease;
+}
+
+.memori-reasoning--open .memori-reasoning__chevron {
+    transform: rotate(90deg);
+}
+
+.memori-reasoning__label {
+    min-width: 0;
+}
+
+.memori-reasoning__label--thinking {
+    animation: memori-reasoning-shimmer 1.8s ease-in-out infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(
+        90deg,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 0%,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 36%,
+        var(--memori-text-color) 50%,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 64%,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 100%
+    );
+    background-size: 220% 100%;
+    color: transparent;
+}
+
+.memori-reasoning__collapsible {
+    display: grid;
+    width: 100%;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+        grid-template-rows 0.22s ease,
+        opacity 0.18s ease;
+}
+
+.memori-reasoning--open .memori-reasoning__collapsible {
+    grid-template-rows: 1fr;
+    opacity: 1;
+}
+
+.memori-reasoning__clip {
+    overflow: hidden;
+    min-height: 0;
+}
+
+.memori-reasoning__panel {
+    display: grid;
+    width: 100%;
+    padding: 4px 0 8px;
+    grid-template-columns: 12px minmax(0, 1fr);
+}
+
+.memori-reasoning__panel::before {
+    width: 1px;
+    border-radius: 1px;
+    margin: 2px 0;
+    background: color-mix(in oklch, var(--memori-text-color) 16%, transparent);
+    content: '';
+    justify-self: center;
+}
+
+.memori-reasoning__body {
+    min-width: 0;
+    color: color-mix(in oklch, var(--memori-text-color) 62%, transparent);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.memori-reasoning--streaming.memori-reasoning--overflow .memori-reasoning__body {
+    overflow: hidden;
+    max-height: 9.5rem;
+    -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
+}
+
+.memori-reasoning--open:not(.memori-reasoning--streaming) .memori-reasoning__body {
+    max-height: min(40vh, 22rem);
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+@keyframes memori-reasoning-shimmer {
+    0% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-reasoning__chevron,
+    .memori-reasoning__collapsible {
+        transition: none;
+    }
+
+    .memori-reasoning__label--thinking {
+        animation: none;
+        background: none;
+        color: color-mix(in oklch, var(--memori-text-color) 58%, transparent);
+        -webkit-text-fill-color: unset;
+    }
+}

package/esm/components/SideDrawer/SideDrawer.css

@@ -0,0 +1,112 @@
+.memori-side-drawer.memori-drawer {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+}
+
+.memori-side-drawer .memori-drawer__header {
+    align-items: flex-start;
+    gap: var(--memori-spacing-md);
+}
+
+.memori-side-drawer .memori-drawer__header > :first-child {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.memori-side-drawer .memori-drawer__title {
+    font-size: var(--memori-text-size-2xl);
+}
+
+.memori-side-drawer .memori-drawer__description {
+    color: color-mix(in oklch, var(--memori-text-color) 64%, transparent);
+}
+
+.memori-side-drawer .memori-drawer__body {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 0;
+    padding-bottom: var(--memori-spacing-lg);
+}
+
+.memori-side-drawer__body {
+    display: flex;
+    overflow: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: var(--memori-spacing-md) var(--memori-spacing-lg);
+    gap: var(--memori-spacing-md);
+    scrollbar-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 55%, transparent) transparent;
+    scrollbar-width: thin;
+}
+
+.memori-side-drawer__body::-webkit-scrollbar {
+    width: 8px;
+}
+
+.memori-side-drawer__body::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.memori-side-drawer__body::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 45%, transparent);
+}
+
+.memori-side-drawer__body::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 60%, transparent);
+}
+
+.memori-side-drawer .memori-drawer__footer {
+    display: block;
+    justify-content: stretch;
+    padding: var(--memori-spacing-md) var(--memori-spacing-lg);
+}
+
+.memori-side-drawer .memori-drawer__footer .memori-drawer-footer {
+    width: 100%;
+    padding: 0;
+    border-top: none;
+    box-shadow: none;
+}
+
+.memori-side-drawer-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--memori-spacing-xl) var(--memori-spacing-md);
+    color: var(--memori-text-color);
+    gap: var(--memori-spacing-sm);
+    text-align: center;
+}
+
+.memori-side-drawer-empty__icon {
+    display: inline-flex;
+    width: 3.25rem;
+    height: 3.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--memori-radius-surface);
+    margin-bottom: var(--memori-spacing-xs);
+    background: var(--memori-main-background);
+    color: color-mix(in oklch, var(--memori-text-color) 55%, transparent);
+}
+
+.memori-side-drawer-empty__title {
+    margin: 0;
+    font-size: var(--memori-text-size-lg);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: var(--memori-text-line-tight);
+}
+
+.memori-side-drawer-empty__text {
+    max-width: 22.5rem;
+    margin: 0;
+    color: color-mix(in oklch, var(--memori-text-color) 64%, transparent);
+    font-size: var(--memori-text-size-sm);
+    line-height: var(--memori-text-line-relaxed);
+}