174 lines
5.2 KiB
TypeScript
174 lines
5.2 KiB
TypeScript
import { ColorScheme } from "../theme/colorScheme"
|
|
import { text, border, background, foreground } from "./components"
|
|
import editor from "./editor"
|
|
import { interactive } from "../element"
|
|
|
|
export default function assistant(colorScheme: ColorScheme) {
|
|
const layer = colorScheme.highest
|
|
return {
|
|
container: {
|
|
background: editor(colorScheme).background,
|
|
padding: { left: 12 },
|
|
},
|
|
messageHeader: {
|
|
border: border(layer, "default", { bottom: true, top: true }),
|
|
margin: { bottom: 6, top: 6 },
|
|
background: editor(colorScheme).background,
|
|
},
|
|
hamburgerButton: {
|
|
icon: {
|
|
color: text(layer, "sans", "default", { size: "sm" }).color,
|
|
asset: "icons/hamburger_15.svg",
|
|
dimensions: {
|
|
width: 15,
|
|
height: 15,
|
|
},
|
|
},
|
|
container: {
|
|
margin: { left: 12 },
|
|
}
|
|
},
|
|
zoomInButton: {
|
|
icon: {
|
|
color: text(layer, "sans", "default", { size: "sm" }).color,
|
|
asset: "icons/maximize_8.svg",
|
|
dimensions: {
|
|
width: 12,
|
|
height: 12,
|
|
},
|
|
},
|
|
container: {
|
|
margin: { right: 12 },
|
|
}
|
|
},
|
|
zoomOutButton: {
|
|
icon: {
|
|
color: text(layer, "sans", "default", { size: "sm" }).color,
|
|
asset: "icons/minimize_8.svg",
|
|
dimensions: {
|
|
width: 12,
|
|
height: 12,
|
|
},
|
|
},
|
|
container: {
|
|
margin: { right: 12 },
|
|
}
|
|
},
|
|
plusButton: {
|
|
icon: {
|
|
color: text(layer, "sans", "default", { size: "sm" }).color,
|
|
asset: "icons/plus_12.svg",
|
|
dimensions: {
|
|
width: 12,
|
|
height: 12,
|
|
},
|
|
},
|
|
container: {
|
|
margin: { right: 12 },
|
|
}
|
|
},
|
|
title: {
|
|
margin: { left: 12 },
|
|
...text(layer, "sans", "default", { size: "sm" })
|
|
},
|
|
savedConversation: {
|
|
container: interactive({
|
|
base: {
|
|
background: background(layer, "on"),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
background: background(layer, "on", "hovered"),
|
|
}
|
|
},
|
|
}),
|
|
savedAt: {
|
|
margin: { left: 8 },
|
|
...text(layer, "sans", "default", { size: "xs" }),
|
|
},
|
|
title: {
|
|
margin: { left: 8 },
|
|
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
|
|
}
|
|
},
|
|
userSender: {
|
|
default: {
|
|
...text(layer, "sans", "default", {
|
|
size: "sm",
|
|
weight: "bold",
|
|
}),
|
|
},
|
|
},
|
|
assistantSender: {
|
|
default: {
|
|
...text(layer, "sans", "accent", {
|
|
size: "sm",
|
|
weight: "bold",
|
|
}),
|
|
},
|
|
},
|
|
systemSender: {
|
|
default: {
|
|
...text(layer, "sans", "variant", {
|
|
size: "sm",
|
|
weight: "bold",
|
|
}),
|
|
},
|
|
},
|
|
sentAt: {
|
|
margin: { top: 2, left: 8 },
|
|
...text(layer, "sans", "default", { size: "2xs" }),
|
|
},
|
|
modelInfoContainer: {
|
|
margin: { right: 16, top: 4 },
|
|
},
|
|
model: interactive({
|
|
base: {
|
|
background: background(layer, "on"),
|
|
margin: { right: 8 },
|
|
padding: 4,
|
|
cornerRadius: 4,
|
|
...text(layer, "sans", "default", { size: "xs" }),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
background: background(layer, "on", "hovered"),
|
|
border: border(layer, "on", { overlay: true }),
|
|
},
|
|
},
|
|
}),
|
|
remainingTokens: {
|
|
margin: { right: 12 },
|
|
...text(layer, "sans", "positive", { size: "xs" }),
|
|
},
|
|
noRemainingTokens: {
|
|
margin: { right: 12 },
|
|
...text(layer, "sans", "negative", { size: "xs" }),
|
|
},
|
|
errorIcon: {
|
|
margin: { left: 8 },
|
|
color: foreground(layer, "negative"),
|
|
width: 12,
|
|
},
|
|
apiKeyEditor: {
|
|
background: background(layer, "on"),
|
|
cornerRadius: 6,
|
|
text: text(layer, "mono", "on"),
|
|
placeholderText: text(layer, "mono", "on", "disabled", {
|
|
size: "xs",
|
|
}),
|
|
selection: colorScheme.players[0],
|
|
border: border(layer, "on"),
|
|
padding: {
|
|
bottom: 4,
|
|
left: 8,
|
|
right: 8,
|
|
top: 4,
|
|
},
|
|
},
|
|
apiKeyPrompt: {
|
|
padding: 10,
|
|
...text(layer, "sans", "default", { size: "xs" }),
|
|
},
|
|
}
|
|
}
|