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        background: editor(colorScheme).background
16      },
17      user_sender: {
18        ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
19      },
20      assistant_sender: {
21        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
22      },
23      sent_at: {
24        margin: { top: 2, left: 8 },
25        ...text(layer, "sans", "default", { size: "2xs" }),
26      },
27      model_info_container: {
28        margin: { right: 16, top: 4 },
29      },
30      model: {
31        background: background(layer, "on"),
32        border: border(layer, "on", { overlay: true }),
33        padding: 4,
34        cornerRadius: 4,
35        ...text(layer, "sans", "default", { size: "xs" }),
36        hover: {
37          background: background(layer, "on", "hovered"),
38        }
39      },
40      remaining_tokens: {
41        background: background(layer, "on"),
42        border: border(layer, "on", { overlay: true }),
43        padding: 4,
44        margin: { left: 4 },
45        cornerRadius: 4,
46        ...text(layer, "sans", "positive", { size: "xs" }),
47      },
48      no_remaining_tokens: {
49        background: background(layer, "on"),
50        border: border(layer, "on", { overlay: true }),
51        padding: 4,
52        margin: { left: 4 },
53        cornerRadius: 4,
54        ...text(layer, "sans", "negative", { size: "xs" }),
55      },
56      apiKeyEditor: {
57          background: background(layer, "on"),
58          cornerRadius: 6,
59          text: text(layer, "mono", "on"),
60          placeholderText: text(layer, "mono", "on", "disabled", {
61              size: "xs",
62          }),
63          selection: colorScheme.players[0],
64          border: border(layer, "on"),
65          padding: {
66              bottom: 4,
67              left: 8,
68              right: 8,
69              top: 4,
70          },
71      },
72      apiKeyPrompt: {
73        padding: 10,
74        ...text(layer, "sans", "default", { size: "xs" }),
75      }
76    }
77}