@tagit/ai-client-react 1.7.0-beta.53.1 → 1.7.0-beta.56.2

package/src/chat-widget.css

@@ -971,7 +971,8 @@
 
 .tagIt-chat-overlay-header-actions,
 .tagIt-chat-history-row-actions,
-.tagIt-chat-history-rename {
+.tagIt-chat-history-rename,
+.tagIt-chat-history-delete-confirm {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -979,7 +980,8 @@
 
 .tagIt-chat-overlay-header-actions button,
 .tagIt-chat-history-row-actions button,
-.tagIt-chat-history-rename button {
+.tagIt-chat-history-rename button,
+.tagIt-chat-history-delete-confirm button {
   width: 32px;
   height: 32px;
   border-radius: 8px;
@@ -995,11 +997,43 @@
 
 .tagIt-chat-overlay-header-actions button:hover,
 .tagIt-chat-history-row-actions button:hover,
-.tagIt-chat-history-rename button:hover {
+.tagIt-chat-history-rename button:hover,
+.tagIt-chat-history-delete-confirm button:hover {
   color: var(--tagIt-chat-text);
   background: color-mix(in srgb, var(--tagIt-chat-border) 48%, transparent);
 }
 
+.tagIt-chat-history-tabs {
+  padding: 12px 12px 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.tagIt-chat-history-tabs button {
+  min-width: 0;
+  height: 34px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--tagIt-chat-muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.tagIt-chat-history-tabs button:hover {
+  color: var(--tagIt-chat-text);
+  background: color-mix(in srgb, var(--tagIt-chat-border) 34%, transparent);
+}
+
+.tagIt-chat-history-tabs button[aria-selected='true'] {
+  border-color: color-mix(in srgb, var(--tagIt-chat-primary) 44%, var(--tagIt-chat-border));
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 12%, var(--tagIt-chat-surface));
+  color: var(--tagIt-chat-primary);
+}
+
 .tagIt-chat-history-list {
   flex: 1;
   min-height: 0;
@@ -1173,6 +1207,18 @@
   grid-column: 1 / -1;
 }
 
+.tagIt-chat-history-delete-confirm {
+  grid-column: 1 / -1;
+  justify-content: flex-end;
+  color: var(--tagIt-chat-muted);
+  font-size: 12px;
+}
+
+.tagIt-chat-history-delete-confirm .tagIt-chat-history-danger {
+  border-color: color-mix(in srgb, #ef4444 45%, var(--tagIt-chat-border));
+  color: #ef4444;
+}
+
 .tagIt-chat-history-rename input {
   min-width: 0;
   flex: 1;
@@ -1550,11 +1596,249 @@
 .tagIt-chat-input-form {
   padding: 10px 12px;
   padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
-  border-top: 1px solid var(--tagIt-chat-border);
-  background: var(--tagIt-chat-panel-footer-bg);
+  border-top: 0;
+  background: transparent;
   flex-shrink: 0;
 }
 
+.tagIt-chat-resource-file-input {
+  display: none;
+}
+
+.tagIt-chat-resource-chips,
+.tagIt-chat-message-resources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.tagIt-chat-message-resources {
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+
+.tagIt-chat-resource-chip,
+.tagIt-chat-message-resource {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--tagIt-chat-border);
+  border-radius: 7px;
+  background: var(--tagIt-chat-panel-footer-prompt-bg);
+  color: var(--tagIt-chat-text);
+  font-size: 12px;
+}
+
+.tagIt-chat-resource-chip > span,
+.tagIt-chat-message-resource > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tagIt-chat-resource-chip button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--tagIt-chat-muted);
+  cursor: pointer;
+}
+
+.tagIt-chat-resource-picker {
+  margin: 0 0 8px;
+  border: 1px solid var(--tagIt-chat-border);
+  border-radius: 8px;
+  background: var(--tagIt-chat-bg);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--tagIt-chat-text) 14%, transparent);
+  overflow: hidden;
+}
+
+.tagIt-chat-resource-sidecar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 94;
+  width: min(360px, calc(100vw - min(100vw, var(--tagIt-chat-panel-width))));
+  min-width: 280px;
+  background: var(--tagIt-chat-bg);
+  color: var(--tagIt-chat-text);
+  box-shadow: 0 0 28px color-mix(in srgb, var(--tagIt-chat-text) 16%, transparent);
+}
+
+.tagIt-chat-side-right > .tagIt-chat-resource-sidecar {
+  right: min(100vw, var(--tagIt-chat-panel-width));
+  border-left: 1px solid var(--tagIt-chat-border);
+}
+
+.tagIt-chat-side-left > .tagIt-chat-resource-sidecar {
+  left: min(100vw, var(--tagIt-chat-panel-width));
+  border-right: 1px solid var(--tagIt-chat-border);
+}
+
+.tagIt-chat-widget-closed > .tagIt-chat-resource-sidecar {
+  display: none;
+}
+
+.tagIt-chat-resource-sidecar .tagIt-chat-resource-picker {
+  display: flex;
+  height: 100%;
+  margin: 0;
+  flex-direction: column;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.tagIt-chat-resource-sidecar .tagIt-chat-resource-picker-header {
+  min-height: 56px;
+  box-sizing: border-box;
+  background: var(--tagIt-chat-panel-header-bg);
+}
+
+.tagIt-chat-resource-sidecar .tagIt-chat-resource-list {
+  flex: 1;
+  max-height: none;
+}
+
+.tagIt-chat-resource-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--tagIt-chat-border);
+}
+
+.tagIt-chat-resource-picker-header > div:first-child {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tagIt-chat-resource-picker-header strong {
+  font-size: 13px;
+}
+
+.tagIt-chat-resource-picker-header span,
+.tagIt-chat-resource-option small {
+  color: var(--tagIt-chat-muted);
+  font-size: 11px;
+}
+
+.tagIt-chat-resource-picker-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.tagIt-chat-resource-picker-actions button,
+.tagIt-chat-resource-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--tagIt-chat-muted);
+  cursor: pointer;
+}
+
+.tagIt-chat-resource-picker-actions button:hover,
+.tagIt-chat-resource-button:hover,
+.tagIt-chat-resource-button[data-active] {
+  border-color: var(--tagIt-chat-border);
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 9%, transparent);
+  color: var(--tagIt-chat-primary);
+}
+
+.tagIt-chat-resource-button {
+  position: relative;
+}
+
+.tagIt-chat-resource-button > span {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--tagIt-chat-primary);
+  color: var(--tagIt-chat-primary-contrast);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.tagIt-chat-resource-list {
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.tagIt-chat-resource-option {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr) 18px;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--tagIt-chat-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.tagIt-chat-resource-option:hover,
+.tagIt-chat-resource-option[data-selected] {
+  background: color-mix(in srgb, var(--tagIt-chat-primary) 9%, transparent);
+}
+
+.tagIt-chat-resource-option > span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tagIt-chat-resource-option strong,
+.tagIt-chat-resource-option small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tagIt-chat-resource-empty,
+.tagIt-chat-resource-error {
+  padding: 12px;
+  color: var(--tagIt-chat-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.tagIt-chat-resource-error {
+  color: #dc2626;
+  text-align: left;
+}
+
+@media (max-width: 899px) {
+  .tagIt-chat-resource-sidecar {
+    display: none;
+  }
+}
+
 .tagIt-chat-checkpoint-prompt {
   margin: 0 0 10px;
   padding: 10px 12px;
@@ -1613,7 +1897,8 @@
 
 .tagIt-chat-input-actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   padding: 6px 8px;
 }