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", { size: "sm", weight: "bold" }),
193 }
194 },
195 userSender: {
196 default: {
197 ...text(layer, "sans", "default", {
198 size: "sm",
199 weight: "bold",
200 }),
201 },
202 },
203 assistantSender: {
204 default: {
205 ...text(layer, "sans", "accent", {
206 size: "sm",
207 weight: "bold",
208 }),
209 },
210 },
211 systemSender: {
212 default: {
213 ...text(layer, "sans", "variant", {
214 size: "sm",
215 weight: "bold",
216 }),
217 },
218 },
219 sentAt: {
220 margin: { top: 2, left: 8 },
221 ...text(layer, "sans", "default", { size: "2xs" }),
222 },
223 model: interactive({
224 base: {
225 background: background(layer, "on"),
226 margin: { left: 12, right: 12, top: 12 },
227 padding: 4,
228 cornerRadius: 4,
229 ...text(layer, "sans", "default", { size: "xs" }),
230 },
231 state: {
232 hovered: {
233 background: background(layer, "on", "hovered"),
234 border: border(layer, "on", { overlay: true }),
235 },
236 },
237 }),
238 remainingTokens: {
239 background: background(layer, "on"),
240 margin: { top: 12, right: 24 },
241 padding: 4,
242 cornerRadius: 4,
243 ...text(layer, "sans", "positive", { size: "xs" }),
244 },
245 noRemainingTokens: {
246 background: background(layer, "on"),
247 margin: { top: 12, right: 24 },
248 padding: 4,
249 cornerRadius: 4,
250 ...text(layer, "sans", "negative", { size: "xs" }),
251 },
252 errorIcon: {
253 margin: { left: 8 },
254 color: foreground(layer, "negative"),
255 width: 12,
256 },
257 apiKeyEditor: {
258 background: background(layer, "on"),
259 cornerRadius: 6,
260 text: text(layer, "mono", "on"),
261 placeholderText: text(layer, "mono", "on", "disabled", {
262 size: "xs",
263 }),
264 selection: colorScheme.players[0],
265 border: border(layer, "on"),
266 padding: {
267 bottom: 4,
268 left: 8,
269 right: 8,
270 top: 4,
271 },
272 },
273 apiKeyPrompt: {
274 padding: 10,
275 ...text(layer, "sans", "default", { size: "xs" }),
276 },
277 }
278}