@dbx-tools/ui-mastra 0.3.4 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -25,7 +25,7 @@ Key features:
25
25
  the server plugin.
26
26
  - Conversation sidebar with new, select, rename, delete, active-thread, and
27
27
  background-streaming states.
28
- - Export menu for print/PDF and Markdown, resolving charts and tables so
28
+ - Export menu for PDF and Markdown, resolving charts and tables so
29
29
  exported conversations remain useful offline.
30
30
 
31
31
  ## Why Not Just AppKit UI?
@@ -44,7 +44,7 @@ understand Mastra-specific behavior:
44
44
  answer.
45
45
  - `[chart:<id>]` and `[data:<id>]` assistant markers rendered as ECharts charts
46
46
  and sortable tables.
47
- - Conversation export that resolves those embeds into Markdown or print/PDF.
47
+ - Conversation export that resolves those embeds into Markdown or PDF.
48
48
 
49
49
  ## Add The Styles
50
50
 
@@ -133,6 +133,7 @@ transport or needs to combine Mastra messages with another state model.
133
133
  import {
134
134
  MastraPluginClient,
135
135
  useMastraClient,
136
+ useMastraDefaultModel,
136
137
  useMastraModels,
137
138
  useMastraSuggestions,
138
139
  useMastraThreads,
@@ -172,7 +173,7 @@ The UI understands the extra events produced by
172
173
  <MastraChat enableExport />
173
174
  ```
174
175
 
175
- Exports support Markdown downloads and print/PDF. Chart and data markers are
176
+ Exports support Markdown downloads and PDF (rendered through a hidden print iframe, so the browser's Save-as-PDF dialog opens with no popup tab). Chart and data markers are
176
177
  resolved during export: charts are rendered to inline SVG with ECharts' server
177
178
  renderer, and data markers become real tables. Expired or missing embeds are
178
179
  skipped so old transcripts still export cleanly.
@@ -184,8 +185,9 @@ skipped so old transcripts still export cleanly.
184
185
  - `ChatView` - controlled presentational chat shell.
185
186
  - `MastraPluginClient` - `@mastra/client-js` plus AppKit-Mastra custom routes.
186
187
  - `useMastraClient`, `useMastraConfig`, `useMastraModels`,
187
- `useMastraSuggestions`, `useMastraThreads`, `useChartFetch`,
188
- `useStatementFetch` - route/config hooks for controlled clients.
188
+ `useMastraDefaultModel`, `useMastraSuggestions`, `useMastraThreads`,
189
+ `useChartFetch`, `useStatementFetch` - route/config hooks for controlled
190
+ clients.
189
191
  - `ThreadSidebar` - controlled conversation list.
190
192
  - `ExportMenu` - shared export format menu.
191
193
  - Types - `ChatViewProps`, `MastraChatProps`, `UseMastraChatOptions`,
package/package.json CHANGED
@@ -26,19 +26,19 @@
26
26
  "shiki": "^3.0.0",
27
27
  "sql-formatter": "^15.6.9",
28
28
  "streamdown": "^2.5.0",
29
- "@dbx-tools/shared-core": "0.3.4",
30
- "@dbx-tools/shared-genie": "0.3.4",
31
- "@dbx-tools/shared-mastra": "0.3.4",
32
- "@dbx-tools/ui-appkit": "0.3.4",
33
- "@dbx-tools/ui-branding": "0.3.4",
34
- "@dbx-tools/shared-model": "0.3.4"
29
+ "@dbx-tools/shared-core": "0.3.5",
30
+ "@dbx-tools/shared-genie": "0.3.5",
31
+ "@dbx-tools/shared-mastra": "0.3.5",
32
+ "@dbx-tools/ui-appkit": "0.3.5",
33
+ "@dbx-tools/ui-branding": "0.3.5",
34
+ "@dbx-tools/shared-model": "0.3.5"
35
35
  },
36
36
  "main": "index.ts",
37
37
  "license": "UNLICENSED",
38
38
  "publishConfig": {
39
39
  "access": "public"
40
40
  },
41
- "version": "0.3.4",
41
+ "version": "0.3.5",
42
42
  "types": "index.ts",
43
43
  "type": "module",
44
44
  "exports": {
@@ -84,13 +84,7 @@ export function humanizeLabel(
84
84
  value: string,
85
85
  options?: string.TokenizeOptions,
86
86
  ): string {
87
- const tokens = [
88
- ...string.tokenizeWithOptions(
89
- { lowerCase: true, capitalize: true, ...options },
90
- value,
91
- ),
92
- ];
93
- return tokens.length > 0 ? tokens.join(" ") : value;
87
+ return string.toLabel(value, options);
94
88
  }
95
89
 
96
90
  /**
@@ -348,10 +348,10 @@ export const useMastraChat = (
348
348
  // hidden and skips the catalogue fetch entirely.
349
349
  const showModelPicker = Boolean(options.showModelPicker);
350
350
  const { models } = useMastraModels(showModelPicker);
351
- // The endpoint the active agent falls back to when no model is pinned, so
352
- // the picker can name its "Server default" option. Fetched only when the
353
- // picker is shown; `null` when the agent's model is dynamic.
354
- const defaultModelName = useMastraDefaultModel(agentId, showModelPicker);
351
+ // The humanized name of the model the active agent falls back to when no
352
+ // model is pinned, so the picker can label its default option. Fetched only
353
+ // when the picker is shown; `null` when the agent's model is dynamic.
354
+ const { defaultModel: defaultModelName } = useMastraDefaultModel(agentId, showModelPicker);
355
355
  // Starter suggestions: an explicit `options.suggestions` always
356
356
  // wins (including `[]` to force none) and is rendered verbatim;
357
357
  // otherwise auto-source the agent's Genie space sample questions.
@@ -117,10 +117,10 @@ export type ChatViewProps = {
117
117
  model?: string;
118
118
  onModelChange?: (model: string) => void;
119
119
  /**
120
- * The serving-endpoint id the server falls back to when no model is pinned.
121
- * When set, the picker's "Server default" option names it (e.g. "Server
122
- * default (Claude Sonnet 4.6)"), using the matching `models` entry's
123
- * `displayName` when available.
120
+ * The serving-endpoint fallback the server uses when no model is pinned,
121
+ * already humanized (the server's `displayName`, e.g. "Claude Sonnet 4.6").
122
+ * When set, the picker's default option shows this name; otherwise it shows
123
+ * a neutral "Default". Never a raw endpoint id.
124
124
  */
125
125
  defaultModelName?: string;
126
126
  /**
@@ -222,7 +222,7 @@ function messageText(message: UIMessage): string {
222
222
  function roleLabel(role: UIMessage["role"], userLabel: string): string {
223
223
  if (role === "user") return userLabel;
224
224
  if (role === "assistant") return "Assistant";
225
- return role.charAt(0).toUpperCase() + role.slice(1);
225
+ return string.capitalize(role);
226
226
  }
227
227
 
228
228
  /* --------------------------------- HTML ---------------------------------- */
@@ -331,7 +331,7 @@ async function dataTableHtml(
331
331
  const data = await safeStatement(resolver, id);
332
332
  if (!data || data.rows.length === 0) return null;
333
333
  const head = data.columns
334
- .map((c) => `<th>${escapeHtml(humanizeHeader(c))}</th>`)
334
+ .map((c) => `<th>${escapeHtml(string.toLabel(c))}</th>`)
335
335
  .join("");
336
336
  const body = data.rows
337
337
  .map(
@@ -409,7 +409,7 @@ async function dataTableMarkdown(
409
409
  ): Promise<string | null> {
410
410
  const data = await safeStatement(resolver, id);
411
411
  if (!data || data.rows.length === 0) return null;
412
- const header = `| ${data.columns.map((c) => mdCell(humanizeHeader(c))).join(" | ")} |`;
412
+ const header = `| ${data.columns.map((c) => mdCell(string.toLabel(c))).join(" | ")} |`;
413
413
  const sep = `| ${data.columns.map(() => "---").join(" | ")} |`;
414
414
  const rows = data.rows.map(
415
415
  (row) => `| ${data.columns.map((c) => mdCell(cellText(row[c]))).join(" | ")} |`,
@@ -458,14 +458,6 @@ function mdCell(value: string): string {
458
458
  return value.replace(/\|/g, "\\|").replace(/\r?\n/g, " ");
459
459
  }
460
460
 
461
- /** Title-case a snake/kebab/camel column name for a header label. */
462
- function humanizeHeader(name: string): string {
463
- const tokens = [
464
- ...string.tokenizeWithOptions({ lowerCase: true, capitalize: true }, name),
465
- ];
466
- return tokens.length > 0 ? tokens.join(" ") : name;
467
- }
468
-
469
461
  /** Escape HTML-significant characters (from the shared string utils). */
470
462
  const escapeHtml = string.escapeHtml;
471
463
 
@@ -184,9 +184,8 @@ export class MastraPluginClient extends MastraClient {
184
184
  * arrives. Defaults to the server's default agent when `agentId` is omitted.
185
185
  */
186
186
  async defaultModel(agentId?: string, signal?: AbortSignal): Promise<string | null> {
187
- const query = agentId ? `?agentId=${encodeURIComponent(agentId)}` : "";
188
187
  const payload = await this.#getJson(
189
- `${this.basePath}${routes.MASTRA_ROUTES.defaultModel}${query}`,
188
+ this.#agentScoped(routes.MASTRA_ROUTES.defaultModel, agentId),
190
189
  wire.DefaultModelResponseSchema,
191
190
  signal,
192
191
  );
@@ -553,35 +552,47 @@ export const useMastraModels = (
553
552
  };
554
553
 
555
554
  /**
556
- * Fetch the static default serving-endpoint id the given agent (or the
557
- * server's default agent) falls back to when no model is pinned, via
558
- * `client.defaultModel(agentId)`. `null` while loading, when the agent's
559
- * model is dynamic, or on error - the picker then shows a plain "Server
560
- * default". Pass `enabled: false` to skip the fetch (e.g. picker hidden).
555
+ * Fetch the humanized name of the static default model the given agent (or
556
+ * the server's default agent) falls back to when no model is pinned, via
557
+ * `client.defaultModel(agentId)`. `defaultModel` is `null` while loading,
558
+ * when the agent's model is dynamic, or on error - the picker then shows a
559
+ * plain "Default". Pass `enabled: false` to skip the fetch (e.g. picker
560
+ * hidden), which also clears any prior value. Returns an object to match the
561
+ * shape of the sibling data hooks ({@link useMastraModels},
562
+ * {@link useMastraSuggestions}).
561
563
  */
562
564
  export const useMastraDefaultModel = (
563
565
  agentId?: string,
564
566
  enabled = true,
565
- ): string | null => {
567
+ ): { defaultModel: string | null; loading: boolean } => {
566
568
  const client = useMastraClient();
567
569
  const [model, setModel] = useState<string | null>(null);
570
+ const [loading, setLoading] = useState(enabled);
568
571
 
569
572
  useEffect(() => {
570
- if (!enabled) return;
573
+ if (!enabled) {
574
+ setModel(null);
575
+ setLoading(false);
576
+ return;
577
+ }
571
578
  const controller = new AbortController();
579
+ setLoading(true);
572
580
  client
573
581
  .defaultModel(agentId, controller.signal)
574
582
  .then((m) => {
575
583
  if (!controller.signal.aborted) setModel(m);
576
584
  })
577
585
  .catch(() => {
578
- // Non-critical: a missing default just yields a plain "Server default".
586
+ // Non-critical: a missing default just yields a plain "Default".
579
587
  if (!controller.signal.aborted) setModel(null);
588
+ })
589
+ .finally(() => {
590
+ if (!controller.signal.aborted) setLoading(false);
580
591
  });
581
592
  return () => controller.abort();
582
593
  }, [client, agentId, enabled]);
583
594
 
584
- return model;
595
+ return { defaultModel: model, loading };
585
596
  };
586
597
 
587
598
  /**