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 message_header: {
63 margin: { bottom: 4, top: 4 },
64 background: background(theme.highest),
65 },
66 hamburger_button: tab_bar_button(theme, {
67 icon: "icons/hamburger_15.svg",
68 }),
69
70 split_button: tab_bar_button(theme, {
71 icon: "icons/split_message_15.svg",
72 }),
73 quote_button: tab_bar_button(theme, {
74 icon: "icons/radix/quote.svg",
75 }),
76 assist_button: tab_bar_button(theme, {
77 icon: "icons/radix/magic-wand.svg",
78 }),
79 zoom_in_button: tab_bar_button(theme, {
80 icon: "icons/radix/maximize.svg",
81 }),
82 zoom_out_button: tab_bar_button(theme, {
83 icon: "icons/radix/minimize.svg",
84 }),
85 plus_button: tab_bar_button(theme, {
86 icon: "icons/radix/plus.svg",
87 }),
88 title: {
89 ...text(theme.highest, "sans", "default", { size: "xs" }),
90 },
91 saved_conversation: {
92 container: interactive({
93 base: {
94 background: background(theme.middle),
95 padding: { top: 4, bottom: 4 },
96 border: border(theme.middle, "default", { top: true, overlay: true }),
97 },
98 state: {
99 hovered: {
100 background: background(theme.middle, "hovered"),
101 },
102 clicked: {
103 background: background(theme.middle, "pressed"),
104 }
105 },
106 }),
107 saved_at: {
108 margin: { left: 8 },
109 ...text(theme.highest, "sans", "variant", { size: "xs" }),
110 },
111 title: {
112 margin: { left: 12 },
113 ...text(theme.highest, "sans", "default", {
114 size: "sm",
115 weight: "bold",
116 }),
117 },
118 },
119 user_sender: interactive_role("base"),
120 assistant_sender: interactive_role("accent"),
121 system_sender: interactive_role("warning"),
122 sent_at: {
123 margin: { top: 2, left: 8 },
124 ...text(theme.highest, "sans", "variant", { size: "2xs" }),
125 },
126 model: interactive({
127 base: {
128 background: background(theme.highest),
129 margin: { left: 12, right: 4, top: 12 },
130 padding: { right: 4, left: 4, top: 1, bottom: 1 },
131 corner_radius: 4,
132 ...text(theme.highest, "sans", "default", { size: "xs" }),
133 },
134 state: {
135 hovered: {
136 background: background(theme.highest, "on", "hovered"),
137 border: border(theme.highest, "on", { overlay: true }),
138 },
139 },
140 }),
141 remaining_tokens: tokens_remaining("positive"),
142 low_remaining_tokens: tokens_remaining("warning"),
143 no_remaining_tokens: tokens_remaining("negative"),
144 error_icon: {
145 margin: { left: 8 },
146 color: foreground(theme.highest, "negative"),
147 width: 12,
148 },
149 api_key_editor: {
150 background: background(theme.highest, "on"),
151 corner_radius: 4,
152 text: text(theme.highest, "mono", "on"),
153 placeholder_text: text(theme.highest, "mono", "on", "disabled", {
154 size: "xs",
155 }),
156 selection: theme.players[0],
157 border: border(theme.highest, "on"),
158 padding: {
159 bottom: 4,
160 left: 8,
161 right: 8,
162 top: 4,
163 },
164 },
165 api_key_prompt: {
166 padding: 10,
167 ...text(theme.highest, "sans", "default", { size: "xs" }),
168 },
169 }
170}