1import { ColorScheme } from "../theme/colorScheme"
2import { text, border, background, foreground } from "./components"
3import editor from "./editor"
4import { interactive } from "../element"
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 messageHeader: {
14 border: border(layer, "default", { bottom: true, top: true }),
15 margin: { bottom: 6, top: 6 },
16 background: editor(colorScheme).background,
17 },
18 hamburgerButton: {
19 icon: {
20 color: text(layer, "sans", "default", { size: "sm" }).color,
21 asset: "icons/hamburger_15.svg",
22 dimensions: {
23 width: 15,
24 height: 15,
25 },
26 },
27 container: {
28 margin: { left: 12 },
29 }
30 },
31 splitButton: {
32 icon: {
33 color: text(layer, "sans", "default", { size: "sm" }).color,
34 asset: "icons/split_message_15.svg",
35 dimensions: {
36 width: 15,
37 height: 15,
38 },
39 },
40 container: {
41 margin: { left: 12 },
42 }
43 },
44 assistButton: {
45 icon: {
46 color: text(layer, "sans", "default", { size: "sm" }).color,
47 asset: "icons/assist_15.svg",
48 dimensions: {
49 width: 15,
50 height: 15,
51 },
52 },
53 container: {
54 margin: { left: 12, right: 12 },
55 }
56 },
57 zoomInButton: {
58 icon: {
59 color: text(layer, "sans", "default", { size: "sm" }).color,
60 asset: "icons/maximize_8.svg",
61 dimensions: {
62 width: 12,
63 height: 12,
64 },
65 },
66 container: {
67 margin: { right: 12 },
68 }
69 },
70 zoomOutButton: {
71 icon: {
72 color: text(layer, "sans", "default", { size: "sm" }).color,
73 asset: "icons/minimize_8.svg",
74 dimensions: {
75 width: 12,
76 height: 12,
77 },
78 },
79 container: {
80 margin: { right: 12 },
81 }
82 },
83 plusButton: {
84 icon: {
85 color: text(layer, "sans", "default", { size: "sm" }).color,
86 asset: "icons/plus_12.svg",
87 dimensions: {
88 width: 12,
89 height: 12,
90 },
91 },
92 container: {
93 margin: { right: 12 },
94 }
95 },
96 title: {
97 margin: { left: 12 },
98 ...text(layer, "sans", "default", { size: "sm" })
99 },
100 savedConversation: {
101 container: interactive({
102 base: {
103 background: background(layer, "on"),
104 padding: { top: 4, bottom: 4 }
105 },
106 state: {
107 hovered: {
108 background: background(layer, "on", "hovered"),
109 }
110 },
111 }),
112 savedAt: {
113 margin: { left: 8 },
114 ...text(layer, "sans", "default", { size: "xs" }),
115 },
116 title: {
117 margin: { left: 16 },
118 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
119 }
120 },
121 userSender: {
122 default: {
123 ...text(layer, "sans", "default", {
124 size: "sm",
125 weight: "bold",
126 }),
127 },
128 },
129 assistantSender: {
130 default: {
131 ...text(layer, "sans", "accent", {
132 size: "sm",
133 weight: "bold",
134 }),
135 },
136 },
137 systemSender: {
138 default: {
139 ...text(layer, "sans", "variant", {
140 size: "sm",
141 weight: "bold",
142 }),
143 },
144 },
145 sentAt: {
146 margin: { top: 2, left: 8 },
147 ...text(layer, "sans", "default", { size: "2xs" }),
148 },
149 model: interactive({
150 base: {
151 background: background(layer, "on"),
152 margin: { left: 12, right: 12, top: 12 },
153 padding: 4,
154 cornerRadius: 4,
155 ...text(layer, "sans", "default", { size: "xs" }),
156 },
157 state: {
158 hovered: {
159 background: background(layer, "on", "hovered"),
160 border: border(layer, "on", { overlay: true }),
161 },
162 },
163 }),
164 remainingTokens: {
165 background: background(layer, "on"),
166 margin: { top: 12, right: 12 },
167 padding: 4,
168 cornerRadius: 4,
169 ...text(layer, "sans", "positive", { size: "xs" }),
170 },
171 noRemainingTokens: {
172 background: background(layer, "on"),
173 margin: { top: 12, right: 12 },
174 padding: 4,
175 cornerRadius: 4,
176 ...text(layer, "sans", "negative", { size: "xs" }),
177 },
178 errorIcon: {
179 margin: { left: 8 },
180 color: foreground(layer, "negative"),
181 width: 12,
182 },
183 apiKeyEditor: {
184 background: background(layer, "on"),
185 cornerRadius: 6,
186 text: text(layer, "mono", "on"),
187 placeholderText: text(layer, "mono", "on", "disabled", {
188 size: "xs",
189 }),
190 selection: colorScheme.players[0],
191 border: border(layer, "on"),
192 padding: {
193 bottom: 4,
194 left: 8,
195 right: 8,
196 top: 4,
197 },
198 },
199 apiKeyPrompt: {
200 padding: 10,
201 ...text(layer, "sans", "default", { size: "xs" }),
202 },
203 }
204}