@webskill/chatbot 0.2.0 → 0.3.0

package/README.md

@@ -109,6 +109,23 @@ export function App() {
 See `examples/chatbot-playground` for a complete `ChatbotHostAdapter`
 implementation (OPFS storage, skills, demo/model providers, console embedding).
 
+## Session list ordering and paging
+
+`ChatEngine.listSessions()` forwards straight to the `SessionStore`, so the
+default `FsSessionStore` decides what you see:
+
+- Sessions are sorted by `createdAt` **ascending**, and a page is taken from the
+  **tail** of that list. The first screen therefore holds the *newest* sessions,
+  and the oldest session is not on it.
+- The page size is the store's (`FS_SESSION_PAGE_SIZE`, 50). `<Chatbot>` does
+  not override it — pass your own `sessionStore` if you need another size.
+- `nextCursor` points further back in history. While it is set, the session list
+  shows a **Load earlier sessions** entry; when it is absent the list is at the
+  end and the entry disappears, so "no button" always means "nothing older".
+- Session files that cannot be parsed are skipped rather than failing the whole
+  list. Their file names come back in `skipped` and are shown above the list, so
+  a session you expected to see but cannot is always accounted for.
+
 ## Embedding models
 
 - **As a component** inside an existing web app — mount `<Chatbot>` in your own

package/dist/chatbot.css

@@ -200,6 +200,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -235,9 +238,15 @@
   .inset-0 {
     inset: 0px;
   }
+  .inset-x-0 {
+    inset-inline: 0px;
+  }
   .inset-y-0 {
     inset-block: 0px;
   }
+  .top-0 {
+    top: 0px;
+  }
   .top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
@@ -271,6 +280,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-7 {
+    bottom: calc(var(--spacing) * -7);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -313,6 +325,9 @@
   .m-3 {
     margin: calc(var(--spacing) * 3);
   }
+  .mx-1 {
+    margin-inline: var(--spacing);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -355,8 +370,8 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
+  .mb-7 {
+    margin-bottom: calc(var(--spacing) * 7);
   }
   .block {
     display: block;
@@ -429,6 +444,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-0 {
+    height: 0px;
+  }
   .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
@@ -489,6 +507,9 @@
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
+  .w-0 {
+    width: 0px;
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -510,8 +531,8 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
-  .w-96 {
-    width: calc(var(--spacing) * 96);
+  .w-\[44rem\] {
+    width: 44rem;
   }
   .w-\[min\(22rem\,calc\(100vw-2rem\)\)\] {
     width: min(22rem, calc(100vw - 2rem));
@@ -540,8 +561,11 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-56 {
-    max-width: calc(var(--spacing) * 56);
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+  .max-w-72 {
+    max-width: calc(var(--spacing) * 72);
   }
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
@@ -653,6 +677,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-\[1fr_auto\] {
     grid-template-columns: 1fr auto;
   }
@@ -671,9 +698,6 @@
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
   .items-start {
     align-items: flex-start;
   }
@@ -707,9 +731,6 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
@@ -794,6 +815,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -991,9 +1016,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-5 {
-    padding: calc(var(--spacing) * 5);
-  }
   .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1054,9 +1076,6 @@
   .ps-9 {
     padding-inline-start: calc(var(--spacing) * 9);
   }
-  .pt-0\.5 {
-    padding-top: calc(var(--spacing) * 0.5);
-  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1066,9 +1085,6 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-  .pt-5 {
-    padding-top: calc(var(--spacing) * 5);
-  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1102,6 +1118,12 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
+  .text-start {
+    text-align: start;
+  }
   .font-display {
     font-family: var(--font-sans);
   }
@@ -1134,6 +1156,9 @@
   .text-\[0\.85em\] {
     font-size: 0.85em;
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -1194,6 +1219,9 @@
   .text-ink {
     color: var(--foreground);
   }
+  .text-input {
+    color: var(--input);
+  }
   .text-muted {
     color: var(--muted-foreground);
   }
@@ -1345,6 +1373,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 100%;
+  }
   .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
     opacity: 100%;
   }
@@ -1471,9 +1502,6 @@
     .hover\:bg-accent:hover {
       background-color: var(--accent);
     }
-    .hover\:bg-danger-soft:hover {
-      background-color: var(--destructive-soft);
-    }
     .hover\:bg-destructive-soft:hover {
       background-color: var(--destructive-soft);
     }
@@ -1505,9 +1533,6 @@
     .hover\:bg-surface:hover {
       background-color: var(--card);
     }
-    .hover\:text-danger:hover {
-      color: var(--destructive);
-    }
     .hover\:text-foreground:hover {
       color: var(--foreground);
     }
@@ -1595,6 +1620,9 @@
   .disabled\:opacity-60:disabled {
     opacity: 60%;
   }
+  .has-\[\[aria-expanded\=true\]\]\:opacity-100:has(:is([aria-expanded=true])) {
+    opacity: 100%;
+  }
   .aria-disabled\:pointer-events-none[aria-disabled="true"] {
     pointer-events: none;
   }
@@ -2000,19 +2028,11 @@
     background: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
   }
 }
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
+[data-webskill-theme='light'] {
+  color-scheme: light;
 }
-::-webkit-scrollbar-thumb {
-  background: rgb(148 163 184 / 0.25);
-  border-radius: 999px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: rgb(148 163 184 / 0.45);
+[data-webskill-theme='dark'] {
+  color-scheme: dark;
 }
 .webskill-surface-list {
   display: flex;