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