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