1import { ColorScheme } from "../theme/colorScheme"
 2import { text, border, background, foreground } from "./components"
 3import editor from "./editor"
 4import { interactive } from "./interactive"
 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}