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 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: 12 },
41 }
42 },
43 title: {
44 margin: { left: 12 },
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 margin: { right: 8 },
80 padding: 4,
81 cornerRadius: 4,
82 ...text(layer, "sans", "default", { size: "xs" }),
83 hover: {
84 background: background(layer, "on", "hovered"),
85 border: border(layer, "on", { overlay: true }),
86 },
87 },
88 remainingTokens: {
89 margin: { right: 12 },
90 ...text(layer, "sans", "positive", { size: "xs" }),
91 },
92 noRemainingTokens: {
93 margin: { right: 12 },
94 ...text(layer, "sans", "negative", { size: "xs" }),
95 },
96 errorIcon: {
97 margin: { left: 8 },
98 color: foreground(layer, "negative"),
99 width: 12,
100 },
101 apiKeyEditor: {
102 background: background(layer, "on"),
103 cornerRadius: 6,
104 text: text(layer, "mono", "on"),
105 placeholderText: text(layer, "mono", "on", "disabled", {
106 size: "xs",
107 }),
108 selection: colorScheme.players[0],
109 border: border(layer, "on"),
110 padding: {
111 bottom: 4,
112 left: 8,
113 right: 8,
114 top: 4,
115 },
116 },
117 apiKeyPrompt: {
118 padding: 10,
119 ...text(layer, "sans", "default", { size: "xs" }),
120 },
121 }
122}