1import { ColorScheme } from "../theme/colorScheme"
 2import { text, border, background, foreground } from "./components"
 3import editor from "./editor"
 4
 5export default function assistant(colorScheme: ColorScheme) {
 6    const layer = colorScheme.highest
 7    return {
 8        container: {
 9            background: editor(colorScheme).background,
10            padding: { left: 12 },
11        },
12        header: {
13            border: border(layer, "default", { bottom: true, top: true }),
14            margin: { bottom: 6, top: 6 },
15            background: editor(colorScheme).background,
16        },
17        userSender: {
18            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
19        },
20        assistantSender: {
21            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
22        },
23        systemSender: {
24            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
25        },
26        sentAt: {
27            margin: { top: 2, left: 8 },
28            ...text(layer, "sans", "default", { size: "2xs" }),
29        },
30        modelInfoContainer: {
31            margin: { right: 16, top: 4 },
32        },
33        model: {
34            background: background(layer, "on"),
35            border: border(layer, "on", { overlay: true }),
36            padding: 4,
37            cornerRadius: 4,
38            ...text(layer, "sans", "default", { size: "xs" }),
39            hover: {
40                background: background(layer, "on", "hovered"),
41            },
42        },
43        remainingTokens: {
44            background: background(layer, "on"),
45            border: border(layer, "on", { overlay: true }),
46            padding: 4,
47            margin: { left: 4 },
48            cornerRadius: 4,
49            ...text(layer, "sans", "positive", { size: "xs" }),
50        },
51        noRemainingTokens: {
52            background: background(layer, "on"),
53            border: border(layer, "on", { overlay: true }),
54            padding: 4,
55            margin: { left: 4 },
56            cornerRadius: 4,
57            ...text(layer, "sans", "negative", { size: "xs" }),
58        },
59        errorIcon: {
60            margin: { left: 8 },
61            color: foreground(layer, "negative"),
62            width: 12,
63        },
64        apiKeyEditor: {
65            background: background(layer, "on"),
66            cornerRadius: 6,
67            text: text(layer, "mono", "on"),
68            placeholderText: text(layer, "mono", "on", "disabled", {
69                size: "xs",
70            }),
71            selection: colorScheme.players[0],
72            border: border(layer, "on"),
73            padding: {
74                bottom: 4,
75                left: 8,
76                right: 8,
77                top: 4,
78            },
79        },
80        apiKeyPrompt: {
81            padding: 10,
82            ...text(layer, "sans", "default", { size: "xs" }),
83        },
84    }
85}