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        messageHeader: {
13            border: border(layer, "default", { bottom: true, top: true }),
14            margin: { bottom: 6, top: 6 },
15            background: editor(colorScheme).background,
16        },
17        hamburgerButton: {
18          icon: {
19            color: text(layer, "sans", "default", { size: "sm" }).color,
20            asset: "icons/hamburger_15.svg",
21            dimensions: {
22              width: 15,
23              height: 15,
24            },
25          },
26          container: {}
27        },
28        userSender: {
29            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
30        },
31        assistantSender: {
32            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
33        },
34        systemSender: {
35            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
36        },
37        sentAt: {
38            margin: { top: 2, left: 8 },
39            ...text(layer, "sans", "default", { size: "2xs" }),
40        },
41        modelInfoContainer: {
42            margin: { right: 16, top: 4 },
43        },
44        model: {
45            background: background(layer, "on"),
46            border: border(layer, "on", { overlay: true }),
47            padding: 4,
48            cornerRadius: 4,
49            ...text(layer, "sans", "default", { size: "xs" }),
50            hover: {
51                background: background(layer, "on", "hovered"),
52            },
53        },
54        remainingTokens: {
55            background: background(layer, "on"),
56            border: border(layer, "on", { overlay: true }),
57            padding: 4,
58            margin: { left: 4 },
59            cornerRadius: 4,
60            ...text(layer, "sans", "positive", { size: "xs" }),
61        },
62        noRemainingTokens: {
63            background: background(layer, "on"),
64            border: border(layer, "on", { overlay: true }),
65            padding: 4,
66            margin: { left: 4 },
67            cornerRadius: 4,
68            ...text(layer, "sans", "negative", { size: "xs" }),
69        },
70        errorIcon: {
71            margin: { left: 8 },
72            color: foreground(layer, "negative"),
73            width: 12,
74        },
75        apiKeyEditor: {
76            background: background(layer, "on"),
77            cornerRadius: 6,
78            text: text(layer, "mono", "on"),
79            placeholderText: text(layer, "mono", "on", "disabled", {
80                size: "xs",
81            }),
82            selection: colorScheme.players[0],
83            border: border(layer, "on"),
84            padding: {
85                bottom: 4,
86                left: 8,
87                right: 8,
88                top: 4,
89            },
90        },
91        apiKeyPrompt: {
92            padding: 10,
93            ...text(layer, "sans", "default", { size: "xs" }),
94        },
95    }
96}