@adatechnology/conversations-ui 0.9.0 → 0.11.0

package/src/styles.css

@@ -1275,6 +1275,7 @@
 .cv-p-thread__messages { display: flex; flex-direction: column; gap: 0.5rem; }
 .cv-p-thread__live { padding: 0 1rem; font-size: 0.75rem; color: var(--cv-p-i-accent); background: var(--cv-p-i-surface-raised); }
 .cv-p-thread__live:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.cv-p-thread__lock { padding: 1rem; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-thread__closed { margin: 0; padding: 1rem; text-align: center; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-day { align-self: center; margin: 0.5rem 0; padding: 0.25rem 0.75rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); font: 0.65rem 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-p-i-text-muted); }
 
@@ -1325,7 +1326,25 @@
 .cv-p-attachment--document { flex-direction: row; justify-content: space-between; min-height: var(--cv-p-i-touch); align-items: center; text-decoration: underline; }
 .cv-p-attachment__image { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
 .cv-p-attachment__audio { width: 100%; min-height: var(--cv-p-i-touch); }
+.cv-p-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; width: 100%; min-width: min(15rem, 100%); box-sizing: border-box; }
+.cv-p-audio__toggle, .cv-p-audio__rate { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: var(--cv-p-i-touch); min-height: var(--cv-p-i-touch); padding: 0; background: transparent; border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); color: inherit; font: inherit; font-size: 0.75rem; cursor: pointer; }
+.cv-p-audio__toggle:disabled { opacity: 0.45; cursor: not-allowed; }
+.cv-p-audio__toggle svg { display: block; }
+.cv-p-audio__seek { flex: 1 1 5rem; min-width: 5rem; min-height: var(--cv-p-i-touch); margin: 0; accent-color: var(--cv-p-i-accent); cursor: pointer; }
+.cv-p-audio__time { flex: 0 0 auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--cv-p-i-text-muted); }
+.cv-p-audio__media { display: none; }
+.cv-p-audio__error { flex: 1 0 100%; font-size: 0.75rem; }
+.cv-p-recorder .cv-p-audio { flex: 1 1 8rem; width: auto; min-width: 0; }
 .cv-p-attachment__name, .cv-p-attachment__size { font-size: 0.75rem; overflow-wrap: anywhere; }
+.cv-p-transcription { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--cv-p-i-text); }
+.cv-p-transcription--pending, .cv-p-transcription--too-long { font-size: 0.75rem; color: var(--cv-p-i-text-muted); }
+.cv-p-transcription__text, .cv-p-transcription__empty, .cv-p-transcription__notice { margin: 0; overflow-wrap: anywhere; }
+.cv-p-transcription__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; -webkit-user-select: text; user-select: text; }
+.cv-p-transcription__text[data-expanded='true'] { display: block; overflow: visible; }
+.cv-p-transcription__empty { color: var(--cv-p-i-text-muted); }
+.cv-p-transcription__notice { order: 1; font-size: 0.7rem; color: var(--cv-p-i-text-muted); }
+.cv-p-transcription__toggle { order: 2; align-self: flex-start; min-width: var(--cv-p-i-touch); min-height: var(--cv-p-i-touch); padding: 0 0.5rem; background: transparent; border: 0; border-radius: var(--cv-p-i-radius); color: var(--cv-p-i-accent); font: inherit; font-size: 0.75rem; text-decoration: underline; cursor: pointer; }
+.cv-p-transcription__toggle:focus-visible { outline: 2px solid var(--cv-p-i-accent); outline-offset: 2px; }
 
 .cv-p-composer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.75rem 0.75rem; background: var(--cv-p-i-surface-raised); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-composer__row { display: flex; align-items: flex-end; gap: 0.25rem; }
@@ -1335,6 +1354,16 @@
 .cv-p-composer__input { flex: 1 1 auto; min-width: 0; min-height: var(--cv-p-i-touch); max-height: 6.5rem; overflow-y: auto; resize: none; padding: 0.7rem 0.75rem; font: inherit; font-size: 0.9rem; color: inherit; background: var(--cv-p-i-surface); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); }
 .cv-p-composer__send { flex: 0 0 auto; padding: 0; margin-inline-start: 0.25rem; }
 .cv-p-composer__error { margin: 0; font-size: 0.8rem; color: var(--cv-p-i-danger); }
+.cv-p-composer__record { flex: 0 0 auto; padding: 0; margin-inline-start: 0.25rem; }
+.cv-p-composer__record svg, .cv-p-recorder svg { display: block; }
+.cv-p-recorder { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
+.cv-p-recorder__hint { flex: 1 1 100%; margin: 0; font-size: 0.8rem; color: var(--cv-p-i-text-muted); }
+.cv-p-recorder__discard { flex: 0 0 auto; padding: 0; color: var(--cv-p-i-text-muted); }
+.cv-p-recorder__dot { flex: 0 0 auto; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--cv-p-i-danger); animation: cv-p-recorder-pulse 1.2s ease-in-out infinite; }
+.cv-p-recorder__elapsed { flex: 1 1 auto; font: 0.85rem 'SFMono-Regular', Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--cv-p-i-text); }
+.cv-p-recorder__stop, .cv-p-recorder__send { flex: 0 0 auto; padding: 0; }
+@keyframes cv-p-recorder-pulse { 50% { opacity: 0.3; } }
+@media (prefers-reduced-motion: reduce) { .cv-p-recorder__dot { animation: none; } }
 .cv-p-quick { --cv-p-i-fade: 0.75rem; display: flex; gap: 0.5rem; overflow-x: auto; margin: -0.25rem calc(-1 * var(--cv-p-i-fade)); padding-block: 0.25rem; }
 .cv-p-files { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
 .cv-p-files__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
@@ -1428,6 +1457,7 @@
   .cv-p-thread__scroll, .cv-p-inbox, .cv-p-composer__input { scrollbar-width: auto; scrollbar-color: auto; }
   .cv-p-filters, .cv-p-quick { mask-image: none; -webkit-mask-image: none; }
   .cv-p-thread__latest-badge { border: 1px solid ButtonText; }
+  .cv-p-transcription__toggle { color: LinkText; border: 1px solid ButtonText; }
   .cv-p-bubble .cv-status-ticks, .cv-p-copyable__done { color: CanvasText; }
   .cv-p-failed-menu__list { border-color: CanvasText; }
   .cv-p-failed-menu__item:focus-visible, .cv-p-failed-menu__item:hover { outline: 2px solid Highlight; }