@sunboard/react 1.0.0 → 2.0.0

package/dist/styles.css

@@ -17,6 +17,7 @@
   --sb-r3: max(calc(var(--sb-card-radius) - 6px), 2px);
   --sb-ring: color-mix(in srgb, var(--sb-accent) 20%, transparent);
   --sb-tint: color-mix(in srgb, var(--sb-accent) 10%, transparent);
+  --sb-unread: #e5484d;
 
   color: var(--sb-text);
   font-family: var(--sb-font);
@@ -560,74 +561,6 @@
   color: var(--sb-accent);
 }
 
-.sb-root .sb-sources {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--sb-border);
-  border-radius: var(--sb-r2);
-  overflow: hidden;
-}
-.sb-root .sb-doc,
-.sb-root .sb-sources-toggle {
-  width: 100%;
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 12px;
-  font-size: calc(var(--sb-size-base) - 1px);
-}
-.sb-root .sb-doc {
-  color: var(--sb-text);
-  text-decoration: none;
-}
-.sb-root .sb-doc + .sb-doc,
-.sb-root .sb-sources-toggle + .sb-doc {
-  border-top: 1px solid var(--sb-border);
-}
-.sb-root a.sb-doc:hover,
-.sb-root .sb-sources-toggle:hover {
-  background: var(--sb-surface-hover);
-}
-.sb-root .sb-doc > svg {
-  flex-shrink: 0;
-  width: 15px;
-  height: 15px;
-  color: var(--sb-text-muted);
-}
-.sb-root .sb-doc-text + svg {
-  width: 14px;
-  height: 14px;
-}
-.sb-root .sb-doc-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sb-root .sb-doc-trail {
-  color: var(--sb-text-muted);
-}
-.sb-root .sb-sources-toggle {
-  border: 0;
-  background: transparent;
-  color: var(--sb-text-muted);
-  text-align: left;
-  cursor: pointer;
-}
-.sb-root .sb-sources-toggle span {
-  flex: 1;
-}
-.sb-root .sb-sources-toggle svg {
-  flex-shrink: 0;
-  width: 15px;
-  height: 15px;
-}
-.sb-root .sb-sources-toggle[aria-expanded="true"] svg:last-child {
-  transform: rotate(180deg);
-}
-
 .sb-root .sb-support {
   display: flex;
   align-items: center;
@@ -967,6 +900,256 @@
   color: var(--sb-text);
 }
 
+/* ---------- talk to a person ---------- */
+.sb-root .sb-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--sb-unread);
+}
+.sb-root .sb-launcher-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--sb-surface);
+}
+
+.sb-root .sb-head-back {
+  padding-left: 6px;
+}
+
+.sb-root .sb-talk {
+  align-self: flex-start;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--sb-text-muted);
+  cursor: pointer;
+  font-size: calc(var(--sb-size-base) - 0.5px);
+  font-weight: var(--sb-weight-medium);
+}
+.sb-root .sb-talk:hover {
+  color: var(--sb-text);
+}
+.sb-root .sb-talk svg,
+.sb-root .sb-talk-button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.sb-root .sb-convbar {
+  flex-shrink: 0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 12px;
+  padding: 0 8px 0 12px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-r2);
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  cursor: pointer;
+  text-align: left;
+  font-size: calc(var(--sb-size-base) - 0.5px);
+}
+.sb-root .sb-convbar:hover,
+.sb-root .sb-conv:hover {
+  background: var(--sb-surface-hover);
+}
+.sb-root .sb-convbar-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sb-root .sb-convbar-status {
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-convbar > svg,
+.sb-root .sb-conv > svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--sb-text-muted);
+}
+
+.sb-root .sb-conv {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 10px 12px 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-r2);
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  cursor: pointer;
+  text-align: left;
+}
+.sb-root .sb-conv .sb-dot {
+  align-self: flex-start;
+  margin-top: 7px;
+}
+.sb-root .sb-conv-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sb-root .sb-conv-title {
+  font-size: calc(var(--sb-size-base) + 0.5px);
+  font-weight: var(--sb-weight-medium);
+}
+.sb-root .sb-conv-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: calc(var(--sb-size-base) - 0.5px);
+  color: var(--sb-text-muted);
+}
+
+.sb-root .sb-thread-list.sb-conversation {
+  gap: 16px;
+}
+/* The conversation sits on the composer, as a chat does, where the assistant's thread starts at the top. */
+.sb-root .sb-anchored > .sb-thread-list.sb-conversation {
+  margin-bottom: 0;
+}
+.sb-root .sb-dim {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-dim .sb-asked p {
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-sent {
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+.sb-root .sb-reply-time {
+  font-size: calc(var(--sb-size-base) - 1.5px);
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-team {
+  align-self: flex-start;
+  max-width: 88%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sb-root .sb-team-who {
+  font-size: calc(var(--sb-size-base) - 1.5px);
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-team-text {
+  padding: 10px 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-card-radius) var(--sb-card-radius) var(--sb-card-radius) var(--sb-r3);
+  background: var(--sb-surface);
+  font-size: calc(var(--sb-size-base) + 0.5px);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.sb-root .sb-fold {
+  width: 100%;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-r2);
+  background: var(--sb-surface);
+  color: var(--sb-text-muted);
+  cursor: pointer;
+  text-align: left;
+  font-size: calc(var(--sb-size-base) - 0.5px);
+}
+.sb-root .sb-fold svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  transition: transform 150ms ease-out;
+}
+.sb-root .sb-fold-open svg {
+  transform: rotate(90deg);
+}
+.sb-root .sb-fold-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sb-root .sb-fold-open .sb-fold-text {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.sb-root .sb-closed {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.sb-root .sb-reopen {
+  text-align: center;
+  font-size: calc(var(--sb-size-base) - 1.5px);
+  color: var(--sb-text-muted);
+}
+
+.sb-root .sb-past-list {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 18px 16px;
+}
+.sb-root .sb-past {
+  min-height: 44px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0 -10px;
+  padding: 12px 10px;
+  border: 0;
+  border-top: 1px solid var(--sb-border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--sb-text);
+  cursor: pointer;
+  text-align: left;
+}
+.sb-root .sb-past:first-child {
+  border-top: 0;
+}
+.sb-root .sb-past:hover {
+  background: var(--sb-surface-hover);
+}
+.sb-root .sb-past-title {
+  font-size: calc(var(--sb-size-base) + 0.5px);
+}
+.sb-root .sb-past-meta {
+  font-size: calc(var(--sb-size-base) - 1px);
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-foot {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  padding: 8px 12px 10px;
+}
+
 @keyframes sb-slide-in {
   from {
     opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunboard/react",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Product tours, tooltips and a Help launcher with an assistant, for your React app. Sunboard creates the guides from your docs and keeps them working as your app changes.",
   "license": "MIT",
   "homepage": "https://sunboardhq.com",
@@ -46,6 +46,7 @@
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "eslint": "^9.39.1",
+    "jose": "6.2.8",
     "jsdom": "^30.0.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",