send-button

1import { IconArrowUp, IconPlayerStopFilled } from "@tabler/icons-react";
2import { cn } from "../utils/cn";
3 
4export type SendButtonProps = {
5  state: "idle" | "typing" | "streaming";
6};
7 
8export function SendButton({ state }: SendButtonProps) {
9  const isStreaming = state === "streaming";
10  const isTyping = state === "typing";
11 
12  if (isStreaming) {
13    return (
14      <div className="size-7 rounded-full bg-foreground flex items-center justify-center cursor-pointer">
15        <IconPlayerStopFilled className="size-4 text-background" />
16      </div>
17    );
18  }
19 
20  return (
21    <div
22      className={cn(
23        "size-7 rounded-full flex items-center justify-center",
24        isTyping
25          ? "bg-an-send-button-bg cursor-pointer"
26          : "bg-muted cursor-default",
27      )}
28    >
29      <IconArrowUp
30        className={cn(
31          "size-4",
32          isTyping
33            ? "text-an-send-button-color"
34            : "text-neutral-400 dark:text-neutral-600",
35        )}
36      />
37    </div>
38  );
39}