1import { ColorScheme } from "../theme/colorScheme"
  2import { text, border, background, foreground } from "./components"
  3import editor from "./editor"
  4import { interactive } from "../element"
  5
  6export default function assistant(colorScheme: ColorScheme) {
  7    const layer = colorScheme.highest
  8    return {
  9        container: {
 10            background: editor(colorScheme).background,
 11            padding: { left: 12 },
 12        },
 13        header: {
 14            border: border(layer, "default", { bottom: true, top: true }),
 15            margin: { bottom: 6, top: 6 },
 16            background: editor(colorScheme).background,
 17        },
 18        userSender: {
 19            default: {
 20                ...text(layer, "sans", "default", {
 21                    size: "sm",
 22                    weight: "bold",
 23                }),
 24            },
 25        },
 26        assistantSender: {
 27            default: {
 28                ...text(layer, "sans", "accent", {
 29                    size: "sm",
 30                    weight: "bold",
 31                }),
 32            },
 33        },
 34        systemSender: {
 35            default: {
 36                ...text(layer, "sans", "variant", {
 37                    size: "sm",
 38                    weight: "bold",
 39                }),
 40            },
 41        },
 42        sentAt: {
 43            margin: { top: 2, left: 8 },
 44            ...text(layer, "sans", "default", { size: "2xs" }),
 45        },
 46        modelInfoContainer: {
 47            margin: { right: 16, top: 4 },
 48        },
 49        model: interactive({
 50            base: {
 51                background: background(layer, "on"),
 52                border: border(layer, "on", { overlay: true }),
 53                padding: 4,
 54                cornerRadius: 4,
 55                ...text(layer, "sans", "default", { size: "xs" }),
 56            },
 57            state: {
 58                hovered: {
 59                    background: background(layer, "on", "hovered"),
 60                },
 61            },
 62        }),
 63        remainingTokens: {
 64            background: background(layer, "on"),
 65            border: border(layer, "on", { overlay: true }),
 66            padding: 4,
 67            margin: { left: 4 },
 68            cornerRadius: 4,
 69            ...text(layer, "sans", "positive", { size: "xs" }),
 70        },
 71        noRemainingTokens: {
 72            background: background(layer, "on"),
 73            border: border(layer, "on", { overlay: true }),
 74            padding: 4,
 75            margin: { left: 4 },
 76            cornerRadius: 4,
 77            ...text(layer, "sans", "negative", { size: "xs" }),
 78        },
 79        errorIcon: {
 80            margin: { left: 8 },
 81            color: foreground(layer, "negative"),
 82            width: 12,
 83        },
 84        apiKeyEditor: {
 85            background: background(layer, "on"),
 86            cornerRadius: 6,
 87            text: text(layer, "mono", "on"),
 88            placeholderText: text(layer, "mono", "on", "disabled", {
 89                size: "xs",
 90            }),
 91            selection: colorScheme.players[0],
 92            border: border(layer, "on"),
 93            padding: {
 94                bottom: 4,
 95                left: 8,
 96                right: 8,
 97                top: 4,
 98            },
 99        },
100        apiKeyPrompt: {
101            padding: 10,
102            ...text(layer, "sans", "default", { size: "xs" }),
103        },
104    }
105}