CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/components/mistral-avatar.tsx
Views: 687
1
import { CSS } from "@cocalc/frontend/app-framework";

2


3
// The base64 encoded png is exactly the Mistral AI from their website, with transparent background.

4
// Why? Importing it from a file and including it causes a nextjs error.

5


6
export default function MistralAvatar({

7
  size = 64,

8
  style,

9
  backgroundColor = "transparent",

10
}: {

11
  size: number;

12
  style?: CSS;

13
  backgroundColor?: string;

14
}) {

15
  return (

16
    <div

17
      style={{

18
        width: size,

19
        height: size,

20
        display: "inline-block",

21
        position: "relative",

22
        ...style,

23
      }}

24
    >

25
      <div

26
        style={{

27
          position: "absolute",

28
          backgroundColor,

29
          color: "white",

30
          height: size,

31
          top: "1px",

32
        }}

33
      >

34
        <img

35
          alt="Mistral AI Icon"

36
          width={size}

37
          height={size}

38
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAEB0lEQVR4nOzdP4tc9RfH8XN35/djkzRK4h9WjZVgJRKwsLDTJlZCJDZ5DJYiCqa0tPQhBCJ2Smp7OzutlrCFRlxQN0uY3WsRS/kQznf0zsLrBVue/c7MvW/mVmdW8zwX8M92ln4BsM0EAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCASCVXdwmqb2Qq35++7koOc+e7peuH200OnnxjRNN6rqbmf2zud1ePOd2t/8q3oC1+Zp0//SNwgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBIJpnns7qIeWV3/dnRz0Z92ruc7+83Nvze92R6dp+qYz99TFOv3ty9rtzB78Ws//cL+udWZfe6UevPhsXenMDntv88ur29vdh/yxyKlVc71d00Lvue96c27dvb5XLz/+a5nr0WLX91/gEQsCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAsHIIud1e/LngVNHzLWuje//fgL3bn/UHf3kjd7nvPf/Wi/0Oc9D98aWWebnDz7sTg56HMh52+7e1d7uPuiwqvYXOLfqi83//IFHLAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBCPLjY/bkw8X6nLv7KCqt9/94Pd6qXvs1dUi7/e0LpwddgaP13XhwcO60pm9vDOdXdqZ+vfGlhkJ5GJ78v7ewLEDPvj4zbr16VFn9OWRbfbXF3i/83xS3x6/2hm9NE03qupuZ/bO6/87urm/6t8bW8YjFgQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEgpHl1b+0J78bOXbAW73N7n97vz05t/de9811OjC9272+qx931/XTqn9vbJmRO/WZ9uSjkft0wMmqv6F9nr/a7IvZaqfd67s+mQ5rd+rfG1vGIxYEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBIJpXmLzOJwTvkEgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEfwUAAP//joB2YP8SrLUAAAAASUVORK5CYII="

39
        ></img>

40
      </div>

41
    </div>

42
  );

43
}

44


45