+{`model User {
+ id Int @id @default(autoincrement())
+ email String @unique
+ name String?
+ posts Post[]
+}
+
+model Post {
+ id Int @id @default(autoincrement())
+ title String
+ author User @relation(fields: [authorId])
+ authorId Int
+}`}
+
+
+ ))}
+
+ );
+}
+
+/**
+ * Props for the McpResourceButton component.
+ */
+export interface McpResourceButtonProps extends React.ButtonHTMLAttributes {
+ /** Callback to insert text into the input */
+ onInsertResource: (id: string, label: string) => void;
+ /** Current input value */
+ value: string;
+ /** Optional custom className */
+ className?: string;
+}
+
+/**
+ * MCP Resource picker button component for inserting resource references from MCP servers.
+ * Uses a combobox with search for easy filtering of potentially many resources.
+ * @component McpResourceButton
+ * @example
+ * ```tsx
+ * setInputValue(text)}
+ * />
+ * ```
+ */
+export const McpResourceButton = React.forwardRef<
+ HTMLButtonElement,
+ McpResourceButtonProps
+>(({ className, onInsertResource, value: _value, ...props }, ref) => {
+ const { data: resourceList, isLoading } = useTamboMcpResourceList();
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [searchQuery, setSearchQuery] = React.useState("");
+
+ // Filter resources based on search query
+ const filteredResources = React.useMemo(() => {
+ if (!resourceList) return [];
+ if (!searchQuery) return resourceList;
+
+ const query = searchQuery.toLowerCase();
+ return resourceList.filter((entry) => {
+ const uri = entry.resource.uri.toLowerCase();
+ const name = entry.resource.name?.toLowerCase() ?? "";
+ const description = entry.resource.description?.toLowerCase() ?? "";
+ // Combine predicates without `||` to satisfy lint rule preferring `??` for fallbacks
+ // Ensure correct boolean semantics by using Array.prototype.some
+ return [
+ uri.includes(query),
+ name.includes(query),
+ description.includes(query),
+ ].some(Boolean);
+ });
+ }, [resourceList, searchQuery]);
+
+ const handleSelectResource = (id: string, label: string) => {
+ // Pass raw resource string to caller; caller decides how to insert
+ onInsertResource(id, label);
+ setIsOpen(false);
+ setSearchQuery("");
+ };
+
+ // Only show button if resources are available
+ if (!resourceList || resourceList.length === 0) {
+ return null;
+ }
+
+ const buttonClasses = cn(
+ "w-10 h-10 rounded-lg border border-border bg-background text-foreground transition-colors hover:bg-muted disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+ className,
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+});
+McpResourceButton.displayName = "McpResourceButton";
diff --git a/src/components/tambo/mcp-config-modal.tsx b/src/components/tambo/mcp-config-modal.tsx
index 135868f..fdb3a82 100644
--- a/src/components/tambo/mcp-config-modal.tsx
+++ b/src/components/tambo/mcp-config-modal.tsx
@@ -1,19 +1,19 @@
"use client";
-import { type McpServerInfo, MCPTransport } from "@tambo-ai/react/mcp";
-import { ChevronDown, X, Trash2 } from "lucide-react";
-import React from "react";
-import { createPortal } from "react-dom";
-import { motion } from "framer-motion";
+import { createMarkdownComponents } from "@/components/tambo/markdown-components";
+import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@radix-ui/react-dropdown-menu";
-import { createMarkdownComponents } from "@/components/tambo/markdown-components";
-import Markdown from "react-markdown";
-import { cn } from "@/lib/utils";
+import { type McpServerInfo, MCPTransport } from "@tambo-ai/react";
+import { motion } from "framer-motion";
+import { ChevronDown, Trash2, X } from "lucide-react";
+import React from "react";
+import { createPortal } from "react-dom";
+import { Streamdown } from "streamdown";
/**
* Modal component for configuring client-side MCP (Model Context Protocol) servers.
@@ -114,11 +114,11 @@ export const McpConfigModal = ({
// Helper function to get server display information
const getServerInfo = (server: McpServerInfo) => {
if (typeof server === "string") {
- return { url: server, transport: "SSE (default)", name: null };
+ return { url: server, transport: "HTTP (default)", name: null };
} else {
return {
url: server.url,
- transport: server.transport ?? "SSE (default)",
+ transport: server.transport ?? "HTTP (default)",
name: server.name ?? null,
};
}
@@ -142,14 +142,13 @@ export const McpConfigModal = ({
After configuring your MCP servers below, integrate them into your application.
-#### 1. Import the required components
+#### 1. Import the required hook
\`\`\`tsx
import { useMcpServers } from "@/components/tambo/mcp-config-modal";
-import { TamboMcpProvider } from "@tambo-ai/react/mcp";
\`\`\`
-#### 2. Load MCP servers and wrap your components:
+#### 2. Load MCP servers and pass to TamboProvider:
\`\`\`tsx
const mcpServers = useMcpServers();
@@ -162,10 +161,13 @@ function MyApp() {
const mcpServers = useMcpServers(); // Reactive - updates when servers change
return (
-
-
- {/* Your app components */}
-
+
+ {/* Your app components */}
);
}
@@ -219,9 +221,9 @@ function MyApp() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
-
+
{instructions}
-
+
)}
@@ -229,7 +231,7 @@ function MyApp() {
Configure{" "}
- client-side{" "}
+ client-side{" "}
MCP servers to extend the capabilities of your tambo application.
These servers will be connected{" "}
@@ -249,7 +251,7 @@ function MyApp() {
className="block text-sm font-semibold text-foreground mb-2"
>
Server URL
-
+
(must be accessible from the browser)
@@ -271,7 +273,7 @@ function MyApp() {
className="block text-sm font-semibold text-foreground mb-2"
>
Server Name
-
+
(optional)
@@ -362,12 +364,12 @@ function MyApp() {
{serverInfo.name && (
-
+
Name:{" "}
{serverInfo.name}
)}
-
+
Transport:{" "}
{serverInfo.transport}
@@ -386,10 +388,10 @@ function MyApp() {
) : (
-
+
No MCP servers configured yet
-
+
Add your first server above to get started
@@ -415,13 +417,13 @@ function MyApp() {
-
+
Learn more:{" "}
client-side
{" "}
@@ -430,7 +432,7 @@ function MyApp() {
href="https://docs.tambo.co/concepts/model-context-protocol/serverside-mcp-connection"
target="_blank"
rel="noopener noreferrer"
- className="text-secondary hover:text-foreground underline underline-offset-2"
+ className="text-muted-foreground hover:text-foreground underline underline-offset-2"
>
server-side
{" "}
@@ -469,9 +471,9 @@ export type McpServer = string | { url: string };
* // Returns: [{ url: "https://api.example.com" }, "https://api2.example.com"]
*
* return (
- *
+ *
* {children}
- *
+ *
* );
* }
* ```
diff --git a/src/components/tambo/message-generation-stage.tsx b/src/components/tambo/message-generation-stage.tsx
index 4e4d291..9dd83e3 100644
--- a/src/components/tambo/message-generation-stage.tsx
+++ b/src/components/tambo/message-generation-stage.tsx
@@ -1,7 +1,7 @@
"use client";
import { cn } from "@/lib/utils";
-import { type GenerationStage, useTambo } from "@tambo-ai/react";
+import { useTambo } from "@tambo-ai/react";
import { Loader2Icon } from "lucide-react";
import * as React from "react";
@@ -11,8 +11,7 @@ import * as React from "react";
* @property {boolean} showLabel - Whether to show the label
*/
-export interface GenerationStageProps
- extends React.HTMLAttributes {
+export interface GenerationStageProps extends React.HTMLAttributes {
showLabel?: boolean;
}
@@ -21,30 +20,20 @@ export function MessageGenerationStage({
showLabel = true,
...props
}: GenerationStageProps) {
- const { thread, isIdle } = useTambo();
- const stage = thread?.generationStage;
+ const { isStreaming, isWaiting, isIdle } = useTambo();
- // Only render if we have a generation stage
- if (!stage) {
+ if (isIdle) {
return null;
}
- // Map stage names to more user-friendly labels
- const stageLabels: Record = {
- IDLE: "Idle",
- CHOOSING_COMPONENT: "Choosing component",
- FETCHING_CONTEXT: "Fetching context",
- HYDRATING_COMPONENT: "Preparing component",
- STREAMING_RESPONSE: "Generating response",
- COMPLETE: "Complete",
- ERROR: "Error",
- CANCELLED: "Cancelled",
- };
-
- const label =
- stageLabels[stage] || `${stage.charAt(0).toUpperCase() + stage.slice(1)}`;
+ let label = "";
+ if (isWaiting) {
+ label = "Preparing response";
+ } else if (isStreaming) {
+ label = "Generating response";
+ }
- if (isIdle) {
+ if (!label) {
return null;
}
diff --git a/src/components/tambo/message-input.tsx b/src/components/tambo/message-input.tsx
index 31a4e2f..a42d61f 100644
--- a/src/components/tambo/message-input.tsx
+++ b/src/components/tambo/message-input.tsx
@@ -1,27 +1,79 @@
"use client";
-import { McpConfigModal } from "@/components/tambo/mcp-config-modal";
+import { useTamboMcpPrompt } from "@tambo-ai/react/mcp";
+import { ElicitationUI } from "@/components/tambo/elicitation-ui";
+import {
+ McpPromptButton,
+ McpResourceButton,
+} from "@/components/tambo/mcp-components";
import {
Tooltip,
TooltipProvider,
-} from "@/components/tambo/suggestions-tooltip";
+} from "@/components/tambo/message-suggestions";
import { cn } from "@/lib/utils";
-import {
- useIsTamboTokenUpdating,
- useTamboThread,
- useTamboThreadInput,
-} from "@tambo-ai/react";
import { cva, type VariantProps } from "class-variance-authority";
-import { ArrowUp, Square } from "lucide-react";
+import {
+ ArrowUp,
+ AtSign,
+ FileText,
+ Image as ImageIcon,
+ Paperclip,
+ Square,
+ X,
+} from "lucide-react";
import * as React from "react";
+import { McpConfigModal } from "./mcp-config-modal";
+import {
+ getImageItems,
+ TextEditor,
+ type PromptItem,
+ type ResourceItem,
+ type TamboEditor,
+} from "./text-editor";
+
+// Import base compound components and constants
+import {
+ IS_PASTED_IMAGE,
+ MAX_IMAGES,
+ MessageInput as MessageInputBase,
+ type PromptProvider,
+ type ResourceProvider,
+ type StagedImageRenderProps,
+} from "@tambo-ai/react-ui-base/message-input";
+
+// Lazy load DictationButton for code splitting (framework-agnostic alternative to next/dynamic)
+// eslint-disable-next-line @typescript-eslint/promise-function-async
+const LazyDictationButton = React.lazy(() => import("./dictation-button"));
/**
- * CSS variants for the message input container
- * @typedef {Object} MessageInputVariants
- * @property {string} default - Default styling
- * @property {string} solid - Solid styling with shadow effects
- * @property {string} bordered - Bordered styling with border emphasis
+ * Wrapper component that includes Suspense boundary for the lazy-loaded DictationButton.
+ * This ensures the component can be safely used without requiring consumers to add their own Suspense.
+ * Also handles SSR by only rendering on the client (DictationButton uses Web Audio APIs).
*/
+const DictationButton = () => {
+ const [isMounted, setIsMounted] = React.useState(false);
+
+ React.useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ if (!isMounted) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+};
+
+const noop = () => {};
+
+// Re-export provider interfaces from base
+export type { PromptProvider, ResourceProvider };
+
+/** CSS variants for the message input container */
const messageInputVariants = cva("w-full", {
variants: {
variant: {
@@ -48,69 +100,15 @@ const messageInputVariants = cva("w-full", {
},
});
-/**
- * @typedef MessageInputContextValue
- * @property {string} value - The current input value
- * @property {function} setValue - Function to update the input value
- * @property {function} submit - Function to submit the message
- * @property {function} handleSubmit - Function to handle form submission
- * @property {boolean} isPending - Whether a submission is in progress
- * @property {Error|null} error - Any error from the submission
- * @property {string|undefined} contextKey - The thread context key
- * @property {HTMLTextAreaElement|null} textareaRef - Reference to the textarea element
- * @property {string | null} submitError - Error from the submission
- * @property {function} setSubmitError - Function to set the submission error
- */
-interface MessageInputContextValue {
- value: string;
- setValue: (value: string) => void;
- submit: (options: {
- contextKey?: string;
- streamResponse?: boolean;
- }) => Promise;
- handleSubmit: (e: React.FormEvent) => Promise;
- isPending: boolean;
- error: Error | null;
- contextKey?: string;
- textareaRef: React.RefObject;
- submitError: string | null;
- setSubmitError: React.Dispatch>;
-}
-
-/**
- * React Context for sharing message input data and functions among sub-components.
- * @internal
- */
-const MessageInputContext =
- React.createContext(null);
-
-/**
- * Hook to access the message input context.
- * Throws an error if used outside of a MessageInput component.
- * @returns {MessageInputContextValue} The message input context value.
- * @throws {Error} If used outside of MessageInput.
- * @internal
- */
-const useMessageInputContext = () => {
- const context = React.useContext(MessageInputContext);
- if (!context) {
- throw new Error(
- "MessageInput sub-components must be used within a MessageInput",
- );
- }
- return context;
-};
-
/**
* Props for the MessageInput component.
* Extends standard HTMLFormElement attributes.
*/
-export interface MessageInputProps
- extends React.HTMLAttributes {
- /** The context key identifying which thread to send messages to. */
- contextKey?: string;
+export interface MessageInputProps extends React.HTMLAttributes {
/** Optional styling variant for the input container. */
variant?: VariantProps["variant"];
+ /** Optional ref to forward to the TamboEditor instance. */
+ inputRef?: React.RefObject;
/** The child elements to render within the form container. */
children?: React.ReactNode;
}
@@ -118,10 +116,11 @@ export interface MessageInputProps
/**
* The root container for a message input component.
* It establishes the context for its children and handles the form submission.
+ * Composes the headless MessageInput.Root from base for all business logic.
* @component MessageInput
* @example
* ```tsx
- *
+ *
*
*
*
@@ -129,186 +128,384 @@ export interface MessageInputProps
* ```
*/
const MessageInput = React.forwardRef(
- ({ children, className, contextKey, variant, ...props }, ref) => {
- const { value, setValue, submit, isPending, error } = useTamboThreadInput();
- const { cancel } = useTamboThread();
- const [displayValue, setDisplayValue] = React.useState("");
- const [submitError, setSubmitError] = React.useState(null);
- const [isSubmitting, setIsSubmitting] = React.useState(false);
- const textareaRef = React.useRef(null);
-
- React.useEffect(() => {
- setDisplayValue(value);
- if (value && textareaRef.current) {
- textareaRef.current.focus();
- }
- }, [value]);
-
- const handleSubmit = React.useCallback(
- async (e: React.FormEvent) => {
- e.preventDefault();
- if (!value.trim() || isSubmitting) return;
-
- setSubmitError(null);
- setDisplayValue("");
- setIsSubmitting(true);
-
- try {
- await submit({
- contextKey,
- streamResponse: true,
- });
- setValue("");
- setTimeout(() => {
- textareaRef.current?.focus();
- }, 0);
- } catch (error) {
- console.error("Failed to submit message:", error);
- setDisplayValue(value);
- setSubmitError(
- error instanceof Error
- ? error.message
- : "Failed to send message. Please try again.",
- );
-
- // Cancel the thread to reset loading state
- cancel();
- } finally {
- setIsSubmitting(false);
- }
- },
- [
- value,
- submit,
- contextKey,
- setValue,
- setDisplayValue,
- setSubmitError,
- cancel,
- isSubmitting,
- ],
- );
-
- const contextValue = React.useMemo(
- () => ({
- value: displayValue,
- setValue: (newValue: string) => {
- setValue(newValue);
- setDisplayValue(newValue);
- },
- submit,
- handleSubmit,
- isPending: isPending ?? isSubmitting,
- error,
- contextKey,
- textareaRef,
- submitError,
- setSubmitError,
- }),
- [
- displayValue,
- setValue,
- submit,
- handleSubmit,
- isPending,
- isSubmitting,
- error,
- contextKey,
- submitError,
- ],
- );
+ ({ children, className, variant, inputRef, ...props }, ref) => {
return (
-
-
-
+
+ {/* Use data-* classes for styling, render props only for behavior changes */}
+
+ {/* Render props ONLY for behavior change (elicitation vs normal content) */}
+ {({ elicitation, resolveElicitation }) => (
+ <>
+ {/* Drop overlay styled with CSS, shown via group-data-[dragging] */}
+
+
+ Drop files here to add to conversation
+
+
+
+ {elicitation && resolveElicitation ? (
+
+ ) : (
+ <>
+
+ {children}
+
+ )}
+
+ )}
+
+
+
);
},
);
MessageInput.displayName = "MessageInput";
+// IS_PASTED_IMAGE and MAX_IMAGES imported from base
+
/**
* Props for the MessageInputTextarea component.
* Extends standard TextareaHTMLAttributes.
*/
-export interface MessageInputTextareaProps
- extends React.TextareaHTMLAttributes {
+export interface MessageInputTextareaProps extends React.HTMLAttributes {
/** Custom placeholder text. */
placeholder?: string;
+ /** Resource provider for @ mentions (optional - includes interactables by default) */
+ resourceProvider?: ResourceProvider;
+ /** Prompt provider for / commands (optional) */
+ promptProvider?: PromptProvider;
+ /** Callback when a resource is selected from @ mentions (optional) */
+ onResourceSelect?: (item: ResourceItem) => void;
}
/**
- * Textarea component for entering message text.
- * Automatically connects to the context to handle value changes and key presses.
+ * Rich-text textarea component for entering message text with @ mention support.
+ * Uses the TipTap-based TextEditor which supports:
+ * - @ mention autocomplete for interactables plus optional static items and async fetchers
+ * - Keyboard navigation (Enter to submit, Shift+Enter for newline)
+ * - Image paste handling via the thread input context
+ *
+ * **Note:** This component uses refs internally to ensure callbacks stay fresh,
+ * so consumers can pass updated providers on each render without worrying about
+ * closure issues with the TipTap editor.
+ *
* @component MessageInput.Textarea
* @example
* ```tsx
*
- *
+ * {
+ * // Return custom resources
+ * return [{ id: "foo", name: "Foo" }];
+ * }
+ * }}
+ * />
*
* ```
*/
const MessageInputTextarea = ({
className,
placeholder = "What do you want to do?",
+ resourceProvider,
+ promptProvider,
+ onResourceSelect,
...props
}: MessageInputTextareaProps) => {
- const { value, setValue, textareaRef, handleSubmit } =
- useMessageInputContext();
- const { isIdle } = useTamboThread();
- const isUpdatingToken = useIsTamboTokenUpdating();
- const isPending = !isIdle;
-
- const handleChange = (e: React.ChangeEvent) => {
- setValue(e.target.value);
- };
-
- const handleKeyDown = (e: React.KeyboardEvent) => {
- if (e.key === "Enter" && !e.shiftKey) {
- e.preventDefault();
- if (value.trim()) {
- handleSubmit(e as unknown as React.FormEvent);
- }
+ // Resource names are extracted from editor at submit time, no need to track in state
+ const setResourceNames = React.useCallback(
+ (
+ _resourceNames:
+ | Record
+ | ((prev: Record) => Record),
+ ) => {
+ // No-op - we extract resource names directly from editor at submit time
+ },
+ [],
+ );
+
+ // Icon factories for MCP items (styled layer provides the icons)
+ const resourceFormatOptions = React.useMemo(
+ () => ({ createMcpIcon: () => }),
+ [],
+ );
+ const promptFormatOptions = React.useMemo(
+ () => ({ createMcpIcon: () => }),
+ [],
+ );
+
+ // State for MCP prompt fetching (since we can't call hooks inside get())
+ const [selectedMcpPromptName, setSelectedMcpPromptName] = React.useState<
+ string | null
+ >(null);
+ const { data: selectedMcpPromptData } = useTamboMcpPrompt(
+ selectedMcpPromptName ?? "",
+ );
+
+ // Handle prompt selection - check if it's an MCP prompt
+ const handlePromptSelect = React.useCallback((item: PromptItem) => {
+ if (item.id.startsWith("mcp-prompt:")) {
+ const promptName = item.id.replace("mcp-prompt:", "");
+ setSelectedMcpPromptName(promptName);
}
- };
+ }, []);
+
+ // Handle image paste - mark as pasted and add to thread
+ const pendingImagesRef = React.useRef(0);
return (
-
+ >
+ {({
+ value,
+ setValue,
+ handleSubmit,
+ editorRef,
+ disabled,
+ addImage,
+ images,
+ setImageError,
+ resourceItems,
+ setResourceSearch,
+ promptItems,
+ setPromptSearch,
+ }) => {
+ // Handle image paste - mark as pasted and add to thread
+ const handleAddImage = async (file: File) => {
+ if (images.length + pendingImagesRef.current >= MAX_IMAGES) {
+ setImageError(`Max ${MAX_IMAGES} uploads at a time`);
+ return;
+ }
+ setImageError(null);
+ pendingImagesRef.current += 1;
+ try {
+ file[IS_PASTED_IMAGE] = true;
+ await addImage(file);
+ } finally {
+ pendingImagesRef.current -= 1;
+ }
+ };
+
+ return (
+ <>
+ setSelectedMcpPromptName(null)}
+ />
+ }
+ value={value}
+ onChange={setValue}
+ onResourceNamesChange={setResourceNames}
+ onSubmit={handleSubmit}
+ onAddImage={handleAddImage}
+ placeholder={placeholder}
+ disabled={disabled}
+ className="bg-background text-foreground"
+ onSearchResources={setResourceSearch}
+ resources={resourceItems}
+ onSearchPrompts={setPromptSearch}
+ prompts={promptItems}
+ onResourceSelect={onResourceSelect ?? noop}
+ onPromptSelect={handlePromptSelect}
+ />
+
+ );
+ }}
+
);
};
MessageInputTextarea.displayName = "MessageInput.Textarea";
+/**
+ * Helper component to handle MCP prompt insertion effect.
+ * Extracted to avoid hooks-in-render-prop issues.
+ */
+interface McpPromptEffectProps {
+ selectedMcpPromptName: string | null;
+ selectedMcpPromptData:
+ | { messages?: Array<{ content?: { type: string; text?: string } }> }
+ | null
+ | undefined;
+ editorRef: React.RefObject;
+ setValue: (value: string) => void;
+ onComplete: () => void;
+}
+
+const McpPromptEffect: React.FC = ({
+ selectedMcpPromptName,
+ selectedMcpPromptData,
+ editorRef,
+ setValue,
+ onComplete,
+}) => {
+ React.useEffect(() => {
+ if (selectedMcpPromptData && selectedMcpPromptName) {
+ const promptMessages = selectedMcpPromptData?.messages;
+ if (promptMessages) {
+ const promptText = promptMessages
+ .map((msg) => {
+ if (msg.content?.type === "text") {
+ return msg.content.text;
+ }
+ return "";
+ })
+ .filter(Boolean)
+ .join("\n");
+
+ const editor = editorRef.current;
+ if (editor) {
+ editor.setContent(promptText);
+ setValue(promptText);
+ editor.focus("end");
+ }
+ }
+ onComplete();
+ }
+ }, [
+ selectedMcpPromptData,
+ selectedMcpPromptName,
+ editorRef,
+ setValue,
+ onComplete,
+ ]);
+
+ return null;
+};
+
+/**
+ * Props for the legacy plain textarea message input component.
+ * This preserves the original MessageInput.Textarea API for backward compatibility.
+ */
+export interface MessageInputPlainTextareaProps extends React.TextareaHTMLAttributes {
+ /** Custom placeholder text. */
+ placeholder?: string;
+}
+
+/**
+ * Legacy textarea-based message input component.
+ *
+ * This mirrors the previous MessageInput.Textarea implementation using a native
+ * `