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