@clikvn/agent-widget-embedded 0.0.9-dev → 0.0.11-dev

package/src/components/Chat/Icons.tsx

@@ -843,7 +843,13 @@ export const SparklesIcon = ({ size = 16 }: { size?: number }) => (
   </svg>
 );
 
-export const CheckCirclFillIcon = ({ size = 16 }: { size?: number }) => {
+export const CheckCirclFillIcon = ({
+  size = 16,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) => {
   return (
     <svg
       height={size}
@@ -851,6 +857,7 @@ export const CheckCirclFillIcon = ({ size = 16 }: { size?: number }) => {
       viewBox="0 0 16 16"
       width={size}
       style={{ color: 'currentcolor' }}
+      className={className}
     >
       <path
         fillRule="evenodd"
@@ -928,3 +935,862 @@ export const VolumeIcon = () => (
     <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z" />
   </svg>
 );
+
+export const ClikVolumeIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_17488_66113)">
+      <rect width="16" height="16" fill="white" fill-opacity="0.01" />
+      <path
+        d="M7.3335 3.33333L4.00016 5.99999H1.3335V10H4.00016L7.3335 12.6667V3.33333Z"
+        stroke="#595959"
+        stroke-width="1.33"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.3599 5.64C10.9848 6.26509 11.3358 7.11279 11.3358 7.99667C11.3358 8.88055 10.9848 9.72824 10.3599 10.3533"
+        stroke="#595959"
+        stroke-width="1.33"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.7134 3.28667C13.9632 4.53685 14.6653 6.23224 14.6653 8C14.6653 9.76776 13.9632 11.4631 12.7134 12.7133"
+        stroke="#595959"
+        stroke-width="1.33"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_17488_66113">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const ClikMicrophoneIcon = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg
+      height={size}
+      width={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_17488_66116)">
+        <rect height={size} width={size} fill="white" fill-opacity="0.01" />
+        <path
+          d="M8 1.33333C7.46957 1.33333 6.96086 1.54404 6.58579 1.91911C6.21071 2.29419 6 2.8029 6 3.33333V8C6 8.53043 6.21071 9.03914 6.58579 9.41421C6.96086 9.78928 7.46957 10 8 10C8.53043 10 9.03914 9.78928 9.41421 9.41421C9.78929 9.03914 10 8.53043 10 8V3.33333C10 2.8029 9.78929 2.29419 9.41421 1.91911C9.03914 1.54404 8.53043 1.33333 8 1.33333Z"
+          stroke="#595959"
+          stroke-width="1.33"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M12.6668 6.66667V8.00001C12.6668 9.23768 12.1752 10.4247 11.3 11.2998C10.4248 12.175 9.23784 12.6667 8.00016 12.6667C6.76249 12.6667 5.5755 12.175 4.70033 11.2998C3.82516 10.4247 3.3335 9.23768 3.3335 8.00001V6.66667"
+          stroke="#595959"
+          stroke-width="1.33"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8 12.6667V14.6667"
+          stroke="#595959"
+          stroke-width="1.33"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_17488_66116">
+          <rect height={size} width={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const ClikPlusIcon = ({ size = 16 }: { size?: number }) => (
+  <svg
+    height={size}
+    width={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_17831_4737)">
+      <rect height={size} width={size} fill="white" fill-opacity="0.01" />
+      <path
+        d="M14.25 8C14.25 8.19891 14.171 8.38968 14.0303 8.53033C13.8897 8.67098 13.6989 8.75 13.5 8.75H8.75V13.5C8.75 13.6989 8.67098 13.8897 8.53033 14.0303C8.38968 14.171 8.19891 14.25 8 14.25C7.80109 14.25 7.61032 14.171 7.46967 14.0303C7.32902 13.8897 7.25 13.6989 7.25 13.5V8.75H2.5C2.30109 8.75 2.11032 8.67098 1.96967 8.53033C1.82902 8.38968 1.75 8.19891 1.75 8C1.75 7.80109 1.82902 7.61032 1.96967 7.46967C2.11032 7.32902 2.30109 7.25 2.5 7.25H7.25V2.5C7.25 2.30109 7.32902 2.11032 7.46967 1.96967C7.61032 1.82902 7.80109 1.75 8 1.75C8.19891 1.75 8.38968 1.82902 8.53033 1.96967C8.67098 2.11032 8.75 2.30109 8.75 2.5V7.25H13.5C13.6989 7.25 13.8897 7.32902 14.0303 7.46967C14.171 7.61032 14.25 7.80109 14.25 8Z"
+        fill="#595959"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_17831_4737">
+        <rect height={size} width={size} fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const ClikWaveIcon = () => (
+  <svg
+    width="155"
+    height="24"
+    viewBox="0 0 155 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_17269_67648)">
+      <line
+        x1="1.5"
+        y1="12.5"
+        x2="1.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="3.5"
+        y1="12.5"
+        x2="3.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="5.5"
+        y1="12.5"
+        x2="5.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="7.5"
+        y1="12.5"
+        x2="7.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="9.5"
+        y1="12.5"
+        x2="9.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="11.5"
+        y1="12.5"
+        x2="11.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="13.5"
+        y1="12.5"
+        x2="13.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="15.5"
+        y1="12.5"
+        x2="15.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="17.5"
+        y1="12.5"
+        x2="17.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="19.5"
+        y1="12.5"
+        x2="19.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="21.5"
+        y1="12.5"
+        x2="21.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="23.5"
+        y1="12.5"
+        x2="23.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="25.5"
+        y1="12.5"
+        x2="25.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="27.5"
+        y1="12.5"
+        x2="27.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="29.5"
+        y1="12.5"
+        x2="29.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="31.5"
+        y1="12.5"
+        x2="31.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="33.5"
+        y1="12.5"
+        x2="33.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="35.5"
+        y1="12.5"
+        x2="35.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="37.5"
+        y1="12.5"
+        x2="37.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="39.5"
+        y1="12.5"
+        x2="39.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="41.5"
+        y1="12.5"
+        x2="41.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="43.5"
+        y1="12.5"
+        x2="43.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="45.5"
+        y1="12.5"
+        x2="45.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="47.5"
+        y1="12.5"
+        x2="47.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="49.5"
+        y1="12.5"
+        x2="49.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="51.5"
+        y1="12.5"
+        x2="51.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="53.5"
+        y1="12.5"
+        x2="53.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="55.5"
+        y1="12.5"
+        x2="55.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="57.5"
+        y1="12.5"
+        x2="57.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="59.5"
+        y1="12.5"
+        x2="59.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="61.5"
+        y1="12.5"
+        x2="61.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="63.5"
+        y1="12.5"
+        x2="63.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="65.5"
+        y1="12.5"
+        x2="65.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="67.5"
+        y1="12.5"
+        x2="67.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="69.5"
+        y1="12.5"
+        x2="69.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="71.5"
+        y1="12.5"
+        x2="71.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="73.5"
+        y1="12.5"
+        x2="73.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="75.5"
+        y1="12.5"
+        x2="75.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="77.5"
+        y1="12.5"
+        x2="77.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="79.5"
+        y1="12.5"
+        x2="79.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="81.5"
+        y1="12.5"
+        x2="81.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="83.5"
+        y1="12.5"
+        x2="83.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="85.5"
+        y1="12.5"
+        x2="85.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="87.5"
+        y1="12.5"
+        x2="87.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="89.5"
+        y1="12.5"
+        x2="89.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="91.5"
+        y1="12.5"
+        x2="91.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="93.5"
+        y1="12.5"
+        x2="93.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="95.5"
+        y1="12.5"
+        x2="95.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="97.5"
+        y1="12.5"
+        x2="97.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="99.5"
+        y1="12.5"
+        x2="99.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="101.5"
+        y1="12.5"
+        x2="101.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="103.5"
+        y1="12.5"
+        x2="103.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="105.5"
+        y1="12.5"
+        x2="105.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="107.5"
+        y1="12.5"
+        x2="107.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="109.5"
+        y1="12.5"
+        x2="109.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="111.5"
+        y1="12.5"
+        x2="111.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="113.5"
+        y1="12.5"
+        x2="113.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="115.5"
+        y1="12.5"
+        x2="115.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="117.5"
+        y1="12.5"
+        x2="117.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="119.5"
+        y1="12.5"
+        x2="119.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="121.5"
+        y1="12.5"
+        x2="121.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="123.5"
+        y1="12.5"
+        x2="123.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="125.5"
+        y1="12.5"
+        x2="125.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="127.5"
+        y1="12.5"
+        x2="127.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="129.5"
+        y1="12.5"
+        x2="129.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="131.5"
+        y1="12.5"
+        x2="131.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="133.5"
+        y1="12.5"
+        x2="133.5"
+        y2="11.5"
+        stroke="black"
+        stroke-opacity="0.45"
+        stroke-linecap="round"
+      />
+      <line
+        x1="135.5"
+        y1="15.6349"
+        x2="135.5"
+        y2="8.36517"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="137.5"
+        y1="20.777"
+        x2="137.5"
+        y2="3.2231"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="139.5"
+        y1="17.1909"
+        x2="139.5"
+        y2="6.80912"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="141.5"
+        y1="17.2438"
+        x2="141.5"
+        y2="6.75625"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="143.5"
+        y1="15.0497"
+        x2="143.5"
+        y2="8.95022"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="145.5"
+        y1="20.4811"
+        x2="145.5"
+        y2="3.5189"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="147.5"
+        y1="17.4381"
+        x2="147.5"
+        y2="6.562"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="149.5"
+        y1="16.5963"
+        x2="149.5"
+        y2="7.40366"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="151.5"
+        y1="14.231"
+        x2="151.5"
+        y2="9.7691"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+      <line
+        x1="153.5"
+        y1="19.1121"
+        x2="153.5"
+        y2="4.88788"
+        stroke="#595959"
+        stroke-linecap="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_17269_67648">
+        <rect width="155" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const ClikCloseIcon = ({
+  size = 24,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect width={size} height={size} rx="12" fill="#D9D9D9" />
+    <path
+      d="M17.0306 15.9694C17.1715 16.1103 17.2506 16.3014 17.2506 16.5006C17.2506 16.6999 17.1715 16.891 17.0306 17.0319C16.8897 17.1728 16.6986 17.2519 16.4993 17.2519C16.3001 17.2519 16.109 17.1728 15.9681 17.0319L12 13.0625L8.0306 17.0306C7.8897 17.1715 7.69861 17.2507 7.49935 17.2507C7.30009 17.2507 7.10899 17.1715 6.9681 17.0306C6.8272 16.8897 6.74805 16.6986 6.74805 16.4994C6.74805 16.3001 6.8272 16.109 6.9681 15.9681L10.9375 12L6.96935 8.03061C6.82845 7.88972 6.7493 7.69862 6.7493 7.49936C6.7493 7.30011 6.82845 7.10901 6.96935 6.96811C7.11024 6.82722 7.30134 6.74806 7.5006 6.74806C7.69986 6.74806 7.89095 6.82722 8.03185 6.96811L12 10.9375L15.9693 6.96749C16.1102 6.82659 16.3013 6.74744 16.5006 6.74744C16.6999 6.74744 16.891 6.82659 17.0318 6.96749C17.1727 7.10838 17.2519 7.29948 17.2519 7.49874C17.2519 7.69799 17.1727 7.88909 17.0318 8.02999L13.0625 12L17.0306 15.9694Z"
+      fill="black"
+      fill-opacity="0.85"
+    />
+  </svg>
+);
+
+interface IconProps {
+  color?: string; // Màu sắc có thể tùy chỉnh, mặc định là "#595959"
+}
+export const ClikMessageIcon = ({ color = '#595959' }: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_17831_4761)">
+      <rect width="16" height="16" fill="white" fill-opacity="0.01" />
+      <path
+        d="M14 7.66667C14.0023 8.54658 13.7967 9.41459 13.4 10.2C12.9296 11.1412 12.2065 11.9328 11.3116 12.4862C10.4168 13.0396 9.3855 13.3329 8.33333 13.3333C7.45342 13.3356 6.58541 13.1301 5.8 12.7333L2 14L3.26667 10.2C2.86995 9.41459 2.66437 8.54658 2.66667 7.66667C2.66707 6.61451 2.96041 5.58324 3.51381 4.68837C4.06722 3.7935 4.85884 3.07038 5.8 2.6C6.58541 2.20329 7.45342 1.99771 8.33333 2H8.66667C10.0562 2.07666 11.3687 2.66318 12.3528 3.64724C13.3368 4.63131 13.9233 5.94377 14 7.33334V7.66667Z"
+        stroke={color}
+        stroke-width="1.33"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_17831_4761">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);