@webskill/chatbot 0.1.0 → 0.3.0

package/README.md

@@ -76,27 +76,18 @@ probe (`pnpm test:install-smoke`), against the **published** `.d.ts`.
 <!-- typecheck: chatbot-minimal.tsx -->
 
 ```tsx
-import { Chatbot, type ChatbotHostAdapter, type LlmConfig } from '@webskill/chatbot';
+import { Chatbot, type ChatbotHostAdapter } from '@webskill/chatbot';
 import { OpfsProvider } from '@webskill/sdk/browser';
 import '@webskill/chatbot/chatbot.css';
 
-// ChatbotHostAdapter: wire storage, skill roots, an LLM config store, and a
-// navigation port (openConsole / openConsoleTrace). <Chatbot> constructs its own
-// ChatEngine from the adapter; pass config for options like generativeUi.
-let saved: LlmConfig | undefined;
-
+// ChatbotHostAdapter: wire storage, skill roots and a navigation port
+// (openConsole / openConsoleTrace). <Chatbot> constructs its own ChatEngine
+// from the adapter; pass config for options like generativeUi.
+// Model configuration lives in the runtime config store (config.runtimeConfig):
+// RuntimeConfig.llm.entries holds the model list, llm.defaultId the default one.
 const adapter: ChatbotHostAdapter = {
   storage: new OpfsProvider({ rootName: 'my-app' }),
   skillRoots: ['/skills'],
-  llmConfig: {
-    load: async () => saved,
-    save: async (config) => {
-      saved = config;
-    },
-    clear: async () => {
-      saved = undefined;
-    }
-  },
   navigation: {
     openConsole() {
       /* route to your console surface */
@@ -118,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;
   }
@@ -229,12 +232,21 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .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);
   }
@@ -268,6 +280,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-7 {
+    bottom: calc(var(--spacing) * -7);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -310,6 +325,9 @@
   .m-3 {
     margin: calc(var(--spacing) * 3);
   }
+  .mx-1 {
+    margin-inline: var(--spacing);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -322,6 +340,9 @@
   .my-0 {
     margin-block: 0px;
   }
+  .my-1 {
+    margin-block: var(--spacing);
+  }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
@@ -349,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;
@@ -423,6 +444,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-0 {
+    height: 0px;
+  }
   .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
@@ -483,23 +507,32 @@
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
+  .w-0 {
+    width: 0px;
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
   .w-2\.5 {
     width: calc(var(--spacing) * 2.5);
   }
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
   .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));
@@ -528,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);
@@ -641,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;
   }
@@ -659,9 +698,6 @@
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
   .items-start {
     align-items: flex-start;
   }
@@ -695,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));
@@ -782,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;
@@ -874,6 +911,12 @@
   .bg-danger-soft {
     background-color: var(--destructive-soft);
   }
+  .bg-danger\/10 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
@@ -973,9 +1016,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-5 {
-    padding: calc(var(--spacing) * 5);
-  }
   .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1045,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);
   }
@@ -1081,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);
   }
@@ -1113,6 +1156,9 @@
   .text-\[0\.85em\] {
     font-size: 0.85em;
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -1173,6 +1219,9 @@
   .text-ink {
     color: var(--foreground);
   }
+  .text-input {
+    color: var(--input);
+  }
   .text-muted {
     color: var(--muted-foreground);
   }
@@ -1210,6 +1259,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .line-through {
+    text-decoration-line: line-through;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1321,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%;
   }
@@ -1447,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);
     }
@@ -1481,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);
     }
@@ -1571,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;
   }
@@ -1976,19 +2028,11 @@
     background: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
   }
 }
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+[data-webskill-theme='light'] {
+  color-scheme: light;
 }
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-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;