1import { ColorScheme } from "../themes/common/colorScheme"
 2import { text, border, background } 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      },
16      user_sender: {
17        ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
18      },
19      assistant_sender: {
20        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
21      },
22      sent_at: {
23        margin: { top: 2, left: 8 },
24        ...text(layer, "sans", "default", { size: "2xs" }),
25      },
26      remaining_tokens: {
27        padding: 4,
28        margin: { right: 16, top: 4 },
29        background: background(layer, "on"),
30        cornerRadius: 4,
31        ...text(layer, "sans", "positive", { size: "xs" }),
32      },
33      no_remaining_tokens: {
34        padding: 4,
35        margin: { right: 16, top: 4 },
36        background: background(layer, "on"),
37        cornerRadius: 4,
38        ...text(layer, "sans", "negative", { size: "xs" }),
39      },
40      apiKeyEditor: {
41          background: background(layer, "on"),
42          cornerRadius: 6,
43          text: text(layer, "mono", "on"),
44          placeholderText: text(layer, "mono", "on", "disabled", {
45              size: "xs",
46          }),
47          selection: colorScheme.players[0],
48          border: border(layer, "on"),
49          padding: {
50              bottom: 4,
51              left: 8,
52              right: 8,
53              top: 4,
54          },
55      },
56      apiKeyPrompt: {
57        padding: 10,
58        ...text(layer, "sans", "default", { size: "xs" }),
59      }
60    }
61}