kandev/apps/web/components/task/chat/reset-context-button.tsx

"use client";

import { useState, useCallback } from "react";
import { IconRotateClockwise2 } from "@tabler/icons-react";
import { GridSpinner } from "@/components/grid-spinner";
import { Button } from "@kandev/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@kandev/ui/alert-dialog";
import { useAppStore } from "@/components/state-provider";
import { getWebSocketClient } from "@/lib/ws/connection";
import { useTranslation } from "react-i18next";

export function ResetContextButton({ sessionId }: { sessionId: string }) {
  const { t } = useTranslation();
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [isResetting, setIsResetting] = useState(false);
  const clearContextWindow = useAppStore((state) => state.clearContextWindow);

  const handleReset = useCallback(async () => {
    setIsResetting(true);
    try {
      const client = getWebSocketClient();
      if (!client) return;
      await client.request("session.reset_context", { session_id: sessionId }, 30000);
      clearContextWindow(sessionId);
    } catch (error) {
      console.error("Failed to reset agent context:", error);
    } finally {
      setIsResetting(false);
      setConfirmOpen(false);
    }
  }, [clearContextWindow, sessionId]);

  return (
    <>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-7 w-7 cursor-pointer hover:bg-muted/40 text-muted-foreground"
            onClick={() => setConfirmOpen(true)}
            disabled={isResetting}
            data-testid="reset-context-button"
          >
            {isResetting ? (
              <GridSpinner className="h-4 w-4" />
            ) : (
              <IconRotateClockwise2 className="h-4 w-4" />
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent>{t("task:resetAgentContextClearsConversationHistory")}</TooltipContent>
      </Tooltip>
      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t("task:resetAgentContext")}</AlertDialogTitle>
            <AlertDialogDescription>{t("task:thisWillClearTheAgentS")}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className="cursor-pointer">{t("common:cancel")}</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleReset}
              disabled={isResetting}
              className="cursor-pointer"
              data-testid="reset-context-confirm"
            >
              {isResetting ? t("task:resetting") : t("task:resetContext")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}