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