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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import React, { useContext } from "react";
import styled from "styled-components";
import { buttonColor, defaultBorderRadius, lightGray, vscForeground } from ".";
import { setShowDialog } from "../redux/slices/uiStateSlice";
import { GUIClientContext } from "../App";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { RootStore } from "../redux/store";
import { BookOpenIcon } from "@heroicons/react/24/outline";
import HeaderButtonWithText from "./HeaderButtonWithText";
import ReactDOM from "react-dom";
export enum ModelTag {
"Requires API Key" = "Requires API Key",
"Local" = "Local",
"Free" = "Free",
"Open-Source" = "Open-Source",
}
const MODEL_TAG_COLORS: any = {};
MODEL_TAG_COLORS[ModelTag["Requires API Key"]] = "#FF0000";
MODEL_TAG_COLORS[ModelTag["Local"]] = "#00bb00";
MODEL_TAG_COLORS[ModelTag["Open-Source"]] = "#0033FF";
MODEL_TAG_COLORS[ModelTag["Free"]] = "#ffff00";
export interface ModelInfo {
title: string;
class: string;
args: any;
description: string;
icon?: string;
tags?: ModelTag[];
}
const Div = styled.div<{ color: string }>`
border: 1px solid ${lightGray};
border-radius: ${defaultBorderRadius};
cursor: pointer;
padding: 4px 8px;
position: relative;
width: 100%;
transition: all 0.5s;
&:hover {
border: 1px solid ${(props) => props.color};
background-color: ${(props) => props.color}22;
}
`;
interface ModelCardProps {
modelInfo: ModelInfo;
}
function ModelCard(props: ModelCardProps) {
const client = useContext(GUIClientContext);
const dispatch = useDispatch();
const navigate = useNavigate();
const vscMediaUrl = useSelector(
(state: RootStore) => state.config.vscMediaUrl
);
return (
<Div
color={buttonColor}
onClick={(e) => {
if ((e.target as any).closest("a")) {
return;
}
client?.addModelForRole(
"*",
props.modelInfo.class,
props.modelInfo.args
);
dispatch(setShowDialog(false));
navigate("/");
}}
>
<div style={{ display: "flex", alignItems: "center" }}>
{vscMediaUrl && (
<img
src={`${vscMediaUrl}/logos/${props.modelInfo.icon}`}
height="24px"
style={{ marginRight: "10px" }}
/>
)}
<h3>{props.modelInfo.title}</h3>
</div>
{props.modelInfo.tags?.map((tag) => {
return (
<span
style={{
backgroundColor: `${MODEL_TAG_COLORS[tag]}55`,
color: "white",
padding: "2px 4px",
borderRadius: defaultBorderRadius,
marginRight: "4px",
}}
>
{tag}
</span>
);
})}
<p>{props.modelInfo.description}</p>
<a
style={{
position: "absolute",
right: "8px",
top: "8px",
}}
href={`https://continue.dev/docs/reference/Models/${props.modelInfo.class.toLowerCase()}`}
target="_blank"
>
<HeaderButtonWithText text="Read the docs">
<BookOpenIcon width="1.6em" height="1.6em" />
</HeaderButtonWithText>
</a>
</Div>
);
}
export default ModelCard;
|
