apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-06 20:15:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore: ran linting

Browse source
This commit is contained in:
Anish Sarkar 2026-03-25 00:27:24 +05:30
parent 323f7f2b4a
commit c674fb3054
37 changed files with 972 additions and 920 deletions
Download patch file Download diff file Expand all files Collapse all files

8
surfsense_web/components/tool-ui/audio.tsx
View file

@ -1,12 +1,6 @@
"use client";
import {
DownloadIcon,
PauseIcon,
PlayIcon,
Volume2Icon,
VolumeXIcon,
} from "lucide-react";
import { DownloadIcon, PauseIcon, PlayIcon, Volume2Icon, VolumeXIcon } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";

59
surfsense_web/components/tool-ui/confluence/create-confluence-page.tsx
View file

@ -457,39 +457,42 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const CreateConfluencePageToolUI = ({ args, result }: ToolCallMessagePartProps<
export const CreateConfluencePageToolUI = ({
args,
result,
}: ToolCallMessagePartProps<
{ title: string; content?: string; space_id?: string },
CreateConfluencePageResult
>) => {
if (!result) return null;
if (!result) return null;
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
return <SuccessCard result={result as SuccessResult} />;
return <SuccessCard result={result as SuccessResult} />;
};

62
surfsense_web/components/tool-ui/confluence/delete-confluence-page.tsx
View file

@ -396,41 +396,43 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const DeleteConfluencePageToolUI = ({ result }: ToolCallMessagePartProps<
export const DeleteConfluencePageToolUI = ({
result,
}: ToolCallMessagePartProps<
{ page_title_or_id: string; delete_from_kb?: boolean },
DeleteConfluencePageResult
>) => {
if (!result) return null;
if (!result) return null;
if (isInterruptResult(result)) {
return (
<ApprovalCard
interruptData={result}
onDecision={(decision) => {
const event = new CustomEvent("hitl-decision", {
detail: { decisions: [decision] },
});
window.dispatchEvent(event);
}}
/>
);
}
if (isInterruptResult(result)) {
return (
<ApprovalCard
interruptData={result}
onDecision={(decision) => {
const event = new CustomEvent("hitl-decision", {
detail: { decisions: [decision] },
});
window.dispatchEvent(event);
}}
/>
);
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isWarningResult(result)) return <WarningCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isWarningResult(result)) return <WarningCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
return <SuccessCard result={result as SuccessResult} />;
return <SuccessCard result={result as SuccessResult} />;
};

61
surfsense_web/components/tool-ui/confluence/update-confluence-page.tsx
View file

@ -493,7 +493,10 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const UpdateConfluencePageToolUI = ({ args, result }: ToolCallMessagePartProps<
export const UpdateConfluencePageToolUI = ({
args,
result,
}: ToolCallMessagePartProps<
{
page_title_or_id: string;
new_title?: string;
@ -501,36 +504,36 @@ export const UpdateConfluencePageToolUI = ({ args, result }: ToolCallMessagePart
},
UpdateConfluencePageResult
>) => {
if (!result) return null;
if (!result) return null;
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
return <SuccessCard result={result as SuccessResult} />;
return <SuccessCard result={result as SuccessResult} />;
};

6
surfsense_web/components/tool-ui/generate-image.tsx
View file

@ -84,7 +84,11 @@ function ParsedImage({ result }: { result: unknown }) {
* Tool UI for generate_image — renders the generated image directly
* from the tool result directly.
*/
export const GenerateImageToolUI = ({ args, result, status }: ToolCallMessagePartProps<GenerateImageArgs, GenerateImageResult>) => {
export const GenerateImageToolUI = ({
args,
result,
status,
}: ToolCallMessagePartProps<GenerateImageArgs, GenerateImageResult>) => {
const prompt = args.prompt || "Generating image...";
if (status.type === "running" || status.type === "requires-action") {

146
surfsense_web/components/tool-ui/generate-podcast.tsx
View file

@ -372,89 +372,91 @@ function PodcastStatusPoller({ podcastId, title }: { podcastId: number; title: s
*
* It polls for task completion and auto-updates when the podcast is ready.
*/
export const GeneratePodcastToolUI = ({ args, result, status }: ToolCallMessagePartProps<GeneratePodcastArgs, GeneratePodcastResult>) => {
const title = args.podcast_title || "SurfSense Podcast";
export const GeneratePodcastToolUI = ({
args,
result,
status,
}: ToolCallMessagePartProps<GeneratePodcastArgs, GeneratePodcastResult>) => {
const title = args.podcast_title || "SurfSense Podcast";
// Loading state - tool is still running (agent processing)
if (status.type === "running" || status.type === "requires-action") {
return <PodcastGeneratingState title={title} />;
}
// Loading state - tool is still running (agent processing)
if (status.type === "running" || status.type === "requires-action") {
return <PodcastGeneratingState title={title} />;
}
// Incomplete/cancelled state
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-muted-foreground">Podcast Cancelled</p>
<p className="text-xs text-muted-foreground mt-0.5">
Podcast generation was cancelled
</p>
</div>
</div>
);
}
if (status.reason === "error") {
return (
<PodcastErrorState
title={title}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
// No result yet
if (!result) {
return <PodcastGeneratingState title={title} />;
}
// Failed result (new: "failed", legacy: "error")
if (result.status === "failed" || result.status === "error") {
return <PodcastErrorState title={title} error={result.error || "Generation failed"} />;
}
// Already generating - show simple warning, don't create another poller
// The FIRST tool call will display the podcast when ready
// (new: "generating", legacy: "already_generating")
if (result.status === "generating" || result.status === "already_generating") {
// Incomplete/cancelled state
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-foreground">Podcast already in progress</p>
<p className="text-xs text-muted-foreground mt-0.5">
Please wait for the current podcast to complete.
</p>
<p className="text-sm font-semibold text-muted-foreground">Podcast Cancelled</p>
<p className="text-xs text-muted-foreground mt-0.5">Podcast generation was cancelled</p>
</div>
</div>
);
}
// Pending - poll for completion (new: "pending" with podcast_id)
if (result.status === "pending" && result.podcast_id) {
return <PodcastStatusPoller podcastId={result.podcast_id} title={result.title || title} />;
}
// Ready with podcast_id (new: "ready", legacy: "success")
if ((result.status === "ready" || result.status === "success") && result.podcast_id) {
return <PodcastPlayer podcastId={result.podcast_id} title={result.title || title} />;
}
// Legacy: old chats with Celery task_id (status: "processing" or "success" without podcast_id)
// These can't be recovered since the old task polling endpoint no longer exists
if (result.task_id && !result.podcast_id) {
if (status.reason === "error") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-muted-foreground">Podcast Unavailable</p>
<p className="text-xs text-muted-foreground mt-0.5">
This podcast was generated with an older version. Please generate a new one.
</p>
</div>
</div>
<PodcastErrorState
title={title}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
// Fallback - missing required data
return <PodcastErrorState title={title} error="Missing podcast ID" />;
// No result yet
if (!result) {
return <PodcastGeneratingState title={title} />;
}
// Failed result (new: "failed", legacy: "error")
if (result.status === "failed" || result.status === "error") {
return <PodcastErrorState title={title} error={result.error || "Generation failed"} />;
}
// Already generating - show simple warning, don't create another poller
// The FIRST tool call will display the podcast when ready
// (new: "generating", legacy: "already_generating")
if (result.status === "generating" || result.status === "already_generating") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-foreground">Podcast already in progress</p>
<p className="text-xs text-muted-foreground mt-0.5">
Please wait for the current podcast to complete.
</p>
</div>
</div>
);
}
// Pending - poll for completion (new: "pending" with podcast_id)
if (result.status === "pending" && result.podcast_id) {
return <PodcastStatusPoller podcastId={result.podcast_id} title={result.title || title} />;
}
// Ready with podcast_id (new: "ready", legacy: "success")
if ((result.status === "ready" || result.status === "success") && result.podcast_id) {
return <PodcastPlayer podcastId={result.podcast_id} title={result.title || title} />;
}
// Legacy: old chats with Celery task_id (status: "processing" or "success" without podcast_id)
// These can't be recovered since the old task polling endpoint no longer exists
if (result.task_id && !result.podcast_id) {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-muted-foreground">Podcast Unavailable</p>
<p className="text-xs text-muted-foreground mt-0.5">
This podcast was generated with an older version. Please generate a new one.
</p>
</div>
</div>
);
}
// Fallback - missing required data
return <PodcastErrorState title={title} error="Missing podcast ID" />;
};

95
surfsense_web/components/tool-ui/generate-report.tsx
View file

@ -273,61 +273,62 @@ function ReportCard({
* Generate Report Tool UI — renders custom UI inline in chat
* when the generate_report tool is called by the agent.
*/
export const GenerateReportToolUI = ({ args, result, status }: ToolCallMessagePartProps<GenerateReportArgs, GenerateReportResult>) => {
const params = useParams();
const pathname = usePathname();
const isPublicRoute = pathname?.startsWith("/public/");
const shareToken = isPublicRoute && typeof params?.token === "string" ? params.token : null;
export const GenerateReportToolUI = ({
args,
result,
status,
}: ToolCallMessagePartProps<GenerateReportArgs, GenerateReportResult>) => {
const params = useParams();
const pathname = usePathname();
const isPublicRoute = pathname?.startsWith("/public/");
const shareToken = isPublicRoute && typeof params?.token === "string" ? params.token : null;
const topic = args.topic || "Report";
const topic = args.topic || "Report";
const sawRunningRef = useRef(false);
if (status.type === "running" || status.type === "requires-action") {
sawRunningRef.current = true;
const sawRunningRef = useRef(false);
if (status.type === "running" || status.type === "requires-action") {
sawRunningRef.current = true;
}
if (status.type === "running" || status.type === "requires-action") {
return <ReportGeneratingState topic={topic} />;
}
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return <ReportCancelledState />;
}
if (status.type === "running" || status.type === "requires-action") {
return <ReportGeneratingState topic={topic} />;
}
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return <ReportCancelledState />;
}
if (status.reason === "error") {
return (
<ReportErrorState
title={topic}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
if (!result) {
return <ReportGeneratingState topic={topic} />;
}
if (result.status === "failed") {
if (status.reason === "error") {
return (
<ReportErrorState
title={result.title || topic}
error={result.error || "Generation failed"}
title={topic}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
if (result.status === "ready" && result.report_id) {
return (
<ReportCard
reportId={result.report_id}
title={result.title || topic}
wordCount={result.word_count ?? undefined}
shareToken={shareToken}
autoOpen={sawRunningRef.current}
/>
);
}
if (!result) {
return <ReportGeneratingState topic={topic} />;
}
return <ReportErrorState title={topic} error="Missing report ID" />;
if (result.status === "failed") {
return (
<ReportErrorState title={result.title || topic} error={result.error || "Generation failed"} />
);
}
if (result.status === "ready" && result.report_id) {
return (
<ReportCard
reportId={result.report_id}
title={result.title || topic}
wordCount={result.word_count ?? undefined}
shareToken={shareToken}
autoOpen={sawRunningRef.current}
/>
);
}
return <ReportErrorState title={topic} error="Missing report ID" />;
};

8
surfsense_web/components/tool-ui/google-drive/create-file.tsx
View file

@ -492,7 +492,13 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const CreateGoogleDriveFileToolUI = ({ args, result }: ToolCallMessagePartProps<{ name: string; file_type: string; content?: string }, CreateGoogleDriveFileResult>) => {
export const CreateGoogleDriveFileToolUI = ({
args,
result,
}: ToolCallMessagePartProps<
{ name: string; file_type: string; content?: string },
CreateGoogleDriveFileResult
>) => {
if (!result) return null;
if (isInterruptResult(result)) {

7
surfsense_web/components/tool-ui/google-drive/trash-file.tsx
View file

@ -410,7 +410,12 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const DeleteGoogleDriveFileToolUI = ({ result }: ToolCallMessagePartProps<{ file_name: string; delete_from_kb?: boolean }, DeleteGoogleDriveFileResult>) => {
export const DeleteGoogleDriveFileToolUI = ({
result,
}: ToolCallMessagePartProps<
{ file_name: string; delete_from_kb?: boolean },
DeleteGoogleDriveFileResult
>) => {
if (!result) return null;
if (isInterruptResult(result)) {

55
surfsense_web/components/tool-ui/image/index.tsx
View file

@ -4,9 +4,9 @@ import { ExternalLinkIcon, ImageIcon, SparklesIcon } from "lucide-react";
import NextImage from "next/image";
import { Component, type ReactNode, useState } from "react";
import { z } from "zod";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { cn } from "@/lib/utils";
/**
@ -145,14 +145,14 @@ export class ImageErrorBoundary extends Component<
render() {
if (this.state.hasError) {
return (
<Card className="w-full max-w-md overflow-hidden rounded-2xl border-0 shadow-none select-none">
<div className="aspect-square bg-muted flex items-center justify-center">
<div className="flex flex-col items-center gap-2 text-muted-foreground">
<ImageIcon className="size-8" />
<p className="text-sm">Failed to load image</p>
<Card className="w-full max-w-md overflow-hidden rounded-2xl border-0 shadow-none select-none">
<div className="aspect-square bg-muted flex items-center justify-center">
<div className="flex flex-col items-center gap-2 text-muted-foreground">
<ImageIcon className="size-8" />
<p className="text-sm">Failed to load image</p>
</div>
</div>
</div>
</Card>
</Card>
);
}
@ -165,7 +165,10 @@ export class ImageErrorBoundary extends Component<
*/
export function ImageSkeleton({ maxWidth = "512px" }: { maxWidth?: string }) {
return (
<Card className="w-full overflow-hidden rounded-2xl border-0 shadow-none select-none animate-pulse" style={{ maxWidth }}>
<Card
className="w-full overflow-hidden rounded-2xl border-0 shadow-none select-none animate-pulse"
style={{ maxWidth }}
>
<div className="aspect-square bg-muted flex items-center justify-center">
<ImageIcon className="size-12 text-muted-foreground/30" />
</div>
@ -176,9 +179,18 @@ export function ImageSkeleton({ maxWidth = "512px" }: { maxWidth?: string }) {
/**
* Image Loading State
*/
export function ImageLoading({ title = "Loading", maxWidth = "512px" }: { title?: string; maxWidth?: string }) {
export function ImageLoading({
title = "Loading",
maxWidth = "512px",
}: {
title?: string;
maxWidth?: string;
}) {
return (
<Card className="w-full overflow-hidden rounded-2xl border-0 shadow-none select-none" style={{ maxWidth }}>
<Card
className="w-full overflow-hidden rounded-2xl border-0 shadow-none select-none"
style={{ maxWidth }}
>
<div className="aspect-square bg-muted flex items-center justify-center">
<TextShimmerLoader text={title} size="md" />
</div>
@ -212,7 +224,7 @@ export function Image({
const [imageError, setImageError] = useState(false);
const [imageLoaded, setImageLoaded] = useState(false);
const isGenerated = domain === "ai-generated";
const displayDomain = isGenerated ? "AI Generated" : (domain || source?.label);
const displayDomain = isGenerated ? "AI Generated" : domain || source?.label;
const isAutoRatio = !ratio || ratio === "auto";
const handleClick = () => {
@ -224,7 +236,14 @@ export function Image({
if (imageError) {
return (
<Card id={id} className={cn("w-full overflow-hidden rounded-2xl border-0 shadow-none select-none", className)} style={{ maxWidth }}>
<Card
id={id}
className={cn(
"w-full overflow-hidden rounded-2xl border-0 shadow-none select-none",
className
)}
style={{ maxWidth }}
>
<div className="aspect-square bg-muted flex items-center justify-center">
<div className="flex flex-col items-center gap-2 text-muted-foreground">
<ImageIcon className="size-8" />
@ -259,11 +278,11 @@ export function Image({
{isAutoRatio ? (
/* Auto ratio: image renders at natural dimensions, no cropping */
<>
{!imageLoaded && (
<div className="aspect-square flex items-center justify-center">
<TextShimmerLoader text="Loading" size="md" />
</div>
)}
{!imageLoaded && (
<div className="aspect-square flex items-center justify-center">
<TextShimmerLoader text="Loading" size="md" />
</div>
)}
<NextImage
src={src}
alt={alt}

2
surfsense_web/components/tool-ui/index.ts
View file

@ -16,7 +16,6 @@ export {
} from "./generate-image";
export { GeneratePodcastToolUI } from "./generate-podcast";
export { GenerateReportToolUI } from "./generate-report";
export { GenerateVideoPresentationToolUI } from "./video-presentation";
export { CreateGoogleDriveFileToolUI, DeleteGoogleDriveFileToolUI } from "./google-drive";
export {
Image,
@ -62,4 +61,5 @@ export {
SaveMemoryResultSchema,
SaveMemoryToolUI,
} from "./user-memory";
export { GenerateVideoPresentationToolUI } from "./video-presentation";
export { type WriteTodosData, WriteTodosSchema, WriteTodosToolUI } from "./write-todos";

59
surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
View file

@ -536,7 +536,10 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const CreateJiraIssueToolUI = ({ args, result }: ToolCallMessagePartProps<
export const CreateJiraIssueToolUI = ({
args,
result,
}: ToolCallMessagePartProps<
{
project_key: string;
summary: string;
@ -546,35 +549,35 @@ export const CreateJiraIssueToolUI = ({ args, result }: ToolCallMessagePartProps
},
CreateJiraIssueResult
>) => {
if (!result) return null;
if (!result) return null;
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
return <SuccessCard result={result as SuccessResult} />;
return <SuccessCard result={result as SuccessResult} />;
};

62
surfsense_web/components/tool-ui/jira/delete-jira-issue.tsx
View file

@ -393,41 +393,43 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const DeleteJiraIssueToolUI = ({ result }: ToolCallMessagePartProps<
export const DeleteJiraIssueToolUI = ({
result,
}: ToolCallMessagePartProps<
{ issue_title_or_key: string; delete_from_kb?: boolean },
DeleteJiraIssueResult
>) => {
if (!result) return null;
if (!result) return null;
if (isInterruptResult(result)) {
return (
<ApprovalCard
interruptData={result}
onDecision={(decision) => {
const event = new CustomEvent("hitl-decision", {
detail: { decisions: [decision] },
});
window.dispatchEvent(event);
}}
/>
);
}
if (isInterruptResult(result)) {
return (
<ApprovalCard
interruptData={result}
onDecision={(decision) => {
const event = new CustomEvent("hitl-decision", {
detail: { decisions: [decision] },
});
window.dispatchEvent(event);
}}
/>
);
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isWarningResult(result)) return <WarningCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isWarningResult(result)) return <WarningCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
return <SuccessCard result={result as SuccessResult} />;
return <SuccessCard result={result as SuccessResult} />;
};

61
surfsense_web/components/tool-ui/jira/update-jira-issue.tsx
View file

@ -553,7 +553,10 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const UpdateJiraIssueToolUI = ({ args, result }: ToolCallMessagePartProps<
export const UpdateJiraIssueToolUI = ({
args,
result,
}: ToolCallMessagePartProps<
{
issue_title_or_key: string;
new_summary?: string;
@ -562,36 +565,36 @@ export const UpdateJiraIssueToolUI = ({ args, result }: ToolCallMessagePartProps
},
UpdateJiraIssueResult
>) => {
if (!result) return null;
if (!result) return null;
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (isInterruptResult(result)) {
return (
<ApprovalCard
args={args}
interruptData={result}
onDecision={(decision) => {
window.dispatchEvent(
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
);
}}
/>
);
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (
typeof result === "object" &&
result !== null &&
"status" in result &&
(result as { status: string }).status === "rejected"
) {
return null;
}
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
if (isInsufficientPermissionsResult(result))
return <InsufficientPermissionsCard result={result} />;
if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
if (isErrorResult(result)) return <ErrorCard result={result} />;
return <SuccessCard result={result as SuccessResult} />;
return <SuccessCard result={result as SuccessResult} />;
};

5
surfsense_web/components/tool-ui/linear/create-linear-issue.tsx
View file

@ -605,7 +605,10 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const CreateLinearIssueToolUI = ({ args, result }: ToolCallMessagePartProps<{ title: string; description?: string }, CreateLinearIssueResult>) => {
export const CreateLinearIssueToolUI = ({
args,
result,
}: ToolCallMessagePartProps<{ title: string; description?: string }, CreateLinearIssueResult>) => {
if (!result) return null;
if (isInterruptResult(result)) {

7
surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
View file

@ -360,7 +360,12 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const DeleteLinearIssueToolUI = ({ result }: ToolCallMessagePartProps<{ issue_ref: string; delete_from_kb?: boolean }, DeleteLinearIssueResult>) => {
export const DeleteLinearIssueToolUI = ({
result,
}: ToolCallMessagePartProps<
{ issue_ref: string; delete_from_kb?: boolean },
DeleteLinearIssueResult
>) => {
if (!result) return null;
if (isInterruptResult(result)) {

24
surfsense_web/components/tool-ui/linear/update-linear-issue.tsx
View file

@ -739,15 +739,21 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const UpdateLinearIssueToolUI = ({ args, result }: ToolCallMessagePartProps<{
issue_ref: string;
new_title?: string;
new_description?: string;
new_state_name?: string;
new_assignee_email?: string;
new_priority?: number;
new_label_names?: string[];
}, UpdateLinearIssueResult>) => {
export const UpdateLinearIssueToolUI = ({
args,
result,
}: ToolCallMessagePartProps<
{
issue_ref: string;
new_title?: string;
new_description?: string;
new_state_name?: string;
new_assignee_email?: string;
new_priority?: number;
new_label_names?: string[];
},
UpdateLinearIssueResult
>) => {
if (!result) return null;
if (isInterruptResult(result)) {

5
surfsense_web/components/tool-ui/notion/create-notion-page.tsx
View file

@ -445,7 +445,10 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const CreateNotionPageToolUI = ({ args, result }: ToolCallMessagePartProps<{ title: string; content: string }, CreateNotionPageResult>) => {
export const CreateNotionPageToolUI = ({
args,
result,
}: ToolCallMessagePartProps<{ title: string; content: string }, CreateNotionPageResult>) => {
if (!result) return null;
if (isInterruptResult(result)) {

7
surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
View file

@ -372,7 +372,12 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const DeleteNotionPageToolUI = ({ result }: ToolCallMessagePartProps<{ page_title: string; delete_from_kb?: boolean }, DeleteNotionPageResult>) => {
export const DeleteNotionPageToolUI = ({
result,
}: ToolCallMessagePartProps<
{ page_title: string; delete_from_kb?: boolean },
DeleteNotionPageResult
>) => {
if (!result) return null;
if (isInterruptResult(result)) {

5
surfsense_web/components/tool-ui/notion/update-notion-page.tsx
View file

@ -395,7 +395,10 @@ function SuccessCard({ result }: { result: SuccessResult }) {
);
}
export const UpdateNotionPageToolUI = ({ args, result }: ToolCallMessagePartProps<{ page_title: string; content: string }, UpdateNotionPageResult>) => {
export const UpdateNotionPageToolUI = ({
args,
result,
}: ToolCallMessagePartProps<{ page_title: string; content: string }, UpdateNotionPageResult>) => {
if (!result) return null;
if (isInterruptResult(result)) {

56
surfsense_web/components/tool-ui/sandbox-execute.tsx
View file

@ -380,38 +380,42 @@ function ExecuteCompleted({
// Tool UI
// ============================================================================
export const SandboxExecuteToolUI = ({ args, result, status }: ToolCallMessagePartProps<ExecuteArgs, ExecuteResult>) => {
const command = args.command || "…";
export const SandboxExecuteToolUI = ({
args,
result,
status,
}: ToolCallMessagePartProps<ExecuteArgs, ExecuteResult>) => {
const command = args.command || "…";
if (status.type === "running" || status.type === "requires-action") {
return <ExecuteLoading command={command} />;
if (status.type === "running" || status.type === "requires-action") {
return <ExecuteLoading command={command} />;
}
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return <ExecuteCancelledState command={command} />;
}
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return <ExecuteCancelledState command={command} />;
}
if (status.reason === "error") {
return (
<ExecuteErrorState
command={command}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
if (status.reason === "error") {
return (
<ExecuteErrorState
command={command}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
if (!result) {
return <ExecuteLoading command={command} />;
}
if (!result) {
return <ExecuteLoading command={command} />;
}
if (result.error && !result.result && !result.output) {
return <ExecuteErrorState command={command} error={result.error} />;
}
if (result.error && !result.result && !result.output) {
return <ExecuteErrorState command={command} error={result.error} />;
}
const parsed = parseExecuteResult(result);
const threadId = result.thread_id || null;
return <ExecuteCompleted command={command} parsed={parsed} threadId={threadId} />;
const parsed = parseExecuteResult(result);
const threadId = result.thread_id || null;
return <ExecuteCompleted command={command} parsed={parsed} threadId={threadId} />;
};
export { ExecuteArgsSchema, ExecuteResultSchema, type ExecuteArgs, type ExecuteResult };

304
surfsense_web/components/tool-ui/user-memory.tsx
View file

@ -80,184 +80,192 @@ function CategoryBadge({ category }: { category: string }) {
// Save Memory Tool UI
// ============================================================================
export const SaveMemoryToolUI = ({ args, result, status }: ToolCallMessagePartProps<SaveMemoryArgs, SaveMemoryResult>) => {
const isRunning = status.type === "running" || status.type === "requires-action";
const isComplete = status.type === "complete";
const isError = result?.status === "error";
export const SaveMemoryToolUI = ({
args,
result,
status,
}: ToolCallMessagePartProps<SaveMemoryArgs, SaveMemoryResult>) => {
const isRunning = status.type === "running" || status.type === "requires-action";
const isComplete = status.type === "complete";
const isError = result?.status === "error";
// Parse args safely
const parsedArgs = SaveMemoryArgsSchema.safeParse(args);
const content = parsedArgs.success ? parsedArgs.data.content : "";
const category = parsedArgs.success ? parsedArgs.data.category : "fact";
// Parse args safely
const parsedArgs = SaveMemoryArgsSchema.safeParse(args);
const content = parsedArgs.success ? parsedArgs.data.content : "";
const category = parsedArgs.success ? parsedArgs.data.category : "fact";
// Loading state
if (isRunning) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
<Loader2Icon className="size-4 animate-spin text-primary" />
</div>
<div className="flex-1">
<span className="text-sm text-muted-foreground">Saving to memory...</span>
</div>
// Loading state
if (isRunning) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
<Loader2Icon className="size-4 animate-spin text-primary" />
</div>
);
}
// Error state
if (isError) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-destructive/10">
<XIcon className="size-4 text-destructive" />
</div>
<div className="flex-1">
<span className="text-sm text-destructive">Failed to save memory</span>
{result?.error && <p className="mt-1 text-xs text-destructive/70">{result.error}</p>}
</div>
<div className="flex-1">
<span className="text-sm text-muted-foreground">Saving to memory...</span>
</div>
);
}
</div>
);
}
// Success state
if (isComplete && result?.status === "saved") {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border border-primary/20 bg-primary/5 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
<BrainIcon className="size-4 text-primary" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<CheckIcon className="size-3 text-green-500 shrink-0" />
<span className="text-sm font-medium text-foreground">Memory saved</span>
<CategoryBadge category={category} />
</div>
<p className="mt-1 truncate text-sm text-muted-foreground">{content}</p>
</div>
// Error state
if (isError) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-destructive/10">
<XIcon className="size-4 text-destructive" />
</div>
);
}
// Default/incomplete state - show what's being saved
if (content) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-muted">
<BrainIcon className="size-4 text-muted-foreground" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">Saving memory</span>
<CategoryBadge category={category} />
</div>
<p className="mt-1 truncate text-sm text-muted-foreground">{content}</p>
</div>
<div className="flex-1">
<span className="text-sm text-destructive">Failed to save memory</span>
{result?.error && <p className="mt-1 text-xs text-destructive/70">{result.error}</p>}
</div>
);
}
</div>
);
}
return null;
// Success state
if (isComplete && result?.status === "saved") {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border border-primary/20 bg-primary/5 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
<BrainIcon className="size-4 text-primary" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<CheckIcon className="size-3 text-green-500 shrink-0" />
<span className="text-sm font-medium text-foreground">Memory saved</span>
<CategoryBadge category={category} />
</div>
<p className="mt-1 truncate text-sm text-muted-foreground">{content}</p>
</div>
</div>
);
}
// Default/incomplete state - show what's being saved
if (content) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-muted">
<BrainIcon className="size-4 text-muted-foreground" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">Saving memory</span>
<CategoryBadge category={category} />
</div>
<p className="mt-1 truncate text-sm text-muted-foreground">{content}</p>
</div>
</div>
);
}
return null;
};
// ============================================================================
// Recall Memory Tool UI
// ============================================================================
export const RecallMemoryToolUI = ({ args, result, status }: ToolCallMessagePartProps<RecallMemoryArgs, RecallMemoryResult>) => {
const isRunning = status.type === "running" || status.type === "requires-action";
const isComplete = status.type === "complete";
const isError = result?.status === "error";
export const RecallMemoryToolUI = ({
args,
result,
status,
}: ToolCallMessagePartProps<RecallMemoryArgs, RecallMemoryResult>) => {
const isRunning = status.type === "running" || status.type === "requires-action";
const isComplete = status.type === "complete";
const isError = result?.status === "error";
// Parse args safely
const parsedArgs = RecallMemoryArgsSchema.safeParse(args);
const query = parsedArgs.success ? parsedArgs.data.query : null;
// Parse args safely
const parsedArgs = RecallMemoryArgsSchema.safeParse(args);
const query = parsedArgs.success ? parsedArgs.data.query : null;
// Loading state
if (isRunning) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
<Loader2Icon className="size-4 animate-spin text-primary" />
</div>
<div className="flex-1">
<span className="text-sm text-muted-foreground">
{query ? `Searching memories for "${query}"...` : "Recalling memories..."}
</span>
</div>
// Loading state
if (isRunning) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10">
<Loader2Icon className="size-4 animate-spin text-primary" />
</div>
);
}
// Error state
if (isError) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-destructive/10">
<XIcon className="size-4 text-destructive" />
</div>
<div className="flex-1">
<span className="text-sm text-destructive">Failed to recall memories</span>
{result?.error && <p className="mt-1 text-xs text-destructive/70">{result.error}</p>}
</div>
<div className="flex-1">
<span className="text-sm text-muted-foreground">
{query ? `Searching memories for "${query}"...` : "Recalling memories..."}
</span>
</div>
);
}
</div>
);
}
// Success state with memories
if (isComplete && result?.status === "success") {
const memories = result.memories || [];
const count = result.count || 0;
if (count === 0) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-muted">
<SearchIcon className="size-4 text-muted-foreground" />
</div>
<span className="text-sm text-muted-foreground">No memories found</span>
</div>
);
}
return (
<div className="my-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex items-center gap-2 mb-2">
<BrainIcon className="size-4 text-primary" />
<span className="text-sm font-medium text-foreground">
Recalled {count} {count === 1 ? "memory" : "memories"}
</span>
</div>
<div className="space-y-2">
{memories.slice(0, 5).map((memory: MemoryItem) => (
<div
key={memory.id}
className="flex items-start gap-2 rounded-md bg-muted/50 px-3 py-2"
>
<CategoryBadge category={memory.category} />
<span className="text-sm text-muted-foreground flex-1">{memory.memory_text}</span>
</div>
))}
{memories.length > 5 && (
<p className="text-xs text-muted-foreground">...and {memories.length - 5} more</p>
)}
</div>
// Error state
if (isError) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-destructive/10">
<XIcon className="size-4 text-destructive" />
</div>
);
}
<div className="flex-1">
<span className="text-sm text-destructive">Failed to recall memories</span>
{result?.error && <p className="mt-1 text-xs text-destructive/70">{result.error}</p>}
</div>
</div>
);
}
// 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 (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-muted">
<SearchIcon className="size-4 text-muted-foreground" />
</div>
<span className="text-sm text-muted-foreground">Searching memories for "{query}"</span>
<span className="text-sm text-muted-foreground">No memories found</span>
</div>
);
}
return null;
return (
<div className="my-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex items-center gap-2 mb-2">
<BrainIcon className="size-4 text-primary" />
<span className="text-sm font-medium text-foreground">
Recalled {count} {count === 1 ? "memory" : "memories"}
</span>
</div>
<div className="space-y-2">
{memories.slice(0, 5).map((memory: MemoryItem) => (
<div
key={memory.id}
className="flex items-start gap-2 rounded-md bg-muted/50 px-3 py-2"
>
<CategoryBadge category={memory.category} />
<span className="text-sm text-muted-foreground flex-1">{memory.memory_text}</span>
</div>
))}
{memories.length > 5 && (
<p className="text-xs text-muted-foreground">...and {memories.length - 5} more</p>
)}
</div>
</div>
);
}
// Default/incomplete state
if (query) {
return (
<div className="my-3 flex items-center gap-3 rounded-lg border bg-card/60 px-4 py-3">
<div className="flex size-8 items-center justify-center rounded-full bg-muted">
<SearchIcon className="size-4 text-muted-foreground" />
</div>
<span className="text-sm text-muted-foreground">Searching memories for "{query}"</span>
</div>
);
}
return null;
};
// ============================================================================

13
surfsense_web/components/tool-ui/video-presentation/combined-player.tsx
View file

@ -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 = () => (
<AbsoluteFill>
<SlideComponent />
@ -115,7 +114,7 @@ export function CombinedPlayer({ slides }: CombinedPlayerProps) {
const totalFrames = useMemo(
() => slides.reduce((sum, s) => sum + s.durationInFrames, 0),
[slides],
[slides]
);
return (

12
surfsense_web/components/tool-ui/video-presentation/errors.ts
View file

@ -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.",

173
surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
View file

@ -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<typeof GenerateVideoPresentationArg
type GenerateVideoPresentationResult = z.infer<typeof GenerateVideoPresentationResultSchema>;
type VideoPresentationStatusResponse = z.infer<typeof VideoPresentationStatusResponseSchema>;
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({
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-foreground line-clamp-2">{title}</p>
<p className="text-xs text-muted-foreground mt-0.5 flex items-center">
{compiledSlides.length} slides <Dot className="size-4" /> {totalDuration.toFixed(1)}s <Dot className="size-4" /> {FPS}fps
{compiledSlides.length} slides <Dot className="size-4" /> {totalDuration.toFixed(1)}s{" "}
<Dot className="size-4" /> {FPS}fps
</p>
</div>
@ -440,9 +430,7 @@ function VideoPresentationPlayer({
<Loader2 className="size-3.5 animate-spin text-muted-foreground" />
<span className="text-xs font-medium text-muted-foreground">
Rendering {renderFormat ?? ""}{" "}
{renderProgress !== null
? `${Math.round(renderProgress * 100)}%`
: "..."}
{renderProgress !== null ? `${Math.round(renderProgress * 100)}%` : "..."}
</span>
<div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
<div
@ -493,7 +481,6 @@ function VideoPresentationPlayer({
</>
)}
</div>
</div>
);
}
@ -564,85 +551,85 @@ function StatusPoller({
return <ErrorState title={title} error="Unexpected state" />;
}
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<GenerateVideoPresentationArgs, GenerateVideoPresentationResult>) => {
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 <GeneratingState title={title} />;
}
if (status.type === "running" || status.type === "requires-action") {
return <GeneratingState title={title} />;
}
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-muted-foreground">Presentation Cancelled</p>
<p className="text-xs text-muted-foreground mt-0.5">
Presentation generation was cancelled
</p>
</div>
</div>
);
}
if (status.reason === "error") {
return (
<ErrorState
title={title}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
if (!result) {
return <GeneratingState title={title} />;
}
if (result.status === "failed") {
return <ErrorState title={title} error={result.error || "Generation failed"} />;
}
if (result.status === "generating") {
if (status.type === "incomplete") {
if (status.reason === "cancelled") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-foreground">Presentation already in progress</p>
<p className="text-sm font-semibold text-muted-foreground">Presentation Cancelled</p>
<p className="text-xs text-muted-foreground mt-0.5">
Please wait for the current presentation to complete.
Presentation generation was cancelled
</p>
</div>
</div>
);
}
if (result.status === "pending" && result.video_presentation_id) {
if (status.reason === "error") {
return (
<StatusPoller
presentationId={result.video_presentation_id}
title={result.title || title}
shareToken={shareToken}
<ErrorState
title={title}
error={typeof status.error === "string" ? status.error : "An error occurred"}
/>
);
}
}
if (result.status === "ready" && result.video_presentation_id) {
return (
<VideoPresentationPlayer
presentationId={result.video_presentation_id}
title={result.title || title}
shareToken={shareToken}
/>
);
}
if (!result) {
return <GeneratingState title={title} />;
}
return <ErrorState title={title} error="Missing presentation ID" />;
if (result.status === "failed") {
return <ErrorState title={title} error={result.error || "Generation failed"} />;
}
if (result.status === "generating") {
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
<div className="px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-foreground">Presentation already in progress</p>
<p className="text-xs text-muted-foreground mt-0.5">
Please wait for the current presentation to complete.
</p>
</div>
</div>
);
}
if (result.status === "pending" && result.video_presentation_id) {
return (
<StatusPoller
presentationId={result.video_presentation_id}
title={result.title || title}
shareToken={shareToken}
/>
);
}
if (result.status === "ready" && result.video_presentation_id) {
return (
<VideoPresentationPlayer
presentationId={result.video_presentation_id}
title={result.title || title}
shareToken={shareToken}
/>
);
}
return <ErrorState title={title} error="Missing presentation ID" />;
};