CopilotKit/showcase/shell-docs/src/components/copilotkit-mark.tsx at main · samuelson-chen/CopilotKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
"use client";

// Inline CopilotKit brand mark. Used by both BrandNav (desktop chrome)
// and MobileTopNav. Each render gets unique gradient `id`s via React's
// useId() so two instances on the same page don't collide.

import React from "react";

export function CopilotKitMark({ className }: { className?: string }) {
  const uid = React.useId();
  const id = (n: number) => `cpk-mark-${uid}-${n}`;
  return (
    <svg
      viewBox="111 0 25 26"
      width="22"
      height="24"
      className={className}
      aria-hidden="true"
    >
      <defs>
        <linearGradient
          id={id(0)}
          x1="129.301"
          y1="2.339"
          x2="125.623"
          y2="12.452"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#6430AB" />
          <stop offset="1" stopColor="#AA89D8" />
        </linearGradient>
        <linearGradient
          id={id(1)}
          x1="126.451"
          y1="8.039"
          x2="121.717"
          y2="17.187"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#005DBB" />
          <stop offset="1" stopColor="#3D92E8" />
        </linearGradient>
        <linearGradient
          id={id(2)}
          x1="128.565"
          y1="2.339"
          x2="127.139"
          y2="6.798"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#1B70C4" />
          <stop offset="1" stopColor="#54A4F2" />
        </linearGradient>
        <linearGradient
          id={id(3)}
          x1="117.94"
          y1="22.784"
          x2="132.981"
          y2="22.784"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#4497EA" />
          <stop offset="0.2548" stopColor="#1463B2" />
          <stop offset="0.4987" stopColor="#0A437D" />
          <stop offset="0.6667" stopColor="#2476C8" />
          <stop offset="0.9725" stopColor="#0C549A" />
        </linearGradient>
      </defs>
      <path
        d="M119.539 8.67724C121.647 5.91912 123.397 3.19174 124.071 0.989235C124.089 0.929306 124.159 0.903848 124.211 0.938445C126.553 2.4891 130.818 3.50978 134.591 3.53373C134.655 3.53415 134.7 3.59815 134.677 3.65868C133.422 6.84085 131.89 12.5427 131.831 19.054C131.831 19.1507 131.695 19.1854 131.647 19.1014C129.5 15.3443 122.623 10.0649 119.574 8.81884C119.517 8.79565 119.501 8.72596 119.539 8.67724Z"
        fill={`url(#${id(0)})`}
      />
      <path
        d="M126.653 6.99011C123.357 8.03363 120.345 8.61377 119.626 8.74558C119.581 8.75399 119.571 8.81729 119.615 8.83516C122.687 10.1126 129.53 15.3766 131.657 19.1184C131.661 19.1266 131.672 19.1296 131.68 19.1259C131.689 19.1218 131.693 19.1112 131.69 19.1021L126.653 6.99011Z"
        fill={`url(#${id(1)})`}
      />
      <path
        d="M124.221 0.931583C127.042 2.47061 130.303 3.16182 134.629 3.52604C134.656 3.52836 134.665 3.56478 134.641 3.57743C134.087 3.86176 130.918 5.47449 128.565 6.33825C127.934 6.56966 127.3 6.78434 126.675 6.98241C126.662 6.98674 126.647 6.97992 126.641 6.96671L124.156 0.989873C124.139 0.949626 124.183 0.91071 124.221 0.931583Z"
        fill={`url(#${id(2)})`}
      />
      <path
        d="M125.209 3.30419L122.405 12.6362M122.405 12.6362H129.07M122.405 12.6362L111.874 25.0387"
        stroke="#ABABAB"
        strokeWidth="0.321797"
        strokeLinecap="round"
      />
      <path
        d="M119.181 22.4856L117.94 22.6601C118.584 24.3624 119.904 25.1059 121.479 25.1059C125.341 25.1059 124.163 20.7388 126.4 20.7388C128.023 20.7388 127.364 24.2784 130.857 24.2784C132.989 24.2784 133.201 22.1307 132.837 21.2067C132.835 21.201 132.833 21.1959 132.83 21.1908L132.259 20.316C132.222 20.2578 132.131 20.2797 132.125 20.3489L132.018 21.4092C132.011 21.483 132.013 21.5565 132.021 21.6301C132.109 22.3627 132.165 24.1405 130.857 24.1405C129.477 24.1405 129.145 20.6468 126.4 20.6468C123.181 20.6468 123.594 24.968 121.618 24.968C120.313 24.968 119.319 23.497 119.181 22.4856Z"
        fill={`url(#${id(3)})`}
      />
    </svg>
  );
}