@btst/stack 1.4.0 → 1.4.1

package/src/plugins/ai-chat/client/components/tool-call-display.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@workspace/ui/components/accordion";
+import { MarkdownContent } from "@workspace/ui/components/markdown-content";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { cn } from "@workspace/ui/lib/utils";
+import { Wrench, Check, AlertCircle, Loader2 } from "lucide-react";
+import type { ToolCallProps, ToolCallState } from "../overrides";
+
+/**
+ * Formats a tool name for display (converts camelCase/snake_case to Title Case)
+ */
+function formatToolName(name: string): string {
+	return (
+		name
+			// Insert space before uppercase letters (camelCase)
+			.replace(/([A-Z])/g, " $1")
+			// Replace underscores and hyphens with spaces
+			.replace(/[_-]/g, " ")
+			// Capitalize first letter of each word
+			.replace(/\b\w/g, (char) => char.toUpperCase())
+			.trim()
+	);
+}
+
+/**
+ * Returns the appropriate status icon based on tool call state
+ */
+function getStatusIcon(state: ToolCallState, isLoading: boolean) {
+	if (isLoading || state === "input-streaming" || state === "input-available") {
+		return (
+			<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+		);
+	}
+	if (state === "output-error") {
+		return <AlertCircle className="h-3.5 w-3.5 text-destructive" />;
+	}
+	if (state === "output-available") {
+		return <Check className="h-3.5 w-3.5 text-green-500" />;
+	}
+	return <Wrench className="h-3.5 w-3.5 text-muted-foreground" />;
+}
+
+/**
+ * Returns a human-readable status label based on tool call state
+ */
+function getStatusLabel(state: ToolCallState, isLoading: boolean): string {
+	if (isLoading || state === "input-streaming") {
+		return "Running...";
+	}
+	if (state === "input-available") {
+		return "Executing...";
+	}
+	if (state === "output-error") {
+		return "Error";
+	}
+	if (state === "output-available") {
+		return "Complete";
+	}
+	return "Pending";
+}
+
+interface JsonDisplayProps {
+	data: unknown;
+	label: string;
+}
+
+/**
+ * Renders JSON data using MarkdownContent with syntax highlighting
+ */
+function JsonDisplay({ data, label }: JsonDisplayProps) {
+	if (data === undefined || data === null) {
+		return null;
+	}
+
+	// Format JSON with proper indentation
+	let jsonString: string;
+	try {
+		jsonString = JSON.stringify(data, null, 2);
+	} catch {
+		jsonString = String(data);
+	}
+
+	// Wrap in markdown code fence for syntax highlighting
+	const markdown = `\`\`\`json\n${jsonString}\n\`\`\``;
+
+	return (
+		<div className="space-y-1">
+			<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+				{label}
+			</span>
+			<div className="[&_.markdown-code-block]:my-0 [&_.markdown-code-block]:max-h-48 [&_.markdown-code-block_.code-content]:max-h-40 [&_.markdown-code-block_.code-content]:overflow-y-auto">
+				<MarkdownContent markdown={markdown} variant="chat" />
+			</div>
+		</div>
+	);
+}
+
+/**
+ * Default tool call display component.
+ * Shows an accordion with tool name, status, inputs, and outputs.
+ */
+export function ToolCallDisplay({
+	toolCallId,
+	toolName,
+	state,
+	input,
+	output,
+	errorText,
+	isLoading,
+}: ToolCallProps) {
+	const displayName = formatToolName(toolName);
+	const statusLabel = getStatusLabel(state, isLoading);
+	const statusIcon = getStatusIcon(state, isLoading);
+
+	const isComplete = state === "output-available" || state === "output-error";
+	const hasError = state === "output-error";
+
+	return (
+		<Accordion type="single" collapsible className="w-full">
+			<AccordionItem
+				value={toolCallId}
+				className={cn(
+					"!border rounded-lg overflow-hidden transition-colors",
+					hasError && "border-destructive/50",
+					!hasError && isComplete && "border-green-500/30",
+					!isComplete && "border-border/50",
+				)}
+			>
+				<AccordionTrigger
+					className={cn("px-3 py-2 hover:no-underline hover:bg-muted/50")}
+				>
+					<div className="flex items-center gap-2 w-full">
+						<Wrench className="h-4 w-4 text-muted-foreground shrink-0" />
+						<span className="text-sm font-medium truncate text-left">
+							{displayName}
+						</span>
+						<span className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+							{statusIcon}
+							<span className="sr-only">{statusLabel}</span>
+						</span>
+					</div>
+				</AccordionTrigger>
+
+				<AccordionContent className="px-3 pb-3 pt-0">
+					<div className="space-y-3 border-t border-border/50 pt-3">
+						{/* Loading skeleton when input is streaming */}
+						{state === "input-streaming" && !input && (
+							<div className="space-y-2">
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-16 w-full" />
+							</div>
+						)}
+
+						{/* Input section */}
+						{input !== undefined && <JsonDisplay data={input} label="Input" />}
+
+						{/* Output section */}
+						{state === "output-available" && output !== undefined && (
+							<JsonDisplay data={output} label="Output" />
+						)}
+
+						{/* Error section */}
+						{state === "output-error" && errorText && (
+							<div className="space-y-1">
+								<span className="text-xs font-medium text-destructive uppercase tracking-wide">
+									Error
+								</span>
+								<div className="text-xs text-destructive bg-destructive/10 p-2 rounded-md">
+									{errorText}
+								</div>
+							</div>
+						)}
+
+						{/* Loading skeleton for output */}
+						{(state === "input-available" || state === "input-streaming") && (
+							<div className="space-y-2">
+								<Skeleton className="h-4 w-20" />
+								<Skeleton className="h-12 w-full" />
+							</div>
+						)}
+
+						{/* Tool call ID for debugging (collapsed by default) */}
+						<div className="text-[10px] text-muted-foreground/50 truncate">
+							ID: {toolCallId}
+						</div>
+					</div>
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	);
+}

package/src/plugins/ai-chat/client/index.ts

@@ -5,10 +5,21 @@ export type {
 	RouteContext,
 	LoaderContext,
 } from "./plugin";
-export type { AiChatPluginOverrides, AllowedFileType } from "./overrides";
+export type {
+	AiChatPluginOverrides,
+	AllowedFileType,
+	ToolCallProps,
+	ToolCallState,
+	ToolCallRenderer,
+} from "./overrides";
 export { DEFAULT_ALLOWED_FILE_TYPES } from "./overrides";
 export { ChatInterface } from "./components/chat-interface";
 export { ChatLayout } from "./components/chat-layout";
+export type { ChatLayoutProps } from "./components/chat-layout";
 export { ChatSidebar } from "./components/chat-sidebar";
 export { ChatMessage } from "./components/chat-message";
 export { ChatInput } from "./components/chat-input";
+export { ToolCallDisplay } from "./components/tool-call-display";
+
+// Re-export UIMessage type from AI SDK for consumer convenience
+export type { UIMessage } from "ai";

package/src/plugins/ai-chat/client/overrides.ts

@@ -8,6 +8,44 @@ import type { AiChatLocalization } from "./localization";
  */
 export type AiChatMode = "authenticated" | "public";
 
+/**
+ * State of a tool call execution
+ */
+export type ToolCallState =
+	| "input-streaming"
+	| "input-available"
+	| "output-available"
+	| "output-error";
+
+/**
+ * Props passed to custom tool call renderer components
+ */
+export interface ToolCallProps<TInput = unknown, TOutput = unknown> {
+	/** Unique identifier for this tool call */
+	toolCallId: string;
+	/** Name of the tool being called */
+	toolName: string;
+	/** Current state of the tool call execution */
+	state: ToolCallState;
+	/** Input arguments passed to the tool (may be partial during streaming) */
+	input: TInput | undefined;
+	/** Output from the tool (only available when state is 'output-available') */
+	output: TOutput | undefined;
+	/** Error message (only available when state is 'output-error') */
+	errorText?: string;
+	/** Whether the tool call is currently in progress */
+	isLoading: boolean;
+}
+
+/**
+ * A component that renders a custom UI for a specific tool call.
+ * Return `null` to fall back to the default tool call accordion.
+ */
+export type ToolCallRenderer<
+	TInput = unknown,
+	TOutput = unknown,
+> = ComponentType<ToolCallProps<TInput, TOutput>>;
+
 /**
  * Allowed file type categories for uploads
  */
@@ -126,6 +164,39 @@ export interface AiChatPluginOverrides {
 	 */
 	showAttribution?: boolean;
 
+	/**
+	 * Suggested prompts to display in the empty chat state.
+	 * When provided, these appear as clickable buttons that populate the input field.
+	 *
+	 * @example
+	 * ```tsx
+	 * chatSuggestions: [
+	 *   "What can you help me with?",
+	 *   "Tell me about your features",
+	 *   "How do I get started?",
+	 * ]
+	 * ```
+	 */
+	chatSuggestions?: string[];
+
+	/**
+	 * Custom renderers for tool calls. Keys should match tool names.
+	 * Each renderer receives ToolCallProps and can return custom UI.
+	 *
+	 * @example
+	 * ```tsx
+	 * toolRenderers: {
+	 *   getWeather: ({ toolName, input, output, state, isLoading }) => (
+	 *     <WeatherCard location={input?.location} weather={output} loading={isLoading} />
+	 *   ),
+	 *   searchDocs: ({ input, output, isLoading }) => (
+	 *     <SearchResults query={input?.query} results={output} loading={isLoading} />
+	 *   ),
+	 * }
+	 * ```
+	 */
+	toolRenderers?: Record<string, ToolCallRenderer>;
+
 	// ============== Lifecycle Hooks (optional) ==============
 
 	/**

package/src/plugins/blog/client/components/shared/markdown-content-styles.css

@@ -158,6 +158,9 @@
 	.markdown-content .markdown-inner .markdown-body .hljs-params {
 		color: #ffb86c;
 	}
+	.markdown-content .markdown-inner .markdown-body .hljs-punctuation {
+		color: #c9d1d9;
+	}
 }
 
 /* Also support Tailwind dark class for dark mode */
@@ -167,6 +170,9 @@
 .dark .markdown-content .markdown-inner .markdown-body .hljs-params {
 	color: #ffb86c;
 }
+.dark .markdown-content .markdown-inner .markdown-body .hljs-punctuation {
+	color: #c9d1d9;
+}
 
 .markdown-content .markdown-inner .markdown-code-block {
 	display: block;

package/dist/shared/stack.DorMi9CZ.d.cts

@@ -1,80 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UIMessage } from 'ai';
-import { FormEvent } from 'react';
-
-interface ChatInterfaceProps {
-    apiPath?: string;
-    initialMessages?: UIMessage[];
-    id?: string;
-    /** Variant: 'full' for full-page layout, 'widget' for embedded widget */
-    variant?: "full" | "widget";
-    className?: string;
-}
-declare function ChatInterface({ apiPath, initialMessages, id, variant, className, }: ChatInterfaceProps): react_jsx_runtime.JSX.Element;
-
-interface ChatLayoutProps {
-    /** API base URL */
-    apiBaseURL: string;
-    /** API base path */
-    apiBasePath: string;
-    /** Current conversation ID (if viewing existing conversation) */
-    conversationId?: string;
-    /** Layout mode: 'full' for full page with sidebar, 'widget' for embeddable widget */
-    layout?: "full" | "widget";
-    /** Additional class name for the container */
-    className?: string;
-    /** Whether to show the sidebar (default: true for full layout) */
-    showSidebar?: boolean;
-    /** Height of the widget (only applies to widget layout) */
-    widgetHeight?: string | number;
-}
-/**
- * ChatLayout component that provides a full-page chat experience with sidebar
- * or a compact widget mode for embedding.
- */
-declare function ChatLayout({ apiBaseURL, apiBasePath, conversationId, layout, className, showSidebar, widgetHeight, }: ChatLayoutProps): react_jsx_runtime.JSX.Element;
-
-interface ChatSidebarProps {
-    currentConversationId?: string;
-    onNewChat?: () => void;
-    className?: string;
-}
-declare function ChatSidebar({ currentConversationId, onNewChat, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
-
-interface ChatMessageProps {
-    message: UIMessage;
-    isStreaming?: boolean;
-    variant?: "default" | "compact";
-    /** Callback when user wants to retry/regenerate an AI response */
-    onRetry?: () => void;
-    /** Callback when user edits their message - receives the new text */
-    onEdit?: (newText: string) => void;
-    /** Whether retry is currently in progress */
-    isRetrying?: boolean;
-}
-declare function ChatMessage({ message, isStreaming, variant, onRetry, onEdit, isRetrying, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
-
-/** Represents an attached file with metadata */
-interface AttachedFile {
-    /** Data URL or uploaded URL */
-    url: string;
-    /** MIME type of the file */
-    mediaType: string;
-    /** Original filename */
-    filename: string;
-}
-interface ChatInputProps {
-    input?: string;
-    handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    handleSubmit: (e: FormEvent<HTMLFormElement>, files?: AttachedFile[]) => void;
-    isLoading: boolean;
-    placeholder?: string;
-    variant?: "default" | "compact";
-    /** Callback when files are attached (for controlled mode) */
-    onFilesAttached?: (files: AttachedFile[]) => void;
-    /** Attached files (for controlled mode) */
-    attachedFiles?: AttachedFile[];
-}
-declare function ChatInput({ input, handleInputChange, handleSubmit, isLoading, placeholder, variant, onFilesAttached, attachedFiles: controlledFiles, }: ChatInputProps): react_jsx_runtime.JSX.Element;
-
-export { ChatInterface as C, ChatLayout as a, ChatSidebar as b, ChatMessage as c, ChatInput as d };

package/dist/shared/stack.DorMi9CZ.d.mts

@@ -1,80 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UIMessage } from 'ai';
-import { FormEvent } from 'react';
-
-interface ChatInterfaceProps {
-    apiPath?: string;
-    initialMessages?: UIMessage[];
-    id?: string;
-    /** Variant: 'full' for full-page layout, 'widget' for embedded widget */
-    variant?: "full" | "widget";
-    className?: string;
-}
-declare function ChatInterface({ apiPath, initialMessages, id, variant, className, }: ChatInterfaceProps): react_jsx_runtime.JSX.Element;
-
-interface ChatLayoutProps {
-    /** API base URL */
-    apiBaseURL: string;
-    /** API base path */
-    apiBasePath: string;
-    /** Current conversation ID (if viewing existing conversation) */
-    conversationId?: string;
-    /** Layout mode: 'full' for full page with sidebar, 'widget' for embeddable widget */
-    layout?: "full" | "widget";
-    /** Additional class name for the container */
-    className?: string;
-    /** Whether to show the sidebar (default: true for full layout) */
-    showSidebar?: boolean;
-    /** Height of the widget (only applies to widget layout) */
-    widgetHeight?: string | number;
-}
-/**
- * ChatLayout component that provides a full-page chat experience with sidebar
- * or a compact widget mode for embedding.
- */
-declare function ChatLayout({ apiBaseURL, apiBasePath, conversationId, layout, className, showSidebar, widgetHeight, }: ChatLayoutProps): react_jsx_runtime.JSX.Element;
-
-interface ChatSidebarProps {
-    currentConversationId?: string;
-    onNewChat?: () => void;
-    className?: string;
-}
-declare function ChatSidebar({ currentConversationId, onNewChat, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
-
-interface ChatMessageProps {
-    message: UIMessage;
-    isStreaming?: boolean;
-    variant?: "default" | "compact";
-    /** Callback when user wants to retry/regenerate an AI response */
-    onRetry?: () => void;
-    /** Callback when user edits their message - receives the new text */
-    onEdit?: (newText: string) => void;
-    /** Whether retry is currently in progress */
-    isRetrying?: boolean;
-}
-declare function ChatMessage({ message, isStreaming, variant, onRetry, onEdit, isRetrying, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
-
-/** Represents an attached file with metadata */
-interface AttachedFile {
-    /** Data URL or uploaded URL */
-    url: string;
-    /** MIME type of the file */
-    mediaType: string;
-    /** Original filename */
-    filename: string;
-}
-interface ChatInputProps {
-    input?: string;
-    handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    handleSubmit: (e: FormEvent<HTMLFormElement>, files?: AttachedFile[]) => void;
-    isLoading: boolean;
-    placeholder?: string;
-    variant?: "default" | "compact";
-    /** Callback when files are attached (for controlled mode) */
-    onFilesAttached?: (files: AttachedFile[]) => void;
-    /** Attached files (for controlled mode) */
-    attachedFiles?: AttachedFile[];
-}
-declare function ChatInput({ input, handleInputChange, handleSubmit, isLoading, placeholder, variant, onFilesAttached, attachedFiles: controlledFiles, }: ChatInputProps): react_jsx_runtime.JSX.Element;
-
-export { ChatInterface as C, ChatLayout as a, ChatSidebar as b, ChatMessage as c, ChatInput as d };

package/dist/shared/stack.DorMi9CZ.d.ts

@@ -1,80 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UIMessage } from 'ai';
-import { FormEvent } from 'react';
-
-interface ChatInterfaceProps {
-    apiPath?: string;
-    initialMessages?: UIMessage[];
-    id?: string;
-    /** Variant: 'full' for full-page layout, 'widget' for embedded widget */
-    variant?: "full" | "widget";
-    className?: string;
-}
-declare function ChatInterface({ apiPath, initialMessages, id, variant, className, }: ChatInterfaceProps): react_jsx_runtime.JSX.Element;
-
-interface ChatLayoutProps {
-    /** API base URL */
-    apiBaseURL: string;
-    /** API base path */
-    apiBasePath: string;
-    /** Current conversation ID (if viewing existing conversation) */
-    conversationId?: string;
-    /** Layout mode: 'full' for full page with sidebar, 'widget' for embeddable widget */
-    layout?: "full" | "widget";
-    /** Additional class name for the container */
-    className?: string;
-    /** Whether to show the sidebar (default: true for full layout) */
-    showSidebar?: boolean;
-    /** Height of the widget (only applies to widget layout) */
-    widgetHeight?: string | number;
-}
-/**
- * ChatLayout component that provides a full-page chat experience with sidebar
- * or a compact widget mode for embedding.
- */
-declare function ChatLayout({ apiBaseURL, apiBasePath, conversationId, layout, className, showSidebar, widgetHeight, }: ChatLayoutProps): react_jsx_runtime.JSX.Element;
-
-interface ChatSidebarProps {
-    currentConversationId?: string;
-    onNewChat?: () => void;
-    className?: string;
-}
-declare function ChatSidebar({ currentConversationId, onNewChat, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
-
-interface ChatMessageProps {
-    message: UIMessage;
-    isStreaming?: boolean;
-    variant?: "default" | "compact";
-    /** Callback when user wants to retry/regenerate an AI response */
-    onRetry?: () => void;
-    /** Callback when user edits their message - receives the new text */
-    onEdit?: (newText: string) => void;
-    /** Whether retry is currently in progress */
-    isRetrying?: boolean;
-}
-declare function ChatMessage({ message, isStreaming, variant, onRetry, onEdit, isRetrying, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
-
-/** Represents an attached file with metadata */
-interface AttachedFile {
-    /** Data URL or uploaded URL */
-    url: string;
-    /** MIME type of the file */
-    mediaType: string;
-    /** Original filename */
-    filename: string;
-}
-interface ChatInputProps {
-    input?: string;
-    handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    handleSubmit: (e: FormEvent<HTMLFormElement>, files?: AttachedFile[]) => void;
-    isLoading: boolean;
-    placeholder?: string;
-    variant?: "default" | "compact";
-    /** Callback when files are attached (for controlled mode) */
-    onFilesAttached?: (files: AttachedFile[]) => void;
-    /** Attached files (for controlled mode) */
-    attachedFiles?: AttachedFile[];
-}
-declare function ChatInput({ input, handleInputChange, handleSubmit, isLoading, placeholder, variant, onFilesAttached, attachedFiles: controlledFiles, }: ChatInputProps): react_jsx_runtime.JSX.Element;
-
-export { ChatInterface as C, ChatLayout as a, ChatSidebar as b, ChatMessage as c, ChatInput as d };