@dbx-tools/ui-mastra 0.9.141 → 0.9.144

package/README.md

@@ -210,6 +210,14 @@ Configure the client with these options:
   id. Set `enableFeedback={false}` to hide them. Viewers with `CAN_MANAGE` on
   the experiment also get an experiment debug link at the end of the action row.
 
+Post-turn follow-ups follow the policy published by AppKit-Mastra. Native Genie
+questions and persisted `data-follow-up-suggestions` parts use the same
+near-duplicate filter and source round-robin. After a turn settles, the latest
+questions render through `SuggestionPills` at the end of the scrollable
+transcript. They disappear when the next user turn starts and remain available
+after history hydration because generated suggestions are persisted on the
+assistant message.
+
 ## Use direct Genie chat
 
 Use `genieSpace` when the application needs the same chat shell without a

package/index.ts

@@ -3,7 +3,7 @@
 // Hand edits are overwritten on the next watch; this file is read-only.
 
 export const PACKAGE_IDENTIFIER = "@dbx-tools/ui-mastra";
-export const PACKAGE_VERSION = "0.9.141";
+export const PACKAGE_VERSION = "0.9.144";
 export * as reactBubbles from "./src/react/bubbles.tsx";
 export * as reactChatApprovals from "./src/react/chat-approvals.ts";
 export * as reactChatComposer from "./src/react/chat-composer.tsx";

package/package.json

@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@databricks/appkit-ui": "0.81.0",
-    "@dbx-tools/shared-core": "^0.9.141",
-    "@dbx-tools/shared-genie": "^0.9.141",
-    "@dbx-tools/shared-mastra": "^0.9.141",
-    "@dbx-tools/shared-model": "^0.9.141",
-    "@dbx-tools/ui": "^0.9.141",
+    "@dbx-tools/shared-core": "^0.9.144",
+    "@dbx-tools/shared-genie": "^0.9.144",
+    "@dbx-tools/shared-mastra": "^0.9.144",
+    "@dbx-tools/shared-model": "^0.9.144",
+    "@dbx-tools/ui": "^0.9.144",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -51,7 +51,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.141",
+  "version": "0.9.144",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/bubbles.tsx

@@ -35,8 +35,6 @@ import { MarkdownWithEmbeds } from "./embed-slots.tsx";
 import { ExportMenu } from "./export-menu.tsx";
 import { FeedbackControls } from "./feedback-controls.tsx";
 import { ToolMarkdown } from "./markdown.tsx";
-import { SuggestionPills } from "./suggestion-pills.tsx";
-import { collectSuggestions } from "./suggestions.ts";
 import { ToolSessionPill, humanizeToolName } from "./tool-pill.tsx";
 import type {
   ApprovalDecision,
@@ -316,8 +314,6 @@ type AssistantBubbleProps = {
   status: ChatStatus;
   events?: ToolEvent[];
   regenerate?: () => void;
-  /** Click handler for tool-suggested follow-up questions. */
-  onSuggestionClick?: (question: string) => void;
   /** Approve / deny handler for inline {@link ToolApprovalCard}s. */
   onResolveToolApproval?: (decision: ApprovalDecision) => void | Promise<void>;
   /**
@@ -353,7 +349,6 @@ export const AssistantBubble = ({
   status,
   events,
   regenerate,
-  onSuggestionClick,
   onResolveToolApproval,
   externalApprovals,
   onExport,
@@ -396,7 +391,6 @@ export const AssistantBubble = ({
   // streaming target - either the agent has returned to `ready` /
   // `error`, or a newer message has taken over the `isLast` slot.
   const isStreamingThisBubble = isLast && (status === "streaming" || status === "submitted");
-  const suggestions = isStreamingThisBubble ? [] : collectSuggestions(events);
   const showResponseStatus = shouldShowAssistantResponseStatus(
     isLast,
     status,
@@ -528,7 +522,6 @@ export const AssistantBubble = ({
             )}
           </div>
         )}
-        <SuggestionPills questions={suggestions} onSelect={onSuggestionClick} className="mt-1" />
       </ItemContent>
     </Item>
   );

package/src/react/chat-transcript.tsx

@@ -16,6 +16,7 @@ import { ArrowDownIcon, MessageSquareIcon, RefreshCwIcon, TriangleAlertIcon } fr
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AssistantBubble, UserBubble } from "./bubbles.tsx";
 import { genieFeedbackTarget } from "./chat-feedback.ts";
+import { SuggestionPills } from "./suggestion-pills.tsx";
 import type { ChatViewProps } from "./types.ts";
 import { messageText } from "../support/export.ts";
 
@@ -148,8 +149,9 @@ type ChatTranscriptProps = {
   messages: ChatViewProps["messages"];
   status: ChatViewProps["status"];
   error: ChatViewProps["error"];
-  sendMessage: ChatViewProps["sendMessage"];
   suggestions: NonNullable<ChatViewProps["suggestions"]>;
+  followUpQuestions: string[];
+  onSelectFollowUp: (question: string) => void;
   toolEventsByMessage: NonNullable<ChatViewProps["toolEventsByMessage"]>;
   regenerate: ChatViewProps["regenerate"];
   isLoadingMore: NonNullable<ChatViewProps["isLoadingMore"]>;
@@ -169,8 +171,9 @@ export const ChatTranscript = ({
   messages,
   status,
   error,
-  sendMessage,
   suggestions,
+  followUpQuestions,
+  onSelectFollowUp,
   toolEventsByMessage,
   regenerate,
   isLoadingMore,
@@ -252,7 +255,6 @@ export const ChatTranscript = ({
                     status={status}
                     events={toolEventsByMessage[message.id]}
                     regenerate={regenerate}
-                    onSuggestionClick={(text) => sendMessage({ text })}
                     onResolveToolApproval={onResolveToolApproval}
                     externalApprovals={pendingApprovalsByMessage[message.id]}
                     {...(onExportMessage
@@ -274,6 +276,11 @@ export const ChatTranscript = ({
               }
               return <UserBubble key={message.id} message={message} />;
             })}
+            <SuggestionPills
+              questions={followUpQuestions}
+              onSelect={onSelectFollowUp}
+              className="pb-2 pt-1"
+            />
             {showWaitingIndicator && (
               <div
                 role="status"

package/src/react/chat-view.tsx

@@ -1,6 +1,7 @@
 import { ChatComposer } from "./chat-composer.tsx";
 import { ChatThreadLayout } from "./chat-thread-layout.tsx";
 import { ChatTranscript, useChatTranscriptController } from "./chat-transcript.tsx";
+import { collectSuggestions } from "./suggestions.ts";
 import type { ChatViewProps } from "./types.ts";
 
 /**
@@ -23,6 +24,8 @@ export const ChatView = ({
   onStop,
   className,
   suggestions = [],
+  followUpSuggestions = "none",
+  followUpSuggestionLimit = 3,
   toolEventsByMessage = {},
   models,
   model,
@@ -76,6 +79,18 @@ export const ChatView = ({
     hasMore,
     isLoadingHistory,
   });
+  const latestMessage = messages[messages.length - 1];
+  const latestAssistant = latestMessage?.role === "assistant" ? latestMessage : undefined;
+  const running = status === "submitted" || status === "streaming";
+  const followUpQuestions =
+    latestAssistant && !running
+      ? collectSuggestions(
+          toolEventsByMessage[latestAssistant.id],
+          latestAssistant,
+          followUpSuggestions,
+          followUpSuggestionLimit,
+        )
+      : [];
 
   return (
     <ChatThreadLayout
@@ -104,8 +119,9 @@ export const ChatView = ({
         messages={messages}
         status={status}
         error={error}
-        sendMessage={sendMessage}
         suggestions={suggestions}
+        followUpQuestions={followUpQuestions}
+        onSelectFollowUp={(text) => sendMessage({ text })}
         toolEventsByMessage={toolEventsByMessage}
         regenerate={regenerate}
         isLoadingMore={isLoadingMore}

package/src/react/embed-slots.tsx

@@ -105,12 +105,13 @@ const ChartSlot = ({ chartId }: { chartId: string }) => {
   // planner spec before rendering. Memoized on the resolved option and
   // the theme, so a light/dark switch recolors the chart in place.
   const option = useMemo(
-    () => (chart?.result ? normalizeChartOption(chart.result.option, chrome) : undefined),
+    () => (chart?.result && chrome ? normalizeChartOption(chart.result.option, chrome) : undefined),
     [chart?.result, chrome],
   );
+  const waiting = loading || chrome === undefined;
   // Settled 404 (unknown / TTL-expired id) -> small "expired" notice.
   // Hard-error / non-terminal payloads render nothing.
-  if (!option && !loading) {
+  if (!option && !waiting) {
     return !error && chart === undefined ? <ExpiredSlot type="chart" /> : null;
   }
   // One frame for both states: the chart's footprint is known ahead of

package/src/react/markdown.tsx

@@ -7,6 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Spinner,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -180,6 +181,20 @@ const MARKDOWN_COMPONENTS = {
   },
 };
 
+/** Hold streaming tables until their rows and right-aligned values are complete. */
+const STREAMING_MARKDOWN_COMPONENTS = {
+  ...MARKDOWN_COMPONENTS,
+  table: () => (
+    <div
+      role="status"
+      className="my-2 flex h-10 items-center gap-2 rounded-md border border-border/70 bg-muted/30 px-3 text-xs text-muted-foreground"
+    >
+      <Spinner className="size-3" />
+      <span>Building table...</span>
+    </div>
+  ),
+};
+
 /**
  * Markdown component map for tool-detail copy (Genie summaries, SQL
  * descriptions). Same cell/section overrides, but tables stay static
@@ -258,7 +273,7 @@ export const AssistantMarkdown = ({
   animate?: boolean;
 }) => (
   <Streamdown
-    components={MARKDOWN_COMPONENTS}
+    components={animate ? STREAMING_MARKDOWN_COMPONENTS : MARKDOWN_COMPONENTS}
     plugins={SHIKI_PLUGIN}
     controls={false}
     linkSafety={LINK_SAFETY}

package/src/react/mastra-chat.tsx

@@ -1436,6 +1436,8 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
     regenerate,
     onStop: stop,
     suggestions,
+    followUpSuggestions: mastraClient.followUpSuggestions,
+    followUpSuggestionLimit: mastraClient.followUpSuggestionLimit,
     pendingApprovalsByMessage: activeSession.pendingApprovalsByMessage,
     onResolveToolApproval: handleApproval,
     // Picker is opt-in: only hand ChatView the catalogue + change

package/src/react/suggestions.ts

@@ -1,3 +1,9 @@
+import {
+  FOLLOW_UP_SUGGESTIONS_PART_TYPE,
+  FollowUpSuggestionsPartDataSchema,
+  type FollowUpSuggestionMode,
+} from "@dbx-tools/shared-mastra/wire";
+import type { UIMessage } from "ai";
 import type { ToolEvent, ToolProgress } from "./types.ts";
 
 // Suggested follow-up question extraction: dedupe + cap the
@@ -9,7 +15,7 @@ import type { ToolEvent, ToolProgress } from "./types.ts";
  * assistant message - several Genie queries each emitting a handful
  * would otherwise flood the bubble.
  */
-const MAX_SUGGESTIONS = 4;
+const MAX_STARTER_SUGGESTIONS = 4;
 
 /**
  * Token-set Jaccard threshold above which two suggestions are treated
@@ -46,14 +52,14 @@ function tokenSimilarity(a: Set<string>, b: Set<string>): number {
  * its *top* question before any source contributes a second -
  * favoring breadth over depth. Near-duplicates (see
  * {@link SUGGESTION_SIMILARITY}) are skipped and the result is capped
- * at {@link MAX_SUGGESTIONS}. Exact-duplicate questions across
+ * at the caller's limit. Exact-duplicate questions across
  * sources also fold via the similarity check.
  */
-function pickSuggestions(lists: string[][]): string[] {
+function pickSuggestions(lists: string[][], limit: number): string[] {
   const accepted: string[] = [];
   const acceptedTokens: Set<string>[] = [];
   const consider = (question: string): void => {
-    if (accepted.length >= MAX_SUGGESTIONS) return;
+    if (accepted.length >= limit) return;
     const tokens = suggestionTokens(question);
     if (tokens.size === 0) return;
     const isDuplicate = acceptedTokens.some(
@@ -65,7 +71,7 @@ function pickSuggestions(lists: string[][]): string[] {
   };
 
   const maxLen = lists.reduce((m, l) => Math.max(m, l.length), 0);
-  for (let i = 0; i < maxLen && accepted.length < MAX_SUGGESTIONS; i++) {
+  for (let i = 0; i < maxLen && accepted.length < limit; i++) {
     for (const list of lists) {
       const question = list[i];
       if (question !== undefined) consider(question);
@@ -76,34 +82,49 @@ function pickSuggestions(lists: string[][]): string[] {
 
 /**
  * Dedupe + cap a single flat list of suggested questions (e.g. the
- * initial Genie sample questions). Shares the similarity dedupe and
- * {@link MAX_SUGGESTIONS} cap with the follow-up extractor so initial
- * and follow-up suggestions behave identically.
+ * initial Genie sample questions). Uses the same similarity dedupe as
+ * the follow-up extractor.
  */
 export const dedupeSuggestions = (questions: string[] | undefined): string[] =>
-  questions && questions.length > 0 ? pickSuggestions([questions]) : [];
+  questions && questions.length > 0 ? pickSuggestions([questions], MAX_STARTER_SUGGESTIONS) : [];
 
 /**
  * Build the short, deduped list of suggested follow-up questions for
- * an assistant message. Within each tool event the **last**
- * `suggested` progress entry wins (Genie publishes an evolving list;
- * the final one is the refined version). Delegates dedupe + cap to
- * {@link pickSuggestions}.
+ * an assistant message. Within each Genie tool event the last suggested
+ * progress entry wins; persisted generic data parts are merged according to
+ * the server-published source policy.
  */
-export const collectSuggestions = (events: ToolEvent[] | undefined): string[] => {
-  if (!events || events.length === 0) return [];
-
+export const collectSuggestions = (
+  events: ToolEvent[] | undefined,
+  message: UIMessage,
+  mode: FollowUpSuggestionMode,
+  limit: number,
+): string[] => {
+  if (mode === "none") return [];
   // One ordered question list per event that emitted any.
   const lists: string[][] = [];
-  for (const event of events) {
-    const last = [...(event.progress ?? [])]
-      .reverse()
-      .find(
-        (p): p is Extract<ToolProgress, { type: "suggested_questions" }> =>
-          p.type === "suggested_questions",
-      );
-    if (last && last.questions.length > 0) lists.push(last.questions);
+  if (mode === "genie" || mode === "auto") {
+    for (const event of events ?? []) {
+      const last = [...(event.progress ?? [])]
+        .reverse()
+        .find(
+          (p): p is Extract<ToolProgress, { type: "suggested_questions" }> =>
+            p.type === "suggested_questions",
+        );
+      if (last && last.questions.length > 0) lists.push(last.questions);
+    }
   }
-
-  return pickSuggestions(lists);
+  for (const part of message.parts) {
+    if (part.type !== FOLLOW_UP_SUGGESTIONS_PART_TYPE) continue;
+    const parsed = FollowUpSuggestionsPartDataSchema.safeParse(part.data);
+    if (!parsed.success) continue;
+    if (
+      (mode === "generated" && parsed.data.source !== "model") ||
+      (mode === "genie" && parsed.data.source !== "genie")
+    ) {
+      continue;
+    }
+    lists.push(parsed.data.questions);
+  }
+  return pickSuggestions(lists, Math.min(10, Math.max(1, limit)));
 };

package/src/react/types.ts

@@ -1,4 +1,4 @@
-import type { ToolProgressEvent } from "@dbx-tools/shared-mastra/wire";
+import type { FollowUpSuggestionMode, ToolProgressEvent } from "@dbx-tools/shared-mastra/wire";
 import type { ReasoningEffort, ServingEndpointSummary } from "@dbx-tools/shared-model";
 import type { FileUIPart, UIMessage } from "ai";
 import type { ReactNode } from "react";
@@ -171,6 +171,10 @@ export type ChatViewProps = {
    * questions when the caller doesn't pass an explicit list.
    */
   suggestions?: string[];
+  /** Enabled post-turn follow-up sources published by the server. */
+  followUpSuggestions?: FollowUpSuggestionMode;
+  /** Maximum post-turn follow-up questions shown under one response. */
+  followUpSuggestionLimit?: number;
   toolEventsByMessage?: Record<string, ToolEvent[]>;
   /** Available model endpoints. Pass an empty array (or omit) to hide the picker. */
   models?: ChatModelOption[];

package/src/support/chart-theme.ts

@@ -110,12 +110,15 @@ const THEME_ATTRIBUTES = ["class", "style", "data-theme", "data-brand"];
  * structurally before being stored, so an unrelated attribute change
  * does not hand callers a new object and re-render every chart.
  *
- * Returns {@link LIGHT_CHART_CHROME} on the first render - the effect
- * that reads the real tokens runs after mount, by which point the chart
- * itself is usually still long-polling its spec.
+ * Returns `undefined` in the browser until the chart element is mounted and its
+ * inherited tokens have been read. This prevents Echarts from drawing once
+ * with fallback colors and immediately drawing again with the resolved theme.
+ * Server rendering retains {@link LIGHT_CHART_CHROME}.
  */
-export function useChartChrome(ref: RefObject<Element | null>): ChartChrome {
-  const [chrome, setChrome] = useState<ChartChrome>(LIGHT_CHART_CHROME);
+export function useChartChrome(ref: RefObject<Element | null>): ChartChrome | undefined {
+  const [chrome, setChrome] = useState<ChartChrome | undefined>(() =>
+    typeof window === "undefined" ? LIGHT_CHART_CHROME : undefined,
+  );
   useEffect(() => {
     const read = () => {
       const next = resolveChartChrome(ref.current);

package/src/support/genie-client.ts

@@ -28,6 +28,7 @@ export class GenieChatClient extends MastraPluginClient {
   override readonly feedbackMode = "none";
   override readonly threadRename = false;
   override readonly attachments = false;
+  override readonly followUpSuggestions: "none" | "genie";
   /** Thread ids known to be Genie conversations (listed, loaded, or announced). */
   readonly #conversations = new Set<string>();
   /** Transcript message id to Genie message id, for regenerate cleanup. */
@@ -36,6 +37,10 @@ export class GenieChatClient extends MastraPluginClient {
   constructor(config: MastraClientConfig, alias: string) {
     super(config);
     this.alias = alias;
+    this.followUpSuggestions =
+      config.followUpSuggestions === "genie" || config.followUpSuggestions === "auto"
+        ? "genie"
+        : "none";
   }
 
   #url(...parts: string[]): string {

package/src/support/mastra-client.ts

@@ -91,6 +91,10 @@ export class MastraPluginClient extends MastraClient {
   readonly chatAlwaysAvailable: boolean;
   /** Whether turns continue server-side after the initiating stream disconnects. */
   readonly backgroundTurns: boolean;
+  /** Enabled post-turn follow-up sources. */
+  readonly followUpSuggestions: "none" | "genie" | "generated" | "auto";
+  /** Maximum follow-up questions rendered after one turn. */
+  readonly followUpSuggestionLimit: number;
   /** Whether {@link renameThread} is supported by this client's thread store. */
   readonly threadRename: boolean = true;
   /** Whether a chat may attach files to a turn. */
@@ -109,6 +113,8 @@ export class MastraPluginClient extends MastraClient {
     this.feedbackMode = config.feedbackMode ?? "none";
     this.chatAlwaysAvailable = config.chatAlwaysAvailable ?? false;
     this.backgroundTurns = config.backgroundTurns ?? false;
+    this.followUpSuggestions = config.followUpSuggestions ?? "none";
+    this.followUpSuggestionLimit = config.followUpSuggestionLimit ?? 3;
   }
 
   /**