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: 8 },
28 }
29 },
30 plusButton: {
31 icon: {
32 color: text(layer, "sans", "default", { size: "sm" }).color,
33 asset: "icons/plus_12.svg",
34 dimensions: {
35 width: 12,
36 height: 12,
37 },
38 },
39 container: {
40 margin: { right: 8 },
41 }
42 },
43 title: {
44 margin: { left: 8 },
45 ...text(layer, "sans", "default", { size: "sm" })
46 },
47 savedConversation: {
48 background: background(layer, "on"),
49 hover: {
50 background: background(layer, "on", "hovered"),
51 },
52 savedAt: {
53 margin: { left: 8 },
54 ...text(layer, "sans", "default", { size: "xs" }),
55 },
56 title: {
57 margin: { left: 8 },
58 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
59 }
60 },
61 userSender: {
62 ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
63 },
64 assistantSender: {
65 ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
66 },
67 systemSender: {
68 ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
69 },
70 sentAt: {
71 margin: { top: 2, left: 8 },
72 ...text(layer, "sans", "default", { size: "2xs" }),
73 },
74 modelInfoContainer: {
75 margin: { right: 16, top: 4 },
76 },
77 model: {
78 background: background(layer, "on"),
79 border: border(layer, "on", { overlay: true }),
80 padding: 4,
81 cornerRadius: 4,
82 ...text(layer, "sans", "default", { size: "xs" }),
83 hover: {
84 background: background(layer, "on", "hovered"),
85 },
86 },
87 remainingTokens: {
88 background: background(layer, "on"),
89 border: border(layer, "on", { overlay: true }),
90 padding: 4,
91 margin: { left: 4 },
92 cornerRadius: 4,
93 ...text(layer, "sans", "positive", { size: "xs" }),
94 },
95 noRemainingTokens: {
96 background: background(layer, "on"),
97 border: border(layer, "on", { overlay: true }),
98 padding: 4,
99 margin: { left: 4 },
100 cornerRadius: 4,
101 ...text(layer, "sans", "negative", { size: "xs" }),
102 },
103 errorIcon: {
104 margin: { left: 8 },
105 color: foreground(layer, "negative"),
106 width: 12,
107 },
108 apiKeyEditor: {
109 background: background(layer, "on"),
110 cornerRadius: 6,
111 text: text(layer, "mono", "on"),
112 placeholderText: text(layer, "mono", "on", "disabled", {
113 size: "xs",
114 }),
115 selection: colorScheme.players[0],
116 border: border(layer, "on"),
117 padding: {
118 bottom: 4,
119 left: 8,
120 right: 8,
121 top: 4,
122 },
123 },
124 apiKeyPrompt: {
125 padding: 10,
126 ...text(layer, "sans", "default", { size: "xs" }),
127 },
128 }
129}