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 margin: { bottom: 6, top: 6 },
15 background: editor(colorScheme).background,
16 },
17 hamburgerButton: interactive({
18 base: {
19 icon: {
20 color: foreground(layer, "variant"),
21 asset: "icons/hamburger_15.svg",
22 dimensions: {
23 width: 15,
24 height: 15,
25 },
26 },
27 container: {
28 padding: { left: 12, right: 8.5 },
29 },
30 },
31 state: {
32 hovered: {
33 icon: {
34 color: foreground(layer, "hovered"),
35 },
36 },
37 },
38 }),
39 splitButton: interactive({
40 base: {
41 icon: {
42 color: foreground(layer, "variant"),
43 asset: "icons/split_message_15.svg",
44 dimensions: {
45 width: 15,
46 height: 15,
47 },
48 },
49 container: {
50 padding: { left: 8.5, right: 8.5 },
51 },
52 },
53 state: {
54 hovered: {
55 icon: {
56 color: foreground(layer, "hovered"),
57 },
58 },
59 },
60 }),
61 quoteButton: interactive({
62 base: {
63 icon: {
64 color: foreground(layer, "variant"),
65 asset: "icons/quote_15.svg",
66 dimensions: {
67 width: 15,
68 height: 15,
69 },
70 },
71 container: {
72 padding: { left: 8.5, right: 8.5 },
73 },
74 },
75 state: {
76 hovered: {
77 icon: {
78 color: foreground(layer, "hovered"),
79 },
80 },
81 },
82 }),
83 assistButton: interactive({
84 base: {
85 icon: {
86 color: foreground(layer, "variant"),
87 asset: "icons/assist_15.svg",
88 dimensions: {
89 width: 15,
90 height: 15,
91 },
92 },
93 container: {
94 padding: { left: 8.5, right: 8.5 },
95 },
96 },
97 state: {
98 hovered: {
99 icon: {
100 color: foreground(layer, "hovered"),
101 },
102 },
103 },
104 }),
105 zoomInButton: interactive({
106 base: {
107 icon: {
108 color: foreground(layer, "variant"),
109 asset: "icons/maximize_8.svg",
110 dimensions: {
111 width: 12,
112 height: 12,
113 },
114 },
115 container: {
116 padding: { left: 10, right: 10 },
117 },
118 },
119 state: {
120 hovered: {
121 icon: {
122 color: foreground(layer, "hovered"),
123 },
124 },
125 },
126 }),
127 zoomOutButton: interactive({
128 base: {
129 icon: {
130 color: foreground(layer, "variant"),
131 asset: "icons/minimize_8.svg",
132 dimensions: {
133 width: 12,
134 height: 12,
135 },
136 },
137 container: {
138 padding: { left: 10, right: 10 },
139 },
140 },
141 state: {
142 hovered: {
143 icon: {
144 color: foreground(layer, "hovered"),
145 },
146 },
147 },
148 }),
149 plusButton: interactive({
150 base: {
151 icon: {
152 color: foreground(layer, "variant"),
153 asset: "icons/plus_12.svg",
154 dimensions: {
155 width: 12,
156 height: 12,
157 },
158 },
159 container: {
160 padding: { left: 10, right: 10 },
161 },
162 },
163 state: {
164 hovered: {
165 icon: {
166 color: foreground(layer, "hovered"),
167 },
168 },
169 },
170 }),
171 title: {
172 ...text(layer, "sans", "default", { size: "sm" }),
173 },
174 savedConversation: {
175 container: interactive({
176 base: {
177 background: background(layer, "on"),
178 padding: { top: 4, bottom: 4 },
179 },
180 state: {
181 hovered: {
182 background: background(layer, "on", "hovered"),
183 },
184 },
185 }),
186 savedAt: {
187 margin: { left: 8 },
188 ...text(layer, "sans", "default", { size: "xs" }),
189 },
190 title: {
191 margin: { left: 16 },
192 ...text(layer, "sans", "default", {
193 size: "sm",
194 weight: "bold",
195 }),
196 },
197 },
198 userSender: {
199 default: {
200 ...text(layer, "sans", "default", {
201 size: "sm",
202 weight: "bold",
203 }),
204 },
205 },
206 assistantSender: {
207 default: {
208 ...text(layer, "sans", "accent", {
209 size: "sm",
210 weight: "bold",
211 }),
212 },
213 },
214 systemSender: {
215 default: {
216 ...text(layer, "sans", "variant", {
217 size: "sm",
218 weight: "bold",
219 }),
220 },
221 },
222 sentAt: {
223 margin: { top: 2, left: 8 },
224 ...text(layer, "sans", "default", { size: "2xs" }),
225 },
226 model: interactive({
227 base: {
228 background: background(layer, "on"),
229 margin: { left: 12, right: 12, top: 12 },
230 padding: 4,
231 cornerRadius: 4,
232 ...text(layer, "sans", "default", { size: "xs" }),
233 },
234 state: {
235 hovered: {
236 background: background(layer, "on", "hovered"),
237 border: border(layer, "on", { overlay: true }),
238 },
239 },
240 }),
241 remainingTokens: {
242 background: background(layer, "on"),
243 margin: { top: 12, right: 24 },
244 padding: 4,
245 cornerRadius: 4,
246 ...text(layer, "sans", "positive", { size: "xs" }),
247 },
248 noRemainingTokens: {
249 background: background(layer, "on"),
250 margin: { top: 12, right: 24 },
251 padding: 4,
252 cornerRadius: 4,
253 ...text(layer, "sans", "negative", { size: "xs" }),
254 },
255 errorIcon: {
256 margin: { left: 8 },
257 color: foreground(layer, "negative"),
258 width: 12,
259 },
260 apiKeyEditor: {
261 background: background(layer, "on"),
262 cornerRadius: 6,
263 text: text(layer, "mono", "on"),
264 placeholderText: text(layer, "mono", "on", "disabled", {
265 size: "xs",
266 }),
267 selection: colorScheme.players[0],
268 border: border(layer, "on"),
269 padding: {
270 bottom: 4,
271 left: 8,
272 right: 8,
273 top: 4,
274 },
275 },
276 apiKeyPrompt: {
277 padding: 10,
278 ...text(layer, "sans", "default", { size: "xs" }),
279 },
280 }
281}