+
+
- );
- }
-
- // Error state
- if (isError) {
- return (
-
-
-
-
-
-
Failed to recall memories
- {result?.error &&
{result.error}
}
-
+
+
+ {query ? `Searching memories for "${query}"...` : "Recalling memories..."}
+
- );
- }
+
+ );
+ }
- // Success state with memories
- if (isComplete && result?.status === "success") {
- const memories = result.memories || [];
- const count = result.count || 0;
-
- if (count === 0) {
- return (
-
-
-
-
-
No memories found
-
- );
- }
-
- return (
-
-
-
-
- Recalled {count} {count === 1 ? "memory" : "memories"}
-
-
-
- {memories.slice(0, 5).map((memory: MemoryItem) => (
-
-
- {memory.memory_text}
-
- ))}
- {memories.length > 5 && (
-
...and {memories.length - 5} more
- )}
-
+ // Error state
+ if (isError) {
+ return (
+
+
+
- );
- }
+
+
Failed to recall memories
+ {result?.error &&
{result.error}
}
+
+
+ );
+ }
- // Default/incomplete state
- if (query) {
+ // Success state with memories
+ if (isComplete && result?.status === "success") {
+ const memories = result.memories || [];
+ const count = result.count || 0;
+
+ if (count === 0) {
return (
-
Searching memories for "{query}"
+
No memories found
);
}
- return null;
+ return (
+
+
+
+
+ Recalled {count} {count === 1 ? "memory" : "memories"}
+
+
+
+ {memories.slice(0, 5).map((memory: MemoryItem) => (
+
+
+ {memory.memory_text}
+
+ ))}
+ {memories.length > 5 && (
+
...and {memories.length - 5} more
+ )}
+
+
+ );
+ }
+
+ // Default/incomplete state
+ if (query) {
+ return (
+
+
+
+
+
Searching memories for "{query}"
+
+ );
+ }
+
+ return null;
};
// ============================================================================
diff --git a/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx b/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx
index 84147e94e..c630008db 100644
--- a/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx
+++ b/surfsense_web/components/tool-ui/video-presentation/combined-player.tsx
@@ -1,9 +1,10 @@
"use client";
-import React, { useMemo } from "react";
-import { Player } from "@remotion/player";
-import { Sequence, AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from "remotion";
import { Audio } from "@remotion/media";
+import { Player } from "@remotion/player";
+import type React from "react";
+import { useMemo } from "react";
+import { AbsoluteFill, interpolate, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
import { FPS } from "@/lib/remotion/constants";
export interface CompiledSlide {
@@ -64,9 +65,7 @@ function Watermark() {
);
}
-export function buildSlideWithWatermark(
- SlideComponent: React.ComponentType,
-): React.FC {
+export function buildSlideWithWatermark(SlideComponent: React.ComponentType): React.FC {
const Wrapped: React.FC = () => (
@@ -115,7 +114,7 @@ export function CombinedPlayer({ slides }: CombinedPlayerProps) {
const totalFrames = useMemo(
() => slides.reduce((sum, s) => sum + s.durationInFrames, 0),
- [slides],
+ [slides]
);
return (
diff --git a/surfsense_web/components/tool-ui/video-presentation/errors.ts b/surfsense_web/components/tool-ui/video-presentation/errors.ts
index 75d769522..da006d8c6 100644
--- a/surfsense_web/components/tool-ui/video-presentation/errors.ts
+++ b/surfsense_web/components/tool-ui/video-presentation/errors.ts
@@ -1,7 +1,11 @@
export function getVideoDownloadErrorToast(err: unknown): { title: string; description: string } {
const msg = err instanceof Error ? err.message.toLowerCase() : "";
- if (msg.includes("webcodecs") || msg.includes("canrendermediaonweb") || msg.includes("not support")) {
+ if (
+ msg.includes("webcodecs") ||
+ msg.includes("canrendermediaonweb") ||
+ msg.includes("not support")
+ ) {
return {
title: "Browser Not Supported",
description: "Video rendering requires Chrome, Edge, or Firefox 130+.",
@@ -24,7 +28,11 @@ export function getVideoDownloadErrorToast(err: unknown): { title: string; descr
export function getPptxExportErrorToast(err: unknown): { title: string; description: string } {
const msg = err instanceof Error ? err.message.toLowerCase() : "";
- if (msg.includes("dynamically imported") || msg.includes("failed to fetch") || msg.includes("network")) {
+ if (
+ msg.includes("dynamically imported") ||
+ msg.includes("failed to fetch") ||
+ msg.includes("network")
+ ) {
return {
title: "Export Unavailable",
description: "Could not load the export module. Check your network and try again.",
diff --git a/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx b/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
index 061e0200a..25ff97d20 100644
--- a/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
+++ b/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
@@ -1,9 +1,9 @@
"use client";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { Dot, Download, Loader2, Presentation, X } from "lucide-react";
import { useParams, usePathname } from "next/navigation";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { z } from "zod";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
@@ -13,12 +13,12 @@ import { authenticatedFetch } from "@/lib/auth-utils";
import { compileCheck, compileToComponent } from "@/lib/remotion/compile-check";
import { FPS } from "@/lib/remotion/constants";
import {
- CombinedPlayer,
buildCompositionComponent,
buildSlideWithWatermark,
+ CombinedPlayer,
type CompiledSlide,
} from "./combined-player";
-import { getVideoDownloadErrorToast, getPptxExportErrorToast } from "./errors";
+import { getPptxExportErrorToast, getVideoDownloadErrorToast } from "./errors";
const GenerateVideoPresentationArgsSchema = z.object({
source_content: z.string(),
@@ -50,7 +50,7 @@ const VideoPresentationStatusResponseSchema = z.object({
audio_url: z.string().nullish(),
duration_seconds: z.number().nullish(),
duration_in_frames: z.number().nullish(),
- }),
+ })
)
.nullish(),
scene_codes: z
@@ -59,7 +59,7 @@ const VideoPresentationStatusResponseSchema = z.object({
slide_number: z.number(),
code: z.string(),
title: z.string().nullish(),
- }),
+ })
)
.nullish(),
slide_count: z.number().nullish(),
@@ -69,7 +69,6 @@ type GenerateVideoPresentationArgs = z.infer;
type VideoPresentationStatusResponse = z.infer;
-
function parseStatusResponse(data: unknown): VideoPresentationStatusResponse | null {
const result = VideoPresentationStatusResponseSchema.safeParse(data);
if (!result.success) {
@@ -166,9 +165,7 @@ function VideoPresentationPlayer({
const durationInFrames = slide.duration_in_frames ?? 300;
const check = compileCheck(scene.code);
if (!check.success) {
- console.warn(
- `Slide ${slide.slide_number} failed to compile: ${check.error}`,
- );
+ console.warn(`Slide ${slide.slide_number} failed to compile: ${check.error}`);
continue;
}
@@ -179,9 +176,7 @@ function VideoPresentationPlayer({
title: scene.title ?? slide.title,
code: scene.code,
durationInFrames,
- audioUrl: slide.audio_url
- ? `${backendUrl}${slide.audio_url}`
- : undefined,
+ audioUrl: slide.audio_url ? `${backendUrl}${slide.audio_url}` : undefined,
});
}
@@ -198,17 +193,13 @@ function VideoPresentationPlayer({
try {
let blob: Blob;
if (shareToken) {
- blob = await baseApiService.getBlob(
- new URL(slide.audioUrl).pathname,
- );
+ blob = await baseApiService.getBlob(new URL(slide.audioUrl).pathname);
} else {
const resp = await authenticatedFetch(slide.audioUrl, {
method: "GET",
});
if (!resp.ok) {
- console.warn(
- `Audio fetch ${resp.status} for slide "${slide.title}"`,
- );
+ console.warn(`Audio fetch ${resp.status} for slide "${slide.title}"`);
return { ...slide, audioUrl: undefined };
}
blob = await resp.blob();
@@ -220,7 +211,7 @@ function VideoPresentationPlayer({
console.warn(`Failed to fetch audio for "${slide.title}":`, err);
return { ...slide, audioUrl: undefined };
}
- }),
+ })
);
setCompiledSlides(withBlobs);
@@ -244,7 +235,7 @@ function VideoPresentationPlayer({
const totalDuration = useMemo(
() => compiledSlides.reduce((sum, s) => sum + s.durationInFrames / FPS, 0),
- [compiledSlides],
+ [compiledSlides]
);
const handleDownload = async () => {
@@ -258,9 +249,7 @@ function VideoPresentationPlayer({
abortControllerRef.current = controller;
try {
- const { canRenderMediaOnWeb, renderMediaOnWeb } = await import(
- "@remotion/web-renderer"
- );
+ const { canRenderMediaOnWeb, renderMediaOnWeb } = await import("@remotion/web-renderer");
const formats = [
{ container: "mp4" as const, videoCodec: "h264" as const, ext: "mp4" },
@@ -285,7 +274,7 @@ function VideoPresentationPlayer({
if (!chosen) {
throw new Error(
- "Your browser does not support video rendering (WebCodecs). Please use Chrome, Edge, or Firefox 130+.",
+ "Your browser does not support video rendering (WebCodecs). Please use Chrome, Edge, or Firefox 130+."
);
}
@@ -379,7 +368,7 @@ function VideoPresentationPlayer({
durationInFrames: slide.durationInFrames,
fps: FPS,
style: { width: 1920, height: 1080 },
- }),
+ })
);
});
@@ -419,7 +408,8 @@ function VideoPresentationPlayer({
{title}
- {compiledSlides.length} slides {totalDuration.toFixed(1)}s {FPS}fps
+ {compiledSlides.length} slides {totalDuration.toFixed(1)}s{" "}
+ {FPS}fps
@@ -440,9 +430,7 @@ function VideoPresentationPlayer({
Rendering {renderFormat ?? ""}{" "}
- {renderProgress !== null
- ? `${Math.round(renderProgress * 100)}%`
- : "..."}
+ {renderProgress !== null ? `${Math.round(renderProgress * 100)}%` : "..."}
-
);
}
@@ -564,85 +551,85 @@ function StatusPoller({
return
;
}
-export const GenerateVideoPresentationToolUI = ({ args, result, status }: ToolCallMessagePartProps<
- GenerateVideoPresentationArgs,
- GenerateVideoPresentationResult
->) => {
- const params = useParams();
- const pathname = usePathname();
- const isPublicRoute = pathname?.startsWith("/public/");
- const shareToken =
- isPublicRoute && typeof params?.token === "string" ? params.token : null;
+export const GenerateVideoPresentationToolUI = ({
+ args,
+ result,
+ status,
+}: ToolCallMessagePartProps
) => {
+ const params = useParams();
+ const pathname = usePathname();
+ const isPublicRoute = pathname?.startsWith("/public/");
+ const shareToken = isPublicRoute && typeof params?.token === "string" ? params.token : null;
- const title = args.video_title || "SurfSense Presentation";
+ const title = args.video_title || "SurfSense Presentation";
- if (status.type === "running" || status.type === "requires-action") {
- return ;
- }
+ if (status.type === "running" || status.type === "requires-action") {
+ return ;
+ }
- if (status.type === "incomplete") {
- if (status.reason === "cancelled") {
- return (
-
-
-
Presentation Cancelled
-
- Presentation generation was cancelled
-
-
-
-
Presentation already in progress
+
Presentation Cancelled
- Please wait for the current presentation to complete.
+ Presentation generation was cancelled
);
}
-
- if (result.status === "pending" && result.video_presentation_id) {
+ if (status.reason === "error") {
return (
-
);
}
+ }
- if (result.status === "ready" && result.video_presentation_id) {
- return (
-
- );
- }
+ if (!result) {
+ return ;
+ }
- return ;
+ if (result.status === "failed") {
+ return ;
+ }
+
+ if (result.status === "generating") {
+ return (
+
+
+
Presentation already in progress
+
+ Please wait for the current presentation to complete.
+
+
+
{
- if (typeof src === "string") setLoadedSrc(src);
- onLoad?.(e);
- }}
- onError={(e) => {
- if (typeof src === "string") setErrorSrc(src);
- onError?.(e);
- }}
- {...props}
- />
- )}
-