@@ -1076,7 +1501,7 @@ const MessageInputStagedImages = React.forwardRef<
key={image.id}
image={image}
displayName={
- image.file[IS_PASTED_IMAGE] ? `Image ${index + 1}` : image.name
+ image.file?.[IS_PASTED_IMAGE] ? `Image ${index + 1}` : image.name
}
isExpanded={expandedImageId === image.id}
onToggle={() =>
@@ -1174,10 +1599,13 @@ export {
MessageInputMcpConfigButton,
MessageInputMcpPromptButton,
MessageInputMcpResourceButton,
+ MessageInputPlainTextarea,
MessageInputStagedImages,
MessageInputSubmitButton,
- MessageInputPlainTextarea,
MessageInputTextarea,
MessageInputToolbar,
messageInputVariants,
};
+
+// Re-export types from text-editor for convenience
+export type { PromptItem, ResourceItem } from "./text-editor";
diff --git a/src/components/tambo/message-suggestions.tsx b/src/components/tambo/message-suggestions.tsx
index 5fabdb4..c2c9584 100644
--- a/src/components/tambo/message-suggestions.tsx
+++ b/src/components/tambo/message-suggestions.tsx
@@ -1,13 +1,14 @@
"use client";
-import { MessageGenerationStage } from "@/components/tambo/message-generation-stage";
-import {
- Tooltip,
- TooltipProvider,
-} from "@/components/tambo/suggestions-tooltip";
+import { MessageGenerationStage } from "./message-generation-stage";
+import { Tooltip, TooltipProvider } from "./suggestions-tooltip";
import { cn } from "@/lib/utils";
import type { Suggestion, TamboThread } from "@tambo-ai/react";
-import { useTambo, useTamboSuggestions } from "@tambo-ai/react";
+import {
+ GenerationStage,
+ useTambo,
+ useTamboSuggestions,
+} from "@tambo-ai/react";
import { Loader2Icon } from "lucide-react";
import * as React from "react";
import { useEffect, useRef } from "react";
@@ -249,7 +250,8 @@ const MessageSuggestionsStatus = React.forwardRef<
"p-2 rounded-md text-sm bg-transparent",
!error &&
!isGenerating &&
- (!thread?.generationStage || thread.generationStage === "COMPLETE")
+ (!thread?.generationStage ||
+ thread.generationStage === GenerationStage.COMPLETE)
? "p-0 min-h-0 mb-0"
: "",
className,
@@ -286,7 +288,7 @@ function GenerationStageContent({
generationStage?: string;
isGenerating: boolean;
}) {
- if (generationStage && generationStage !== "COMPLETE") {
+ if (generationStage && generationStage !== GenerationStage.COMPLETE) {
return
;
}
if (isGenerating) {
diff --git a/src/components/tambo/message-thread-full.tsx b/src/components/tambo/message-thread-full.tsx
index 76f904e..43ba932 100644
--- a/src/components/tambo/message-thread-full.tsx
+++ b/src/components/tambo/message-thread-full.tsx
@@ -17,10 +17,7 @@ import {
MessageSuggestionsStatus,
} from "@/components/tambo/message-suggestions";
import { ScrollableMessageContainer } from "@/components/tambo/scrollable-message-container";
-import {
- ThreadContainer,
- useThreadContainerContext,
-} from "@/components/tambo/thread-container";
+import { ThreadContainer, useThreadContainerContext } from "./thread-container";
import {
ThreadContent,
ThreadContentMessages,
@@ -41,8 +38,6 @@ import * as React from "react";
* Props for the MessageThreadFull component
*/
export interface MessageThreadFullProps extends React.HTMLAttributes
{
- /** Optional context key for the thread */
- contextKey?: string;
/**
* Controls the visual styling of messages in the thread.
* Possible values include: "default", "compact", etc.
@@ -58,12 +53,12 @@ export interface MessageThreadFullProps extends React.HTMLAttributes(({ className, contextKey, variant, ...props }, ref) => {
+>(({ className, variant, ...props }, ref) => {
const { containerRef, historyPosition } = useThreadContainerContext();
const mergedRef = useMergeRefs(ref, containerRef);
const threadHistorySidebar = (
-
+
@@ -116,7 +111,7 @@ export const MessageThreadFull = React.forwardRef<
{/* Message input */}
-
+
diff --git a/src/components/tambo/message.tsx b/src/components/tambo/message.tsx
index e1e0d5f..a31f767 100644
--- a/src/components/tambo/message.tsx
+++ b/src/components/tambo/message.tsx
@@ -14,7 +14,7 @@ import { useTambo } from "@tambo-ai/react";
import type TamboAI from "@tambo-ai/typescript-sdk";
import { cva, type VariantProps } from "class-variance-authority";
import stringify from "json-stringify-pretty-compact";
-import { Check, ChevronDown, ExternalLink, Loader2, X } from "lucide-react";
+import { Check, ChevronDown, Loader2, X } from "lucide-react";
import Image from "next/image";
import * as React from "react";
import { useState } from "react";
@@ -891,7 +891,6 @@ const MessageRenderedComponentArea = React.forwardRef<
MessageRenderedComponentAreaProps
>(({ className, children, ...props }, ref) => {
const { message, role } = useMessageContext();
- const [canvasExists, setCanvasExists] = React.useState(false);
const { addComponent, activeCanvasId, createCanvas } = useCanvasStore();
// Extract component info once to check if it's draggable
@@ -936,25 +935,6 @@ const MessageRenderedComponentArea = React.forwardRef<
[componentType, componentProps],
);
- // Check if canvas exists on mount and window resize
- React.useEffect(() => {
- const checkCanvasExists = () => {
- const canvas = document.querySelector('[data-canvas-space="true"]');
- setCanvasExists(!!canvas);
- };
-
- // Check on mount
- checkCanvasExists();
-
- // Set up resize listener
- window.addEventListener("resize", checkCanvasExists);
-
- // Clean up
- return () => {
- window.removeEventListener("resize", checkCanvasExists);
- };
- }, []);
-
if (
!message.renderedComponent ||
role !== "assistant" ||
@@ -971,38 +951,9 @@ const MessageRenderedComponentArea = React.forwardRef<
{...props}
>
{children ??
- (canvasExists && canDrag ? (
-
-
-
-
- ) : canDrag ? (
+ (canDrag ? (
-
+