@supernal/interface-nextjs 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +110 -0
- package/dist/index.d.mts +146 -11
- package/dist/index.d.ts +146 -11
- package/dist/index.js +3068 -479
- package/dist/index.mjs +2900 -329
- package/package.json +13 -1
package/dist/index.css
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
@import "katex/dist/katex.min.css";
|
|
2
|
+
|
|
3
|
+
/* src/styles/markdown.css */
|
|
4
|
+
.markdown-content {
|
|
5
|
+
font-size: 0.9375rem;
|
|
6
|
+
line-height: 1.6;
|
|
7
|
+
}
|
|
8
|
+
.markdown-content code {
|
|
9
|
+
font-family:
|
|
10
|
+
ui-monospace,
|
|
11
|
+
SFMono-Regular,
|
|
12
|
+
"SF Mono",
|
|
13
|
+
Menlo,
|
|
14
|
+
Monaco,
|
|
15
|
+
Consolas,
|
|
16
|
+
"Liberation Mono",
|
|
17
|
+
"Courier New",
|
|
18
|
+
monospace;
|
|
19
|
+
}
|
|
20
|
+
.markdown-content :not(pre) > code {
|
|
21
|
+
font-size: 0.875em;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
}
|
|
24
|
+
.mermaid-diagram {
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
}
|
|
29
|
+
.mermaid-diagram svg {
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
height: auto;
|
|
32
|
+
}
|
|
33
|
+
.mermaid-dark svg {
|
|
34
|
+
background: transparent;
|
|
35
|
+
}
|
|
36
|
+
.mermaid-light svg {
|
|
37
|
+
background: transparent;
|
|
38
|
+
}
|
|
39
|
+
.katex {
|
|
40
|
+
font-size: 1.05em;
|
|
41
|
+
}
|
|
42
|
+
.katex-display {
|
|
43
|
+
margin: 1rem 0;
|
|
44
|
+
overflow-x: auto;
|
|
45
|
+
overflow-y: hidden;
|
|
46
|
+
}
|
|
47
|
+
.dark .katex {
|
|
48
|
+
color: rgb(229, 231, 235);
|
|
49
|
+
}
|
|
50
|
+
.markdown-content table {
|
|
51
|
+
display: block;
|
|
52
|
+
max-width: 100%;
|
|
53
|
+
overflow-x: auto;
|
|
54
|
+
}
|
|
55
|
+
.markdown-content ul ul,
|
|
56
|
+
.markdown-content ol ul,
|
|
57
|
+
.markdown-content ul ol,
|
|
58
|
+
.markdown-content ol ol {
|
|
59
|
+
margin-top: 0.5rem;
|
|
60
|
+
margin-bottom: 0.5rem;
|
|
61
|
+
margin-left: 1.5rem;
|
|
62
|
+
}
|
|
63
|
+
.admonition {
|
|
64
|
+
margin: 1rem 0;
|
|
65
|
+
padding: 1rem;
|
|
66
|
+
border-left-width: 4px;
|
|
67
|
+
border-radius: 0.375rem;
|
|
68
|
+
}
|
|
69
|
+
.admonition-tip {
|
|
70
|
+
border-color: #10b981;
|
|
71
|
+
}
|
|
72
|
+
.admonition-warning {
|
|
73
|
+
border-color: #f59e0b;
|
|
74
|
+
}
|
|
75
|
+
.admonition-danger {
|
|
76
|
+
border-color: #ef4444;
|
|
77
|
+
}
|
|
78
|
+
.admonition-info {
|
|
79
|
+
border-color: #3b82f6;
|
|
80
|
+
}
|
|
81
|
+
.markdown-content input[type=checkbox] {
|
|
82
|
+
margin-right: 0.5rem;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
}
|
|
85
|
+
.markdown-content del {
|
|
86
|
+
opacity: 0.7;
|
|
87
|
+
}
|
|
88
|
+
.markdown-content h1,
|
|
89
|
+
.markdown-content h2,
|
|
90
|
+
.markdown-content h3,
|
|
91
|
+
.markdown-content h4,
|
|
92
|
+
.markdown-content h5,
|
|
93
|
+
.markdown-content h6 {
|
|
94
|
+
scroll-margin-top: 1rem;
|
|
95
|
+
}
|
|
96
|
+
.markdown-content pre[class*=language-] {
|
|
97
|
+
margin-top: 0;
|
|
98
|
+
margin-bottom: 0;
|
|
99
|
+
}
|
|
100
|
+
@media (max-width: 640px) {
|
|
101
|
+
.markdown-content {
|
|
102
|
+
font-size: 0.875rem;
|
|
103
|
+
}
|
|
104
|
+
.katex {
|
|
105
|
+
font-size: 1em;
|
|
106
|
+
}
|
|
107
|
+
.markdown-content pre {
|
|
108
|
+
font-size: 0.75rem;
|
|
109
|
+
}
|
|
110
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React$1 from 'react';
|
|
3
3
|
import { NavigationGraph, NavigationPath, NavigationContext, ToolMetadata } from '@supernal/interface/browser';
|
|
4
4
|
import { AIInterface } from '@supernal/interface';
|
|
5
5
|
export { AICommand, AIResponse } from '@supernal/interface';
|
|
6
6
|
|
|
7
7
|
interface SupernalProviderProps {
|
|
8
|
-
children: React.ReactNode;
|
|
8
|
+
children: React$1.ReactNode;
|
|
9
9
|
theme?: 'light' | 'dark' | 'auto';
|
|
10
10
|
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
11
11
|
mode?: 'fuzzy' | 'ai';
|
|
@@ -13,14 +13,19 @@ interface SupernalProviderProps {
|
|
|
13
13
|
welcomeMessage?: string;
|
|
14
14
|
routes?: Record<string, string>;
|
|
15
15
|
disabled?: boolean;
|
|
16
|
+
glassMode?: boolean;
|
|
17
|
+
logo?: string;
|
|
18
|
+
variant?: 'full' | 'floating' | 'drawer' | 'subtitle';
|
|
19
|
+
displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
|
|
20
|
+
drawerSide?: 'left' | 'right';
|
|
16
21
|
onNavigate?: (context: string) => void;
|
|
17
22
|
onToolExecute?: (tool: string, result: any) => void;
|
|
18
23
|
}
|
|
19
|
-
declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, glassMode, logo, variant, displayMode, drawerSide, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
|
|
20
25
|
|
|
21
26
|
declare function NavigationContextProvider({ value, children }: {
|
|
22
27
|
value: string;
|
|
23
|
-
children: React.ReactNode;
|
|
28
|
+
children: React$1.ReactNode;
|
|
24
29
|
}): react_jsx_runtime.JSX.Element;
|
|
25
30
|
/**
|
|
26
31
|
* Hook to access the NavigationGraph singleton
|
|
@@ -132,12 +137,15 @@ interface ChatContextType {
|
|
|
132
137
|
}
|
|
133
138
|
declare function useChatContext(): ChatContextType;
|
|
134
139
|
declare function ChatProvider({ children, mode, apiKey, onToolExecute, }: {
|
|
135
|
-
children: React.ReactNode;
|
|
140
|
+
children: React$1.ReactNode;
|
|
136
141
|
mode?: 'fuzzy' | 'ai';
|
|
137
142
|
apiKey?: string;
|
|
138
143
|
onToolExecute?: (tool: string, result: any) => void;
|
|
139
144
|
}): react_jsx_runtime.JSX.Element;
|
|
140
145
|
|
|
146
|
+
/**
|
|
147
|
+
* Type definitions for ChatBubble component
|
|
148
|
+
*/
|
|
141
149
|
interface Message {
|
|
142
150
|
id: string;
|
|
143
151
|
text: string;
|
|
@@ -145,10 +153,13 @@ interface Message {
|
|
|
145
153
|
timestamp: string;
|
|
146
154
|
}
|
|
147
155
|
type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'left-center' | 'right-center' | 'bottom-center';
|
|
148
|
-
type Variant = 'full' | 'floating';
|
|
156
|
+
type Variant = 'full' | 'floating' | 'drawer' | 'subtitle';
|
|
157
|
+
type DisplayMode = 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
|
|
149
158
|
interface ChatBubbleConfig {
|
|
150
159
|
/** Optional title for the chat header */
|
|
151
160
|
title?: string;
|
|
161
|
+
/** Optional logo URL or data URI. Defaults to embedded Supernal Interface logo */
|
|
162
|
+
logo?: string;
|
|
152
163
|
/** Optional avatar/icon (emoji, URL, or React node) */
|
|
153
164
|
avatar?: string | React.ReactNode;
|
|
154
165
|
/** Optional description shown in info popup */
|
|
@@ -182,7 +193,7 @@ interface ChatBubbleProps {
|
|
|
182
193
|
onClearChat?: () => void;
|
|
183
194
|
/** Positioning mode */
|
|
184
195
|
position?: Position;
|
|
185
|
-
/** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble */
|
|
196
|
+
/** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble, 'drawer' for mobile swipeable drawer */
|
|
186
197
|
variant?: Variant;
|
|
187
198
|
/** Configuration for branding, text, and theme */
|
|
188
199
|
config?: ChatBubbleConfig;
|
|
@@ -190,8 +201,70 @@ interface ChatBubbleProps {
|
|
|
190
201
|
defaultExpanded?: boolean;
|
|
191
202
|
/** Storage key for persisting state */
|
|
192
203
|
storageKey?: string;
|
|
204
|
+
/** Display mode: 'auto' switches based on viewport, or manually set 'full'/'floating'/'drawer' */
|
|
205
|
+
displayMode?: DisplayMode;
|
|
206
|
+
/** Which side the drawer opens from (for drawer variant) */
|
|
207
|
+
drawerSide?: 'left' | 'right';
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
declare const ChatBubble: ({ messages, onSendMessage, onClearChat, position, variant, config: userConfig, defaultExpanded, storageKey, displayMode: propDisplayMode, drawerSide: propDrawerSide, }: ChatBubbleProps) => react_jsx_runtime.JSX.Element | null;
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* SubtitleOverlay Component - Minimalist Voice-First Overlay
|
|
214
|
+
*
|
|
215
|
+
* A transparent subtitle-style chat overlay that floats over website content.
|
|
216
|
+
* Features:
|
|
217
|
+
* - Mobile-first: 100% opacity on mobile (always visible)
|
|
218
|
+
* - Desktop: Adaptive 10-90% opacity based on activity
|
|
219
|
+
* - Voice/text fusion with smart detection
|
|
220
|
+
* - Supernal @/ brand icon instead of microphone
|
|
221
|
+
* - Seamless mode switching
|
|
222
|
+
*/
|
|
223
|
+
|
|
224
|
+
interface SubtitleOverlayProps {
|
|
225
|
+
messages: Message[];
|
|
226
|
+
inputValue: string;
|
|
227
|
+
onInputChange: (value: string) => void;
|
|
228
|
+
onSendMessage: (text: string) => void;
|
|
229
|
+
voiceEnabled: boolean;
|
|
230
|
+
isListening: boolean;
|
|
231
|
+
onMicClick: () => void;
|
|
232
|
+
theme: 'light' | 'dark';
|
|
233
|
+
config: ChatBubbleConfig;
|
|
234
|
+
sttTranscript?: string;
|
|
235
|
+
resetTranscript?: () => void;
|
|
193
236
|
}
|
|
194
|
-
declare const
|
|
237
|
+
declare const SubtitleOverlay: React$1.FC<SubtitleOverlayProps>;
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* Chat Bubble Settings Modal Component
|
|
241
|
+
*
|
|
242
|
+
* Settings modal for ChatBubble configuration:
|
|
243
|
+
* - Theme (light/dark)
|
|
244
|
+
* - Glass mode (glassmorphism effect)
|
|
245
|
+
* - Notifications
|
|
246
|
+
*/
|
|
247
|
+
interface ChatBubbleSettings {
|
|
248
|
+
theme: 'light' | 'dark';
|
|
249
|
+
glassMode: boolean;
|
|
250
|
+
notifications: boolean;
|
|
251
|
+
displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
|
|
252
|
+
drawerSide?: 'left' | 'right';
|
|
253
|
+
subtitleOverlayEnabled?: boolean;
|
|
254
|
+
voiceEnabled: boolean;
|
|
255
|
+
usePremiumVoices: boolean;
|
|
256
|
+
autoReadResponses: boolean;
|
|
257
|
+
ttsSpeed: number;
|
|
258
|
+
sttAutoRecordTimeout: number;
|
|
259
|
+
sttAutoExecute: boolean;
|
|
260
|
+
}
|
|
261
|
+
interface ChatBubbleSettingsModalProps {
|
|
262
|
+
isOpen: boolean;
|
|
263
|
+
onClose: () => void;
|
|
264
|
+
settings: ChatBubbleSettings;
|
|
265
|
+
onSettingsChange: (settings: ChatBubbleSettings) => void;
|
|
266
|
+
}
|
|
267
|
+
declare function ChatBubbleSettingsModal({ isOpen, onClose, settings, onSettingsChange, }: ChatBubbleSettingsModalProps): react_jsx_runtime.JSX.Element | null;
|
|
195
268
|
|
|
196
269
|
interface ChatInputContextType {
|
|
197
270
|
/**
|
|
@@ -205,16 +278,78 @@ interface ChatInputContextType {
|
|
|
205
278
|
}
|
|
206
279
|
declare function useChatInput(): ChatInputContextType;
|
|
207
280
|
declare function ChatInputProvider({ children }: {
|
|
208
|
-
children: React.ReactNode;
|
|
281
|
+
children: React$1.ReactNode;
|
|
209
282
|
}): react_jsx_runtime.JSX.Element;
|
|
210
283
|
|
|
211
284
|
interface AutoNavigationContextProps {
|
|
212
|
-
children: React.ReactNode;
|
|
285
|
+
children: React$1.ReactNode;
|
|
213
286
|
routes?: Record<string, string>;
|
|
214
287
|
onNavigate?: (context: string) => void;
|
|
215
288
|
}
|
|
216
289
|
declare function AutoNavigationContext({ children, routes, onNavigate, }: AutoNavigationContextProps): react_jsx_runtime.JSX.Element;
|
|
217
290
|
|
|
291
|
+
/**
|
|
292
|
+
* Component Names - Named contracts for UI elements, variants, and layouts
|
|
293
|
+
*
|
|
294
|
+
* These provide type-safe references throughout the application.
|
|
295
|
+
* In production, consumers should generate their own ComponentNames using
|
|
296
|
+
* `si scan-names` and pass them via config.
|
|
297
|
+
*
|
|
298
|
+
* Naming convention:
|
|
299
|
+
* - Variant(X) → XVariant (e.g., Variant(ChatBubble) → ChatBubbleVariant)
|
|
300
|
+
* - Layout(X) → XLayout (e.g., Layout(Page) → PageLayout)
|
|
301
|
+
*/
|
|
302
|
+
declare const Components: {
|
|
303
|
+
readonly ChatToggleButton: "chat-toggle-button";
|
|
304
|
+
readonly ChatInput: "chat-message-input";
|
|
305
|
+
readonly ChatSendButton: "chat-send-button";
|
|
306
|
+
readonly ChatClearButton: "chat-clear-button";
|
|
307
|
+
};
|
|
308
|
+
/**
|
|
309
|
+
* ChatBubbleVariant - Display modes for the chat interface
|
|
310
|
+
* Usage: Variant(ChatBubble) → ChatBubbleVariant
|
|
311
|
+
*/
|
|
312
|
+
declare const ChatBubbleVariant: {
|
|
313
|
+
readonly full: "full";
|
|
314
|
+
readonly floating: "floating";
|
|
315
|
+
readonly drawer: "drawer";
|
|
316
|
+
readonly subtitle: "subtitle";
|
|
317
|
+
};
|
|
318
|
+
type ChatBubbleVariantType = keyof typeof ChatBubbleVariant;
|
|
319
|
+
type ChatBubbleVariantValue = typeof ChatBubbleVariant[ChatBubbleVariantType];
|
|
320
|
+
/**
|
|
321
|
+
* PageLayout - Page structure variants
|
|
322
|
+
* Usage: Layout(Page) → PageLayout
|
|
323
|
+
*/
|
|
324
|
+
declare const PageLayout: {
|
|
325
|
+
readonly default: "default";
|
|
326
|
+
readonly landing: "landing";
|
|
327
|
+
readonly docs: "docs";
|
|
328
|
+
readonly blog: "blog";
|
|
329
|
+
};
|
|
330
|
+
type PageLayoutType = keyof typeof PageLayout;
|
|
331
|
+
type PageLayoutValue = typeof PageLayout[PageLayoutType];
|
|
332
|
+
|
|
333
|
+
interface MessageRendererProps {
|
|
334
|
+
content: string;
|
|
335
|
+
theme?: 'light' | 'dark';
|
|
336
|
+
}
|
|
337
|
+
declare function MessageRenderer({ content, theme }: MessageRendererProps): react_jsx_runtime.JSX.Element;
|
|
338
|
+
|
|
339
|
+
interface CodeBlockProps {
|
|
340
|
+
children: string;
|
|
341
|
+
className?: string;
|
|
342
|
+
inline?: boolean;
|
|
343
|
+
theme?: 'light' | 'dark';
|
|
344
|
+
}
|
|
345
|
+
declare function CodeBlock({ children, className, inline, theme }: CodeBlockProps): react_jsx_runtime.JSX.Element;
|
|
346
|
+
|
|
347
|
+
interface MermaidDiagramProps {
|
|
348
|
+
chart: string;
|
|
349
|
+
theme?: 'light' | 'dark';
|
|
350
|
+
}
|
|
351
|
+
declare function MermaidDiagram({ chart, theme }: MermaidDiagramProps): react_jsx_runtime.JSX.Element;
|
|
352
|
+
|
|
218
353
|
/**
|
|
219
354
|
* Tool Manager - Centralized system for tool execution and feedback
|
|
220
355
|
*
|
|
@@ -335,4 +470,4 @@ declare function scoreToolMatch(query: string, tool: ToolMetadata): number;
|
|
|
335
470
|
*/
|
|
336
471
|
declare function findBestMatch(query: string, tools: ToolMetadata[]): FuzzyMatchResult;
|
|
337
472
|
|
|
338
|
-
export { AutoNavigationContext, ChatBubble, ChatInputProvider, ChatProvider, type CommandResult, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, NavigationContextProvider, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool };
|
|
473
|
+
export { AutoNavigationContext, ChatBubble, type ChatBubbleSettings, ChatBubbleSettingsModal, ChatBubbleVariant, type ChatBubbleVariantType, type ChatBubbleVariantValue, ChatInputProvider, ChatProvider, CodeBlock, type CommandResult, Components, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, MermaidDiagram, MessageRenderer, NavigationContextProvider, PageLayout, type PageLayoutType, type PageLayoutValue, SubtitleOverlay, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React$1 from 'react';
|
|
3
3
|
import { NavigationGraph, NavigationPath, NavigationContext, ToolMetadata } from '@supernal/interface/browser';
|
|
4
4
|
import { AIInterface } from '@supernal/interface';
|
|
5
5
|
export { AICommand, AIResponse } from '@supernal/interface';
|
|
6
6
|
|
|
7
7
|
interface SupernalProviderProps {
|
|
8
|
-
children: React.ReactNode;
|
|
8
|
+
children: React$1.ReactNode;
|
|
9
9
|
theme?: 'light' | 'dark' | 'auto';
|
|
10
10
|
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
11
11
|
mode?: 'fuzzy' | 'ai';
|
|
@@ -13,14 +13,19 @@ interface SupernalProviderProps {
|
|
|
13
13
|
welcomeMessage?: string;
|
|
14
14
|
routes?: Record<string, string>;
|
|
15
15
|
disabled?: boolean;
|
|
16
|
+
glassMode?: boolean;
|
|
17
|
+
logo?: string;
|
|
18
|
+
variant?: 'full' | 'floating' | 'drawer' | 'subtitle';
|
|
19
|
+
displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
|
|
20
|
+
drawerSide?: 'left' | 'right';
|
|
16
21
|
onNavigate?: (context: string) => void;
|
|
17
22
|
onToolExecute?: (tool: string, result: any) => void;
|
|
18
23
|
}
|
|
19
|
-
declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, glassMode, logo, variant, displayMode, drawerSide, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
|
|
20
25
|
|
|
21
26
|
declare function NavigationContextProvider({ value, children }: {
|
|
22
27
|
value: string;
|
|
23
|
-
children: React.ReactNode;
|
|
28
|
+
children: React$1.ReactNode;
|
|
24
29
|
}): react_jsx_runtime.JSX.Element;
|
|
25
30
|
/**
|
|
26
31
|
* Hook to access the NavigationGraph singleton
|
|
@@ -132,12 +137,15 @@ interface ChatContextType {
|
|
|
132
137
|
}
|
|
133
138
|
declare function useChatContext(): ChatContextType;
|
|
134
139
|
declare function ChatProvider({ children, mode, apiKey, onToolExecute, }: {
|
|
135
|
-
children: React.ReactNode;
|
|
140
|
+
children: React$1.ReactNode;
|
|
136
141
|
mode?: 'fuzzy' | 'ai';
|
|
137
142
|
apiKey?: string;
|
|
138
143
|
onToolExecute?: (tool: string, result: any) => void;
|
|
139
144
|
}): react_jsx_runtime.JSX.Element;
|
|
140
145
|
|
|
146
|
+
/**
|
|
147
|
+
* Type definitions for ChatBubble component
|
|
148
|
+
*/
|
|
141
149
|
interface Message {
|
|
142
150
|
id: string;
|
|
143
151
|
text: string;
|
|
@@ -145,10 +153,13 @@ interface Message {
|
|
|
145
153
|
timestamp: string;
|
|
146
154
|
}
|
|
147
155
|
type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'left-center' | 'right-center' | 'bottom-center';
|
|
148
|
-
type Variant = 'full' | 'floating';
|
|
156
|
+
type Variant = 'full' | 'floating' | 'drawer' | 'subtitle';
|
|
157
|
+
type DisplayMode = 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
|
|
149
158
|
interface ChatBubbleConfig {
|
|
150
159
|
/** Optional title for the chat header */
|
|
151
160
|
title?: string;
|
|
161
|
+
/** Optional logo URL or data URI. Defaults to embedded Supernal Interface logo */
|
|
162
|
+
logo?: string;
|
|
152
163
|
/** Optional avatar/icon (emoji, URL, or React node) */
|
|
153
164
|
avatar?: string | React.ReactNode;
|
|
154
165
|
/** Optional description shown in info popup */
|
|
@@ -182,7 +193,7 @@ interface ChatBubbleProps {
|
|
|
182
193
|
onClearChat?: () => void;
|
|
183
194
|
/** Positioning mode */
|
|
184
195
|
position?: Position;
|
|
185
|
-
/** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble */
|
|
196
|
+
/** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble, 'drawer' for mobile swipeable drawer */
|
|
186
197
|
variant?: Variant;
|
|
187
198
|
/** Configuration for branding, text, and theme */
|
|
188
199
|
config?: ChatBubbleConfig;
|
|
@@ -190,8 +201,70 @@ interface ChatBubbleProps {
|
|
|
190
201
|
defaultExpanded?: boolean;
|
|
191
202
|
/** Storage key for persisting state */
|
|
192
203
|
storageKey?: string;
|
|
204
|
+
/** Display mode: 'auto' switches based on viewport, or manually set 'full'/'floating'/'drawer' */
|
|
205
|
+
displayMode?: DisplayMode;
|
|
206
|
+
/** Which side the drawer opens from (for drawer variant) */
|
|
207
|
+
drawerSide?: 'left' | 'right';
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
declare const ChatBubble: ({ messages, onSendMessage, onClearChat, position, variant, config: userConfig, defaultExpanded, storageKey, displayMode: propDisplayMode, drawerSide: propDrawerSide, }: ChatBubbleProps) => react_jsx_runtime.JSX.Element | null;
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* SubtitleOverlay Component - Minimalist Voice-First Overlay
|
|
214
|
+
*
|
|
215
|
+
* A transparent subtitle-style chat overlay that floats over website content.
|
|
216
|
+
* Features:
|
|
217
|
+
* - Mobile-first: 100% opacity on mobile (always visible)
|
|
218
|
+
* - Desktop: Adaptive 10-90% opacity based on activity
|
|
219
|
+
* - Voice/text fusion with smart detection
|
|
220
|
+
* - Supernal @/ brand icon instead of microphone
|
|
221
|
+
* - Seamless mode switching
|
|
222
|
+
*/
|
|
223
|
+
|
|
224
|
+
interface SubtitleOverlayProps {
|
|
225
|
+
messages: Message[];
|
|
226
|
+
inputValue: string;
|
|
227
|
+
onInputChange: (value: string) => void;
|
|
228
|
+
onSendMessage: (text: string) => void;
|
|
229
|
+
voiceEnabled: boolean;
|
|
230
|
+
isListening: boolean;
|
|
231
|
+
onMicClick: () => void;
|
|
232
|
+
theme: 'light' | 'dark';
|
|
233
|
+
config: ChatBubbleConfig;
|
|
234
|
+
sttTranscript?: string;
|
|
235
|
+
resetTranscript?: () => void;
|
|
193
236
|
}
|
|
194
|
-
declare const
|
|
237
|
+
declare const SubtitleOverlay: React$1.FC<SubtitleOverlayProps>;
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* Chat Bubble Settings Modal Component
|
|
241
|
+
*
|
|
242
|
+
* Settings modal for ChatBubble configuration:
|
|
243
|
+
* - Theme (light/dark)
|
|
244
|
+
* - Glass mode (glassmorphism effect)
|
|
245
|
+
* - Notifications
|
|
246
|
+
*/
|
|
247
|
+
interface ChatBubbleSettings {
|
|
248
|
+
theme: 'light' | 'dark';
|
|
249
|
+
glassMode: boolean;
|
|
250
|
+
notifications: boolean;
|
|
251
|
+
displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
|
|
252
|
+
drawerSide?: 'left' | 'right';
|
|
253
|
+
subtitleOverlayEnabled?: boolean;
|
|
254
|
+
voiceEnabled: boolean;
|
|
255
|
+
usePremiumVoices: boolean;
|
|
256
|
+
autoReadResponses: boolean;
|
|
257
|
+
ttsSpeed: number;
|
|
258
|
+
sttAutoRecordTimeout: number;
|
|
259
|
+
sttAutoExecute: boolean;
|
|
260
|
+
}
|
|
261
|
+
interface ChatBubbleSettingsModalProps {
|
|
262
|
+
isOpen: boolean;
|
|
263
|
+
onClose: () => void;
|
|
264
|
+
settings: ChatBubbleSettings;
|
|
265
|
+
onSettingsChange: (settings: ChatBubbleSettings) => void;
|
|
266
|
+
}
|
|
267
|
+
declare function ChatBubbleSettingsModal({ isOpen, onClose, settings, onSettingsChange, }: ChatBubbleSettingsModalProps): react_jsx_runtime.JSX.Element | null;
|
|
195
268
|
|
|
196
269
|
interface ChatInputContextType {
|
|
197
270
|
/**
|
|
@@ -205,16 +278,78 @@ interface ChatInputContextType {
|
|
|
205
278
|
}
|
|
206
279
|
declare function useChatInput(): ChatInputContextType;
|
|
207
280
|
declare function ChatInputProvider({ children }: {
|
|
208
|
-
children: React.ReactNode;
|
|
281
|
+
children: React$1.ReactNode;
|
|
209
282
|
}): react_jsx_runtime.JSX.Element;
|
|
210
283
|
|
|
211
284
|
interface AutoNavigationContextProps {
|
|
212
|
-
children: React.ReactNode;
|
|
285
|
+
children: React$1.ReactNode;
|
|
213
286
|
routes?: Record<string, string>;
|
|
214
287
|
onNavigate?: (context: string) => void;
|
|
215
288
|
}
|
|
216
289
|
declare function AutoNavigationContext({ children, routes, onNavigate, }: AutoNavigationContextProps): react_jsx_runtime.JSX.Element;
|
|
217
290
|
|
|
291
|
+
/**
|
|
292
|
+
* Component Names - Named contracts for UI elements, variants, and layouts
|
|
293
|
+
*
|
|
294
|
+
* These provide type-safe references throughout the application.
|
|
295
|
+
* In production, consumers should generate their own ComponentNames using
|
|
296
|
+
* `si scan-names` and pass them via config.
|
|
297
|
+
*
|
|
298
|
+
* Naming convention:
|
|
299
|
+
* - Variant(X) → XVariant (e.g., Variant(ChatBubble) → ChatBubbleVariant)
|
|
300
|
+
* - Layout(X) → XLayout (e.g., Layout(Page) → PageLayout)
|
|
301
|
+
*/
|
|
302
|
+
declare const Components: {
|
|
303
|
+
readonly ChatToggleButton: "chat-toggle-button";
|
|
304
|
+
readonly ChatInput: "chat-message-input";
|
|
305
|
+
readonly ChatSendButton: "chat-send-button";
|
|
306
|
+
readonly ChatClearButton: "chat-clear-button";
|
|
307
|
+
};
|
|
308
|
+
/**
|
|
309
|
+
* ChatBubbleVariant - Display modes for the chat interface
|
|
310
|
+
* Usage: Variant(ChatBubble) → ChatBubbleVariant
|
|
311
|
+
*/
|
|
312
|
+
declare const ChatBubbleVariant: {
|
|
313
|
+
readonly full: "full";
|
|
314
|
+
readonly floating: "floating";
|
|
315
|
+
readonly drawer: "drawer";
|
|
316
|
+
readonly subtitle: "subtitle";
|
|
317
|
+
};
|
|
318
|
+
type ChatBubbleVariantType = keyof typeof ChatBubbleVariant;
|
|
319
|
+
type ChatBubbleVariantValue = typeof ChatBubbleVariant[ChatBubbleVariantType];
|
|
320
|
+
/**
|
|
321
|
+
* PageLayout - Page structure variants
|
|
322
|
+
* Usage: Layout(Page) → PageLayout
|
|
323
|
+
*/
|
|
324
|
+
declare const PageLayout: {
|
|
325
|
+
readonly default: "default";
|
|
326
|
+
readonly landing: "landing";
|
|
327
|
+
readonly docs: "docs";
|
|
328
|
+
readonly blog: "blog";
|
|
329
|
+
};
|
|
330
|
+
type PageLayoutType = keyof typeof PageLayout;
|
|
331
|
+
type PageLayoutValue = typeof PageLayout[PageLayoutType];
|
|
332
|
+
|
|
333
|
+
interface MessageRendererProps {
|
|
334
|
+
content: string;
|
|
335
|
+
theme?: 'light' | 'dark';
|
|
336
|
+
}
|
|
337
|
+
declare function MessageRenderer({ content, theme }: MessageRendererProps): react_jsx_runtime.JSX.Element;
|
|
338
|
+
|
|
339
|
+
interface CodeBlockProps {
|
|
340
|
+
children: string;
|
|
341
|
+
className?: string;
|
|
342
|
+
inline?: boolean;
|
|
343
|
+
theme?: 'light' | 'dark';
|
|
344
|
+
}
|
|
345
|
+
declare function CodeBlock({ children, className, inline, theme }: CodeBlockProps): react_jsx_runtime.JSX.Element;
|
|
346
|
+
|
|
347
|
+
interface MermaidDiagramProps {
|
|
348
|
+
chart: string;
|
|
349
|
+
theme?: 'light' | 'dark';
|
|
350
|
+
}
|
|
351
|
+
declare function MermaidDiagram({ chart, theme }: MermaidDiagramProps): react_jsx_runtime.JSX.Element;
|
|
352
|
+
|
|
218
353
|
/**
|
|
219
354
|
* Tool Manager - Centralized system for tool execution and feedback
|
|
220
355
|
*
|
|
@@ -335,4 +470,4 @@ declare function scoreToolMatch(query: string, tool: ToolMetadata): number;
|
|
|
335
470
|
*/
|
|
336
471
|
declare function findBestMatch(query: string, tools: ToolMetadata[]): FuzzyMatchResult;
|
|
337
472
|
|
|
338
|
-
export { AutoNavigationContext, ChatBubble, ChatInputProvider, ChatProvider, type CommandResult, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, NavigationContextProvider, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool };
|
|
473
|
+
export { AutoNavigationContext, ChatBubble, type ChatBubbleSettings, ChatBubbleSettingsModal, ChatBubbleVariant, type ChatBubbleVariantType, type ChatBubbleVariantValue, ChatInputProvider, ChatProvider, CodeBlock, type CommandResult, Components, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, MermaidDiagram, MessageRenderer, NavigationContextProvider, PageLayout, type PageLayoutType, type PageLayoutValue, SubtitleOverlay, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool };
|