chore: ticket section implement sse

src/app/(modules)/ticket/[ticketId]/components/actions/ProcessingTicketAction.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { AlertCircle, Loader2 } from 'lucide-react';
+
+import { Progress } from '@/components/ui/progress';
+import type { TicketProcessingProgress } from '../../../hooks/useTicketDetailEvents';
+
+import { TicketActionCard } from './TicketActionCard';
+
+interface ProcessingTicketActionProps {
+  progress: TicketProcessingProgress | null;
+  errorMessage: string | null;
+}
+
+function getProgressMessage(progress: TicketProcessingProgress | null) {
+  if (!progress) return 'Waiting for analysis updates.';
+  if (progress.progress >= 95) {
+    return progress.message ?? 'Rendering annotated video...';
+  }
+  return progress.message ?? 'Processing video.';
+}
+
+export function ProcessingTicketAction({
+  progress,
+  errorMessage,
+}: ProcessingTicketActionProps) {
+  const progressValue = progress ? progress.progress : 0;
+  const hasProgress = Boolean(progress);
+
+  return (
+    <TicketActionCard icon={Loader2} title="Analyzing Video">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3 text-sm">
+            <span className="font-medium text-foreground">
+              {getProgressMessage(progress)}
+            </span>
+            <span className="shrink-0 text-muted-foreground">
+              {hasProgress ? `${Math.round(progressValue)}%` : '--'}
+            </span>
+          </div>
+          <Progress value={hasProgress ? progressValue : 0} />
+        </div>
+
+        {errorMessage && (
+          <div className="flex gap-2 rounded-md border border-destructive/25 bg-destructive/10 p-3 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 size-4 shrink-0" />
+            <span>{errorMessage}</span>
+          </div>
+        )}
+      </div>
+    </TicketActionCard>
+  );
+}