Thinking Bar

1"use client"
2 
3import { TextShimmer } from "@/components/prompt-kit/text-shimmer"
4import { cn } from "@/lib/utils"
5import { ChevronRight } from "lucide-react"
6 
7type ThinkingBarProps = {
8  className?: string
9  text?: string
10  onStop?: () => void
11  stopLabel?: string
12  onClick?: () => void
13}
14 
15export function ThinkingBar({
16  className,
17  text = "Thinking",
18  onStop,
19  stopLabel = "Answer now",
20  onClick,
21}: ThinkingBarProps) {
22  return (
23    <div className={cn("flex w-full items-center justify-between", className)}>
24      {onClick ? (
25        <button
26          type="button"
27          onClick={onClick}
28          className="flex items-center gap-1 text-sm transition-opacity hover:opacity-80"
29        >
30          <TextShimmer className="font-medium">{text}</TextShimmer>
31          <ChevronRight className="text-muted-foreground size-4" />
32        </button>
33      ) : (
34        <TextShimmer className="cursor-default font-medium">{text}</TextShimmer>
35      )}
36      {onStop ? (
37        <button
38          onClick={onStop}
39          type="button"
40          className="text-muted-foreground hover:text-foreground border-muted-foreground/50 hover:border-foreground border-b border-dotted text-sm transition-colors"
41        >
42          {stopLabel}
43        </button>
44      ) : null}
45    </div>
46  )
47}