@btst/stack 1.3.1 → 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/hooks/chat-hooks.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { createApiClient } from "@btst/stack/plugins/client";
+import {
+	useMutation,
+	useQuery,
+	useQueryClient,
+	useSuspenseQuery,
+} from "@tanstack/react-query";
+import type { AiChatApiRouter } from "../../api/plugin";
+import {
+	createAiChatQueryKeys,
+	type ConversationWithMessages,
+} from "../../query-keys";
+import type { SerializedConversation, SerializedMessage } from "../../types";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { AiChatPluginOverrides } from "../overrides";
+
+/**
+ * Shared React Query configuration for all chat queries
+ * Prevents automatic refetching to avoid hydration mismatches in SSR
+ */
+const SHARED_QUERY_CONFIG = {
+	retry: false,
+	refetchOnWindowFocus: false,
+	refetchOnMount: false,
+	refetchOnReconnect: false,
+	staleTime: 1000 * 60 * 5, // 5 minutes
+	gcTime: 1000 * 60 * 10, // 10 minutes
+} as const;
+
+/**
+ * Options for the useConversations hook
+ */
+export interface UseConversationsOptions {
+	/** Whether to enable the query (default: true) */
+	enabled?: boolean;
+}
+
+/**
+ * Result from the useConversations hook
+ */
+export interface UseConversationsResult {
+	/** Array of conversations */
+	conversations: SerializedConversation[];
+	/** Whether the initial load is in progress */
+	isLoading: boolean;
+	/** Error if the query failed */
+	error: Error | null;
+	/** Function to refetch the conversations */
+	refetch: () => void;
+}
+
+/**
+ * Hook for fetching all conversations
+ */
+export function useConversations(
+	options: UseConversationsOptions = {},
+): UseConversationsResult {
+	const { apiBaseURL, apiBasePath, headers } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const { enabled = true } = options;
+	const queries = createAiChatQueryKeys(client, headers);
+
+	const listQuery = queries.conversations.list();
+
+	const { data, isLoading, error, refetch } = useQuery<
+		SerializedConversation[],
+		Error,
+		SerializedConversation[],
+		typeof listQuery.queryKey
+	>({
+		...listQuery,
+		...SHARED_QUERY_CONFIG,
+		enabled: enabled && !!client,
+	});
+
+	return {
+		conversations: data ?? [],
+		isLoading,
+		error,
+		refetch,
+	};
+}
+
+/**
+ * Suspense variant of useConversations
+ */
+export function useSuspenseConversations(): {
+	conversations: SerializedConversation[];
+	refetch: () => Promise<unknown>;
+} {
+	const { apiBaseURL, apiBasePath, headers } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const queries = createAiChatQueryKeys(client, headers);
+	const listQuery = queries.conversations.list();
+
+	const { data, refetch, error, isFetching } = useSuspenseQuery<
+		SerializedConversation[],
+		Error,
+		SerializedConversation[],
+		typeof listQuery.queryKey
+	>({
+		...listQuery,
+		...SHARED_QUERY_CONFIG,
+	});
+
+	if (error && !isFetching) {
+		throw error;
+	}
+
+	return {
+		conversations: data ?? [],
+		refetch,
+	};
+}
+
+/**
+ * Options for the useConversation hook
+ */
+export interface UseConversationOptions {
+	/** Whether to enable the query (default: true) */
+	enabled?: boolean;
+}
+
+/**
+ * Result from the useConversation hook
+ */
+export interface UseConversationResult {
+	/** The conversation with messages, or null if not found */
+	conversation: ConversationWithMessages | null;
+	/** Whether the conversation is being loaded */
+	isLoading: boolean;
+	/** Error if the query failed */
+	error: Error | null;
+	/** Function to refetch the conversation */
+	refetch: () => void;
+}
+
+/**
+ * Hook for fetching a single conversation with messages
+ */
+export function useConversation(
+	id?: string,
+	options: UseConversationOptions = {},
+): UseConversationResult {
+	const { apiBaseURL, apiBasePath, headers } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const { enabled = true } = options;
+	const queries = createAiChatQueryKeys(client, headers);
+
+	const detailQuery = queries.conversations.detail(id ?? "");
+
+	const { data, isLoading, error, refetch } = useQuery<
+		ConversationWithMessages | null,
+		Error,
+		ConversationWithMessages | null,
+		typeof detailQuery.queryKey
+	>({
+		...detailQuery,
+		...SHARED_QUERY_CONFIG,
+		enabled: enabled && !!client && !!id,
+	});
+
+	return {
+		conversation: data || null,
+		isLoading,
+		error,
+		refetch,
+	};
+}
+
+/**
+ * Suspense variant of useConversation
+ */
+export function useSuspenseConversation(id: string): {
+	conversation: ConversationWithMessages | null;
+	refetch: () => Promise<unknown>;
+} {
+	const { apiBaseURL, apiBasePath, headers } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const queries = createAiChatQueryKeys(client, headers);
+	const detailQuery = queries.conversations.detail(id);
+
+	const { data, refetch, error, isFetching } = useSuspenseQuery<
+		ConversationWithMessages | null,
+		Error,
+		ConversationWithMessages | null,
+		typeof detailQuery.queryKey
+	>({
+		...detailQuery,
+		...SHARED_QUERY_CONFIG,
+	});
+
+	if (error && !isFetching) {
+		throw error;
+	}
+
+	return {
+		conversation: data || null,
+		refetch,
+	};
+}
+
+/**
+ * Hook for creating a new conversation
+ */
+export function useCreateConversation() {
+	const { refresh, apiBaseURL, apiBasePath } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const queryClient = useQueryClient();
+	const queries = createAiChatQueryKeys(client);
+
+	return useMutation<
+		SerializedConversation | null,
+		Error,
+		{ id?: string; title?: string }
+	>({
+		mutationKey: [...queries.conversations._def, "create"],
+		mutationFn: async (data) => {
+			const response = await client("@post/chat/conversations", {
+				method: "POST",
+				body: data,
+			});
+			return response.data as SerializedConversation | null;
+		},
+		onSuccess: async (created) => {
+			// Update list cache
+			await queryClient.invalidateQueries({
+				queryKey: queries.conversations.list().queryKey,
+			});
+			// Refresh server-side cache if available
+			if (refresh) {
+				await refresh();
+			}
+		},
+	});
+}
+
+/**
+ * Hook for renaming a conversation
+ */
+export function useRenameConversation() {
+	const { refresh, apiBaseURL, apiBasePath } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const queryClient = useQueryClient();
+	const queries = createAiChatQueryKeys(client);
+
+	return useMutation<
+		SerializedConversation | null,
+		Error,
+		{ id: string; title: string }
+	>({
+		mutationKey: [...queries.conversations._def, "rename"],
+		mutationFn: async ({ id, title }) => {
+			const response = await client("@put/chat/conversations/:id", {
+				method: "PUT",
+				params: { id },
+				body: { title },
+			});
+			return response.data as SerializedConversation | null;
+		},
+		onSuccess: async (updated) => {
+			// Update detail cache if available
+			if (updated?.id) {
+				queryClient.setQueryData(
+					queries.conversations.detail(updated.id).queryKey,
+					(old: ConversationWithMessages | null | undefined) =>
+						old ? { ...old, ...updated } : null,
+				);
+			}
+			// Invalidate list
+			await queryClient.invalidateQueries({
+				queryKey: queries.conversations.list().queryKey,
+			});
+			if (refresh) {
+				await refresh();
+			}
+		},
+	});
+}
+
+/**
+ * Hook for deleting a conversation
+ */
+export function useDeleteConversation() {
+	const { refresh, apiBaseURL, apiBasePath } =
+		usePluginOverrides<AiChatPluginOverrides>("ai-chat");
+	const client = createApiClient<AiChatApiRouter>({
+		baseURL: apiBaseURL,
+		basePath: apiBasePath,
+	});
+	const queryClient = useQueryClient();
+	const queries = createAiChatQueryKeys(client);
+
+	return useMutation<{ success: boolean }, Error, { id: string }>({
+		mutationKey: [...queries.conversations._def, "delete"],
+		mutationFn: async ({ id }) => {
+			const response = await client("@delete/chat/conversations/:id", {
+				method: "DELETE",
+				params: { id },
+			});
+			return response.data as { success: boolean };
+		},
+		onSuccess: async (_, { id }) => {
+			// Remove from detail cache
+			queryClient.removeQueries({
+				queryKey: queries.conversations.detail(id).queryKey,
+			});
+			// Invalidate list
+			await queryClient.invalidateQueries({
+				queryKey: queries.conversations.list().queryKey,
+			});
+			if (refresh) {
+				await refresh();
+			}
+		},
+	});
+}
+
+export type {
+	SerializedConversation,
+	SerializedMessage,
+	ConversationWithMessages,
+};

package/src/plugins/ai-chat/client/hooks/index.tsx

@@ -0,0 +1 @@
+export * from "./chat-hooks";

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

@@ -0,0 +1,25 @@
+export { aiChatClientPlugin } from "./plugin";
+export type {
+	AiChatClientConfig,
+	AiChatClientHooks,
+	RouteContext,
+	LoaderContext,
+} from "./plugin";
+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";