assistant.ts

 1import { ColorScheme } from "../themes/common/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      header: {
13        border: border(layer, "default", { bottom: true, top: true }),
14        margin: { bottom: 6, top: 6 },
15        background: editor(colorScheme).background
16      },
17      userSender: {
18        ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
19      },
20      assistantSender: {
21        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
22      },
23      sentAt: {
24        margin: { top: 2, left: 8 },
25        ...text(layer, "sans", "default", { size: "2xs" }),
26      },
27      modelInfoContainer: {
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      remainingTokens: {
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      noRemainingTokens: {
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      errorIcon: {
57        margin: { left: 8 },
58        color: foreground(layer, "negative"),
59        width: 12,
60      },
61      apiKeyEditor: {
62          background: background(layer, "on"),
63          cornerRadius: 6,
64          text: text(layer, "mono", "on"),
65          placeholderText: text(layer, "mono", "on", "disabled", {
66              size: "xs",
67          }),
68          selection: colorScheme.players[0],
69          border: border(layer, "on"),
70          padding: {
71              bottom: 4,
72              left: 8,
73              right: 8,
74              top: 4,
75          },
76      },
77      apiKeyPrompt: {
78        padding: 10,
79        ...text(layer, "sans", "default", { size: "xs" }),
80      }
81    }
82}