mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-19 04:14:46 +08:00
chore: remove unused components
This commit is contained in:
Henry Li
@@ -1,182 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import type { ToolUIPart } from "ai";
|
|
||||||
import {
|
|
||||||
type ComponentProps,
|
|
||||||
createContext,
|
|
||||||
type ReactNode,
|
|
||||||
useContext,
|
|
||||||
} from "react";
|
|
||||||
|
|
||||||
type ToolUIPartApproval =
|
|
||||||
| {
|
|
||||||
id: string;
|
|
||||||
approved?: never;
|
|
||||||
reason?: never;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
id: string;
|
|
||||||
approved: boolean;
|
|
||||||
reason?: string;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
id: string;
|
|
||||||
approved: true;
|
|
||||||
reason?: string;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
id: string;
|
|
||||||
approved: true;
|
|
||||||
reason?: string;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
id: string;
|
|
||||||
approved: false;
|
|
||||||
reason?: string;
|
|
||||||
}
|
|
||||||
| undefined;
|
|
||||||
|
|
||||||
type ConfirmationContextValue = {
|
|
||||||
approval: ToolUIPartApproval;
|
|
||||||
state: ToolUIPart["state"];
|
|
||||||
};
|
|
||||||
|
|
||||||
const ConfirmationContext = createContext<ConfirmationContextValue | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
const useConfirmation = () => {
|
|
||||||
const context = useContext(ConfirmationContext);
|
|
||||||
|
|
||||||
if (!context) {
|
|
||||||
throw new Error("Confirmation components must be used within Confirmation");
|
|
||||||
}
|
|
||||||
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConfirmationProps = ComponentProps<typeof Alert> & {
|
|
||||||
approval?: ToolUIPartApproval;
|
|
||||||
state: ToolUIPart["state"];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Confirmation = ({
|
|
||||||
className,
|
|
||||||
approval,
|
|
||||||
state,
|
|
||||||
...props
|
|
||||||
}: ConfirmationProps) => {
|
|
||||||
if (!approval || state === "input-streaming" || state === "input-available") {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ConfirmationContext.Provider value={{ approval, state }}>
|
|
||||||
<Alert className={cn("flex flex-col gap-2", className)} {...props} />
|
|
||||||
</ConfirmationContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
|
|
||||||
|
|
||||||
export const ConfirmationTitle = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ConfirmationTitleProps) => (
|
|
||||||
<AlertDescription className={cn("inline", className)} {...props} />
|
|
||||||
);
|
|
||||||
|
|
||||||
export type ConfirmationRequestProps = {
|
|
||||||
children?: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {
|
|
||||||
const { state } = useConfirmation();
|
|
||||||
|
|
||||||
// Only show when approval is requested
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
if (state !== "approval-requested") {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return children;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConfirmationAcceptedProps = {
|
|
||||||
children?: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ConfirmationAccepted = ({
|
|
||||||
children,
|
|
||||||
}: ConfirmationAcceptedProps) => {
|
|
||||||
const { approval, state } = useConfirmation();
|
|
||||||
|
|
||||||
// Only show when approved and in response states
|
|
||||||
if (
|
|
||||||
!approval?.approved ||
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
(state !== "approval-responded" &&
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
state !== "output-denied" &&
|
|
||||||
state !== "output-available")
|
|
||||||
) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return children;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConfirmationRejectedProps = {
|
|
||||||
children?: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ConfirmationRejected = ({
|
|
||||||
children,
|
|
||||||
}: ConfirmationRejectedProps) => {
|
|
||||||
const { approval, state } = useConfirmation();
|
|
||||||
|
|
||||||
// Only show when rejected and in response states
|
|
||||||
if (
|
|
||||||
approval?.approved !== false ||
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
(state !== "approval-responded" &&
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
state !== "output-denied" &&
|
|
||||||
state !== "output-available")
|
|
||||||
) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return children;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConfirmationActionsProps = ComponentProps<"div">;
|
|
||||||
|
|
||||||
export const ConfirmationActions = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ConfirmationActionsProps) => {
|
|
||||||
const { state } = useConfirmation();
|
|
||||||
|
|
||||||
// Only show when approval is requested
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
if (state !== "approval-requested") {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn("flex items-center justify-end gap-2 self-end", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ConfirmationActionProps = ComponentProps<typeof Button>;
|
|
||||||
|
|
||||||
export const ConfirmationAction = (props: ConfirmationActionProps) => (
|
|
||||||
<Button className="h-8 px-3 text-sm" type="button" {...props} />
|
|
||||||
);
|
|
||||||
@@ -1153,7 +1153,7 @@ export const PromptInputSpeechButton = ({
|
|||||||
|
|
||||||
for (let i = event.resultIndex; i < event.results.length; i++) {
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
||||||
const result = event.results[i];
|
const result = event.results[i];
|
||||||
if (result.isFinal) {
|
if (result?.isFinal) {
|
||||||
finalTranscript += result[0]?.transcript ?? "";
|
finalTranscript += result[0]?.transcript ?? "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,165 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import {
|
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from "@/components/ui/collapsible";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import type { ToolUIPart } from "ai";
|
|
||||||
import {
|
|
||||||
CheckCircleIcon,
|
|
||||||
ChevronDownIcon,
|
|
||||||
CircleIcon,
|
|
||||||
ClockIcon,
|
|
||||||
WrenchIcon,
|
|
||||||
XCircleIcon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import type { ComponentProps, ReactNode } from "react";
|
|
||||||
import { isValidElement } from "react";
|
|
||||||
import { CodeBlock } from "./code-block";
|
|
||||||
|
|
||||||
export type ToolProps = ComponentProps<typeof Collapsible>;
|
|
||||||
|
|
||||||
export const Tool = ({ className, ...props }: ToolProps) => (
|
|
||||||
<Collapsible
|
|
||||||
className={cn("not-prose mb-4 w-full rounded-md border", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
export type ToolHeaderProps = {
|
|
||||||
title?: string;
|
|
||||||
type: ToolUIPart["type"];
|
|
||||||
state: ToolUIPart["state"];
|
|
||||||
className?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusBadge = (status: ToolUIPart["state"]) => {
|
|
||||||
const labels: Record<ToolUIPart["state"], string> = {
|
|
||||||
"input-streaming": "Pending",
|
|
||||||
"input-available": "Running",
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
"approval-requested": "Awaiting Approval",
|
|
||||||
"approval-responded": "Responded",
|
|
||||||
"output-available": "Completed",
|
|
||||||
"output-error": "Error",
|
|
||||||
"output-denied": "Denied",
|
|
||||||
};
|
|
||||||
|
|
||||||
const icons: Record<ToolUIPart["state"], ReactNode> = {
|
|
||||||
"input-streaming": <CircleIcon className="size-4" />,
|
|
||||||
"input-available": <ClockIcon className="size-4 animate-pulse" />,
|
|
||||||
// @ts-expect-error state only available in AI SDK v6
|
|
||||||
"approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
|
|
||||||
"approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
|
|
||||||
"output-available": <CheckCircleIcon className="size-4 text-green-600" />,
|
|
||||||
"output-error": <XCircleIcon className="size-4 text-red-600" />,
|
|
||||||
"output-denied": <XCircleIcon className="size-4 text-orange-600" />,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
|
|
||||||
{icons[status]}
|
|
||||||
{labels[status]}
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ToolHeader = ({
|
|
||||||
className,
|
|
||||||
title,
|
|
||||||
type,
|
|
||||||
state,
|
|
||||||
...props
|
|
||||||
}: ToolHeaderProps) => (
|
|
||||||
<CollapsibleTrigger
|
|
||||||
className={cn(
|
|
||||||
"flex w-full items-center justify-between gap-4 p-3",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<WrenchIcon className="size-4 text-muted-foreground" />
|
|
||||||
<span className="font-medium text-sm">
|
|
||||||
{title ?? type.split("-").slice(1).join("-")}
|
|
||||||
</span>
|
|
||||||
{getStatusBadge(state)}
|
|
||||||
</div>
|
|
||||||
<ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
);
|
|
||||||
|
|
||||||
export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
|
|
||||||
|
|
||||||
export const ToolContent = ({ className, ...props }: ToolContentProps) => (
|
|
||||||
<CollapsibleContent
|
|
||||||
className={cn(
|
|
||||||
"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
export type ToolInputProps = ComponentProps<"div"> & {
|
|
||||||
input: ToolUIPart["input"];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
|
|
||||||
<div className={cn("space-y-2 overflow-hidden p-4", className)} {...props}>
|
|
||||||
<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
|
|
||||||
Parameters
|
|
||||||
</h4>
|
|
||||||
<div className="rounded-md bg-muted/50">
|
|
||||||
<CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
export type ToolOutputProps = ComponentProps<"div"> & {
|
|
||||||
output: ToolUIPart["output"];
|
|
||||||
errorText: ToolUIPart["errorText"];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ToolOutput = ({
|
|
||||||
className,
|
|
||||||
output,
|
|
||||||
errorText,
|
|
||||||
...props
|
|
||||||
}: ToolOutputProps) => {
|
|
||||||
if (!(output || errorText)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let Output = <div>{output as ReactNode}</div>;
|
|
||||||
|
|
||||||
if (typeof output === "object" && !isValidElement(output)) {
|
|
||||||
Output = (
|
|
||||||
<CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
|
|
||||||
);
|
|
||||||
} else if (typeof output === "string") {
|
|
||||||
Output = <CodeBlock code={output} language="json" />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={cn("space-y-2 p-4", className)} {...props}>
|
|
||||||
<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
|
|
||||||
{errorText ? "Error" : "Result"}
|
|
||||||
</h4>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"overflow-x-auto rounded-md text-xs [&_table]:w-full",
|
|
||||||
errorText
|
|
||||||
? "bg-destructive/10 text-destructive"
|
|
||||||
: "bg-muted/50 text-foreground"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{errorText && <div>{errorText}</div>}
|
|
||||||
{Output}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user