forked from CopilotKit/CopilotKit
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathconsole-styling.ts
More file actions
126 lines (110 loc) · 3.83 KB
/
Copy pathconsole-styling.ts
File metadata and controls
126 lines (110 loc) · 3.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
* Console styling utilities for CopilotKit branded messages
* Provides consistent, readable colors across light and dark console themes
*/
/**
* Color palette optimized for console readability
*/
export const ConsoleColors = {
/** Primary brand blue - for titles and links */
primary: "#007acc",
/** Success green - for positive messaging */
success: "#22c55e",
/** Purple - for feature highlights */
feature: "#a855f7",
/** Red - for calls-to-action */
cta: "#ef4444",
/** Cyan - for closing statements */
info: "#06b6d4",
/** Inherit console default - for body text */
inherit: "inherit",
/** Warning style */
warning: "#f59e0b",
} as const;
/**
* Console style templates for common patterns
*/
export const ConsoleStyles = {
/** Large header style */
header: `color: ${ConsoleColors.warning}; font-weight: bold; font-size: 16px;`,
/** Section header style */
section: `color: ${ConsoleColors.success}; font-weight: bold;`,
/** Feature highlight style */
highlight: `color: ${ConsoleColors.feature}; font-weight: bold;`,
/** Call-to-action style */
cta: `color: ${ConsoleColors.success}; font-weight: bold;`,
/** Info style */
info: `color: ${ConsoleColors.info}; font-weight: bold;`,
/** Link style */
link: `color: ${ConsoleColors.primary}; text-decoration: underline;`,
/** Body text - inherits console theme */
body: `color: ${ConsoleColors.inherit};`,
/** Warning style */
warning: `color: ${ConsoleColors.cta}; font-weight: bold;`,
} as const;
/**
* Styled console message for CopilotKit Platform promotion
* Displays a beautiful, branded advertisement in the console
*/
export function logCopilotKitPlatformMessage() {
console.log(
`%cCopilotKit Warning%c
useCopilotChatHeadless_c provides full compatibility with CopilotKit's newly released Headless UI feature set. To enable this premium feature, add your public license key, available for free at:
%chttps://dashboard.operations.copilotkit.ai%c
Alternatively, useCopilotChat is available for basic programmatic control, and does not require an API key.
To learn more about premium features, read the documentation here:
%chttps://docs.copilotkit.ai/premium/overview%c`,
ConsoleStyles.header,
ConsoleStyles.body,
ConsoleStyles.cta,
ConsoleStyles.body,
ConsoleStyles.link,
ConsoleStyles.body,
);
}
export function publicApiKeyRequired(feature: string) {
console.log(
`
%cCopilotKit Warning%c \n
In order to use ${feature}, you need to add your CopilotKit API key, available for free at https://dashboard.operations.copilotkit.ai.
`.trim(),
ConsoleStyles.header,
ConsoleStyles.body,
);
}
/**
* Create a styled console message with custom content
*
* @param template - Template string with %c placeholders
* @param styles - Array of style strings matching the %c placeholders
*
* @example
* ```typescript
* logStyled(
* '%cCopilotKit%c Welcome to the platform!',
* [ConsoleStyles.header, ConsoleStyles.body]
* );
* ```
*/
export function logStyled(template: string, styles: string[]) {
console.log(template, ...styles);
}
/**
* Quick styled console methods for common use cases
*/
export const styledConsole = {
/** Log a success message */
success: (message: string) =>
logStyled(`%c✅ ${message}`, [ConsoleStyles.section]),
/** Log an info message */
info: (message: string) => logStyled(`%cℹ️ ${message}`, [ConsoleStyles.info]),
/** Log a feature highlight */
feature: (message: string) =>
logStyled(`%c✨ ${message}`, [ConsoleStyles.highlight]),
/** Log a call-to-action */
cta: (message: string) => logStyled(`%c🚀 ${message}`, [ConsoleStyles.cta]),
/** Log the CopilotKit platform promotion */
logCopilotKitPlatformMessage: logCopilotKitPlatformMessage,
/** Log a `publicApiKeyRequired` warning */
publicApiKeyRequired: publicApiKeyRequired,
} as const;