e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
459 lines
13 KiB
TypeScript
459 lines
13 KiB
TypeScript
import type { Preset, BuilderConfig, ThemeColor } from "./types";
|
|
|
|
// Helper to create a ThemeColor
|
|
const color = (light: string, dark: string): ThemeColor => ({ light, dark });
|
|
|
|
export const PRESETS: Preset[] = [
|
|
{
|
|
id: "default",
|
|
name: "Default",
|
|
description: "Clean, modern design with all features enabled",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: true,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: false,
|
|
feedback: false,
|
|
},
|
|
threadWelcome: true,
|
|
suggestions: true,
|
|
scrollToBottom: true,
|
|
markdown: true,
|
|
codeHighlightTheme: "vitesse",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: false,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "light",
|
|
colors: {
|
|
accent: color("#0ea5e9", "#0ea5e9"),
|
|
},
|
|
borderRadius: "lg",
|
|
maxWidth: "44rem",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "comfortable",
|
|
userMessagePosition: "right",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "chatgpt",
|
|
name: "ChatGPT",
|
|
description: "Dark theme inspired by ChatGPT's interface",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: true,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: false,
|
|
feedback: true,
|
|
},
|
|
threadWelcome: true,
|
|
suggestions: false,
|
|
scrollToBottom: false,
|
|
markdown: true,
|
|
codeHighlightTheme: "github",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: true,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "dark",
|
|
colors: {
|
|
accent: color("#10a37f", "#ffffff"),
|
|
background: color("#ffffff", "#212121"),
|
|
foreground: color("#0d0d0d", "#ececec"),
|
|
mutedForeground: color("#6e6e6e", "#9b9b9b"),
|
|
border: color("#e5e5e5", "#424242"),
|
|
userMessage: color("#f7f7f8", "#2f2f2f"),
|
|
composer: color("#f7f7f8", "#2f2f2f"),
|
|
userAvatar: color("#10a37f", "#19c37d"),
|
|
assistantAvatar: color("#000000", "#ab68ff"),
|
|
},
|
|
borderRadius: "full",
|
|
maxWidth: "48rem",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "comfortable",
|
|
userMessagePosition: "right",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "claude",
|
|
name: "Claude",
|
|
description: "Warm, elegant design inspired by Claude's interface",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: false,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: false,
|
|
feedback: true,
|
|
},
|
|
threadWelcome: false,
|
|
suggestions: false,
|
|
scrollToBottom: false,
|
|
markdown: true,
|
|
codeHighlightTheme: "vitesse",
|
|
reasoning: true,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: true,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "light",
|
|
colors: {
|
|
accent: color("#c96442", "#d4a27a"),
|
|
background: color("#faf9f5", "#2b2a27"),
|
|
foreground: color("#3d3929", "#e8e4d9"),
|
|
mutedForeground: color("#8b8579", "#9b9589"),
|
|
border: color("#e5e0d5", "#3d3b36"),
|
|
userMessage: color("#f5f0e6", "#3d3b36"),
|
|
composer: color("#ffffff", "#1f1e1b"),
|
|
userAvatar: color("#c96442", "#d4a27a"),
|
|
assistantAvatar: color("#c96442", "#d4a27a"),
|
|
suggestion: color("#faf8f5", "#3d3b36"),
|
|
suggestionBorder: color("#e5e0d5", "#4d4b46"),
|
|
},
|
|
borderRadius: "lg",
|
|
maxWidth: "48rem",
|
|
fontFamily: "Georgia, serif",
|
|
fontSize: "14px",
|
|
messageSpacing: "spacious",
|
|
userMessagePosition: "right",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "perplexity",
|
|
name: "Perplexity",
|
|
description: "Search-focused design with prominent answers",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: true,
|
|
editMessage: false,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: false,
|
|
feedback: false,
|
|
},
|
|
threadWelcome: true,
|
|
suggestions: false,
|
|
scrollToBottom: true,
|
|
markdown: true,
|
|
codeHighlightTheme: "tokyo-night",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: true,
|
|
avatar: false,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "dark",
|
|
colors: {
|
|
accent: color("#20b8cd", "#22d3ee"),
|
|
background: color("#ffffff", "#0f172a"),
|
|
foreground: color("#1e293b", "#e2e8f0"),
|
|
mutedForeground: color("#64748b", "#94a3b8"),
|
|
border: color("#e2e8f0", "#334155"),
|
|
userMessage: color("#f1f5f9", "#1e293b"),
|
|
composer: color("#f8fafc", "#1e293b"),
|
|
},
|
|
borderRadius: "lg",
|
|
maxWidth: "42rem",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "comfortable",
|
|
userMessagePosition: "left",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "minimal",
|
|
name: "Minimal",
|
|
description: "Stripped-down interface with only essential features",
|
|
config: {
|
|
components: {
|
|
attachments: false,
|
|
branchPicker: false,
|
|
editMessage: false,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: false,
|
|
speak: false,
|
|
feedback: false,
|
|
},
|
|
threadWelcome: false,
|
|
suggestions: false,
|
|
scrollToBottom: false,
|
|
markdown: true,
|
|
codeHighlightTheme: "none",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: false,
|
|
typingIndicator: "none",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "light",
|
|
colors: {
|
|
accent: color("#171717", "#fafafa"),
|
|
},
|
|
borderRadius: "md",
|
|
maxWidth: "40rem",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "compact",
|
|
userMessagePosition: "right",
|
|
animations: false,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "gemini",
|
|
name: "Gemini",
|
|
description: "Google's Gemini-inspired clean interface",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: false,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: true,
|
|
feedback: true,
|
|
},
|
|
threadWelcome: true,
|
|
suggestions: true,
|
|
scrollToBottom: true,
|
|
markdown: true,
|
|
codeHighlightTheme: "vitesse",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: true,
|
|
avatar: false,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "light",
|
|
colors: {
|
|
accent: color("#1a73e8", "#8ab4f8"),
|
|
background: color("#ffffff", "#1f1f1f"),
|
|
foreground: color("#1f1f1f", "#e3e3e3"),
|
|
mutedForeground: color("#5f6368", "#9aa0a6"),
|
|
border: color("#e8eaed", "#3c4043"),
|
|
userMessage: color("#e8f0fe", "#303134"),
|
|
composer: color("#ffffff", "#303134"),
|
|
suggestion: color("#f8f9fa", "#303134"),
|
|
suggestionBorder: color("#dadce0", "#5f6368"),
|
|
},
|
|
borderRadius: "full",
|
|
maxWidth: "44rem",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "comfortable",
|
|
userMessagePosition: "right",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "copilot",
|
|
name: "Copilot",
|
|
description: "GitHub Copilot inspired developer chat",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: true,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: false,
|
|
feedback: true,
|
|
},
|
|
threadWelcome: true,
|
|
suggestions: true,
|
|
scrollToBottom: true,
|
|
markdown: true,
|
|
codeHighlightTheme: "one-dark-pro",
|
|
reasoning: true,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: true,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "dark",
|
|
colors: {
|
|
accent: color("#8b5cf6", "#8b5cf6"),
|
|
background: color("#ffffff", "#0d1117"),
|
|
foreground: color("#1f2328", "#e6edf3"),
|
|
mutedForeground: color("#656d76", "#7d8590"),
|
|
border: color("#d0d7de", "#30363d"),
|
|
userMessage: color("#f6f8fa", "#161b22"),
|
|
composer: color("#f6f8fa", "#161b22"),
|
|
userAvatar: color("#1a7f37", "#238636"),
|
|
assistantAvatar: color("#8b5cf6", "#8b5cf6"),
|
|
suggestion: color("#f6f8fa", "#161b22"),
|
|
suggestionBorder: color("#d0d7de", "#30363d"),
|
|
},
|
|
borderRadius: "lg",
|
|
maxWidth: "56rem",
|
|
fontFamily: "ui-monospace, monospace",
|
|
fontSize: "13px",
|
|
messageSpacing: "compact",
|
|
userMessagePosition: "right",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "slack",
|
|
name: "Slack",
|
|
description: "Team chat inspired collaborative interface",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: false,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: false,
|
|
speak: false,
|
|
feedback: true,
|
|
},
|
|
threadWelcome: false,
|
|
suggestions: false,
|
|
scrollToBottom: true,
|
|
markdown: true,
|
|
codeHighlightTheme: "vitesse",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: true,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "light",
|
|
colors: {
|
|
accent: color("#007a5a", "#2eb67d"),
|
|
background: color("#ffffff", "#1a1d21"),
|
|
foreground: color("#1d1c1d", "#d1d2d3"),
|
|
mutedForeground: color("#616061", "#ababad"),
|
|
border: color("#dddddd", "#323539"),
|
|
userAvatar: color("#007a5a", "#2eb67d"),
|
|
assistantAvatar: color("#4a154b", "#611f69"),
|
|
},
|
|
borderRadius: "sm",
|
|
maxWidth: "100%",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "compact",
|
|
userMessagePosition: "left",
|
|
animations: false,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
id: "grok",
|
|
name: "Grok",
|
|
description: "xAI's Grok-inspired minimal dark interface",
|
|
config: {
|
|
components: {
|
|
attachments: true,
|
|
branchPicker: false,
|
|
editMessage: true,
|
|
actionBar: {
|
|
copy: true,
|
|
reload: true,
|
|
speak: false,
|
|
feedback: true,
|
|
},
|
|
threadWelcome: false,
|
|
suggestions: false,
|
|
scrollToBottom: false,
|
|
markdown: true,
|
|
codeHighlightTheme: "dracula",
|
|
reasoning: false,
|
|
sources: false,
|
|
followUpSuggestions: false,
|
|
avatar: false,
|
|
typingIndicator: "dot",
|
|
loadingIndicator: "text",
|
|
loadingText: "Thinking...",
|
|
},
|
|
styles: {
|
|
theme: "dark",
|
|
colors: {
|
|
accent: color("#000000", "#ffffff"),
|
|
background: color("#ffffff", "#000000"),
|
|
foreground: color("#000000", "#ffffff"),
|
|
mutedForeground: color("#52525b", "#71717a"),
|
|
border: color("#e4e4e7", "#27272a"),
|
|
userMessage: color("#f4f4f5", "#18181b"),
|
|
composer: color("#f4f4f5", "#18181b"),
|
|
},
|
|
borderRadius: "full",
|
|
maxWidth: "48rem",
|
|
fontFamily: "system-ui",
|
|
fontSize: "14px",
|
|
messageSpacing: "comfortable",
|
|
userMessagePosition: "right",
|
|
animations: true,
|
|
},
|
|
},
|
|
},
|
|
];
|
|
|
|
export function getPresetById(id: string): Preset | undefined {
|
|
return PRESETS.find((preset) => preset.id === id);
|
|
}
|
|
|
|
export function configMatchesPreset(config: BuilderConfig): Preset | undefined {
|
|
return PRESETS.find(
|
|
(preset) => JSON.stringify(preset.config) === JSON.stringify(config),
|
|
);
|
|
}
|