1import { text, border, background, foreground, TextStyle } from "./components"
2import { Interactive, interactive } from "../element"
3import { tab_bar_button } from "../component/tab_bar_button"
4import { StyleSets, useTheme } from "../theme"
5
6type RoleCycleButton = TextStyle & {
7 background?: string
8}
9// TODO: Replace these with zed types
10type RemainingTokens = TextStyle & {
11 background: string,
12 margin: { top: number, right: number },
13 padding: {
14 right: number,
15 left: number,
16 top: number,
17 bottom: number,
18 },
19 corner_radius: number,
20}
21
22export default function assistant(): any {
23 const theme = useTheme()
24
25 const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
26 return (
27 interactive({
28 base: {
29 ...text(theme.highest, "sans", color, { size: "sm" }),
30 },
31 state: {
32 hovered: {
33 ...text(theme.highest, "sans", color, { size: "sm" }),
34 background: background(theme.highest, color, "hovered"),
35 },
36 clicked: {
37 ...text(theme.highest, "sans", color, { size: "sm" }),
38 background: background(theme.highest, color, "pressed"),
39 }
40 },
41 })
42 )
43 }
44
45 const tokens_remaining = (color: StyleSets): RemainingTokens => {
46 return (
47 {
48 ...text(theme.highest, "mono", color, { size: "xs" }),
49 background: background(theme.highest, "on", "default"),
50 margin: { top: 12, right: 20 },
51 padding: { right: 4, left: 4, top: 1, bottom: 1 },
52 corner_radius: 6,
53 }
54 )
55 }
56
57 return {
58 container: {
59 background: background(theme.highest),
60 padding: { left: 12 },
61 },
62 modal: {
63 border: border(theme.lowest, "on", {
64 top: true,
65 bottom: true,
66 overlay: true,
67 }),
68 editor: {
69 text: text(theme.lowest, "mono", "on", { size: "sm" }),
70 placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
71 selection: theme.players[0],
72 }
73 },
74 message_header: {
75 margin: { bottom: 4, top: 4 },
76 background: background(theme.highest),
77 },
78 hamburger_button: tab_bar_button(theme, {
79 icon: "icons/hamburger_15.svg",
80 }),
81
82 split_button: tab_bar_button(theme, {
83 icon: "icons/split_message_15.svg",
84 }),
85 quote_button: tab_bar_button(theme, {
86 icon: "icons/radix/quote.svg",
87 }),
88 assist_button: tab_bar_button(theme, {
89 icon: "icons/radix/magic-wand.svg",
90 }),
91 zoom_in_button: tab_bar_button(theme, {
92 icon: "icons/radix/maximize.svg",
93 }),
94 zoom_out_button: tab_bar_button(theme, {
95 icon: "icons/radix/minimize.svg",
96 }),
97 plus_button: tab_bar_button(theme, {
98 icon: "icons/radix/plus.svg",
99 }),
100 title: {
101 ...text(theme.highest, "sans", "default", { size: "xs" }),
102 },
103 saved_conversation: {
104 container: interactive({
105 base: {
106 background: background(theme.middle),
107 padding: { top: 4, bottom: 4 },
108 border: border(theme.middle, "default", { top: true, overlay: true }),
109 },
110 state: {
111 hovered: {
112 background: background(theme.middle, "hovered"),
113 },
114 clicked: {
115 background: background(theme.middle, "pressed"),
116 }
117 },
118 }),
119 saved_at: {
120 margin: { left: 8 },
121 ...text(theme.highest, "sans", "variant", { size: "xs" }),
122 },
123 title: {
124 margin: { left: 12 },
125 ...text(theme.highest, "sans", "default", {
126 size: "sm",
127 weight: "bold",
128 }),
129 },
130 },
131 user_sender: interactive_role("base"),
132 assistant_sender: interactive_role("accent"),
133 system_sender: interactive_role("warning"),
134 sent_at: {
135 margin: { top: 2, left: 8 },
136 ...text(theme.highest, "sans", "variant", { size: "2xs" }),
137 },
138 model: interactive({
139 base: {
140 background: background(theme.highest),
141 margin: { left: 12, right: 4, top: 12 },
142 padding: { right: 4, left: 4, top: 1, bottom: 1 },
143 corner_radius: 4,
144 ...text(theme.highest, "sans", "default", { size: "xs" }),
145 },
146 state: {
147 hovered: {
148 background: background(theme.highest, "on", "hovered"),
149 border: border(theme.highest, "on", { overlay: true }),
150 },
151 },
152 }),
153 remaining_tokens: tokens_remaining("positive"),
154 low_remaining_tokens: tokens_remaining("warning"),
155 no_remaining_tokens: tokens_remaining("negative"),
156 error_icon: {
157 margin: { left: 8 },
158 color: foreground(theme.highest, "negative"),
159 width: 12,
160 },
161 api_key_editor: {
162 background: background(theme.highest, "on"),
163 corner_radius: 4,
164 text: text(theme.highest, "mono", "on"),
165 placeholder_text: text(theme.highest, "mono", "on", "disabled", {
166 size: "xs",
167 }),
168 selection: theme.players[0],
169 border: border(theme.highest, "on"),
170 padding: {
171 bottom: 4,
172 left: 8,
173 right: 8,
174 top: 4,
175 },
176 },
177 api_key_prompt: {
178 padding: 10,
179 ...text(theme.highest, "sans", "default", { size: "xs" }),
180 },
181 }
182}