+
+
+ {post.metadata.description ? (
+ + {post.metadata.description} +
+ ) : null} +{tooltip}
+
+ {children}
+
+
+
+ );
+ },
+);
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export const ChainOfThoughtSearchResults = memo(
+ ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+
+ ),
+);
+
+export type ChainOfThoughtSearchResultProps = ComponentProps
+ {isValidElement(Icon) ? Icon :
+
+
+ {label}
+ {description && (
+ {description}
+ )}
+ {children}
+
+
+ ),
+);
+
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
diff --git a/frontend-web/src/components/ai-elements/checkpoint.tsx b/frontend-web/src/components/ai-elements/checkpoint.tsx
new file mode 100644
index 00000000..6d912fec
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/checkpoint.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { BookmarkIcon, type LucideProps } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type CheckpointProps = HTMLAttributes
+ {children}
+
+ {caption && {caption}
} +
+ {children}
+
+);
+
+export type CheckpointIconProps = LucideProps;
+
+export const CheckpointIcon = ({
+ className,
+ children,
+ ...props
+}: CheckpointIconProps) =>
+ children ?? (
+
+
+
+
+
+ {children && (
+
+
+ {children}
+
+ )}
+
+ {children ?? (
+ <>
+
+ );
+};
+
+export type ContextContentBodyProps = ComponentProps<"div">;
+
+export const ContextContentBody = ({
+ children,
+ className,
+ ...props
+}: ContextContentBodyProps) => (
+
+
+ {displayPct}
++ {used} / {total} +
+
+
+
+
+ )}
+
+ {children}
+
+);
+
+export type ContextContentFooterProps = ComponentProps<"div">;
+
+export const ContextContentFooter = ({
+ children,
+ className,
+ ...props
+}: ContextContentFooterProps) => {
+ const { modelId, usage } = useContextValue();
+ const costUSD = modelId
+ ? getUsage({
+ modelId,
+ usage: {
+ input: usage?.inputTokens ?? 0,
+ output: usage?.outputTokens ?? 0,
+ },
+ }).costUSD?.totalUSD
+ : undefined;
+ const totalCost = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(costUSD ?? 0);
+
+ return (
+
+ {children ?? (
+ <>
+ Total cost
+ {totalCost}
+
+ )}
+
+ );
+};
+
+export type ContextInputUsageProps = ComponentProps<"div">;
+
+export const ContextInputUsage = ({
+ className,
+ children,
+ ...props
+}: ContextInputUsageProps) => {
+ const { usage, modelId } = useContextValue();
+ const inputTokens = usage?.inputTokens ?? 0;
+
+ if (children) {
+ return children;
+ }
+
+ if (!inputTokens) {
+ return null;
+ }
+
+ const inputCost = modelId
+ ? getUsage({
+ modelId,
+ usage: { input: inputTokens, output: 0 },
+ }).costUSD?.totalUSD
+ : undefined;
+ const inputCostText = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(inputCost ?? 0);
+
+ return (
+
+ Input
+
+ );
+};
+
+export type ContextOutputUsageProps = ComponentProps<"div">;
+
+export const ContextOutputUsage = ({
+ className,
+ children,
+ ...props
+}: ContextOutputUsageProps) => {
+ const { usage, modelId } = useContextValue();
+ const outputTokens = usage?.outputTokens ?? 0;
+
+ if (children) {
+ return children;
+ }
+
+ if (!outputTokens) {
+ return null;
+ }
+
+ const outputCost = modelId
+ ? getUsage({
+ modelId,
+ usage: { input: 0, output: outputTokens },
+ }).costUSD?.totalUSD
+ : undefined;
+ const outputCostText = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(outputCost ?? 0);
+
+ return (
+
+ Output
+
+ );
+};
+
+export type ContextReasoningUsageProps = ComponentProps<"div">;
+
+export const ContextReasoningUsage = ({
+ className,
+ children,
+ ...props
+}: ContextReasoningUsageProps) => {
+ const { usage, modelId } = useContextValue();
+ const reasoningTokens = usage?.reasoningTokens ?? 0;
+
+ if (children) {
+ return children;
+ }
+
+ if (!reasoningTokens) {
+ return null;
+ }
+
+ const reasoningCost = modelId
+ ? getUsage({
+ modelId,
+ usage: { reasoningTokens },
+ }).costUSD?.totalUSD
+ : undefined;
+ const reasoningCostText = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(reasoningCost ?? 0);
+
+ return (
+
+ Reasoning
+
+ );
+};
+
+export type ContextCacheUsageProps = ComponentProps<"div">;
+
+export const ContextCacheUsage = ({
+ className,
+ children,
+ ...props
+}: ContextCacheUsageProps) => {
+ const { usage, modelId } = useContextValue();
+ const cacheTokens = usage?.cachedInputTokens ?? 0;
+
+ if (children) {
+ return children;
+ }
+
+ if (!cacheTokens) {
+ return null;
+ }
+
+ const cacheCost = modelId
+ ? getUsage({
+ modelId,
+ usage: { cacheReads: cacheTokens, input: 0, output: 0 },
+ }).costUSD?.totalUSD
+ : undefined;
+ const cacheCostText = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(cacheCost ?? 0);
+
+ return (
+
+ Cache
+
+ );
+};
+
+const TokensWithCost = ({
+ tokens,
+ costText,
+}: {
+ tokens?: number;
+ costText?: string;
+}) => (
+
+ {tokens === undefined
+ ? "—"
+ : new Intl.NumberFormat("en-US", {
+ notation: "compact",
+ }).format(tokens)}
+ {costText ? (
+ • {costText}
+ ) : null}
+
+);
diff --git a/frontend-web/src/components/ai-elements/controls.tsx b/frontend-web/src/components/ai-elements/controls.tsx
new file mode 100644
index 00000000..0fd25629
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/controls.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type ControlsProps = ComponentProps
+ {children ?? (
+ <>
+ {icon &&
+);
+
+export type ConversationScrollButtonProps = ComponentProps{icon}
}
+
+
+
+ )}
+ {title}
+ {description && ( +{description}
+ )} +
+
+);
diff --git a/frontend-web/src/components/ai-elements/message.tsx b/frontend-web/src/components/ai-elements/message.tsx
new file mode 100644
index 00000000..c0071c21
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/message.tsx
@@ -0,0 +1,446 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { FileUIPart, UIMessage } from "ai";
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ PaperclipIcon,
+ XIcon,
+} from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+
+export type MessageProps = HTMLAttributes
+ {children}
+
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({
+ className,
+ children,
+ ...props
+}: MessageActionsProps) => (
+
+ {children}
+
+);
+
+export type MessageActionProps = ComponentProps{tooltip}
+div]:pb-0", className)}
+ {...props}
+ />
+
+ );
+};
+
+export type MessageBranchContentProps = HTMLAttributes;
+
+export const MessageBranchContent = ({
+ children,
+ ...props
+}: MessageBranchContentProps) => {
+ const { currentBranch, setBranches, branches } = useMessageBranch();
+ const childrenArray = Array.isArray(children) ? children : [children];
+
+ // Use useEffect to update branches when they change
+ useEffect(() => {
+ if (branches.length !== childrenArray.length) {
+ setBranches(childrenArray);
+ }
+ }, [childrenArray, branches, setBranches]);
+
+ return childrenArray.map((branch, index) => (
+ & {
+ from: UIMessage["role"];
+};
+
+export const MessageBranchSelector = ({
+ className,
+ from,
+ ...props
+}: MessageBranchSelectorProps) => {
+ const { totalBranches } = useMessageBranch();
+
+ // Don't render if there's only one branch
+ if (totalBranches <= 1) {
+ return null;
+ }
+
+ return (
+ ;
+
+export const MessageBranchPrevious = ({
+ children,
+ ...props
+}: MessageBranchPreviousProps) => {
+ const { goToPrevious, totalBranches } = useMessageBranch();
+
+ return (
+
+ );
+};
+
+export type MessageBranchNextProps = ComponentProps;
+
+export const MessageBranchNext = ({
+ children,
+ className,
+ ...props
+}: MessageBranchNextProps) => {
+ const { goToNext, totalBranches } = useMessageBranch();
+
+ return (
+
+ );
+};
+
+export type MessageBranchPageProps = HTMLAttributes;
+
+export const MessageBranchPage = ({
+ className,
+ ...props
+}: MessageBranchPageProps) => {
+ const { currentBranch, totalBranches } = useMessageBranch();
+
+ return (
+
+ {currentBranch + 1} of {totalBranches}
+
+ );
+};
+
+export type MessageResponseProps = ComponentProps;
+
+export const MessageResponse = memo(
+ ({ className, ...props }: MessageResponseProps) => (
+ *:first-child]:mt-0 [&>*:last-child]:mb-0",
+ className,
+ )}
+ {...props}
+ />
+ ),
+ (prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageAttachmentProps = HTMLAttributes & {
+ data: FileUIPart;
+ className?: string;
+ onRemove?: () => void;
+};
+
+export function MessageAttachment({
+ data,
+ className,
+ onRemove,
+ ...props
+}: MessageAttachmentProps) {
+ const filename = data.filename || "";
+ const mediaType =
+ data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+ const isImage = mediaType === "image";
+ const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+
+ return (
+ ;
+
+export const ModelSelector = (props: ModelSelectorProps) => (
+
+);
+
+export type ModelSelectorTriggerProps = ComponentProps;
+
+export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
+ & {
+ title?: ReactNode;
+};
+
+export const ModelSelectorContent = ({
+ className,
+ children,
+ title = "Model Selector",
+ ...props
+}: ModelSelectorContentProps) => (
+
+ {title}
+
+ {children}
+
+
+);
+
+export type ModelSelectorDialogProps = ComponentProps;
+
+export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
+ ;
+
+export const ModelSelectorInput = ({
+ className,
+ ...props
+}: ModelSelectorInputProps) => (
+ ;
+
+export const ModelSelectorList = (props: ModelSelectorListProps) => (
+ ;
+
+export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
+ ;
+
+export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
+ ;
+
+export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
+ ;
+
+export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
+ 
+);
+
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+
+export const ModelSelectorLogoGroup = ({
+ className,
+ ...props
+}: ModelSelectorLogoGroupProps) => (
+
+
+ );
+}
diff --git a/frontend-web/src/components/query-client-provider.tsx b/frontend-web/src/components/query-client-provider.tsx
new file mode 100644
index 00000000..d10dd23f
--- /dev/null
+++ b/frontend-web/src/components/query-client-provider.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import {
+ QueryClient,
+ QueryClientProvider as TanStackQueryClientProvider,
+} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export function QueryClientProvider({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/frontend-web/src/components/theme-provider.tsx b/frontend-web/src/components/theme-provider.tsx
new file mode 100644
index 00000000..e234decf
--- /dev/null
+++ b/frontend-web/src/components/theme-provider.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+ children,
+ ...props
+}: React.ComponentProps) {
+ const pathname = usePathname();
+ return (
+
+ {children}
+
+ );
+}
diff --git a/frontend-web/src/components/ui/alert.tsx b/frontend-web/src/components/ui/alert.tsx
new file mode 100644
index 00000000..aa7de24d
--- /dev/null
+++ b/frontend-web/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend-web/src/components/ui/aurora-text.tsx b/frontend-web/src/components/ui/aurora-text.tsx
new file mode 100644
index 00000000..f8e475a5
--- /dev/null
+++ b/frontend-web/src/components/ui/aurora-text.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React, { memo } from "react";
+
+interface AuroraTextProps {
+ children: React.ReactNode;
+ className?: string;
+ colors?: string[];
+ speed?: number;
+}
+
+export const AuroraText = memo(
+ ({
+ children,
+ className = "",
+ colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
+ speed = 1,
+ }: AuroraTextProps) => {
+ const gradientStyle = {
+ backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
+ colors[0]
+ })`,
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ animationDuration: `${10 / speed}s`,
+ };
+
+ return (
+
+ {children}
+
+
+ );
+ },
+);
+
+AuroraText.displayName = "AuroraText";
diff --git a/frontend-web/src/components/ui/avatar.tsx b/frontend-web/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..c4475c2e
--- /dev/null
+++ b/frontend-web/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span";
+
+ return (
+ ) {
+ return (
+
+ );
+}
+
+function ButtonGroupText({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ asChild?: boolean;
+}) {
+ const Comp = asChild ? Slot : "div";
+
+ return (
+ ) {
+ return (
+ & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ ;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0];
+ api: ReturnType[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext(null);
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext);
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a ) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault();
+ scrollPrev();
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault();
+ scrollNext();
+ }
+ },
+ [scrollPrev, scrollNext],
+ );
+
+ React.useEffect(() => {
+ if (!api || !setApi) return;
+ setApi(api);
+ }, [api, setApi]);
+
+ React.useEffect(() => {
+ if (!api) return;
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
+
+ return () => {
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
+
+ return (
+
+
+ );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+ const { carouselRef, orientation } = useCarousel();
+
+ return (
+ ) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselNext({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+ return (
+
+ );
+}
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+};
diff --git a/frontend-web/src/components/ui/collapsible.tsx b/frontend-web/src/components/ui/collapsible.tsx
new file mode 100644
index 00000000..69abaad3
--- /dev/null
+++ b/frontend-web/src/components/ui/collapsible.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+import { cn } from "@/lib/utils";
+
+function Collapsible({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & {
+ title?: string;
+ description?: string;
+ className?: string;
+ showCloseButton?: boolean;
+}) {
+ return (
+
+ );
+}
+
+function CommandInput({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ {
+ angle?: number;
+ particleCount?: number;
+ startVelocity?: number;
+ spread?: number;
+ onClick?: MouseEventHandler;
+}
+
+export function ConfettiButton({
+ className,
+ children,
+ angle = 90,
+ particleCount = 75,
+ startVelocity = 35,
+ spread = 70,
+ onClick,
+ ...props
+}: ConfettiButtonProps) {
+ const handleClick: MouseEventHandler = (event) => {
+ const target = event.currentTarget;
+ if (target) {
+ const rect = target.getBoundingClientRect();
+ confetti({
+ particleCount,
+ startVelocity,
+ angle,
+ spread,
+ origin: {
+ x: (rect.left + rect.width / 2) / window.innerWidth,
+ y: (rect.top + rect.height / 2) / window.innerHeight,
+ },
+ });
+ }
+ onClick?.(event);
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend-web/src/components/ui/dialog.tsx b/frontend-web/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..bad9f2de
--- /dev/null
+++ b/frontend-web/src/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ showCloseButton?: boolean;
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ )}
+
+
+ );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+ );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+ return (
+
div]:pb-0",
+ index === currentBranch ? "block" : "hidden",
+ )}
+ key={branch.key}
+ {...props}
+ >
+ {branch}
+
+ ));
+};
+
+export type MessageBranchSelectorProps = HTMLAttributes
+ {isImage ? (
+ <>
+ 
+ {onRemove && (
+
+ )}
+
+ ) : (
+ <>
+
+
+
+
+
+
+ {onRemove && (
+
+ )}
+
+ )}
+
+ );
+}
+
+export type MessageAttachmentsProps = ComponentProps<"div">;
+
+export function MessageAttachments({
+ children,
+ className,
+ ...props
+}: MessageAttachmentsProps) {
+ if (!children) {
+ return null;
+ }
+
+ return (
+
+
+ {attachmentLabel}
+
+ {children}
+
+ );
+}
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({
+ className,
+ children,
+ ...props
+}: MessageToolbarProps) => (
+
+ {children}
+
+);
diff --git a/frontend-web/src/components/ai-elements/model-selector.tsx b/frontend-web/src/components/ai-elements/model-selector.tsx
new file mode 100644
index 00000000..dc8682bb
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/model-selector.tsx
@@ -0,0 +1,208 @@
+import {
+ Command,
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from "@/components/ui/command";
+import {
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+export type ModelSelectorProps = ComponentProps
+);
+
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+
+export const ModelSelectorLogoGroup = ({
+ className,
+ ...props
+}: ModelSelectorLogoGroupProps) => (
+ img]:bg-background dark:[&>img]:bg-foreground flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
+ className,
+ )}
+ {...props}
+ />
+);
+
+export type ModelSelectorNameProps = ComponentProps<"span">;
+
+export const ModelSelectorName = ({
+ className,
+ ...props
+}: ModelSelectorNameProps) => (
+
+);
diff --git a/frontend-web/src/components/ai-elements/node.tsx b/frontend-web/src/components/ai-elements/node.tsx
new file mode 100644
index 00000000..f329a8b3
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/node.tsx
@@ -0,0 +1,71 @@
+import {
+ Card,
+ CardAction,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Handle, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type NodeProps = ComponentProps & {
+ handles: {
+ target: boolean;
+ source: boolean;
+ };
+};
+
+export const Node = ({ handles, className, ...props }: NodeProps) => (
+
+ {handles.target &&
+);
+
+export type NodeHeaderProps = ComponentProps;
+
+export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
+ ;
+
+export const NodeTitle = (props: NodeTitleProps) => ;
+
+export const NodeDescription = (props: NodeDescriptionProps) => (
+ ;
+
+export const NodeAction = (props: NodeActionProps) => ;
+
+export const NodeContent = ({ className, ...props }: NodeContentProps) => (
+ ;
+
+export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
+ & {
+ query: string;
+};
+
+export const OpenIn = ({ query, ...props }: OpenInProps) => (
+
+
+);
+
+export type OpenInContentProps = ComponentProps;
+
+export const OpenInContent = ({ className, ...props }: OpenInContentProps) => (
+ ;
+
+export const OpenInItem = (props: OpenInItemProps) => (
+ ;
+
+export const OpenInLabel = (props: OpenInLabelProps) => (
+ ;
+
+export const OpenInSeparator = (props: OpenInSeparatorProps) => (
+ ;
+
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
+
+ {children ?? (
+
+ )}
+
+);
+
+export type OpenInChatGPTProps = ComponentProps;
+
+export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.chatgpt.icon}
+ {providers.chatgpt.title}
+
+ );
+};
+
+export type OpenInClaudeProps = ComponentProps;
+
+export const OpenInClaude = (props: OpenInClaudeProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.claude.icon}
+ {providers.claude.title}
+
+ );
+};
+
+export type OpenInT3Props = ComponentProps;
+
+export const OpenInT3 = (props: OpenInT3Props) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.t3.icon}
+ {providers.t3.title}
+
+ );
+};
+
+export type OpenInSciraProps = ComponentProps;
+
+export const OpenInScira = (props: OpenInSciraProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.scira.icon}
+ {providers.scira.title}
+
+ );
+};
+
+export type OpenInv0Props = ComponentProps;
+
+export const OpenInv0 = (props: OpenInv0Props) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.v0.icon}
+ {providers.v0.title}
+
+ );
+};
+
+export type OpenInCursorProps = ComponentProps;
+
+export const OpenInCursor = (props: OpenInCursorProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.cursor.icon}
+ {providers.cursor.title}
+
+ );
+};
diff --git a/frontend-web/src/components/ai-elements/panel.tsx b/frontend-web/src/components/ai-elements/panel.tsx
new file mode 100644
index 00000000..a0b8c1d7
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/panel.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import { Panel as PanelPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+type PanelProps = ComponentProps;
+
+export const Panel = ({ className, ...props }: PanelProps) => (
+ (null);
+
+const usePlan = () => {
+ const context = useContext(PlanContext);
+ if (!context) {
+ throw new Error("Plan components must be used within Plan");
+ }
+ return context;
+};
+
+export type PlanProps = ComponentProps & {
+ isStreaming?: boolean;
+};
+
+export const Plan = ({
+ className,
+ isStreaming = false,
+ children,
+ ...props
+}: PlanProps) => (
+
+
+ {children}
+
+
+);
+
+export type PlanHeaderProps = ComponentProps;
+
+export const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (
+ ,
+ "children"
+> & {
+ children: string;
+};
+
+export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
+ const { isStreaming } = usePlan();
+
+ return (
+
+ {isStreaming ? {children} : children}
+
+ );
+};
+
+export type PlanDescriptionProps = Omit<
+ ComponentProps,
+ "children"
+> & {
+ children: string;
+};
+
+export const PlanDescription = ({
+ className,
+ children,
+ ...props
+}: PlanDescriptionProps) => {
+ const { isStreaming } = usePlan();
+
+ return (
+
+ {isStreaming ? {children} : children}
+
+ );
+};
+
+export type PlanActionProps = ComponentProps;
+
+export const PlanAction = (props: PlanActionProps) => (
+ ;
+
+export const PlanContent = (props: PlanContentProps) => (
+
+
+);
+
+export type PlanFooterProps = ComponentProps<"div">;
+
+export const PlanFooter = (props: PlanFooterProps) => (
+ ;
+
+export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
+
+
+
+);
diff --git a/frontend-web/src/components/ai-elements/prompt-input.tsx b/frontend-web/src/components/ai-elements/prompt-input.tsx
new file mode 100644
index 00000000..0970fbbf
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/prompt-input.tsx
@@ -0,0 +1,1474 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from "@/components/ui/command";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupTextarea,
+} from "@/components/ui/input-group";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import type { PromptInputFilePart } from "@/core/uploads";
+import { splitUnsupportedUploadFiles } from "@/core/uploads";
+import { isIMEComposing } from "@/lib/ime";
+import { cn } from "@/lib/utils";
+import type { ChatStatus } from "ai";
+import {
+ ArrowUpIcon,
+ ImageIcon,
+ Loader2Icon,
+ MicIcon,
+ PaperclipIcon,
+ PlusIcon,
+ SquareIcon,
+ UploadIcon,
+ XIcon,
+} from "lucide-react";
+import { nanoid } from "nanoid";
+import {
+ type ChangeEvent,
+ type ChangeEventHandler,
+ Children,
+ type ClipboardEventHandler,
+ type ComponentProps,
+ createContext,
+ type FormEvent,
+ type FormEventHandler,
+ Fragment,
+ type HTMLAttributes,
+ type KeyboardEventHandler,
+ type PropsWithChildren,
+ type ReactNode,
+ type RefObject,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import { toast } from "sonner";
+
+// ============================================================================
+// Provider Context & Types
+// ============================================================================
+
+export type AttachmentsContext = {
+ files: (PromptInputFilePart & { id: string })[];
+ add: (files: File[] | FileList) => void;
+ remove: (id: string) => void;
+ clear: () => void;
+ openFileDialog: () => void;
+ fileInputRef: RefObject;
+};
+
+export type TextInputContext = {
+ value: string;
+ setInput: (v: string) => void;
+ clear: () => void;
+};
+
+export type PromptInputControllerProps = {
+ textInput: TextInputContext;
+ attachments: AttachmentsContext;
+ /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
+ __registerFileInput: (
+ ref: RefObject,
+ open: () => void,
+ ) => void;
+};
+
+const PromptInputController = createContext(
+ null,
+);
+const ProviderAttachmentsContext = createContext(
+ null,
+);
+const PromptInputValidationContext = createContext<
+ ((files: File[] | FileList) => File[]) | null
+>(null);
+
+export const usePromptInputController = () => {
+ const ctx = useContext(PromptInputController);
+ if (!ctx) {
+ throw new Error(
+ "Wrap your component inside to use usePromptInputController().",
+ );
+ }
+ return ctx;
+};
+
+// Optional variants (do NOT throw). Useful for dual-mode components.
+const useOptionalPromptInputController = () =>
+ useContext(PromptInputController);
+
+export const useProviderAttachments = () => {
+ const ctx = useContext(ProviderAttachmentsContext);
+ if (!ctx) {
+ throw new Error(
+ "Wrap your component inside to use useProviderAttachments().",
+ );
+ }
+ return ctx;
+};
+
+const useOptionalProviderAttachments = () =>
+ useContext(ProviderAttachmentsContext);
+const usePromptInputValidation = () => useContext(PromptInputValidationContext);
+
+export type PromptInputProviderProps = PropsWithChildren<{
+ initialInput?: string;
+}>;
+
+/**
+ * Optional global provider that lifts PromptInput state outside of PromptInput.
+ * If you don't use it, PromptInput stays fully self-managed.
+ */
+export function PromptInputProvider({
+ initialInput: initialTextInput = "",
+ children,
+}: PromptInputProviderProps) {
+ // ----- textInput state
+ const [textInput, setTextInput] = useState(initialTextInput);
+ const clearInput = useCallback(() => setTextInput(""), []);
+
+ // ----- attachments state (global when wrapped)
+ const [attachmentFiles, setAttachmentFiles] = useState<
+ (PromptInputFilePart & { id: string })[]
+ >([]);
+ const fileInputRef = useRef(null);
+ const openRef = useRef<() => void>(() => {});
+
+ const add = useCallback((files: File[] | FileList) => {
+ const incoming = Array.from(files);
+ if (incoming.length === 0) {
+ return;
+ }
+
+ setAttachmentFiles((prev) =>
+ prev.concat(
+ incoming.map((file) => ({
+ id: nanoid(),
+ type: "file" as const,
+ url: URL.createObjectURL(file),
+ mediaType: file.type,
+ filename: file.name,
+ file,
+ })),
+ ),
+ );
+ }, []);
+
+ const remove = useCallback((id: string) => {
+ setAttachmentFiles((prev) => {
+ const found = prev.find((f) => f.id === id);
+ if (found?.url) {
+ URL.revokeObjectURL(found.url);
+ }
+ return prev.filter((f) => f.id !== id);
+ });
+ }, []);
+
+ const clear = useCallback(() => {
+ setAttachmentFiles((prev) => {
+ for (const f of prev) {
+ if (f.url) {
+ URL.revokeObjectURL(f.url);
+ }
+ }
+ return [];
+ });
+ }, []);
+
+ // Keep a ref to attachments for cleanup on unmount (avoids stale closure)
+ const attachmentsRef = useRef(attachmentFiles);
+ attachmentsRef.current = attachmentFiles;
+
+ // Cleanup blob URLs on unmount to prevent memory leaks
+ useEffect(() => {
+ return () => {
+ for (const f of attachmentsRef.current) {
+ if (f.url) {
+ URL.revokeObjectURL(f.url);
+ }
+ }
+ };
+ }, []);
+
+ const openFileDialog = useCallback(() => {
+ openRef.current?.();
+ }, []);
+
+ const attachments = useMemo(
+ () => ({
+ files: attachmentFiles,
+ add,
+ remove,
+ clear,
+ openFileDialog,
+ fileInputRef,
+ }),
+ [attachmentFiles, add, remove, clear, openFileDialog],
+ );
+
+ const __registerFileInput = useCallback(
+ (ref: RefObject, open: () => void) => {
+ fileInputRef.current = ref.current;
+ openRef.current = open;
+ },
+ [],
+ );
+
+ const controller = useMemo(
+ () => ({
+ textInput: {
+ value: textInput,
+ setInput: setTextInput,
+ clear: clearInput,
+ },
+ attachments,
+ __registerFileInput,
+ }),
+ [textInput, clearInput, attachments, __registerFileInput],
+ );
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+// ============================================================================
+// Component Context & Hooks
+// ============================================================================
+
+const LocalAttachmentsContext = createContext(null);
+
+export const usePromptInputAttachments = () => {
+ // Dual-mode: prefer provider if present, otherwise use local
+ const provider = useOptionalProviderAttachments();
+ const local = useContext(LocalAttachmentsContext);
+ const context = provider ?? local;
+ if (!context) {
+ throw new Error(
+ "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider",
+ );
+ }
+ return context;
+};
+
+export type PromptInputAttachmentProps = HTMLAttributes & {
+ data: PromptInputFilePart & { id: string };
+ className?: string;
+};
+
+export function PromptInputAttachment({
+ data,
+ className,
+ ...props
+}: PromptInputAttachmentProps) {
+ const attachments = usePromptInputAttachments();
+
+ const filename = data.filename || "";
+
+ const mediaType =
+ data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+ const isImage = mediaType === "image";
+
+ const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export type PromptInputAttachmentsProps = Omit<
+ HTMLAttributes,
+ "children"
+> & {
+ children: (attachment: PromptInputFilePart & { id: string }) => ReactNode;
+};
+
+export function PromptInputAttachments({
+ children,
+ className,
+ ...props
+}: PromptInputAttachmentsProps) {
+ const attachments = usePromptInputAttachments();
+
+ if (!attachments.files.length) {
+ return null;
+ }
+
+ return (
+ {
+ e.preventDefault();
+ attachments.openFileDialog();
+ }}
+ >
+
+ );
+};
+
+export type PromptInputMessage = {
+ text: string;
+ files: PromptInputFilePart[];
+};
+
+export type PromptInputProps = Omit<
+ HTMLAttributes,
+ "onSubmit" | "onError"
+> & {
+ accept?: string; // e.g., "image/*" or leave undefined for any
+ disabled?: boolean;
+ multiple?: boolean;
+ // When true, accepts drops anywhere on document. Default false (opt-in).
+ globalDrop?: boolean;
+ // Render a hidden input with given name and keep it in sync for native form posts. Default false.
+ syncHiddenInput?: boolean;
+ // Minimal constraints
+ maxFiles?: number;
+ maxFileSize?: number; // bytes
+ onError?: (err: {
+ code: "max_files" | "max_file_size" | "accept" | "unsupported_package";
+ message: string;
+ }) => void;
+ onSubmit: (
+ message: PromptInputMessage,
+ event: FormEvent,
+ ) => void | Promise;
+};
+
+export const PromptInput = ({
+ className,
+ accept,
+ disabled,
+ multiple,
+ globalDrop,
+ syncHiddenInput,
+ maxFiles,
+ maxFileSize,
+ onError,
+ onSubmit,
+ children,
+ ...props
+}: PromptInputProps) => {
+ // Try to use a provider controller if present
+ const controller = useOptionalPromptInputController();
+ const usingProvider = !!controller;
+
+ // Refs
+ const inputRef = useRef(null);
+ const formRef = useRef(null);
+
+ // ----- Local attachments (only used when no provider)
+ const [items, setItems] = useState<(PromptInputFilePart & { id: string })[]>(
+ [],
+ );
+ const files = usingProvider ? controller.attachments.files : items;
+
+ // Keep a ref to files for cleanup on unmount (avoids stale closure)
+ const filesRef = useRef(files);
+ filesRef.current = files;
+
+ const openFileDialogLocal = useCallback(() => {
+ inputRef.current?.click();
+ }, []);
+
+ const matchesAccept = useCallback(
+ (f: File) => {
+ if (!accept || accept.trim() === "") {
+ return true;
+ }
+
+ const patterns = accept
+ .split(",")
+ .map((s) => s.trim())
+ .filter(Boolean);
+
+ return patterns.some((pattern) => {
+ if (pattern.endsWith("/*")) {
+ const prefix = pattern.slice(0, -1); // e.g: image/* -> image/
+ return f.type.startsWith(prefix);
+ }
+ return f.type === pattern;
+ });
+ },
+ [accept],
+ );
+
+ const addLocal = useCallback(
+ (fileList: File[] | FileList) => {
+ const incoming = Array.from(fileList);
+ const accepted = incoming.filter((f) => matchesAccept(f));
+ if (incoming.length && accepted.length === 0) {
+ onError?.({
+ code: "accept",
+ message: "No files match the accepted types.",
+ });
+ return;
+ }
+ const withinSize = (f: File) =>
+ maxFileSize ? f.size <= maxFileSize : true;
+ const sized = accepted.filter(withinSize);
+ if (accepted.length > 0 && sized.length === 0) {
+ onError?.({
+ code: "max_file_size",
+ message: "All files exceed the maximum size.",
+ });
+ return;
+ }
+
+ setItems((prev) => {
+ const capacity =
+ typeof maxFiles === "number"
+ ? Math.max(0, maxFiles - prev.length)
+ : undefined;
+ const capped =
+ typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+ if (typeof capacity === "number" && sized.length > capacity) {
+ onError?.({
+ code: "max_files",
+ message: "Too many files. Some were not added.",
+ });
+ }
+ const next: (PromptInputFilePart & { id: string })[] = [];
+ for (const file of capped) {
+ next.push({
+ id: nanoid(),
+ type: "file",
+ url: URL.createObjectURL(file),
+ mediaType: file.type,
+ filename: file.name,
+ file,
+ });
+ }
+ return prev.concat(next);
+ });
+ },
+ [matchesAccept, maxFiles, maxFileSize, onError],
+ );
+
+ const removeLocal = useCallback(
+ (id: string) =>
+ setItems((prev) => {
+ const found = prev.find((file) => file.id === id);
+ if (found?.url) {
+ URL.revokeObjectURL(found.url);
+ }
+ return prev.filter((file) => file.id !== id);
+ }),
+ [],
+ );
+
+ const clearLocal = useCallback(
+ () =>
+ setItems((prev) => {
+ for (const file of prev) {
+ if (file.url) {
+ URL.revokeObjectURL(file.url);
+ }
+ }
+ return [];
+ }),
+ [],
+ );
+
+ const add = usingProvider ? controller.attachments.add : addLocal;
+ const remove = usingProvider ? controller.attachments.remove : removeLocal;
+ const clear = usingProvider ? controller.attachments.clear : clearLocal;
+ const openFileDialog = usingProvider
+ ? controller.attachments.openFileDialog
+ : openFileDialogLocal;
+
+ const sanitizeIncomingFiles = useCallback(
+ (fileList: File[] | FileList) => {
+ const { accepted, message } = splitUnsupportedUploadFiles(fileList);
+ if (message) {
+ onError?.({
+ code: "unsupported_package",
+ message,
+ });
+ if (!onError) {
+ toast.error(message);
+ }
+ }
+ return accepted;
+ },
+ [onError],
+ );
+
+ // Let provider know about our hidden file input so external menus can call openFileDialog()
+ useEffect(() => {
+ if (!usingProvider) return;
+ controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+ }, [usingProvider, controller]);
+
+ // Note: File input cannot be programmatically set for security reasons
+ // The syncHiddenInput prop is no longer functional
+ useEffect(() => {
+ if (syncHiddenInput && inputRef.current && files.length === 0) {
+ inputRef.current.value = "";
+ }
+ }, [files, syncHiddenInput]);
+
+ // Attach drop handlers on nearest form and document (opt-in)
+ useEffect(() => {
+ const form = formRef.current;
+ if (!form) return;
+ if (globalDrop) return; // when global drop is on, let the document-level handler own drops
+
+ const onDragOver = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ };
+ const onDrop = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+ const accepted = sanitizeIncomingFiles(e.dataTransfer.files);
+ if (accepted.length > 0) {
+ add(accepted);
+ }
+ }
+ };
+ form.addEventListener("dragover", onDragOver);
+ form.addEventListener("drop", onDrop);
+ return () => {
+ form.removeEventListener("dragover", onDragOver);
+ form.removeEventListener("drop", onDrop);
+ };
+ }, [add, globalDrop, sanitizeIncomingFiles]);
+
+ useEffect(() => {
+ if (!globalDrop) return;
+
+ const onDragOver = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ };
+ const onDrop = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+ const accepted = sanitizeIncomingFiles(e.dataTransfer.files);
+ if (accepted.length > 0) {
+ add(accepted);
+ }
+ }
+ };
+ document.addEventListener("dragover", onDragOver);
+ document.addEventListener("drop", onDrop);
+ return () => {
+ document.removeEventListener("dragover", onDragOver);
+ document.removeEventListener("drop", onDrop);
+ };
+ }, [add, globalDrop, sanitizeIncomingFiles]);
+
+ useEffect(
+ () => () => {
+ if (!usingProvider) {
+ for (const f of filesRef.current) {
+ if (f.url) URL.revokeObjectURL(f.url);
+ }
+ }
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- cleanup only on unmount; filesRef always current
+ [usingProvider],
+ );
+
+ const handleChange: ChangeEventHandler = (event) => {
+ if (event.currentTarget.files) {
+ const accepted = sanitizeIncomingFiles(event.currentTarget.files);
+ if (accepted.length > 0) {
+ add(accepted);
+ }
+ }
+ // Reset input value to allow selecting files that were previously removed
+ event.currentTarget.value = "";
+ };
+
+ const convertBlobUrlToDataUrl = async (
+ url: string,
+ ): Promise => {
+ try {
+ const response = await fetch(url);
+ const blob = await response.blob();
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.onloadend = () => resolve(reader.result as string);
+ reader.onerror = () => resolve(null);
+ reader.readAsDataURL(blob);
+ });
+ } catch {
+ return null;
+ }
+ };
+
+ const ctx = useMemo(
+ () => ({
+ files: files.map((item) => ({ ...item, id: item.id })),
+ add,
+ remove,
+ clear,
+ openFileDialog,
+ fileInputRef: inputRef,
+ }),
+ [files, add, remove, clear, openFileDialog],
+ );
+
+ const handleSubmit: FormEventHandler = (event) => {
+ event.preventDefault();
+
+ const form = event.currentTarget;
+ const text = usingProvider
+ ? controller.textInput.value
+ : (() => {
+ const formData = new FormData(form);
+ return (formData.get("message") as string) || "";
+ })();
+
+ // Reset form immediately after capturing text to avoid race condition
+ // where user input during async blob conversion would be lost
+ if (!usingProvider) {
+ form.reset();
+ }
+
+ // Convert blob URLs to data URLs asynchronously
+ Promise.all(
+ files.map(async ({ id, ...item }) => {
+ if (item.file instanceof File) {
+ // Downstream upload prep reads the preserved File directly.
+ return item;
+ }
+ if (item.url && item.url.startsWith("blob:")) {
+ const dataUrl = await convertBlobUrlToDataUrl(item.url);
+ // If conversion failed, keep the original blob URL
+ return {
+ ...item,
+ url: dataUrl ?? item.url,
+ };
+ }
+ return item;
+ }),
+ )
+ .then((convertedFiles: PromptInputFilePart[]) => {
+ try {
+ const result = onSubmit({ text, files: convertedFiles }, event);
+
+ // Handle both sync and async onSubmit
+ if (result instanceof Promise) {
+ result
+ .then(() => {
+ clear();
+ if (usingProvider) {
+ controller.textInput.clear();
+ }
+ })
+ .catch(() => {
+ // Don't clear on error - user may want to retry
+ });
+ } else {
+ // Sync function completed without throwing, clear attachments
+ clear();
+ if (usingProvider) {
+ controller.textInput.clear();
+ }
+ }
+ } catch {
+ // Don't clear on error - user may want to retry
+ }
+ })
+ .catch(() => {
+ // Don't clear on error - user may want to retry
+ });
+ };
+
+ // Render with or without local provider
+ const inner = (
+
+
+
+
+ );
+
+ return usingProvider ? (
+ inner
+ ) : (
+
+ {inner}
+
+ );
+};
+
+export type PromptInputBodyProps = HTMLAttributes;
+
+export const PromptInputBody = ({
+ className,
+ ...props
+}: PromptInputBodyProps) => (
+
+);
+
+export type PromptInputTextareaProps = ComponentProps<
+ typeof InputGroupTextarea
+>;
+
+export const PromptInputTextarea = ({
+ onChange,
+ className,
+ placeholder = "What would you like to know?",
+ ...props
+}: PromptInputTextareaProps) => {
+ const controller = useOptionalPromptInputController();
+ const attachments = usePromptInputAttachments();
+ const sanitizeIncomingFiles = usePromptInputValidation();
+ const [isComposing, setIsComposing] = useState(false);
+
+ const handleKeyDown: KeyboardEventHandler = (e) => {
+ if (e.key === "Enter") {
+ if (isIMEComposing(e, isComposing)) {
+ return;
+ }
+ if (e.shiftKey) {
+ return;
+ }
+ e.preventDefault();
+
+ // Check if the submit button is disabled before submitting
+ const form = e.currentTarget.form;
+ const submitButton = form?.querySelector(
+ 'button[type="submit"]',
+ ) as HTMLButtonElement | null;
+ if (submitButton?.disabled) {
+ return;
+ }
+
+ form?.requestSubmit();
+ }
+
+ // Remove last attachment when Backspace is pressed and textarea is empty
+ if (
+ e.key === "Backspace" &&
+ e.currentTarget.value === "" &&
+ attachments.files.length > 0
+ ) {
+ e.preventDefault();
+ const lastAttachment = attachments.files.at(-1);
+ if (lastAttachment) {
+ attachments.remove(lastAttachment.id);
+ }
+ }
+ };
+
+ const handlePaste: ClipboardEventHandler = (event) => {
+ const items = event.clipboardData?.items;
+
+ if (!items) {
+ return;
+ }
+
+ const files: File[] = [];
+
+ for (const item of items) {
+ if (item.kind === "file") {
+ const file = item.getAsFile();
+ if (file) {
+ files.push(file);
+ }
+ }
+ }
+
+ if (files.length > 0) {
+ event.preventDefault();
+ const accepted = sanitizeIncomingFiles
+ ? sanitizeIncomingFiles(files)
+ : files;
+ if (accepted.length > 0) {
+ attachments.add(accepted);
+ }
+ }
+ };
+
+ const controlledProps = controller
+ ? {
+ value: controller.textInput.value,
+ onChange: (e: ChangeEvent) => {
+ controller.textInput.setInput(e.currentTarget.value);
+ onChange?.(e);
+ },
+ }
+ : {
+ onChange,
+ };
+
+ return (
+ setIsComposing(false)}
+ onCompositionStart={() => setIsComposing(true)}
+ onKeyDown={handleKeyDown}
+ onPaste={handlePaste}
+ placeholder={placeholder}
+ {...props}
+ {...controlledProps}
+ />
+ );
+};
+
+export type PromptInputHeaderProps = Omit<
+ ComponentProps,
+ "align"
+>;
+
+export const PromptInputHeader = ({
+ className,
+ ...props
+}: PromptInputHeaderProps) => (
+ ,
+ "align"
+>;
+
+export const PromptInputFooter = ({
+ className,
+ ...props
+}: PromptInputFooterProps) => (
+ ;
+
+export const PromptInputTools = ({
+ className,
+ ...props
+}: PromptInputToolsProps) => (
+
+);
+
+export type PromptInputButtonProps = ComponentProps;
+
+export const PromptInputButton = ({
+ variant = "ghost",
+ className,
+ size,
+ ...props
+}: PromptInputButtonProps) => {
+ return (
+ ;
+export const PromptInputActionMenu = (props: PromptInputActionMenuProps) => (
+
+
+ {children ??
+
+);
+
+export type PromptInputActionMenuContentProps = ComponentProps<
+ typeof DropdownMenuContent
+>;
+export const PromptInputActionMenuContent = ({
+ className,
+ ...props
+}: PromptInputActionMenuContentProps) => (
+ & {
+ status?: ChatStatus;
+};
+
+export const PromptInputSubmit = ({
+ className,
+ variant = "default",
+ size = "icon-sm",
+ status,
+ children,
+ ...props
+}: PromptInputSubmitProps) => {
+ let Icon =
+ {children ?? Icon}
+
+ );
+};
+
+interface SpeechRecognition extends EventTarget {
+ continuous: boolean;
+ interimResults: boolean;
+ lang: string;
+ start(): void;
+ stop(): void;
+ onstart: ((this: SpeechRecognition, ev: Event) => any) | null;
+ onend: ((this: SpeechRecognition, ev: Event) => any) | null;
+ onresult:
+ | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any)
+ | null;
+ onerror:
+ | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any)
+ | null;
+}
+
+interface SpeechRecognitionEvent extends Event {
+ results: SpeechRecognitionResultList;
+ resultIndex: number;
+}
+
+type SpeechRecognitionResultList = {
+ readonly length: number;
+ item(index: number): SpeechRecognitionResult;
+ [index: number]: SpeechRecognitionResult;
+};
+
+type SpeechRecognitionResult = {
+ readonly length: number;
+ item(index: number): SpeechRecognitionAlternative;
+ [index: number]: SpeechRecognitionAlternative;
+ isFinal: boolean;
+};
+
+type SpeechRecognitionAlternative = {
+ transcript: string;
+ confidence: number;
+};
+
+interface SpeechRecognitionErrorEvent extends Event {
+ error: string;
+}
+
+declare global {
+ interface Window {
+ SpeechRecognition: {
+ new (): SpeechRecognition;
+ };
+ webkitSpeechRecognition: {
+ new (): SpeechRecognition;
+ };
+ }
+}
+
+export type PromptInputSpeechButtonProps = ComponentProps<
+ typeof PromptInputButton
+> & {
+ textareaRef?: RefObject;
+ onTranscriptionChange?: (text: string) => void;
+};
+
+export const PromptInputSpeechButton = ({
+ className,
+ textareaRef,
+ onTranscriptionChange,
+ ...props
+}: PromptInputSpeechButtonProps) => {
+ const [isListening, setIsListening] = useState(false);
+ const [recognition, setRecognition] = useState(
+ null,
+ );
+ const recognitionRef = useRef(null);
+ const callbacksRef = useRef({ textareaRef, onTranscriptionChange });
+ callbacksRef.current = { textareaRef, onTranscriptionChange };
+
+ useEffect(() => {
+ if (
+ typeof window !== "undefined" &&
+ ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)
+ ) {
+ const SpeechRecognition =
+ window.SpeechRecognition || window.webkitSpeechRecognition;
+ const speechRecognition = new SpeechRecognition();
+
+ speechRecognition.continuous = true;
+ speechRecognition.interimResults = true;
+ speechRecognition.lang = "en-US";
+
+ speechRecognition.onstart = () => {
+ setIsListening(true);
+ };
+
+ speechRecognition.onend = () => {
+ setIsListening(false);
+ };
+
+ speechRecognition.onresult = (event) => {
+ let finalTranscript = "";
+
+ for (let i = event.resultIndex; i < event.results.length; i++) {
+ const result = event.results[i];
+ if (result?.isFinal) {
+ finalTranscript += result[0]?.transcript ?? "";
+ }
+ }
+
+ const currentTextareaRef = callbacksRef.current.textareaRef;
+ const currentOnTranscriptionChange =
+ callbacksRef.current.onTranscriptionChange;
+
+ if (finalTranscript && currentTextareaRef?.current) {
+ const textarea = currentTextareaRef.current;
+ const currentValue = textarea.value;
+ const newValue =
+ currentValue + (currentValue ? " " : "") + finalTranscript;
+
+ textarea.value = newValue;
+ textarea.dispatchEvent(new Event("input", { bubbles: true }));
+ currentOnTranscriptionChange?.(newValue);
+ }
+ };
+
+ speechRecognition.onerror = (event) => {
+ console.error("Speech recognition error:", event.error);
+ setIsListening(false);
+ };
+
+ recognitionRef.current = speechRecognition;
+ setRecognition(speechRecognition);
+ }
+
+ return () => {
+ if (recognitionRef.current) {
+ recognitionRef.current.stop();
+ }
+ };
+ }, []);
+
+ const toggleListening = useCallback(() => {
+ if (!recognition) {
+ return;
+ }
+
+ if (isListening) {
+ recognition.stop();
+ } else {
+ recognition.start();
+ }
+ }, [recognition, isListening]);
+
+ return (
+
+
+ );
+};
+
+export type PromptInputSelectProps = ComponentProps;
+
+export const PromptInputSelect = (props: PromptInputSelectProps) => (
+
+);
+
+export type PromptInputSelectTriggerProps = ComponentProps<
+ typeof SelectTrigger
+>;
+
+export const PromptInputSelectTrigger = ({
+ className,
+ ...props
+}: PromptInputSelectTriggerProps) => (
+ ;
+
+export const PromptInputSelectItem = ({
+ className,
+ ...props
+}: PromptInputSelectItemProps) => (
+ ;
+
+export const PromptInputSelectValue = ({
+ className,
+ ...props
+}: PromptInputSelectValueProps) => (
+ ;
+
+export const PromptInputHoverCard = ({
+ openDelay = 0,
+ closeDelay = 0,
+ ...props
+}: PromptInputHoverCardProps) => (
+ ;
+
+export const PromptInputTabsList = ({
+ className,
+ ...props
+}: PromptInputTabsListProps) => ;
+
+export type PromptInputTabProps = HTMLAttributes;
+
+export const PromptInputTab = ({
+ className,
+ ...props
+}: PromptInputTabProps) => ;
+
+export type PromptInputTabLabelProps = HTMLAttributes;
+
+export const PromptInputTabLabel = ({
+ className,
+ ...props
+}: PromptInputTabLabelProps) => (
+
+);
+
+export type PromptInputTabBodyProps = HTMLAttributes;
+
+export const PromptInputTabBody = ({
+ className,
+ ...props
+}: PromptInputTabBodyProps) => (
+
+);
+
+export type PromptInputTabItemProps = HTMLAttributes;
+
+export const PromptInputTabItem = ({
+ className,
+ ...props
+}: PromptInputTabItemProps) => (
+
+);
+
+export type PromptInputCommandProps = ComponentProps;
+
+export const PromptInputCommand = ({
+ className,
+ ...props
+}: PromptInputCommandProps) => ;
+
+export const PromptInputCommandInput = ({
+ className,
+ ...props
+}: PromptInputCommandInputProps) => (
+ ;
+
+export const PromptInputCommandList = ({
+ className,
+ ...props
+}: PromptInputCommandListProps) => (
+ ;
+
+export const PromptInputCommandEmpty = ({
+ className,
+ ...props
+}: PromptInputCommandEmptyProps) => (
+ ;
+
+export const PromptInputCommandGroup = ({
+ className,
+ ...props
+}: PromptInputCommandGroupProps) => (
+ ;
+
+export const PromptInputCommandItem = ({
+ className,
+ ...props
+}: PromptInputCommandItemProps) => (
+ ,
+ "variant" | "size"
+>;
+
+export const QueueItemAction = ({
+ className,
+ ...props
+}: QueueItemActionProps) => (
+
+);
+
+export type QueueItemAttachmentProps = ComponentProps<"div">;
+
+export const QueueItemAttachment = ({
+ className,
+ ...props
+}: QueueItemAttachmentProps) => (
+
+);
+
+export type QueueItemImageProps = ComponentProps<"img">;
+
+export const QueueItemImage = ({
+ className,
+ ...props
+}: QueueItemImageProps) => (
+ ![]()
+);
+
+export type QueueItemFileProps = ComponentProps<"span">;
+
+export const QueueItemFile = ({
+ children,
+ className,
+ ...props
+}: QueueItemFileProps) => (
+
+ ;
+
+export const QueueList = ({
+ children,
+ className,
+ ...props
+}: QueueListProps) => (
+
+
+);
+
+// QueueSection - collapsible section container
+export type QueueSectionProps = ComponentProps;
+
+export const QueueSection = ({
+ className,
+ defaultOpen = true,
+ ...props
+}: QueueSectionProps) => (
+
+
+
+);
+
+// QueueSectionLabel - label content with icon and count
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+ count?: number;
+ label: string;
+ icon?: React.ReactNode;
+};
+
+export const QueueSectionLabel = ({
+ count,
+ label,
+ icon,
+ className,
+ ...props
+}: QueueSectionLabelProps) => (
+
+ (null);
+
+export const useReasoning = () => {
+ const context = useContext(ReasoningContext);
+ if (!context) {
+ throw new Error("Reasoning components must be used within Reasoning");
+ }
+ return context;
+};
+
+export type ReasoningProps = ComponentProps & {
+ isStreaming?: boolean;
+ open?: boolean;
+ defaultOpen?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+ ({
+ className,
+ isStreaming = false,
+ open,
+ defaultOpen = true,
+ onOpenChange,
+ duration: durationProp,
+ children,
+ ...props
+ }: ReasoningProps) => {
+ const [isOpen, setIsOpen] = useControllableState({
+ prop: open,
+ defaultProp: defaultOpen,
+ onChange: onOpenChange,
+ });
+ const [duration, setDuration] = useControllableState({
+ prop: durationProp,
+ defaultProp: undefined,
+ });
+
+ const [hasAutoClosed, setHasAutoClosed] = useState(false);
+ const [startTime, setStartTime] = useState(null);
+
+ // Track duration when streaming starts and ends
+ useEffect(() => {
+ if (isStreaming) {
+ if (startTime === null) {
+ setStartTime(Date.now());
+ }
+ } else if (startTime !== null) {
+ setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+ setStartTime(null);
+ }
+ }, [isStreaming, startTime, setDuration]);
+
+ // Auto-open when streaming starts, auto-close when streaming ends (once only)
+ useEffect(() => {
+ if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+ // Add a small delay before closing to allow user to see the content
+ const timer = setTimeout(() => {
+ setIsOpen(false);
+ setHasAutoClosed(true);
+ }, AUTO_CLOSE_DELAY);
+
+ return () => clearTimeout(timer);
+ }
+ }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+
+ const handleOpenChange = (newOpen: boolean) => {
+ setIsOpen(newOpen);
+ };
+
+ return (
+
+
+ {children}
+
+
+ );
+ },
+);
+
+export type ReasoningTriggerProps = ComponentProps<
+ typeof CollapsibleTrigger
+> & {
+ getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+ if (isStreaming || duration === 0) {
+ return Thinking... ;
+ }
+ if (duration === undefined) {
+ return Thought for a few seconds;
+ }
+ return Thought for {duration} seconds;
+};
+
+export const ReasoningTrigger = memo(
+ ({
+ className,
+ children,
+ getThinkingMessage = defaultGetThinkingMessage,
+ ...props
+ }: ReasoningTriggerProps) => {
+ const { isStreaming, isOpen, duration } = useReasoning();
+
+ return (
+
+ {children ?? (
+ <>
+
+ );
+ },
+);
+
+export type ReasoningContentProps = ComponentProps<
+ typeof CollapsibleContent
+> & {
+ children: string;
+};
+
+export const ReasoningContent = memo(
+ ({ className, children, ...props }: ReasoningContentProps) => (
+
+ {children}
+
+ ),
+);
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
diff --git a/frontend-web/src/components/ai-elements/shimmer.tsx b/frontend-web/src/components/ai-elements/shimmer.tsx
new file mode 100644
index 00000000..d92700f4
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/shimmer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import {
+ type CSSProperties,
+ type ElementType,
+ type JSX,
+ memo,
+ useMemo,
+} from "react";
+
+export type TextShimmerProps = {
+ children: string;
+ as?: ElementType;
+ className?: string;
+ duration?: number;
+ spread?: number;
+};
+
+const ShimmerComponent = ({
+ children,
+ as: Component = "p",
+ className,
+ duration = 2,
+ spread = 2,
+}: TextShimmerProps) => {
+ const MotionComponent = motion.create(
+ Component as keyof JSX.IntrinsicElements,
+ );
+
+ const dynamicSpread = useMemo(
+ () => (children?.length ?? 0) * spread,
+ [children, spread],
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const Shimmer = memo(ShimmerComponent);
diff --git a/frontend-web/src/components/ai-elements/sources.tsx b/frontend-web/src/components/ai-elements/sources.tsx
new file mode 100644
index 00000000..dd0aa623
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/sources.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type SourcesProps = ComponentProps<"div">;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+ & {
+ count: number;
+};
+
+export const SourcesTrigger = ({
+ className,
+ count,
+ children,
+ ...props
+}: SourcesTriggerProps) => (
+
+ {children ?? (
+ <>
+
+);
+
+export type SourcesContentProps = ComponentProps;
+
+export const SourcesContent = ({
+ className,
+ ...props
+}: SourcesContentProps) => (
+ ;
+
+export const Suggestions = ({
+ className,
+ children,
+ ...props
+}: SuggestionsProps) => (
+
+
+);
+
+export type SuggestionProps = Omit, "onClick"> & {
+ suggestion: React.ReactNode;
+ icon?: LucideIcon;
+ onClick?: () => void;
+};
+
+export const Suggestion = ({
+ suggestion,
+ onClick,
+ className,
+ icon: Icon,
+ variant = "outline",
+ size = "sm",
+ children,
+ ...props
+}: SuggestionProps) => {
+ const handleClick = () => {
+ onClick?.();
+ };
+
+ return (
+
+ );
+};
diff --git a/frontend-web/src/components/ai-elements/task.tsx b/frontend-web/src/components/ai-elements/task.tsx
new file mode 100644
index 00000000..6f635914
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/task.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type TaskItemFileProps = ComponentProps<"div">;
+
+export const TaskItemFile = ({
+ children,
+ className,
+ ...props
+}: TaskItemFileProps) => (
+ ;
+
+export const Task = ({
+ defaultOpen = true,
+ className,
+ ...props
+}: TaskProps) => (
+ & {
+ title: string;
+};
+
+export const TaskTrigger = ({
+ children,
+ className,
+ title,
+ ...props
+}: TaskTriggerProps) => (
+
+ {children ?? (
+
+);
+
+export type TaskContentProps = ComponentProps;
+
+export const TaskContent = ({
+ children,
+ className,
+ ...props
+}: TaskContentProps) => (
+
+
+);
diff --git a/frontend-web/src/components/ai-elements/toolbar.tsx b/frontend-web/src/components/ai-elements/toolbar.tsx
new file mode 100644
index 00000000..1152a59d
--- /dev/null
+++ b/frontend-web/src/components/ai-elements/toolbar.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import { NodeToolbar, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+type ToolbarProps = ComponentProps;
+
+export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+ (null);
+
+const useWebPreview = () => {
+ const context = useContext(WebPreviewContext);
+ if (!context) {
+ throw new Error("WebPreview components must be used within a WebPreview");
+ }
+ return context;
+};
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+ defaultUrl?: string;
+ onUrlChange?: (url: string) => void;
+};
+
+export const WebPreview = ({
+ className,
+ children,
+ defaultUrl = "",
+ onUrlChange,
+ ...props
+}: WebPreviewProps) => {
+ const [url, setUrl] = useState(defaultUrl);
+ const [consoleOpen, setConsoleOpen] = useState(false);
+
+ const handleUrlChange = (newUrl: string) => {
+ setUrl(newUrl);
+ onUrlChange?.(newUrl);
+ };
+
+ const contextValue: WebPreviewContextValue = {
+ url,
+ setUrl: handleUrlChange,
+ consoleOpen,
+ setConsoleOpen,
+ };
+
+ return (
+
+
+ );
+};
+
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+
+export const WebPreviewNavigation = ({
+ className,
+ children,
+ ...props
+}: WebPreviewNavigationProps) => (
+ & {
+ tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+ onClick,
+ disabled,
+ tooltip,
+ children,
+ ...props
+}: WebPreviewNavigationButtonProps) => (
+
+
+
+
+
+
+
+
+
+);
+
+export type WebPreviewUrlProps = ComponentProps;
+
+export const WebPreviewUrl = ({
+ value,
+ onChange,
+ onKeyDown,
+ ...props
+}: WebPreviewUrlProps) => {
+ const { url, setUrl } = useWebPreview();
+ const [inputValue, setInputValue] = useState(url);
+
+ // Sync input value with context URL when it changes externally
+ useEffect(() => {
+ setInputValue(url);
+ }, [url]);
+
+ const handleChange = (event: React.ChangeEvent) => {
+ setInputValue(event.target.value);
+ onChange?.(event);
+ };
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter") {
+ const target = event.target as HTMLInputElement;
+ setUrl(target.value);
+ }
+ onKeyDown?.(event);
+ };
+
+ return (
+
+ );
+};
+
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+ loading?: ReactNode;
+};
+
+export const WebPreviewBody = ({
+ className,
+ loading,
+ src,
+ ...props
+}: WebPreviewBodyProps) => {
+ const { url } = useWebPreview();
+
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-web/src/components/landing/footer.tsx b/frontend-web/src/components/landing/footer.tsx
new file mode 100644
index 00000000..837e71ef
--- /dev/null
+++ b/frontend-web/src/components/landing/footer.tsx
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+
+export function Footer() {
+ const year = useMemo(() => new Date().getFullYear(), []);
+ return (
+
+ );
+}
diff --git a/frontend-web/src/components/landing/header.tsx b/frontend-web/src/components/landing/header.tsx
new file mode 100644
index 00000000..8f0f6f6b
--- /dev/null
+++ b/frontend-web/src/components/landing/header.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { StarFilledIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { NumberTicker } from "@/components/ui/number-ticker";
+import type { Locale } from "@/core/i18n/locale";
+import { useI18n } from "@/core/i18n/hooks";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
+
+export type HeaderProps = {
+ className?: string;
+ homeURL?: string;
+ locale?: Locale;
+};
+
+export function Header({ className, homeURL }: HeaderProps) {
+ const isExternalHome = !homeURL;
+ const { locale: resolvedLocale, t } = useI18n();
+ const lang = resolvedLocale.substring(0, 2);
+ return (
+
+
+
+ );
+}
+
+function StarCounter() {
+ const [stars, setStars] = useState(10000);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ async function loadStars() {
+ try {
+ const response = await fetch(
+ "https://api.github.com/repos/bytedance/deer-flow",
+ {
+ headers: env.GITHUB_OAUTH_TOKEN
+ ? {
+ Authorization: `Bearer ${env.GITHUB_OAUTH_TOKEN}`,
+ "Content-Type": "application/json",
+ }
+ : {},
+ },
+ );
+
+ if (!response.ok) return;
+ const data = await response.json();
+ if (!cancelled && typeof data?.stargazers_count === "number") {
+ setStars(data.stargazers_count);
+ }
+ } catch (error) {
+ console.error("Error fetching GitHub stars:", error);
+ }
+ }
+
+ void loadStars();
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ return (
+ <>
+ ) {
+ return (
+
+ );
+}
diff --git a/frontend-web/src/components/landing/post-list.tsx b/frontend-web/src/components/landing/post-list.tsx
new file mode 100644
index 00000000..4d677d16
--- /dev/null
+++ b/frontend-web/src/components/landing/post-list.tsx
@@ -0,0 +1,163 @@
+import Link from "next/link";
+
+import { getBlogRoute, normalizeTagSlug, type BlogPost } from "@/core/blog";
+import { cn } from "@/lib/utils";
+
+type PostListProps = {
+ description?: string;
+ posts: BlogPost[];
+ title: string;
+};
+
+type PostMetaProps = {
+ currentLang?: string;
+ date?: string | null;
+ languages?: string[];
+ pathname?: string;
+};
+
+function formatDate(date?: string): string | null {
+ if (!date) {
+ return null;
+ }
+
+ const value = new Date(date);
+ if (Number.isNaN(value.getTime())) {
+ return date;
+ }
+
+ return new Intl.DateTimeFormat("en-US", {
+ day: "numeric",
+ month: "short",
+ year: "numeric",
+ }).format(value);
+}
+
+export function PostMeta({
+ currentLang,
+ date,
+ languages,
+ pathname,
+}: PostMetaProps) {
+ const formattedDate = formatDate(date ?? undefined);
+ const availableLanguages = Array.isArray(languages)
+ ? languages.filter((lang): lang is string => typeof lang === "string")
+ : [];
+
+ if (!formattedDate && availableLanguages.length <= 1) {
+ return null;
+ }
+
+ return (
+ ("idle");
+ const [searchIndex, setSearchIndex] = useState(0);
+ const [buildIndex, setBuildIndex] = useState(0);
+ const [, setChatMessages] = useState([]);
+ const [, setShowWorkspace] = useState(false);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [hasPlayed, setHasPlayed] = useState(false);
+ const [hasAutoPlayed, setHasAutoPlayed] = useState(false);
+ const chatMessagesRef = useRef(null);
+ const containerRef = useRef(null);
+ const timeoutsRef = useRef([]);
+
+ // Additional display duration after the final step (done) completes, used to show the final result
+ const FINAL_DISPLAY_DURATION = 3000; // milliseconds
+
+ // Play animation only when isPlaying is true
+ useEffect(() => {
+ if (!isPlaying) {
+ // Clear all timeouts when paused
+ timeoutsRef.current.forEach(clearTimeout);
+ timeoutsRef.current = [];
+ return;
+ }
+
+ const timeline = [
+ { phase: "user-input" as const, delay: ANIMATION_DELAYS["user-input"] },
+ { phase: "scanning" as const, delay: ANIMATION_DELAYS.scanning },
+ { phase: "load-skill" as const, delay: ANIMATION_DELAYS["load-skill"] },
+ {
+ phase: "load-template" as const,
+ delay: ANIMATION_DELAYS["load-template"],
+ },
+ { phase: "researching" as const, delay: ANIMATION_DELAYS.researching },
+ {
+ phase: "load-frontend" as const,
+ delay: ANIMATION_DELAYS["load-frontend"],
+ },
+ { phase: "building" as const, delay: ANIMATION_DELAYS.building },
+ { phase: "load-deploy" as const, delay: ANIMATION_DELAYS["load-deploy"] },
+ { phase: "deploying" as const, delay: ANIMATION_DELAYS.deploying },
+ { phase: "done" as const, delay: ANIMATION_DELAYS.done },
+ ];
+
+ let totalDelay = 0;
+ const timeouts: NodeJS.Timeout[] = [];
+
+ timeline.forEach(({ phase, delay }) => {
+ totalDelay += delay;
+ timeouts.push(setTimeout(() => setPhase(phase), totalDelay));
+ });
+
+ // Reset after animation completes
+ // Total duration for the final step = ANIMATION_DELAYS["done"] + FINAL_DISPLAY_DURATION
+ timeouts.push(
+ setTimeout(() => {
+ setPhase("idle");
+ setChatMessages([]);
+ setSearchIndex(0);
+ setBuildIndex(0);
+ setShowWorkspace(false);
+ setIsPlaying(false);
+ }, totalDelay + FINAL_DISPLAY_DURATION),
+ );
+
+ timeoutsRef.current = timeouts;
+
+ return () => {
+ timeouts.forEach(clearTimeout);
+ timeoutsRef.current = [];
+ };
+ }, [isPlaying]);
+
+ const handlePlay = () => {
+ setIsPlaying(true);
+ setHasPlayed(true);
+ setPhase("idle");
+ setChatMessages([]);
+ setSearchIndex(0);
+ setBuildIndex(0);
+ setShowWorkspace(false);
+ };
+
+ const handleTogglePlayPause = () => {
+ if (isPlaying) {
+ setIsPlaying(false);
+ } else {
+ // If animation hasn't started or is at idle, restart from beginning
+ if (phase === "idle") {
+ handlePlay();
+ } else {
+ // Resume from current phase
+ setIsPlaying(true);
+ }
+ }
+ };
+
+ // Auto-play when component enters viewport for the first time
+ useEffect(() => {
+ if (hasAutoPlayed || !containerRef.current) return;
+
+ const containerElement = containerRef.current;
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting && !hasAutoPlayed && !isPlaying) {
+ setHasAutoPlayed(true);
+ // Small delay before auto-playing for better UX
+ setTimeout(() => {
+ setIsPlaying(true);
+ setHasPlayed(true);
+ setPhase("idle");
+ setChatMessages([]);
+ setSearchIndex(0);
+ setBuildIndex(0);
+ setShowWorkspace(false);
+ }, 300);
+ }
+ });
+ },
+ {
+ threshold: 0.3, // Trigger when 30% of the component is visible
+ rootMargin: "0px",
+ },
+ );
+
+ observer.observe(containerElement);
+
+ return () => {
+ if (containerElement) {
+ observer.unobserve(containerElement);
+ }
+ };
+ }, [hasAutoPlayed, isPlaying]);
+
+ // Handle search animation
+ useEffect(() => {
+ if (phase === "researching" && searchIndex < searchSteps.length) {
+ const timer = setTimeout(() => {
+ setSearchIndex((i) => i + 1);
+ }, 350);
+ return () => clearTimeout(timer);
+ }
+ }, [phase, searchIndex]);
+
+ // Handle build animation
+ useEffect(() => {
+ if (phase === "building" && buildIndex < 3) {
+ const timer = setTimeout(() => {
+ setBuildIndex((i) => i + 1);
+ }, 600);
+ return () => clearTimeout(timer);
+ }
+ if (phase === "building") {
+ setShowWorkspace(true);
+ }
+ }, [phase, buildIndex]);
+
+ // Auto scroll chat to bottom when messages change
+ useEffect(() => {
+ if (chatMessagesRef.current && phase !== "idle") {
+ chatMessagesRef.current.scrollTo({
+ top: chatMessagesRef.current.scrollHeight,
+ behavior: "smooth",
+ });
+ }
+ }, [phase, searchIndex, buildIndex]);
+
+ const getFileTree = (): FileItem[] => {
+ const base: FileItem[] = [
+ {
+ name: "deep-search",
+ type: "folder",
+ indent: 0,
+ highlight: phase === "scanning",
+ active: ["load-skill", "load-template", "researching"].includes(phase),
+ done: [
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase),
+ },
+ {
+ name: "SKILL.md",
+ type: "file",
+ indent: 1,
+ highlight: phase === "scanning",
+ dragging: phase === "load-skill",
+ done: [
+ "load-template",
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase),
+ },
+ {
+ name: "biotech.md",
+ type: "file",
+ indent: 1,
+ highlight: phase === "load-template",
+ dragging: phase === "load-template",
+ done: [
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase),
+ },
+ { name: "computer-science.md", type: "file", indent: 1 },
+ { name: "physics.md", type: "file", indent: 1 },
+ {
+ name: "frontend-design",
+ type: "folder",
+ indent: 0,
+ highlight: phase === "scanning",
+ active: ["load-frontend", "building"].includes(phase),
+ done: ["building", "load-deploy", "deploying", "done"].includes(phase),
+ },
+ {
+ name: "SKILL.md",
+ type: "file",
+ indent: 1,
+ highlight: phase === "scanning",
+ dragging: phase === "load-frontend",
+ done: ["building", "load-deploy", "deploying", "done"].includes(phase),
+ },
+ {
+ name: "deploy",
+ type: "folder",
+ indent: 0,
+ highlight: phase === "scanning",
+ active: ["load-deploy", "deploying"].includes(phase),
+ done: ["deploying", "done"].includes(phase),
+ },
+ {
+ name: "SKILL.md",
+ type: "file",
+ indent: 1,
+ highlight: phase === "scanning",
+ dragging: phase === "load-deploy",
+ done: ["deploying", "done"].includes(phase),
+ },
+ {
+ name: "scripts",
+ type: "folder",
+ indent: 1,
+ done: ["deploying", "done"].includes(phase),
+ },
+ {
+ name: "deploy.sh",
+ type: "file",
+ indent: 2,
+ done: ["deploying", "done"].includes(phase),
+ },
+ ];
+ return base;
+ };
+
+ const workspaceFiles = ["index.html", "index.css", "index.js"];
+
+ return (
+
+
+
+ {children}
+
+ );
+}
diff --git a/frontend-web/src/components/landing/sections/case-study-section.tsx b/frontend-web/src/components/landing/sections/case-study-section.tsx
new file mode 100644
index 00000000..d0b97ba8
--- /dev/null
+++ b/frontend-web/src/components/landing/sections/case-study-section.tsx
@@ -0,0 +1,99 @@
+import Link from "next/link";
+
+import { Card } from "@/components/ui/card";
+import { pathOfThread } from "@/core/threads/utils";
+import { cn } from "@/lib/utils";
+
+import { Section } from "../section";
+
+export function CaseStudySection({ className }: { className?: string }) {
+ const caseStudies = [
+ {
+ threadId: "7cfa5f8f-a2f8-47ad-acbd-da7137baf990",
+ title: "Forecast 2026 Agent Trends and Opportunities",
+ description:
+ "Create a webpage with a Deep Research report forecasting the agent technology trends and opportunities in 2026.",
+ },
+ {
+ threadId: "4f3e55ee-f853-43db-bfb3-7d1a411f03cb",
+ title: 'Generate a Video Based On the Novel "Pride and Prejudice"',
+ description:
+ 'Search the specific scene from the novel "Pride and Prejudice", then generate a video as well as a reference image based on the scenes.',
+ },
+ {
+ threadId: "21cfea46-34bd-4aa6-9e1f-3009452fbeb9",
+ title: "Doraemon Explains the MOE Architecture",
+ description:
+ "Generate a Doraemon comic strip explaining the MOE architecture to the teenagers who are interested in AI.",
+ },
+ {
+ threadId: "ad76c455-5bf9-4335-8517-fc03834ab828",
+ title: "An Exploratory Data Analysis of the Titanic Dataset",
+ description:
+ "Explore the Titanic dataset and identify the key factors that influenced survival rates with visualizations and insights.",
+ },
+ {
+ threadId: "d3e5adaf-084c-4dd5-9d29-94f1d6bccd98",
+ title: "Watch Y Combinator's Video then Conduct a Deep Research",
+ description:
+ "Watch the given Y Combinator's YouTube video and conduct a deep research on the YC's tips for technical startup founders.",
+ },
+ {
+ threadId: "3823e443-4e2b-4679-b496-a9506eae462b",
+ title: "Collect and Summarize Dr. Fei Fei Li's Podcasts",
+ description:
+ "Collect all the podcast appearances of Dr. Fei Fei Li in the last 6 months, then summarize them into a comprehensive report.",
+ },
+ ];
+ return (
+
+
+ );
+}
diff --git a/frontend-web/src/components/landing/sections/community-section.tsx b/frontend-web/src/components/landing/sections/community-section.tsx
new file mode 100644
index 00000000..0582d50b
--- /dev/null
+++ b/frontend-web/src/components/landing/sections/community-section.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+
+import { AuroraText } from "@/components/ui/aurora-text";
+import { Button } from "@/components/ui/button";
+
+import { Section } from "../section";
+
+export function CommunitySection() {
+ return (
+
+ Join the Community
+
+ }
+ subtitle="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts."
+ >
+
+ );
+}
diff --git a/frontend-web/src/components/landing/sections/sandbox-section.tsx b/frontend-web/src/components/landing/sections/sandbox-section.tsx
new file mode 100644
index 00000000..1ced21d7
--- /dev/null
+++ b/frontend-web/src/components/landing/sections/sandbox-section.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import {
+ AnimatedSpan,
+ Terminal,
+ TypingAnimation,
+} from "@/components/ui/terminal";
+
+import { Section } from "../section";
+
+export function SandboxSection({ className }: { className?: string }) {
+ return (
+
+ We give DeerFlow a "computer", which can execute commands,
+ manage files, and run long tasks — all in a secure Docker-based
+ sandbox
+
+ }
+ >
+
+ );
+}
diff --git a/frontend-web/src/components/landing/sections/skills-section.tsx b/frontend-web/src/components/landing/sections/skills-section.tsx
new file mode 100644
index 00000000..8a673220
--- /dev/null
+++ b/frontend-web/src/components/landing/sections/skills-section.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+import ProgressiveSkillsAnimation from "../progressive-skills-animation";
+import { Section } from "../section";
+
+export function SkillsSection({ className }: { className?: string }) {
+ return (
+
+ Agent Skills are loaded progressively — only what's needed, when
+ it's needed.
+
+ Extend DeerFlow with your own skill files, or use our built-in + library. +
+ }
+ >
+
+
+
+
+
+ {attachmentLabel}
+
+ {isImage ? (
+
+ ) : (
+
+
+
+
+ )}
+
+ {isImage && (
+
+
+
+
+ )}
+
+
+
+
+ + {filename || (isImage ? "Image" : "Attachment")} +
+ {data.mediaType && ( ++ {data.mediaType} +
+ )} +
+ {attachments.files.map((file) => (
+
+
+ ))}
+
+ );
+}
+
+export type PromptInputActionAddAttachmentsProps = ComponentProps<
+ typeof DropdownMenuItem
+> & {
+ label?: string;
+};
+
+export const PromptInputActionAddAttachments = ({
+ label = "Add photos or files",
+ ...props
+}: PromptInputActionAddAttachmentsProps) => {
+ const attachments = usePromptInputAttachments();
+
+ return (
+ {children(file)}
+
+
+ - {children}
Used {count} sources
+
+ {Children.map(children, (child, index) =>
+ child != null ? (
+
+ {child}
+
+ ) : (
+ child
+ ),
+ )}
+
+
+ {children}
+
+);
+
+export type TaskItemProps = ComponentProps<"div">;
+
+export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
+
+ {children}
+
+);
+
+export type TaskProps = ComponentProps
+
+ )}
+ {title}
+
+ {children}
+
+
+ {children}
+
+
+ {children}
+
+);
+
+export type WebPreviewNavigationButtonProps = ComponentProps{tooltip}
+
+
+ {loading}
+
+ );
+};
+
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+ logs?: Array<{
+ level: "log" | "warn" | "error";
+ message: string;
+ timestamp: Date;
+ }>;
+};
+
+export const WebPreviewConsole = ({
+ className,
+ logs = [],
+ children,
+ ...props
+}: WebPreviewConsoleProps) => {
+ const { consoleOpen, setConsoleOpen } = useWebPreview();
+
+ return (
+
+ {logs.length === 0 ? (
+
+ No console output
+ ) : ( + logs.map((log, index) => ( +
+
+ {log.timestamp.toLocaleTimeString()}
+ {" "}
+ {log.message}
+
+ ))
+ )}
+ {children}
+
+
+
+
+ CM业务中心-问答管理
+ +
+
+
+
+ +
+
+ );
+}
+
+function BytePlusIcon(props: React.SVGProps
+
+
+
+
+ {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
+
+
+
+
+ {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
+
+
+ In partnership with
+
+
+ )}
+
+ An open-source SuperAgent harness that researches, codes, and creates.
+ With
+
+ the help of sandboxes, memories, tools, skills and subagents, it
+ handles
+
+ different levels of tasks that could take minutes to hours.
+
+ {formattedDate ? (
+
+ );
+}
+
+export function PostTags({
+ tags,
+ className,
+}: {
+ tags?: unknown;
+ className?: string;
+}) {
+ if (!Array.isArray(tags)) {
+ return null;
+ }
+
+ const validTags = tags.filter(
+ (tag): tag is string => typeof tag === "string" && tag.length > 0,
+ );
+
+ if (validTags.length === 0) {
+ return null;
+ }
+
+ return (
+ {formattedDate}
+ ) : null} + + {pathname && availableLanguages.length > 1 ? ( +
+ Language:
+ {availableLanguages.map((lang) => {
+ const isActive = lang === currentLang;
+ return (
+
+ {lang.toUpperCase()}
+
+ );
+ })}
+
+ ) : null}
+
+ Tags:
+ {validTags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ );
+}
+
+export function PostList({ description, posts, title }: PostListProps) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/frontend-web/src/components/landing/progressive-skills-animation.tsx b/frontend-web/src/components/landing/progressive-skills-animation.tsx
new file mode 100644
index 00000000..f04c1529
--- /dev/null
+++ b/frontend-web/src/components/landing/progressive-skills-animation.tsx
@@ -0,0 +1,701 @@
+"use client";
+
+import {
+ Folder,
+ FileText,
+ Search,
+ Globe,
+ Check,
+ Sparkles,
+ Terminal,
+ Play,
+ Pause,
+} from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import { useState, useEffect, useRef } from "react";
+
+import { Tooltip } from "@/components/workspace/tooltip";
+
+type AnimationPhase =
+ | "idle"
+ | "user-input"
+ | "scanning"
+ | "load-skill"
+ | "load-template"
+ | "researching"
+ | "load-frontend"
+ | "building"
+ | "load-deploy"
+ | "deploying"
+ | "done";
+
+interface FileItem {
+ name: string;
+ type: "folder" | "file";
+ indent: number;
+ highlight?: boolean;
+ active?: boolean;
+ done?: boolean;
+ dragging?: boolean;
+}
+
+const searchSteps = [
+ { type: "search", text: "mRNA lipid nanoparticle delivery 2024" },
+ { type: "fetch", text: "nature.com/articles/s41587-024..." },
+ { type: "search", text: "LNP ionizable lipids efficiency" },
+ { type: "fetch", text: "pubs.acs.org/doi/10.1021/..." },
+ { type: "search", text: "targeted mRNA tissue-specific" },
+];
+
+// Animation duration configuration - adjust the duration for each step here
+const ANIMATION_DELAYS = {
+ "user-input": 0, // User input phase duration (milliseconds)
+ scanning: 2000, // Scanning phase duration
+ "load-skill": 1500, // Load skill phase duration
+ "load-template": 1200, // Load template phase duration
+ researching: 800, // Researching phase duration
+ "load-frontend": 800, // Load frontend phase duration
+ building: 1200, // Building phase duration
+ "load-deploy": 2500, // Load deploy phase duration
+ deploying: 1200, // Deploying phase duration
+ done: 2500, // Done phase duration (final step)
+} as const;
+
+export default function ProgressiveSkillsAnimation() {
+ const [phase, setPhase] = useState+ {title} +
+ {description ? ( +{description}
+ ) : null} +
+ {posts.map((post) => {
+ return (
+
+
+ );
+ })}
+
+
+ {/* Overlay and Play Button */}
+
+ {!isPlaying && !hasPlayed && (
+
+
+
+
+ )}
+
+
+ {/* Bottom Left Play/Pause Button */}
+
+
+
+
+ );
+}
diff --git a/frontend-web/src/components/landing/section.tsx b/frontend-web/src/components/landing/section.tsx
new file mode 100644
index 00000000..97146697
--- /dev/null
+++ b/frontend-web/src/components/landing/section.tsx
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+export function Section({
+ className,
+ title,
+ subtitle,
+ children,
+}: {
+ className?: string;
+ title: React.ReactNode;
+ subtitle?: React.ReactNode;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+ Click to play
+
+
+
+ {isPlaying ? (
+
+
+ Click to {isPlaying ? "pause" : "play"}
+
+
+
+ {/* Left: File Tree */}
+
+
+
+ /mnt/skills/
+
+
+
+
+ {/* Right: Chat Interface */}
+
+ {getFileTree().map((item, index) => (
+
+ {item.type === "folder" ? (
+
+ ))}
+
+
+ {/* Chat Header */}
+
+
+
+
+ {/* Chat Messages */}
+
+
+ CM业务中心-问答管理 Agent
+
+
+ {/* User Message */}
+
+ {phase !== "idle" && (
+
+
+ )}
+
+
+ {/* Agent Messages */}
+
+ {phase !== "idle" && phase !== "user-input" && (
+
+ {/* Found Skills */}
+ {[
+ "scanning",
+ "load-skill",
+ "load-template",
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase) && (
+
+
+
+ )}
+
+ {/* Deploying */}
+ {["load-deploy", "deploying", "done"].includes(phase) && (
+
+
+
+
+ )}
+
+ )}
+
+ )}
+
+
+
+ {/* Chat Input (decorative) */}
+
+
+ + Research mRNA delivery, build a landing page, deploy to + Vercel +
+
+ ✨ Found 3 skills
+
+ )}
+
+ {/* Researching Section */}
+ {[
+ "load-skill",
+ "load-template",
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase) && (
+
+
+
+ )}
+
+ {/* Building */}
+ {["building", "load-deploy", "deploying", "done"].includes(
+ phase,
+ ) && (
+ +
+ 🔬 Researching...
+
+
+ {/* Loading SKILL.md */}
+ {[
+ "load-skill",
+ "load-template",
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase) && (
+
+ {/* Search steps */}
+ {phase === "researching" && (
+
+
+ )}
+ {/* Loading biotech.md */}
+ {[
+ "load-template",
+ "researching",
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase) && (
+
+
+ )}
+
+ {searchSteps.slice(0, searchIndex).map((step, i) => (
+
+ {step.type === "search" ? (
+
+ ))}
+
+ )}
+ {[
+ "load-frontend",
+ "building",
+ "load-deploy",
+ "deploying",
+ "done",
+ ].includes(phase) && (
+
+ {searchSteps.map((step, i) => (
+
+ {step.type === "search" ? (
+
+ ))}
+
+ )}
+ +
🔨 Building...
+
+
+
+ {workspaceFiles.slice(0, buildIndex).map((file) => (
+
+
+ ))}
+
+ +
🚀 Deploying...
+
+
+
+ )}
+
+ {phase === "done" && (
+
+
+ {["deploying", "done"].includes(phase) && (
+
+ ✅ Live at biotech-startup.vercel.app
+
+
+
+
+ Ask CM业务中心-问答管理 anything...
+
+
+ {title}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+ {caseStudies.map((caseStudy) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ + {caseStudy.title} +
++ {caseStudy.description} +
+
+
+
+
+ {/* Left: Terminal */}
+
+
+
+ {/* Scene 1: Build a Game */}
+ $ cat requirements.txt
+
+ pygame==2.5.0
+
+
+
+ $ pip install -r requirements.txt
+
+
+ ✔ Installed pygame
+
+
+
+ $ write game.py --lines 156
+
+
+ ✔ Written 156 lines
+
+
+
+ $ python game.py --test
+
+
+ ✔ All sprites loaded
+
+
+ ✔ Physics engine OK
+
+
+ ✔ 60 FPS stable
+
+
+ {/* Scene 2: Data Analysis */}
+
+ $ curl -O sales-2024.csv
+
+
+ Downloaded 12.4 MB
+
+
+
+
+ {/* Right: Description */}
+
+
+
+
+
+ + Open-source +
++ + AIO Sandbox + +
+
+
+
+ {/* Feature Tags */}
+ + We recommend using{" "} + + All-in-One Sandbox + {" "} + that combines Browser, Shell, File, MCP and VSCode Server in a + single Docker container. +
+
+
+ Isolated
+
+
+ Safe
+
+
+ Persistent
+
+
+ Mountable FS
+
+
+ Long-running
+
+
+ + Extend DeerFlow with your own skill files, or use our built-in + library. +
+
+
+ );
+}
diff --git a/frontend-web/src/components/landing/sections/whats-new-section.tsx b/frontend-web/src/components/landing/sections/whats-new-section.tsx
new file mode 100644
index 00000000..16fd0132
--- /dev/null
+++ b/frontend-web/src/components/landing/sections/whats-new-section.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import MagicBento, { type BentoCardProps } from "@/components/ui/magic-bento";
+import { cn } from "@/lib/utils";
+
+import { Section } from "../section";
+
+const COLOR = "#0a0a0a";
+const features: BentoCardProps[] = [
+ {
+ color: COLOR,
+ label: "Context Engineering",
+ title: "Long/Short-term Memory",
+ description: "Now the agent can better understand you",
+ },
+ {
+ color: COLOR,
+ label: "Long Task Running",
+ title: "Planning and Sub-tasking",
+ description:
+ "Plans ahead, reasons through complexity, then executes sequentially or in parallel",
+ },
+ {
+ color: COLOR,
+ label: "Extensible",
+ title: "Skills and Tools",
+ description:
+ "Plug, play, or even swap built-in tools. Build the agent you want.",
+ },
+
+ {
+ color: COLOR,
+ label: "Persistent",
+ title: "Sandbox with File System",
+ description: "Read, write, run — like a real computer",
+ },
+ {
+ color: COLOR,
+ label: "Flexible",
+ title: "Multi-Model Support",
+ description: "Doubao, DeepSeek, OpenAI, Gemini, etc.",
+ },
+ {
+ color: COLOR,
+ label: "Free",
+ title: "Open Source",
+ description: "MIT License, self-hosted, full control",
+ },
+];
+
+export function WhatsNewSection({ className }: { className?: string }) {
+ return (
+
+
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ );
+}
+
+function CommandList({
+ className,
+ ...props
+}: React.ComponentPropsa:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export {
+ Empty,
+ EmptyHeader,
+ EmptyTitle,
+ EmptyDescription,
+ EmptyContent,
+ EmptyMedia,
+};
diff --git a/frontend-web/src/components/ui/flickering-grid.tsx b/frontend-web/src/components/ui/flickering-grid.tsx
new file mode 100644
index 00000000..15bc3c8e
--- /dev/null
+++ b/frontend-web/src/components/ui/flickering-grid.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+interface FlickeringGridProps extends React.HTMLAttributes {
+ squareSize?: number;
+ gridGap?: number;
+ flickerChance?: number;
+ color?: string;
+ width?: number;
+ height?: number;
+ className?: string;
+ maxOpacity?: number;
+}
+
+export const FlickeringGrid: React.FC = ({
+ squareSize = 4,
+ gridGap = 6,
+ flickerChance = 0.3,
+ color = "rgb(0, 0, 0)",
+ width,
+ height,
+ className,
+ maxOpacity = 0.3,
+ ...props
+}) => {
+ const canvasRef = useRef(null);
+ const containerRef = useRef(null);
+ const [isInView, setIsInView] = useState(false);
+ const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+
+ const memoizedColor = useMemo(() => {
+ const toRGBA = (color: string) => {
+ if (typeof window === "undefined") {
+ return `rgba(0, 0, 0,`;
+ }
+ const canvas = document.createElement("canvas");
+ canvas.width = canvas.height = 1;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return "rgba(255, 0, 0,";
+ ctx.fillStyle = color;
+ ctx.fillRect(0, 0, 1, 1);
+ const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);
+ return `rgba(${r}, ${g}, ${b},`;
+ };
+ return toRGBA(color);
+ }, [color]);
+
+ const setupCanvas = useCallback(
+ (canvas: HTMLCanvasElement, width: number, height: number) => {
+ const dpr = window.devicePixelRatio || 1;
+ canvas.width = width * dpr;
+ canvas.height = height * dpr;
+ canvas.style.width = `${width}px`;
+ canvas.style.height = `${height}px`;
+ const cols = Math.floor(width / (squareSize + gridGap));
+ const rows = Math.floor(height / (squareSize + gridGap));
+
+ const squares = new Float32Array(cols * rows);
+ for (let i = 0; i < squares.length; i++) {
+ squares[i] = Math.random() * maxOpacity;
+ }
+
+ return { cols, rows, squares, dpr };
+ },
+ [squareSize, gridGap, maxOpacity],
+ );
+
+ const updateSquares = useCallback(
+ (squares: Float32Array, deltaTime: number) => {
+ for (let i = 0; i < squares.length; i++) {
+ if (Math.random() < flickerChance * deltaTime) {
+ squares[i] = Math.random() * maxOpacity;
+ }
+ }
+ },
+ [flickerChance, maxOpacity],
+ );
+
+ const drawGrid = useCallback(
+ (
+ ctx: CanvasRenderingContext2D,
+ width: number,
+ height: number,
+ cols: number,
+ rows: number,
+ squares: Float32Array,
+ dpr: number,
+ ) => {
+ ctx.clearRect(0, 0, width, height);
+ ctx.fillStyle = "transparent";
+ ctx.fillRect(0, 0, width, height);
+
+ for (let i = 0; i < cols; i++) {
+ for (let j = 0; j < rows; j++) {
+ const opacity = squares[i * rows + j];
+ ctx.fillStyle = `${memoizedColor}${opacity})`;
+ ctx.fillRect(
+ i * (squareSize + gridGap) * dpr,
+ j * (squareSize + gridGap) * dpr,
+ squareSize * dpr,
+ squareSize * dpr,
+ );
+ }
+ }
+ },
+ [memoizedColor, squareSize, gridGap],
+ );
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const container = containerRef.current;
+ if (!canvas || !container) return;
+
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ let animationFrameId: number;
+ let gridParams: ReturnType;
+
+ const updateCanvasSize = () => {
+ const newWidth = width || container.clientWidth;
+ const newHeight = height || container.clientHeight;
+ setCanvasSize({ width: newWidth, height: newHeight });
+ gridParams = setupCanvas(canvas, newWidth, newHeight);
+ };
+
+ updateCanvasSize();
+
+ let lastTime = 0;
+ const animate = (time: number) => {
+ if (!isInView) return;
+
+ const deltaTime = (time - lastTime) / 1000;
+ lastTime = time;
+
+ updateSquares(gridParams.squares, deltaTime);
+ drawGrid(
+ ctx,
+ canvas.width,
+ canvas.height,
+ gridParams.cols,
+ gridParams.rows,
+ gridParams.squares,
+ gridParams.dpr,
+ );
+ animationFrameId = requestAnimationFrame(animate);
+ };
+
+ const resizeObserver = new ResizeObserver(() => {
+ updateCanvasSize();
+ });
+
+ resizeObserver.observe(container);
+
+ const intersectionObserver = new IntersectionObserver(
+ ([entry]) => {
+ if (entry) {
+ setIsInView(entry.isIntersecting);
+ }
+ },
+ { threshold: 0 },
+ );
+
+ intersectionObserver.observe(canvas);
+
+ if (isInView) {
+ animationFrameId = requestAnimationFrame(animate);
+ }
+
+ return () => {
+ cancelAnimationFrame(animationFrameId);
+ resizeObserver.disconnect();
+ intersectionObserver.disconnect();
+ };
+ }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);
+
+ return (
+ ) {
+ return ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/frontend-web/src/components/ui/input-group.tsx b/frontend-web/src/components/ui/input-group.tsx
new file mode 100644
index 00000000..e35f75b2
--- /dev/null
+++ b/frontend-web/src/components/ui/input-group.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+
+
+ );
+};
diff --git a/frontend-web/src/components/ui/galaxy.css b/frontend-web/src/components/ui/galaxy.css
new file mode 100644
index 00000000..06380977
--- /dev/null
+++ b/frontend-web/src/components/ui/galaxy.css
@@ -0,0 +1,5 @@
+.galaxy-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
diff --git a/frontend-web/src/components/ui/galaxy.jsx b/frontend-web/src/components/ui/galaxy.jsx
new file mode 100644
index 00000000..c1d20ab8
--- /dev/null
+++ b/frontend-web/src/components/ui/galaxy.jsx
@@ -0,0 +1,361 @@
+import { Renderer, Program, Mesh, Color, Triangle } from "ogl";
+import { useEffect, useRef } from "react";
+import "./galaxy.css";
+
+const vertexShader = `
+attribute vec2 uv;
+attribute vec2 position;
+
+varying vec2 vUv;
+
+void main() {
+ vUv = uv;
+ gl_Position = vec4(position, 0, 1);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uResolution;
+uniform vec2 uFocal;
+uniform vec2 uRotation;
+uniform float uStarSpeed;
+uniform float uDensity;
+uniform float uHueShift;
+uniform float uSpeed;
+uniform vec2 uMouse;
+uniform float uGlowIntensity;
+uniform float uSaturation;
+uniform bool uMouseRepulsion;
+uniform float uTwinkleIntensity;
+uniform float uRotationSpeed;
+uniform float uRepulsionStrength;
+uniform float uMouseActiveFactor;
+uniform float uAutoCenterRepulsion;
+uniform bool uTransparent;
+
+varying vec2 vUv;
+
+#define NUM_LAYER 4.0
+#define STAR_COLOR_CUTOFF 0.2
+#define MAT45 mat2(0.7071, -0.7071, 0.7071, 0.7071)
+#define PERIOD 3.0
+
+float Hash21(vec2 p) {
+ p = fract(p * vec2(123.34, 456.21));
+ p += dot(p, p + 45.32);
+ return fract(p.x * p.y);
+}
+
+float tri(float x) {
+ return abs(fract(x) * 2.0 - 1.0);
+}
+
+float tris(float x) {
+ float t = fract(x);
+ return 1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0));
+}
+
+float trisn(float x) {
+ float t = fract(x);
+ return 2.0 * (1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0))) - 1.0;
+}
+
+vec3 hsv2rgb(vec3 c) {
+ vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+ vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+ return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+float Star(vec2 uv, float flare) {
+ float d = length(uv);
+ float m = (0.05 * uGlowIntensity) / d;
+ float rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));
+ m += rays * flare * uGlowIntensity;
+ uv *= MAT45;
+ rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));
+ m += rays * 0.3 * flare * uGlowIntensity;
+ m *= smoothstep(1.0, 0.2, d);
+ return m;
+}
+
+vec3 StarLayer(vec2 uv) {
+ vec3 col = vec3(0.0);
+
+ vec2 gv = fract(uv) - 0.5;
+ vec2 id = floor(uv);
+
+ for (int y = -1; y <= 1; y++) {
+ for (int x = -1; x <= 1; x++) {
+ vec2 offset = vec2(float(x), float(y));
+ vec2 si = id + vec2(float(x), float(y));
+ float seed = Hash21(si);
+ float size = fract(seed * 345.32);
+ float glossLocal = tri(uStarSpeed / (PERIOD * seed + 1.0));
+ float flareSize = smoothstep(0.9, 1.0, size) * glossLocal;
+
+ float red = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 1.0)) + STAR_COLOR_CUTOFF;
+ float blu = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 3.0)) + STAR_COLOR_CUTOFF;
+ float grn = min(red, blu) * seed;
+ vec3 base = vec3(red, grn, blu);
+
+ float hue = atan(base.g - base.r, base.b - base.r) / (2.0 * 3.14159) + 0.5;
+ hue = fract(hue + uHueShift / 360.0);
+ float sat = length(base - vec3(dot(base, vec3(0.299, 0.587, 0.114)))) * uSaturation;
+ float val = max(max(base.r, base.g), base.b);
+ base = hsv2rgb(vec3(hue, sat, val));
+
+ vec2 pad = vec2(tris(seed * 34.0 + uTime * uSpeed / 10.0), tris(seed * 38.0 + uTime * uSpeed / 30.0)) - 0.5;
+
+ float star = Star(gv - offset - pad, flareSize);
+ vec3 color = base;
+
+ float twinkle = trisn(uTime * uSpeed + seed * 6.2831) * 0.5 + 1.0;
+ twinkle = mix(1.0, twinkle, uTwinkleIntensity);
+ star *= twinkle;
+
+ col += star * size * color;
+ }
+ }
+
+ return col;
+}
+
+void main() {
+ vec2 focalPx = uFocal * uResolution.xy;
+ vec2 uv = (vUv * uResolution.xy - focalPx) / uResolution.y;
+
+ vec2 mouseNorm = uMouse - vec2(0.5);
+
+ if (uAutoCenterRepulsion > 0.0) {
+ vec2 centerUV = vec2(0.0, 0.0);
+ float centerDist = length(uv - centerUV);
+ vec2 repulsion = normalize(uv - centerUV) * (uAutoCenterRepulsion / (centerDist + 0.1));
+ uv += repulsion * 0.05;
+ } else if (uMouseRepulsion) {
+ vec2 mousePosUV = (uMouse * uResolution.xy - focalPx) / uResolution.y;
+ float mouseDist = length(uv - mousePosUV);
+ vec2 repulsion = normalize(uv - mousePosUV) * (uRepulsionStrength / (mouseDist + 0.1));
+ uv += repulsion * 0.05 * uMouseActiveFactor;
+ } else {
+ vec2 mouseOffset = mouseNorm * 0.1 * uMouseActiveFactor;
+ uv += mouseOffset;
+ }
+
+ float autoRotAngle = uTime * uRotationSpeed;
+ mat2 autoRot = mat2(cos(autoRotAngle), -sin(autoRotAngle), sin(autoRotAngle), cos(autoRotAngle));
+ uv = autoRot * uv;
+
+ uv = mat2(uRotation.x, -uRotation.y, uRotation.y, uRotation.x) * uv;
+
+ vec3 col = vec3(0.0);
+
+ for (float i = 0.0; i < 1.0; i += 1.0 / NUM_LAYER) {
+ float depth = fract(i + uStarSpeed * uSpeed);
+ float scale = mix(20.0 * uDensity, 0.5 * uDensity, depth);
+ float fade = depth * smoothstep(1.0, 0.9, depth);
+ col += StarLayer(uv * scale + i * 453.32) * fade;
+ }
+
+ if (uTransparent) {
+ float alpha = length(col);
+ alpha = smoothstep(0.0, 0.3, alpha);
+ alpha = min(alpha, 1.0);
+ gl_FragColor = vec4(col, alpha);
+ } else {
+ gl_FragColor = vec4(col, 1.0);
+ }
+}
+`;
+
+export default function Galaxy({
+ focal = [0.5, 0.5],
+ rotation = [1.0, 0.0],
+ starSpeed = 0.5,
+ density = 1,
+ hueShift = 140,
+ disableAnimation = false,
+ speed = 1.0,
+ mouseInteraction = true,
+ glowIntensity = 0.3,
+ saturation = 0.0,
+ mouseRepulsion = true,
+ repulsionStrength = 2,
+ twinkleIntensity = 0.3,
+ rotationSpeed = 0.1,
+ autoCenterRepulsion = 0,
+ transparent = true,
+ ...rest
+}) {
+ const ctnDom = useRef(null);
+ const targetMousePos = useRef({ x: 0.5, y: 0.5 });
+ const smoothMousePos = useRef({ x: 0.5, y: 0.5 });
+ const targetMouseActive = useRef(0.0);
+ const smoothMouseActive = useRef(0.0);
+
+ useEffect(() => {
+ if (!ctnDom.current) return;
+ const ctn = ctnDom.current;
+
+ let renderer;
+ try {
+ renderer = new Renderer({
+ alpha: transparent,
+ premultipliedAlpha: false,
+ });
+ } catch (error) {
+ console.warn(
+ "Galaxy: WebGL is not available. The galaxy background will not be rendered.",
+ error,
+ );
+ return;
+ }
+
+ const gl = renderer.gl;
+ if (!gl) {
+ console.warn(
+ "Galaxy: WebGL context is null. The galaxy background will not be rendered.",
+ );
+ return;
+ }
+
+ if (transparent) {
+ gl.enable(gl.BLEND);
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+ gl.clearColor(0, 0, 0, 0);
+ } else {
+ gl.clearColor(0, 0, 0, 1);
+ }
+
+ /** @type {Program | undefined} */
+ let program;
+
+ function resize() {
+ const scale = 1;
+ renderer.setSize(ctn.offsetWidth * scale, ctn.offsetHeight * scale);
+ if (program) {
+ program.uniforms.uResolution.value = new Color(
+ gl.canvas.width,
+ gl.canvas.height,
+ gl.canvas.width / gl.canvas.height,
+ );
+ }
+ }
+ window.addEventListener("resize", resize, false);
+ resize();
+
+ const geometry = new Triangle(gl);
+ program = new Program(gl, {
+ vertex: vertexShader,
+ fragment: fragmentShader,
+ uniforms: {
+ uTime: { value: 0 },
+ uResolution: {
+ value: new Color(
+ gl.canvas.width,
+ gl.canvas.height,
+ gl.canvas.width / gl.canvas.height,
+ ),
+ },
+ uFocal: { value: new Float32Array(focal) },
+ uRotation: { value: new Float32Array(rotation) },
+ uStarSpeed: { value: starSpeed },
+ uDensity: { value: density },
+ uHueShift: { value: hueShift },
+ uSpeed: { value: speed },
+ uMouse: {
+ value: new Float32Array([
+ smoothMousePos.current.x,
+ smoothMousePos.current.y,
+ ]),
+ },
+ uGlowIntensity: { value: glowIntensity },
+ uSaturation: { value: saturation },
+ uMouseRepulsion: { value: mouseRepulsion },
+ uTwinkleIntensity: { value: twinkleIntensity },
+ uRotationSpeed: { value: rotationSpeed },
+ uRepulsionStrength: { value: repulsionStrength },
+ uMouseActiveFactor: { value: 0.0 },
+ uAutoCenterRepulsion: { value: autoCenterRepulsion },
+ uTransparent: { value: transparent },
+ },
+ });
+
+ const mesh = new Mesh(gl, { geometry, program });
+ let animateId;
+
+ function update(t) {
+ animateId = requestAnimationFrame(update);
+ if (!disableAnimation) {
+ program.uniforms.uTime.value = t * 0.001;
+ program.uniforms.uStarSpeed.value = (t * 0.001 * starSpeed) / 10.0;
+ }
+
+ const lerpFactor = 0.05;
+ smoothMousePos.current.x +=
+ (targetMousePos.current.x - smoothMousePos.current.x) * lerpFactor;
+ smoothMousePos.current.y +=
+ (targetMousePos.current.y - smoothMousePos.current.y) * lerpFactor;
+
+ smoothMouseActive.current +=
+ (targetMouseActive.current - smoothMouseActive.current) * lerpFactor;
+
+ program.uniforms.uMouse.value[0] = smoothMousePos.current.x;
+ program.uniforms.uMouse.value[1] = smoothMousePos.current.y;
+ program.uniforms.uMouseActiveFactor.value = smoothMouseActive.current;
+
+ renderer.render({ scene: mesh });
+ }
+ animateId = requestAnimationFrame(update);
+ ctn.appendChild(gl.canvas);
+
+ function handleMouseMove(e) {
+ const rect = ctn.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = 1.0 - (e.clientY - rect.top) / rect.height;
+ targetMousePos.current = { x, y };
+ targetMouseActive.current = 1.0;
+ }
+
+ function handleMouseLeave() {
+ targetMouseActive.current = 0.0;
+ }
+
+ if (mouseInteraction) {
+ ctn.addEventListener("mousemove", handleMouseMove);
+ ctn.addEventListener("mouseleave", handleMouseLeave);
+ }
+
+ return () => {
+ cancelAnimationFrame(animateId);
+ window.removeEventListener("resize", resize);
+ if (mouseInteraction) {
+ ctn.removeEventListener("mousemove", handleMouseMove);
+ ctn.removeEventListener("mouseleave", handleMouseLeave);
+ }
+ ctn.removeChild(gl.canvas);
+ gl.getExtension("WEBGL_lose_context")?.loseContext();
+ };
+ }, [
+ focal,
+ rotation,
+ starSpeed,
+ density,
+ hueShift,
+ disableAnimation,
+ speed,
+ mouseInteraction,
+ glowIntensity,
+ saturation,
+ mouseRepulsion,
+ twinkleIntensity,
+ rotationSpeed,
+ repulsionStrength,
+ autoCenterRepulsion,
+ transparent,
+ ]);
+
+ return ;
+}
diff --git a/frontend-web/src/components/ui/hover-card.tsx b/frontend-web/src/components/ui/hover-card.tsx
new file mode 100644
index 00000000..f574b4ad
--- /dev/null
+++ b/frontend-web/src/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+function HoverCard({
+ ...props
+}: React.ComponentPropstextarea]:h-auto",
+
+ // Variants based on alignment.
+ "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+ "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+ "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+ "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+ // Focus state.
+ "has-[[data-slot=input-group-control]:focus-visible]:border-input has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+ // Error state.
+ "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+const inputGroupAddonVariants = cva(
+ "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+ {
+ variants: {
+ align: {
+ "inline-start":
+ "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+ "inline-end":
+ "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+ "block-start":
+ "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+ "block-end":
+ "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+ },
+ },
+ defaultVariants: {
+ align: "inline-start",
+ },
+ },
+);
+
+function InputGroupAddon({
+ className,
+ align = "inline-start",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
{
+ if ((e.target as HTMLElement).closest("button")) {
+ return;
+ }
+ e.currentTarget.parentElement?.querySelector("input")?.focus();
+ }}
+ {...props}
+ />
+ );
+}
+
+const inputGroupButtonVariants = cva(
+ "text-sm shadow-none flex gap-2 items-center",
+ {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+ sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+ "icon-xs":
+ "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+ },
+ },
+ defaultVariants: {
+ size: "xs",
+ },
+ },
+);
+
+function InputGroupButton({
+ className,
+ type = "button",
+ variant = "ghost",
+ size = "xs",
+ ...props
+}: Omit, "size"> &
+ VariantProps) {
+ return (
+
+ );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ );
+}
+
+function InputGroupInput({
+ className,
+ ...props
+}: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+function InputGroupTextarea({
+ className,
+ ...props
+}: React.ComponentProps<"textarea">) {
+ return (
+
+ );
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+};
diff --git a/frontend-web/src/components/ui/input.tsx b/frontend-web/src/components/ui/input.tsx
new file mode 100644
index 00000000..f16c2c0e
--- /dev/null
+++ b/frontend-web/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/frontend-web/src/components/ui/item.tsx b/frontend-web/src/components/ui/item.tsx
new file mode 100644
index 00000000..3d21751b
--- /dev/null
+++ b/frontend-web/src/components/ui/item.tsx
@@ -0,0 +1,193 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "div";
+ return (
+ ) {
+ return (
+
+ );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+ return (
+ (null);
+ const particlesRef = useRef([]);
+ const timeoutsRef = useRef([]);
+ const isHoveredRef = useRef(false);
+ const memoizedParticles = useRef([]);
+ const particlesInitialized = useRef(false);
+ const magnetismAnimationRef = useRef(null);
+
+ const initializeParticles = useCallback(() => {
+ if (particlesInitialized.current || !cardRef.current) return;
+
+ const { width, height } = cardRef.current.getBoundingClientRect();
+ memoizedParticles.current = Array.from({ length: particleCount }, () =>
+ createParticleElement(
+ Math.random() * width,
+ Math.random() * height,
+ glowColor,
+ ),
+ );
+ particlesInitialized.current = true;
+ }, [particleCount, glowColor]);
+
+ const clearAllParticles = useCallback(() => {
+ timeoutsRef.current.forEach(clearTimeout);
+ timeoutsRef.current = [];
+ magnetismAnimationRef.current?.kill();
+
+ particlesRef.current.forEach((particle) => {
+ gsap.to(particle, {
+ scale: 0,
+ opacity: 0,
+ duration: 0.3,
+ ease: "back.in(1.7)",
+ onComplete: () => {
+ particle.parentNode?.removeChild(particle);
+ },
+ });
+ });
+ particlesRef.current = [];
+ }, []);
+
+ const animateParticles = useCallback(() => {
+ if (!cardRef.current || !isHoveredRef.current) return;
+
+ if (!particlesInitialized.current) {
+ initializeParticles();
+ }
+
+ memoizedParticles.current.forEach((particle, index) => {
+ const timeoutId = setTimeout(() => {
+ if (!isHoveredRef.current || !cardRef.current) return;
+
+ const clone = particle.cloneNode(true) as HTMLDivElement;
+ cardRef.current.appendChild(clone);
+ particlesRef.current.push(clone);
+
+ gsap.fromTo(
+ clone,
+ { scale: 0, opacity: 0 },
+ { scale: 1, opacity: 1, duration: 0.3, ease: "back.out(1.7)" },
+ );
+
+ gsap.to(clone, {
+ x: (Math.random() - 0.5) * 100,
+ y: (Math.random() - 0.5) * 100,
+ rotation: Math.random() * 360,
+ duration: 2 + Math.random() * 2,
+ ease: "none",
+ repeat: -1,
+ yoyo: true,
+ });
+
+ gsap.to(clone, {
+ opacity: 0.3,
+ duration: 1.5,
+ ease: "power2.inOut",
+ repeat: -1,
+ yoyo: true,
+ });
+ }, index * 100);
+
+ timeoutsRef.current.push(timeoutId as unknown as number);
+ });
+ }, [initializeParticles]);
+
+ useEffect(() => {
+ if (disableAnimations || !cardRef.current) return;
+
+ const element = cardRef.current;
+
+ const handleMouseEnter = () => {
+ isHoveredRef.current = true;
+ animateParticles();
+
+ if (enableTilt) {
+ gsap.to(element, {
+ rotateX: 5,
+ rotateY: 5,
+ duration: 0.3,
+ ease: "power2.out",
+ transformPerspective: 1000,
+ });
+ }
+ };
+
+ const handleMouseLeave = () => {
+ isHoveredRef.current = false;
+ clearAllParticles();
+
+ if (enableTilt) {
+ gsap.to(element, {
+ rotateX: 0,
+ rotateY: 0,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+
+ if (enableMagnetism) {
+ gsap.to(element, {
+ x: 0,
+ y: 0,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!enableTilt && !enableMagnetism) return;
+
+ const rect = element.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+ const centerX = rect.width / 2;
+ const centerY = rect.height / 2;
+
+ if (enableTilt) {
+ const rotateX = ((y - centerY) / centerY) * -10;
+ const rotateY = ((x - centerX) / centerX) * 10;
+
+ gsap.to(element, {
+ rotateX,
+ rotateY,
+ duration: 0.1,
+ ease: "power2.out",
+ transformPerspective: 1000,
+ });
+ }
+
+ if (enableMagnetism) {
+ const magnetX = (x - centerX) * 0.05;
+ const magnetY = (y - centerY) * 0.05;
+
+ magnetismAnimationRef.current = gsap.to(element, {
+ x: magnetX,
+ y: magnetY,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+ };
+
+ const handleClick = (e: MouseEvent) => {
+ if (!clickEffect) return;
+
+ const rect = element.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ const maxDistance = Math.max(
+ Math.hypot(x, y),
+ Math.hypot(x - rect.width, y),
+ Math.hypot(x, y - rect.height),
+ Math.hypot(x - rect.width, y - rect.height),
+ );
+
+ const ripple = document.createElement("div");
+ ripple.style.cssText = `
+ position: absolute;
+ width: ${maxDistance * 2}px;
+ height: ${maxDistance * 2}px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%);
+ left: ${x - maxDistance}px;
+ top: ${y - maxDistance}px;
+ pointer-events: none;
+ z-index: 1000;
+ `;
+
+ element.appendChild(ripple);
+
+ gsap.fromTo(
+ ripple,
+ {
+ scale: 0,
+ opacity: 1,
+ },
+ {
+ scale: 1,
+ opacity: 0,
+ duration: 0.8,
+ ease: "power2.out",
+ onComplete: () => ripple.remove(),
+ },
+ );
+ };
+
+ element.addEventListener("mouseenter", handleMouseEnter);
+ element.addEventListener("mouseleave", handleMouseLeave);
+ element.addEventListener("mousemove", handleMouseMove);
+ element.addEventListener("click", handleClick);
+
+ return () => {
+ isHoveredRef.current = false;
+ element.removeEventListener("mouseenter", handleMouseEnter);
+ element.removeEventListener("mouseleave", handleMouseLeave);
+ element.removeEventListener("mousemove", handleMouseMove);
+ element.removeEventListener("click", handleClick);
+ clearAllParticles();
+ };
+ }, [
+ animateParticles,
+ clearAllParticles,
+ disableAnimations,
+ enableTilt,
+ enableMagnetism,
+ clickEffect,
+ glowColor,
+ ]);
+
+ return (
+ ;
+ disableAnimations?: boolean;
+ enabled?: boolean;
+ spotlightRadius?: number;
+ glowColor?: string;
+}> = ({
+ gridRef,
+ disableAnimations = false,
+ enabled = true,
+ spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,
+ glowColor = DEFAULT_GLOW_COLOR,
+}) => {
+ const spotlightRef = useRef(null);
+ const isInsideSection = useRef(false);
+
+ useEffect(() => {
+ if (disableAnimations || !gridRef?.current || !enabled) return;
+
+ const spotlight = document.createElement("div");
+ spotlight.className = "global-spotlight";
+ spotlight.style.cssText = `
+ position: fixed;
+ width: 800px;
+ height: 800px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle,
+ rgba(${glowColor}, 0.15) 0%,
+ rgba(${glowColor}, 0.08) 15%,
+ rgba(${glowColor}, 0.04) 25%,
+ rgba(${glowColor}, 0.02) 40%,
+ rgba(${glowColor}, 0.01) 65%,
+ transparent 70%
+ );
+ z-index: 200;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ mix-blend-mode: screen;
+ `;
+ document.body.appendChild(spotlight);
+ spotlightRef.current = spotlight;
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!spotlightRef.current || !gridRef.current) return;
+
+ const section = gridRef.current.closest(".bento-section");
+ const rect = section?.getBoundingClientRect();
+ const mouseInside =
+ rect &&
+ e.clientX >= rect.left &&
+ e.clientX <= rect.right &&
+ e.clientY >= rect.top &&
+ e.clientY <= rect.bottom;
+
+ isInsideSection.current = mouseInside ?? false;
+ const cards = gridRef.current.querySelectorAll(".magic-bento-card");
+
+ if (!mouseInside) {
+ gsap.to(spotlightRef.current, {
+ opacity: 0,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ cards.forEach((card) => {
+ (card as HTMLElement).style.setProperty("--glow-intensity", "0");
+ });
+ return;
+ }
+
+ const { proximity, fadeDistance } =
+ calculateSpotlightValues(spotlightRadius);
+ let minDistance = Infinity;
+
+ cards.forEach((card) => {
+ const cardElement = card as HTMLElement;
+ const cardRect = cardElement.getBoundingClientRect();
+ const centerX = cardRect.left + cardRect.width / 2;
+ const centerY = cardRect.top + cardRect.height / 2;
+ const distance =
+ Math.hypot(e.clientX - centerX, e.clientY - centerY) -
+ Math.max(cardRect.width, cardRect.height) / 2;
+ const effectiveDistance = Math.max(0, distance);
+
+ minDistance = Math.min(minDistance, effectiveDistance);
+
+ let glowIntensity = 0;
+ if (effectiveDistance <= proximity) {
+ glowIntensity = 1;
+ } else if (effectiveDistance <= fadeDistance) {
+ glowIntensity =
+ (fadeDistance - effectiveDistance) / (fadeDistance - proximity);
+ }
+
+ updateCardGlowProperties(
+ cardElement,
+ e.clientX,
+ e.clientY,
+ glowIntensity,
+ spotlightRadius,
+ );
+ });
+
+ gsap.to(spotlightRef.current, {
+ left: e.clientX,
+ top: e.clientY,
+ duration: 0.1,
+ ease: "power2.out",
+ });
+
+ const targetOpacity =
+ minDistance <= proximity
+ ? 0.8
+ : minDistance <= fadeDistance
+ ? ((fadeDistance - minDistance) / (fadeDistance - proximity)) * 0.8
+ : 0;
+
+ gsap.to(spotlightRef.current, {
+ opacity: targetOpacity,
+ duration: targetOpacity > 0 ? 0.2 : 0.5,
+ ease: "power2.out",
+ });
+ };
+
+ const handleMouseLeave = () => {
+ isInsideSection.current = false;
+ gridRef.current?.querySelectorAll(".magic-bento-card").forEach((card) => {
+ (card as HTMLElement).style.setProperty("--glow-intensity", "0");
+ });
+ if (spotlightRef.current) {
+ gsap.to(spotlightRef.current, {
+ opacity: 0,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+ };
+
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseleave", handleMouseLeave);
+
+ return () => {
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseleave", handleMouseLeave);
+ spotlightRef.current?.parentNode?.removeChild(spotlightRef.current);
+ };
+ }, [gridRef, disableAnimations, enabled, spotlightRadius, glowColor]);
+
+ return null;
+};
+
+const BentoCardGrid: React.FC<{
+ children: React.ReactNode;
+ gridRef?: React.RefObject;
+}> = ({ children, gridRef }) => (
+ = ({
+ textAutoHide = true,
+ enableStars = true,
+ enableSpotlight = true,
+ enableBorderGlow = true,
+ disableAnimations = false,
+ spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,
+ particleCount = DEFAULT_PARTICLE_COUNT,
+ enableTilt = false,
+ glowColor = DEFAULT_GLOW_COLOR,
+ clickEffect = true,
+ enableMagnetism = true,
+ data: cardData,
+}) => {
+ const gridRef = useRef(null);
+ const isMobile = useMobileDetection();
+ const shouldDisableAnimations = disableAnimations || isMobile;
+
+ return (
+ <>
+ {enableSpotlight && (
+
+ {cardData.map((card, index) => {
+ const baseClassName = `magic-bento-card ${textAutoHide ? "magic-bento-card--text-autohide" : ""} ${enableBorderGlow ? "magic-bento-card--border-glow" : ""}`;
+ const cardProps = {
+ className: baseClassName,
+ style: {
+ backgroundColor: card.color,
+ "--glow-color": glowColor,
+ } as React.CSSProperties,
+ };
+
+ if (enableStars) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default MagicBento;
diff --git a/frontend-web/src/components/ui/number-ticker.tsx b/frontend-web/src/components/ui/number-ticker.tsx
new file mode 100644
index 00000000..af0d9493
--- /dev/null
+++ b/frontend-web/src/components/ui/number-ticker.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { type ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import { useInView, useMotionValue, useSpring } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface NumberTickerProps extends ComponentPropsWithoutRef<"span"> {
+ value: number;
+ startValue?: number;
+ direction?: "up" | "down";
+ delay?: number;
+ decimalPlaces?: number;
+}
+
+export function NumberTicker({
+ value,
+ startValue = 0,
+ direction = "up",
+ delay = 0,
+ className,
+ decimalPlaces = 0,
+ ...props
+}: NumberTickerProps) {
+ const ref = useRef(null);
+ const motionValue = useMotionValue(direction === "down" ? value : startValue);
+ const springValue = useSpring(motionValue, {
+ damping: 60,
+ stiffness: 100,
+ });
+ const isInView = useInView(ref, { once: true, margin: "0px" });
+
+ useEffect(() => {
+ if (isInView) {
+ const timer = setTimeout(() => {
+ motionValue.set(direction === "down" ? startValue : value);
+ }, delay * 1000);
+ return () => clearTimeout(timer);
+ }
+ }, [motionValue, isInView, delay, value, direction, startValue]);
+
+ useEffect(
+ () =>
+ springValue.on("change", (latest) => {
+ if (ref.current) {
+ ref.current.textContent = Intl.NumberFormat("en-US", {
+ minimumFractionDigits: decimalPlaces,
+ maximumFractionDigits: decimalPlaces,
+ }).format(Number(latest.toFixed(decimalPlaces)));
+ }
+ }),
+ [springValue, decimalPlaces],
+ );
+
+ return (
+
+ {startValue}
+
+ );
+}
diff --git a/frontend-web/src/components/ui/progress.tsx b/frontend-web/src/components/ui/progress.tsx
new file mode 100644
index 00000000..e4356372
--- /dev/null
+++ b/frontend-web/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+function Progress({
+ className,
+ value,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export { Progress };
diff --git a/frontend-web/src/components/ui/resizable.tsx b/frontend-web/src/components/ui/resizable.tsx
new file mode 100644
index 00000000..2a04e8ef
--- /dev/null
+++ b/frontend-web/src/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import * as React from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+function ResizablePanelGroup({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return & {
+ withHandle?: boolean;
+}) {
+ return (
+ div]:rotate-90",
+ className,
+ )}
+ {...props}
+ >
+ {withHandle && (
+
+ );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/frontend-web/src/components/ui/scroll-area.tsx b/frontend-web/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..5524f1ca
--- /dev/null
+++ b/frontend-web/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/frontend-web/src/components/ui/select.tsx b/frontend-web/src/components/ui/select.tsx
new file mode 100644
index 00000000..6e6f66be
--- /dev/null
+++ b/frontend-web/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return ) {
+ return & {
+ size?: "sm" | "default";
+}) {
+ return (
+
+ {children}
+
+
+
+ );
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+};
diff --git a/frontend-web/src/components/ui/separator.tsx b/frontend-web/src/components/ui/separator.tsx
new file mode 100644
index 00000000..72c18e33
--- /dev/null
+++ b/frontend-web/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ side?: "top" | "right" | "bottom" | "left";
+}) {
+ return (
+
+
+ {children}
+
+
+
+
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ {
+ /**
+ * Width of the border in pixels
+ * @default 1
+ */
+ borderWidth?: number;
+ /**
+ * Duration of the animation in seconds
+ * @default 14
+ */
+ duration?: number;
+ /**
+ * Color of the border, can be a single color or an array of colors
+ * @default "#000000"
+ */
+ shineColor?: string | string[];
+}
+
+/**
+ * Shine Border
+ *
+ * An animated background border effect component with configurable properties.
+ */
+export function ShineBorder({
+ borderWidth = 1,
+ duration = 14,
+ shineColor = "#000000",
+ className,
+ style,
+ ...props
+}: ShineBorderProps) {
+ return (
+
+ );
+}
diff --git a/frontend-web/src/components/ui/sidebar.tsx b/frontend-web/src/components/ui/sidebar.tsx
new file mode 100644
index 00000000..bda4226d
--- /dev/null
+++ b/frontend-web/src/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+ state: "expanded" | "collapsed";
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext(null);
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.");
+ }
+
+ return context;
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}) {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+ },
+ [setOpenProp, open],
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (
+ event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+ (event.metaKey || event.ctrlKey)
+ ) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed";
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+ );
+
+ return (
+
+
+
+
+ );
+}
+
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === "none") {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+
+
+ );
+ }
+
+ return (
+ ) {
+ const { open, toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+
+ );
+}
+
+function SidebarInput({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 md:after:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupContent({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+ ;
+} & VariantProps) {
+ const Comp = asChild ? Slot : "button";
+ const { isMobile, state } = useSidebar();
+
+ const button = (
+
+ {button}
+
+ );
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+}) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 md:after:hidden",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ showOnHover &&
+ "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuBadge({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showIcon?: boolean;
+}) {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
+
+ return (
+ svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+ size === "sm" && "text-xs",
+ size === "md" && "text-sm",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+};
diff --git a/frontend-web/src/components/ui/skeleton.tsx b/frontend-web/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..01689981
--- /dev/null
+++ b/frontend-web/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Skeleton };
diff --git a/frontend-web/src/components/ui/sonner.tsx b/frontend-web/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..28c5ec35
--- /dev/null
+++ b/frontend-web/src/components/ui/sonner.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import {
+ CircleCheckIcon,
+ InfoIcon,
+ Loader2Icon,
+ OctagonXIcon,
+ TriangleAlertIcon,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme();
+
+ return (
+ = ({
+ style,
+ children,
+ className = "",
+ spotlightColor = "rgba(255, 255, 255, 0.25)",
+}) => {
+ const divRef = useRef(null);
+
+ const handleMouseMove: React.MouseEventHandler = (e) => {
+ if (!divRef.current) return;
+
+ const rect = divRef.current.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ divRef.current.style.setProperty("--mouse-x", `${x}px`);
+ divRef.current.style.setProperty("--mouse-y", `${y}px`);
+ divRef.current.style.setProperty("--spotlight-color", spotlightColor);
+ };
+
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+export { Switch };
diff --git a/frontend-web/src/components/ui/tabs.tsx b/frontend-web/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..63eae74f
--- /dev/null
+++ b/frontend-web/src/components/ui/tabs.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.ComponentProps) {
+ return (
+ &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ (null);
+
+const useSequence = () => useContext(SequenceContext);
+
+const ItemIndexContext = createContext(null);
+const useItemIndex = () => useContext(ItemIndexContext);
+
+interface AnimatedSpanProps extends MotionProps {
+ children: React.ReactNode;
+ delay?: number;
+ className?: string;
+ startOnView?: boolean;
+}
+
+export const AnimatedSpan = ({
+ children,
+ delay = 0,
+ className,
+ startOnView = false,
+ ...props
+}: AnimatedSpanProps) => {
+ const elementRef = useRef(null);
+ const isInView = useInView(elementRef as React.RefObject, {
+ amount: 0.3,
+ once: true,
+ });
+
+ const sequence = useSequence();
+ const itemIndex = useItemIndex();
+ const [hasStarted, setHasStarted] = useState(false);
+ useEffect(() => {
+ if (!sequence || itemIndex === null) return;
+ if (!sequence.sequenceStarted) return;
+ if (hasStarted) return;
+ if (sequence.activeIndex === itemIndex) {
+ setHasStarted(true);
+ }
+ }, [sequence?.activeIndex, sequence?.sequenceStarted, hasStarted, itemIndex]);
+
+ const shouldAnimate = sequence ? hasStarted : startOnView ? isInView : true;
+
+ return (
+ {
+ if (!sequence) return;
+ if (itemIndex === null) return;
+ sequence.completeItem(itemIndex);
+ }}
+ {...props}
+ >
+ {children}
+
+ );
+};
+
+interface TypingAnimationProps extends MotionProps {
+ children: string;
+ className?: string;
+ duration?: number;
+ delay?: number;
+ as?: React.ElementType;
+ startOnView?: boolean;
+}
+
+export const TypingAnimation = ({
+ children,
+ className,
+ duration = 60,
+ delay = 0,
+ as: Component = "span",
+ startOnView = true,
+ ...props
+}: TypingAnimationProps) => {
+ if (typeof children !== "string") {
+ throw new Error("TypingAnimation: children must be a string. Received:");
+ }
+
+ const MotionComponent = useMemo(
+ () =>
+ motion.create(Component, {
+ forwardMotionProps: true,
+ }),
+ [Component],
+ );
+
+ const [displayedText, setDisplayedText] = useState("");
+ const [started, setStarted] = useState(false);
+ const elementRef = useRef(null);
+ const isInView = useInView(elementRef as React.RefObject, {
+ amount: 0.3,
+ once: true,
+ });
+
+ const sequence = useSequence();
+ const itemIndex = useItemIndex();
+
+ useEffect(() => {
+ if (sequence && itemIndex !== null) {
+ if (!sequence.sequenceStarted) return;
+ if (started) return;
+ if (sequence.activeIndex === itemIndex) {
+ setStarted(true);
+ }
+ return;
+ }
+
+ if (!startOnView) {
+ const startTimeout = setTimeout(() => setStarted(true), delay);
+ return () => clearTimeout(startTimeout);
+ }
+
+ if (!isInView) return;
+
+ const startTimeout = setTimeout(() => setStarted(true), delay);
+ return () => clearTimeout(startTimeout);
+ }, [
+ delay,
+ startOnView,
+ isInView,
+ started,
+ sequence?.activeIndex,
+ sequence?.sequenceStarted,
+ itemIndex,
+ ]);
+
+ useEffect(() => {
+ if (!started) return;
+
+ let i = 0;
+ const typingEffect = setInterval(() => {
+ if (i < children.length) {
+ setDisplayedText(children.substring(0, i + 1));
+ i++;
+ } else {
+ clearInterval(typingEffect);
+ if (sequence && itemIndex !== null) {
+ sequence.completeItem(itemIndex);
+ }
+ }
+ }, duration);
+
+ return () => {
+ clearInterval(typingEffect);
+ };
+ }, [children, duration, started]);
+
+ return (
+
+ {displayedText}
+
+ );
+};
+
+interface TerminalProps {
+ children: React.ReactNode;
+ className?: string;
+ sequence?: boolean;
+ startOnView?: boolean;
+}
+
+export const Terminal = ({
+ children,
+ className,
+ sequence = true,
+ startOnView = true,
+}: TerminalProps) => {
+ const containerRef = useRef(null);
+ const isInView = useInView(containerRef as React.RefObject, {
+ amount: 0.3,
+ once: true,
+ });
+
+ const [activeIndex, setActiveIndex] = useState(0);
+ const sequenceHasStarted = sequence ? !startOnView || isInView : false;
+
+ const contextValue = useMemo(() => {
+ if (!sequence) return null;
+ return {
+ completeItem: (index: number) => {
+ setActiveIndex((current) =>
+ index === current ? current + 1 : current,
+ );
+ },
+ activeIndex,
+ sequenceStarted: sequenceHasStarted,
+ };
+ }, [sequence, activeIndex, sequenceHasStarted]);
+
+ const wrappedChildren = useMemo(() => {
+ if (!sequence) return children;
+ const array = Children.toArray(children);
+ return array.map((child, index) => (
+
+ {child as React.ReactNode}
+
+ ));
+ }, [children, sequence]);
+
+ const content = (
+
+ {content}
+
+ );
+};
diff --git a/frontend-web/src/components/ui/textarea.tsx b/frontend-web/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..dcc5244a
--- /dev/null
+++ b/frontend-web/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ );
+}
+
+export { Textarea };
diff --git a/frontend-web/src/components/ui/toggle-group.tsx b/frontend-web/src/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..2739e29b
--- /dev/null
+++ b/frontend-web/src/components/ui/toggle-group.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+ VariantProps & {
+ spacing?: number;
+ }
+>({
+ size: "default",
+ variant: "default",
+ spacing: 0,
+});
+
+function ToggleGroup({
+ className,
+ variant,
+ size,
+ spacing = 0,
+ children,
+ ...props
+}: React.ComponentProps &
+ VariantProps & {
+ spacing?: number;
+ }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function ToggleGroupItem({
+ className,
+ children,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ const context = React.useContext(ToggleGroupContext);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/frontend-web/src/components/ui/toggle.tsx b/frontend-web/src/components/ui/toggle.tsx
new file mode 100644
index 00000000..47517bde
--- /dev/null
+++ b/frontend-web/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-2 min-w-9",
+ sm: "h-8 px-1.5 min-w-8",
+ lg: "h-10 px-2.5 min-w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function Toggle({
+ className,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend-web/src/components/ui/word-rotate.tsx b/frontend-web/src/components/ui/word-rotate.tsx
new file mode 100644
index 00000000..8daa9da3
--- /dev/null
+++ b/frontend-web/src/components/ui/word-rotate.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, type MotionProps } from "motion/react";
+
+import { cn } from "@/lib/utils";
+import { AuroraText } from "./aurora-text";
+
+interface WordRotateProps {
+ words: string[];
+ duration?: number;
+ motionProps?: MotionProps;
+ className?: string;
+}
+
+export function WordRotate({
+ words,
+ duration = 2200,
+ motionProps = {
+ initial: { opacity: 0, y: -50, filter: "blur(16px)" },
+ animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+ exit: { opacity: 0, y: 50, filter: "blur(16px)" },
+ transition: { duration: 0.3, ease: "easeOut" },
+ },
+ className,
+}: WordRotateProps) {
+ const [index, setIndex] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setIndex((prevIndex) => (prevIndex + 1) % words.length);
+ }, duration);
+
+ // Clean up interval on unmount
+ return () => clearInterval(interval);
+ }, [words, duration]);
+
+ return (
+ (
+ agent.skills ?? [],
+ );
+
+ const currentUserId = useMemo(() => getStoredAuth()?.user_id ?? null, []);
+ const isBuiltin = agent.builtin;
+ const isOwned =
+ !isBuiltin && agent.user_id !== null && agent.user_id === currentUserId;
+ const isFromOthers = !isBuiltin && !isOwned;
+
+ useEffect(() => {
+ if (!editOpen) {
+ return;
+ }
+ setEditName(agent.name);
+ setEditDescription(agent.description ?? "");
+ setEditSoul(agent.soul ?? "");
+ setEditPublished(agent.published);
+ setSelectedSkills(agent.skills ?? []);
+ }, [
+ agent.description,
+ agent.name,
+ agent.published,
+ agent.skills,
+ agent.soul,
+ editOpen,
+ ]);
+
+ function handleChat() {
+ router.push(`/workspace/agents/${agent.id}/chats/new`);
+ }
+
+ async function handleDelete() {
+ try {
+ await deleteAgent.mutateAsync(agent.id);
+ toast.success(t.agents.deleteSuccess);
+ setDeleteOpen(false);
+ } catch (err) {
+ toast.error(err instanceof Error ? err.message : String(err));
+ }
+ }
+
+ async function handleSaveEdit() {
+ const trimmedName = editName.trim();
+ if (!trimmedName) {
+ toast.error(t.agents.nameStepInvalidError ?? "名称不能为空");
+ return;
+ }
+ try {
+ await updateAgent.mutateAsync({
+ id: agent.id,
+ request: {
+ name: trimmedName,
+ description: editDescription,
+ soul: editSoul,
+ published: editPublished,
+ skills: selectedSkills,
+ },
+ });
+ toast.success("智能体已更新");
+ setEditOpen(false);
+ } catch (err) {
+ toast.error(err instanceof Error ? err.message : String(err));
+ }
+ }
+
+ async function handleTogglePublished() {
+ try {
+ await updateAgent.mutateAsync({
+ id: agent.id,
+ request: { published: !agent.published },
+ });
+ toast.success(agent.published ? "已取消发布" : "已发布");
+ } catch (err) {
+ toast.error(err instanceof Error ? err.message : String(err));
+ }
+ }
+
+ function toggleSkill(skillName: string) {
+ setSelectedSkills((prev) => {
+ if (prev.includes(skillName)) {
+ return prev.filter((name) => name !== skillName);
+ }
+ return [...prev, skillName];
+ });
+ }
+
+ const enabledSkills = skills.filter((skill) => skill.enabled);
+
+ return (
+ <>
+
+
+
+ {agent.description}
+
+ )}
+
+
+ {(agent.tool_groups?.length ?? agent.skills?.length ?? 0) > 0 && (
+
+
+ )}
+
+
+
+ {isOwned && (
+
+
+
+
a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", + className, + )} + {...props} + /> + ); +} + +function ItemActions({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function ItemHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( + + ); +} + +function ItemFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( + + ); +} + +export { + Item, + ItemMedia, + ItemContent, + ItemActions, + ItemGroup, + ItemSeparator, + ItemTitle, + ItemDescription, + ItemHeader, + ItemFooter, +}; diff --git a/frontend-web/src/components/ui/magic-bento.css b/frontend-web/src/components/ui/magic-bento.css new file mode 100644 index 00000000..d18e7f3f --- /dev/null +++ b/frontend-web/src/components/ui/magic-bento.css @@ -0,0 +1,217 @@ +:root { + --hue: 27; + --sat: 69%; + --white: hsl(0, 0%, 100%); + --purple-primary: rgba(132, 0, 255, 1); + --purple-glow: rgba(132, 0, 255, 0.2); + --purple-border: rgba(132, 0, 255, 0.8); + --border-color: #392e4e; + --background-dark: #060010; + color-scheme: light dark; +} + +.card-grid { + display: grid; + gap: 0.5em; + padding: 0.75em; + max-width: 54em; + font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); +} + +.magic-bento-card { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + aspect-ratio: 4/3; + min-height: 200px; + width: 100%; + max-width: 100%; + padding: 1.25em; + border-radius: 20px; + border: 1px solid var(--border-color); + background: var(--background-dark); + font-weight: 300; + overflow: hidden; + transition: all 0.3s ease; + + --glow-x: 50%; + --glow-y: 50%; + --glow-intensity: 0; + --glow-radius: 200px; +} + +.magic-bento-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +.magic-bento-card__header, +.magic-bento-card__content { + display: flex; + position: relative; + color: var(--white); +} + +.magic-bento-card__header { + gap: 0.75em; + justify-content: space-between; +} + +.magic-bento-card__content { + flex-direction: column; +} + +.magic-bento-card__label { + font-size: 16px; +} + +.magic-bento-card__title, +.magic-bento-card__description { + --clamp-title: 1; + --clamp-desc: 2; +} + +.magic-bento-card__title { + font-weight: 400; + font-size: 16px; + margin: 0 0 0.25em; +} + +.magic-bento-card__description { + font-size: 12px; + line-height: 1.2; + opacity: 0.9; +} + +.magic-bento-card--text-autohide .magic-bento-card__title, +.magic-bento-card--text-autohide .magic-bento-card__description { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.magic-bento-card--text-autohide .magic-bento-card__title { + -webkit-line-clamp: var(--clamp-title); + line-clamp: var(--clamp-title); +} + +.magic-bento-card--text-autohide .magic-bento-card__description { + -webkit-line-clamp: var(--clamp-desc); + line-clamp: var(--clamp-desc); +} + +@media (max-width: 599px) { + .card-grid { + grid-template-columns: 1fr; + width: 90%; + margin: 0 auto; + padding: 0.5em; + } + + .magic-bento-card { + width: 100%; + min-height: 180px; + } +} + +@media (min-width: 600px) { + .card-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .card-grid { + grid-template-columns: repeat(4, 1fr); + } + + .magic-bento-card:nth-child(3) { + grid-column: span 2; + grid-row: span 2; + } + + .magic-bento-card:nth-child(4) { + grid-column: 1 / span 2; + grid-row: 2 / span 2; + } + + .magic-bento-card:nth-child(6) { + grid-column: 4; + grid-row: 3; + } +} + +/* Border glow effect */ +.magic-bento-card--border-glow::after { + content: ""; + position: absolute; + inset: 0; + padding: 6px; + background: radial-gradient( + var(--glow-radius) circle at var(--glow-x) var(--glow-y), + rgba(132, 0, 255, calc(var(--glow-intensity) * 0.8)) 0%, + rgba(132, 0, 255, calc(var(--glow-intensity) * 0.4)) 30%, + transparent 60% + ); + border-radius: inherit; + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask-composite: exclude; + pointer-events: none; + opacity: 1; + transition: opacity 0.3s ease; + z-index: 1; +} + +.magic-bento-card--border-glow:hover::after { + opacity: 1; +} + +.magic-bento-card--border-glow:hover { + box-shadow: + 0 4px 20px rgba(46, 24, 78, 0.4), + 0 0 30px var(--purple-glow); +} + +.particle-container { + position: relative; + overflow: hidden; +} + +.particle::before { + content: ""; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: rgba(132, 0, 255, 0.2); + border-radius: 50%; + z-index: -1; +} + +.particle-container:hover { + box-shadow: + 0 4px 20px rgba(46, 24, 78, 0.2), + 0 0 30px var(--purple-glow); +} + +/* Global spotlight styles */ +.global-spotlight { + mix-blend-mode: screen; + will-change: transform, opacity; + z-index: 200 !important; + pointer-events: none; +} + +.bento-section { + position: relative; + user-select: none; +} diff --git a/frontend-web/src/components/ui/magic-bento.tsx b/frontend-web/src/components/ui/magic-bento.tsx new file mode 100644 index 00000000..637d11b5 --- /dev/null +++ b/frontend-web/src/components/ui/magic-bento.tsx @@ -0,0 +1,713 @@ +import { gsap } from "gsap"; +import React, { useRef, useEffect, useCallback, useState } from "react"; +import "./magic-bento.css"; + +export interface BentoCardProps { + color?: string; + title?: React.ReactNode; + description?: React.ReactNode; + label?: React.ReactNode; + textAutoHide?: boolean; + disableAnimations?: boolean; +} + +export interface BentoProps { + textAutoHide?: boolean; + enableStars?: boolean; + enableSpotlight?: boolean; + enableBorderGlow?: boolean; + disableAnimations?: boolean; + spotlightRadius?: number; + particleCount?: number; + enableTilt?: boolean; + glowColor?: string; + clickEffect?: boolean; + enableMagnetism?: boolean; + data: BentoCardProps[]; +} + +const DEFAULT_PARTICLE_COUNT = 12; +const DEFAULT_SPOTLIGHT_RADIUS = 300; +const DEFAULT_GLOW_COLOR = "132, 0, 255"; +const MOBILE_BREAKPOINT = 768; + +const createParticleElement = ( + x: number, + y: number, + color: string = DEFAULT_GLOW_COLOR, +): HTMLDivElement => { + const el = document.createElement("div"); + el.className = "particle"; + el.style.cssText = ` + position: absolute; + width: 4px; + height: 4px; + border-radius: 50%; + background: rgba(${color}, 1); + box-shadow: 0 0 6px rgba(${color}, 0.6); + pointer-events: none; + z-index: 100; + left: ${x}px; + top: ${y}px; + `; + return el; +}; + +const calculateSpotlightValues = (radius: number) => ({ + proximity: radius * 0.5, + fadeDistance: radius * 0.75, +}); + +const updateCardGlowProperties = ( + card: HTMLElement, + mouseX: number, + mouseY: number, + glow: number, + radius: number, +) => { + const rect = card.getBoundingClientRect(); + const relativeX = ((mouseX - rect.left) / rect.width) * 100; + const relativeY = ((mouseY - rect.top) / rect.height) * 100; + + card.style.setProperty("--glow-x", `${relativeX}%`); + card.style.setProperty("--glow-y", `${relativeY}%`); + card.style.setProperty("--glow-intensity", glow.toString()); + card.style.setProperty("--glow-radius", `${radius}px`); +}; + +const ParticleCard: React.FC<{ + children: React.ReactNode; + className?: string; + disableAnimations?: boolean; + style?: React.CSSProperties; + particleCount?: number; + glowColor?: string; + enableTilt?: boolean; + clickEffect?: boolean; + enableMagnetism?: boolean; +}> = ({ + children, + className = "", + disableAnimations = false, + style, + particleCount = DEFAULT_PARTICLE_COUNT, + glowColor = DEFAULT_GLOW_COLOR, + enableTilt = true, + clickEffect = false, + enableMagnetism = false, +}) => { + const cardRef = useRef
+ {children}
+
+ );
+};
+
+const GlobalSpotlight: React.FC<{
+ gridRef: React.RefObject
+ {children}
+
+);
+
+const useMobileDetection = () => {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkMobile = () =>
+ setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+
+ return () => window.removeEventListener("resize", checkMobile);
+ }, []);
+
+ return isMobile;
+};
+
+const MagicBento: React.FC
+
+ {card.label}
+
+
+ {card.title}
+
+ {card.description}
+
+ {
+ if (!el) return;
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (shouldDisableAnimations) return;
+
+ const rect = el.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+ const centerX = rect.width / 2;
+ const centerY = rect.height / 2;
+
+ if (enableTilt) {
+ const rotateX = ((y - centerY) / centerY) * -10;
+ const rotateY = ((x - centerX) / centerX) * 10;
+ gsap.to(el, {
+ rotateX,
+ rotateY,
+ duration: 0.1,
+ ease: "power2.out",
+ transformPerspective: 1000,
+ });
+ }
+
+ if (enableMagnetism) {
+ const magnetX = (x - centerX) * 0.05;
+ const magnetY = (y - centerY) * 0.05;
+ gsap.to(el, {
+ x: magnetX,
+ y: magnetY,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+ };
+
+ const handleMouseLeave = () => {
+ if (shouldDisableAnimations) return;
+
+ if (enableTilt) {
+ gsap.to(el, {
+ rotateX: 0,
+ rotateY: 0,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+
+ if (enableMagnetism) {
+ gsap.to(el, {
+ x: 0,
+ y: 0,
+ duration: 0.3,
+ ease: "power2.out",
+ });
+ }
+ };
+
+ const handleClick = (e: MouseEvent) => {
+ if (!clickEffect || shouldDisableAnimations) return;
+
+ const rect = el.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ // Calculate the maximum distance from click point to any corner
+ const maxDistance = Math.max(
+ Math.hypot(x, y),
+ Math.hypot(x - rect.width, y),
+ Math.hypot(x, y - rect.height),
+ Math.hypot(x - rect.width, y - rect.height),
+ );
+
+ const ripple = document.createElement("div");
+ ripple.style.cssText = `
+ position: absolute;
+ width: ${maxDistance * 2}px;
+ height: ${maxDistance * 2}px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%);
+ left: ${x - maxDistance}px;
+ top: ${y - maxDistance}px;
+ pointer-events: none;
+ z-index: 1000;
+ `;
+
+ el.appendChild(ripple);
+
+ gsap.fromTo(
+ ripple,
+ {
+ scale: 0,
+ opacity: 1,
+ },
+ {
+ scale: 1,
+ opacity: 0,
+ duration: 0.8,
+ ease: "power2.out",
+ onComplete: () => ripple.remove(),
+ },
+ );
+ };
+
+ el.addEventListener("mousemove", handleMouseMove);
+ el.addEventListener("mouseleave", handleMouseLeave);
+ el.addEventListener("click", handleClick);
+ }}
+ >
+
+ );
+ })}
+
+
+ {card.label}
+
+
+ {card.title}
++ {card.description} +
+
+
+ )}
+
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+}
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon && (
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ {children}
+
+ );
+};
+
+export default SpotlightCard;
diff --git a/frontend-web/src/components/ui/switch.tsx b/frontend-web/src/components/ui/switch.tsx
new file mode 100644
index 00000000..d63e4b77
--- /dev/null
+++ b/frontend-web/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+ className,
+ ...props
+}: React.ComponentProps
+
+ );
+
+ if (!sequence) return content;
+
+ return (
+
+
+
+
+
+
+
+
+ {wrappedChildren}
+
+
+
+
+
+ {words[index]}
+
+
+
+
+ );
+}
diff --git a/frontend-web/src/components/workspace/agent-welcome.tsx b/frontend-web/src/components/workspace/agent-welcome.tsx
new file mode 100644
index 00000000..7d30b9b3
--- /dev/null
+++ b/frontend-web/src/components/workspace/agent-welcome.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { BotIcon } from "lucide-react";
+
+import { type Agent } from "@/core/agents";
+import { cn } from "@/lib/utils";
+
+export function AgentWelcome({
+ className,
+ agent,
+ agentName,
+}: {
+ className?: string;
+ agent: Agent | null | undefined;
+ agentName: string;
+}) {
+ const displayName = agent?.name ?? agentName;
+ const description = agent?.description;
+
+ return (
+
+
+ );
+}
diff --git a/frontend-web/src/components/workspace/agents/agent-card.tsx b/frontend-web/src/components/workspace/agents/agent-card.tsx
new file mode 100644
index 00000000..27dda218
--- /dev/null
+++ b/frontend-web/src/components/workspace/agents/agent-card.tsx
@@ -0,0 +1,406 @@
+"use client";
+
+import {
+ BotIcon,
+ EyeIcon,
+ EyeOffIcon,
+ MessageSquareIcon,
+ SquarePenIcon,
+ Trash2Icon,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { useDeleteAgent, useUpdateAgent } from "@/core/agents";
+import type { Agent } from "@/core/agents";
+import { getStoredAuth } from "@/core/auth";
+import { useI18n } from "@/core/i18n/hooks";
+import { useSkills } from "@/core/skills/hooks";
+
+interface AgentCardProps {
+ agent: Agent;
+}
+
+export function AgentCard({ agent }: AgentCardProps) {
+ const { t } = useI18n();
+ const router = useRouter();
+ const deleteAgent = useDeleteAgent();
+ const updateAgent = useUpdateAgent();
+ const { skills, isLoading: isSkillsLoading } = useSkills();
+ const [deleteOpen, setDeleteOpen] = useState(false);
+ const [editOpen, setEditOpen] = useState(false);
+ const [editName, setEditName] = useState(agent.name);
+ const [editDescription, setEditDescription] = useState(agent.description ?? "");
+ const [editSoul, setEditSoul] = useState(agent.soul ?? "");
+ const [editPublished, setEditPublished] = useState(agent.published);
+ const [selectedSkills, setSelectedSkills] = useState
+
+ {displayName}
+ {description && (
+ {description}
+ )} +
+
+ {agent.description && (
+
+
+
+
+
+
+ {agent.name}
+
+ {agent.model && (
+
+ {agent.model}
+
+ )}
+
+
+ {isBuiltin && (
+
+ 内置
+
+ )}
+ {isOwned && (
+
+ 我的
+
+ )}
+ {isFromOthers && (
+
+ 来自他人
+
+ )}
+ {isOwned && agent.published && (
+
+ 已发布
+
+ )}
+
+
+ {agent.tool_groups?.map((group) => (
+
+ {group}
+
+ ))}
+ {agent.skills?.map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+
+
+
+
+ )}
+