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 padding: { top: 4, bottom: 4 }
79 },
80 state: {
81 hovered: {
82 background: background(layer, "on", "hovered"),
83 }
84 },
85 }),
86 savedAt: {
87 margin: { left: 8 },
88 ...text(layer, "sans", "default", { size: "xs" }),
89 },
90 title: {
91 margin: { left: 16 },
92 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
93 }
94 },
95 userSender: {
96 default: {
97 ...text(layer, "sans", "default", {
98 size: "sm",
99 weight: "bold",
100 }),
101 },
102 },
103 assistantSender: {
104 default: {
105 ...text(layer, "sans", "accent", {
106 size: "sm",
107 weight: "bold",
108 }),
109 },
110 },
111 systemSender: {
112 default: {
113 ...text(layer, "sans", "variant", {
114 size: "sm",
115 weight: "bold",
116 }),
117 },
118 },
119 sentAt: {
120 margin: { top: 2, left: 8 },
121 ...text(layer, "sans", "default", { size: "2xs" }),
122 },
123 modelInfoContainer: {
124 margin: { right: 16, top: 4 },
125 },
126 model: interactive({
127 base: {
128 background: background(layer, "on"),
129 margin: { right: 8 },
130 padding: 4,
131 cornerRadius: 4,
132 ...text(layer, "sans", "default", { size: "xs" }),
133 },
134 state: {
135 hovered: {
136 background: background(layer, "on", "hovered"),
137 border: border(layer, "on", { overlay: true }),
138 },
139 },
140 }),
141 remainingTokens: {
142 margin: { right: 12 },
143 ...text(layer, "sans", "positive", { size: "xs" }),
144 },
145 noRemainingTokens: {
146 margin: { right: 12 },
147 ...text(layer, "sans", "negative", { size: "xs" }),
148 },
149 errorIcon: {
150 margin: { left: 8 },
151 color: foreground(layer, "negative"),
152 width: 12,
153 },
154 apiKeyEditor: {
155 background: background(layer, "on"),
156 cornerRadius: 6,
157 text: text(layer, "mono", "on"),
158 placeholderText: text(layer, "mono", "on", "disabled", {
159 size: "xs",
160 }),
161 selection: colorScheme.players[0],
162 border: border(layer, "on"),
163 padding: {
164 bottom: 4,
165 left: 8,
166 right: 8,
167 top: 4,
168 },
169 },
170 apiKeyPrompt: {
171 padding: 10,
172 ...text(layer, "sans", "default", { size: "xs" }),
173 },
174 }
175}