1import { ColorScheme } from "../theme/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 messageHeader: {
13 border: border(layer, "default", { bottom: true, top: true }),
14 margin: { bottom: 6, top: 6 },
15 background: editor(colorScheme).background,
16 },
17 hamburgerButton: {
18 icon: {
19 color: text(layer, "sans", "default", { size: "sm" }).color,
20 asset: "icons/hamburger_15.svg",
21 dimensions: {
22 width: 15,
23 height: 15,
24 },
25 },
26 container: {
27 margin: { left: 8 },
28 }
29 },
30 plusButton: {
31 icon: {
32 color: text(layer, "sans", "default", { size: "sm" }).color,
33 asset: "icons/plus_12.svg",
34 dimensions: {
35 width: 12,
36 height: 12,
37 },
38 },
39 container: {
40 margin: { left: 8 },
41 }
42 },
43 savedConversation: {
44 background: background(layer, "on"),
45 hover: {
46 background: background(layer, "on", "hovered"),
47 },
48 savedAt: {
49 margin: { left: 8 },
50 ...text(layer, "sans", "default", { size: "xs" }),
51 },
52 title: {
53 margin: { left: 8 },
54 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
55 }
56 },
57 userSender: {
58 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
59 },
60 assistantSender: {
61 ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
62 },
63 systemSender: {
64 ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
65 },
66 sentAt: {
67 margin: { top: 2, left: 8 },
68 ...text(layer, "sans", "default", { size: "2xs" }),
69 },
70 modelInfoContainer: {
71 margin: { right: 16, top: 4 },
72 },
73 model: {
74 background: background(layer, "on"),
75 border: border(layer, "on", { overlay: true }),
76 padding: 4,
77 cornerRadius: 4,
78 ...text(layer, "sans", "default", { size: "xs" }),
79 hover: {
80 background: background(layer, "on", "hovered"),
81 },
82 },
83 remainingTokens: {
84 background: background(layer, "on"),
85 border: border(layer, "on", { overlay: true }),
86 padding: 4,
87 margin: { left: 4 },
88 cornerRadius: 4,
89 ...text(layer, "sans", "positive", { size: "xs" }),
90 },
91 noRemainingTokens: {
92 background: background(layer, "on"),
93 border: border(layer, "on", { overlay: true }),
94 padding: 4,
95 margin: { left: 4 },
96 cornerRadius: 4,
97 ...text(layer, "sans", "negative", { size: "xs" }),
98 },
99 errorIcon: {
100 margin: { left: 8 },
101 color: foreground(layer, "negative"),
102 width: 12,
103 },
104 apiKeyEditor: {
105 background: background(layer, "on"),
106 cornerRadius: 6,
107 text: text(layer, "mono", "on"),
108 placeholderText: text(layer, "mono", "on", "disabled", {
109 size: "xs",
110 }),
111 selection: colorScheme.players[0],
112 border: border(layer, "on"),
113 padding: {
114 bottom: 4,
115 left: 8,
116 right: 8,
117 top: 4,
118 },
119 },
120 apiKeyPrompt: {
121 padding: 10,
122 ...text(layer, "sans", "default", { size: "xs" }),
123 },
124 }
125}