mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-03 12:52:39 +02:00
Merge pull request #782 from CREDO23/sur-107-comment-reply-notifications
[Feat] Comment reply notifications and chat page & sharing improvements
This commit is contained in:
Rohan Verma
GitHub
commit
1ef3fd4ce9
16 changed files with 888 additions and 651 deletions
|
|
@ -4,20 +4,19 @@ import {
|
|||
ErrorPrimitive,
|
||||
MessagePrimitive,
|
||||
useAssistantState,
|
||||
useMessage,
|
||||
} from "@assistant-ui/react";
|
||||
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { CheckIcon, CopyIcon, DownloadIcon, MessageSquare, RefreshCwIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
addingCommentToMessageIdAtom,
|
||||
clearTargetCommentIdAtom,
|
||||
commentsCollapsedAtom,
|
||||
commentsEnabledAtom,
|
||||
targetCommentIdAtom,
|
||||
} from "@/atoms/chat/current-thread.atom";
|
||||
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
|
||||
import { BranchPicker } from "@/components/assistant-ui/branch-picker";
|
||||
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
|
||||
import {
|
||||
ThinkingStepsContext,
|
||||
|
|
@ -84,7 +83,6 @@ const AssistantMessageInner: FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
|
||||
<BranchPicker />
|
||||
<AssistantActionBar />
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -126,7 +124,6 @@ export const AssistantMessage: FC = () => {
|
|||
|
||||
// Target comment navigation - read target from global atom
|
||||
const targetCommentId = useAtomValue(targetCommentIdAtom);
|
||||
const clearTargetCommentId = useSetAtom(clearTargetCommentIdAtom);
|
||||
|
||||
// Check if target comment belongs to this message (including replies)
|
||||
const hasTargetComment = useMemo(() => {
|
||||
|
|
@ -263,6 +260,8 @@ export const AssistantMessage: FC = () => {
|
|||
};
|
||||
|
||||
const AssistantActionBar: FC = () => {
|
||||
const { isLast } = useMessage();
|
||||
|
||||
return (
|
||||
<ActionBarPrimitive.Root
|
||||
hideWhenRunning
|
||||
|
|
@ -285,11 +284,14 @@ const AssistantActionBar: FC = () => {
|
|||
<DownloadIcon />
|
||||
</TooltipIconButton>
|
||||
</ActionBarPrimitive.ExportMarkdown>
|
||||
<ActionBarPrimitive.Reload asChild>
|
||||
<TooltipIconButton tooltip="Refresh">
|
||||
<RefreshCwIcon />
|
||||
</TooltipIconButton>
|
||||
</ActionBarPrimitive.Reload>
|
||||
{/* Only allow regenerating the last assistant message */}
|
||||
{isLast && (
|
||||
<ActionBarPrimitive.Reload asChild>
|
||||
<TooltipIconButton tooltip="Refresh">
|
||||
<RefreshCwIcon />
|
||||
</TooltipIconButton>
|
||||
</ActionBarPrimitive.Reload>
|
||||
)}
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import { BranchPickerPrimitive } from "@assistant-ui/react";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest }) => {
|
||||
return (
|
||||
<BranchPickerPrimitive.Root
|
||||
hideWhenSingleBranch
|
||||
className={cn(
|
||||
"aui-branch-picker-root -ml-2 mr-2 inline-flex items-center text-muted-foreground text-xs",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
<BranchPickerPrimitive.Previous asChild>
|
||||
<TooltipIconButton tooltip="Previous">
|
||||
<ChevronLeftIcon />
|
||||
</TooltipIconButton>
|
||||
</BranchPickerPrimitive.Previous>
|
||||
<span className="aui-branch-picker-state font-medium">
|
||||
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
|
||||
</span>
|
||||
<BranchPickerPrimitive.Next asChild>
|
||||
<TooltipIconButton tooltip="Next">
|
||||
<ChevronRightIcon />
|
||||
</TooltipIconButton>
|
||||
</BranchPickerPrimitive.Next>
|
||||
</BranchPickerPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
|
@ -4,7 +4,6 @@ import { FileText, PencilIcon } from "lucide-react";
|
|||
import { type FC, useState } from "react";
|
||||
import { messageDocumentsMapAtom } from "@/atoms/chat/mentioned-documents.atom";
|
||||
import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
|
||||
import { BranchPicker } from "@/components/assistant-ui/branch-picker";
|
||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
||||
|
||||
interface AuthorMetadata {
|
||||
|
|
@ -95,24 +94,47 @@ export const UserMessage: FC = () => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<BranchPicker className="aui-user-branch-picker -mr-1 col-span-full col-start-1 row-start-3 justify-end" />
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const UserActionBar: FC = () => {
|
||||
const isThreadRunning = useAssistantState(({ thread }) => thread.isRunning);
|
||||
|
||||
// Get current message ID
|
||||
const currentMessageId = useAssistantState(({ message }) => message?.id);
|
||||
|
||||
// Find the last user message ID in the thread (computed once, memoized by selector)
|
||||
const lastUserMessageId = useAssistantState(({ thread }) => {
|
||||
const messages = thread.messages;
|
||||
for (let i = messages.length - 1; i >= 0; i--) {
|
||||
if (messages[i].role === "user") {
|
||||
return messages[i].id;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
// Simple comparison - no iteration needed per message
|
||||
const isLastUserMessage = currentMessageId === lastUserMessageId;
|
||||
|
||||
// Show edit button only on the last user message and when thread is not running
|
||||
const canEdit = isLastUserMessage && !isThreadRunning;
|
||||
|
||||
return (
|
||||
<ActionBarPrimitive.Root
|
||||
hideWhenRunning
|
||||
autohide="not-last"
|
||||
className="aui-user-action-bar-root flex flex-col items-end"
|
||||
>
|
||||
<ActionBarPrimitive.Edit asChild>
|
||||
<TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
|
||||
<PencilIcon />
|
||||
</TooltipIconButton>
|
||||
</ActionBarPrimitive.Edit>
|
||||
{/* Only allow editing the last user message */}
|
||||
{canEdit && (
|
||||
<ActionBarPrimitive.Edit asChild>
|
||||
<TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
|
||||
<PencilIcon />
|
||||
</TooltipIconButton>
|
||||
</ActionBarPrimitive.Edit>
|
||||
)}
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -110,7 +110,6 @@ export function LayoutDataProvider({
|
|||
// This ensures each tab has independent pagination and data loading
|
||||
const userId = user?.id ? String(user.id) : null;
|
||||
|
||||
// Mentions: Only fetch "new_mention" type notifications
|
||||
const {
|
||||
inboxItems: mentionItems,
|
||||
unreadCount: mentionUnreadCount,
|
||||
|
|
@ -122,11 +121,9 @@ export function LayoutDataProvider({
|
|||
markAllAsRead: markAllMentionsAsRead,
|
||||
} = useInbox(userId, Number(searchSpaceId) || null, "new_mention");
|
||||
|
||||
// Status: Fetch all types (will be filtered client-side to status types)
|
||||
// We pass null to get all, then InboxSidebar filters to status types
|
||||
const {
|
||||
inboxItems: statusItems,
|
||||
unreadCount: statusUnreadCount,
|
||||
unreadCount: allUnreadCount,
|
||||
loading: statusLoading,
|
||||
loadingMore: statusLoadingMore,
|
||||
hasMore: statusHasMore,
|
||||
|
|
@ -135,8 +132,8 @@ export function LayoutDataProvider({
|
|||
markAllAsRead: markAllStatusAsRead,
|
||||
} = useInbox(userId, Number(searchSpaceId) || null, null);
|
||||
|
||||
// Combined unread count for nav badge (mentions take priority for visibility)
|
||||
const totalUnreadCount = mentionUnreadCount + statusUnreadCount;
|
||||
const totalUnreadCount = allUnreadCount;
|
||||
const statusOnlyUnreadCount = Math.max(0, allUnreadCount - mentionUnreadCount);
|
||||
|
||||
// Track seen notification IDs to detect new page_limit_exceeded notifications
|
||||
const seenPageLimitNotifications = useRef<Set<number>>(new Set());
|
||||
|
|
@ -598,7 +595,7 @@ export function LayoutDataProvider({
|
|||
},
|
||||
status: {
|
||||
items: statusItems,
|
||||
unreadCount: statusUnreadCount,
|
||||
unreadCount: statusOnlyUnreadCount,
|
||||
loading: statusLoading,
|
||||
loadingMore: statusLoadingMore,
|
||||
hasMore: statusHasMore,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { useAtom } from "jotai";
|
|||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
AtSign,
|
||||
BellDot,
|
||||
Check,
|
||||
CheckCheck,
|
||||
|
|
@ -15,6 +14,7 @@ import {
|
|||
Inbox,
|
||||
LayoutGrid,
|
||||
ListFilter,
|
||||
MessageSquare,
|
||||
Search,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
|
@ -46,6 +46,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||
import {
|
||||
isCommentReplyMetadata,
|
||||
isConnectorIndexingMetadata,
|
||||
isNewMentionMetadata,
|
||||
isPageLimitExceededMetadata,
|
||||
|
|
@ -133,7 +134,7 @@ function getConnectorTypeDisplayName(connectorType: string): string {
|
|||
);
|
||||
}
|
||||
|
||||
type InboxTab = "mentions" | "status";
|
||||
type InboxTab = "comments" | "status";
|
||||
type InboxFilter = "all" | "unread";
|
||||
|
||||
// Tab-specific data source with independent pagination
|
||||
|
|
@ -186,7 +187,7 @@ export function InboxSidebar({
|
|||
const [, setTargetCommentId] = useAtom(setTargetCommentIdAtom);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [activeTab, setActiveTab] = useState<InboxTab>("mentions");
|
||||
const [activeTab, setActiveTab] = useState<InboxTab>("comments");
|
||||
const [activeFilter, setActiveFilter] = useState<InboxFilter>("all");
|
||||
const [selectedConnector, setSelectedConnector] = useState<string | null>(null);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
|
@ -233,12 +234,17 @@ export function InboxSidebar({
|
|||
}
|
||||
}, [activeTab]);
|
||||
|
||||
// Get current tab's data source - each tab has independent data and pagination
|
||||
const currentDataSource = activeTab === "mentions" ? mentions : status;
|
||||
const { loading, loadingMore = false, hasMore = false, loadMore } = currentDataSource;
|
||||
// Both tabs now derive items from status (all types), so use status for pagination
|
||||
const { loading, loadingMore = false, hasMore = false, loadMore } = status;
|
||||
|
||||
// Status tab includes: connector indexing, document processing, page limit exceeded, connector deletion
|
||||
// Filter to only show status notification types
|
||||
// Comments tab: mentions and comment replies
|
||||
const commentsItems = useMemo(
|
||||
() =>
|
||||
status.items.filter((item) => item.type === "new_mention" || item.type === "comment_reply"),
|
||||
[status.items]
|
||||
);
|
||||
|
||||
// Status tab: connector indexing, document processing, page limit exceeded, connector deletion
|
||||
const statusItems = useMemo(
|
||||
() =>
|
||||
status.items.filter(
|
||||
|
|
@ -270,8 +276,8 @@ export function InboxSidebar({
|
|||
}));
|
||||
}, [statusItems]);
|
||||
|
||||
// Get items for current tab - mentions use their source directly, status uses filtered items
|
||||
const displayItems = activeTab === "mentions" ? mentions.items : statusItems;
|
||||
// Get items for current tab
|
||||
const displayItems = activeTab === "comments" ? commentsItems : statusItems;
|
||||
|
||||
// Filter items based on filter type, connector filter, and search query
|
||||
const filteredItems = useMemo(() => {
|
||||
|
|
@ -334,9 +340,15 @@ export function InboxSidebar({
|
|||
return () => observer.disconnect();
|
||||
}, [loadMore, hasMore, loadingMore, open, searchQuery]);
|
||||
|
||||
// Use unread counts from data sources (more accurate than client-side counting)
|
||||
const unreadMentionsCount = mentions.unreadCount;
|
||||
const unreadStatusCount = status.unreadCount;
|
||||
// Unread counts derived from filtered items
|
||||
const unreadCommentsCount = useMemo(
|
||||
() => commentsItems.filter((item) => !item.read).length,
|
||||
[commentsItems]
|
||||
);
|
||||
const unreadStatusCount = useMemo(
|
||||
() => statusItems.filter((item) => !item.read).length,
|
||||
[statusItems]
|
||||
);
|
||||
|
||||
const handleItemClick = useCallback(
|
||||
async (item: InboxItem) => {
|
||||
|
|
@ -347,19 +359,15 @@ export function InboxSidebar({
|
|||
}
|
||||
|
||||
if (item.type === "new_mention") {
|
||||
// Use type guard for safe metadata access
|
||||
if (isNewMentionMetadata(item.metadata)) {
|
||||
const searchSpaceId = item.search_space_id;
|
||||
const threadId = item.metadata.thread_id;
|
||||
const commentId = item.metadata.comment_id;
|
||||
|
||||
if (searchSpaceId && threadId) {
|
||||
// Pre-set target comment ID before navigation
|
||||
// This also ensures comments panel is not collapsed
|
||||
if (commentId) {
|
||||
setTargetCommentId(commentId);
|
||||
}
|
||||
|
||||
const url = commentId
|
||||
? `/dashboard/${searchSpaceId}/new-chat/${threadId}?commentId=${commentId}`
|
||||
: `/dashboard/${searchSpaceId}/new-chat/${threadId}`;
|
||||
|
|
@ -368,6 +376,24 @@ export function InboxSidebar({
|
|||
router.push(url);
|
||||
}
|
||||
}
|
||||
} else if (item.type === "comment_reply") {
|
||||
if (isCommentReplyMetadata(item.metadata)) {
|
||||
const searchSpaceId = item.search_space_id;
|
||||
const threadId = item.metadata.thread_id;
|
||||
const replyId = item.metadata.reply_id;
|
||||
|
||||
if (searchSpaceId && threadId) {
|
||||
if (replyId) {
|
||||
setTargetCommentId(replyId);
|
||||
}
|
||||
const url = replyId
|
||||
? `/dashboard/${searchSpaceId}/new-chat/${threadId}?commentId=${replyId}`
|
||||
: `/dashboard/${searchSpaceId}/new-chat/${threadId}`;
|
||||
onOpenChange(false);
|
||||
onCloseMobileSidebar?.();
|
||||
router.push(url);
|
||||
}
|
||||
}
|
||||
} else if (item.type === "page_limit_exceeded") {
|
||||
// Navigate to the upgrade/more-pages page
|
||||
if (isPageLimitExceededMetadata(item.metadata)) {
|
||||
|
|
@ -411,24 +437,29 @@ export function InboxSidebar({
|
|||
};
|
||||
|
||||
const getStatusIcon = (item: InboxItem) => {
|
||||
// For mentions, show the author's avatar with initials fallback
|
||||
if (item.type === "new_mention") {
|
||||
// Use type guard for safe metadata access
|
||||
if (isNewMentionMetadata(item.metadata)) {
|
||||
const authorName = item.metadata.author_name;
|
||||
const avatarUrl = item.metadata.author_avatar_url;
|
||||
const authorEmail = item.metadata.author_email;
|
||||
// For mentions and comment replies, show the author's avatar
|
||||
if (item.type === "new_mention" || item.type === "comment_reply") {
|
||||
const metadata =
|
||||
item.type === "new_mention"
|
||||
? isNewMentionMetadata(item.metadata)
|
||||
? item.metadata
|
||||
: null
|
||||
: isCommentReplyMetadata(item.metadata)
|
||||
? item.metadata
|
||||
: null;
|
||||
|
||||
if (metadata) {
|
||||
return (
|
||||
<Avatar className="h-8 w-8">
|
||||
{avatarUrl && <AvatarImage src={avatarUrl} alt={authorName || "User"} />}
|
||||
{metadata.author_avatar_url && (
|
||||
<AvatarImage src={metadata.author_avatar_url} alt={metadata.author_name || "User"} />
|
||||
)}
|
||||
<AvatarFallback className="text-[10px] bg-primary/10 text-primary">
|
||||
{getInitials(authorName, authorEmail)}
|
||||
{getInitials(metadata.author_name, metadata.author_email)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
);
|
||||
}
|
||||
// Fallback for invalid metadata
|
||||
return (
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="text-[10px] bg-primary/10 text-primary">
|
||||
|
|
@ -481,10 +512,10 @@ export function InboxSidebar({
|
|||
};
|
||||
|
||||
const getEmptyStateMessage = () => {
|
||||
if (activeTab === "mentions") {
|
||||
if (activeTab === "comments") {
|
||||
return {
|
||||
title: t("no_mentions") || "No mentions",
|
||||
hint: t("no_mentions_hint") || "You'll see mentions from others here",
|
||||
title: t("no_comments") || "No comments",
|
||||
hint: t("no_comments_hint") || "You'll see mentions and replies here",
|
||||
};
|
||||
}
|
||||
return {
|
||||
|
|
@ -823,14 +854,14 @@ export function InboxSidebar({
|
|||
>
|
||||
<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b">
|
||||
<TabsTrigger
|
||||
value="mentions"
|
||||
value="comments"
|
||||
className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
|
||||
>
|
||||
<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
|
||||
<AtSign className="h-4 w-4" />
|
||||
<span>{t("mentions") || "Mentions"}</span>
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
<span>{t("comments") || "Comments"}</span>
|
||||
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
|
||||
{formatInboxCount(unreadMentionsCount)}
|
||||
{formatInboxCount(unreadCommentsCount)}
|
||||
</span>
|
||||
</span>
|
||||
</TabsTrigger>
|
||||
|
|
@ -932,8 +963,8 @@ export function InboxSidebar({
|
|||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
{activeTab === "mentions" ? (
|
||||
<AtSign className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
|
||||
{activeTab === "comments" ? (
|
||||
<MessageSquare className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
|
||||
) : (
|
||||
<History className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useAtomValue, useSetAtom } from "jotai";
|
||||
import { Globe, User, Users } from "lucide-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { currentThreadAtom, setThreadVisibilityAtom } from "@/atoms/chat/current-thread.atom";
|
||||
|
|
@ -11,6 +12,7 @@ import { createPublicChatSnapshotMutationAtom } from "@/atoms/public-chat-snapsh
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { chatThreadsApiService } from "@/lib/apis/chat-threads-api.service";
|
||||
import {
|
||||
type ChatVisibility,
|
||||
type ThreadRecord,
|
||||
|
|
@ -46,6 +48,8 @@ const visibilityOptions: {
|
|||
|
||||
export function ChatShareButton({ thread, onVisibilityChange, className }: ChatShareButtonProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// Use Jotai atom for visibility (single source of truth)
|
||||
|
|
@ -65,6 +69,16 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
|
|||
return access.permissions?.includes("public_sharing:create") ?? false;
|
||||
}, [access]);
|
||||
|
||||
// Query to check if thread has public snapshots
|
||||
const { data: snapshotsData } = useQuery({
|
||||
queryKey: ["thread-snapshots", thread?.id],
|
||||
queryFn: () => chatThreadsApiService.listPublicChatSnapshots({ thread_id: thread!.id }),
|
||||
enabled: !!thread?.id,
|
||||
staleTime: 30000, // Cache for 30 seconds
|
||||
});
|
||||
const hasPublicSnapshots = (snapshotsData?.snapshots?.length ?? 0) > 0;
|
||||
const snapshotCount = snapshotsData?.snapshots?.length ?? 0;
|
||||
|
||||
// Use Jotai visibility if available (synced from chat page), otherwise fall back to thread prop
|
||||
const currentVisibility = currentThreadState.visibility ?? thread?.visibility ?? "PRIVATE";
|
||||
|
||||
|
|
@ -106,11 +120,13 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
|
|||
|
||||
try {
|
||||
await createSnapshot({ thread_id: thread.id });
|
||||
// Refetch snapshots to show the globe indicator
|
||||
await queryClient.invalidateQueries({ queryKey: ["thread-snapshots", thread.id] });
|
||||
setOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to create public link:", error);
|
||||
}
|
||||
}, [thread, createSnapshot]);
|
||||
}, [thread, createSnapshot, queryClient]);
|
||||
|
||||
// Don't show if no thread (new chat that hasn't been created yet)
|
||||
if (!thread) {
|
||||
|
|
@ -121,112 +137,131 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
|
|||
const buttonLabel = currentVisibility === "PRIVATE" ? "Private" : "Shared";
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className={cn(
|
||||
"h-8 w-8 md:w-auto md:px-3 md:gap-2 relative bg-muted hover:bg-muted/80 border-0",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<CurrentIcon className="h-4 w-4" />
|
||||
<span className="hidden md:inline text-sm">{buttonLabel}</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Share settings</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<PopoverContent
|
||||
className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="p-1.5 space-y-1">
|
||||
{/* Visibility Options */}
|
||||
{visibilityOptions.map((option) => {
|
||||
const isSelected = currentVisibility === option.value;
|
||||
const Icon = option.icon;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={option.value}
|
||||
onClick={() => handleVisibilityChange(option.value)}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
|
||||
"hover:bg-accent/50 cursor-pointer",
|
||||
"focus:outline-none",
|
||||
isSelected && "bg-accent/80"
|
||||
)}
|
||||
<div className={cn("flex items-center gap-1", className)}>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 md:w-auto md:px-3 md:gap-2 relative bg-muted hover:bg-muted/80 border-0"
|
||||
>
|
||||
<div
|
||||
<CurrentIcon className="h-4 w-4" />
|
||||
<span className="hidden md:inline text-sm">{buttonLabel}</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Share settings</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<PopoverContent
|
||||
className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="p-1.5 space-y-1">
|
||||
{/* Visibility Options */}
|
||||
{visibilityOptions.map((option) => {
|
||||
const isSelected = currentVisibility === option.value;
|
||||
const Icon = option.icon;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={option.value}
|
||||
onClick={() => handleVisibilityChange(option.value)}
|
||||
className={cn(
|
||||
"size-7 rounded-md shrink-0 grid place-items-center",
|
||||
isSelected ? "bg-primary/10" : "bg-muted"
|
||||
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
|
||||
"hover:bg-accent/50 cursor-pointer",
|
||||
"focus:outline-none",
|
||||
isSelected && "bg-accent/80"
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
<div
|
||||
className={cn(
|
||||
"size-4 block",
|
||||
isSelected ? "text-primary" : "text-muted-foreground"
|
||||
"size-7 rounded-md shrink-0 grid place-items-center",
|
||||
isSelected ? "bg-primary/10" : "bg-muted"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 text-left min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={cn("text-sm font-medium", isSelected && "text-primary")}>
|
||||
{option.label}
|
||||
</span>
|
||||
>
|
||||
<Icon
|
||||
className={cn(
|
||||
"size-4 block",
|
||||
isSelected ? "text-primary" : "text-muted-foreground"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{canCreatePublicLink && (
|
||||
<>
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border my-1" />
|
||||
|
||||
{/* Public Link Option */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreatePublicLink}
|
||||
disabled={isCreatingSnapshot}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
|
||||
"hover:bg-accent/50 cursor-pointer",
|
||||
"focus:outline-none",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<div className="size-7 rounded-md shrink-0 grid place-items-center bg-muted">
|
||||
<Globe className="size-4 block text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 text-left min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium">
|
||||
{isCreatingSnapshot ? "Creating link..." : "Create public link"}
|
||||
</span>
|
||||
<div className="flex-1 text-left min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={cn("text-sm font-medium", isSelected && "text-primary")}>
|
||||
{option.label}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
|
||||
Creates a shareable snapshot of this chat
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{canCreatePublicLink && (
|
||||
<>
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border my-1" />
|
||||
|
||||
{/* Public Link Option */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreatePublicLink}
|
||||
disabled={isCreatingSnapshot}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
|
||||
"hover:bg-accent/50 cursor-pointer",
|
||||
"focus:outline-none",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<div className="size-7 rounded-md shrink-0 grid place-items-center bg-muted">
|
||||
<Globe className="size-4 block text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 text-left min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium">
|
||||
{isCreatingSnapshot ? "Creating link..." : "Create public link"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
|
||||
Creates a shareable snapshot of this chat
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* Globe indicator when public snapshots exist - clicks to settings */}
|
||||
{hasPublicSnapshots && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`/dashboard/${params.search_space_id}/settings`)}
|
||||
className="flex items-center justify-center h-8 w-8 rounded-md bg-muted/50 hover:bg-muted transition-colors"
|
||||
>
|
||||
<Globe className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{snapshotCount === 1
|
||||
? "This chat has a public link"
|
||||
: `This chat has ${snapshotCount} public links`}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,13 @@ export function PublicChatSnapshotRow({
|
|||
{snapshot.message_count}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={snapshot.public_url}
|
||||
className="mt-2 w-full text-xs text-muted-foreground bg-muted/50 border rounded px-2 py-1 select-all focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
onClick={(e) => (e.target as HTMLInputElement).select()}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -8,172 +8,167 @@ import { cn } from "@/lib/utils";
|
|||
|
||||
// ///////////////////////////////////////////////////////////////////////////
|
||||
// Types
|
||||
export type AnimationVariant =
|
||||
| "circle"
|
||||
| "rectangle"
|
||||
| "gif"
|
||||
| "polygon"
|
||||
| "circle-blur";
|
||||
export type AnimationVariant = "circle" | "rectangle" | "gif" | "polygon" | "circle-blur";
|
||||
export type AnimationStart =
|
||||
| "top-left"
|
||||
| "top-right"
|
||||
| "bottom-left"
|
||||
| "bottom-right"
|
||||
| "center"
|
||||
| "top-center"
|
||||
| "bottom-center"
|
||||
| "bottom-up"
|
||||
| "top-down"
|
||||
| "left-right"
|
||||
| "right-left";
|
||||
| "top-left"
|
||||
| "top-right"
|
||||
| "bottom-left"
|
||||
| "bottom-right"
|
||||
| "center"
|
||||
| "top-center"
|
||||
| "bottom-center"
|
||||
| "bottom-up"
|
||||
| "top-down"
|
||||
| "left-right"
|
||||
| "right-left";
|
||||
|
||||
interface Animation {
|
||||
name: string;
|
||||
css: string;
|
||||
name: string;
|
||||
css: string;
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////////////////////////////////
|
||||
// Helper functions
|
||||
|
||||
const getPositionCoords = (position: AnimationStart) => {
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
return { cx: "0", cy: "0" };
|
||||
case "top-right":
|
||||
return { cx: "40", cy: "0" };
|
||||
case "bottom-left":
|
||||
return { cx: "0", cy: "40" };
|
||||
case "bottom-right":
|
||||
return { cx: "40", cy: "40" };
|
||||
case "top-center":
|
||||
return { cx: "20", cy: "0" };
|
||||
case "bottom-center":
|
||||
return { cx: "20", cy: "40" };
|
||||
case "bottom-up":
|
||||
case "top-down":
|
||||
case "left-right":
|
||||
case "right-left":
|
||||
return { cx: "20", cy: "20" };
|
||||
}
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
return { cx: "0", cy: "0" };
|
||||
case "top-right":
|
||||
return { cx: "40", cy: "0" };
|
||||
case "bottom-left":
|
||||
return { cx: "0", cy: "40" };
|
||||
case "bottom-right":
|
||||
return { cx: "40", cy: "40" };
|
||||
case "top-center":
|
||||
return { cx: "20", cy: "0" };
|
||||
case "bottom-center":
|
||||
return { cx: "20", cy: "40" };
|
||||
case "bottom-up":
|
||||
case "top-down":
|
||||
case "left-right":
|
||||
case "right-left":
|
||||
return { cx: "20", cy: "20" };
|
||||
}
|
||||
};
|
||||
|
||||
const generateSVG = (variant: AnimationVariant, start: AnimationStart) => {
|
||||
if (variant === "circle-blur") {
|
||||
if (start === "center") {
|
||||
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>`;
|
||||
}
|
||||
const positionCoords = getPositionCoords(start);
|
||||
if (!positionCoords) {
|
||||
throw new Error(`Invalid start position: ${start}`);
|
||||
}
|
||||
const { cx, cy } = positionCoords;
|
||||
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="${cx}" cy="${cy}" r="18" fill="white" filter="url(%23blur)"/></svg>`;
|
||||
}
|
||||
if (variant === "circle-blur") {
|
||||
if (start === "center") {
|
||||
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>`;
|
||||
}
|
||||
const positionCoords = getPositionCoords(start);
|
||||
if (!positionCoords) {
|
||||
throw new Error(`Invalid start position: ${start}`);
|
||||
}
|
||||
const { cx, cy } = positionCoords;
|
||||
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="${cx}" cy="${cy}" r="18" fill="white" filter="url(%23blur)"/></svg>`;
|
||||
}
|
||||
|
||||
if (start === "center") return;
|
||||
if (start === "center") return;
|
||||
|
||||
if (variant === "rectangle") return "";
|
||||
if (variant === "rectangle") return "";
|
||||
|
||||
const positionCoords = getPositionCoords(start);
|
||||
if (!positionCoords) {
|
||||
throw new Error(`Invalid start position: ${start}`);
|
||||
}
|
||||
const { cx, cy } = positionCoords;
|
||||
const positionCoords = getPositionCoords(start);
|
||||
if (!positionCoords) {
|
||||
throw new Error(`Invalid start position: ${start}`);
|
||||
}
|
||||
const { cx, cy } = positionCoords;
|
||||
|
||||
if (variant === "circle") {
|
||||
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="${cx}" cy="${cy}" r="20" fill="white"/></svg>`;
|
||||
}
|
||||
if (variant === "circle") {
|
||||
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="${cx}" cy="${cy}" r="20" fill="white"/></svg>`;
|
||||
}
|
||||
|
||||
return "";
|
||||
return "";
|
||||
};
|
||||
|
||||
const getTransformOrigin = (start: AnimationStart) => {
|
||||
switch (start) {
|
||||
case "top-left":
|
||||
return "top left";
|
||||
case "top-right":
|
||||
return "top right";
|
||||
case "bottom-left":
|
||||
return "bottom left";
|
||||
case "bottom-right":
|
||||
return "bottom right";
|
||||
case "top-center":
|
||||
return "top center";
|
||||
case "bottom-center":
|
||||
return "bottom center";
|
||||
case "bottom-up":
|
||||
case "top-down":
|
||||
case "left-right":
|
||||
case "right-left":
|
||||
return "center";
|
||||
}
|
||||
switch (start) {
|
||||
case "top-left":
|
||||
return "top left";
|
||||
case "top-right":
|
||||
return "top right";
|
||||
case "bottom-left":
|
||||
return "bottom left";
|
||||
case "bottom-right":
|
||||
return "bottom right";
|
||||
case "top-center":
|
||||
return "top center";
|
||||
case "bottom-center":
|
||||
return "bottom center";
|
||||
case "bottom-up":
|
||||
case "top-down":
|
||||
case "left-right":
|
||||
case "right-left":
|
||||
return "center";
|
||||
}
|
||||
};
|
||||
|
||||
export const createAnimation = (
|
||||
variant: AnimationVariant,
|
||||
start: AnimationStart = "center",
|
||||
blur = false,
|
||||
url?: string,
|
||||
variant: AnimationVariant,
|
||||
start: AnimationStart = "center",
|
||||
blur = false,
|
||||
url?: string
|
||||
): Animation => {
|
||||
const svg = generateSVG(variant, start);
|
||||
const transformOrigin = getTransformOrigin(start);
|
||||
const svg = generateSVG(variant, start);
|
||||
const transformOrigin = getTransformOrigin(start);
|
||||
|
||||
if (variant === "rectangle") {
|
||||
const getClipPath = (direction: AnimationStart) => {
|
||||
switch (direction) {
|
||||
case "bottom-up":
|
||||
return {
|
||||
from: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "top-down":
|
||||
return {
|
||||
from: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "left-right":
|
||||
return {
|
||||
from: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "right-left":
|
||||
return {
|
||||
from: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "top-left":
|
||||
return {
|
||||
from: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "top-right":
|
||||
return {
|
||||
from: "polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "bottom-left":
|
||||
return {
|
||||
from: "polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "bottom-right":
|
||||
return {
|
||||
from: "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
from: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
}
|
||||
};
|
||||
if (variant === "rectangle") {
|
||||
const getClipPath = (direction: AnimationStart) => {
|
||||
switch (direction) {
|
||||
case "bottom-up":
|
||||
return {
|
||||
from: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "top-down":
|
||||
return {
|
||||
from: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "left-right":
|
||||
return {
|
||||
from: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "right-left":
|
||||
return {
|
||||
from: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "top-left":
|
||||
return {
|
||||
from: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "top-right":
|
||||
return {
|
||||
from: "polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "bottom-left":
|
||||
return {
|
||||
from: "polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
case "bottom-right":
|
||||
return {
|
||||
from: "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
from: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
|
||||
to: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const clipPath = getClipPath(start);
|
||||
const clipPath = getClipPath(start);
|
||||
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 0.7s;
|
||||
animation-timing-function: var(--expo-out);
|
||||
|
|
@ -218,12 +213,12 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
}
|
||||
if (variant === "circle" && start == "center") {
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
};
|
||||
}
|
||||
if (variant === "circle" && start == "center") {
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 0.7s;
|
||||
animation-timing-function: var(--expo-out);
|
||||
|
|
@ -268,12 +263,12 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
}
|
||||
if (variant === "gif") {
|
||||
return {
|
||||
name: `${variant}-${start}`,
|
||||
css: `
|
||||
};
|
||||
}
|
||||
if (variant === "gif") {
|
||||
return {
|
||||
name: `${variant}-${start}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-timing-function: var(--expo-in);
|
||||
}
|
||||
|
|
@ -302,14 +297,14 @@ export const createAnimation = (
|
|||
mask-size: 2000vmax;
|
||||
}
|
||||
}`,
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (variant === "circle-blur") {
|
||||
if (start === "center") {
|
||||
return {
|
||||
name: `${variant}-${start}`,
|
||||
css: `
|
||||
if (variant === "circle-blur") {
|
||||
if (start === "center") {
|
||||
return {
|
||||
name: `${variant}-${start}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-timing-function: var(--expo-out);
|
||||
}
|
||||
|
|
@ -334,12 +329,12 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: `${variant}-${start}`,
|
||||
css: `
|
||||
return {
|
||||
name: `${variant}-${start}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-timing-function: var(--expo-out);
|
||||
}
|
||||
|
|
@ -364,41 +359,41 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (variant === "polygon") {
|
||||
const getPolygonClipPaths = (position: AnimationStart) => {
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
return {
|
||||
darkFrom: "polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%)",
|
||||
darkTo: "polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%)",
|
||||
lightFrom: "polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%)",
|
||||
lightTo: "polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%)",
|
||||
};
|
||||
case "top-right":
|
||||
return {
|
||||
darkFrom: "polygon(150% -71%, 250% 71%, 250% 71%, 150% -71%)",
|
||||
darkTo: "polygon(150% -71%, 250% 71%, 50% 171%, -71% 50%)",
|
||||
lightFrom: "polygon(-71% 50%, 50% 171%, 50% 171%, -71% 50%)",
|
||||
lightTo: "polygon(-71% 50%, 50% 171%, 250% 71%, 150% -71%)",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
darkFrom: "polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%)",
|
||||
darkTo: "polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%)",
|
||||
lightFrom: "polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%)",
|
||||
lightTo: "polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%)",
|
||||
};
|
||||
}
|
||||
};
|
||||
if (variant === "polygon") {
|
||||
const getPolygonClipPaths = (position: AnimationStart) => {
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
return {
|
||||
darkFrom: "polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%)",
|
||||
darkTo: "polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%)",
|
||||
lightFrom: "polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%)",
|
||||
lightTo: "polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%)",
|
||||
};
|
||||
case "top-right":
|
||||
return {
|
||||
darkFrom: "polygon(150% -71%, 250% 71%, 250% 71%, 150% -71%)",
|
||||
darkTo: "polygon(150% -71%, 250% 71%, 50% 171%, -71% 50%)",
|
||||
lightFrom: "polygon(-71% 50%, 50% 171%, 50% 171%, -71% 50%)",
|
||||
lightTo: "polygon(-71% 50%, 50% 171%, 250% 71%, 150% -71%)",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
darkFrom: "polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%)",
|
||||
darkTo: "polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%)",
|
||||
lightFrom: "polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%)",
|
||||
lightTo: "polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%)",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const clipPaths = getPolygonClipPaths(start);
|
||||
const clipPaths = getPolygonClipPaths(start);
|
||||
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 0.7s;
|
||||
animation-timing-function: var(--expo-out);
|
||||
|
|
@ -443,35 +438,35 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Handle circle variants with start positions using clip-path
|
||||
if (variant === "circle" && start !== "center") {
|
||||
const getClipPathPosition = (position: AnimationStart) => {
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
return "0% 0%";
|
||||
case "top-right":
|
||||
return "100% 0%";
|
||||
case "bottom-left":
|
||||
return "0% 100%";
|
||||
case "bottom-right":
|
||||
return "100% 100%";
|
||||
case "top-center":
|
||||
return "50% 0%";
|
||||
case "bottom-center":
|
||||
return "50% 100%";
|
||||
default:
|
||||
return "50% 50%";
|
||||
}
|
||||
};
|
||||
// Handle circle variants with start positions using clip-path
|
||||
if (variant === "circle" && start !== "center") {
|
||||
const getClipPathPosition = (position: AnimationStart) => {
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
return "0% 0%";
|
||||
case "top-right":
|
||||
return "100% 0%";
|
||||
case "bottom-left":
|
||||
return "0% 100%";
|
||||
case "bottom-right":
|
||||
return "100% 100%";
|
||||
case "top-center":
|
||||
return "50% 0%";
|
||||
case "bottom-center":
|
||||
return "50% 100%";
|
||||
default:
|
||||
return "50% 50%";
|
||||
}
|
||||
};
|
||||
|
||||
const clipPosition = getClipPathPosition(start);
|
||||
const clipPosition = getClipPathPosition(start);
|
||||
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: var(--expo-out);
|
||||
|
|
@ -516,12 +511,12 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
return {
|
||||
name: `${variant}-${start}${blur ? "-blur" : ""}`,
|
||||
css: `
|
||||
::view-transition-group(root) {
|
||||
animation-timing-function: var(--expo-in);
|
||||
}
|
||||
|
|
@ -549,237 +544,229 @@ export const createAnimation = (
|
|||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// ///////////////////////////////////////////////////////////////////////////
|
||||
// Custom hook for theme toggle functionality
|
||||
export const useThemeToggle = ({
|
||||
variant = "circle",
|
||||
start = "center",
|
||||
blur = false,
|
||||
gifUrl = "",
|
||||
variant = "circle",
|
||||
start = "center",
|
||||
blur = false,
|
||||
gifUrl = "",
|
||||
}: {
|
||||
variant?: AnimationVariant;
|
||||
start?: AnimationStart;
|
||||
blur?: boolean;
|
||||
gifUrl?: string;
|
||||
variant?: AnimationVariant;
|
||||
start?: AnimationStart;
|
||||
blur?: boolean;
|
||||
gifUrl?: string;
|
||||
} = {}) => {
|
||||
const { theme, setTheme, resolvedTheme } = useTheme();
|
||||
const { theme, setTheme, resolvedTheme } = useTheme();
|
||||
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
|
||||
// Sync isDark state with resolved theme after hydration
|
||||
useEffect(() => {
|
||||
setIsDark(resolvedTheme === "dark");
|
||||
}, [resolvedTheme]);
|
||||
// Sync isDark state with resolved theme after hydration
|
||||
useEffect(() => {
|
||||
setIsDark(resolvedTheme === "dark");
|
||||
}, [resolvedTheme]);
|
||||
|
||||
const styleId = "theme-transition-styles";
|
||||
const styleId = "theme-transition-styles";
|
||||
|
||||
const updateStyles = useCallback((css: string) => {
|
||||
if (typeof window === "undefined") return;
|
||||
const updateStyles = useCallback((css: string) => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
let styleElement = document.getElementById(styleId) as HTMLStyleElement;
|
||||
let styleElement = document.getElementById(styleId) as HTMLStyleElement;
|
||||
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = styleId;
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = styleId;
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
|
||||
styleElement.textContent = css;
|
||||
}, []);
|
||||
styleElement.textContent = css;
|
||||
}, []);
|
||||
|
||||
const toggleTheme = useCallback(() => {
|
||||
setIsDark(!isDark);
|
||||
const toggleTheme = useCallback(() => {
|
||||
setIsDark(!isDark);
|
||||
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
|
||||
updateStyles(animation.css);
|
||||
updateStyles(animation.css);
|
||||
|
||||
if (typeof window === "undefined") return;
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const switchTheme = () => {
|
||||
setTheme(theme === "light" ? "dark" : "light");
|
||||
};
|
||||
const switchTheme = () => {
|
||||
setTheme(theme === "light" ? "dark" : "light");
|
||||
};
|
||||
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [theme, setTheme, variant, start, blur, gifUrl, updateStyles, isDark]);
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [theme, setTheme, variant, start, blur, gifUrl, updateStyles, isDark]);
|
||||
|
||||
const setCrazyLightTheme = useCallback(() => {
|
||||
setIsDark(false);
|
||||
const setCrazyLightTheme = useCallback(() => {
|
||||
setIsDark(false);
|
||||
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
|
||||
updateStyles(animation.css);
|
||||
updateStyles(animation.css);
|
||||
|
||||
if (typeof window === "undefined") return;
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const switchTheme = () => {
|
||||
setTheme("light");
|
||||
};
|
||||
const switchTheme = () => {
|
||||
setTheme("light");
|
||||
};
|
||||
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [setTheme, variant, start, blur, gifUrl, updateStyles]);
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [setTheme, variant, start, blur, gifUrl, updateStyles]);
|
||||
|
||||
const setCrazyDarkTheme = useCallback(() => {
|
||||
setIsDark(true);
|
||||
const setCrazyDarkTheme = useCallback(() => {
|
||||
setIsDark(true);
|
||||
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
|
||||
updateStyles(animation.css);
|
||||
updateStyles(animation.css);
|
||||
|
||||
if (typeof window === "undefined") return;
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const switchTheme = () => {
|
||||
setTheme("dark");
|
||||
};
|
||||
const switchTheme = () => {
|
||||
setTheme("dark");
|
||||
};
|
||||
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [setTheme, variant, start, blur, gifUrl, updateStyles]);
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [setTheme, variant, start, blur, gifUrl, updateStyles]);
|
||||
|
||||
const setCrazySystemTheme = useCallback(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const setCrazySystemTheme = useCallback(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const prefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches;
|
||||
setIsDark(prefersDark);
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
setIsDark(prefersDark);
|
||||
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
const animation = createAnimation(variant, start, blur, gifUrl);
|
||||
|
||||
updateStyles(animation.css);
|
||||
updateStyles(animation.css);
|
||||
|
||||
const switchTheme = () => {
|
||||
setTheme("system");
|
||||
};
|
||||
const switchTheme = () => {
|
||||
setTheme("system");
|
||||
};
|
||||
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
if (!document.startViewTransition) {
|
||||
switchTheme();
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [setTheme, variant, start, blur, gifUrl, updateStyles]);
|
||||
document.startViewTransition(switchTheme);
|
||||
}, [setTheme, variant, start, blur, gifUrl, updateStyles]);
|
||||
|
||||
return {
|
||||
isDark,
|
||||
setIsDark,
|
||||
toggleTheme,
|
||||
setCrazyLightTheme,
|
||||
setCrazyDarkTheme,
|
||||
setCrazySystemTheme,
|
||||
};
|
||||
return {
|
||||
isDark,
|
||||
setIsDark,
|
||||
toggleTheme,
|
||||
setCrazyLightTheme,
|
||||
setCrazyDarkTheme,
|
||||
setCrazySystemTheme,
|
||||
};
|
||||
};
|
||||
|
||||
// ///////////////////////////////////////////////////////////////////////////
|
||||
// Theme Toggle Button Component (Sun/Moon Style)
|
||||
|
||||
export const ThemeToggleButton = ({
|
||||
className = "",
|
||||
variant = "circle",
|
||||
start = "center",
|
||||
blur = false,
|
||||
gifUrl = "",
|
||||
className = "",
|
||||
variant = "circle",
|
||||
start = "center",
|
||||
blur = false,
|
||||
gifUrl = "",
|
||||
}: {
|
||||
className?: string;
|
||||
variant?: AnimationVariant;
|
||||
start?: AnimationStart;
|
||||
blur?: boolean;
|
||||
gifUrl?: string;
|
||||
className?: string;
|
||||
variant?: AnimationVariant;
|
||||
start?: AnimationStart;
|
||||
blur?: boolean;
|
||||
gifUrl?: string;
|
||||
}) => {
|
||||
const { isDark, toggleTheme } = useThemeToggle({
|
||||
variant,
|
||||
start,
|
||||
blur,
|
||||
gifUrl,
|
||||
});
|
||||
const clipId = useId();
|
||||
const clipPathId = `theme-toggle-clip-${clipId}`;
|
||||
const { isDark, toggleTheme } = useThemeToggle({
|
||||
variant,
|
||||
start,
|
||||
blur,
|
||||
gifUrl,
|
||||
});
|
||||
const clipId = useId();
|
||||
const clipPathId = `theme-toggle-clip-${clipId}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"size-10 cursor-pointer rounded-full p-2 transition-all duration-300 active:scale-95 bg-transparent",
|
||||
isDark ? "text-white" : "text-black",
|
||||
className,
|
||||
)}
|
||||
onClick={toggleTheme}
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<clipPath id={clipPathId}>
|
||||
<motion.path
|
||||
animate={{ y: isDark ? 10 : 0, x: isDark ? -12 : 0 }}
|
||||
transition={{ ease: "easeInOut", duration: 0.35 }}
|
||||
d="M0-5h30a1 1 0 0 0 9 13v24H0Z"
|
||||
/>
|
||||
</clipPath>
|
||||
<g clipPath={`url(#${clipPathId})`}>
|
||||
<motion.circle
|
||||
animate={{ r: isDark ? 10 : 8 }}
|
||||
transition={{ ease: "easeInOut", duration: 0.35 }}
|
||||
cx="16"
|
||||
cy="16"
|
||||
/>
|
||||
<motion.g
|
||||
animate={{
|
||||
rotate: isDark ? -100 : 0,
|
||||
scale: isDark ? 0.5 : 1,
|
||||
opacity: isDark ? 0 : 1,
|
||||
}}
|
||||
transition={{ ease: "easeInOut", duration: 0.35 }}
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="M16 5.5v-4" />
|
||||
<path d="M16 30.5v-4" />
|
||||
<path d="M1.5 16h4" />
|
||||
<path d="M26.5 16h4" />
|
||||
<path d="m23.4 8.6 2.8-2.8" />
|
||||
<path d="m5.7 26.3 2.9-2.9" />
|
||||
<path d="m5.8 5.8 2.8 2.8" />
|
||||
<path d="m23.4 23.4 2.9 2.9" />
|
||||
</motion.g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"size-10 cursor-pointer rounded-full p-2 transition-all duration-300 active:scale-95 bg-transparent",
|
||||
isDark ? "text-white" : "text-black",
|
||||
className
|
||||
)}
|
||||
onClick={toggleTheme}
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<clipPath id={clipPathId}>
|
||||
<motion.path
|
||||
animate={{ y: isDark ? 10 : 0, x: isDark ? -12 : 0 }}
|
||||
transition={{ ease: "easeInOut", duration: 0.35 }}
|
||||
d="M0-5h30a1 1 0 0 0 9 13v24H0Z"
|
||||
/>
|
||||
</clipPath>
|
||||
<g clipPath={`url(#${clipPathId})`}>
|
||||
<motion.circle
|
||||
animate={{ r: isDark ? 10 : 8 }}
|
||||
transition={{ ease: "easeInOut", duration: 0.35 }}
|
||||
cx="16"
|
||||
cy="16"
|
||||
/>
|
||||
<motion.g
|
||||
animate={{
|
||||
rotate: isDark ? -100 : 0,
|
||||
scale: isDark ? 0.5 : 1,
|
||||
opacity: isDark ? 0 : 1,
|
||||
}}
|
||||
transition={{ ease: "easeInOut", duration: 0.35 }}
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="M16 5.5v-4" />
|
||||
<path d="M16 30.5v-4" />
|
||||
<path d="M1.5 16h4" />
|
||||
<path d="M26.5 16h4" />
|
||||
<path d="m23.4 8.6 2.8-2.8" />
|
||||
<path d="m5.7 26.3 2.9-2.9" />
|
||||
<path d="m5.8 5.8 2.8 2.8" />
|
||||
<path d="m23.4 23.4 2.9 2.9" />
|
||||
</motion.g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
// ///////////////////////////////////////////////////////////////////////////
|
||||
// Backwards compatible export (alias for ThemeToggleButton with default settings)
|
||||
export function ThemeTogglerComponent() {
|
||||
return (
|
||||
<ThemeToggleButton
|
||||
variant="circle"
|
||||
start="top-right"
|
||||
className="size-8"
|
||||
/>
|
||||
);
|
||||
return <ThemeToggleButton variant="circle" start="top-right" className="size-8" />;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue