@paymanai/payman-ask-sdk 1.2.17 → 1.2.19

package/dist/styles.css

@@ -43,25 +43,31 @@
   --radius-md: calc(var(--payman-radius, 0.625rem) - 2px);
   --radius-lg: var(--payman-radius, 0.625rem);
   --radius-xl: calc(var(--payman-radius, 0.625rem) + 4px);
-  --payman-input-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 50%, transparent );
-  --payman-input-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 60%, transparent );
-  --payman-input-border-focus: var(--payman-border, #e4e4e7);
+  --payman-input-bg: var(--payman-card, #ffffff);
+  --payman-input-border: var(--payman-border, #e4e4e7);
+  --payman-input-border-focus: var(--payman-primary, #18181b);
   --payman-input-text: var(--payman-foreground, #18181b);
-  --payman-input-placeholder: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 60%, transparent );
+  --payman-input-placeholder: var(--payman-muted-foreground, #71717a);
   --payman-input-disabled-opacity: 0.4;
-  --payman-input-btn-send-bg: var(--payman-foreground, #18181b);
-  --payman-input-btn-send-fg: var(--payman-background, #ffffff);
+  --payman-input-shadow: 0 1px 6px -1px rgb(0 0 0 / 0.06), 0 0 0 1px rgb(0 0 0 / 0.03);
+  --payman-input-shadow-focus: 0 2px 12px -2px rgb(0 0 0 / 0.1), 0 0 0 2px color-mix(in srgb, var(--payman-primary, #18181b) 12%, transparent);
+  --payman-input-radius: 22px;
+  --payman-input-btn-send-bg: var(--payman-primary, #18181b);
+  --payman-input-btn-send-fg: var(--payman-primary-foreground, #fafafa);
   --payman-input-btn-send-disabled-bg: var(--payman-muted, #f4f4f5);
   --payman-input-btn-send-disabled-fg: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 40%, transparent );
   --payman-input-btn-voice-fg: var(--payman-muted-foreground, #71717a);
   --payman-input-btn-voice-hover-fg: var(--payman-foreground, #18181b);
   --payman-input-btn-voice-hover-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 80%, transparent );
-  --payman-input-btn-voice-recording-bg: var(--payman-destructive, #ef4444);
-  --payman-input-btn-voice-recording-fg: var( --payman-destructive-foreground, #fafafa );
-  --payman-input-btn-voice-recording-ring: var(--payman-destructive, #ef4444);
-  --payman-input-btn-voice-recording-shadow: color-mix( in srgb, var(--payman-destructive, #ef4444) 30%, transparent );
+  --payman-input-btn-voice-recording-bg: color-mix(in srgb, var(--payman-destructive, #ef4444) 10%, transparent);
+  --payman-input-btn-voice-recording-fg: var(--payman-destructive, #ef4444);
+  --payman-input-btn-voice-recording-ring: color-mix(in srgb, var(--payman-destructive, #ef4444) 30%, transparent);
+  --payman-input-btn-voice-recording-shadow: 0 0 0 4px color-mix(in srgb, var(--payman-destructive, #ef4444) 10%, transparent);
   --payman-input-btn-pause-bg: var(--payman-foreground, #18181b);
   --payman-input-btn-pause-fg: var(--payman-background, #ffffff);
+  --payman-scrollbar-thumb: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 20%, transparent);
+  --payman-scrollbar-thumb-hover: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 35%, transparent);
+  --payman-scrollbar-track: transparent;
   --payman-agent-bubble-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 60%, transparent );
   --payman-agent-bubble-border: var(--payman-border, #e4e4e7);
   --payman-agent-bubble-border-streaming: var(--payman-border, #e4e4e7);
@@ -236,6 +242,13 @@
   --payman-otp-disabled-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 50%, transparent );
   --payman-otp-disabled-opacity: 0.5;
   --payman-otp-hover-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 80%, transparent );
+  --payman-modal-brand-fg: #0a3b44;
+  --payman-modal-hero-fg: #0a3b44;
+}
+.dark .payman-modal-backdrop,
+.payman-modal-backdrop.dark {
+  --payman-modal-brand-fg: #ffffff;
+  --payman-modal-hero-fg: #7dd3c0;
 }
 .payman-modal-backdrop-overlay {
   background: var(--payman-modal-backdrop-bg);
@@ -309,21 +322,21 @@
   opacity: var(--payman-otp-disabled-opacity);
 }
 .payman-scrollbar::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 .payman-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--payman-scrollbar-track, transparent);
 }
 .payman-scrollbar::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 20%, transparent);
+  background: var(--payman-scrollbar-thumb);
   border-radius: 9999px;
 }
 .payman-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 35%, transparent);
+  background: var(--payman-scrollbar-thumb-hover);
 }
 .payman-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 20%, transparent) transparent;
+  scrollbar-color: var(--payman-scrollbar-thumb) var(--payman-scrollbar-track, transparent);
 }
 @keyframes shimmer {
   0% {
@@ -413,22 +426,83 @@
     "Courier New",
     monospace;
 }
+.payman-chat-root {
+  --payman-recording-bg: var(--payman-input-bg);
+  --payman-recording-border: var(--payman-input-border);
+  --payman-recording-dot-bg: var(--payman-destructive, #ef4444);
+  --payman-recording-timer-fg: var(--payman-foreground, #18181b);
+  --payman-recording-cancel-fg: var(--payman-muted-foreground, #71717a);
+  --payman-recording-cancel-hover-fg: var(--payman-foreground, #18181b);
+  --payman-recording-confirm-bg: var(--payman-foreground, #18181b);
+  --payman-recording-confirm-fg: var(--payman-background, #ffffff);
+  --payman-recording-transcript-fg: var(--payman-foreground, #18181b);
+  --payman-recording-transcript-placeholder-fg: var(--payman-input-placeholder);
+  --payman-recording-cursor-bg: var(--payman-primary, #18181b);
+}
+.payman-chat-input-wrapper {
+  flex-shrink: 0;
+  width: 100%;
+}
+.payman-chat-input-container {
+  padding: 8px 16px 16px;
+  width: 100%;
+}
+.payman-chat-input-inner {
+  position: relative;
+  width: 100%;
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
 .payman-chat-input {
+  display: flex;
+  flex-direction: column;
   background: var(--payman-input-bg);
   border: 1px solid var(--payman-input-border);
-  border-radius: 22px;
-  min-height: 52px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  transition: border-color 0.2s, box-shadow 0.2s;
+  border-radius: var(--payman-input-radius, 22px);
+  box-shadow: var(--payman-input-shadow);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
 }
-.payman-chat-input:focus-within {
+.payman-chat-input--focused {
   border-color: var(--payman-input-border-focus);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow: var(--payman-input-shadow-focus);
+}
+.payman-chat-input--recording {
+  background: var(--payman-recording-bg);
+  border-color: var(--payman-recording-border);
 }
 .payman-chat-input-field {
+  width: 100%;
+  min-width: 0;
   background: transparent;
   color: var(--payman-input-text);
-  font-size: 0.875rem;
+  font-size: 0.9rem;
+  line-height: 1.55;
+  padding: 14px 18px 0 18px;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow-y: auto;
+  min-height: 42px;
+  max-height: 160px;
+  font-family: inherit;
+}
+.payman-chat-input-field::-webkit-scrollbar {
+  width: 4px;
+}
+.payman-chat-input-field::-webkit-scrollbar-track {
+  background: var(--payman-scrollbar-track, transparent);
+}
+.payman-chat-input-field::-webkit-scrollbar-thumb {
+  background: var(--payman-scrollbar-thumb);
+  border-radius: 9999px;
+}
+.payman-chat-input-field::-webkit-scrollbar-thumb:hover {
+  background: var(--payman-scrollbar-thumb-hover);
+}
+.payman-chat-input-field {
+  scrollbar-width: thin;
+  scrollbar-color: var(--payman-scrollbar-thumb) var(--payman-scrollbar-track, transparent);
 }
 .payman-chat-input-field::-moz-placeholder {
   color: var(--payman-input-placeholder);
@@ -440,37 +514,306 @@
   opacity: var(--payman-input-disabled-opacity);
   cursor: not-allowed;
 }
+.payman-chat-input-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px 10px;
+}
+.payman-chat-input-actions-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.payman-chat-input-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.payman-chat-input-btn-reset {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: var(--payman-input-btn-send-bg);
+  color: var(--payman-input-btn-send-fg);
+  cursor: pointer;
+  transition:
+    transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.15s ease,
+    background 0.2s ease;
+}
+.payman-chat-input-btn-reset:hover:not(:disabled) {
+  opacity: 0.88;
+  transform: scale(1.05);
+}
+.payman-chat-input-btn-reset:active:not(:disabled) {
+  transform: scale(0.93);
+}
+.payman-chat-input-btn-reset:disabled {
+  background: var(--payman-input-btn-send-disabled-bg);
+  color: var(--payman-input-btn-send-disabled-fg);
+  cursor: default;
+  transform: none;
+}
+.payman-chat-input-btn-reset-tooltip {
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  background: var(--payman-foreground, #18181b);
+  color: var(--payman-background, #ffffff);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  padding: 6px 10px;
+  border-radius: 6px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  z-index: 10;
+}
+.payman-chat-input-btn-reset-tooltip::before {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-right-color: var(--payman-foreground, #18181b);
+}
+.payman-chat-input-btn-reset:hover .payman-chat-input-btn-reset-tooltip {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+}
 .payman-chat-input-btn-send {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
   background: var(--payman-input-btn-send-bg);
   color: var(--payman-input-btn-send-fg);
+  cursor: pointer;
+  transition:
+    transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.15s ease,
+    background 0.2s ease;
 }
 .payman-chat-input-btn-send:hover:not(:disabled) {
-  opacity: 0.9;
+  opacity: 0.88;
+  transform: scale(1.05);
+}
+.payman-chat-input-btn-send:active:not(:disabled) {
+  transform: scale(0.93);
 }
 .payman-chat-input-btn-send:disabled {
   background: var(--payman-input-btn-send-disabled-bg);
   color: var(--payman-input-btn-send-disabled-fg);
-  cursor: not-allowed;
+  cursor: default;
+  transform: none;
 }
 .payman-chat-input-btn-voice {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
   color: var(--payman-input-btn-voice-fg);
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease,
+    transform 0.15s ease;
 }
 .payman-chat-input-btn-voice:hover:not(:disabled) {
   color: var(--payman-input-btn-voice-hover-fg);
   background: var(--payman-input-btn-voice-hover-bg);
+  transform: scale(1.05);
+}
+.payman-chat-input-btn-voice:active:not(:disabled) {
+  transform: scale(0.93);
 }
 .payman-chat-input-btn-voice:disabled {
   opacity: 0.3;
-  cursor: not-allowed;
-}
-.payman-chat-input-btn-voice.recording {
-  background: var(--payman-input-btn-voice-recording-bg);
-  color: var(--payman-input-btn-voice-recording-fg);
-  box-shadow: 0 1px 2px 0 var(--payman-input-btn-voice-recording-shadow);
+  cursor: default;
 }
 .payman-chat-input-btn-pause {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
   background: var(--payman-input-btn-pause-bg);
   color: var(--payman-input-btn-pause-fg);
+  cursor: pointer;
+}
+.payman-recording-transcript-area {
+  padding: 14px 18px 4px;
+  min-height: 42px;
+  max-height: 120px;
+  overflow-y: auto;
+  display: flex;
+  align-items: flex-start;
+}
+.payman-recording-transcript-area::-webkit-scrollbar {
+  width: 4px;
+}
+.payman-recording-transcript-area::-webkit-scrollbar-track {
+  background: var(--payman-scrollbar-track, transparent);
+}
+.payman-recording-transcript-area::-webkit-scrollbar-thumb {
+  background: var(--payman-scrollbar-thumb);
+  border-radius: 9999px;
+}
+.payman-recording-transcript-area {
+  scrollbar-width: thin;
+  scrollbar-color: var(--payman-scrollbar-thumb) var(--payman-scrollbar-track, transparent);
+}
+.payman-recording-transcript-text {
+  font-size: 0.9rem;
+  line-height: 1.55;
+  color: var(--payman-recording-transcript-fg);
+  margin: 0;
+  word-break: break-word;
+}
+.payman-recording-transcript-placeholder {
+  font-size: 0.9rem;
+  line-height: 1.55;
+  color: var(--payman-recording-transcript-placeholder-fg, var(--payman-input-placeholder));
+  margin: 0;
+}
+.payman-recording-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  background: var(--payman-recording-cursor-bg);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  border-radius: 1px;
+}
+.payman-recording-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px 10px;
+  gap: 12px;
+}
+.payman-recording-btn-cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--payman-recording-cancel-fg);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 6px 14px;
+  border-radius: 999px;
+  transition: color 0.15s ease, background 0.15s ease;
+  font-family: inherit;
+}
+.payman-recording-btn-cancel:hover {
+  color: var(--payman-recording-cancel-hover-fg);
+  background: color-mix(in srgb, var(--payman-muted, #f4f4f5) 80%, transparent);
+}
+.payman-recording-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.payman-recording-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--payman-recording-dot-bg);
+  animation: payman-recording-pulse 1.5s ease-in-out infinite;
+}
+@keyframes payman-recording-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+}
+.payman-recording-timer {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--payman-recording-timer-fg);
+  letter-spacing: 0.02em;
+}
+.payman-recording-btn-confirm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: var(--payman-recording-confirm-bg);
+  color: var(--payman-recording-confirm-fg);
+  cursor: pointer;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.payman-recording-btn-confirm:hover {
+  opacity: 0.88;
+  transform: scale(1.05);
+}
+.payman-recording-btn-confirm:active {
+  transform: scale(0.93);
+}
+.payman-empty-centered-layout {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+}
+.payman-empty-centered-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  width: 100%;
+}
+.payman-empty-centered-input {
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .payman-empty-centered-layout {
+    justify-content: flex-end;
+  }
+  .payman-empty-centered-inner {
+    flex: 1;
+    justify-content: flex-end;
+    gap: 24px;
+  }
+  .payman-empty-centered-inner .payman-empty-root {
+    flex: 1;
+    justify-content: center;
+  }
+  .payman-empty-centered-input {
+    flex-shrink: 0;
+    padding-bottom: 8px;
+  }
 }
 .payman-chat-input-disclaimer {
   margin-top: 8px;
@@ -619,20 +962,25 @@
 }
 .payman-empty-root {
   display: flex;
-  flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   min-height: 0;
-  overflow-y: auto;
+  flex: 1;
 }
 .payman-empty-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1.25rem;
-  max-width: 22rem;
+  gap: 1rem;
+  max-width: 26rem;
+}
+.payman-empty-custom-component {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
 }
 .payman-empty-icon-wrap {
   display: flex;
@@ -648,11 +996,17 @@
 .payman-empty-icon {
   color: var(--payman-empty-icon-fg);
 }
+.payman-empty-text-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
 .payman-empty-title {
   color: var(--payman-empty-title-fg);
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.3;
   letter-spacing: -0.02em;
 }
 .payman-empty-subtitle {
@@ -726,6 +1080,69 @@
   outline: 2px solid var(--payman-primary, #18181b);
   outline-offset: -1px;
 }
+.payman-otp-input--error {
+  border-color: var(--payman-destructive, #ef4444) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--payman-destructive, #ef4444) 20%, transparent) !important;
+}
+@keyframes payman-otp-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(-6px);
+  }
+  30% {
+    transform: translateX(5px);
+  }
+  45% {
+    transform: translateX(-4px);
+  }
+  60% {
+    transform: translateX(3px);
+  }
+  75% {
+    transform: translateX(-2px);
+  }
+  90% {
+    transform: translateX(1px);
+  }
+}
+.payman-otp-shake {
+  animation: payman-otp-shake 0.4s ease-out;
+}
+@keyframes payman-otp-complete-pulse {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.03);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.payman-otp-complete-pulse {
+  animation: payman-otp-complete-pulse 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.payman-modal-link-resend:hover:not(:disabled) {
+  color: var(--payman-modal-btn-resend-hover-fg, var(--payman-foreground, #18181b)) !important;
+}
+.payman-modal-link-cancel {
+  color: var(--payman-modal-desc-fg, var(--payman-muted-foreground, #71717a));
+}
+.payman-modal-link-cancel:hover:not(:disabled) {
+  color: var(--payman-modal-btn-resend-hover-fg, var(--payman-foreground, #18181b)) !important;
+}
+.payman-modal-close-btn {
+  color: var(--payman-modal-desc-fg, var(--payman-muted-foreground, #71717a));
+  transition: color 0.15s ease;
+}
+.payman-modal-close-btn:hover:not(:disabled) {
+  color: var(--payman-modal-btn-resend-hover-fg, var(--payman-foreground, #18181b));
+}
+.payman-modal-close-btn:disabled {
+  opacity: var(--payman-modal-btn-disabled-opacity, 0.4);
+}
 @keyframes payman-modal-fadeIn {
   from {
     opacity: 0;