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 zoomInButton: {
32 icon: {
33 color: text(layer, "sans", "default", { size: "sm" }).color,
34 asset: "icons/maximize_8.svg",
35 dimensions: {
36 width: 12,
37 height: 12,
38 },
39 },
40 container: {
41 margin: { right: 12 },
42 }
43 },
44 zoomOutButton: {
45 icon: {
46 color: text(layer, "sans", "default", { size: "sm" }).color,
47 asset: "icons/minimize_8.svg",
48 dimensions: {
49 width: 12,
50 height: 12,
51 },
52 },
53 container: {
54 margin: { right: 12 },
55 }
56 },
57 plusButton: {
58 icon: {
59 color: text(layer, "sans", "default", { size: "sm" }).color,
60 asset: "icons/plus_12.svg",
61 dimensions: {
62 width: 12,
63 height: 12,
64 },
65 },
66 container: {
67 margin: { right: 12 },
68 }
69 },
70 title: {
71 margin: { left: 12 },
72 ...text(layer, "sans", "default", { size: "sm" })
73 },
74 savedConversation: {
75 container: interactive({
76 base: {
77 background: background(layer, "on"),
78 },
79 state: {
80 hovered: {
81 background: background(layer, "on", "hovered"),
82 }
83 },
84 }),
85 savedAt: {
86 margin: { left: 8 },
87 ...text(layer, "sans", "default", { size: "xs" }),
88 },
89 title: {
90 margin: { left: 8 },
91 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
92 }
93 },
94 userSender: {
95 default: {
96 ...text(layer, "sans", "default", {
97 size: "sm",
98 weight: "bold",
99 }),
100 },
101 },
102 assistantSender: {
103 default: {
104 ...text(layer, "sans", "accent", {
105 size: "sm",
106 weight: "bold",
107 }),
108 },
109 },
110 systemSender: {
111 default: {
112 ...text(layer, "sans", "variant", {
113 size: "sm",
114 weight: "bold",
115 }),
116 },
117 },
118 sentAt: {
119 margin: { top: 2, left: 8 },
120 ...text(layer, "sans", "default", { size: "2xs" }),
121 },
122 modelInfoContainer: {
123 margin: { right: 16, top: 4 },
124 },
125 model: interactive({
126 base: {
127 background: background(layer, "on"),
128 margin: { right: 8 },
129 padding: 4,
130 cornerRadius: 4,
131 ...text(layer, "sans", "default", { size: "xs" }),
132 },
133 state: {
134 hovered: {
135 background: background(layer, "on", "hovered"),
136 border: border(layer, "on", { overlay: true }),
137 },
138 },
139 }),
140 remainingTokens: {
141 margin: { right: 12 },
142 ...text(layer, "sans", "positive", { size: "xs" }),
143 },
144 noRemainingTokens: {
145 margin: { right: 12 },
146 ...text(layer, "sans", "negative", { size: "xs" }),
147 },
148 errorIcon: {
149 margin: { left: 8 },
150 color: foreground(layer, "negative"),
151 width: 12,
152 },
153 apiKeyEditor: {
154 background: background(layer, "on"),
155 cornerRadius: 6,
156 text: text(layer, "mono", "on"),
157 placeholderText: text(layer, "mono", "on", "disabled", {
158 size: "xs",
159 }),
160 selection: colorScheme.players[0],
161 border: border(layer, "on"),
162 padding: {
163 bottom: 4,
164 left: 8,
165 right: 8,
166 top: 4,
167 },
168 },
169 apiKeyPrompt: {
170 padding: 10,
171 ...text(layer, "sans", "default", { size: "xs" }),
172 },
173 }
174}