@paymanai/payman-ask-sdk 2.0.2 → 2.0.4

package/dist/styles.css

@@ -457,6 +457,7 @@
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
+  min-width: 0;
 }
 .payman-v2-assistant-msg-thinking-only {
   font-size: var(--payman-v2-body-font-size);
@@ -478,7 +479,10 @@
   border-radius: var(--payman-v2-radius-xl);
   background: var(--payman-v2-error-bg);
   border: 1px solid var(--payman-v2-error-border);
-  max-width: 24rem;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: min(24rem, 100%);
+  min-width: 0;
 }
 .payman-v2-assistant-msg-error-icon {
   color: rgba(239, 68, 68, 0.7);
@@ -490,6 +494,13 @@
   color: var(--payman-v2-text-1);
   line-height: 1.625;
   margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.payman-v2-assistant-msg-error > div,
+.payman-v2-assistant-msg-partial-error > div {
+  min-width: 0;
+  flex: 1 1 0%;
 }
 .payman-v2-assistant-msg-retry-btn {
   display: inline-flex;
@@ -549,7 +560,10 @@
   border-radius: var(--payman-v2-radius-xl);
   background: var(--payman-v2-error-bg);
   border: 1px solid var(--payman-v2-error-border);
-  max-width: 24rem;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: min(24rem, 100%);
+  min-width: 0;
 }
 .payman-v2-assistant-msg-actions {
   display: flex;
@@ -1919,20 +1933,18 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  border-radius: var(--payman-v2-radius-full);
-  border: 1px solid;
+  border-radius: 9999px;
+  border: none;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   backdrop-filter: blur(12px);
   box-shadow: var(--payman-v2-shadow-input);
 }
 .payman-v2-toast-success {
-  border-color: var(--payman-v2-success-border);
   background: rgba(255, 255, 255, 0.95);
   color: var(--payman-v2-text-1);
 }
 .payman-v2-toast-error {
-  border-color: var(--payman-v2-error-border);
   background: rgba(255, 255, 255, 0.95);
   color: var(--payman-v2-text-1);
 }
@@ -1968,30 +1980,46 @@
 }
 .payman-sidebar-popover {
   border: 1px solid var(--payman-v2-border-1);
-  border-radius: calc(var(--payman-v2-radius-xl) + 2px);
+  border-radius: var(--payman-v2-radius-xl);
   background: color-mix(in srgb, var(--payman-v2-bg) 96%, transparent);
   backdrop-filter: blur(18px);
   box-shadow: 0 20px 40px -28px rgba(15, 23, 42, 0.35);
 }
+.payman-sidebar-topbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 85%, transparent);
+  color: var(--payman-v2-text-2);
+}
 .payman-sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.875rem 0.875rem 0.75rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 85%, transparent);
-  font-size: 0.8125rem;
+  gap: 0.5rem;
+  padding: 0.45rem 0.5rem 0.4rem;
+  border-bottom: none;
+  font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.01em;
-  color: var(--payman-v2-text-2);
+  color: inherit;
+  text-transform: none;
 }
-.payman-sidebar-header button,
+.payman-sidebar-header-title {
+  text-transform: none;
+  letter-spacing: 0.02em;
+  font-size: 0.875rem;
+}
+.payman-sidebar-topbar.has-new-session .payman-sidebar-header {
+  padding-bottom: 0.25rem;
+}
+.payman-sidebar-header-icon-button,
 .payman-sidebar-collapsed-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.9rem;
-  height: 1.9rem;
+  width: 1.45rem;
+  height: 1.45rem;
   border: 1px solid transparent;
   border-radius: var(--payman-v2-radius-full);
   background: transparent;
@@ -2003,16 +2031,69 @@
     color 0.16s ease,
     transform 0.16s ease;
 }
-.payman-sidebar-header button:hover,
+.payman-sidebar-header-icon-button:hover,
 .payman-sidebar-collapsed-button:hover {
   background: var(--payman-v2-hover);
   border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
   color: var(--payman-v2-text-1);
 }
-.payman-sidebar-header button:active,
+.payman-sidebar-header-icon-button:active,
 .payman-sidebar-collapsed-button:active {
   transform: scale(0.96);
 }
+.payman-sidebar-new-session-wrap {
+  display: flex;
+  padding: 0.375rem 0.5rem 0.5rem;
+}
+.payman-sidebar-new-session-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  width: 100%;
+  min-width: 0;
+  height: auto;
+  min-height: 1.75rem;
+  padding: 0 0.55rem;
+  border: 1px solid var(--payman-v2-btn-primary);
+  border-radius: var(--payman-v2-radius-md);
+  background: var(--payman-v2-btn-primary);
+  color: var(--payman-v2-btn-primary-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.7rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
+  transition:
+    background-color 0.16s ease,
+    border-color 0.16s ease,
+    opacity 0.16s ease,
+    transform 0.16s ease;
+}
+.payman-sidebar-new-session-button span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.payman-sidebar-new-session-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
+  border-color: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
+}
+.payman-sidebar-new-session-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.payman-sidebar-new-session-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
 .payman-sidebar-mobile-trigger,
 .payman-sidebar-collapsed {
   position: relative;
@@ -2024,34 +2105,38 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: flex-start;
-  padding: 0.625rem 0.75rem 0.25rem;
+  padding: 0.35rem 0.5rem 0.1rem;
 }
 .payman-sidebar-mobile-trigger-button {
-  width: 2.125rem;
-  height: 2.125rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
   background: color-mix(in srgb, var(--payman-v2-bg) 92%, transparent);
   box-shadow: 0 10px 25px -18px rgba(15, 23, 42, 0.45);
 }
 .payman-sidebar-collapsed {
-  padding: 0.625rem 0 0 0.625rem;
+  padding: 0.5rem 0 0 0.5rem;
+}
+.payman-sidebar-collapsed-mount {
+  overflow: visible;
 }
 .payman-sidebar-list {
-  --payman-sidebar-list-padding-x: 0.625rem;
-  --payman-sidebar-row-padding-x: 0.8125rem;
+  --payman-sidebar-list-padding-x: 0.375rem;
+  --payman-sidebar-row-padding-x: 0.5rem;
   display: flex;
   flex-direction: column;
-  gap: 0.875rem;
-  padding: 0 var(--payman-sidebar-list-padding-x) 0.875rem;
+  gap: 0.35rem;
+  padding: 0.25rem var(--payman-sidebar-list-padding-x) 0.5rem;
+  box-shadow: inset -22px 0 26px -12px color-mix(in srgb, var(--payman-v2-bg) 72%, transparent), inset -10px 0 18px -6px color-mix(in srgb, var(--payman-v2-btn-primary) 14%, transparent);
 }
 .payman-sidebar-group {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.15rem;
 }
 .payman-sidebar-group + .payman-sidebar-group {
   position: relative;
-  padding-top: 0.625rem;
+  padding-top: 0.35rem;
 }
 .payman-sidebar-group + .payman-sidebar-group::before {
   content: "";
@@ -2067,11 +2152,10 @@
   top: 0;
   z-index: 1;
   margin: 0 calc(var(--payman-sidebar-list-padding-x) * -1);
-  padding: 0.6rem calc(var(--payman-sidebar-list-padding-x) + var(--payman-sidebar-row-padding-x)) 0.35rem;
-  font-size: 0.68rem;
+  padding: 0.3rem calc(var(--payman-sidebar-list-padding-x) + var(--payman-sidebar-row-padding-x)) 0.15rem;
+  font-size: 0.6rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  letter-spacing: 0.02em;
   color: var(--payman-v2-text-3);
   background:
     linear-gradient(
@@ -2083,7 +2167,7 @@
 .payman-sidebar-group-items {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.075rem;
 }
 .payman-sidebar-row {
   display: flex;
@@ -2091,9 +2175,9 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
-  padding: 0.75rem var(--payman-sidebar-row-padding-x);
+  padding: 0.35rem var(--payman-sidebar-row-padding-x);
   border: 1px solid transparent;
-  border-radius: calc(var(--payman-v2-radius-lg) + 2px);
+  border-radius: var(--payman-v2-radius-md);
   background: transparent;
   color: inherit;
   cursor: pointer;
@@ -2110,7 +2194,7 @@
 }
 .payman-sidebar-row.is-active {
   background: color-mix(in srgb, var(--payman-v2-bg-secondary) 88%, var(--payman-v2-bg));
-  border-color: color-mix(in srgb, var(--payman-v2-border-1) 96%, transparent);
+  border-color: transparent;
 }
 .payman-sidebar-row-main {
   display: flex;
@@ -2125,7 +2209,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--payman-v2-text-1);
 }
@@ -2153,77 +2237,10 @@
     color 200ms ease,
     transform 200ms ease;
 }
-.payman-sidebar-row-status-live {
-  --payman-sidebar-live-color: var(--payman-v2-btn-primary);
-  justify-content: flex-start;
-  width: 30px;
-  gap: 4px;
-  padding: 0 4px;
-  border-radius: var(--payman-v2-radius-full);
-  border: 1px solid color-mix(in srgb, var(--payman-sidebar-live-color) 18%, transparent);
-  background: color-mix(in srgb, var(--payman-sidebar-live-color) 7%, transparent);
-  color: var(--payman-sidebar-live-color);
-  overflow: hidden;
-  animation: payman-v2-status-live-arrive 180ms ease-out both;
-}
-.payman-sidebar-row-live-dot {
-  flex: 0 0 auto;
-  width: 5px;
-  height: 5px;
-  border-radius: var(--payman-v2-radius-full);
-  background: var(--payman-sidebar-live-color);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--payman-sidebar-live-color) 12%, transparent);
-  animation: payman-v2-status-live-dot 1.4s ease-in-out infinite;
-}
-.payman-sidebar-row-live-track {
-  flex: 1 1 auto;
-  min-width: 0;
-  height: 2px;
-  border-radius: var(--payman-v2-radius-full);
-  background:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      color-mix(in srgb, var(--payman-sidebar-live-color) 35%, transparent) 38%,
-      var(--payman-sidebar-live-color) 50%,
-      color-mix(in srgb, var(--payman-sidebar-live-color) 35%, transparent) 62%,
-      transparent 100%);
-  background-size: 220% 100%;
-  opacity: 0.78;
-  animation: payman-v2-status-live-flow 1.5s linear infinite;
-}
 .payman-sidebar-row-status-done {
   color: var(--payman-v2-text-3);
   animation: payman-v2-status-pop 220ms ease-out both;
 }
-@keyframes payman-v2-status-live-arrive {
-  0% {
-    opacity: 0;
-    transform: translateY(1px) scale(0.94);
-  }
-  100% {
-    opacity: 0.85;
-    transform: translateY(0) scale(1);
-  }
-}
-@keyframes payman-v2-status-live-dot {
-  0%, 100% {
-    opacity: 0.55;
-    transform: scale(0.86);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes payman-v2-status-live-flow {
-  0% {
-    background-position: 140% 0;
-  }
-  100% {
-    background-position: -140% 0;
-  }
-}
 @keyframes payman-v2-status-pop {
   0% {
     opacity: 0;
@@ -2234,13 +2251,6 @@
     transform: scale(1);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .payman-sidebar-row-status-live,
-  .payman-sidebar-row-live-dot,
-  .payman-sidebar-row-live-track {
-    animation: none;
-  }
-}
 .payman-v2-message-list-loading {
   display: flex;
   align-items: center;
@@ -2272,12 +2282,12 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.625rem;
-  padding: 1.25rem 1rem;
+  gap: 0.5rem;
+  padding: 1rem 0.75rem;
   text-align: center;
 }
 .payman-sidebar-loading {
-  min-height: 8rem;
+  min-height: 6.5rem;
 }
 .payman-sidebar-empty,
 .payman-sidebar-error,
@@ -2291,7 +2301,7 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
-  padding: 0.75rem 0.625rem 0.875rem;
+  padding: 0.55rem 0.45rem 0.65rem;
   box-sizing: border-box;
 }
 .payman-sidebar-notice-shell .payman-sidebar-notice {
@@ -2305,39 +2315,39 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: var(--payman-v2-radius-full);
   background: color-mix(in srgb, var(--payman-v2-bg-secondary) 90%, transparent);
   color: var(--payman-v2-text-2);
 }
 .payman-sidebar-empty-title,
 .payman-sidebar-error-title {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--payman-v2-text-1);
 }
 .payman-sidebar-empty-desc,
 .payman-sidebar-error-desc,
 .payman-sidebar-notice {
-  font-size: 0.8125rem;
-  line-height: 1.55;
+  font-size: 0.76rem;
+  line-height: 1.45;
   color: var(--payman-v2-text-2);
 }
 .payman-sidebar-load-more {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.45rem;
+  gap: 0.35rem;
   align-self: center;
-  min-height: 2.25rem;
+  min-height: 2rem;
   margin-top: 0.125rem;
-  padding: 0.55rem 0.95rem;
+  padding: 0.45rem 0.75rem;
   border: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 92%, transparent);
   border-radius: var(--payman-v2-radius-full);
   background: color-mix(in srgb, var(--payman-v2-bg) 94%, transparent);
   color: var(--payman-v2-text-2);
-  font-size: 0.78rem;
+  font-size: 0.74rem;
   font-weight: 500;
   cursor: pointer;
   transition:
@@ -2382,6 +2392,7 @@
   box-shadow: 0 -18px 50px -28px rgba(15, 23, 42, 0.45);
   padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
+.payman-sidebar-sheet .payman-sidebar-topbar,
 .payman-sidebar-sheet .payman-sidebar-header,
 .payman-sidebar-sheet .payman-sidebar-group-label {
   background:
@@ -2392,9 +2403,9 @@
   backdrop-filter: none;
 }
 .payman-sidebar-sheet-grabber {
-  width: 3rem;
-  height: 0.28rem;
-  margin: 0.65rem auto 0;
+  width: 2.5rem;
+  height: 0.24rem;
+  margin: 0.5rem auto 0;
   border-radius: var(--payman-v2-radius-full);
   background: color-mix(in srgb, var(--payman-v2-text-4) 70%, transparent);
 }