ai-avatar.tsx

import { CSSProperties } from "react";

import { CSS } from "@cocalc/frontend/app-framework";

interface Props {
  size: number; // e.g. 16 or 24
  backgroundColor?;
  style?: CSSProperties;
  innerStyle?: CSSProperties;
  iconColor?: string;
}

export default function AIAvatar({
  size,
  innerStyle,
  backgroundColor = "transparent",
  iconColor = "#353535",
  style,
}: Props) {
  const pathStyle: CSS = {
    color: iconColor,
    fill: iconColor,
    strokeWidth: "1.32964",
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };

  return (
    <div
      style={{
        width: size,
        height: size,
        display: "inline-block",
        position: "relative",
        top: "2px",
        ...style,
      }}
    >
      <div
        style={{
          position: "absolute",
          backgroundColor,
          color: "white",
          height: size,
          ...innerStyle,
        }}
      >
        <svg
          width={size}
          height={size}
          viewBox="0 0 48 48"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            style={{
              ...pathStyle,
              strokeMiterlimit: "10",
            }}
            d="M 24.191406,0 C 19.384868,-0.01113675 14.726227,1.6586636 11.019531,4.71875 l -0.0098,0.00586 -0.0078,0.00781 C 4.3982009,10.431332 2.6582913,19.976168 6.8222656,27.638672 8.947853,31.754223 10.699021,38.791974 11.138672,46.046875 V 48 h 2 v -2.029297 -0.03125 C 12.686142,38.442229 10.939586,31.255135 8.5976563,26.720703 l -0.00391,-0.0098 -0.00586,-0.0098 C 4.8567794,19.854529 6.4028197,11.348679 12.302734,6.2519531 15.649489,3.492814 19.853689,1.9891245 24.191406,2 h 0.002 0.002 c 4.185797,-0.00981 8.233385,1.4981462 11.392579,4.2441406 0.21523,0.1866491 0.428543,0.3837036 0.640625,0.5878906 l 0.0059,0.00781 0.0078,0.00586 c 0.332841,0.3077731 0.649621,0.6240918 0.951172,0.9492188 1.371378,1.50916 2.366829,3.3204921 2.90625,5.2871091 l 0.002,0.0039 0.0059,0.02734 c 0.340934,1.200175 0.515336,2.441793 0.515625,3.689453 v 4.976563 c -0.0106,0.617434 0.07919,1.23294 0.263672,1.822265 l 0.002,0.0098 0.0039,0.0098 c 0.873052,2.600744 1.903547,5.146626 3.083984,7.623047 l -0.0059,-0.0098 c 0.04949,0.106553 0.03151,0.223248 -0.04102,0.314453 -0.07068,0.07362 -0.164997,0.117759 -0.267578,0.115234 h -0.01172 -1.265625 l -0.173829,0.06641 c -0.778323,0.299468 -1.294662,1.056685 -1.291015,1.890625 v 0.002 l 0.0059,0.666015 c 0.0028,0.464537 -0.162371,0.912777 -0.466797,1.263672 l 0.0059,-0.0059 c -0.433049,0.490184 -0.684228,1.115927 -0.708985,1.769531 v 0.01758 0.01953 c -5.2e-5,0.11783 -6.4e-5,3.175199 0,3.224609 v 0.0293 c 0.02428,0.782695 -0.570727,1.414491 -1.353515,1.435547 h -6.083985 c -1.762517,0 -3.21289,1.450373 -3.21289,3.21289 V 48 h 2 v -2.744141 c 0,-0.681638 0.531252,-1.21289 1.21289,-1.21289 h 6.123047 0.01367 c 1.838691,-0.04946 3.297466,-1.58807 3.285156,-3.417969 h 0.01563 c 10e-7,-8.8e-5 0,-0.0019 0,-0.002 6e-6,-0.0021 -5e-6,-0.04179 0,-0.04492 3.53e-4,-0.222593 -4.2e-5,-3.027667 0,-3.189453 0.0083,-0.191008 0.08039,-0.374223 0.207032,-0.517578 l 0.0039,-0.0039 0.002,-0.0039 c 0.622407,-0.717413 0.962814,-1.63618 0.957031,-2.585937 v -0.002 l -0.0059,-0.611329 h 0.693359 c 0.693362,0.01707 1.360856,-0.27319 1.822266,-0.791015 l 0.0078,-0.0078 0.0059,-0.0098 c 0.582138,-0.683472 0.714135,-1.648652 0.335937,-2.462891 l -0.002,-0.0059 -0.002,-0.0039 c -1.143965,-2.399905 -2.141736,-4.866496 -2.988281,-7.386718 -0.118875,-0.38262 -0.176799,-0.781005 -0.169922,-1.181641 v -0.0098 -5.003906 c -3.31e-4,-1.432315 -0.200404,-2.856572 -0.591797,-4.234375 l -0.0039,-0.01367 C 41.403851,10.279612 40.252296,8.1848349 38.666016,6.4414062 l -0.002,-0.00195 -0.0039,-0.00391 C 38.32786,6.0772708 37.979333,5.728006 37.615234,5.390625 l -0.01563,-0.013672 C 37.375988,5.1619714 37.144945,4.9464984 36.900391,4.734375 h -0.002 C 33.37564,1.672844 28.862484,-0.00998779 24.195312,0 Z"
            id="path885"
          />
          <path
            style={pathStyle}
            d="m 31.585242,11.445917 a 1.3744465,1.2862806 0 0 0 -1.374446,1.286281 1.3744465,1.2862806 0 0 0 1.374446,1.28628 h 4.810563 a 1.3744465,1.2862806 0 0 0 1.374446,-1.28628 1.3744465,1.2862806 0 0 0 -1.374446,-1.286281 z"
            id="line887"
          />
          <path
            style={pathStyle}
            d="m 31.585242,29.453846 a 1.3744465,1.2862806 0 0 0 -1.374446,1.286281 1.3744465,1.2862806 0 0 0 1.374446,1.286281 h 4.810563 a 1.3744465,1.2862806 0 0 0 1.374446,-1.286281 1.3744465,1.2862806 0 0 0 -1.374446,-1.286281 z"
            id="line889"
          />
          <path
            style={pathStyle}
            d="m 33.990523,11.445917 a 1.3744465,1.2862806 0 0 0 -1.374446,1.286281 v 18.007929 a 1.3744465,1.2862806 0 0 0 1.374446,1.286281 1.3744465,1.2862806 0 0 0 1.374447,-1.286281 V 12.732198 a 1.3744465,1.2862806 0 0 0 -1.374447,-1.286281 z"
            id="line891"
          />
          <g
            id="g897"
            transform="matrix(1.3744465,0,0,1.2862806,-6.7838281,-2.7031706)"
          >
            <path
              style={pathStyle}
              d="m 19.226562,11 a 1.0001,1.0001 0 0 0 -0.960937,0.720703 l -4.066406,14 a 1,1 0 0 0 0.68164,1.240234 1,1 0 0 0 1.238282,-0.68164 L 19.566406,14.412109 23.03125,26.28125 a 1,1 0 0 0 1.240234,0.677734 1,1 0 0 0 0.679688,-1.240234 l -4.087891,-14 A 1.0001,1.0001 0 0 0 19.904297,11 Z"
              id="path1477"
            />
            <path
              style={pathStyle}
              d="m 16.853516,20.132812 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 5.421875 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z"
              id="path1474"
            />
          </g>
        </svg>
      </div>
    </div>
  );
}