@dbx-tools/ui-mastra 0.6.211 → 0.6.212

package/src/react/chat-composer.tsx

@@ -0,0 +1,419 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Spinner,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn,
+} from "@dbx-tools/ui-appkit/react";
+import {
+  GripVerticalIcon,
+  SendHorizontalIcon,
+  SendIcon,
+  SquareIcon,
+  Trash2Icon,
+  XIcon,
+} from "lucide-react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { ExportMenu } from "./export-menu.tsx";
+import { SuggestionPills } from "./suggestion-pills.tsx";
+import type { ChatViewProps } from "./types.ts";
+
+const DEFAULT_MODEL_VALUE = "__default__";
+
+type QueuedSteerListProps = {
+  queuedSteers: NonNullable<ChatViewProps["queuedSteers"]>;
+  onSendSteerNow: ChatViewProps["onSendSteerNow"];
+  onRemoveSteer: ChatViewProps["onRemoveSteer"];
+  onReorderSteers: ChatViewProps["onReorderSteers"];
+};
+
+const QueuedSteerList = ({
+  queuedSteers,
+  onSendSteerNow,
+  onRemoveSteer,
+  onReorderSteers,
+}: QueuedSteerListProps) => {
+  const [draggingSteerId, setDraggingSteerId] = useState<string | null>(null);
+  const steerChipRefs = useRef(new Map<string, HTMLDivElement>());
+  const draggingIdRef = useRef<string | null>(null);
+  const queuedSteersRef = useRef(queuedSteers);
+  queuedSteersRef.current = queuedSteers;
+
+  const reorderSteersByPointer = useCallback(
+    (draggingId: string, pointerY: number) => {
+      if (!onReorderSteers) return;
+      const order = queuedSteersRef.current.map((steer) => steer.id);
+      const rest = order.filter((id) => id !== draggingId);
+      let insertAt = rest.length;
+      for (let index = 0; index < rest.length; index += 1) {
+        const chip = steerChipRefs.current.get(rest[index]);
+        if (!chip) continue;
+        const bounds = chip.getBoundingClientRect();
+        if (pointerY < bounds.top + bounds.height / 2) {
+          insertAt = index;
+          break;
+        }
+      }
+      const next = [...rest];
+      next.splice(insertAt, 0, draggingId);
+      if (next.length === order.length && next.every((id, index) => id === order[index])) return;
+      onReorderSteers(next);
+    },
+    [onReorderSteers],
+  );
+
+  if (queuedSteers.length === 0) return null;
+
+  return (
+    <div className="mb-2 flex flex-col gap-1">
+      {queuedSteers.map((steer) => {
+        const reorderable = Boolean(onReorderSteers);
+        return (
+          <div
+            key={steer.id}
+            ref={(element) => {
+              if (element) steerChipRefs.current.set(steer.id, element);
+              else steerChipRefs.current.delete(steer.id);
+            }}
+            className={cn(
+              "flex items-center gap-1.5 rounded-lg border border-border/70 bg-muted/40 px-2 py-1 text-xs",
+              draggingSteerId === steer.id && "opacity-50",
+            )}
+          >
+            {reorderable && (
+              <span
+                role="button"
+                tabIndex={-1}
+                aria-label="Drag to reorder"
+                className="-m-1 shrink-0 cursor-grab touch-none p-1 text-muted-foreground active:cursor-grabbing"
+                onPointerDown={(event) => {
+                  event.preventDefault();
+                  event.currentTarget.setPointerCapture(event.pointerId);
+                  draggingIdRef.current = steer.id;
+                  setDraggingSteerId(steer.id);
+                }}
+                onPointerMove={(event) => {
+                  if (draggingIdRef.current !== steer.id) return;
+                  reorderSteersByPointer(steer.id, event.clientY);
+                }}
+                onPointerUp={(event) => {
+                  event.currentTarget.releasePointerCapture(event.pointerId);
+                  draggingIdRef.current = null;
+                  setDraggingSteerId(null);
+                }}
+                onPointerCancel={() => {
+                  draggingIdRef.current = null;
+                  setDraggingSteerId(null);
+                }}
+              >
+                <GripVerticalIcon className="size-3" aria-hidden="true" />
+              </span>
+            )}
+            <span className="text-muted-foreground">Queued</span>
+            <span className="min-w-0 flex-1 truncate">{steer.text}</span>
+            {onSendSteerNow && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6 shrink-0"
+                    onClick={() => onSendSteerNow(steer.id)}
+                    aria-label="Send now (interrupts current turn)"
+                  >
+                    <SendHorizontalIcon className="size-3" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Send now - interrupts</TooltipContent>
+              </Tooltip>
+            )}
+            {onRemoveSteer && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6 shrink-0"
+                    onClick={() => onRemoveSteer(steer.id)}
+                    aria-label="Remove queued message"
+                  >
+                    <XIcon className="size-3" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Remove</TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+type ClearConversationActionProps = {
+  onClear: NonNullable<ChatViewProps["onClear"]>;
+  isLoadingHistory: NonNullable<ChatViewProps["isLoadingHistory"]>;
+};
+
+const ClearConversationAction = ({ onClear, isLoadingHistory }: ClearConversationActionProps) => {
+  const [open, setOpen] = useState(false);
+  const [clearing, setClearing] = useState(false);
+
+  const handleConfirm = async () => {
+    if (clearing) return;
+    setClearing(true);
+    try {
+      await onClear();
+      setOpen(false);
+    } finally {
+      setClearing(false);
+    }
+  };
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setOpen(true)}
+            disabled={isLoadingHistory}
+            className="h-7 gap-1 rounded-full px-2.5 text-xs [&_svg]:size-3"
+          >
+            <Trash2Icon className="size-3" />
+            Clear
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Clear chat history for this thread</TooltipContent>
+      </Tooltip>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Clear this conversation?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently deletes the chat history for this thread. This can&apos;t be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={clearing}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                void handleConfirm();
+              }}
+              disabled={clearing}
+            >
+              {clearing ? <Spinner className="size-3" /> : null}
+              {clearing ? "Clearing..." : "Clear"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+type ChatComposerProps = {
+  isEmpty: boolean;
+  status: ChatViewProps["status"];
+  sendMessage: ChatViewProps["sendMessage"];
+  queuedSteers: NonNullable<ChatViewProps["queuedSteers"]>;
+  onSendSteerNow: ChatViewProps["onSendSteerNow"];
+  onRemoveSteer: ChatViewProps["onRemoveSteer"];
+  onReorderSteers: ChatViewProps["onReorderSteers"];
+  onStop: ChatViewProps["onStop"];
+  suggestions: NonNullable<ChatViewProps["suggestions"]>;
+  models: ChatViewProps["models"];
+  model: ChatViewProps["model"];
+  onModelChange: ChatViewProps["onModelChange"];
+  defaultModelName: ChatViewProps["defaultModelName"];
+  isLoadingHistory: NonNullable<ChatViewProps["isLoadingHistory"]>;
+  onClear: ChatViewProps["onClear"];
+  onExportConversation: ChatViewProps["onExportConversation"];
+  onResumeFollow: () => void;
+};
+
+/** Internal message composer with queued steers and conversation actions. */
+export const ChatComposer = ({
+  isEmpty,
+  status,
+  sendMessage,
+  queuedSteers,
+  onSendSteerNow,
+  onRemoveSteer,
+  onReorderSteers,
+  onStop,
+  suggestions,
+  models,
+  model,
+  onModelChange,
+  defaultModelName,
+  isLoadingHistory,
+  onClear,
+  onExportConversation,
+  onResumeFollow,
+}: ChatComposerProps) => {
+  const [input, setInput] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const element = textareaRef.current;
+    if (!element) return;
+    element.style.height = "auto";
+    element.style.height = `${element.scrollHeight}px`;
+  }, [input]);
+
+  const isRunning = status === "submitted" || status === "streaming";
+  const submit = () => {
+    const text = input.trim();
+    if (!text || isLoadingHistory) return;
+    sendMessage({ text });
+    setInput("");
+    onResumeFollow();
+  };
+
+  const showModelDisplay = Boolean(onModelChange);
+  const modelChangeable = Boolean(models && models.length > 0);
+  const defaultOptionLabel = defaultModelName || "Default";
+  const currentModelLabel =
+    (model ? models?.find((option) => option.name === model)?.displayName : undefined) ||
+    defaultOptionLabel;
+  const sortedModels = [...(models ?? [])].sort((left, right) =>
+    (left.displayName || left.name).localeCompare(right.displayName || right.name, undefined, {
+      sensitivity: "base",
+    }),
+  );
+  const showToolbar = showModelDisplay || Boolean(onExportConversation) || Boolean(onClear);
+
+  return (
+    <>
+      {isEmpty && (
+        <SuggestionPills
+          questions={suggestions}
+          onSelect={(text) => sendMessage({ text })}
+          disabled={isLoadingHistory}
+          className="mx-auto w-full max-w-4xl px-4 pb-2 md:px-6"
+        />
+      )}
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+        className="mx-auto w-full max-w-4xl px-3 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-6"
+      >
+        <QueuedSteerList
+          queuedSteers={queuedSteers}
+          onSendSteerNow={onSendSteerNow}
+          onRemoveSteer={onRemoveSteer}
+          onReorderSteers={onReorderSteers}
+        />
+        <InputGroup className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md">
+          <InputGroupTextarea
+            ref={textareaRef}
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                submit();
+              }
+            }}
+            placeholder={isLoadingHistory ? "Loading history..." : "Send a message..."}
+            rows={1}
+            disabled={isLoadingHistory}
+            className="max-h-48 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)
+                  }
+                  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"
+                  >
+                    <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-[200px] truncate px-2.5 text-xs text-muted-foreground">
+                  {currentModelLabel}
+                </span>
+              ))}
+            {onExportConversation && (
+              <ExportMenu
+                onExport={(format) => void onExportConversation(format)}
+                tooltip="Export conversation"
+                disabled={isLoadingHistory}
+              />
+            )}
+            {onClear && (
+              <ClearConversationAction onClear={onClear} isLoadingHistory={isLoadingHistory} />
+            )}
+          </div>
+        )}
+      </form>
+    </>
+  );
+};

package/src/react/chat-feedback.ts

@@ -0,0 +1,60 @@
+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";
+
+const logger = log.logger("ui-mastra/chat");
+
+interface UseChatFeedbackOptions {
+  activeKey: string;
+  feedbackByMessage: Record<string, MessageFeedback>;
+  mastraClient: MastraPluginClient;
+  updateSession: ThreadSessionUpdater;
+}
+
+/** Submit trace-scoped MLflow feedback with optimistic thumbs state. */
+export function useChatFeedback({
+  activeKey,
+  feedbackByMessage,
+  mastraClient,
+  updateSession,
+}: UseChatFeedbackOptions) {
+  const feedbackByMessageRef = useRef<Record<string, MessageFeedback>>({});
+  feedbackByMessageRef.current = feedbackByMessage;
+
+  return useCallback(
+    async (message: UIMessage, submission: FeedbackSubmission) => {
+      const traceId = feedbackByMessageRef.current[message.id]?.traceId;
+      if (!traceId) return;
+      if (submission.value) {
+        updateSession(activeKey, (session) => ({
+          ...session,
+          feedbackByMessage: {
+            ...session.feedbackByMessage,
+            [message.id]: { traceId, value: submission.value },
+          },
+        }));
+      }
+      try {
+        const result = await mastraClient.feedback({
+          traceId,
+          ...(submission.value !== undefined ? { value: submission.value === "up" } : {}),
+          ...(submission.comment ? { comment: submission.comment } : {}),
+        });
+        if (!result.ok) {
+          logger.warn("feedback not recorded (trace may still be exporting)", {
+            traceId,
+          });
+        }
+      } catch (error) {
+        logger.error("feedback error", {
+          traceId,
+          error: sharedError.errorMessage(error),
+        });
+      }
+    },
+    [activeKey, mastraClient, updateSession],
+  );
+}

package/src/react/chat-history.ts

@@ -0,0 +1,141 @@
+import { error as sharedError, log } from "@dbx-tools/shared-core";
+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";
+
+const HISTORY_PAGE_SIZE = 20;
+const logger = log.logger("ui-mastra/chat");
+
+interface UseChatHistoryOptions {
+  activeKey: string;
+  activeThreadId: string | undefined;
+  agentId: string;
+  getSession: ThreadSessionReader;
+  mastraClient: MastraPluginClient;
+  updateSession: ThreadSessionUpdater;
+  writeMessages: ThreadMessageWriter;
+}
+
+/** Hydrate and page the active thread while other thread sessions keep running. */
+export function useChatHistory({
+  activeKey,
+  activeThreadId,
+  agentId,
+  getSession,
+  mastraClient,
+  updateSession,
+  writeMessages,
+}: UseChatHistoryOptions) {
+  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+  const [loadingMoreThreads, setLoadingMoreThreads] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const historyInFlightRef = useRef(new Set<string>());
+
+  useEffect(() => {
+    const threadId = activeKey;
+    const session = getSession(threadId);
+    if (session.historyLoaded) {
+      setIsLoadingHistory(false);
+      return;
+    }
+
+    let cancelled = false;
+    const controller = new AbortController();
+    historyInFlightRef.current.add(threadId);
+    setIsLoadingHistory(true);
+    mastraClient
+      .history({
+        agentId,
+        threadId: activeThreadId,
+        page: 0,
+        perPage: HISTORY_PAGE_SIZE,
+        signal: controller.signal,
+      })
+      .then((response) => {
+        if (cancelled) return;
+        updateSession(threadId, (current) => ({
+          ...current,
+          messages: response.uiMessages as unknown as UIMessage[],
+          historyLoaded: true,
+          hasMoreHistory: response.hasMore,
+          historyPage: 1,
+          toolEventsByMessage: {},
+          pendingApprovalsByMessage: {},
+          feedbackByMessage: {},
+        }));
+      })
+      .catch((error: unknown) => {
+        if (cancelled || (error as { name?: string }).name === "AbortError") return;
+        logger.error("history load error", {
+          error: sharedError.errorMessage(error),
+        });
+        updateSession(threadId, (current) => ({
+          ...current,
+          historyLoaded: true,
+          hasMoreHistory: false,
+        }));
+      })
+      .finally(() => {
+        historyInFlightRef.current.delete(threadId);
+        if (!cancelled) setIsLoadingHistory(false);
+      });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [activeKey, activeThreadId, agentId, getSession, mastraClient, updateSession]);
+
+  const loadOlderHistory = useCallback(() => {
+    const threadId = activeKey;
+    const session = getSession(threadId);
+    if (historyInFlightRef.current.has(threadId) || !session.hasMoreHistory) return;
+    historyInFlightRef.current.add(threadId);
+    setLoadingMoreThreads((current) => new Set(current).add(threadId));
+    const page = session.historyPage;
+    updateSession(threadId, (current) => ({ ...current, historyPage: page + 1 }));
+    mastraClient
+      .history({ agentId, threadId: activeThreadId, page, perPage: HISTORY_PAGE_SIZE })
+      .then((response) => {
+        const uiMessages = response.uiMessages as unknown as UIMessage[];
+        if (uiMessages.length > 0) {
+          writeMessages(threadId, [...uiMessages, ...getSession(threadId).messages]);
+        }
+        updateSession(threadId, (current) => ({
+          ...current,
+          hasMoreHistory: response.hasMore,
+        }));
+      })
+      .catch((error: unknown) => {
+        logger.error("history load-more error", {
+          page,
+          error: sharedError.errorMessage(error),
+        });
+        updateSession(threadId, (current) => ({
+          ...current,
+          historyPage: page,
+          hasMoreHistory: false,
+        }));
+      })
+      .finally(() => {
+        historyInFlightRef.current.delete(threadId);
+        setLoadingMoreThreads((current) => {
+          if (!current.has(threadId)) return current;
+          const next = new Set(current);
+          next.delete(threadId);
+          return next;
+        });
+      });
+  }, [activeKey, activeThreadId, agentId, getSession, mastraClient, updateSession, writeMessages]);
+
+  return {
+    isLoadingHistory,
+    isLoadingMore: loadingMoreThreads.has(activeKey),
+    loadOlderHistory,
+  };
+}

package/src/react/chat-sessions.ts

@@ -0,0 +1,76 @@
+import type { UIMessage } from "ai";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  createThreadSession,
+  DEFAULT_THREAD_SESSION_KEY,
+  isSessionRunning,
+  sessionKey,
+  type ThreadSession,
+} from "../support/thread-sessions.ts";
+
+export type ThreadSessionReader = (threadId: string) => ThreadSession;
+
+export type ThreadSessionUpdater = (
+  threadId: string,
+  updater: (session: ThreadSession) => ThreadSession,
+) => void;
+
+export type ThreadMessageWriter = (threadId: string, messages: UIMessage[]) => void;
+
+/** Own the mutable per-thread session registry behind the public chat hook. */
+export function useChatSessions(activeThreadId: string | undefined) {
+  const [revision, setRevision] = useState(0);
+  const sessionsRef = useRef<Map<string, ThreadSession>>(new Map());
+  const getSession = useCallback<ThreadSessionReader>((threadId) => {
+    let session = sessionsRef.current.get(threadId);
+    if (!session) {
+      session = createThreadSession();
+      sessionsRef.current.set(threadId, session);
+    }
+    return session;
+  }, []);
+  const updateSession = useCallback<ThreadSessionUpdater>(
+    (threadId, updater) => {
+      sessionsRef.current.set(threadId, updater(getSession(threadId)));
+      setRevision((current) => current + 1);
+    },
+    [getSession],
+  );
+  const writeMessages = useCallback<ThreadMessageWriter>(
+    (threadId, messages) => {
+      updateSession(threadId, (session) => ({ ...session, messages }));
+    },
+    [updateSession],
+  );
+  const resetSession = useCallback((threadId: string, historyLoaded = false) => {
+    sessionsRef.current.get(threadId)?.abortController?.abort();
+    sessionsRef.current.set(threadId, { ...createThreadSession(), historyLoaded });
+    setRevision((current) => current + 1);
+  }, []);
+  const removeSession = useCallback((threadId: string) => {
+    sessionsRef.current.get(threadId)?.abortController?.abort();
+    sessionsRef.current.delete(threadId);
+    setRevision((current) => current + 1);
+  }, []);
+  const activeKey = sessionKey(activeThreadId);
+  const activeSession = useMemo(() => getSession(activeKey), [activeKey, getSession, revision]);
+  const streamingThreadIds = useMemo(() => {
+    const ids: string[] = [];
+    for (const [id, session] of sessionsRef.current.entries()) {
+      if (id === DEFAULT_THREAD_SESSION_KEY) continue;
+      if (isSessionRunning(session)) ids.push(id);
+    }
+    return ids;
+  }, [revision]);
+
+  return {
+    activeKey,
+    activeSession,
+    getSession,
+    removeSession,
+    resetSession,
+    streamingThreadIds,
+    updateSession,
+    writeMessages,
+  };
+}