@dbx-tools/ui-mastra 0.6.218 → 0.6.220

package/src/react/chat-composer.tsx

@@ -31,7 +31,7 @@ import {
   Trash2Icon,
   XIcon,
 } from "lucide-react";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
 import { autosizeComposerTextarea, observeComposerWidth } from "./_composer-autosize.ts";
 import { ExportMenu } from "./export-menu.tsx";
 import { SuggestionPills } from "./suggestion-pills.tsx";
@@ -251,6 +251,7 @@ type ChatComposerProps = {
   onModelChange: ChatViewProps["onModelChange"];
   defaultModelName: ChatViewProps["defaultModelName"];
   composerActions: ChatViewProps["composerActions"];
+  composerLeadingActions: ChatViewProps["composerLeadingActions"];
   isLoadingHistory: NonNullable<ChatViewProps["isLoadingHistory"]>;
   onClear: ChatViewProps["onClear"];
   onExportConversation: ChatViewProps["onExportConversation"];
@@ -273,12 +274,14 @@ export const ChatComposer = ({
   onModelChange,
   defaultModelName,
   composerActions,
+  composerLeadingActions,
   isLoadingHistory,
   onClear,
   onExportConversation,
   onResumeFollow,
 }: ChatComposerProps) => {
   const [input, setInput] = useState("");
+  const inputId = useId();
   const inputGroupRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -316,12 +319,6 @@ export const ChatComposer = ({
       sensitivity: "base",
     }),
   );
-  const showToolbar =
-    showModelDisplay ||
-    Boolean(composerActions) ||
-    Boolean(onExportConversation) ||
-    Boolean(onClear);
-
   return (
     <>
       {isEmpty && (
@@ -350,6 +347,8 @@ export const ChatComposer = ({
           className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md"
         >
           <InputGroupTextarea
+            id={`${inputId}-message`}
+            name="message"
             ref={textareaRef}
             value={input}
             onChange={(event) => setInput(event.target.value)}
@@ -362,76 +361,84 @@ export const ChatComposer = ({
             placeholder={isLoadingHistory ? "Loading history..." : "Send a message..."}
             rows={1}
             disabled={isLoadingHistory}
-            className="field-sizing-fixed max-h-48 overflow-y-auto text-base md:text-sm"
+            className="field-sizing-fixed max-h-64 w-full flex-none overflow-y-auto px-4 pb-2 pt-4 text-base md:text-sm"
           />
-          <InputGroupAddon align="inline-end">
-            {isRunning && onStop && !input.trim() ? (
-              <InputGroupButton
-                type="button"
-                size="icon-sm"
-                variant="default"
-                onClick={() => onStop()}
-                aria-label="Stop response"
-              >
-                <SquareIcon className="size-3 fill-current" />
-              </InputGroupButton>
-            ) : (
-              <InputGroupButton
-                type="submit"
-                size="icon-sm"
-                variant="default"
-                disabled={!input.trim() || isLoadingHistory}
-                aria-label={isRunning ? "Send now (interrupts)" : "Send message"}
-              >
-                <SendIcon className="size-3" />
-              </InputGroupButton>
-            )}
-          </InputGroupAddon>
-        </InputGroup>
-        {showToolbar && (
-          <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
-            {showModelDisplay &&
-              (modelChangeable ? (
-                <Select
-                  value={model ? model : DEFAULT_MODEL_VALUE}
-                  onValueChange={(value) =>
-                    onModelChange?.(value === DEFAULT_MODEL_VALUE ? "" : value)
-                  }
+          <InputGroupAddon
+            align="block-end"
+            className="flex w-full flex-row flex-wrap items-center justify-between gap-2 px-3 pb-3 pt-0"
+          >
+            <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2">
+              {composerLeadingActions}
+              {onExportConversation && (
+                <ExportMenu
+                  onExport={(format) => void onExportConversation(format)}
+                  tooltip="Export conversation"
                   disabled={isLoadingHistory}
-                >
-                  <SelectTrigger
-                    size="sm"
-                    className="h-7 w-auto max-w-[200px] gap-1 rounded-full px-2.5 text-xs [&_svg]:size-3"
+                />
+              )}
+              {onClear && (
+                <ClearConversationAction onClear={onClear} isLoadingHistory={isLoadingHistory} />
+              )}
+            </div>
+            <div className="ml-auto flex min-w-0 max-w-full items-center gap-1.5">
+              {composerActions}
+              {showModelDisplay &&
+                (modelChangeable ? (
+                  <Select
+                    name="mastra-model"
+                    value={model ? model : DEFAULT_MODEL_VALUE}
+                    onValueChange={(value) =>
+                      onModelChange?.(value === DEFAULT_MODEL_VALUE ? "" : value)
+                    }
+                    disabled={isLoadingHistory}
                   >
-                    <SelectValue placeholder={defaultOptionLabel} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={DEFAULT_MODEL_VALUE}>{defaultOptionLabel}</SelectItem>
-                    {sortedModels.map((option) => (
-                      <SelectItem key={option.name} value={option.name}>
-                        {option.displayName || option.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                    <SelectTrigger
+                      size="sm"
+                      className="h-7 w-auto max-w-[180px] gap-1 truncate border-0 bg-transparent px-2 text-xs shadow-none hover:bg-accent [&_svg]:size-3"
+                    >
+                      <span className="sr-only">Model:</span>
+                      <SelectValue placeholder={defaultOptionLabel} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={DEFAULT_MODEL_VALUE}>{defaultOptionLabel}</SelectItem>
+                      {sortedModels.map((option) => (
+                        <SelectItem key={option.name} value={option.name}>
+                          {option.displayName || option.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <span className="max-w-[180px] truncate px-2 text-xs text-muted-foreground">
+                    {currentModelLabel}
+                  </span>
+                ))}
+              {isRunning && onStop && !input.trim() ? (
+                <InputGroupButton
+                  type="button"
+                  size="icon-sm"
+                  variant="default"
+                  onClick={() => onStop()}
+                  aria-label="Stop response"
+                  className="shrink-0 rounded-full"
+                >
+                  <SquareIcon className="size-3 fill-current" />
+                </InputGroupButton>
               ) : (
-                <span className="max-w-[200px] truncate px-2.5 text-xs text-muted-foreground">
-                  {currentModelLabel}
-                </span>
-              ))}
-            {composerActions}
-            {onExportConversation && (
-              <ExportMenu
-                onExport={(format) => void onExportConversation(format)}
-                tooltip="Export conversation"
-                disabled={isLoadingHistory}
-              />
-            )}
-            {onClear && (
-              <ClearConversationAction onClear={onClear} isLoadingHistory={isLoadingHistory} />
-            )}
-          </div>
-        )}
+                <InputGroupButton
+                  type="submit"
+                  size="icon-sm"
+                  variant="default"
+                  disabled={!input.trim() || isLoadingHistory}
+                  aria-label={isRunning ? "Queue message" : "Send message"}
+                  className="shrink-0 rounded-full"
+                >
+                  <SendIcon className="size-3" />
+                </InputGroupButton>
+              )}
+            </div>
+          </InputGroupAddon>
+        </InputGroup>
       </form>
     </>
   );

package/src/react/chat-feedback.ts

@@ -1,9 +1,9 @@
 import { error as sharedError, log } from "@dbx-tools/shared-core";
 import type { UIMessage } from "ai";
 import { useCallback, useRef } from "react";
-import type { MastraPluginClient } from "../support/mastra-client.ts";
-import type { FeedbackSubmission, MessageFeedback } from "./types.ts";
 import type { ThreadSessionUpdater } from "./chat-sessions.ts";
+import type { FeedbackSubmission, MessageFeedback } from "./types.ts";
+import type { MastraPluginClient } from "../support/mastra-client.ts";
 
 const logger = log.logger("ui-mastra/chat");
 

package/src/react/chat-history.ts

@@ -1,32 +1,76 @@
 import { error as sharedError, log } from "@dbx-tools/shared-core";
+import type { ListMemoryThreadMessagesResponse } from "@mastra/client-js";
 import type { UIMessage } from "ai";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { MastraPluginClient } from "../support/mastra-client.ts";
 import type {
   ThreadMessageWriter,
   ThreadSessionReader,
   ThreadSessionUpdater,
 } from "./chat-sessions.ts";
+import type { PendingApproval } from "./types.ts";
+import type { MastraPluginClient } from "../support/mastra-client.ts";
 
 const HISTORY_PAGE_SIZE = 20;
 const logger = log.logger("ui-mastra/chat");
 
 interface UseChatHistoryOptions {
   activeKey: string;
-  activeThreadId: string | undefined;
+  activeThreadId: string;
   agentId: string;
   getSession: ThreadSessionReader;
+  availability: "loading" | "present" | "missing";
   mastraClient: MastraPluginClient;
   updateSession: ThreadSessionUpdater;
   writeMessages: ThreadMessageWriter;
 }
 
+type SuspendedRuns = Awaited<ReturnType<MastraPluginClient["suspendedRuns"]>>["runs"];
+
+/** Read a newest-first native memory page as chronological UI messages. */
+function toChronologicalUiMessages(response: ListMemoryThreadMessagesResponse): UIMessage[] {
+  return [...(response.uiMessages ?? [])].reverse() as UIMessage[];
+}
+
+/** Recover actionable approval cards from Mastra's persisted suspended runs. */
+function pendingApprovals(
+  messages: UIMessage[],
+  runs: SuspendedRuns,
+): Record<string, PendingApproval[]> {
+  const approvals: Record<string, PendingApproval[]> = {};
+  const assistantMessages = messages.filter((message) => message.role === "assistant");
+  for (const run of runs) {
+    for (const toolCall of run.toolCalls) {
+      if (!toolCall.requiresApproval || !toolCall.toolCallId || !toolCall.toolName) continue;
+      const owner =
+        [...assistantMessages]
+          .reverse()
+          .find((message) =>
+            message.parts.some(
+              (part) => (part as { toolCallId?: unknown }).toolCallId === toolCall.toolCallId,
+            ),
+          ) ?? assistantMessages.at(-1);
+      if (!owner) continue;
+      approvals[owner.id] = [
+        ...(approvals[owner.id] ?? []),
+        {
+          runId: run.runId,
+          toolCallId: toolCall.toolCallId,
+          toolName: toolCall.toolName,
+          input: toolCall.args,
+        },
+      ];
+    }
+  }
+  return approvals;
+}
+
 /** Hydrate and page the active thread while other thread sessions keep running. */
 export function useChatHistory({
   activeKey,
   activeThreadId,
   agentId,
   getSession,
+  availability,
   mastraClient,
   updateSession,
   writeMessages,
@@ -44,6 +88,19 @@ export function useChatHistory({
       setIsLoadingHistory(false);
       return;
     }
+    if (availability === "loading") {
+      setIsLoadingHistory(true);
+      return;
+    }
+    if (availability === "missing") {
+      updateSession(threadId, (current) => ({
+        ...current,
+        historyLoaded: true,
+        hasMoreHistory: false,
+      }));
+      setIsLoadingHistory(false);
+      return;
+    }
 
     let cancelled = false;
     const controller = new AbortController();
@@ -57,16 +114,28 @@ export function useChatHistory({
         perPage: HISTORY_PAGE_SIZE,
         signal: controller.signal,
       })
-      .then((response) => {
+      .then(async (response) => {
+        const suspended = await mastraClient
+          .suspendedRuns(agentId, activeThreadId, controller.signal)
+          .catch((error: unknown) => {
+            if ((error as { name?: string }).name === "AbortError") throw error;
+            logger.warn("suspended-run discovery error", {
+              error: sharedError.errorMessage(error),
+            });
+            return { runs: [], total: 0 };
+          });
+        return [response, suspended] as const;
+      })
+      .then(([response, suspended]) => {
         if (cancelled) return;
+        const messages = toChronologicalUiMessages(response);
         updateSession(threadId, (current) => ({
           ...current,
-          messages: response.uiMessages as unknown as UIMessage[],
+          messages,
           historyLoaded: true,
-          hasMoreHistory: response.hasMore,
+          hasMoreHistory: response.hasMore ?? false,
           historyPage: 1,
-          toolEventsByMessage: {},
-          pendingApprovalsByMessage: {},
+          pendingApprovalsByMessage: pendingApprovals(messages, suspended.runs),
           feedbackByMessage: {},
         }));
       })
@@ -89,7 +158,7 @@ export function useChatHistory({
       cancelled = true;
       controller.abort();
     };
-  }, [activeKey, activeThreadId, agentId, getSession, mastraClient, updateSession]);
+  }, [activeKey, activeThreadId, agentId, availability, getSession, mastraClient, updateSession]);
 
   const loadOlderHistory = useCallback(() => {
     const threadId = activeKey;
@@ -102,13 +171,13 @@ export function useChatHistory({
     mastraClient
       .history({ agentId, threadId: activeThreadId, page, perPage: HISTORY_PAGE_SIZE })
       .then((response) => {
-        const uiMessages = response.uiMessages as unknown as UIMessage[];
+        const uiMessages = toChronologicalUiMessages(response);
         if (uiMessages.length > 0) {
           writeMessages(threadId, [...uiMessages, ...getSession(threadId).messages]);
         }
         updateSession(threadId, (current) => ({
           ...current,
-          hasMoreHistory: response.hasMore,
+          hasMoreHistory: response.hasMore ?? false,
         }));
       })
       .catch((error: unknown) => {

package/src/react/chat-stream.ts

@@ -1,16 +1,12 @@
 import { feedback } from "@dbx-tools/shared-mastra";
+import { readUIMessageStream, type UIMessage } from "ai";
 import { useCallback } from "react";
-import type { MastraStreamResponse } from "../support/mastra-stream.ts";
 import type {
   ThreadMessageWriter,
   ThreadSessionReader,
   ThreadSessionUpdater,
 } from "./chat-sessions.ts";
-import {
-  chatStreamAssistantMessage,
-  createChatStreamState,
-  reduceChatStreamChunk,
-} from "./chat-stream-reducer.ts";
+import type { MastraStreamResponse } from "../support/mastra-client.ts";
 
 /** Read the MLflow trace id captured by the server on a stream response. */
 const readMlflowTraceId = (stream: unknown): string | undefined => {
@@ -20,13 +16,22 @@ const readMlflowTraceId = (stream: unknown): string | undefined => {
 
 class StreamAborted extends Error {}
 
+/** Replace or append one assistant message without disturbing the transcript. */
+function upsertAssistant(messages: UIMessage[], assistant: UIMessage): UIMessage[] {
+  const next = [...messages];
+  const index = next.findIndex((message) => message.id === assistant.id);
+  if (index === -1) next.push(assistant);
+  else next[index] = assistant;
+  return next;
+}
+
 interface UseChatStreamOptions {
   getSession: ThreadSessionReader;
   updateSession: ThreadSessionUpdater;
   writeMessages: ThreadMessageWriter;
 }
 
-/** Translate one validated Mastra data stream into thread messages and tool state. */
+/** Project one Mastra stream through the native AI SDK UI message converter. */
 export function useChatStream({ getSession, updateSession, writeMessages }: UseChatStreamOptions) {
   return useCallback(
     async (
@@ -54,59 +59,24 @@ export function useChatStream({ getSession, updateSession, writeMessages }: UseC
         );
       }
 
-      const session = getSession(threadId);
-      const existing = session.messages.find((message) => message.id === assistantId);
-      let state = createChatStreamState({
-        ...(existing ? { existing } : {}),
-        pendingApprovals: session.pendingApprovalsByMessage[assistantId] ?? [],
-        runId: runIdRef.current,
-        toolEvents: session.toolEventsByMessage[assistantId] ?? [],
-      });
-
-      const upsertAssistant = () => {
-        const next = [...getSession(threadId).messages];
-        const index = next.findIndex((message) => message.id === assistantId);
-        const message = chatStreamAssistantMessage(assistantId, state);
-        if (index === -1) next.push(message);
-        else next[index] = message;
-        writeMessages(threadId, next);
-      };
-
       try {
-        await stream.processDataStream({
-          onChunk: async (chunk) => {
-            if (signal.aborted) throw new StreamAborted();
-            const next = reduceChatStreamChunk(state, chunk);
-            state = next.state;
-            runIdRef.current = state.runId;
-
-            if (Object.values(next.changes).some(Boolean)) {
-              updateSession(threadId, (current) => ({
-                ...current,
-                ...(next.changes.runId ? { runId: state.runId } : {}),
-                ...(next.changes.status ? { status: "streaming" as const } : {}),
-                ...(next.changes.toolEvents
-                  ? {
-                      toolEventsByMessage: {
-                        ...current.toolEventsByMessage,
-                        [assistantId]: state.toolEvents,
-                      },
-                    }
-                  : {}),
-                ...(next.changes.pendingApprovals
-                  ? {
-                      pendingApprovalsByMessage: {
-                        ...current.pendingApprovalsByMessage,
-                        [assistantId]: state.pendingApprovals,
-                      },
-                    }
-                  : {}),
-              }));
-            }
-            if (next.assistantChanged) upsertAssistant();
-            if (next.error) throw new Error(next.error);
-          },
-        });
+        const existing = getSession(threadId).messages.find(
+          (message) => message.id === assistantId,
+        );
+        for await (const message of readUIMessageStream({
+          ...(existing ? { message: existing } : {}),
+          stream: stream.stream,
+          terminateOnError: true,
+        })) {
+          if (signal.aborted) throw new StreamAborted();
+          const assistant = message.id === assistantId ? message : { ...message, id: assistantId };
+          writeMessages(threadId, upsertAssistant(getSession(threadId).messages, assistant));
+          updateSession(threadId, (current) => ({
+            ...current,
+            runId: runIdRef.current,
+            status: "streaming",
+          }));
+        }
       } catch (error) {
         if (error instanceof StreamAborted || signal.aborted) return;
         throw error;

package/src/react/chat-thread-layout.tsx

@@ -37,6 +37,10 @@ type ChatThreadLayoutProps = {
   className: ChatViewProps["className"];
   threads: ChatViewProps["threads"];
   threadPlacement: NonNullable<ChatViewProps["threadPlacement"]>;
+  threadBarActions: ChatViewProps["threadBarActions"];
+  showThreadBarActions: NonNullable<ChatViewProps["showThreadBarActions"]>;
+  threadNewIcon: ChatViewProps["threadNewIcon"];
+  threadHistoryIcon: ChatViewProps["threadHistoryIcon"];
   activeThreadId: ChatViewProps["activeThreadId"];
   streamingThreadIds: NonNullable<ChatViewProps["streamingThreadIds"]>;
   isLoadingThreads: NonNullable<ChatViewProps["isLoadingThreads"]>;
@@ -87,6 +91,10 @@ export const ChatThreadLayout = ({
   className,
   threads,
   threadPlacement,
+  threadBarActions,
+  showThreadBarActions,
+  threadNewIcon,
+  threadHistoryIcon,
   activeThreadId,
   streamingThreadIds,
   isLoadingThreads,
@@ -179,7 +187,15 @@ export const ChatThreadLayout = ({
               ))}
         <div className="flex h-full min-w-0 flex-1 flex-col">
           {tabbedThreads && (
-            <ThreadTabs {...threadListProps} openThreadIds={openTabIds} onCloseTab={closeTab} />
+            <ThreadTabs
+              {...threadListProps}
+              openThreadIds={openTabIds}
+              onCloseTab={closeTab}
+              actions={threadBarActions}
+              showActions={showThreadBarActions}
+              newIcon={threadNewIcon}
+              historyIcon={threadHistoryIcon}
+            />
           )}
           {showSidebarToggle && (
             <div

package/src/react/chat-view.tsx

@@ -29,6 +29,7 @@ export const ChatView = ({
   onModelChange,
   defaultModelName,
   composerActions,
+  composerLeadingActions,
   onLoadMore,
   isLoadingMore = false,
   hasMore = false,
@@ -38,6 +39,10 @@ export const ChatView = ({
   onClear,
   threads,
   threadPlacement = "auto",
+  threadBarActions,
+  showThreadBarActions = true,
+  threadNewIcon,
+  threadHistoryIcon,
   activeThreadId,
   streamingThreadIds = [],
   isLoadingThreads = false,
@@ -67,6 +72,10 @@ export const ChatView = ({
       className={className}
       threads={threads}
       threadPlacement={threadPlacement}
+      threadBarActions={threadBarActions}
+      showThreadBarActions={showThreadBarActions}
+      threadNewIcon={threadNewIcon}
+      threadHistoryIcon={threadHistoryIcon}
       activeThreadId={activeThreadId}
       streamingThreadIds={streamingThreadIds}
       isLoadingThreads={isLoadingThreads}
@@ -110,6 +119,7 @@ export const ChatView = ({
         onModelChange={onModelChange}
         defaultModelName={defaultModelName}
         composerActions={composerActions}
+        composerLeadingActions={composerLeadingActions}
         isLoadingHistory={isLoadingHistory}
         onClear={onClear}
         onExportConversation={onExportConversation}

package/src/react/export-menu.tsx

@@ -45,7 +45,14 @@ export const ExportMenu = ({
   disabled?: boolean;
 }) => {
   const trigger = iconOnly ? (
-    <Button type="button" size="icon" variant="ghost" className="size-7" disabled={disabled}>
+    <Button
+      type="button"
+      size="icon"
+      variant="ghost"
+      className="size-7"
+      disabled={disabled}
+      aria-label={tooltip}
+    >
       <DownloadIcon className="size-3" />
     </Button>
   ) : (

package/src/react/index.ts

@@ -2,6 +2,8 @@
 //
 // - `MastraChat` / `useMastraChat`: the self-contained drop-in (and its
 //   headless driver) that wire themselves from the Mastra plugin config.
+// - `MastraAssistant` / `useMastraAssistant`: the persistent app shell and
+//   controller for docked/overlay chat launched from anywhere below it.
 // - `ChatView`: the controlled, presentational shell for callers that
 //   own message state and transport themselves.
 // - The Mastra plugin client + hooks (model catalogue, history paging,
@@ -27,13 +29,27 @@ export {
 export type { ByIdFetchState } from "../support/mastra-client.ts";
 export { ChatView } from "./chat-view.tsx";
 export { ExportMenu } from "./export-menu.tsx";
+export { MastraAssistant, useMastraAssistant } from "./mastra-assistant.tsx";
+export type {
+  MastraAssistantController,
+  MastraAssistantLauncherOptions,
+  MastraAssistantLauncherPosition,
+  MastraAssistantMode,
+  MastraAssistantProps,
+  MastraAssistantResizeOptions,
+  MastraAssistantSide,
+} from "./mastra-assistant.tsx";
+export type {
+  MastraRequestContextInput,
+  MastraRequestContextSource,
+} from "../support/request-context.ts";
 export { dedupeSuggestions } from "./suggestions.ts";
 export { MastraChat, useMastraChat } from "./mastra-chat.tsx";
 export type { MastraChatProps, UseMastraChatOptions } from "./mastra-chat.tsx";
 export { ThreadSidebar } from "./thread-sidebar.tsx";
 export type { ThreadSidebarProps } from "./thread-sidebar.tsx";
-export { ThreadTabs } from "./thread-tabs.tsx";
-export type { ThreadTabsProps } from "./thread-tabs.tsx";
+export { ThreadActions, ThreadTabs } from "./thread-tabs.tsx";
+export type { ThreadActionsProps, ThreadTabsProps } from "./thread-tabs.tsx";
 export type {
   ApprovalDecision,
   ChatModelOption,