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