- {children}
+
+ {typeof children === "string" ? parseAndRenderWithBadges(children) : children}
);
@@ -80,9 +186,28 @@ export const ChainOfThoughtContent = ({
{...props}
>
-
+ {/* Animated vertical connection line */}
+
-
{children}
+
+ {React.Children.map(children, (child, index) => {
+ const key = React.isValidElement(child) ? child.key : `cot-item-${index}`;
+ return (
+
+ {child}
+
+ );
+ })}
+
);
@@ -98,14 +223,19 @@ export function ChainOfThought({ children, className }: ChainOfThoughtProps) {
return (
- {childrenArray.map((child, index) => (
-
- {React.isValidElement(child) &&
- React.cloneElement(child as React.ReactElement, {
- isLast: index === childrenArray.length - 1,
- })}
-
- ))}
+ {childrenArray.map((child, index) => {
+ // React.Children.toArray assigns stable keys to each child
+ const key = React.isValidElement(child) ? child.key : `cot-step-${index}`;
+ return (
+
+ {React.isValidElement(child) &&
+ React.cloneElement(child as React.ReactElement, {
+ isLast: index === childrenArray.length - 1,
+ stepIndex: index,
+ })}
+
+ );
+ })}
);
}
@@ -114,19 +244,42 @@ export type ChainOfThoughtStepProps = {
children: React.ReactNode;
className?: string;
isLast?: boolean;
+ /** Index of the step for staggered animation */
+ stepIndex?: number;
};
export const ChainOfThoughtStep = ({
children,
className,
isLast = false,
+ stepIndex = 0,
...props
}: ChainOfThoughtStepProps & React.ComponentProps
) => {
+ // Staggered entrance animation based on step index
+ const isVisible = useEntranceAnimation(stepIndex * 50);
+
return (
-
+
{children}
+ {/* Animated connection line to next step */}
);
diff --git a/surfsense_web/lib/chat/attachment-adapter.ts b/surfsense_web/lib/chat/attachment-adapter.ts
index b31af9116..f084af411 100644
--- a/surfsense_web/lib/chat/attachment-adapter.ts
+++ b/surfsense_web/lib/chat/attachment-adapter.ts
@@ -60,9 +60,11 @@ interface ProcessAttachmentResponse {
/**
* Extended CompleteAttachment with our custom extractedContent field
* We store the extracted text in a custom field so we can access it in onNew
+ * For images, we also store the data URL so it can be displayed after persistence
*/
export interface ChatAttachment extends CompleteAttachment {
extractedContent: string;
+ imageDataUrl?: string; // Base64 data URL for images (persists across page reloads)
}
/**
@@ -118,6 +120,21 @@ async function processAttachment(file: File): Promise
// Store processed results for the send() method
const processedAttachments = new Map();
+// Store image data URLs for attachments (so they persist after File objects are lost)
+const imageDataUrls = new Map();
+
+/**
+ * Convert a File to a data URL (base64) for images
+ */
+async function fileToDataUrl(file: File): Promise {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = () => resolve(reader.result as string);
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+}
+
/**
* Create the attachment adapter for assistant-ui
*
@@ -170,6 +187,12 @@ export function createAttachmentAdapter(): AttachmentAdapter {
} as PendingAttachment;
try {
+ // For images, convert to data URL so we can display them after persistence
+ if (attachmentType === "image") {
+ const dataUrl = await fileToDataUrl(file);
+ imageDataUrls.set(id, dataUrl);
+ }
+
// Process the file through the backend ETL service
const result = await processAttachment(file);
@@ -204,10 +227,14 @@ export function createAttachmentAdapter(): AttachmentAdapter {
*/
async send(pendingAttachment: PendingAttachment): Promise {
const result = processedAttachments.get(pendingAttachment.id);
+ const imageDataUrl = imageDataUrls.get(pendingAttachment.id);
if (result) {
// Clean up stored result
processedAttachments.delete(pendingAttachment.id);
+ if (imageDataUrl) {
+ imageDataUrls.delete(pendingAttachment.id);
+ }
return {
id: result.id,
@@ -222,6 +249,7 @@ export function createAttachmentAdapter(): AttachmentAdapter {
},
],
extractedContent: result.content,
+ imageDataUrl, // Store data URL for images so they can be displayed after persistence
};
}
@@ -238,6 +266,7 @@ export function createAttachmentAdapter(): AttachmentAdapter {
status: { type: "complete" },
content: [],
extractedContent: "",
+ imageDataUrl, // Still include data URL if available
};
},