mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-26 01:06:23 +02:00
feat: add public chat frontend
This commit is contained in:
CREDO23
parent
9d7259aab9
commit
37adc54d6a
9 changed files with 415 additions and 1 deletions
56
surfsense_web/components/public-chat/public-chat-footer.tsx
Normal file
56
surfsense_web/components/public-chat/public-chat-footer.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
"use client";
|
||||
|
||||
import { Copy, Loader2 } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { publicChatApiService } from "@/lib/apis/public-chat-api.service";
|
||||
import { getBearerToken } from "@/lib/auth-utils";
|
||||
|
||||
interface PublicChatFooterProps {
|
||||
shareToken: string;
|
||||
}
|
||||
|
||||
export function PublicChatFooter({ shareToken }: PublicChatFooterProps) {
|
||||
const router = useRouter();
|
||||
const [isCloning, setIsCloning] = useState(false);
|
||||
|
||||
const handleCopyAndContinue = async () => {
|
||||
const token = getBearerToken();
|
||||
|
||||
if (!token) {
|
||||
const returnUrl = encodeURIComponent(`/public/${shareToken}`);
|
||||
router.push(`/login?returnUrl=${returnUrl}&action=clone`);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCloning(true);
|
||||
|
||||
try {
|
||||
await publicChatApiService.clonePublicChat({
|
||||
share_token: shareToken,
|
||||
});
|
||||
|
||||
toast.success("Copying chat to your account...", {
|
||||
description: "You'll be notified when it's ready.",
|
||||
});
|
||||
|
||||
router.push("/dashboard");
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : "Failed to copy chat";
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setIsCloning(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex max-w-(--thread-max-width) items-center justify-center px-4 py-4">
|
||||
<Button size="lg" onClick={handleCopyAndContinue} disabled={isCloning} className="gap-2">
|
||||
{isCloning ? <Loader2 className="size-4 animate-spin" /> : <Copy className="size-4" />}
|
||||
Copy and continue this chat
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
surfsense_web/components/public-chat/public-chat-header.tsx
Normal file
34
surfsense_web/components/public-chat/public-chat-header.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { formatDistanceToNow } from "date-fns";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
interface PublicChatHeaderProps {
|
||||
title: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function PublicChatHeader({ title, createdAt }: PublicChatHeaderProps) {
|
||||
const timeAgo = formatDistanceToNow(new Date(createdAt), { addSuffix: true });
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-10 -mx-4 mb-4 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="mx-auto flex max-w-(--thread-max-width) items-center justify-between py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="shrink-0">
|
||||
<Image
|
||||
src="/surfsenselogo.png"
|
||||
alt="SurfSense"
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded"
|
||||
/>
|
||||
</Link>
|
||||
<div className="min-w-0">
|
||||
<h1 className="truncate font-medium">{title}</h1>
|
||||
<p className="text-xs text-muted-foreground">{timeAgo}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
58
surfsense_web/components/public-chat/public-chat-view.tsx
Normal file
58
surfsense_web/components/public-chat/public-chat-view.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
"use client";
|
||||
|
||||
import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
|
||||
import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
|
||||
import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
|
||||
import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
|
||||
import { usePublicChat } from "@/hooks/use-public-chat";
|
||||
import { usePublicChatRuntime } from "@/hooks/use-public-chat-runtime";
|
||||
import { PublicChatFooter } from "./public-chat-footer";
|
||||
import { PublicChatHeader } from "./public-chat-header";
|
||||
import { PublicThread } from "./public-thread";
|
||||
|
||||
interface PublicChatViewProps {
|
||||
shareToken: string;
|
||||
}
|
||||
|
||||
export function PublicChatView({ shareToken }: PublicChatViewProps) {
|
||||
const { data, isLoading, error } = usePublicChat(shareToken);
|
||||
const runtime = usePublicChatRuntime({ data });
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<Loader2 className="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !data) {
|
||||
return (
|
||||
<div className="flex h-screen flex-col items-center justify-center gap-4 px-4 text-center">
|
||||
<h1 className="text-2xl font-semibold">Chat not found</h1>
|
||||
<p className="text-muted-foreground">
|
||||
This chat may have been removed or is no longer public.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AssistantRuntimeProvider runtime={runtime}>
|
||||
{/* Tool UIs for rendering tool results */}
|
||||
<GeneratePodcastToolUI />
|
||||
<LinkPreviewToolUI />
|
||||
<DisplayImageToolUI />
|
||||
<ScrapeWebpageToolUI />
|
||||
|
||||
<div className="flex h-screen flex-col bg-background">
|
||||
<PublicThread
|
||||
header={<PublicChatHeader title={data.thread.title} createdAt={data.thread.created_at} />}
|
||||
footer={<PublicChatFooter shareToken={shareToken} />}
|
||||
/>
|
||||
</div>
|
||||
</AssistantRuntimeProvider>
|
||||
);
|
||||
}
|
||||
179
surfsense_web/components/public-chat/public-thread.tsx
Normal file
179
surfsense_web/components/public-chat/public-thread.tsx
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
ActionBarPrimitive,
|
||||
AssistantIf,
|
||||
MessagePrimitive,
|
||||
ThreadPrimitive,
|
||||
useAssistantState,
|
||||
} from "@assistant-ui/react";
|
||||
import { CheckIcon, CopyIcon } from "lucide-react";
|
||||
import { type FC, type ReactNode, useState } from "react";
|
||||
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
|
||||
import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
|
||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PublicThreadProps {
|
||||
header?: ReactNode;
|
||||
footer?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read-only thread component for public chat viewing.
|
||||
* No composer, no edit capabilities - just message display.
|
||||
*/
|
||||
export const PublicThread: FC<PublicThreadProps> = ({ header, footer }) => {
|
||||
return (
|
||||
<ThreadPrimitive.Root
|
||||
className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
|
||||
style={{
|
||||
["--thread-max-width" as string]: "44rem",
|
||||
}}
|
||||
>
|
||||
<ThreadPrimitive.Viewport className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4">
|
||||
{header}
|
||||
|
||||
<ThreadPrimitive.Messages
|
||||
components={{
|
||||
UserMessage: PublicUserMessage,
|
||||
AssistantMessage: PublicAssistantMessage,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Spacer to ensure footer doesn't overlap last message */}
|
||||
<div className="h-24" />
|
||||
</ThreadPrimitive.Viewport>
|
||||
|
||||
{footer && (
|
||||
<div className="sticky bottom-0 z-20 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</ThreadPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* User avatar component with fallback to initials
|
||||
*/
|
||||
interface AuthorMetadata {
|
||||
displayName: string | null;
|
||||
avatarUrl: string | null;
|
||||
}
|
||||
|
||||
const UserAvatar: FC<AuthorMetadata & { hasError: boolean; onError: () => void }> = ({
|
||||
displayName,
|
||||
avatarUrl,
|
||||
hasError,
|
||||
onError,
|
||||
}) => {
|
||||
const initials = displayName
|
||||
? displayName
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
: "U";
|
||||
|
||||
if (avatarUrl && !hasError) {
|
||||
return (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={displayName || "User"}
|
||||
className="size-8 rounded-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
onError={onError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PublicUserMessage: FC = () => {
|
||||
const metadata = useAssistantState(({ message }) => message?.metadata);
|
||||
const author = metadata?.custom?.author as AuthorMetadata | undefined;
|
||||
|
||||
return (
|
||||
<MessagePrimitive.Root
|
||||
className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
|
||||
data-role="user"
|
||||
>
|
||||
<div className="aui-user-message-content-wrapper col-start-2 min-w-0 flex items-end gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
|
||||
<MessagePrimitive.Parts />
|
||||
</div>
|
||||
</div>
|
||||
{author && (
|
||||
<div className="shrink-0 mb-1.5">
|
||||
<UserAvatarWithState displayName={author.displayName} avatarUrl={author.avatarUrl} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const UserAvatarWithState: FC<AuthorMetadata> = ({ displayName, avatarUrl }) => {
|
||||
const [hasError, setHasError] = useState(false);
|
||||
return (
|
||||
<UserAvatar
|
||||
displayName={displayName}
|
||||
avatarUrl={avatarUrl}
|
||||
hasError={hasError}
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const PublicAssistantMessage: FC = () => {
|
||||
return (
|
||||
<MessagePrimitive.Root
|
||||
className="aui-assistant-message-root group fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
|
||||
data-role="assistant"
|
||||
>
|
||||
<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
|
||||
<MessagePrimitive.Parts
|
||||
components={{
|
||||
Text: MarkdownText,
|
||||
tools: { Fallback: ToolFallback },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
|
||||
<PublicAssistantActionBar />
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const PublicAssistantActionBar: FC = () => {
|
||||
return (
|
||||
<ActionBarPrimitive.Root
|
||||
autohide="not-last"
|
||||
className={cn(
|
||||
"aui-assistant-action-bar-root -ml-1 flex gap-1 text-muted-foreground",
|
||||
"opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
)}
|
||||
>
|
||||
<ActionBarPrimitive.Copy asChild>
|
||||
<TooltipIconButton tooltip="Copy">
|
||||
<AssistantIf condition={({ message }) => message.isCopied}>
|
||||
<CheckIcon />
|
||||
</AssistantIf>
|
||||
<AssistantIf condition={({ message }) => !message.isCopied}>
|
||||
<CopyIcon />
|
||||
</AssistantIf>
|
||||
</TooltipIconButton>
|
||||
</ActionBarPrimitive.Copy>
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue