306 lines
12 KiB
TypeScript
306 lines
12 KiB
TypeScript
import { text, border, background, foreground, TextStyle } from "./components"
|
|
import { Interactive, interactive, toggleable } from "../element"
|
|
import { tab_bar_button } from "../component/tab_bar_button"
|
|
import { StyleSets, useTheme } from "../theme"
|
|
|
|
type RoleCycleButton = TextStyle & {
|
|
background?: string
|
|
}
|
|
// TODO: Replace these with zed types
|
|
type RemainingTokens = TextStyle & {
|
|
background: string
|
|
margin: { top: number; right: number }
|
|
padding: {
|
|
right: number
|
|
left: number
|
|
top: number
|
|
bottom: number
|
|
}
|
|
corner_radius: number
|
|
}
|
|
|
|
export default function assistant(): any {
|
|
const theme = useTheme()
|
|
|
|
const interactive_role = (
|
|
color: StyleSets
|
|
): Interactive<RoleCycleButton> => {
|
|
return interactive({
|
|
base: {
|
|
...text(theme.highest, "sans", color, { size: "sm" }),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "sans", color, { size: "sm" }),
|
|
background: background(theme.highest, color, "hovered"),
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "sans", color, { size: "sm" }),
|
|
background: background(theme.highest, color, "pressed"),
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
const tokens_remaining = (color: StyleSets): RemainingTokens => {
|
|
return {
|
|
...text(theme.highest, "mono", color, { size: "xs" }),
|
|
background: background(theme.highest, "on", "default"),
|
|
margin: { top: 12, right: 20 },
|
|
padding: { right: 4, left: 4, top: 1, bottom: 1 },
|
|
corner_radius: 6,
|
|
}
|
|
}
|
|
|
|
return {
|
|
container: {
|
|
background: background(theme.highest),
|
|
padding: { left: 12 },
|
|
},
|
|
inline: {
|
|
background: background(theme.highest),
|
|
margin: { top: 3, bottom: 3 },
|
|
border: border(theme.lowest, "on", {
|
|
top: true,
|
|
bottom: true,
|
|
overlay: true,
|
|
}),
|
|
editor: {
|
|
text: text(theme.highest, "mono", "default", { size: "sm" }),
|
|
placeholder_text: text(theme.highest, "sans", "on", "disabled"),
|
|
selection: theme.players[0],
|
|
},
|
|
disabled_editor: {
|
|
text: text(theme.highest, "mono", "disabled", { size: "sm" }),
|
|
placeholder_text: text(theme.highest, "sans", "on", "disabled"),
|
|
selection: {
|
|
cursor: text(theme.highest, "mono", "disabled").color,
|
|
selection: theme.players[0].selection,
|
|
},
|
|
},
|
|
pending_edit_background: background(theme.highest, "positive"),
|
|
retrieve_context: toggleable({
|
|
base: interactive({
|
|
base: {
|
|
icon_size: 12,
|
|
color: foreground(theme.highest, "variant"),
|
|
|
|
button_width: 12,
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 2,
|
|
border: {
|
|
width: 1., color: background(theme.highest, "on")
|
|
},
|
|
padding: {
|
|
left: 4,
|
|
right: 4,
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "mono", "variant", "hovered"),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
border: {
|
|
width: 1., color: background(theme.highest, "on", "hovered")
|
|
},
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "variant", "pressed"),
|
|
background: background(theme.highest, "on", "pressed"),
|
|
border: {
|
|
width: 1., color: background(theme.highest, "on", "pressed")
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
icon_size: 12,
|
|
button_width: 12,
|
|
color: foreground(theme.highest, "variant"),
|
|
background: background(theme.highest, "accent"),
|
|
border: border(theme.highest, "accent"),
|
|
},
|
|
hovered: {
|
|
background: background(theme.highest, "accent", "hovered"),
|
|
border: border(theme.highest, "accent", "hovered"),
|
|
},
|
|
clicked: {
|
|
background: background(theme.highest, "accent", "pressed"),
|
|
border: border(theme.highest, "accent", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
include_conversation: toggleable({
|
|
base: interactive({
|
|
base: {
|
|
icon_size: 12,
|
|
color: foreground(theme.highest, "variant"),
|
|
|
|
button_width: 12,
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 2,
|
|
border: {
|
|
width: 1., color: background(theme.highest, "on")
|
|
},
|
|
padding: {
|
|
left: 4,
|
|
right: 4,
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "mono", "variant", "hovered"),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
border: {
|
|
width: 1., color: background(theme.highest, "on", "hovered")
|
|
},
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "variant", "pressed"),
|
|
background: background(theme.highest, "on", "pressed"),
|
|
border: {
|
|
width: 1., color: background(theme.highest, "on", "pressed")
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
icon_size: 12,
|
|
button_width: 12,
|
|
color: foreground(theme.highest, "variant"),
|
|
background: background(theme.highest, "accent"),
|
|
border: border(theme.highest, "accent"),
|
|
},
|
|
hovered: {
|
|
background: background(theme.highest, "accent", "hovered"),
|
|
border: border(theme.highest, "accent", "hovered"),
|
|
},
|
|
clicked: {
|
|
background: background(theme.highest, "accent", "pressed"),
|
|
border: border(theme.highest, "accent", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
message_header: {
|
|
margin: { bottom: 4, top: 4 },
|
|
background: background(theme.highest),
|
|
},
|
|
hamburger_button: tab_bar_button(theme, {
|
|
icon: "icons/menu.svg",
|
|
}),
|
|
|
|
split_button: tab_bar_button(theme, {
|
|
icon: "icons/split_message.svg",
|
|
}),
|
|
quote_button: tab_bar_button(theme, {
|
|
icon: "icons/quote.svg",
|
|
}),
|
|
assist_button: tab_bar_button(theme, {
|
|
icon: "icons/magic-wand.svg",
|
|
}),
|
|
zoom_in_button: tab_bar_button(theme, {
|
|
icon: "icons/maximize.svg",
|
|
}),
|
|
zoom_out_button: tab_bar_button(theme, {
|
|
icon: "icons/minimize.svg",
|
|
}),
|
|
plus_button: tab_bar_button(theme, {
|
|
icon: "icons/plus.svg",
|
|
}),
|
|
title: {
|
|
...text(theme.highest, "sans", "default", { size: "xs" }),
|
|
},
|
|
saved_conversation: {
|
|
container: interactive({
|
|
base: {
|
|
background: background(theme.middle),
|
|
padding: { top: 4, bottom: 4 },
|
|
border: border(theme.middle, "default", {
|
|
top: true,
|
|
overlay: true,
|
|
}),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
background: background(theme.middle, "hovered"),
|
|
},
|
|
clicked: {
|
|
background: background(theme.middle, "pressed"),
|
|
},
|
|
},
|
|
}),
|
|
saved_at: {
|
|
margin: { left: 8 },
|
|
...text(theme.highest, "sans", "variant", { size: "xs" }),
|
|
},
|
|
title: {
|
|
margin: { left: 12 },
|
|
...text(theme.highest, "sans", "default", {
|
|
size: "sm",
|
|
weight: "bold",
|
|
}),
|
|
},
|
|
},
|
|
user_sender: interactive_role("base"),
|
|
assistant_sender: interactive_role("accent"),
|
|
system_sender: interactive_role("warning"),
|
|
sent_at: {
|
|
margin: { top: 2, left: 8 },
|
|
...text(theme.highest, "sans", "variant", { size: "2xs" }),
|
|
},
|
|
model: interactive({
|
|
base: {
|
|
background: background(theme.highest),
|
|
margin: { left: 12, right: 4, top: 12 },
|
|
padding: { right: 4, left: 4, top: 1, bottom: 1 },
|
|
corner_radius: 4,
|
|
...text(theme.highest, "sans", "default", { size: "xs" }),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
background: background(theme.highest, "on", "hovered"),
|
|
border: border(theme.highest, "on", { overlay: true }),
|
|
},
|
|
},
|
|
}),
|
|
remaining_tokens: tokens_remaining("positive"),
|
|
low_remaining_tokens: tokens_remaining("warning"),
|
|
no_remaining_tokens: tokens_remaining("negative"),
|
|
error_icon: {
|
|
margin: { left: 8 },
|
|
color: foreground(theme.highest, "negative"),
|
|
width: 12,
|
|
},
|
|
api_key_editor: {
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 4,
|
|
text: text(theme.highest, "mono", "on"),
|
|
placeholder_text: text(theme.highest, "mono", "on", "disabled", {
|
|
size: "xs",
|
|
}),
|
|
selection: theme.players[0],
|
|
border: border(theme.highest, "on"),
|
|
padding: {
|
|
bottom: 4,
|
|
left: 8,
|
|
right: 8,
|
|
top: 4,
|
|
},
|
|
},
|
|
api_key_prompt: {
|
|
padding: 10,
|
|
...text(theme.highest, "sans", "default", { size: "xs" }),
|
|
},
|
|
}
|
|
}
|