@paymanai/payman-ask-sdk 4.0.18 → 4.0.20

package/dist/styles.css

@@ -210,12 +210,78 @@
   width: 100%;
   overflow: hidden;
 }
+.payman-v2-split-layout {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0%;
+  min-height: 0;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  overflow: hidden;
+}
+.payman-v2-split-layout--sheet {
+  position: relative;
+}
+.payman-v2-split-layout--sheet .payman-v2-chat-column {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+.payman-v2-pdf-sheet-top-anchor {
+  position: absolute;
+  inset: 0.5rem;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  pointer-events: none;
+  overflow: hidden;
+}
+.payman-v2-pdf-sheet-top-anchor .payman-v2-pdf-sheet-panel {
+  pointer-events: auto;
+  width: 100%;
+  height: 100%;
+  transform-origin: right center;
+}
+.payman-v2-chat-column {
+  flex: 1 1 0%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.75rem;
+}
 .payman-v2-chat-layout {
   display: flex;
   flex-direction: column;
   flex: 1 1 0%;
   min-height: 0;
 }
+.payman-v2-pdf-sheet-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: 0.75rem;
+  border: 1px solid var(--payman-v2-border-1);
+  background: var(--payman-v2-bg);
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+.payman-v2-pdf-sheet-panel.payman-v2-pdf-sheet-panel--sheet {
+  width: 100%;
+  height: 100%;
+  flex: none;
+  min-height: 0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
+  will-change: transform;
+}
+.payman-v2-pdf-sheet-panel--sheet .payman-v2-pdf-sheet-body {
+  flex: 1 1 0%;
+  min-height: 0;
+}
 .payman-v2-empty-state {
   flex: 1 1 0%;
   display: flex;
@@ -318,10 +384,14 @@
 }
 .payman-v2-user-msg-attachments {
   display: flex;
-  gap: 0.375rem;
+  gap: 0.5rem;
   margin-bottom: 0.375rem;
   flex-wrap: wrap;
   justify-content: flex-end;
+  padding-bottom: 0;
+}
+.payman-v2-user-msg-attachments .payman-v2-file-preview-shell-sent {
+  padding-right: 0.5rem;
 }
 .payman-v2-user-msg-attachment-image {
   position: relative;
@@ -1448,10 +1518,8 @@
 }
 .payman-v2-ua {
   max-width: 26rem;
-  padding: 0.875rem;
-  border: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 72%, transparent);
-  border-radius: var(--payman-v2-radius-md);
-  background: color-mix(in srgb, var(--payman-v2-bg-secondary) 42%, transparent);
+  padding: 0.625rem 0 0.625rem 0.875rem;
+  border-left: 2px solid var(--payman-v2-border-1);
 }
 .payman-v2-ua-head {
   display: flex;
@@ -1477,19 +1545,9 @@
 }
 .payman-v2-ua-desc {
   font-size: 0.8125rem;
-  line-height: 1.38;
-  color: var(--payman-v2-text-2);
-  margin: 0.125rem 0 0.875rem;
-}
-.payman-v2-ua-markdown {
-  margin: 0.125rem 0 0.875rem;
+  line-height: 1.45;
   color: var(--payman-v2-text-2);
-  font-size: 0.8125rem;
-  line-height: 1.38;
-}
-.payman-v2-ua-markdown .payman-v2-markdown {
-  font-size: inherit;
-  line-height: inherit;
+  margin: 0 0 0.5rem;
 }
 .payman-v2-ua-stale {
   font-size: 0.75rem;
@@ -1507,18 +1565,17 @@
 .payman-v2-ua-form {
   display: flex;
   flex-direction: column;
-  gap: 0.875rem;
-  margin: 0 0 0.75rem;
+  gap: 0.625rem;
+  margin: 0.25rem 0 0.625rem;
 }
 .payman-v2-ua-row {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 0.25rem;
 }
 .payman-v2-ua-label {
   font-size: 0.75rem;
   font-weight: 500;
-  line-height: 1.35;
   color: var(--payman-v2-text-2);
 }
 .payman-v2-ua-req {
@@ -1528,9 +1585,7 @@
 .payman-v2-ua-hint {
   font-size: 11px;
   color: var(--payman-v2-text-3);
-  line-height: 14px;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  line-height: 1.35;
 }
 .payman-v2-ua-input {
   width: 100%;
@@ -1856,6 +1911,14 @@
   padding: 0.5rem 2.5rem 0.5rem 0.5rem;
   text-align: left;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
+  font: inherit;
+  color: inherit;
+}
+button.payman-v2-file-preview-shell {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
 }
 .payman-v2-file-preview-shell-clickable {
   cursor: pointer;
@@ -1863,7 +1926,7 @@
 }
 .payman-v2-file-preview-shell-clickable:hover {
   border-color: var(--payman-v2-border-2);
-  background: rgba(0, 0, 0, 0.02);
+  background: var(--payman-v2-hover);
 }
 .payman-v2-file-preview-thumb {
   position: relative;
@@ -1883,11 +1946,16 @@
   -o-object-fit: cover;
   object-fit: cover;
 }
+.payman-v2-file-preview-doc-icon {
+  color: var(--payman-v2-text-3);
+  flex-shrink: 0;
+}
 .payman-v2-file-preview-info {
   min-width: 0;
   flex: 1;
 }
 .payman-v2-file-preview-name {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1897,6 +1965,7 @@
   margin: 0;
 }
 .payman-v2-file-preview-type {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1904,6 +1973,25 @@
   color: var(--payman-v2-text-3);
   margin: 0;
 }
+.payman-v2-markdown .payman-v2-file-preview-item[data-payman-file-block] {
+  display: block;
+  width: 100%;
+  max-width: 18rem;
+  margin: 0.625rem 0;
+}
+.payman-v2-markdown .payman-v2-file-preview-item[data-payman-file-block] .payman-v2-file-preview-shell {
+  width: 100%;
+  padding-right: 0.5rem;
+}
+.payman-v2-markdown .payman-v2-file-preview-item[data-payman-file-block] .payman-v2-file-preview-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+}
+.payman-v2-markdown .payman-v2-file-preview-item[data-payman-file-block] .payman-v2-file-preview-type {
+  font-size: 0.75rem;
+  line-height: 1.25;
+}
 .payman-v2-file-preview-remove {
   position: absolute;
   right: 0.5rem;
@@ -1925,6 +2013,18 @@
 .payman-v2-file-preview-remove:hover {
   background: var(--payman-v2-bg-tertiary);
 }
+.payman-v2-file-preview-shell-error {
+  border-color: rgba(239, 68, 68, 0.45);
+}
+.payman-v2-file-preview-uploading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+}
 .payman-v2-md-image {
   margin: 0.75rem 0;
   display: block;
@@ -2437,6 +2537,365 @@
 .payman-v2-feedback-modal-btn-primary:hover:not(:disabled) {
   background: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
 }
+.payman-v2-pdf-block {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: min(100%, 20rem);
+  margin-top: 0.625rem;
+  padding: 0.5rem 0.875rem 0.5rem 0.5rem;
+  border: 1px solid var(--payman-v2-border-1);
+  border-radius: var(--payman-v2-radius-xl);
+  background: var(--payman-v2-bg-secondary);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  vertical-align: middle;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.payman-v2-pdf-block:hover {
+  border-color: var(--payman-v2-border-2);
+  background: var(--payman-v2-bg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+.payman-v2-pdf-block:active {
+  transform: scale(0.995);
+}
+.payman-v2-pdf-block:focus-visible {
+  outline: 2px solid var(--payman-v2-border-2);
+  outline-offset: 2px;
+}
+.payman-v2-pdf-block-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--payman-v2-radius-lg);
+  background: var(--payman-v2-bg);
+  border: 1px solid var(--payman-v2-border-1);
+  color: var(--payman-v2-text-2);
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.payman-v2-pdf-block:hover .payman-v2-pdf-block-thumb {
+  color: var(--payman-v2-text-1);
+  border-color: var(--payman-v2-border-2);
+}
+.payman-v2-pdf-block-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  flex: 1;
+}
+.payman-v2-pdf-block-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--payman-v2-text-1);
+  line-height: 1.35;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.payman-v2-pdf-block-meta {
+  font-size: 0.75rem;
+  color: var(--payman-v2-text-3);
+  line-height: 1.2;
+}
+.payman-v2-pdf-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  background: rgba(0, 0, 0, 0.32);
+}
+.payman-v2-pdf-sheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--payman-v2-bg);
+  display: flex;
+  flex-direction: column;
+  z-index: 9001;
+  border-left: 1px solid var(--payman-v2-border-1);
+  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.09), -1px 0 4px rgba(0, 0, 0, 0.05);
+  min-width: 320px;
+}
+.payman-v2-pdf-sheet-resize-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: ew-resize;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.payman-v2-pdf-sheet-resize-handle:hover .payman-v2-pdf-sheet-resize-grip,
+.payman-v2-pdf-sheet-resize-handle:active .payman-v2-pdf-sheet-resize-grip {
+  opacity: 1;
+}
+.payman-v2-pdf-sheet-resize-grip {
+  width: 2px;
+  height: 32px;
+  border-radius: 2px;
+  background: var(--payman-v2-border-1);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.payman-v2-pdf-sheet-resize-handle--vertical {
+  left: 0;
+  right: 0;
+  top: auto;
+  bottom: 0;
+  width: auto;
+  height: 6px;
+  cursor: ns-resize;
+}
+.payman-v2-pdf-sheet-resize-handle--vertical .payman-v2-pdf-sheet-resize-grip {
+  width: 32px;
+  height: 2px;
+}
+.payman-v2-pdf-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0 0.875rem 0 1rem;
+  height: 48px;
+  background: var(--payman-v2-bg);
+  border-bottom: 1px solid var(--payman-v2-border-1);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 11;
+}
+.payman-v2-pdf-sheet-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  flex: 1;
+}
+.payman-v2-pdf-sheet-file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--payman-v2-text-3);
+  flex-shrink: 0;
+}
+.payman-v2-pdf-sheet-title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--payman-v2-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+}
+.payman-v2-pdf-sheet-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+.payman-v2-pdf-sheet-download-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3125rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--payman-v2-text-2);
+  background: transparent;
+  border: 1px solid var(--payman-v2-border-1);
+  border-radius: var(--payman-v2-radius-full);
+  cursor: pointer;
+  transition: background 0.13s ease, color 0.13s ease;
+  white-space: nowrap;
+  font-family: inherit;
+}
+.payman-v2-pdf-sheet-download-btn:hover {
+  background: var(--payman-v2-hover);
+  color: var(--payman-v2-text-1);
+}
+.payman-v2-pdf-sheet-download-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.payman-v2-pdf-sheet-close-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--payman-v2-radius-full);
+  border: none;
+  background: transparent;
+  color: var(--payman-v2-text-3);
+  cursor: pointer;
+  transition: background 0.13s ease, color 0.13s ease;
+  flex-shrink: 0;
+  font-family: inherit;
+}
+.payman-v2-pdf-sheet-close-btn:hover {
+  background: var(--payman-v2-hover);
+  color: var(--payman-v2-text-1);
+}
+.payman-v2-pdf-sheet-body {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: var(--payman-v2-bg-secondary);
+}
+.payman-v2-pdf-sheet-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  z-index: 1;
+}
+.payman-v2-pdf-sheet-loading-text {
+  font-size: 0.8125rem;
+  color: var(--payman-v2-text-3);
+}
+.payman-v2-pdf-sheet-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+.payman-v2-pdf-sheet-error-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.75rem;
+  width: 2.75rem;
+  border-radius: 9999px;
+  background: var(--payman-v2-error-bg);
+  border: 1px solid var(--payman-v2-error-border);
+  color: var(--payman-v2-error-color);
+}
+.payman-v2-pdf-sheet-error-title {
+  margin: 0.25rem 0 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--payman-v2-text-1);
+}
+.payman-v2-pdf-sheet-error-message {
+  margin: 0;
+  max-width: 18rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--payman-v2-text-3);
+}
+.payman-v2-pdf-sheet-error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.375rem;
+}
+.payman-v2-pdf-sheet-error-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 0.625rem;
+  border: 1px solid var(--payman-v2-border-1);
+  background: var(--payman-v2-bg);
+  padding: 0.4375rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--payman-v2-text-2);
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s,
+    color 0.15s;
+}
+.payman-v2-pdf-sheet-error-btn:hover {
+  border-color: var(--payman-v2-border-2);
+  background: var(--payman-v2-hover);
+  color: var(--payman-v2-text-1);
+}
+.payman-v2-pdf-sheet-error-btn-secondary {
+  background: transparent;
+}
+.payman-v2-pdf-sheet-iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+.payman-v2-file-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(2, 6, 23, 0.88);
+  padding: 1.5rem;
+  isolation: isolate;
+  cursor: pointer;
+}
+.payman-v2-file-preview-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding: 0.5rem;
+  border-radius: var(--payman-v2-radius-full);
+  border: none;
+  background: rgba(0, 0, 0, 0.55);
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: background 0.14s ease;
+}
+.payman-v2-file-preview-close:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+.payman-v2-file-preview-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+}
+.payman-v2-file-preview-img {
+  display: block;
+  max-width: min(92vw, 1100px);
+  max-height: 88vh;
+  border-radius: var(--payman-v2-radius-xl);
+  -o-object-fit: contain;
+  object-fit: contain;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
 /* src/styles.css */
 .payman-chat-root {