1import { ColorScheme } from "../theme/colorScheme"
2import { text, border, background, foreground } from "./components"
3import editor from "./editor"
4
5export default function assistant(colorScheme: ColorScheme) {
6 const layer = colorScheme.highest
7 return {
8 container: {
9 background: editor(colorScheme).background,
10 padding: { left: 12 },
11 },
12 messageHeader: {
13 border: border(layer, "default", { bottom: true, top: true }),
14 margin: { bottom: 6, top: 6 },
15 background: editor(colorScheme).background,
16 },
17 hamburgerButton: {
18 icon: {
19 color: text(layer, "sans", "default", { size: "sm" }).color,
20 asset: "icons/hamburger_15.svg",
21 dimensions: {
22 width: 15,
23 height: 15,
24 },
25 },
26 container: {
27 margin: { left: 12 },
28 }
29 },
30 zoomInButton: {
31 icon: {
32 color: text(layer, "sans", "default", { size: "sm" }).color,
33 asset: "icons/maximize_8.svg",
34 dimensions: {
35 width: 12,
36 height: 12,
37 },
38 },
39 container: {
40 margin: { right: 12 },
41 }
42 },
43 zoomOutButton: {
44 icon: {
45 color: text(layer, "sans", "default", { size: "sm" }).color,
46 asset: "icons/minimize_8.svg",
47 dimensions: {
48 width: 12,
49 height: 12,
50 },
51 },
52 container: {
53 margin: { right: 12 },
54 }
55 },
56 plusButton: {
57 icon: {
58 color: text(layer, "sans", "default", { size: "sm" }).color,
59 asset: "icons/plus_12.svg",
60 dimensions: {
61 width: 12,
62 height: 12,
63 },
64 },
65 container: {
66 margin: { right: 12 },
67 }
68 },
69 title: {
70 margin: { left: 12 },
71 ...text(layer, "sans", "default", { size: "sm" })
72 },
73 savedConversation: {
74 background: background(layer, "on"),
75 hover: {
76 background: background(layer, "on", "hovered"),
77 },
78 savedAt: {
79 margin: { left: 8 },
80 ...text(layer, "sans", "default", { size: "xs" }),
81 },
82 title: {
83 margin: { left: 8 },
84 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
85 }
86 },
87 userSender: {
88 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
89 },
90 assistantSender: {
91 ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
92 },
93 systemSender: {
94 ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
95 },
96 sentAt: {
97 margin: { top: 2, left: 8 },
98 ...text(layer, "sans", "default", { size: "2xs" }),
99 },
100 modelInfoContainer: {
101 margin: { right: 16, top: 4 },
102 },
103 model: {
104 background: background(layer, "on"),
105 margin: { right: 8 },
106 padding: 4,
107 cornerRadius: 4,
108 ...text(layer, "sans", "default", { size: "xs" }),
109 hover: {
110 background: background(layer, "on", "hovered"),
111 border: border(layer, "on", { overlay: true }),
112 },
113 },
114 remainingTokens: {
115 margin: { right: 12 },
116 ...text(layer, "sans", "positive", { size: "xs" }),
117 },
118 noRemainingTokens: {
119 margin: { right: 12 },
120 ...text(layer, "sans", "negative", { size: "xs" }),
121 },
122 errorIcon: {
123 margin: { left: 8 },
124 color: foreground(layer, "negative"),
125 width: 12,
126 },
127 apiKeyEditor: {
128 background: background(layer, "on"),
129 cornerRadius: 6,
130 text: text(layer, "mono", "on"),
131 placeholderText: text(layer, "mono", "on", "disabled", {
132 size: "xs",
133 }),
134 selection: colorScheme.players[0],
135 border: border(layer, "on"),
136 padding: {
137 bottom: 4,
138 left: 8,
139 right: 8,
140 top: 4,
141 },
142 },
143 apiKeyPrompt: {
144 padding: 10,
145 ...text(layer, "sans", "default", { size: "xs" }),
146 },
147 }
148}