@tagit/ai-client-react 1.1.0 → 1.2.0-beta.26.1

package/src/chat-widget.css

@@ -265,6 +265,35 @@
   gap: 8px;
 }
 
+.tagIt-chat-agent-identity {
+  max-width: min(62%, 280px);
+  padding: 5px 7px;
+  margin-left: -7px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 120ms ease, box-shadow 120ms ease;
+}
+
+.tagIt-chat-agent-identity:hover {
+  background: color-mix(in srgb, var(--tagIt-chat-border) 42%, transparent);
+}
+
+.tagIt-chat-agent-identity:focus-visible {
+  outline: 0;
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 10%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tagIt-chat-primary) 65%, transparent);
+}
+
+.tagIt-chat-agent-identity h2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tagIt-chat-panel-title-icon {
   width: 22px;
   height: 22px;
@@ -273,6 +302,25 @@
   flex-shrink: 0;
 }
 
+.tagIt-chat-panel-title-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 14%, var(--tagIt-chat-surface));
+  color: var(--tagIt-chat-primary);
+  flex-shrink: 0;
+}
+
+.tagIt-chat-panel-title-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .tagIt-chat-close {
   display: flex;
   align-items: center;
@@ -472,6 +520,12 @@
   overflow: visible;
 }
 
+.tagIt-chat-widget-mobile-fullscreen.tagIt-chat-widget-closed .tagIt-chat-panel {
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(100dvh) !important;
+}
+
 .tagIt-chat-widget-mobile-fullscreen .tagIt-chat-panel {
   position: fixed;
   inset: 0;
@@ -496,10 +550,10 @@
 .tagIt-chat-widget-mobile-fullscreen.tagIt-chat-side-right .tagIt-chat-tab,
 .tagIt-chat-widget-mobile-fullscreen.tagIt-chat-side-left .tagIt-chat-tab {
   position: fixed;
-  right: 12px;
+  right: max(12px, env(safe-area-inset-right, 0px));
   left: auto;
   top: auto;
-  bottom: 18px;
+  bottom: max(18px, env(safe-area-inset-bottom, 0px));
   transform: none;
   border-radius: 999px;
   pointer-events: auto;
@@ -507,7 +561,7 @@
 
 .tagIt-chat-widget-mobile-fullscreen.tagIt-chat-side-right .tagIt-chat-tab-open,
 .tagIt-chat-widget-mobile-fullscreen.tagIt-chat-side-left .tagIt-chat-tab-open {
-  right: 12px;
+  right: max(12px, env(safe-area-inset-right, 0px));
   left: auto;
 }
 
@@ -727,7 +781,7 @@
   }
 }
 
-.tagIt-chat-history-panel {
+.tagIt-chat-overlay-panel {
   position: absolute;
   inset: 0;
   z-index: 20;
@@ -741,7 +795,78 @@
   color: var(--tagIt-chat-text);
 }
 
-.tagIt-chat-history-header {
+.tagIt-chat-transition-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  background: color-mix(in srgb, var(--tagIt-chat-bg) 72%, transparent);
+  backdrop-filter: blur(3px);
+}
+
+.tagIt-chat-transition-dialog {
+  width: min(100%, 360px);
+  padding: 18px;
+  border: 1px solid var(--tagIt-chat-border);
+  border-radius: 12px;
+  background: var(--tagIt-chat-surface);
+  color: var(--tagIt-chat-text);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.26);
+}
+
+.tagIt-chat-transition-dialog h3 {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.3;
+}
+
+.tagIt-chat-transition-dialog p {
+  margin: 10px 0 0;
+  color: var(--tagIt-chat-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.tagIt-chat-transition-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.tagIt-chat-transition-actions button {
+  min-height: 36px;
+  padding: 7px 12px;
+  border: 1px solid var(--tagIt-chat-border);
+  border-radius: 8px;
+  background: var(--tagIt-chat-surface);
+  color: var(--tagIt-chat-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.tagIt-chat-transition-actions button[data-primary] {
+  border-color: var(--tagIt-chat-primary);
+  background: var(--tagIt-chat-primary);
+  color: var(--tagIt-chat-primary-contrast);
+}
+
+.tagIt-chat-transition-actions button:focus-visible {
+  outline: 2px solid var(--tagIt-chat-primary);
+  outline-offset: 2px;
+}
+
+.tagIt-chat-transition-actions button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.tagIt-chat-overlay-header {
   min-height: 68px;
   padding: 12px 14px;
   border-bottom: 1px solid var(--tagIt-chat-border);
@@ -811,13 +936,13 @@
   white-space: nowrap;
 }
 
-.tagIt-chat-history-header h3 {
+.tagIt-chat-overlay-header h3 {
   margin: 2px 0 0;
   font-size: 18px;
   line-height: 1.2;
 }
 
-.tagIt-chat-history-eyebrow {
+.tagIt-chat-overlay-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -828,7 +953,7 @@
   text-transform: uppercase;
 }
 
-.tagIt-chat-history-header-actions,
+.tagIt-chat-overlay-header-actions,
 .tagIt-chat-history-row-actions,
 .tagIt-chat-history-rename {
   display: inline-flex;
@@ -836,7 +961,7 @@
   gap: 6px;
 }
 
-.tagIt-chat-history-header-actions button,
+.tagIt-chat-overlay-header-actions button,
 .tagIt-chat-history-row-actions button,
 .tagIt-chat-history-rename button {
   width: 32px;
@@ -852,7 +977,7 @@
   cursor: pointer;
 }
 
-.tagIt-chat-history-header-actions button:hover,
+.tagIt-chat-overlay-header-actions button:hover,
 .tagIt-chat-history-row-actions button:hover,
 .tagIt-chat-history-rename button:hover {
   color: var(--tagIt-chat-text);
@@ -869,6 +994,109 @@
   gap: 8px;
 }
 
+.tagIt-chat-agent-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tagIt-chat-agent-row {
+  width: 100%;
+  min-height: 64px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--tagIt-chat-border) 84%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--tagIt-chat-surface) 82%, transparent);
+  color: var(--tagIt-chat-text);
+  cursor: pointer;
+  text-align: left;
+}
+
+.tagIt-chat-agent-row:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--tagIt-chat-primary) 38%, var(--tagIt-chat-border));
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 7%, var(--tagIt-chat-surface));
+}
+
+.tagIt-chat-agent-row:focus-visible {
+  outline: 2px solid var(--tagIt-chat-primary);
+  outline-offset: 2px;
+}
+
+.tagIt-chat-agent-row[aria-current='true'] {
+  border-color: color-mix(in srgb, var(--tagIt-chat-primary) 52%, var(--tagIt-chat-border));
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 12%, var(--tagIt-chat-surface));
+  cursor: default;
+  opacity: 1;
+}
+
+.tagIt-chat-agent-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 14%, var(--tagIt-chat-surface));
+  color: var(--tagIt-chat-primary);
+  flex-shrink: 0;
+}
+
+.tagIt-chat-agent-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tagIt-chat-agent-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.tagIt-chat-agent-name {
+  overflow: hidden;
+  color: var(--tagIt-chat-text);
+  font-size: 14px;
+  font-weight: 750;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tagIt-chat-agent-status {
+  color: var(--tagIt-chat-muted);
+  font-size: 12px;
+}
+
+.tagIt-chat-agent-info {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  color: var(--tagIt-chat-muted);
+}
+
+.tagIt-chat-agent-row .tagIt-chat-tooltip {
+  width: max-content;
+  max-width: min(240px, calc(100vw - 48px));
+  white-space: normal;
+}
+
+.tagIt-chat-agent-check {
+  color: var(--tagIt-chat-primary);
+}
+
 .tagIt-chat-history-row {
   border: 1px solid color-mix(in srgb, var(--tagIt-chat-border) 84%, transparent);
   border-radius: 12px;