From 9d1cf89532f7a6f364e5cb456935c88f66fb2081 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Sat, 17 Jan 2026 10:09:43 +0800
Subject: [PATCH] chore: remove unused components

---
 .../components/ai-elements/confirmation.tsx   | 182 ------------------
 .../components/ai-elements/prompt-input.tsx   |   2 +-
 frontend/src/components/ai-elements/tool.tsx  | 165 ----------------
 3 files changed, 1 insertion(+), 348 deletions(-)
 delete mode 100644 frontend/src/components/ai-elements/confirmation.tsx
 delete mode 100644 frontend/src/components/ai-elements/tool.tsx

diff --git a/frontend/src/components/ai-elements/confirmation.tsx b/frontend/src/components/ai-elements/confirmation.tsx
deleted file mode 100644
index 1cd9b7f..0000000
--- a/frontend/src/components/ai-elements/confirmation.tsx
+++ /dev/null
@@ -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} />
-);
diff --git a/frontend/src/components/ai-elements/prompt-input.tsx b/frontend/src/components/ai-elements/prompt-input.tsx
index ffc665a..bd2fee8 100644
--- a/frontend/src/components/ai-elements/prompt-input.tsx
+++ b/frontend/src/components/ai-elements/prompt-input.tsx
@@ -1153,7 +1153,7 @@ export const PromptInputSpeechButton = ({
 
         for (let i = event.resultIndex; i < event.results.length; i++) {
           const result = event.results[i];
-          if (result.isFinal) {
+          if (result?.isFinal) {
             finalTranscript += result[0]?.transcript ?? "";
           }
         }
diff --git a/frontend/src/components/ai-elements/tool.tsx b/frontend/src/components/ai-elements/tool.tsx
deleted file mode 100644
index dfdd31d..0000000
--- a/frontend/src/components/ai-elements/tool.tsx
+++ /dev/null
@@ -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>
-  );
-};