@dbx-tools/ui-mastra 0.9.116 → 0.9.118

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.116";
+export const PACKAGE_VERSION = "0.9.118";
 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

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.116",
-    "@dbx-tools/shared-genie": "^0.9.116",
-    "@dbx-tools/shared-mastra": "^0.9.116",
-    "@dbx-tools/shared-model": "^0.9.116",
-    "@dbx-tools/ui": "^0.9.116",
+    "@dbx-tools/shared-core": "^0.9.118",
+    "@dbx-tools/shared-genie": "^0.9.118",
+    "@dbx-tools/shared-mastra": "^0.9.118",
+    "@dbx-tools/shared-model": "^0.9.118",
+    "@dbx-tools/ui": "^0.9.118",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -49,7 +49,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.116",
+  "version": "0.9.118",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/_model-selector.tsx

@@ -16,6 +16,7 @@ import {
   DropdownMenuTrigger,
   Slider,
   Spinner,
+  useIsMobile,
 } from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useMemo, useState, type ReactNode } from "react";
@@ -185,6 +186,7 @@ export const ModelSelector = ({
   onModelChange,
   actions,
 }: ModelSelectorProps) => {
+  const isMobile = useIsMobile();
   const [open, setOpen] = useState(false);
   const [modelPickerOpen, setModelPickerOpen] = useState(false);
   const [activeFamily, setActiveFamily] = useState<string>();
@@ -242,50 +244,102 @@ export const ModelSelector = ({
           )}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-48">
-        <DropdownMenuSub
-          open={modelPickerOpen}
-          onOpenChange={(next) => {
-            if (!next && open) return;
-            setModelPickerOpen(next);
-            if (!next) setActiveFamily(undefined);
-          }}
-        >
-          <DropdownMenuSubTrigger className="mx-1 justify-center rounded-lg bg-accent/60 px-3 py-2 text-xs font-medium">
-            {showLoading ? (
+      <DropdownMenuContent
+        align="end"
+        collisionPadding={8}
+        className="w-48 max-w-[calc(100vw_-_1rem)]"
+      >
+        {isMobile && modelPickerOpen ? (
+          <>
+            {!activeFamily && (
               <>
-                <Spinner className="size-3 shrink-0" />
-                <span className="sr-only">Loading default model</span>
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs font-medium outline-none hover:bg-accent focus-visible:bg-accent"
+                  onClick={() => setModelPickerOpen(false)}
+                >
+                  <ChevronLeftIcon className="size-3" />
+                  Options
+                </button>
+                <DropdownMenuSeparator />
               </>
+            )}
+            <FamilyPicker
+              families={families}
+              selectedModelId={selectedModelId}
+              model={model}
+              defaultModelName={defaultModelName}
+              showLoading={showLoading}
+              activeFamily={activeFamily}
+              onActiveFamilyChange={setActiveFamily}
+              onModelChange={onModelChange}
+            />
+          </>
+        ) : (
+          <>
+            {isMobile ? (
+              <button
+                type="button"
+                className="mx-1 flex w-[calc(100%_-_0.5rem)] items-center rounded-lg bg-accent/60 px-3 py-2 text-xs font-medium outline-none hover:bg-accent focus-visible:bg-accent"
+                onClick={() => setModelPickerOpen(true)}
+              >
+                {showLoading ? (
+                  <>
+                    <Spinner className="size-3 shrink-0" />
+                    <span className="sr-only">Loading default model</span>
+                  </>
+                ) : (
+                  <span className="truncate">{triggerLabel}</span>
+                )}
+                <ChevronRightIcon className="ml-auto size-3 shrink-0 text-muted-foreground" />
+              </button>
             ) : (
-              triggerLabel
+              <DropdownMenuSub
+                open={modelPickerOpen}
+                onOpenChange={(next) => {
+                  if (!next && open) return;
+                  setModelPickerOpen(next);
+                  if (!next) setActiveFamily(undefined);
+                }}
+              >
+                <DropdownMenuSubTrigger className="mx-1 justify-center rounded-lg bg-accent/60 px-3 py-2 text-xs font-medium">
+                  {showLoading ? (
+                    <>
+                      <Spinner className="size-3 shrink-0" />
+                      <span className="sr-only">Loading default model</span>
+                    </>
+                  ) : (
+                    triggerLabel
+                  )}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent collisionPadding={8} className="w-48">
+                    <FamilyPicker
+                      families={families}
+                      selectedModelId={selectedModelId}
+                      model={model}
+                      defaultModelName={defaultModelName}
+                      showLoading={showLoading}
+                      activeFamily={activeFamily}
+                      onActiveFamilyChange={setActiveFamily}
+                      onModelChange={onModelChange}
+                    />
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            )}
+            {(actions || (reasoningEfforts.length > 0 && onReasoningEffortChange)) && (
+              <DropdownMenuSeparator />
             )}
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent className="w-48">
-              <FamilyPicker
-                families={families}
-                selectedModelId={selectedModelId}
-                model={model}
-                defaultModelName={defaultModelName}
-                showLoading={showLoading}
-                activeFamily={activeFamily}
-                onActiveFamilyChange={setActiveFamily}
-                onModelChange={onModelChange}
+            {actions && <div className="px-1">{actions}</div>}
+            {reasoningEfforts.length > 0 && onReasoningEffortChange && (
+              <ReasoningControl
+                efforts={reasoningEfforts}
+                value={reasoningEffort}
+                onChange={onReasoningEffortChange}
               />
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        {(actions || (reasoningEfforts.length > 0 && onReasoningEffortChange)) && (
-          <DropdownMenuSeparator />
-        )}
-        {actions && <div className="px-1">{actions}</div>}
-        {reasoningEfforts.length > 0 && onReasoningEffortChange && (
-          <ReasoningControl
-            efforts={reasoningEfforts}
-            value={reasoningEffort}
-            onChange={onReasoningEffortChange}
-          />
+            )}
+          </>
         )}
       </DropdownMenuContent>
     </DropdownMenu>

package/src/react/bubbles.tsx

@@ -22,7 +22,6 @@ import {
   CopyIcon,
   MessageSquareIcon,
   RefreshCcwIcon,
-  SparklesIcon,
   UserIcon,
   XIcon,
 } from "lucide-react";
@@ -60,12 +59,12 @@ const getReasoningText = (parts: UIMessage["parts"]): string =>
     .filter((p): p is { type: "reasoning"; text: string } => p.type === "reasoning")
     .map((p) => compactReasoningText(p.text))
     .filter(Boolean)
-    .join("\n\n");
+    .join("\n");
 
-const RoleAvatar = ({ role }: { role: UIMessage["role"] }) => (
+const UserAvatar = () => (
   <Avatar className="size-7">
     <AvatarFallback>
-      {role === "assistant" ? <SparklesIcon className="size-4" /> : <UserIcon className="size-4" />}
+      <UserIcon className="size-4" />
     </AvatarFallback>
   </Avatar>
 );
@@ -363,7 +362,7 @@ export const AssistantBubble = ({
   const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events, terminalToolState);
   const reasoning = [getReasoningText(message.parts), genieReasoningText(toolEvents)]
     .filter(Boolean)
-    .join("\n\n");
+    .join("\n");
   const isReasoningStreaming =
     isLast &&
     status === "streaming" &&
@@ -405,10 +404,7 @@ export const AssistantBubble = ({
   // nothing so the prose flows unaffected. Suggested questions
   // stay gated on settle to avoid pop-in mid-stream.
   return (
-    <Item className="items-start gap-2.5 border-none bg-transparent p-0">
-      <ItemMedia>
-        <RoleAvatar role="assistant" />
-      </ItemMedia>
+    <Item className="items-start gap-0 border-none bg-transparent p-0">
       {/*
        * `min-w-0` is required so wide content (markdown tables, long
        * code blocks) can shrink to fit instead of pushing the whole
@@ -432,7 +428,7 @@ export const AssistantBubble = ({
             </CollapsibleTrigger>
             <CollapsibleContent>
               <div className="mt-1 border-l-2 border-border/60 pl-2.5 text-xs text-muted-foreground">
-                <ToolMarkdown>{reasoning}</ToolMarkdown>
+                <ToolMarkdown className="prose-p:my-0 [&_p]:!my-0">{reasoning}</ToolMarkdown>
               </div>
             </CollapsibleContent>
           </Collapsible>
@@ -540,7 +536,7 @@ export const UserBubble = ({ message }: { message: UIMessage }) => {
   return (
     <Item className="items-start gap-2.5 border-none bg-transparent p-0">
       <ItemMedia>
-        <RoleAvatar role="user" />
+        <UserAvatar />
       </ItemMedia>
       <ItemContent className="min-w-0">
         <div className="max-w-full rounded-lg bg-muted p-2 text-sm">

package/src/react/markdown.tsx

@@ -264,7 +264,7 @@ export const AssistantMarkdown = ({
  * (bold) gets the foreground color so KPI names still pop against
  * the muted body.
  */
-export const ToolMarkdown = ({ children }: { children: string }) => (
+export const ToolMarkdown = ({ children, className }: { children: string; className?: string }) => (
   <Streamdown
     components={TOOL_MARKDOWN_COMPONENTS}
     plugins={SHIKI_PLUGIN}
@@ -272,12 +272,13 @@ export const ToolMarkdown = ({ children }: { children: string }) => (
     className={cn(
       "prose prose-sm dark:prose-invert max-w-none break-words",
       "text-xs leading-snug text-muted-foreground",
-      "prose-p:my-0.5 prose-p:leading-snug",
+      "prose-p:my-0.5 prose-p:leading-snug [&_p]:!leading-snug",
       "prose-ul:my-0.5 prose-ul:pl-4 prose-ol:my-0.5 prose-ol:pl-4",
       "prose-li:my-0 prose-li:leading-snug prose-li:marker:text-muted-foreground/60",
       "prose-headings:my-1 prose-headings:text-xs prose-headings:font-semibold",
       "prose-strong:text-foreground/90 prose-strong:font-medium",
       "prose-code:text-xs prose-code:font-medium",
+      className,
     )}
   >
     {children}

package/src/react/tool-pill.tsx

@@ -11,7 +11,7 @@ import {
   cn,
 } from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
-import { SourceBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
+import { SourceBlock, ToolMarkdown } from "./markdown.tsx";
 import type { ToolEvent, ToolProgress } from "./types.ts";
 
 // Consolidated tool-session pill and its Genie progress detail view:
@@ -304,16 +304,20 @@ const MessageGroupBody = ({
             ) : null}
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="flex flex-col gap-2 border-t border-border/50 px-2 pb-2 pt-2 text-xs">
-              {bucket.query && (
-                <>
-                  <SqlBlock sql={bucket.query.sql} />
-                  {bucket.query.description && (
+            {bucket.query && (
+              <>
+                <SourceBlock
+                  source={bucket.query.sql}
+                  language="sql"
+                  className="max-h-64 border-t border-border/50 px-2 py-1.5 text-foreground"
+                />
+                {bucket.query.description && (
+                  <div className="border-t border-border/50 px-2 py-1.5">
                     <ToolMarkdown>{bucket.query.description}</ToolMarkdown>
-                  )}
-                </>
-              )}
-            </div>
+                  </div>
+                )}
+              </>
+            )}
           </CollapsibleContent>
         </Collapsible>
       ))}
@@ -608,15 +612,18 @@ const ToolCallDetails = ({
     "input" in event ? toolInputPresentation(event.toolName, event.input) : undefined;
   const outputPresentation =
     "output" in event ? toolOutputPresentation(event.toolName, event.output) : undefined;
+  const isAskGenie = event.toolName.startsWith("ask_genie");
 
   return (
     <div className="flex flex-col gap-2">
       {showQuestion && question ? (
-        <p className="break-words px-0.5 text-xs italic text-foreground/80">{question}</p>
+        <p className="break-words px-0.5 text-[11px] leading-snug text-muted-foreground">
+          {question}
+        </p>
       ) : null}
       {inputPresentation ? (
         <ToolInputSource presentation={inputPresentation} />
-      ) : "input" in event ? (
+      ) : "input" in event && !isAskGenie ? (
         <RawToolPayload label="Request" value={event.input} />
       ) : null}
       <WebSearchProgressDetails event={event} />
@@ -667,7 +674,9 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {verb}
       </span>
       {question && (
-        <span className="mt-0.5 block break-words italic text-foreground/80">{question}</span>
+        <span className="mt-0.5 block break-words text-[11px] leading-snug text-foreground/75">
+          {question}
+        </span>
       )}
     </span>
   );